refactor

buuug7 · Jul 5, 2021 · 892ea92 · 892ea92
1 parent aad478a
commit 892ea92
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 104 deletions.
diff --git a/book.html b/book.html
@@ -10,6 +10,76 @@
     <link rel="stylesheet" href="vendor/utilities-css/dist/utilities-css.css" />
     <link rel="stylesheet" href="main.css" />
     <title>Book</title>
+    <style>
+      .bg-v1 {
+        background-color: #f7f7f7;
+      }
+
+      .header {
+        background-color: #fff;
+        width: 100%;
+        z-index: 999;
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5rem 0;
+        box-shadow: 0 6px 6px rgb(31 107 255 / 5%);
+        position: fixed;
+        left: 0;
+        top: 0;
+      }
+
+      .logo {
+        width: 32px;
+        height: 32px;
+        position: relative;
+      }
+
+      @media (max-width: 640px) {
+        .word-list {
+          margin-top: 10rem;
+        }
+
+        .translate-setting,
+        .toggle-view {
+          display: none !important;
+        }
+      }
+
+      .word-list {
+        margin-top: 4rem;
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-gap: 1rem;
+      }
+
+      .word-list > .word {
+        border-bottom: 1px solid #eee;
+        position: relative;
+        display: flex;
+        align-items: center;
+        font-size: 1.2rem;
+        padding: 0.5rem 0;
+      }
+
+      .word-list .word:last-child {
+        border-bottom: none;
+      }
+
+      .word > a {
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        height: 30px;
+      }
+
+      .word > input[type="checkbox"] {
+        margin-bottom: -2px;
+      }
+
+      .grid-column-2 {
+        grid-template-columns: repeat(2, 1fr) !important;
+      }
+    </style>
   </head>
   <body class="bg-v1">
     <div id="root"></div>

diff --git a/book.js b/book.js
@@ -6,7 +6,8 @@ const {
   useEffect,
   useState
 } = React;
-const __q = document.querySelector;
+
+const __q = selector => document.querySelector(selector);
 
 function HeaderLeft({
   words
@@ -143,8 +144,6 @@ function Word({
 
   return /*#__PURE__*/React.createElement("div", {
     className: "word"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "display-flex flex-center"
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     checked: !!word.checked,
@@ -153,7 +152,7 @@ function Word({
     href: detailLink,
     className: "ml-2 word-text",
     target: "_blank"
-  }, word.text)));
+  }, word.text));
 }
 
 function WordList({

diff --git a/lib.js b/lib.js
@@ -8,37 +8,6 @@ function generateUID() {
   return firstPart + secondPart;
 }
 
-function uuidv4() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0,
-      v = c == "x" ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
-
-async function createWordDom(word) {
-  const dom = document.createElement("div");
-  dom.classList.add("word");
-  dom.setAttribute("data-text", word.text);
-  dom.setAttribute("data-id", word.id);
-
-  const translateVendor = await getTranslateVendor();
-
-  const detailLink =
-    translateVendor === "google"
-      ? `https://translate.google.com/?sl=en&tl=zh-CN&text=${word.text}&op=translate`
-      : `https://fanyi.baidu.com/#en/zh/${word.text}`;
-
-  dom.innerHTML = `
-<div class="display-flex flex-center">
-  <input type="checkbox">
-  <a class="ml-2 word-text" href=${detailLink} target="_blank">${word.text}</a>
-</div>
-`;
-
-  return dom;
-}
-
 function getTranslateVendor() {
   return new Promise((resolve, reject) => {
     chrome.storage.sync.get("translateVendor", (data) => {

diff --git a/main.css b/main.css
@@ -18,8 +18,6 @@ body {
   white-space: nowrap;
 }
 
-
-
 .menu {
   padding: 0;
   list-style: none;
@@ -36,59 +34,3 @@ body {
 .menu > li:hover {
   background-color: rgba(1, 1, 1, 0.1);
 }
-
-/* book.html */
-
-.bg-v1 {
-  background-color: #f7f7f7;
-}
-
-.header {
-  background-color: #fff;
-  width: 100%;
-  z-index: 999;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-  box-shadow: 0 6px 6px rgb(31 107 255 / 5%);
-  position: fixed;
-  left: 0;
-  top: 0;
-}
-
-.logo {
-  width: 32px;
-  height: 32px;
-  position: relative;
-}
-
-@media (max-width: 640px) {
-  .word-list {
-    margin-top: 10rem;
-  }
-
-  .translate-setting,
-  .toggle-view {
-    display: none !important;
-  }
-}
-
-.word-list {
-  margin-top: 4rem;
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-gap: 1rem;
-}
-
-.word-list > .word {
-  border-bottom: 1px solid #eee;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 1.2rem;
-}
-
-.grid-column-2 {
-  grid-template-columns: repeat(2, 1fr) !important;
-}
diff --git a/src/book.jsx b/src/book.jsx
@@ -4,7 +4,7 @@
  */
 
 const { useEffect, useState } = React;
-const __q = document.querySelector;
+const __q = (selector) => document.querySelector(selector);
 
 function HeaderLeft({ words }) {
   const [translator, setTranslator] = useState(false);
@@ -143,16 +143,14 @@ function Word({ word, itemSelected }) {
 
   return (
     <div className="word">
-      <div className="display-flex flex-center">
-        <input
-          type="checkbox"
-          checked={!!word.checked}
-          onChange={onChangeHandler}
-        />
-        <a href={detailLink} className="ml-2 word-text" target="_blank">
-          {word.text}
-        </a>
-      </div>
+      <input
+        type="checkbox"
+        checked={!!word.checked}
+        onChange={onChangeHandler}
+      />
+      <a href={detailLink} className="ml-2 word-text" target="_blank">
+        {word.text}
+      </a>
     </div>
   );
 }