feta(*): tow feat and bug fix

1. add scale fn to adept large screen 2. change batch import mottos method 3. fix time end black screen bug
hooozen · Dec 28, 2021 · b2822af · b2822af
1 parent 61a7ee6
commit b2822af
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 133 deletions.
diff --git a/README.md b/README.md
@@ -46,19 +46,21 @@
 
 - 若自定义警句为空，且未勾选【使用默认警句】，则常显警句“此时无声胜有声”作为提醒.
 
-#### \* 批量导入自定义警句（可能不稳定）
+#### ~~\* 批量导入自定义警句（可能不稳定）~~（已删除，查看更新）
 
-_由于 WallPaper Engine 接口的限制，不支持导入文本文件，所以我这里使用了一个小 Trick 绕过了相关限制. 所以该功能可能不稳定._
+~~_由于 WallPaper Engine 接口的限制，不支持导入文本文件，所以我这里使用了一个小 Trick 绕过了相关限制. 所以该功能可能不稳定._~~
 
-新建纯文本文件，使用一下模板填写自定义警句：
+~~新建纯文本文件，使用一下模板填写自定义警句：~~
 
 ```javascript
+/*已删除
 GOLOBAL.batchImportMottos([
   "批量自定义警句 1",
   "批量自定义警句 2",
   "批量自定义警句 3",
   \\ ... 添加更多
 ])
+*/
 ```
 
 填写自定义警句后，**将文件另存为 `jpg` 或 `png` 格式**！
@@ -70,8 +72,8 @@ GOLOBAL.batchImportMottos([
 
 * 有问题和需求可以提 `Issue`，在 steam 上留言我很少看到.
 
-* 点个 star 也行吧
+* 点个 star 吗？
 
-* 最近在开发一款 Hexo 的学术风主题，有需要的可以[看下](https://github.com/hooozen/hexo-theme-academic).
+* ~~最近~~在开发一款 Hexo 的学术风主题，有需要的可以[看下](https://github.com/hooozen/hexo-theme-academic).
 
 * 没了
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
   <div id="outer">
     <div class="bg" id="bg"></div>
 
-    <div class="main">
+    <div class="main" id="main">
       <div class="clock-outer" id="clockOuter">
         <div class="clock-num" id="clockNum">
           <div class="clock-num__time">

diff --git a/project.json b/project.json
@@ -6,51 +6,6 @@
 	{
 		"properties" : 
 		{
-			"customMotto1" : 
-			{
-				"condition" : "customMottoEnable.value == true",
-				"index" : 5,
-				"order" : 105,
-				"text" : "自定义警句1",
-				"type" : "textinput",
-				"value" : ""
-			},
-			"customMotto2" : 
-			{
-				"condition" : "customMottoEnable.value == true",
-				"index" : 6,
-				"order" : 106,
-				"text" : "自定义警句2",
-				"type" : "textinput",
-				"value" : ""
-			},
-			"customMotto3" : 
-			{
-				"condition" : "customMottoEnable.value == true",
-				"index" : 7,
-				"order" : 107,
-				"text" : "自定义警句3",
-				"type" : "textinput",
-				"value" : ""
-			},
-			"customMotto4" : 
-			{
-				"condition" : "customMottoEnable.value == true",
-				"index" : 8,
-				"order" : 108,
-				"text" : "自定义警句4",
-				"type" : "textinput",
-				"value" : ""
-			},
-			"customMotto5" : 
-			{
-				"condition" : "customMottoEnable.value == true",
-				"index" : 9,
-				"order" : 109,
-				"text" : "自定义警句5",
-				"type" : "textinput",
-				"value" : ""
-			},
 			"customMottoEnable" : 
 			{
 				"index" : 3,
@@ -59,11 +14,20 @@
 				"type" : "bool",
 				"value" : false
 			},
+			"customMottos" : 
+			{
+				"condition" : "customMottoEnable.value == true",
+				"index" : 5,
+				"order" : 105,
+				"text" : "自定义警句(使用+分隔)",
+				"type" : "textinput",
+				"value" : ""
+			},
 			"deadline" : 
 			{
 				"index" : 1,
 				"order" : 101,
-				"text" : "截止日期（YYYY-MM-DD）",
+				"text" : "截止日期(YYYY-MM-DD HH:mm:ss)",
 				"type" : "textinput",
 				"value" : ""
 			},
@@ -76,14 +40,18 @@
 				"type" : "directory",
 				"value" : ""
 			},
-			"mottosFile" : 
+			"scaleRate" : 
 			{
-				"condition" : "customMottoEnable.value == true",
-				"index" : 10,
-				"order" : 110,
-				"text" : "*批量导入（查看教程）",
-				"type" : "file",
-				"value" : ""
+				"fraction" : true,
+				"index" : 8,
+				"max" : 200,
+				"min" : 75,
+				"order" : 108,
+				"precision" : 1,
+				"step" : 1,
+				"text" : "缩放%",
+				"type" : "slider",
+				"value" : 100
 			},
 			"schemecolor" : 
 			{
@@ -94,17 +62,17 @@
 			},
 			"showClock" : 
 			{
-				"index" : 11,
-				"order" : 111,
+				"index" : 6,
+				"order" : 106,
 				"text" : "显示时钟",
 				"type" : "bool",
 				"value" : false
 			},
 			"showNumClock" : 
 			{
 				"condition" : "showClock.value == true",
-				"index" : 12,
-				"order" : 112,
+				"index" : 7,
+				"order" : 107,
 				"text" : "显示数字时钟",
 				"type" : "bool",
 				"value" : true
@@ -132,7 +100,7 @@
 	"tags" : [ "Landscape" ],
 	"title" : "倒计时 —— 励志语句（自定义/考研/公考/高考/中考/年末）",
 	"type" : "Web",
-	"version" : 8,
+	"version" : 10,
 	"visibility" : "public",
 	"workshopid" : "2222111958",
 	"workshopurl" : "steam://url/CommunityFilePage/2222111958"

diff --git a/script/main.js b/script/main.js
@@ -2,6 +2,8 @@ function $(id) {
   return document.querySelector(id)
 }
 
+var mainEl = $('#main')
+
 const weekday = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
 
 const defaultMottos = [
@@ -42,8 +44,9 @@ window.wallpaperPropertyListener = {
         $('#targetYear').innerText = properties.title.value;
     }
     if (properties.deadline) {
-      if (properties.deadline.value)
-        window.GOLOBAL.deadline.date = new Date(properties.deadline.value)
+      if (properties.deadline.value) {
+        GOLOBAL.deadline.date = new Date(properties.deadline.value)
+      }
     }
     if (properties.maskTransparency) {
       if (properties.maskTransparency.value) {
@@ -70,43 +73,15 @@ window.wallpaperPropertyListener = {
       GOLOBAL.setCyclicMottos()
     }
 
-    if (properties.customMotto1) {
-      GOLOBAL.addCustomMotto(properties.customMotto1.value, 1)
-    }
-    if (properties.customMotto2) {
-      GOLOBAL.addCustomMotto(properties.customMotto2.value, 2)
-    }
-    if (properties.customMotto3) {
-      GOLOBAL.addCustomMotto(properties.customMotto3.value, 3)
-    }
-    if (properties.customMotto4) {
-      GOLOBAL.addCustomMotto(properties.customMotto4.value, 4)
-    }
-    if (properties.customMotto5) {
-      GOLOBAL.addCustomMotto(properties.customMotto5.value, 5)
+    if (properties.customMottos) {
+      GOLOBAL.addCustomMotto(properties.customMottos.value)
     }
 
-    if (properties.mottosFile) {
-      var customFile = ''
-
-      if (properties.mottosFile.value) {
-        customFile = 'file:///' + properties.mottosFile.value;
-      } else {
-        customFile = 'script/mottos.js'
-      }
-      var scriptEl = document.getElementById('externalMottos');
-      if (scriptEl) {
-        parentEl = scriptEl.parentElement
-        parentEl.removeChild(scriptEl)
-      } else {
-        parentEl = document.body
-      }
-      scriptEl = document.createElement('script')
-      scriptEl.type = 'text/javascript'
-      scriptEl.src = customFile;
-      parentEl.appendChild(scriptEl)
+    if (properties.scaleRate) {
+      setScaleRate(properties.scaleRate.value)
     }
 
+
     // refresh()
   },
 
@@ -132,7 +107,6 @@ function main() {
     showNumClock: false,
 
     customMottos: [],
-    externalMottos: [],
     cyclicMottos: [],
 
     defaultImages,
@@ -145,22 +119,9 @@ function main() {
       console.debug(value)
     },
 
-    addCustomMotto(motto, no) {
-      motto = motto.trim()
-      this.customMottos[no - 1] = motto
-      this.setCyclicMottos()
-    },
-
-    batchImportMottos(mottos) {
-      try {
-        mottos = mottos.map(item => item.trim())
-          .filter(item => item != '')
-        this.externalMottos = mottos
-      } catch {
-        this.externalMottos = []
-      }
+    addCustomMotto(mottos) {
+      this.customMottos = mottos.split('+').map(motto => motto.trim())
       this.setCyclicMottos()
-      this.refresh()
     },
 
     batchImportImages(paths) {
@@ -173,7 +134,6 @@ function main() {
         customMottoEnable,
         usingDefaultMottos,
         defaultMottos,
-        externalMottos,
         customMottos
       } = this
 
@@ -182,9 +142,9 @@ function main() {
       if (!customMottoEnable) {
         mottos = defaultMottos
       } else if (usingDefaultMottos) {
-        mottos = defaultMottos.concat(customMottos).concat(externalMottos)
+        mottos = defaultMottos.concat(customMottos)
       } else {
-        mottos = customMottos.concat(externalMottos)
+        mottos = customMottos
       }
 
       this.cyclicMottos = mottos.filter(item => item != '')
@@ -220,36 +180,44 @@ function main() {
   var clockNumS = $('#clockNumS')
   var clockNumD = $('#clockNumD')
 
-  targetYear.innerText = GOLOBAL.deadline.targetYear; // 设置年份
-  if (GOLOBAL.deadline.expired) {
+  targetYear.innerText = GOLOBAL.deadline.targetYear + ' 一“研”为定！';
+
+  GOLOBAL.setCyclicMottos()
+  GOLOBAL.setCyclicImages()
+}
+
+function endEgg() {
+  if (new Date() > window.GOLOBAL.deadline.date) {
     body.style.display = 'none';
     bodyEnd.style.display = 'block';
     GOLOBAL.bg.style.backgroundImage = 'url(./style/assets/images/bg-end.jpg)';
     targetYearEnd.innerText = GOLOBAL.deadline.targetYear
-  } else {
-    GOLOBAL.setCyclicMottos()
-    GOLOBAL.setCyclicImages()
-    refresh();
+    return true
   }
+  body.style.display = 'block';
+  bodyEnd.style.display = 'none';
+  return false
 }
 
 function refresh(motto = false, bg = false) {
-  window.requestAnimationFrame(freshNumbers.bind(window, undefined, {
+  window.requestAnimationFrame(animation.bind(window, undefined, {
     motto,
     bg
   }));
 }
 
-function freshNumbers(_, rightnow = {
+function animation(_, rightnow = {
   motto: false,
   bg: false
 }) {
   var numbers = getTimerNumbers(GOLOBAL.deadline.date);
-  rendserNumber(numbers);
-  switchMotto(rightnow.motto);
-  switchBg(rightnow.bg);
+  if (!endEgg()) {
+    rendserNumber(numbers);
+    switchMotto(rightnow.motto);
+    switchBg(rightnow.bg);
+  }
   clockRun()
-  window.requestAnimationFrame(freshNumbers);
+  window.requestAnimationFrame(animation);
 }
 
 function rendserNumber(numbers) {
@@ -316,11 +284,13 @@ function switchBg(rightnow) {
   console.info('switchBgTime', GOLOBAL.switchBgTime)
 }
 
-function clockVisible() {
+function clockVisible(_showClock, _showNumClock) {
   const { showNumClock, showClock } = GOLOBAL
-  if (!showClock) clockOuter.style.display = 'none'
+  _showClock = _showClock || showClock
+  _showNumClock = _showNumClock || showNumClock
+  if (!_showClock) clockOuter.style.display = 'none'
   else clockOuter.style.display = 'block'
-  if (!showNumClock) clockNum.style.visibility = 'hidden'
+  if (!_showNumClock) clockNum.style.visibility = 'hidden'
   else clockNum.style.visibility = 'visible'
 }
 
@@ -341,5 +311,10 @@ function clockRun() {
 
 }
 
+function setScaleRate(rate) {
+  // console.log(mainEl, 'xxxx')
+  console.log(`scale(${rate / 100})`)
+  mainEl.style.transform = `scale(${rate / 100})`
+}
 
 window.onload = main();