Browse Source

增加鼠标移到术语上浮出气泡功能

visuddhinanda 5 years ago
parent
commit
a3c3f110fd
7 changed files with 140 additions and 29 deletions
  1. 6 7
      app/article/index.php
  2. 10 11
      app/guide/guide.css
  3. 0 6
      app/guide/guide.js
  4. 4 0
      app/studio/editor.php
  5. 6 5
      app/term/note.js
  6. 77 0
      app/term/term.js
  7. 37 0
      app/term/term_popup.js

+ 6 - 7
app/article/index.php

@@ -1,11 +1,7 @@
 <?php
 require_once "../public/load_lang.php";
 require_once "../path.php";
-
-?>
-
-<?PHP
-include "../pcdl/html_head.php";
+require_once "../pcdl/html_head.php";
 ?>
 <body style="margin: 0;padding: 0;" class="reader_body" >
 	<script src="../term/term.js"></script>
@@ -190,7 +186,8 @@ include "../pcdl/html_head.php";
 		margin: 0 8px;
 	}
 	.term_link {
-    cursor: pointer;
+	cursor: pointer;
+	position: relative;
 	}
 	.main_view{
 		padding: 0 1em;
@@ -268,7 +265,9 @@ include "../pcdl/html_head.php";
 	#head_bar{
 		height:unset;
 	}
-
+	.term_link:hover .guide_contence {
+		display: inline-block;
+	}
 <?php
 		if(isset($_GET["display"]) && $_GET["display"]=="para"){
 ?>

+ 10 - 11
app/guide/guide.css

@@ -46,20 +46,19 @@ guide ol {
   color: var(--main-color);
   z-index: 200;
 }
-/*
+
 .guide_contence:after {
-    content: "\00a0";
-    width: 0;
-    height: 0;
-    display: block;
-    border-style: solid;
-    border-width: 10px;
-    border-color: transparent transparent white transparent;
-    position: absolute;
-    top: -20px;
+  content: "\00a0";
+  width: 0;
+  height: 0;
+  display: block;
+  border-style: solid;
+  border-width: 10px;
+  border-color: transparent transparent var(--drop-bg-color) transparent;
+  position: absolute;
+  top: -20px;
 }
 
-*/
 .guide_contence h1 {
   font-size: 1.5em;
   font-weight: 700;

+ 0 - 6
app/guide/guide.js

@@ -40,12 +40,6 @@ function guide_init() {
         }
       }
     );
-    /*        if ($(this).offset().left < $(document.body).width() / 2) {
-                    $(".guide_contence:after").css("left", "0");
-                }
-                else {
-                    $(".guide_contence:after").css("right", "0");
-                }*/
   });
 }
 

+ 4 - 0
app/studio/editor.php

@@ -119,6 +119,10 @@ else{$currDevice="computer";}
 	</style>
 
 	<style>
+	.term_link:hover .guide_contence {
+		display: inline-block;
+	}
+	
 	.trans_text_block{
 		border-left: 5px solid #d1d1d1;
 		background-color: #f1f1f1;

+ 6 - 5
app/term/note.js

@@ -1,3 +1,9 @@
+var _display = "";
+var _word = "";
+var _channal = "";
+var _lang = "";
+var _author = "";
+
 /*
 {{203-1654-23-45@11@en@*}}
 <note>203-1654-23-45@11@en@*</note>
@@ -21,11 +27,6 @@
 <note id="guid" book=203 para=1654 begin=23 end=45 author=11 lang=en tag=*></note>
 
 */
-var _display = "";
-var _word = "";
-var _channal = "";
-var _lang = "";
-var _author = "";
 
 function note_init(input) {
   let output = "<div>";

+ 77 - 0
app/term/term.js

@@ -153,6 +153,41 @@ function note_lookup_guid_json(guid, showto) {
   );
 }
 
+function term_load_preview(guid, showto) {
+  $.get(
+    "../term/term.php",
+    {
+      op: "load_id",
+      id: guid,
+      format: "json",
+    },
+    function (data, status) {
+      let html = "";
+      if (status == "success") {
+        try {
+          let result = JSON.parse(data)[0];
+          html = "<div class='term_block'>";
+
+          html += "<h2>" + result.word + "</h2>";
+          html += "<div class='meaning'>" + result.meaning + "</div>";
+          html +=
+            "<div class='term_note' status='1'>" +
+            note_init(result.note) +
+            "</div>";
+          html +=
+            "<div ><a href='../wiki/wiki.php?word=" +
+            result.word +
+            "' target='_blank'>更多</a></div>";
+          html += "</div>";
+          $("#" + showto).html(html);
+        } catch (e) {
+          console.error("note_lookup_guid_json:" + e + " data:" + data);
+        }
+      }
+    }
+  );
+}
+
 var term_get_word_to_div_callback = null;
 function term_get_word_to_div(strWord, div, callback) {
   term_get_word_to_div_callback = callback;
@@ -569,6 +604,10 @@ function term_updata_translation() {
           "[",
           "<span class='" +
             linkclass +
+            "' id='term_link_" +
+            guid +
+            "' gid='" +
+            guid +
             "' onclick=\"" +
             str_term_fun_word_link +
             "('" +
@@ -621,6 +660,7 @@ function term_updata_translation() {
       $(this).html(noteText);
     }
   });
+  term_popup_init();
 }
 
 function term_show_win(guid, keyWord = "") {
@@ -773,3 +813,40 @@ function term_get_dict() {
     }
   );
 }
+
+function term_popup_init() {
+  $(".term_link").each(function () {
+    if ($(this).attr("init") != "1") {
+      if ($(this).text().length > 0) {
+        $(this).css("background", "unset");
+      }
+      let gid = $(this).attr("gid");
+      if ($(this).offset().left < $(document.body).width() / 2) {
+        //出现在左侧
+        $(this).append(
+          '<div id="gid_' +
+            gid +
+            '" class="guide_contence" style="left: -5px;"></div>'
+        );
+        $(".guide_contence:after").css("left", "0");
+      } else {
+        //出现在右侧
+        $(this).append(
+          '<div id="gid_' +
+            gid +
+            '" class="guide_contence" style="right: -5px;"></div>'
+        );
+        $(".guide_contence:after").css("right", "0");
+      }
+      $(this).attr("init", "1");
+    }
+  });
+
+  $(".term_link").mouseenter(function () {
+    if ($(this).children(".guide_contence").first().html().length > 0) {
+      return;
+    }
+    let gid = $(this).attr("gid");
+    term_load_preview(gid, "gid_" + gid);
+  });
+}

+ 37 - 0
app/term/term_popup.js

@@ -0,0 +1,37 @@
+function term_popup_init() {
+  $(".term_link").each(function () {
+    if ($(this).attr("init") != "1") {
+      if ($(this).text().length > 0) {
+        $(this).css("background", "unset");
+      }
+      let gid = $(this).attr("gid");
+      if ($(this).offset().left < $(document.body).width() / 2) {
+        //出现在左侧
+        $(this).append(
+          '<div id="gid_' +
+            gid +
+            '"  class="guide_contence" style="left: -5px;"></div>'
+        );
+        $(".guide_contence:after").css("left", "0");
+      } else {
+        //出现在右侧
+        $(this).append(
+          '<div id="gid_' +
+            gid +
+            '" class="guide_contence" style="right: -5px;"></div>'
+        );
+        $(".guide_contence:after").css("right", "0");
+      }
+      $(this).attr("init", "1");
+    }
+  });
+
+  $(".term_link").mouseenter(function () {
+    if ($(this).children(".guide_contence").first().html().length > 0) {
+      return;
+    }
+    let gid = $(this).attr("gid");
+    let id = "gid_" + gid;
+    note_lookup_guid_json(gid, id);
+  });
+}