[feature] adding controls for header search width

This commit is contained in:
Kombie 2019-04-18 13:30:40 +01:00 committed by GitHub
parent c27af0d40b
commit b519f6e6c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 285 additions and 115 deletions

View File

@ -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;

View File

@ -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,

View File

@ -204,7 +204,7 @@
text-overflow: ellipsis;
}
.bookmarks-url-dark .link-url-text {
.is-bookmarks-url-dark .link-url-text {
color: rgb(var(--black));
}

View File

@ -117,7 +117,7 @@
<div class="menu-content-area menu-content-area-header">
<div class="menu-item">
<h1 class="menu-header">Greeting</h1>
<h1 class="menu-header"></h1>
<div class="checkbox-wrap">
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
<label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
@ -203,9 +203,19 @@
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
<label for="control-header-search-show"><span class="label-icon"></span>Show</label>
</div>
<div class="checkbox-wrap form-indent-1">
<input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
<label for="control-header-search-grow"><span class="label-icon"></span>Grow to fill available space</label>
<label class="control-header-search-width-label form-indent-1">Search box size</label>
<div class="radio-wrap form-indent-1">
<input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
<label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
</div>
<div class="radio-wrap form-indent-1">
<input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
<label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
</div>
<div class="input-wrap form-indent-2">
<label for="control-header-search-width-custom">Percentage of content container</label>
<input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1">
</div>
<div class="checkbox-wrap form-indent-1">
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
@ -243,6 +253,19 @@
<p class="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
<p class="input-helper small muted">nightTab would add the search term entered into the Search input at the end of the above URL</p>
</div>
<label class="control-header-search-text-align-label form-indent-1">Text align</label>
<div class="radio-wrap form-indent-1">
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
<label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
</div>
<div class="radio-wrap form-indent-1">
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
<label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
</div>
<div class="radio-wrap form-indent-1">
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
<label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
</div>
</div>
<div class="menu-item">
<h1 class="menu-header">Buttons</h1>
@ -268,7 +291,7 @@
<div class="radio-wrap">
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
<label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
<p class="input-helper small muted">Effects may not be visible if the Search box is set to grow to fill available space.</p>
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div>
</div>
<div class="menu-item">

View File

@ -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) {

View File

@ -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");

View File

@ -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();

View File

@ -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();

View File

@ -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: {

View File

@ -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;

View File

@ -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(".");