Merge pull request #36 from svtardust:svtardust/issue30

#30 自定义配色

CHANGELOG.md

@@ -1,3 +1,7 @@
+- 1.0.14
+
+1. 新特性：自定义配色
+
 - 1.0.13
 
 1. 修复勾选显示位置在顶栏左侧后，重启失效问题

README.md

@@ -13,6 +13,7 @@
 2. **日记模式**：可只统计最近12个月日记(指daily note)中所创建的内容快(热力图设置中启用此选项 **仅支持使用默认格式创建的日记** )
 
 3. **忽略文件模式** ： 可忽略文件统计(热力图设置中启用此选项)
+4. **自定义配色** ：可以自定义配色，请使用HEX颜色自定义五种颜色，并且需要用英文逗号隔开，案例：`#ebedf0,#9be9a8,#40c463,#30a14e,#216e39`
 
 > **当只想统计日记时，可启用日记模式，该模式启用后，忽略文件模式区域会被清空，热力图需要手动刷新方可正常显示，当想忽略文件时，可使用忽略文件模式，可按照案例一和案例二操作，同时会关闭日记模式，同样热力图刷新后会正常显示**
 
@@ -82,6 +83,7 @@ Calendar-heatmap 版本v0.0.3（包含）以前为挂件版本，如果想用使
 **主要更新**
 
 1. 修复勾选显示位置在顶栏左侧后，重启失效问题
+2. 新特性：可以自定义配色
 
 具体可看[变更日志](CHANGELOG.md)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "calendar-heatmap",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "type": "module",
   "description": "日历热力图",
   "repository": "https://githubfast.com/svtardust/Calendar-heatmap",

plugin.json

@@ -2,7 +2,7 @@
   "name": "Calendar-heatmap",
   "author": "svtardust",
   "url": "https://github.com/svtardust/Calendar-heatmap",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "minAppVersion": "2.8.10",
   "backends": [
     "windows",

src/CustomElement.ts

@@ -51,6 +51,16 @@ export const settingElement = `<div class='config__tab-container' id='heatmapSet
                                     </div>
                                     <input class='b3-switch fn__flex-center' id='calendarHeatmapConfigCheckbox' type='checkbox'>
                                   </lable>
+                                  <label class='b3-label fn__flex'>
+                                    <div class='fn__flex-1'>
+                                      自定义配色
+                                      <div class="b3-label__text">请使用英文状态下的逗号 <code class="fn__code">,</code> 进行分隔，请输入五种配色，请使用<code class="fn__code">HEX</code>颜色，例子：<code class="fn_code">#ebedf0,#9be9a8,#40c463,#30a14e,#216e39</code></div>
+                                      <div class='fn__hr'></div>
+                                      <textarea class='b3-text-field fn__block' 
+                                                id='calendarHeatmapConfigColor' 
+                                                style='height: 30px;' placeholder=''></textarea>
+                                    </div>
+                                  </label>
                                   <label class='b3-label fn__flex'>
                                     <div class='fn__flex-1'>
                                       忽略统计文件

src/CustomEvents.ts

@@ -25,15 +25,23 @@ export async function setting() {
     width: '800px',
     height: '400px',
   })
-  const {isdailyNote, heatmapPosition, ignoreText} = await getData()
+  const {isdailyNote, heatmapPosition, ignoreText, customColor} = await getData()
   document.getElementById('calendarHeatmapConfigCheckbox')['checked'] = isdailyNote
   document.getElementById('calendarHeatmapConfigPosition')['checked'] = heatmapPosition
   if (ignoreText != null) {
     document.getElementById('calendarHeatmapConfigText')['value'] = ignoreText
   }
+  if (customColor.length != 0) {
+    let color = ''
+    customColor.forEach(item => {
+      color = color + `${color === '' ? '' : ','}` + item
+    })
+    document.getElementById('calendarHeatmapConfigColor')['value'] = color
+  }
   dialog.element.querySelector('#calendarHeatmapConfigCheckbox').addEventListener('click', calendarHeatmapConfigCheckd)
-  dialog.element.querySelector('#calendarHeatmapConfigText').addEventListener('input', calendarHeatmapConfigtextarea)
   dialog.element.querySelector('#calendarHeatmapConfigPosition').addEventListener('click', calendarHeatmapConfigPosition)
+  dialog.element.querySelector('#calendarHeatmapConfigColor').addEventListener('input', calendarHeatmapConfigColor)
+  dialog.element.querySelector('#calendarHeatmapConfigText').addEventListener('input', calendarHeatmapConfigtextarea)
 }
 
 async function statisticalRegionData() {
@@ -88,3 +96,16 @@ async function calendarHeatmapConfigtextarea(event) {
     await saveData(JSON.stringify(heatmapConfig))
   }
 }
+
+async function calendarHeatmapConfigColor(event) {
+  const text = event.target.value
+  const heatmapConfig = await getData();
+  const index = text.indexOf(',');
+  if (index != -1) {
+    const arrData = text.split(',')
+    if (arrData.length === 5) {
+      heatmapConfig.customColor = arrData
+      await saveData(JSON.stringify(heatmapConfig))
+    }
+  }
+}

src/index.ts

@@ -24,7 +24,6 @@ export default class CalendarHeatmap extends Plugin {
     let heatPosition: 'right' | 'left' = 'right'
     const heatmapConfig = await this.loadData('config.json')
     if (heatmapConfig === null || heatmapConfig === "") {
-      console.log(JSON.stringify(defaultConfig))
       await this.saveData('config.json', JSON.stringify(defaultConfig))
     } else {
       const {heatmapPosition} = heatmapConfig
@@ -49,7 +48,7 @@ export default class CalendarHeatmap extends Plugin {
   /**
    * 设置窗口
    */
-  async openSetting(): void {
+  async openSetting() {
     await setting()
   }
 }