实现单词显示释义

README.md

@@ -11,7 +11,7 @@
 从最初的打字功能，越写越多：
 
 `能打字` 》 `能统计按键` 》 `能对照显示已打的字的对错` 》 `能显示实时的码长、速度、击键速度` 》 `能切换常用文章` 》 `选择发文字数` 》 `能乱序当前段，乱序整篇文章` 》 
-`能记录用户发文配置` 》 `能记录已打的记录，删除` 》 `添加暗黑模式` 》`长文本时自动滚动` 》 `添加文章` 》 `记录添加文章种类`
+`能记录用户发文配置` 》 `能记录已打的记录，删除` 》 `添加暗黑模式` 》`长文本时自动滚动` 》 `添加文章` 》 `记录添加文章种类` 》 `添加 CET 英文单词输入，并显示释义`
 
 
 ## 使用说明

css/_font.scss

@@ -18,6 +18,7 @@
 }
 
 .number{
+  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
   font-family: 'DS Digital', sans-serif !important;
 }
 

css/_variables.scss

@@ -1,7 +1,7 @@
 // Colors
 $green          : #26c57d;
 $dark-green     : #009652;
-$cyan           : #5AC8FA;
+$cyan           : #00afff;
 $blue           : #007AFF;
 $purple         : #5856D6;
 $roseo          : #ff2d70;
@@ -38,6 +38,7 @@ $fz-info: 12px;
 $fz-typing: 2rem;
 $fz-typing-english: 1.8rem;
 $fz-copyright: 10px;
+$fz-translation: 12px;
 
 $gap-block: 10px;
 

css/typepad.scss

@@ -45,10 +45,29 @@ body{
   }
 }
 
-.translation-info{
-  .translation{
-    font-size: $fz-typing-english;
-  }
+.translation{
+
+}
+.translation-panel{
+  z-index: $z-toast;
+  white-space: nowrap;
+  position: absolute;
+  top: -0.5rem;
+  left: 0;
+  line-height: 1;
+  padding: 2px 5px;
+  color: $cyan;
+  font-weight: normal;
+  font-size: $fz-translation;
+  text-shadow: 0 1px 0 transparentize($cyan, 0.7);
+  //@include border-radius(2px);
+  //border: 1px solid $color-border;
+  //background-color: white;
+  //@include box-shadow(1px 1px 3px rgba(0,0,0,0.1))
+}
+
+.untyped-part{
+  position: relative;
 }
 
 

index.html

@@ -22,11 +22,6 @@
             </div>
         </div>
 
-        <div class="translation-info info-panel">
-            <div>释义：</div>
-            <div class="translation"></div>
-        </div>
-
         <!--speed-->
         <div class="speed-info info-panel">
             <div class="speed">--</div>
@@ -145,7 +140,6 @@
             </div>
         </div>
 
-
         <!--对照区-->
         <div class="template">
             <p class="text"></p>

js/typepad.js

@@ -323,24 +323,20 @@ class Engine {
         currentOriginWords = config.isShuffle ? shuffle(content.split('')) : content.split('');
         config.article = currentOriginWords.join('');
         engine.englishModeLeave();
-        engine.CETModeLeave();
         break;
       case ArticleType.article:
         config.article = content;
         currentOriginWords = config.article.split('');
         engine.englishModeLeave();
-        engine.CETModeLeave();
         break;
       case ArticleType.english:
         config.article = content;
         engine.englishModeEnter();
-        engine.CETModeLeave();
         currentOriginWords = config.article.split('');
         break;
       case ArticleType.word:
         config.article = content;
         engine.englishModeEnter();
-        engine.CETModeEnter();
         arrayWordAll = gettWordsArrayWith(content);
         currentOriginWords = config.article.split('');
         break;
@@ -449,29 +445,28 @@ class Engine {
     let offsetTop = $('.' + untypedStringClassName).offsetTop;
     templateWrapper.scrollTo(0, offsetTop - HEIGHT_TEMPLATE / 2);
 
-    // 获取单词释义
-    this.getCurrentCETWordTranslation(arrayTyped.length);
+
+    if (config.articleType === ArticleType.word){
+      // 获取单词释义
+      this.getCurrentCETWordTranslation(arrayTyped.length);
+    }
   }
 
   getCurrentCETWordTranslation(length){
     let tempString = '';
     arrayWordDisplaying.forEach(item => {
       let afterString =  tempString +  item.word + ' ';
       if (length < afterString.length && length > tempString.length ){
-        $('.translation').innerText = item.translation;
+        let after = $('.untyped-part');
+        let translationPanel = document.createElement('div');
+        translationPanel.innerText = item.translation
+          translationPanel.classList.add('translation-panel');
+        after.appendChild(translationPanel);
       }
       tempString = afterString;
     })
   }
 
-  CETModeEnter(){
-    $('.translation').classList.remove('hidden')
-  }
-
-  CETModeLeave(){
-    $('.translation').classList.add('hidden')
-  }
-
   englishModeEnter(){
     typingPad.classList.add('english');
     template.classList.add('english');