extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-28 11:03:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve link add and edit form

Browse Source
This commit is contained in:
zombieFox 2019-08-14 08:57:00 +01:00
parent 166452b32b
commit 492689db38
3 changed files with 86 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/js/link.js
View File

@ -597,20 +597,34 @@ var link = (function() {
render.form = function() { render.form = function() {
var form = helper.node("form|class:link-form"); var form = helper.node("form|class:link-form");
var fieldset = helper.node("fieldset"); var fieldset = helper.node("fieldset");
var letterFormIndent = helper.node("div|class:form-indent");
var letterInputWrap = helper.node("div|class:input-wrap"); // letter
var letterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var displayLetterRadioWrap = helper.node("div|class:input-wrap");
var iconFormIndent = helper.node("div|class:form-indent"); var displayLetterRadio = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
var iconFormGroupWrap = helper.node("div|class:input-wrap"); var displayLetterLable = helper.node("label:Letters|for:link-form-input-display-letter");
var iconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper"); var displayLetterFormIndent = helper.node("div|class:form-indent");
var iconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled"); var displayLetterInputWrap = helper.node("div|class:input-wrap");
var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled"); var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
var iconFormGroupClearIcon = helper.node("span|class:icon-close"); // icon
var iconHelper = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled"); var displayIconRadiotWrap = helper.node("div|class:input-wrap");
var displayIconRadio = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
var displayIconLable = helper.node("label:Icon|for:link-form-input-display-icon");
var displayIconFormIndent = helper.node("div|class:form-indent");
var displayIconInputWrap = helper.node("div|class:input-wrap");
var displayIconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper");
var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
var displayIconFormGroupClearIcon = helper.node("span|class:icon-close");
var displayIconHelper = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
// name
var nameInputWrap = helper.node("div|class:input-wrap"); var nameInputWrap = helper.node("div|class:input-wrap");
var nameLabel = helper.node("label:Name|for:link-form-input-name"); var nameLabel = helper.node("label:Name|for:link-form-input-name");
var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
// url
var urlInputWrap = helper.node("div|class:input-wrap"); var urlInputWrap = helper.node("div|class:input-wrap");
var urlLabel = helper.node("label:URL|for:link-form-input-url"); var urlLabel = helper.node("label:URL|for:link-form-input-url");
var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
@ -622,43 +636,39 @@ var link = (function() {
value: "form-helper small muted" value: "form-helper small muted"
}] }]
}); });
var letterRadioInputWrap = helper.node("div|class:input-wrap");
var letterRadioInput = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter"); // accent
var letterRadioLable = helper.node("label:Letters|for:link-form-input-display-letter");
var iconRadioInputWrap = helper.node("div|class:input-wrap");
var iconRadioInput = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
var iconRadioLable = helper.node("label:Icon|for:link-form-input-display-icon");
var accentLabel = helper.node("label:Accent colour"); var accentLabel = helper.node("label:Accent colour");
var accentGlobalRadioInputWrap = helper.node("div|class:input-wrap"); var accentGlobalRadioWrap = helper.node("div|class:input-wrap");
var accentGlobalRadioInput = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global"); var accentGlobalRadio = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
var accentGlobalRadioLabel = helper.node("label:Global|for:link-form-input-accent-global"); var accentGlobalLabel = helper.node("label:Global|for:link-form-input-accent-global");
var accentCustomRadioInputWrap = helper.node("div|class:input-wrap"); var accentCustomInputWrap = helper.node("div|class:input-wrap");
var accentCustomRadioInput = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom"); var accentCustomRadio = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
var accentCustomRadioLabel = helper.node("label:Custom|for:link-form-input-accent-custom"); var accentCustomLabel = helper.node("label:Custom|for:link-form-input-accent-custom");
var accentFormIndent = helper.node("div|class:form-indent"); var accentColorFormIndent = helper.node("div|class:form-indent");
var accentColorInputWrap = helper.node("div|class:input-wrap"); var accentColorInputWrap = helper.node("div|class:input-wrap");
var accentColorFormGroup = helper.node("div|class:form-group mb-0"); var accentColorFormGroup = helper.node("div|class:form-group mb-0");
var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled"); var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled"); var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
var accentCustomInputHelper = helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled"); var accentColorInputHelper = helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
letterRadioInputWrap.appendChild(letterRadioInput); displayLetterRadioWrap.appendChild(displayLetterRadio);
letterRadioInputWrap.appendChild(letterRadioLable); displayLetterRadioWrap.appendChild(displayLetterLable);
fieldset.appendChild(letterRadioInputWrap); fieldset.appendChild(displayLetterRadioWrap);
letterInputWrap.appendChild(letterInput); displayLetterInputWrap.appendChild(displayLetterInput);
letterFormIndent.appendChild(letterInputWrap); displayLetterFormIndent.appendChild(displayLetterInputWrap);
fieldset.appendChild(letterFormIndent); fieldset.appendChild(displayLetterFormIndent);
iconRadioInputWrap.appendChild(iconRadioInput); displayIconRadiotWrap.appendChild(displayIconRadio);
iconRadioInputWrap.appendChild(iconRadioLable); displayIconRadiotWrap.appendChild(displayIconLable);
fieldset.appendChild(iconRadioInputWrap); fieldset.appendChild(displayIconRadiotWrap);
iconFormGroupClear.appendChild(iconFormGroupClearIcon); displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon);
iconFormGroup.appendChild(iconInput); displayIconFormGroup.appendChild(displayIconInput);
iconFormGroup.appendChild(iconFormGroupText); displayIconFormGroup.appendChild(displayIconFormGroupText);
iconFormGroup.appendChild(iconFormGroupClear); displayIconFormGroup.appendChild(displayIconFormGroupClear);
iconFormGroupWrap.appendChild(iconFormGroup); displayIconInputWrap.appendChild(displayIconFormGroup);
iconFormIndent.appendChild(iconFormGroupWrap); displayIconFormIndent.appendChild(displayIconInputWrap);
iconFormIndent.appendChild(iconHelper); displayIconFormIndent.appendChild(displayIconHelper);
fieldset.appendChild(iconFormIndent); fieldset.appendChild(displayIconFormIndent);
fieldset.appendChild(helper.node("hr")); fieldset.appendChild(helper.node("hr"));
nameInputWrap.appendChild(nameLabel); nameInputWrap.appendChild(nameLabel);
nameInputWrap.appendChild(nameInput); nameInputWrap.appendChild(nameInput);
@ -669,27 +679,27 @@ var link = (function() {
fieldset.appendChild(urlInputHelper); fieldset.appendChild(urlInputHelper);
fieldset.appendChild(helper.node("hr")); fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(accentLabel); fieldset.appendChild(accentLabel);
accentGlobalRadioInputWrap.appendChild(accentGlobalRadioInput); accentGlobalRadioWrap.appendChild(accentGlobalRadio);
accentGlobalRadioInputWrap.appendChild(accentGlobalRadioLabel); accentGlobalRadioWrap.appendChild(accentGlobalLabel);
fieldset.appendChild(accentGlobalRadioInputWrap); fieldset.appendChild(accentGlobalRadioWrap);
accentCustomRadioInputWrap.appendChild(accentCustomRadioInput); accentCustomInputWrap.appendChild(accentCustomRadio);
accentCustomRadioInputWrap.appendChild(accentCustomRadioLabel); accentCustomInputWrap.appendChild(accentCustomLabel);
fieldset.appendChild(accentCustomRadioInputWrap); fieldset.appendChild(accentCustomInputWrap);
accentColorFormGroup.appendChild(accentColorPicker); accentColorFormGroup.appendChild(accentColorPicker);
accentColorFormGroup.appendChild(accentColorHex); accentColorFormGroup.appendChild(accentColorHex);
accentColorInputWrap.appendChild(accentColorFormGroup); accentColorInputWrap.appendChild(accentColorFormGroup);
accentFormIndent.appendChild(accentColorInputWrap); accentColorFormIndent.appendChild(accentColorInputWrap);
accentFormIndent.appendChild(accentCustomInputHelper); accentColorFormIndent.appendChild(accentColorInputHelper);
fieldset.appendChild(accentFormIndent); fieldset.appendChild(accentColorFormIndent);
form.appendChild(fieldset); form.appendChild(fieldset);
letterRadioInput.addEventListener("change", function(event) { displayLetterRadio.addEventListener("change", function(event) {
stagedLink.data.display = this.value; stagedLink.data.display = this.value;
}, false); }, false);
iconRadioInput.addEventListener("change", function(event) { displayIconRadio.addEventListener("change", function(event) {
stagedLink.data.display = this.value; stagedLink.data.display = this.value;
}, false); }, false);
letterInput.addEventListener("input", function(event) { displayLetterInput.addEventListener("input", function(event) {
stagedLink.data.letter = this.value; stagedLink.data.letter = this.value;
}, false); }, false);
nameInput.addEventListener("input", function(event) { nameInput.addEventListener("input", function(event) {
@ -698,18 +708,18 @@ var link = (function() {
urlInput.addEventListener("input", function(event) { urlInput.addEventListener("input", function(event) {
stagedLink.data.url = this.value; stagedLink.data.url = this.value;
}, false); }, false);
accentGlobalRadioInput.addEventListener("change", function() { accentGlobalRadio.addEventListener("change", function() {
stagedLink.data.accent.override = false; stagedLink.data.accent.override = false;
accentColorPicker.setAttribute("disabled", ""); accentColorPicker.setAttribute("disabled", "");
accentColorHex.setAttribute("disabled", ""); accentColorHex.setAttribute("disabled", "");
helper.addClass(accentCustomInputHelper, "disabled"); helper.addClass(accentColorInputHelper, "disabled");
}, false); }, false);
accentCustomRadioInput.addEventListener("change", function() { accentCustomRadio.addEventListener("change", function() {
stagedLink.data.accent.override = true; stagedLink.data.accent.override = true;
stagedLink.data.accent.color = helper.hexToRgb(accentColorPicker.value); stagedLink.data.accent.color = helper.hexToRgb(accentColorPicker.value);
accentColorPicker.removeAttribute("disabled"); accentColorPicker.removeAttribute("disabled");
accentColorHex.removeAttribute("disabled"); accentColorHex.removeAttribute("disabled");
helper.removeClass(accentCustomInputHelper, "disabled"); helper.removeClass(accentColorInputHelper, "disabled");
}, false); }, false);
accentColorPicker.addEventListener("change", function() { accentColorPicker.addEventListener("change", function() {
if (helper.isHexNumber(this.value)) { if (helper.isHexNumber(this.value)) {
@ -723,7 +733,7 @@ var link = (function() {
accentColorPicker.value = this.value; accentColorPicker.value = this.value;
}; };
}, false); }, false);
iconFormGroupClear.addEventListener("click", function(event) { displayIconFormGroupClear.addEventListener("click", function(event) {
stagedLink.data.icon.name = null; stagedLink.data.icon.name = null;
stagedLink.data.icon.prefix = null; stagedLink.data.icon.prefix = null;
stagedLink.data.icon.label = null; stagedLink.data.icon.label = null;
@ -731,28 +741,28 @@ var link = (function() {
if (existingIcon) { if (existingIcon) {
existingIcon.remove(); existingIcon.remove();
}; };
iconInput.value = ""; displayIconInput.value = "";
}, false); }, false);
letterRadioInput.addEventListener("change", function(event) { displayLetterRadio.addEventListener("change", function(event) {
letterInput.removeAttribute("disabled"); displayLetterInput.removeAttribute("disabled");
iconInput.setAttribute("disabled", ""); displayIconInput.setAttribute("disabled", "");
iconFormGroupText.setAttribute("disabled", ""); displayIconFormGroupText.setAttribute("disabled", "");
helper.addClass(form.querySelector(".link-form-input-icon-helper"), "disabled"); helper.addClass(form.querySelector(".link-form-input-icon-helper"), "disabled");
iconFormGroupClear.setAttribute("disabled", ""); displayIconFormGroupClear.setAttribute("disabled", "");
iconFormGroupText.tabIndex = -1; displayIconFormGroupText.tabIndex = -1;
}, false); }, false);
iconRadioInput.addEventListener("change", function(event) { displayIconRadio.addEventListener("change", function(event) {
letterInput.setAttribute("disabled", ""); displayLetterInput.setAttribute("disabled", "");
iconInput.removeAttribute("disabled"); displayIconInput.removeAttribute("disabled");
iconFormGroupText.removeAttribute("disabled"); displayIconFormGroupText.removeAttribute("disabled");
helper.removeClass(form.querySelector(".link-form-input-icon-helper"), "disabled"); helper.removeClass(form.querySelector(".link-form-input-icon-helper"), "disabled");
iconFormGroupClear.removeAttribute("disabled"); displayIconFormGroupClear.removeAttribute("disabled");
iconFormGroupText.tabIndex = 1; displayIconFormGroupText.tabIndex = 1;
}, false); }, false);
autoSuggest.bind.input({ autoSuggest.bind.input({
input: iconInput, input: displayIconInput,
type: "fontawesomeIcon", type: "fontawesomeIcon",
postFocus: iconFormGroupText postFocus: displayIconFormGroupText
}); });
return form; return form;
}; };

2
src/js/version.js
View File

@ -1,7 +1,7 @@
var version = (function() { var version = (function() {
var current = "3.70.0"; var current = "3.71.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.70.0", "version": "3.71.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"