修调整显示

FomalhautPsA · Nov 8, 2019 · 43b3eb8 · 43b3eb8
1 parent 048388c
commit 43b3eb8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/readme.md b/readme.md
@@ -41,7 +41,7 @@
 ## 技术栈
 
 - express 实现后端
-- translate.js
+- translation.js
 - pdfjs 作为前端
 
 ## 跨平台支持

diff --git a/web/custom.js b/web/custom.js
@@ -40,6 +40,9 @@ function showPop(value){
     }
 }
 function clickFun(event){
+    if(event.target === transResEle){
+      return
+    }
     var selected = window.getSelection();
     var selectedText = selected.toString();
     if(selectedText === ''){
@@ -62,50 +65,62 @@ document.addEventListener('click', clickFun);
     function fire(){
         'use strict'
         var bg = document.getElementsByTagName('canvas');
-        var wd = document.getElementsByTagName('span');
-        var textLayer = document.getElementsByClassName('textLayer');
+        var wd = document.querySelectorAll('.page span');
+        // var textLayer = document.getElementsByClassName('textLayer');
         var timeSep = '300'; //ms
         var timeDurition = 2;
         bg = Array.prototype.slice.call(bg);
         wd = Array.prototype.slice.call(wd);
-        for(let ind = 0; ind < textLayer.length; ind++){
-          var aNode = textLayer[ind];
-          aNode.style.opacity = 1;
-        }
-        for(let ind = 0; ind < wd.length; ind++){
-          var aNode = wd[ind];
-          aNode.style.color = 'black';
-          aNode.style.opacity = 1;
-        }
+        document.styleSheets[0].insertRule('.textLayer { opacity: 1; }', document.styleSheets[0].cssRules.length);
+        document.styleSheets[0].insertRule('.textLayer > span{ color: black; }', document.styleSheets[0].cssRules.length);
         for(var ind = 0; ind < bg.length; ind++){
           bg[ind].style.visibility = 'hidden';
         }
-        for(let ind = 0; ind < wd.length; ind++){
-          let aNode = wd[ind];
-          setTimeout(() =>{
-                aNode.style.transition='transform ' + timeDurition + 's' + ',opacity ' + timeDurition + 's';
-                aNode.style.transform = 'rotate(180deg) scale(0, 0)';
-                aNode.style.opacity = '0';
-          }, timeSep * (ind + 1))
+        // for(let ind = 0; ind < wd.length; ind++){
+        //   let aNode = wd[ind];
+        //   setTimeout(() =>{
+        //         aNode.style.transition='transform ' + timeDurition + 's' + ',opacity ' + timeDurition + 's';
+        //         aNode.style.transform = 'rotate(180deg) scale(0, 0)';
+        //         aNode.style.opacity = '0';
+        //   }, timeSep * (ind + 1))
+        // }
+        var curInd = 0;
+        var killOneByOne = function (){
+          let aNode = wd[curInd];
+          aNode.style.transition='transform ' + timeDurition + 's' + ',opacity ' + timeDurition + 's';
+          aNode.style.transform = 'rotate(180deg) scale(0, 0)';
+          aNode.style.opacity = '0';
+          if(++curInd < wd.length){
+            setTimeout(killOneByOne, timeSep)
+          }
         }
+        setTimeout(killOneByOne, timeSep)
     }
 
 
     var timeSeq = ['X', 'X', 'X', 'X'];
-    var threeClick = function (event){
+    var xbdl = function (event){
         'use strict'
         var MININTERVAL = 400;
         var keypressed = String.fromCharCode(event.keyCode);
-        console.log(keypressed);
+        // console.log(keypressed);
         timeSeq.push(keypressed);
         timeSeq.shift();
         if(timeSeq.join('') === 'XBDL'){
             fire()
-            console.log('别问我怎么恢复显示，刷新页面吧')
+            console.log('彩蛋脚本开始执行，别问我怎么恢复页面，刷新啦~')
         }
     };
 
-    document.addEventListener('keydown',threeClick);
+    document.addEventListener('keydown', xbdl);
 })();
 
-console.log('哦豁，你找到一个彩蛋，以此按下xbdl(学不动了)触发自暴自弃行为, 从第一页开始')
+setTimeout(()=>{
+  console.log('********************************************************************')
+  console.log('********************************************************************')
+  console.log('********************************************************************')
+  console.log('哦豁，你找到一个彩蛋，以此按下xbdl(学不动了)触发自暴自弃行为, 从第一页开始')
+  console.log('********************************************************************')
+  console.log('********************************************************************')
+  console.log('********************************************************************')
+}, 3500)
diff --git a/web/viewer.html b/web/viewer.html
@@ -299,7 +299,21 @@
               font-size: 16px;
               font-family: Lato,Helvetica Neue,Helvetica,sans-serif;
               font-variant-ligatures: common-ligatures;
-              line-height: 1.67;">
+              /* copy from style */
+              font: message-box;
+              /* padding: 15px; */
+              border-spacing: 4px;
+              color: hsl(0,0%,85%);
+              /* font-size: 12px; */
+              /* line-height: 14px; */
+              background-color: #474747;
+              background-image: url(images/texture.png),
+                                  linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
+              border: 1px solid hsla(0,0%,0%,.5);
+              border-radius: 4px;
+              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+              line-height: 1.67;
+              ">
             </div>
           <div id="viewer" class="pdfViewer"></div>
         </div>