diff --git a/src/js/link.js b/src/js/link.js index 044a4e38..e53905cc 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -597,20 +597,34 @@ var link = (function() { render.form = function() { var form = helper.node("form|class:link-form"); var fieldset = helper.node("fieldset"); - var letterFormIndent = helper.node("div|class:form-indent"); - var letterInputWrap = helper.node("div|class:input-wrap"); - 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 iconFormIndent = helper.node("div|class:form-indent"); - var iconFormGroupWrap = helper.node("div|class:input-wrap"); - var iconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper"); - 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 iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled"); - 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"); - 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"); + + // letter + var displayLetterRadioWrap = helper.node("div|class:input-wrap"); + 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 displayLetterLable = helper.node("label:Letters|for:link-form-input-display-letter"); + var displayLetterFormIndent = helper.node("div|class:form-indent"); + var displayLetterInputWrap = helper.node("div|class:input-wrap"); + 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"); + + // icon + 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 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"); + + // url var urlInputWrap = helper.node("div|class:input-wrap"); 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"); @@ -622,43 +636,39 @@ var link = (function() { 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"); - 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"); + + // accent var accentLabel = helper.node("label:Accent colour"); - var accentGlobalRadioInputWrap = 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 accentGlobalRadioLabel = helper.node("label:Global|for:link-form-input-accent-global"); - var accentCustomRadioInputWrap = 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 accentCustomRadioLabel = helper.node("label:Custom|for:link-form-input-accent-custom"); - var accentFormIndent = helper.node("div|class:form-indent"); + var accentGlobalRadioWrap = helper.node("div|class:input-wrap"); + 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 accentGlobalLabel = helper.node("label:Global|for:link-form-input-accent-global"); + var accentCustomInputWrap = helper.node("div|class:input-wrap"); + 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 accentCustomLabel = helper.node("label:Custom|for:link-form-input-accent-custom"); + var accentColorFormIndent = helper.node("div|class:form-indent"); var accentColorInputWrap = helper.node("div|class:input-wrap"); 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 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); - letterRadioInputWrap.appendChild(letterRadioLable); - fieldset.appendChild(letterRadioInputWrap); - letterInputWrap.appendChild(letterInput); - letterFormIndent.appendChild(letterInputWrap); - fieldset.appendChild(letterFormIndent); - iconRadioInputWrap.appendChild(iconRadioInput); - iconRadioInputWrap.appendChild(iconRadioLable); - fieldset.appendChild(iconRadioInputWrap); - iconFormGroupClear.appendChild(iconFormGroupClearIcon); - iconFormGroup.appendChild(iconInput); - iconFormGroup.appendChild(iconFormGroupText); - iconFormGroup.appendChild(iconFormGroupClear); - iconFormGroupWrap.appendChild(iconFormGroup); - iconFormIndent.appendChild(iconFormGroupWrap); - iconFormIndent.appendChild(iconHelper); - fieldset.appendChild(iconFormIndent); + displayLetterRadioWrap.appendChild(displayLetterRadio); + displayLetterRadioWrap.appendChild(displayLetterLable); + fieldset.appendChild(displayLetterRadioWrap); + displayLetterInputWrap.appendChild(displayLetterInput); + displayLetterFormIndent.appendChild(displayLetterInputWrap); + fieldset.appendChild(displayLetterFormIndent); + displayIconRadiotWrap.appendChild(displayIconRadio); + displayIconRadiotWrap.appendChild(displayIconLable); + fieldset.appendChild(displayIconRadiotWrap); + displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon); + displayIconFormGroup.appendChild(displayIconInput); + displayIconFormGroup.appendChild(displayIconFormGroupText); + displayIconFormGroup.appendChild(displayIconFormGroupClear); + displayIconInputWrap.appendChild(displayIconFormGroup); + displayIconFormIndent.appendChild(displayIconInputWrap); + displayIconFormIndent.appendChild(displayIconHelper); + fieldset.appendChild(displayIconFormIndent); fieldset.appendChild(helper.node("hr")); nameInputWrap.appendChild(nameLabel); nameInputWrap.appendChild(nameInput); @@ -669,27 +679,27 @@ var link = (function() { fieldset.appendChild(urlInputHelper); fieldset.appendChild(helper.node("hr")); fieldset.appendChild(accentLabel); - accentGlobalRadioInputWrap.appendChild(accentGlobalRadioInput); - accentGlobalRadioInputWrap.appendChild(accentGlobalRadioLabel); - fieldset.appendChild(accentGlobalRadioInputWrap); - accentCustomRadioInputWrap.appendChild(accentCustomRadioInput); - accentCustomRadioInputWrap.appendChild(accentCustomRadioLabel); - fieldset.appendChild(accentCustomRadioInputWrap); + accentGlobalRadioWrap.appendChild(accentGlobalRadio); + accentGlobalRadioWrap.appendChild(accentGlobalLabel); + fieldset.appendChild(accentGlobalRadioWrap); + accentCustomInputWrap.appendChild(accentCustomRadio); + accentCustomInputWrap.appendChild(accentCustomLabel); + fieldset.appendChild(accentCustomInputWrap); accentColorFormGroup.appendChild(accentColorPicker); accentColorFormGroup.appendChild(accentColorHex); accentColorInputWrap.appendChild(accentColorFormGroup); - accentFormIndent.appendChild(accentColorInputWrap); - accentFormIndent.appendChild(accentCustomInputHelper); - fieldset.appendChild(accentFormIndent); + accentColorFormIndent.appendChild(accentColorInputWrap); + accentColorFormIndent.appendChild(accentColorInputHelper); + fieldset.appendChild(accentColorFormIndent); form.appendChild(fieldset); - letterRadioInput.addEventListener("change", function(event) { + displayLetterRadio.addEventListener("change", function(event) { stagedLink.data.display = this.value; }, false); - iconRadioInput.addEventListener("change", function(event) { + displayIconRadio.addEventListener("change", function(event) { stagedLink.data.display = this.value; }, false); - letterInput.addEventListener("input", function(event) { + displayLetterInput.addEventListener("input", function(event) { stagedLink.data.letter = this.value; }, false); nameInput.addEventListener("input", function(event) { @@ -698,18 +708,18 @@ var link = (function() { urlInput.addEventListener("input", function(event) { stagedLink.data.url = this.value; }, false); - accentGlobalRadioInput.addEventListener("change", function() { + accentGlobalRadio.addEventListener("change", function() { stagedLink.data.accent.override = false; accentColorPicker.setAttribute("disabled", ""); accentColorHex.setAttribute("disabled", ""); - helper.addClass(accentCustomInputHelper, "disabled"); + helper.addClass(accentColorInputHelper, "disabled"); }, false); - accentCustomRadioInput.addEventListener("change", function() { + accentCustomRadio.addEventListener("change", function() { stagedLink.data.accent.override = true; stagedLink.data.accent.color = helper.hexToRgb(accentColorPicker.value); accentColorPicker.removeAttribute("disabled"); accentColorHex.removeAttribute("disabled"); - helper.removeClass(accentCustomInputHelper, "disabled"); + helper.removeClass(accentColorInputHelper, "disabled"); }, false); accentColorPicker.addEventListener("change", function() { if (helper.isHexNumber(this.value)) { @@ -723,7 +733,7 @@ var link = (function() { accentColorPicker.value = this.value; }; }, false); - iconFormGroupClear.addEventListener("click", function(event) { + displayIconFormGroupClear.addEventListener("click", function(event) { stagedLink.data.icon.name = null; stagedLink.data.icon.prefix = null; stagedLink.data.icon.label = null; @@ -731,28 +741,28 @@ var link = (function() { if (existingIcon) { existingIcon.remove(); }; - iconInput.value = ""; + displayIconInput.value = ""; }, false); - letterRadioInput.addEventListener("change", function(event) { - letterInput.removeAttribute("disabled"); - iconInput.setAttribute("disabled", ""); - iconFormGroupText.setAttribute("disabled", ""); + displayLetterRadio.addEventListener("change", function(event) { + displayLetterInput.removeAttribute("disabled"); + displayIconInput.setAttribute("disabled", ""); + displayIconFormGroupText.setAttribute("disabled", ""); helper.addClass(form.querySelector(".link-form-input-icon-helper"), "disabled"); - iconFormGroupClear.setAttribute("disabled", ""); - iconFormGroupText.tabIndex = -1; + displayIconFormGroupClear.setAttribute("disabled", ""); + displayIconFormGroupText.tabIndex = -1; }, false); - iconRadioInput.addEventListener("change", function(event) { - letterInput.setAttribute("disabled", ""); - iconInput.removeAttribute("disabled"); - iconFormGroupText.removeAttribute("disabled"); + displayIconRadio.addEventListener("change", function(event) { + displayLetterInput.setAttribute("disabled", ""); + displayIconInput.removeAttribute("disabled"); + displayIconFormGroupText.removeAttribute("disabled"); helper.removeClass(form.querySelector(".link-form-input-icon-helper"), "disabled"); - iconFormGroupClear.removeAttribute("disabled"); - iconFormGroupText.tabIndex = 1; + displayIconFormGroupClear.removeAttribute("disabled"); + displayIconFormGroupText.tabIndex = 1; }, false); autoSuggest.bind.input({ - input: iconInput, + input: displayIconInput, type: "fontawesomeIcon", - postFocus: iconFormGroupText + postFocus: displayIconFormGroupText }); return form; }; diff --git a/src/js/version.js b/src/js/version.js index 3e40c687..30822124 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,7 +1,7 @@ var version = (function() { - var current = "3.70.0"; + var current = "3.71.0"; var compare = function(a, b) { var pa = a.split("."); diff --git a/src/manifest.json b/src/manifest.json index c9c942d5..fb44be43 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "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.", - "version": "3.70.0", + "version": "3.71.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"