From e75dc5f3c23c8ca662999919fe782e2e0eddfc1f Mon Sep 17 00:00:00 2001 From: wareya Date: Sun, 17 Dec 2017 18:16:17 -0500 Subject: [PATCH] style options --- options.html | 40 ++++++++++++++++++++++++++++++---------- options.js | 28 ++++++++++++++++++++++++++-- texthook.js | 44 +++++++++++++++++++++++++++++++------------- 3 files changed, 87 insertions(+), 25 deletions(-) diff --git a/options.html b/options.html index 8db40df..57f7109 100644 --- a/options.html +++ b/options.html @@ -10,16 +10,36 @@
-
-
-
-
-
-
-
-
-
-
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + +

This extension uses JMdict, which is Copyright © 2017 The Electronic Dictionary Research and Development Group and licensed under the CC BY-SA 3.0 license.

This extension is otherwise licensed under the Apache License, version 2.0.

Meanings of abbreviations follow. From JMdict. Some may be unused. Unsorted.

diff --git a/options.js b/options.js index 3400fa8..8fd5901 100644 --- a/options.js +++ b/options.js @@ -10,6 +10,11 @@ function restoreListeners() document.querySelector("#fixedwidthpositioning").addEventListener("change", setOptions); document.querySelector("#superborder").addEventListener("change", setOptions); document.querySelector("#showoriginal").addEventListener("change", setOptions); + document.querySelector("#bgcolor").addEventListener("change", setOptions); + document.querySelector("#fgcolor").addEventListener("change", setOptions); + document.querySelector("#hlcolor").addEventListener("change", setOptions); + document.querySelector("#font").addEventListener("change", setOptions); + document.querySelector("#hlfont").addEventListener("change", setOptions); } function removeListeners() { @@ -23,6 +28,11 @@ function removeListeners() document.querySelector("#fixedwidthpositioning").removeEventListener("change", setOptions); document.querySelector("#superborder").addEventListener("change", setOptions); document.querySelector("#showoriginal").addEventListener("change", setOptions); + document.querySelector("#bgcolor").addEventListener("change", setOptions); + document.querySelector("#fgcolor").addEventListener("change", setOptions); + document.querySelector("#hlcolor").addEventListener("change", setOptions); + document.querySelector("#font").addEventListener("change", setOptions); + document.querySelector("#hlfont").addEventListener("change", setOptions); } async function restoreOptions() @@ -46,6 +56,11 @@ async function restoreOptions() let fixedwidthpositioning = await getvar("fixedwidthpositioning", false); let superborder = await getvar("superborder", false); let showoriginal = await getvar("showoriginal", true); + let bgcolor = await getvar("bgcolor", "#111111"); + let fgcolor = await getvar("fgcolor", "#CCCCCC"); + let hlcolor = await getvar("hlcolor", "#99DDFF"); + let font = await getvar("font", ""); + let hlfont = await getvar("hlfont", ""); removeListeners(); document.querySelector("#enabled").checked = enabled?true:false; document.querySelector("#compact").checked = compact?true:false; @@ -57,8 +72,12 @@ async function restoreOptions() document.querySelector("#fixedwidthpositioning").checked = fixedwidthpositioning?true:false; document.querySelector("#superborder").checked = superborder?true:false; document.querySelector("#showoriginal").checked = showoriginal?true:false; - } - catch (error){} + document.querySelector("#bgcolor").value = bgcolor?bgcolor:"#111111"; + document.querySelector("#fgcolor").value = fgcolor?fgcolor:"#CCCCCC"; + document.querySelector("#hlcolor").value = hlcolor?hlcolor:"#99DDFF"; + document.querySelector("#font").value = font?font:""; + document.querySelector("#hlfont").value = hlfont?hlfont:""; + } catch (error) {} removeListeners(); restoreListeners(); } @@ -94,6 +113,11 @@ function setOptions() fixedwidthpositioning: document.querySelector("#fixedwidthpositioning").checked, superborder: document.querySelector("#superborder").checked, showoriginal: document.querySelector("#showoriginal").checked, + bgcolor: document.querySelector("#bgcolor").value, + fgcolor: document.querySelector("#fgcolor").value, + hlcolor: document.querySelector("#hlcolor").value, + font: document.querySelector("#font").value, + hlfont: document.querySelector("#hlfont").value, }).then(()=>{fixicon();},()=>{}); } diff --git a/texthook.js b/texthook.js index 41ffe40..598f120 100644 --- a/texthook.js +++ b/texthook.js @@ -33,6 +33,11 @@ showoriginal: true, scale: 1, width: 600, lookuprate: 8, +bgcolor: "#111111", +fgcolor: "#CCCCCC", +hlcolor: "#99DDFF", +font: "", +hlfont: "", }; let last_time_display = Date.now(); @@ -52,14 +57,16 @@ function delete_div () function display_div (middle, x, y, time) { - let bordercolor = undefined; - if(settings.superborder) - bordercolor = "white"; - else - bordercolor = "#CCC"; - - middle.style = "background-color: #111; border-radius: 2.5px; border: 1px solid #111;"; - middle.firstChild.style = "border: 1px solid " + bordercolor + "; border-radius: 2px; padding: 2px; background-color: #111; color: #CCC; font-family: Arial, sans-serif; font-size: 13px; text-align: left;"; + //let bordercolor = undefined; + //if(settings.superborder) + // bordercolor = "white"; + //else + // bordercolor = "#CCC"; + let font = settings.font.trim(); + if(font != "") + font += ","; + middle.style = `background-color: ${settings.bgcolor}; border-radius: 2.5px; border: 1px solid ${settings.bgcolor};`; + middle.firstChild.style = `border: 1px solid ${settings.fgcolor}; border-radius: 2px; padding: 2px; background-color: ${settings.bgcolor}; color: ${settings.fgcolor}; font-family: ${font} Arial, sans-serif; font-size: 13px; text-align: left;`; let find_root = window; let newx = x; @@ -83,9 +90,9 @@ function display_div (middle, x, y, time) styletext += "position: absolute; top: 0; left: 0; "; if(settings.superborder) - styletext += "background-color: " + bordercolor + "; border-radius: 3px; border: 1px solid " + bordercolor + "; z-index: 100000;"; + styletext += `background-color: ${settings.fgcolor}; border-radius: 3px; border: 1px solid ${settings.fgcolor}; z-index: 100000;`; else - styletext += "border-radius: 3px; background-color: #111; z-index: 100000;"; + styletext += `border-radius: 3px; background-color: ${settings.bgcolor}; z-index: 100000;`; let other = mydoc.body.getElementsByClassName(div_class); let outer = undefined; @@ -162,11 +169,16 @@ function build_div (text, result) // TODO: link to this instead of hardcoding it; work on unhardcoding other CSS too let style = document.createElement("style"); style.type = "text/css"; + let font = settings.hlfont.trim(); + if(font != "") + font += ","; + if(settings.font.trim() != "") + font += settings.font.trim() + ","; style.textContent = -".nazeka_main_keb{font-family: IPAGothic,TakaoGothic,Noto Sans CJK JP Regular,Meiryo,sans-serif;font-size:18px;color:#9DF}\ -.nazeka_main_reb{font-family: IPAGothic,TakaoGothic,Noto Sans CJK JP Regular,Meiryo,sans-serif;font-size:18px;color:#9DF}\ +`.nazeka_main_keb{font-family: ${font}IPAGothic,TakaoGothic,Noto Sans CJK JP Regular,Meiryo,sans-serif;font-size:18px;color:${settings.hlcolor}}\ +.nazeka_main_reb{font-family: ${font}IPAGothic,TakaoGothic,Noto Sans CJK JP Regular,Meiryo,sans-serif;font-size:18px;color:${settings.hlcolor}}\ .nazeka_original{float: right; margin-right: 2px; margin-left:4px; opacity:0.7;}\ -"; +`; temp.appendChild(style); if(settings.showoriginal) { @@ -565,6 +577,12 @@ async function settings_init() getvar("superborder", false); getvar("showoriginal", true); + getvar("bgcolor", "#111111"); + getvar("fgcolor", "#CCCCCC"); + getvar("hlcolor", "#99DDFF"); + getvar("font", ""); + getvar("hlfont", ""); + if(!settings.enabled && exists_div()) delete_div(); } catch(err) {} // options not stored yet