progressColumn: add stack style

MuiseDestiny · Mar 8, 2023 · 5ef7c48 · 5ef7c48
1 parent f31b9c0
commit 5ef7c48
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 36 deletions.
diff --git a/addon/chrome/locale/zh-CN/overlay.dtd b/addon/chrome/locale/zh-CN/overlay.dtd
@@ -1,2 +1,2 @@
-<!ENTITY zotero.__addonRef__.help.version.label "__addonName__  __buildVersion__">
+<!ENTITY zotero.__addonRef__.help.version.label "__addonName__ __buildVersion__">
 <!ENTITY zotero.__addonRef__.help.releasetime.label "Build __buildTime__">
diff --git a/src/modules/progress.ts b/src/modules/progress.ts
@@ -138,7 +138,6 @@ export default class Progress {
  return container
  }
 
-
  public bar(values: number[], color: string = "#FD8A8A", opacity: string = "1"): HTMLElement {
  let maxValue = [...values].sort((a, b) => b - a)[0]
  let span = ztoolkit.UI.createElement(document, "span", {
@@ -181,6 +180,7 @@ export default class Progress {
  }
  return span
  }
+
  /**
  * 线形进度
  * 显示百分比
@@ -245,6 +245,65 @@ export default class Progress {
 
  }
 
+ public stack(values: number[], record: { page: number; data: { [pageIndex: string]: { value: number; color: string}[] }}, opacity: string) {
+ let maxValue = [...values].sort((a, b) => b - a)[0]
+ let span = ztoolkit.UI.createElement(document, "span", {
+ styles: {
+ display: "inline-block",
+ width: "100%",
+ height: "20px",
+ opacity
+ }
+ })
+ for (let pageIndex = 0; pageIndex < record.page;pageIndex++) {
+ const styles = {
+ position: "absolute",
+ display: "inline-block",
+ bottom: "0",
+ left: "0",
+ width: "100%",
+ }
+ span.appendChild(
+ ztoolkit.UI.createElement(document, "span", {
+ classList: ["bar-box"],
+ styles: {
+ display: "inline-block",
+ height: "100%",
+ width: `${100 / record.page}%`,
+ position: "relative"
+ },
+ children: [
+ {
+ tag: "span",
+ styles: Object.assign({}, styles, {
+ height: `${100 * values[pageIndex] / maxValue}%`,
+ display: "flex",
+ flexDirection: "column"
+ }),
+ children: (() => {
+ if (!record.data[pageIndex]) { return []}
+ let arr = []
+ for (let data of record.data[pageIndex]) {
+ arr.push({
+ tag: "span",
+ styles: {
+ width: "100%",
+ display: "inline-block",
+ height: `${data.value / values[pageIndex] * 100}%`,
+ backgroundColor: data.color
+ }
+ })
+ }
+ return arr
+ })()
+ }
+ ]
+ })
+ )
+ }
+ return span
+ }
+
  static getRGB(color: string) {
  var sColor = color.toLowerCase();
  //十六进制颜色值的正则表达式

diff --git a/src/modules/views.ts b/src/modules/views.ts
@@ -8,7 +8,6 @@ import utils from "./utils";
 import Bubble from "./bubble";
 import { Tags } from "./tags";
 
-
 export default class Views {
  private progress: Progress;
  private addonItem: AddonItem;
@@ -25,7 +24,7 @@ export default class Views {
  (original) =>
  async function () {
  // @ts-ignore
- let items = await original.bind(this)();
+ let items = await original.call(this);
  const originalLength = items.length
  for (let i = 0; i < filterFunctions.length; i++){
  items = filterFunctions[i](items)
@@ -863,46 +862,53 @@ export default class Views {
  try {
  page = Number(this.addonItem.get(item, "readingTime").page)
  } catch { }
- let record: Record = { page, data: {} }
+ let annoRecord: any = { page, data: {} }
  let pdfItem
  const cacheKey = `${item.key}-getBestAttachment`
  pdfItem = this.cache[cacheKey]
  if (!pdfItem) { return span }
  const annoArray = pdfItem.getAnnotations()
  if (annoArray.length == 0) { return span }
  annoArray.forEach((anno: any) => {
- const charNum = (anno._annotationText || anno._annotationComment || "").length
+ const charNum = (anno.annotationText || anno.annotationComment || "").length
  try {
- let pageIndex = Number(JSON.parse(anno._annotationPosition).pageIndex)
+ let pageIndex = Number(JSON.parse(anno.annotationPosition).pageIndex)
  const _page = pageIndex + 1
  page = _page > page ? _page : page
- if (pageIndex in record.data == false) {
- record.data[pageIndex] = charNum
- } else {
- // @ts-ignore
- record.data[pageIndex] += charNum
- }
+ annoRecord.data[pageIndex] ??= []
+ annoRecord.data[pageIndex].push({ value: charNum, color: anno.annotationColor})
  } catch { }
  })
- record.page = page
- let values = []
- for (let i = 0; i < record.page; i++) {
- values.push(parseFloat(record.data[i] as string) || 0)
- }
- if ([...values].sort((a, b) => b -a )[0] == 0) { return span}
+ annoRecord.page = page
  const style = Zotero.Prefs.get(
  `${config.addonRef}.progressColumn.style`
  ) as string || "bar"
- // @ts-ignore
- let progressNode = (new Progress())[style](
- values,
- Zotero.Prefs.get(
- `${config.addonRef}.progressColumn.color`
- ) as string,
- Zotero.Prefs.get(
- `${config.addonRef}.progressColumn.opacity`
- ) as string
- )
+ const color = Zotero.Prefs.get(
+ `${config.addonRef}.progressColumn.color`
+ ) as string;
+ const opacity = Zotero.Prefs.get(
+ `${config.addonRef}.progressColumn.opacity`
+ ) as string;
+ let progressNode
+ const UI = new Progress()
+ let values = []
+ for (let i = 0; i < annoRecord.page; i++) {
+ values.push(annoRecord.data[i] ? annoRecord.data[i].map((i: any)=>i.value).reduce((a: any, b: any) => a + b) : 0)
+ }
+ console.log(annoRecord, values)
+
+ if (style != "stack") {
+ // 不是stack，需要精简数据
+ if ([...values].sort((a, b) => b -a )[0] == 0) { return span}
+ // @ts-ignore
+ progressNode = UI[style](
+ values,
+ color,
+ opacity
+ )
+ } else {
+ progressNode = UI.stack(values, annoRecord, opacity);
+ }
  span.appendChild(progressNode)
  return span;
  },
@@ -915,7 +921,7 @@ export default class Views {
  prefKey: "progressColumn.style",
  name: "Style",
  type: "select",
- values: ["bar", "line", "opacity"]
+ values: ["bar", "line", "opacity", "stack"]
  },
  {
  prefKey: "progressColumn.color",
@@ -2249,7 +2255,7 @@ export default class Views {
  textAlign: "justify"
  },
  properties: {
- innerText: xhr.response.choices[0].message.content.substr(2)
+ innerText: xhr.response.choices[0].message.content.replace(/^\n*/, "")
  }
  }
  ]
@@ -3694,8 +3700,11 @@ export default class Views {
  (index: number, selection: object, oldDiv: HTMLDivElement, columns: any[]) => {
  const div = original.call(ZoteroPane.collectionsView, index, selection, oldDiv, columns)
  const ref = ZoteroPane.collectionsView.getRow(index).ref!
- const key = JSON.stringify(ref.key || ref) + "collection-add-number"
  if (index > 0) {
+ let key: string;
+ try {
+ key = JSON.stringify(ref.key || ref) + "collection-add-number"
+ } catch { return div }
  window.setTimeout(async () => {
  let getCollectionAllItemNumber = async (c: any) => {
  let s = (await c.getChildItems()).length
@@ -3748,10 +3757,10 @@ export default class Views {
  let collection = ref;
  const childItemNumber = (await collection.getChildItems()).length
  text = childItemNumber
- const offspringItemNumber = await getCollectionAllItemNumber(collection)
- if (childItemNumber != offspringItemNumber) {
- text = `<span style="opacity: 0.5; margin-right: 6px;">${childItemNumber}</span>${offspringItemNumber}`
- }
+ // const offspringItemNumber = await getCollectionAllItemNumber(collection)
+ // if (childItemNumber != offspringItemNumber) {
+ //  text = `<span style="opacity: 0.5; margin-right: 6px;">${childItemNumber}</span>${offspringItemNumber}`
+ // }
  }
  else if (ref?._ObjectType == "Search") {
  text = (await ref.search()).length