improve dict feature

cdhigh · Jun 27, 2024 · 3d587f2 · 3d587f2
1 parent 25c44cf
commit 3d587f2
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 38 deletions.
diff --git a/application/lib/dictionary/mdict/mdict.py b/application/lib/dictionary/mdict/mdict.py
@@ -174,7 +174,10 @@ def justify_css_path(self, soup):
 
         link = soup.find('link', attrs={'rel': 'stylesheet', 'href': True})
         if link:
-            link['href'] = '/reader/css/' + link['href']
+            mdxDir = os.path.dirname(self.mdxFilename)
+            cssFile = os.path.join(mdxDir, link['href'])
+            newHref = os.path.relpath(cssFile, dictDir)
+            link['href'] = '/reader/css/' + newHref.replace('\\', '/')
 
     #将外部单独css文件的样式内联到html标签中，现在不使用了，直接修改css链接
     def inline_css(self, soup):

diff --git a/application/static/reader.css b/application/static/reader.css
@@ -96,8 +96,43 @@ body::-webkit-scrollbar-thumb {
   cursor: pointer;
 }
 
+/* small screen */
+@media (max-width: 599px) {
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0px;
+    height: 0px;
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: transparent;
+    display: none;
+  }
+  .navbar {
+    display: none;
+    right: 20px;
+    bottom: 0px;
+  }
+  .container {
+    margin: 0px 10px 0px 0px;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+  .pos-indicator {
+    display: block;
+  }
+  .nav-footer {
+    height: 60px;
+  }
+  .nav-footer button {
+    margin: 0px 3px;
+    width: 30px;
+    height: 30px;
+  }
+}
+
 /* small screen, ink mode, pw3/voyage=1448x1072 */
-@media (max-width: 1072px) {
+@media (min-width: 600px) and (max-width: 1072px) {
   ::-webkit-scrollbar {
     display: none;
     width: 0px;
@@ -121,7 +156,11 @@ body::-webkit-scrollbar-thumb {
   .pos-indicator {
     display: block;
   }
+  .nav-footer {
+    height: 80px;
+  }
   .nav-footer button {
+    margin: 0px 10px;
     width: 50px;
     height: 50px;
   }
@@ -141,7 +180,11 @@ body::-webkit-scrollbar-thumb {
   .pos-indicator, .nav-indicator, button#closeNavBtn {
     display: none;
   }
+  .nav-footer {
+    height: 80px;
+  }
   .nav-footer button {
+    margin: 0px 10px;
     width: 40px;
     height: 40px;
   }
@@ -239,7 +282,7 @@ body::-webkit-scrollbar-thumb {
   bottom: 0px;
   left: 0px;
   width: 99%;
-  height: 80px;
+  /* height: 80px; */ /* in media query */
   padding: 5px 5px 10px 5px;
   background-color: white;
   border-top: 1px solid #ccc;
@@ -257,10 +300,10 @@ body::-webkit-scrollbar-thumb {
   vertical-align: middle;
   text-align: center;
   padding: 0px;
-  margin: 0px 10px;
   border: none;
   background: none;
-  /*width: 50px;
+  /*margin: 0px 10px;
+  width: 50px;
   height: 50px;*/ /* in media query */
   cursor: pointer;
 }
@@ -289,7 +332,7 @@ body::-webkit-scrollbar-thumb {
   background-color: white;
 }
 .nav-popmenu-row {
-  height: 70px;
+  /*height: 70px;*/ /* in media query */
   width: 100%;
   border-bottom: 1px solid #ddd;
   vertical-align: middle;
@@ -308,6 +351,26 @@ body::-webkit-scrollbar-thumb {
   vertical-align: middle;
   font-size: 0.9em;
 }
+@media (max-height: 499px) {
+  .nav-popmenu-row {
+    height: auto;
+  }
+}
+@media (min-height: 500px) and (max-height: 767px) {
+  .nav-popmenu-row {
+    height: 60px;
+  }
+}
+@media (min-height: 768px) and (max-height: 1023px) {
+  .nav-popmenu-row {
+    height: 80px;
+  }
+}
+@media (min-height: 1024px) {
+  .nav-popmenu-row {
+    height: 100px;
+  }
+}
 
 .tr-result {
   position: absolute;

diff --git a/application/static/reader.js b/application/static/reader.js
@@ -226,6 +226,7 @@ function showDictDialog(word, text, dictname, others) {
   var titleDiv = document.getElementById('tr-word');
   var textWrap = document.getElementById('tr-text-container');
   var textDiv = document.getElementById('tr-text');
+  //候选词典下拉列表
   var ostr = ['<option value="">▽ ' + (dictname || '') + '</option>'];
   for (var i = 0; i < others.length; i++) {
     var elem = others[i];
@@ -240,7 +241,16 @@ function showDictDialog(word, text, dictname, others) {
   }
   dictNameDiv.innerHTML = ostr.join('');
   titleDiv.innerHTML = word;
-  textDiv.innerHTML = text.replace(/\n/g, '<br/>');
+  text = text ? text.replace(/\n/g, '<br/>') : '';
+  if (textDiv.attachShadow) { //使用shadow dom技术可以隔离css
+    if (!textDiv.shadowRoot) { //在第一个执行attachShadow后，这个变量会自动被设置
+      textDiv.attachShadow({mode: 'open'});
+      //console.log('This browser supports Shadow DOM.');
+    }
+    textDiv.shadowRoot.innerHTML = text;
+  } else {
+    textDiv.innerHTML = text;
+  }
   textDiv.style.textAlign = text.length > 50 ? 'left' : 'center';
   var y = Math.max(event.clientY - content.scrollTop, 0);
   var height = content.clientHeight;
@@ -267,6 +277,29 @@ function showDictDialog(word, text, dictname, others) {
   }
 }
 
+//关闭查词窗口
+function closeDictDialog(event) {
+  //点击了一个单词链接，处理词条跳转
+  var target = event ? event.target || event.srcElement : null;
+  if (target && (target.tagName == 'A')) {
+    event.stopPropagation();
+    event.preventDefault();
+    var href = target.getAttribute('href') || '';
+    if (href.indexOf('https://kindleear/entry/') == 0) {
+      var word = href.substring(24);
+      if (word) {
+        translateWord(word);
+        return;
+      }
+    }
+  }
+
+  g_dictMode = false;
+  document.getElementById('tr-text').innerHTML = '';
+  document.getElementById('tr-result').style.display = 'none';
+  document.getElementById('corner-dict-hint').style.display = 'none';
+}
+
 //查词窗口向上滚动
 function dictScrollUp(event) {
   event.stopPropagation();
@@ -678,28 +711,6 @@ function toggleDictMode() {
   hideNavbar();
 }
 
-//关闭查词窗口
-function closeDictDialog(event) {
-  //处理词典内词条跳转
-  var target = event ? event.target || event.srcElement : null;
-  if (target && (target.tagName == 'A')) {
-    event.stopPropagation();
-    event.preventDefault();
-    var href = target.getAttribute('href') || '';
-    if (href.indexOf('https://kindleear/entry/') == 0) {
-      var word = href.substring(24);
-      if (word) {
-        translateWord(word);
-        return;
-      }
-    }
-  }
-
-  g_dictMode = false;
-  document.getElementById('tr-result').style.display = 'none';
-  document.getElementById('corner-dict-hint').style.display = 'none';
-}
-
 //根据是否使能墨水屏模式，设置相应的元素属性
 function setInkMode(enable) {
   return; //暂时先禁用

diff --git a/application/templates/word_lookup.html b/application/templates/word_lookup.html
@@ -165,14 +165,18 @@
 function showTrResult(word, text, dictname) {
   var engineDiv = $('#tr_engine');
   var resultDiv = $('#tr_result');
+  var resultElement = resultDiv[0];
   engineDiv.html('From: <strong>' + dictname + '</strong>');
-  resultDiv.empty();
-  if (!text) {
-    engineDiv.css('display', 'none');
-    resultDiv.html('No definitions found for "' + word + '"');
-  } else {
-    engineDiv.css('display', 'inline-block');
-    resultDiv.html(text.replace(/\n/g, '<br/>'));
+  engineDiv.css('display', text ? 'inline-block' : 'none');
+  text = text ? text.replace(/\n/g, '<br/>') : ('No definitions found for "' + word + '"');
+  if (resultElement.attachShadow) { //使用shadow dom技术隔离css
+    //console.log('This browser supports Shadow DOM.');
+    if (!resultElement.shadowRoot) { //在第一个执行attachShadow后，这个变量会自动被设置
+      resultElement.attachShadow({mode: 'open'});
+    }
+    $(resultElement.shadowRoot).html(text);
+  } else { //不支持shadow dom的浏览器
+    resultDiv.html(text);
   }
 }
 

diff --git a/application/view/login.py b/application/view/login.py
@@ -73,12 +73,14 @@ def LoginPost():
             user.custom = custom
             user.save()
 
-        if not user.cfg('sender') or (nameHash == pwdHash):
+        if next_url:
+            url = next_url
+        elif not user.cfg('sender') or (nameHash == pwdHash):
             url = url_for('bpAdmin.AdminAccountChange', name=name)
         elif not user.cfg('kindle_email'):
             url = url_for("bpSettings.Settings")
         else:
-            url = next_url if next_url else url_for("bpLogs.Mylogs")
+            url = url_for("bpLogs.Mylogs")
         default_log.info(f"Login event: {name}")
         return redirect(url)
     else:  #账号或密码错