From b519f6e6c699066c0e4cbd3edde7de074a3809da Mon Sep 17 00:00:00 2001 From: Kombie Date: Thu, 18 Apr 2019 13:30:40 +0100 Subject: [PATCH] [feature] adding controls for header search width --- css/base.css | 1 + css/header.css | 34 +++++---- css/link.css | 2 +- index.html | 33 ++++++-- js/control.js | 97 ++++++++++++++++++++---- js/data.js | 5 +- js/header.js | 11 +++ js/init.js | 8 +- js/state.js | 8 +- js/update.js | 199 +++++++++++++++++++++++++++++++------------------ js/version.js | 2 +- 11 files changed, 285 insertions(+), 115 deletions(-) diff --git a/css/base.css b/css/base.css index 44771221..4753e5ee 100755 --- a/css/base.css +++ b/css/base.css @@ -67,6 +67,7 @@ --header-shade-color: transparent; --header-shade-opacity: none; --header-height: 0; + --header-search-width: 0%; --header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top)); --header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom)); --header-shade-padding-multiplier-top: 4; diff --git a/css/header.css b/css/header.css index a51d6133..e3e5d1d1 100755 --- a/css/header.css +++ b/css/header.css @@ -71,6 +71,18 @@ position: relative; } +.is-header-search-text-align-left .header-search-input { + text-align: left; +} + +.is-header-search-text-align-center .header-search-input { + text-align: center; +} + +.is-header-search-text-align-right .header-search-input { + text-align: right; +} + .is-header-searching .header-search-input[type="text"] { padding-right: 3.5em; } @@ -93,20 +105,16 @@ justify-content: flex-end; } -.is-header-search-grow .header-search { - flex-grow: 1; - flex-basis: 100%; -} - -@media (min-width: 550px) { - .is-header-search-grow .header-search { - flex-basis: initial; - } -} - .header-search { - width: 15vw; - min-width: 15em; + width: var(--header-search-width); +} + +.is-header-search-width-auto .header-search { + flex-grow: 1; +} + +.is-header-search-width-custom .header-search { + width: var(--header-search-width); } .header-date, diff --git a/css/link.css b/css/link.css index 06112c57..de8c1e34 100755 --- a/css/link.css +++ b/css/link.css @@ -204,7 +204,7 @@ text-overflow: ellipsis; } -.bookmarks-url-dark .link-url-text { +.is-bookmarks-url-dark .link-url-text { color: rgb(var(--black)); } diff --git a/index.html b/index.html index 7def172a..74dcbad0 100644 --- a/index.html +++ b/index.html @@ -117,7 +117,7 @@
-

Greeting

+

@@ -203,9 +203,19 @@
-
- - + +
+ + +

Search box will grow to best fit available space.

+
+
+ + +
+
+ +
@@ -243,6 +253,19 @@

Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="

nightTab would add the search term entered into the Search input at the end of the above URL

+ +
+ + +
+
+ + +
+
+ + +

Buttons

@@ -268,7 +291,7 @@
-

Effects may not be visible if the Search box is set to grow to fill available space.

+

Effects may not be visible if the Search box size is set to Auto and grows to fill available space.

diff --git a/js/control.js b/js/control.js index 5425b245..0f6bf24c 100644 --- a/js/control.js +++ b/js/control.js @@ -173,9 +173,27 @@ var control = (function() { header.render(); } }, { - element: helper.e(".control-header-search-grow"), - path: "header.search.grow", - type: "checkbox", + element: helper.e(".control-header-search-width-style-auto"), + path: "header.search.width.style", + type: "radio", + func: function() { + render(); + dependents(); + header.render(); + } + }, { + element: helper.e(".control-header-search-width-style-custom"), + path: "header.search.width.style", + type: "radio", + func: function() { + render(); + dependents(); + header.render(); + } + }, { + element: helper.e(".control-header-search-width-custom"), + path: "header.search.width.custom", + type: "range", func: function() { render(); header.render(); @@ -183,8 +201,7 @@ var control = (function() { }, { element: helper.e(".control-header-search-focus"), path: "header.search.focus", - type: "checkbox", - func: function() {} + type: "checkbox" }, { element: helper.e(".control-header-search-engine-google"), path: "header.search.engine.selected", @@ -244,12 +261,34 @@ var control = (function() { func: function() { search.render(); } + }, { + element: helper.e(".control-header-search-text-align-left"), + path: "header.search.text.align", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-header-search-text-align-center"), + path: "header.search.text.align", + type: "radio", + func: function() { + render(); + } + }, { + element: helper.e(".control-header-search-text-align-right"), + path: "header.search.text.align", + type: "radio", + func: function() { + render(); + } }, { element: helper.e(".control-header-edit-add-show"), path: "header.editAdd.show", type: "checkbox", func: function() { render(); + header.render(); } }, { element: helper.e(".control-header-accent-show"), @@ -257,6 +296,7 @@ var control = (function() { type: "checkbox", func: function() { render(); + header.render(); } }, { element: helper.e(".control-layout-alignment-horizontal-left"), @@ -813,11 +853,13 @@ var control = (function() { } else { helper.removeClass(html, "is-header-search-show"); }; - if (state.get().header.search.grow) { - helper.addClass(html, "is-header-search-grow"); - } else { - helper.removeClass(html, "is-header-search-grow"); - }; + helper.removeClass(html, "is-header-search-width-custom"); + helper.removeClass(html, "is-header-search-width-auto"); + helper.addClass(html, "is-header-search-width-" + state.get().header.search.width.style); + helper.removeClass(html, "is-header-search-text-align-left"); + helper.removeClass(html, "is-header-search-text-align-center"); + helper.removeClass(html, "is-header-search-text-align-right"); + helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align); helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name; helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url; }; @@ -860,11 +902,11 @@ var control = (function() { }; var urlText = { dark: function() { - helper.addClass(html, "bookmarks-url-dark"); + helper.addClass(html, "is-bookmarks-url-dark"); helper.removeClass(html, "bookmarks-url-light"); }, light: function() { - helper.removeClass(html, "bookmarks-url-dark"); + helper.removeClass(html, "is-bookmarks-url-dark"); helper.addClass(html, "bookmarks-url-light"); } }; @@ -1021,23 +1063,39 @@ var control = (function() { }; var _search = function() { if (state.get().header.search.show) { - helper.e(".control-header-search-grow").disabled = false; + helper.e(".control-header-search-width-label").removeAttribute("disabled"); + helper.e(".control-header-search-width-style-auto").disabled = false; + helper.e(".control-header-search-width-style-custom").disabled = false; + helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled"); + helper.e(".control-header-search-width-custom").disabled = false; helper.e(".control-header-search-focus").disabled = false; + helper.e(".control-header-search-engine-label").removeAttribute("disabled"); helper.e(".control-header-search-engine-google").disabled = false; helper.e(".control-header-search-engine-duckduckgo").disabled = false; helper.e(".control-header-search-engine-youtube").disabled = false; helper.e(".control-header-search-engine-giphy").disabled = false; helper.e(".control-header-search-engine-custom").disabled = false; - helper.e(".control-header-search-engine-label").removeAttribute("disabled"); + helper.e(".control-header-search-text-align-label").removeAttribute("disabled"); + helper.e(".control-header-search-text-align-left").disabled = false; + helper.e(".control-header-search-text-align-center").disabled = false; + helper.e(".control-header-search-text-align-right").disabled = false; } else { - helper.e(".control-header-search-grow").disabled = true; + helper.e(".control-header-search-width-label").setAttribute("disabled", ""); + helper.e(".control-header-search-width-style-auto").disabled = true; + helper.e(".control-header-search-width-style-custom").disabled = true; + helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", ""); + helper.e(".control-header-search-width-custom").disabled = true; helper.e(".control-header-search-focus").disabled = true; + helper.e(".control-header-search-engine-label").setAttribute("disabled", ""); helper.e(".control-header-search-engine-google").disabled = true; helper.e(".control-header-search-engine-duckduckgo").disabled = true; helper.e(".control-header-search-engine-youtube").disabled = true; helper.e(".control-header-search-engine-giphy").disabled = true; helper.e(".control-header-search-engine-custom").disabled = true; - helper.e(".control-header-search-engine-label").setAttribute("disabled", ""); + helper.e(".control-header-search-text-align-label").setAttribute("disabled", ""); + helper.e(".control-header-search-text-align-left").disabled = true; + helper.e(".control-header-search-text-align-center").disabled = true; + helper.e(".control-header-search-text-align-right").disabled = true; }; if (state.get().header.search.show && state.get().header.search.engine.selected === "custom") { helper.e("[for=control-header-search-engine-custom-name]").removeAttribute("disabled"); @@ -1050,6 +1108,13 @@ var control = (function() { helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", ""); helper.e(".control-header-search-engine-custom-url").disabled = true; }; + if (state.get().header.search.show && state.get().header.search.width.style === "custom") { + helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled"); + helper.e(".control-header-search-width-custom").disabled = false; + } else { + helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", ""); + helper.e(".control-header-search-width-custom").disabled = true; + }; }; var _theme = function() { if (state.get().theme.accent.random.active) { diff --git a/js/data.js b/js/data.js index 7af4cb42..f6bd4c7d 100644 --- a/js/data.js +++ b/js/data.js @@ -35,13 +35,12 @@ var data = (function() { var _checkForSavedData = function(data) { if (data) { - console.log("data loaded"); if (!("version" in data) || data.version != version.get()) { - console.log("data version", data.version, "found less than current"); + console.log("data version " + data.version + " found less than current"); data = update.run(data); set(saveName, JSON.stringify(data)); } else { - console.log("data version =", version.get()); + console.log("data version " + version.get() + " no need to run update"); }; } else { console.log("no data found to load"); diff --git a/js/header.js b/js/header.js index 80e22b40..68b99409 100644 --- a/js/header.js +++ b/js/header.js @@ -12,6 +12,9 @@ var header = (function() { render(); }, false); }); + document.fonts.ready.then(function() { + render(); + }); }; var edge = function(action) { @@ -80,6 +83,14 @@ var header = (function() { html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width); html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width); }; + var _search = function() { + if (state.get().header.search.show && state.get().header.search.width.style === "custom") { + html.style.setProperty("--header-search-width", state.get().header.search.width.custom + "%"); + } else { + html.style.removeProperty("--header-search-width"); + }; + }; + _search(); _color(); _opacity(); _padding(); diff --git a/js/init.js b/js/init.js index 111caeb4..e52ad364 100644 --- a/js/init.js +++ b/js/init.js @@ -1,5 +1,5 @@ // log version -console.log("nightTab v", version.get(), "loaded"); +console.log("nightTab version", version.get()); // check for old versions data.init(); @@ -47,9 +47,6 @@ tip.init(); // render page title layout.init(); -// render header height padding -header.init(); - // render background image background.init(); @@ -60,3 +57,6 @@ search.init(); // render page title title.init(); + +// render header height padding +header.init(); diff --git a/js/state.js b/js/state.js index ee64dc00..3a24ab2c 100644 --- a/js/state.js +++ b/js/state.js @@ -26,7 +26,10 @@ var state = (function() { }, search: { show: true, - grow: true, + width: { + style: "auto", + custom: 30 + }, focus: false, engine: { selected: "google", @@ -50,6 +53,9 @@ var state = (function() { url: "", name: "" } + }, + text: { + align: "left" } }, alignment: { diff --git a/js/update.js b/js/update.js index ce3660db..cd566cf5 100644 --- a/js/update.js +++ b/js/update.js @@ -145,6 +145,106 @@ var update = (function() { return data; }; + var _update_2110 = function(data) { + data.state.header.greeting = { + show: false, + type: "good", + name: "" + }; + data.version = "2.11.0"; + return data; + }; + + var _update_2110 = function(data) { + data.state.header.greeting = { + show: false, + type: "good", + name: "" + }; + data.version = "2.11.0"; + return data; + }; + + var _update_2120 = function(data) { + data.state.bookmarks.link = { + show: data.state.bookmarks.show.link + }; + data.state.bookmarks.name = { + show: data.state.bookmarks.show.name + }; + data.state.bookmarks.url = { + show: data.state.bookmarks.show.url, + style: "dark" + }; + delete data.state.bookmarks.show; + data.state.theme = { + accent: { + current: data.state.layout.theme.current, + random: data.state.layout.theme.random + }, + style: "dark" + }; + delete data.state.layout.theme; + data.version = "2.12.0"; + return data; + }; + + var _update_2140 = function(data) { + data.state.layout.width = 72; + data.version = "2.14.0"; + return data; + }; + + var _update_2160 = function(data) { + data.state.header.shade.padding = { + top: data.state.header.shade.padding, + bottom: data.state.header.shade.padding + }; + data.state.header.shade.border = { + top: { + show: data.state.header.shade.border.top, + width: 1 + }, + bottom: { + show: data.state.header.shade.border.bottom, + width: 1 + } + }; + data.version = "2.16.0"; + return data; + }; + + var _update_2170 = function(data) { + data.state.header.search.engine.google.name = "Google"; + data.state.header.search.engine.duckduckgo.name = "Duck Duck Go"; + data.state.header.search.engine.giphy.name = "Giphy"; + data.version = "2.17.0"; + return data; + }; + + var _update_2190 = function(data) { + data.state.header.search.engine.youtube = { + url: "https://www.youtube.com/results?search_query=", + name: "YouTube" + }; + data.state.header.search.engine.custom.name = ""; + data.version = "2.19.0"; + return data; + }; + + var _update_2200 = function(data) { + data.version = "2.20.0"; + data.state.header.search.width = { + style: "auto", + custom: 30 + }; + data.state.header.search.text = { + align: "left" + }; + delete data.state.header.search.grow; + return data; + }; + // var _update_300 = function(data) { // data.version = 3.00; // return data; @@ -152,129 +252,86 @@ var update = (function() { function run(data) { if (!("version" in data)) { - console.log("\t -- running update", 1.00); + console.log("\t= running update", 1.00); data = _update_100(data); }; if (typeof data.version == "number") { if (data.version < 2.00) { - console.log("\t -- running update", 2.00); + console.log("\t= running update 2.0.0"); data = _update_200(data); }; if (data.version < 2.10) { - console.log("\t -- running update", 2.10); + console.log("\t= running update 2.1.0"); data = _update_210(data); }; if (data.version < 2.30) { - console.log("\t -- running update", 2.30); + console.log("\t= running update 2.3.0"); data = _update_230(data); }; if (data.version < 2.40) { - console.log("\t -- running update", 2.40); + console.log("\t= running update 2.4.0"); data = _update_240(data); }; if (data.version < 2.50) { - console.log("\t -- running update", 2.50); + console.log("\t= running update 2.5.0"); data = _update_250(data); }; if (data.version < 2.70) { - console.log("\t -- running update", 2.70); + console.log("\t= running update 2.7.0"); data = _update_270(data); }; if (data.version < 2.80) { - console.log("\t -- running update", 2.80); + console.log("\t= running update 2.8.0"); data = _update_280(data); }; if (data.version < 2.90) { - console.log("\t -- running update", 2.90); + console.log("\t= running update 2.9.0"); data = _update_290(data); }; if (data.version < 2.91) { - console.log("\t -- running update", 2.91); + console.log("\t= running update 2.9.1"); data.version = 2.91; }; if (data.version < 2.96) { // introduction of a new semantic version check function so the version is being bumped to 2.10.0 and changed to a string - console.log("\t -- running update", "2.10.0"); + console.log("\t= running update 2.10.0"); data.version = "2.10.0"; }; }; if (typeof data.version == "string") { if (version.compare(data.version, "2.11.0") == -1) { - console.log("\t -- running update", "2.11.0"); - data.state.header.greeting = { - show: false, - type: "good", - name: "" - }; - data.version = "2.11.0"; + console.log("\t= running update 2.11.0"); + data = _update_2110(data); }; if (version.compare(data.version, "2.12.0") == -1) { - console.log("\t -- running update", "2.12.0"); - data.state.bookmarks.link = { - show: data.state.bookmarks.show.link - }; - data.state.bookmarks.name = { - show: data.state.bookmarks.show.name - }; - data.state.bookmarks.url = { - show: data.state.bookmarks.show.url, - style: "dark" - }; - delete data.state.bookmarks.show; - data.state.theme = { - accent: { - current: data.state.layout.theme.current, - random: data.state.layout.theme.random - }, - style: "dark" - }; - delete data.state.layout.theme; - data.version = "2.12.0"; + console.log("\t= running update 2.12.0"); + data = _update_2120(data); }; if (version.compare(data.version, "2.14.0") == -1) { - console.log("\t -- running update", "2.14.0"); - data.state.layout.width = 72; - data.version = "2.14.0"; + console.log("\t= running update 2.14.0"); + data = _update_2140(data); }; if (version.compare(data.version, "2.16.0") == -1) { - console.log("\t -- running update", "2.16.0"); - data.state.header.shade.padding = { - top: data.state.header.shade.padding, - bottom: data.state.header.shade.padding - }; - data.state.header.shade.border = { - top: { - show: data.state.header.shade.border.top, - width: 1 - }, - bottom: { - show: data.state.header.shade.border.bottom, - width: 1 - } - }; - data.version = "2.16.0"; + console.log("\t= running update 2.16.0"); + data = _update_2160(data); }; if (version.compare(data.version, "2.17.0") == -1) { - console.log("\t -- running update", "2.17.0"); - data.state.header.search.engine.google.name = "Google"; - data.state.header.search.engine.duckduckgo.name = "Duck Duck Go"; - data.state.header.search.engine.giphy.name = "Giphy"; - data.version = "2.17.0"; + console.log("\t= running update 2.17.0"); + data = _update_2170(data); }; if (version.compare(data.version, "2.19.0") == -1) { - console.log("\t -- running update", "2.19.0"); - data.state.header.search.engine.youtube = { - url: "https://www.youtube.com/results?search_query=", - name: "YouTube" - }; - data.state.header.search.engine.custom.name = ""; - data.version = "2.19.0"; + console.log("\t= running update 2.19.0"); + data = _update_2190(data); + }; + if (version.compare(data.version, "2.20.0") == -1) { + console.log("\t= running update 2.20.0"); + data = _update_2200(data); }; }; // if no update is needed // version bump if (version.compare(data.version, version.get()) == -1) { - console.log("\t -- nothing to update, version bump to", version.get()); + console.log("\t= nothing to update, version bump to", version.get()); data.version = version.get(); }; return data; diff --git a/js/version.js b/js/version.js index d62ddd44..fbdb8710 100644 --- a/js/version.js +++ b/js/version.js @@ -1,7 +1,7 @@ var version = (function() { // version is normally bumped when the state needs changing or any new functionality is added - var current = "2.19.1"; + var current = "2.20.0"; var compare = function(a, b) { var pa = a.split(".");