Clean up code

* Rename colorInput because it is a <select>, not an <input> * Remove Elem from docStyleElem because it is not an <element> * Remove unnecessary blank lines
shivaprsd · Dec 19, 2020 · 2c896de · 2c896de
1 parent 316093d
commit 2c896de
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 28 deletions.
diff --git a/...ages/secToolbarButton-colorInput-dark.svg → ...ges/secToolbarButton-colorSelect-dark.svg b/...ages/secToolbarButton-colorInput-dark.svg → ...ges/secToolbarButton-colorSelect-dark.svg
diff --git a/...in/images/secToolbarButton-colorInput.svg → ...n/images/secToolbarButton-colorSelect.svg b/...in/images/secToolbarButton-colorInput.svg → ...n/images/secToolbarButton-colorSelect.svg
diff --git a/plugin/pdfless.css b/plugin/pdfless.css
@@ -9,7 +9,7 @@
   --lightsOff-icon: url(../plugin/images/toolbarButton-lightsOff.svg);
   --termMode-icon: url(../plugin/images/toolbarButton-termMode.svg);
   --fontInput-icon: url(../plugin/images/secToolbarButton-fontInput.svg);
-  --colorInput-icon: url(../plugin/images/secToolbarButton-colorInput.svg);
+  --colorSelect-icon: url(../plugin/images/secToolbarButton-colorSelect.svg);
   --secToolbarWidth: 220px;
   --secToolbarBtnPad: 36px;
   --secToolbarIconLeft: 12px;
@@ -19,7 +19,7 @@
   --lightsOff-icon: url(../plugin/images/toolbarButton-lightsOff-dark.svg);
   --termMode-icon: url(../plugin/images/toolbarButton-termMode-dark.svg);
   --fontInput-icon: url(../plugin/images/secToolbarButton-fontInput-dark.svg);
-  --colorInput-icon: url(../plugin/images/secToolbarButton-colorInput-dark.svg);
+  --colorSelect-icon: url(../plugin/images/secToolbarButton-colorSelect-dark.svg);
   }
 }
 
@@ -29,18 +29,17 @@
   margin-right: 2px;
   vertical-align: top;
 }
-#colorInput {
+#colorSelect {
   width: calc(100% + 22px);
   height: 26px;
 }
-#colorInput:focus {
+#colorSelect:focus {
   border-color: rgba(0, 0, 0, 0.38);
 }
 #colorSelectContainer {
   position: relative;
   max-width: calc(var(--secToolbarWidth) / 2 - 4px);
 }
-
 .fontControls, .colorControl {
   position: relative;
   padding-left: var(--secToolbarBtnPad);
@@ -64,7 +63,6 @@
 .imageControl .toolbarField[type="checkbox"]:checked + .toolbarLabel {
   background-color: var(--toggled-btn-bg-color);
 }
-
 .fontControls::before, .colorControl::before {
   position: absolute;
   top: 8px;
@@ -74,7 +72,7 @@
   content: var(--fontInput-icon);
 }
 .colorControl::before {
-  content: var(--colorInput-icon);
+  content: var(--colorSelect-icon);
   color: var(--termColor) !important;
 }
 .toolbarButton.lightsOff::before, .secondaryToolbarButton.lightsOff::before {

diff --git a/plugin/pdfless.html b/plugin/pdfless.html
@@ -22,7 +22,7 @@
   </div>
   <div class="colorControl">
     <div id="colorSelectContainer" class="dropdownToolbarButton">
-      <select id="colorInput" class="toolbarField" title="Text Color" tabindex="47"></select>
+      <select id="colorSelect" class="toolbarField" title="Text Color" tabindex="47"></select>
     </div>
   </div
   ><div class="imageControl">

diff --git a/plugin/pdfless.js b/plugin/pdfless.js
@@ -15,15 +15,13 @@ async function pdfLessInit() {
       config.textColors = colors.textColors;
       pdfLessLoad(config);
     });
-
   function addHTML(html) {
     let docFrag = document.createRange().createContextualFragment(html);
     let toolbar = document.getElementById("toolbarViewerRight");
     toolbar.prepend(docFrag.getElementById("toolbarAddon").content);
     let secToolbar = document.getElementById("secondaryToolbarButtonContainer");
     secToolbar.prepend(docFrag.getElementById("secToolbarAddon").content);
   }
-
   function linkCSS(href) {
     let link = document.createElement("link");
     link.rel = "stylesheet";
@@ -41,31 +39,31 @@ function getPdfLessConfig() {
     termColors: {},
     textColors: {},
     compStyle: getComputedStyle(document.documentElement),
-    docStyleElem: document.documentElement.style,
-    colorInputElem: document.getElementById("colorInput"),
+    docStyle: document.documentElement.style,
+    colorSelectElem: document.getElementById("colorSelect"),
     viewerClassList: document.getElementById("mainContainer").classList
   };
 }
 
 function pdfLessLoad(config) {
   if (config.termColors.background) {
-    config.docStyleElem.setProperty("--termBG", config.termColors.background);
+    config.docStyle.setProperty("--termBG", config.termColors.background);
   }
   if (config.termColors.highlight) {
-    config.docStyleElem.setProperty("--termHL", config.termColors.highlight);
+    config.docStyle.setProperty("--termHL", config.termColors.highlight);
   }
   for (let col in config.textColors) {
-    config.colorInputElem.innerHTML +=
+    config.colorSelectElem.innerHTML +=
       `<option value="${config.textColors[col]}">${col}</option>`;
   }
   if (parseFloat(pdfjsLib.version) < 2.6) {
-    config.docStyleElem.setProperty("--secToolbarWidth", "200px");
-    config.docStyleElem.setProperty("--secToolbarBtnPad", "24px");
-    config.docStyleElem.setProperty("--secToolbarIconLeft", "4px");
+    config.docStyle.setProperty("--secToolbarWidth", "200px");
+    config.docStyle.setProperty("--secToolbarBtnPad", "24px");
+    config.docStyle.setProperty("--secToolbarIconLeft", "4px");
   }
 
-  config.colorInputElem.onchange = function(e) {
-    config.docStyleElem.setProperty("--termColor", this.value);
+  config.colorSelectElem.onchange = function(e) {
+    config.docStyle.setProperty("--termColor", this.value);
   }
   document.getElementById("imageEnable").onchange = function(e) {
     const termMode = config.viewerClassList.contains("termMode");
@@ -76,15 +74,15 @@ function pdfLessLoad(config) {
           forceRedraw(true);
           config.imageMode = true;
         }
-        config.docStyleElem.setProperty("--canvasDisplay", "block");
+        config.docStyle.setProperty("--canvasDisplay", "block");
       } else {
-        config.docStyleElem.setProperty("--canvasDisplay", "none");
+        config.docStyle.setProperty("--canvasDisplay", "none");
       }
     }
   }
   document.getElementById("fontInput").onchange = function(e) {
     if (this.value) {
-      config.docStyleElem.setProperty("--termFont", this.value);
+      config.docStyle.setProperty("--termFont", this.value);
       config.viewerClassList.add("termFont");
     } else {
       config.viewerClassList.remove("termFont");
@@ -113,24 +111,23 @@ function pdfLessLoad(config) {
       if (config.enableImg) {
         forceRedraw(true);
         config.imageMode = true;
-        config.docStyleElem.setProperty("--canvasDisplay", "block");
+        config.docStyle.setProperty("--canvasDisplay", "block");
       } else {
-        config.docStyleElem.setProperty("--canvasDisplay", "none");
+        config.docStyle.setProperty("--canvasDisplay", "none");
       }
     } else {
       if (config.imageMode) {
         forceRedraw(false);
         config.imageMode = false;
       }
-      config.docStyleElem.setProperty("--canvasDisplay", "block");
+      config.docStyle.setProperty("--canvasDisplay", "block");
     }
     config.viewerClassList.toggle("termMode");
     config.viewerClassList.remove("lightsOff");
   }
-
   function termFontResize(amount) {
     let scale = config.compStyle.getPropertyValue("--fontScale");
-    config.docStyleElem.setProperty("--fontScale", parseFloat(scale) + amount);
+    config.docStyle.setProperty("--fontScale", parseFloat(scale) + amount);
   }
 
   const ctxProto = CanvasRenderingContext2D.prototype;