extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-30 14:21:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve link and group form labels

Browse Source
This commit is contained in:
zombieFox
2020-07-27 11:56:02 +01:00
parent a69751d2ec
commit e5ac6ee0d6
5 changed files with 352 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.69.0", "version": "5.70.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.69.0", "version": "5.70.0",
"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.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

449
src/js/link.js
View File

@ -905,7 +905,7 @@ var link = (function() {
}; };
}); });
} else if (typeof className == "string") { } else if (typeof className == "string") {
helper.addClass(element, className); render.form.className(element, className.split(" "));
}; };
return element; return element;
}, },
@ -927,26 +927,37 @@ var link = (function() {
collapse: function(node) { collapse: function(node) {
return helper.node("div|class:link-form-collapse", node); return helper.node("div|class:link-form-collapse", node);
}, },
label: function(name, labelText, labelDescription, icon, className) { label: function(override) {
var options = {
name: null,
labelText: null,
labelDescription: null,
icon: null,
className: null
};
if (override) {
options = helper.applyOptions(options, override);
};
var label; var label;
if (name) { if (options.name) {
label = helper.node("label|for:" + name); label = helper.node("label|for:" + options.name);
} else { } else {
label = helper.node("label"); label = helper.node("label");
}; };
if (labelText && labelDescription) { if (options.labelText && options.labelDescription) {
label.appendChild(helper.node("span|class:label-block", [ label.appendChild(helper.node("span|class:label-block", [
helper.node("span:" + labelText + "|class:label-block-item"), helper.node("span:" + options.labelText + "|class:label-block-item"),
helper.node("span:" + labelDescription + "|class:label-block-item small muted") helper.node("span:" + options.labelDescription + "|class:label-block-item small muted")
])); ]));
} else if (labelText) { } else if (options.labelText) {
label.appendChild(helper.node("span:" + labelText)); label.appendChild(helper.node("span:" + options.labelText));
}; };
if (icon) { if (options.icon) {
label.prepend(helper.node("span|class:label-icon")); label.prepend(helper.node("span|class:label-icon"));
}; };
if (className) { if (options.className) {
label = render.form.className(label, className); label = render.form.className(label, options.className);
}; };
return label; return label;
}, },
@ -1110,9 +1121,18 @@ var link = (function() {
var form = helper.node("form|class:group-form"); var form = helper.node("form|class:group-form");
// name // name
var groupFormInputNameShowLabel = render.form.label("group-form-input-name-show", "Show Group name", false, true); var groupFormInputNameShowLabel = render.form.label({
name: "group-form-input-name-show",
labelText: "Show Group name",
icon: true
});
var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,tabindex:1,checked"); var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,tabindex:1,checked");
var groupFormInputName = helper.node("input|type:text,class:group-form-input-name,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var groupFormInputNameLabel = render.form.label({
name: "group-form-input-name",
labelText: "Name",
className: "sr-only"
});
var groupFormInputNameInput = helper.node("input|type:text,class:group-form-input-name,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var groupFormRandomNameButton = helper.node("button:Random Group name|class:button button-line,type:button,tabindex:1"); var groupFormRandomNameButton = helper.node("button:Random Group name|class:button button-line,type:button,tabindex:1");
form.appendChild( form.appendChild(
@ -1123,7 +1143,8 @@ var link = (function() {
]), ]),
render.form.indent([ render.form.indent([
render.form.wrap([ render.form.wrap([
groupFormInputName groupFormInputNameLabel,
groupFormInputNameInput
]), ]),
render.form.wrap([ render.form.wrap([
groupFormRandomNameButton groupFormRandomNameButton
@ -1133,7 +1154,11 @@ var link = (function() {
); );
// open all // open all
var groupFormInputOpenallLabel = render.form.label("group-form-input-openall", "Show Open all", false, true); var groupFormInputOpenallLabel = render.form.label({
name: "group-form-input-openall",
labelText: "Show Open all",
icon: true
});
var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,tabindex:1,checked"); var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,tabindex:1,checked");
var groupFormOpenAllInputHelperItem = render.form.helper("group-form-input-openall", "Open all button will appear if there is at least one Bookmark in this Group."); var groupFormOpenAllInputHelperItem = render.form.helper("group-form-input-openall", "Open all button will appear if there is at least one Bookmark in this Group.");
@ -1151,7 +1176,11 @@ var link = (function() {
); );
// position // position
var groupFormPositionLabel = render.form.label("group-form-input-openall", "Position", false, true); var groupFormPositionLabel = render.form.label({
name: "group-form-input-openall",
labelText: "Position",
icon: true
});
var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position,tabindex:1"); var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position,tabindex:1");
form.appendChild( form.appendChild(
@ -1176,10 +1205,10 @@ var link = (function() {
var populateForm = function() { var populateForm = function() {
groupFormInputNameShowInput.checked = stagedGroup.group.name.show; groupFormInputNameShowInput.checked = stagedGroup.group.name.show;
groupFormPositionSelect.selectedIndex = stagedGroup.position.origin; groupFormPositionSelect.selectedIndex = stagedGroup.position.origin;
groupFormInputName.value = stagedGroup.group.name.text; groupFormInputNameInput.value = stagedGroup.group.name.text;
groupFormOpenAllInput.checked = stagedGroup.group.openAll.show; groupFormOpenAllInput.checked = stagedGroup.group.openAll.show;
if (!stagedGroup.group.name.show) { if (!stagedGroup.group.name.show) {
groupFormInputName.setAttribute("disabled", ""); groupFormInputNameInput.setAttribute("disabled", "");
groupFormRandomNameButton.setAttribute("disabled", ""); groupFormRandomNameButton.setAttribute("disabled", "");
}; };
}; };
@ -1205,17 +1234,17 @@ var link = (function() {
groupFormInputNameShowInput.addEventListener("change", function(event) { groupFormInputNameShowInput.addEventListener("change", function(event) {
stagedGroup.group.name.show = this.checked; stagedGroup.group.name.show = this.checked;
if (stagedGroup.group.name.show) { if (stagedGroup.group.name.show) {
groupFormInputName.removeAttribute("disabled"); groupFormInputNameInput.removeAttribute("disabled");
groupFormRandomNameButton.removeAttribute("disabled"); groupFormRandomNameButton.removeAttribute("disabled");
} else { } else {
groupFormInputName.setAttribute("disabled", ""); groupFormInputNameInput.setAttribute("disabled", "");
groupFormRandomNameButton.setAttribute("disabled", ""); groupFormRandomNameButton.setAttribute("disabled", "");
}; };
}, false); }, false);
groupFormPositionSelect.addEventListener("change", function(event) { groupFormPositionSelect.addEventListener("change", function(event) {
stagedGroup.position.destination = this.selectedIndex; stagedGroup.position.destination = this.selectedIndex;
}, false); }, false);
groupFormInputName.addEventListener("input", function(event) { groupFormInputNameInput.addEventListener("input", function(event) {
stagedGroup.group.name.text = this.value; stagedGroup.group.name.text = this.value;
}, false); }, false);
groupFormRandomNameButton.addEventListener("click", function(event) { groupFormRandomNameButton.addEventListener("click", function(event) {
@ -1223,7 +1252,7 @@ var link = (function() {
adjectivesCount: helper.randomNumber(1, 3) adjectivesCount: helper.randomNumber(1, 3)
}); });
stagedGroup.group.name.text = randomName; stagedGroup.group.name.text = randomName;
groupFormInputName.value = randomName; groupFormInputNameInput.value = randomName;
}, false); }, false);
groupFormOpenAllInput.addEventListener("change", function(event) { groupFormOpenAllInput.addEventListener("change", function(event) {
stagedGroup.group.openAll.show = this.checked; stagedGroup.group.openAll.show = this.checked;
@ -1589,14 +1618,37 @@ var link = (function() {
var formPreviewArea = helper.node("div|class:link-form-preview-area"); var formPreviewArea = helper.node("div|class:link-form-preview-area");
// group // group
// console.log(name, labelText, labelDescription, icon, className);
var groupExistingRadio = helper.node("input|class:link-form-input-group-existing,id:link-form-input-group-existing,type:radio,name:link-form-input-group,tabindex:1,value:existing"); var groupExistingRadio = helper.node("input|class:link-form-input-group-existing,id:link-form-input-group-existing,type:radio,name:link-form-input-group,tabindex:1,value:existing");
var groupExistingLabel = render.form.label("link-form-input-group-existing", "Existing group", false, true); var groupExistingLabel = render.form.label({
var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group,tabindex:1"); name: "link-form-input-group-existing",
var groupExistingPositionLabel = render.form.label("link-form-position", "Position"); labelText: "Existing group",
icon: true
});
var groupExistingGroupLabel = render.form.label({
name: "link-form-select-group",
labelText: "Name",
className: "sr-only"
});
var groupExistingGroupSelect = helper.node("select|id:link-form-select-group,class:link-form-select-group,tabindex:1");
var groupExistingPositionLabel = render.form.label({
name: "link-form-position",
labelText: "Position"
});
var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position,tabindex:1"); var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position,tabindex:1");
var groupNewRadio = helper.node("input|class:link-form-input-group-new,id:link-form-input-group-new,type:radio,name:link-form-input-group,tabindex:1,value:new"); var groupNewRadio = helper.node("input|class:link-form-input-group-new,id:link-form-input-group-new,type:radio,name:link-form-input-group,tabindex:1,value:new");
var groupNewLabel = render.form.label("link-form-input-group-new", "New group", false, true); var groupNewLabel = render.form.label({
var groupNewInput = helper.node("input|type:text,class:link-form-input-new-group,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); name: "link-form-input-group-new",
labelText: "New group",
icon: true
});
var groupNewNameLabel = render.form.label({
name: "link-form-select-group",
labelText: "Name",
className: "sr-only"
});
var groupNewNameInput = helper.node("input|type:text,class:link-form-input-new-group,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var groupNewRandomNameButton = render.form.button("Random Group name"); var groupNewRandomNameButton = render.form.button("Random Group name");
form.appendChild( form.appendChild(
@ -1613,7 +1665,8 @@ var link = (function() {
render.form.wrap([ render.form.wrap([
render.form.indent([ render.form.indent([
render.form.wrap([ render.form.wrap([
groupExistingGroup groupExistingGroupLabel,
groupExistingGroupSelect
]), ]),
render.form.wrap([ render.form.wrap([
groupExistingPositionLabel, groupExistingPositionLabel,
@ -1628,7 +1681,8 @@ var link = (function() {
render.form.wrap([ render.form.wrap([
render.form.indent([ render.form.indent([
render.form.wrap([ render.form.wrap([
groupNewInput, groupNewNameLabel,
groupNewNameInput
]), ]),
render.form.wrap([ render.form.wrap([
groupNewRandomNameButton groupNewRandomNameButton
@ -1642,27 +1696,49 @@ var link = (function() {
// display // display
var displayShowCheckbox = helper.node("input|class:link-form-input-display-visual-show,id:link-form-input-display-visual-show,type:checkbox,tabindex:1"); var displayShowCheckbox = helper.node("input|class:link-form-input-display-visual-show,id:link-form-input-display-visual-show,type:checkbox,tabindex:1");
var displayShowLabel = render.form.label("link-form-input-display-visual-show", "Show Visual Element", "Display Letters, Icon or an Image on this Bookmark tile.", true); var displayShowLabel = render.form.label({
name: "link-form-input-display-visual-show",
labelText: "Show Visual Element",
labelDescription: "Display Letters, Icon or an Image on this Bookmark tile.",
icon: true
});
var displayLetterRadio = helper.node("input|class:link-form-input-display-visual-letter,id:link-form-input-display-visual-letter,type:radio,name:link-form-input-display-visual,tabindex:1,value:letter"); var displayLetterRadio = helper.node("input|class:link-form-input-display-visual-letter,id:link-form-input-display-visual-letter,type:radio,name:link-form-input-display-visual,tabindex:1,value:letter");
var displayLetterLabel = render.form.label("link-form-input-display-visual-letter", "Letters", false, true); var displayLetterLabel = render.form.label({
name: "link-form-input-display-visual-letter",
labelText: "Letters",
icon: true
});
var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var displayIconRadio = helper.node("input|class:link-form-input-display-visual-icon,id:link-form-input-display-visual-icon,type:radio,name:link-form-input-display-visual,tabindex:1,value:icon"); var displayIconRadio = helper.node("input|class:link-form-input-display-visual-icon,id:link-form-input-display-visual-icon,type:radio,name:link-form-input-display-visual,tabindex:1,value:icon");
var displayIconLabel = render.form.label("link-form-input-display-visual-icon", "Icon", false, true); var displayIconLabel = render.form.label({
name: "link-form-input-display-visual-icon",
labelText: "Icon",
icon: true
});
var displayIconInput = helper.node("input|type:text,class:link-form-input-display-visual-icon form-group-item-grow link-form-input-icon auto-suggest-input,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var displayIconInput = helper.node("input|type:text,class:link-form-input-display-visual-icon form-group-item-grow link-form-input-icon auto-suggest-input,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1"); var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1");
var displayIconFormGroupClear = render.form.button(false, false, "icon-close"); var displayIconFormGroupClear = render.form.button(false, false, "icon-close");
var displayIconHelper = render.form.helper("link-form-input-display-visual-icon-helper", "Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported."); var displayIconHelper = render.form.helper("link-form-input-display-visual-icon-helper", "Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.");
var displayImageLabel = render.form.label("link-form-input-display-visual-image", "Image", false, true); var displayImageLabel = render.form.label({
name: "link-form-input-display-visual-image",
labelText: "Image",
icon: true
});
var displayImageRadio = helper.node("input|class:link-form-input-display-visual-image,id:link-form-input-display-visual-image,type:radio,name:link-form-input-display-visual,tabindex:1,value:image"); var displayImageRadio = helper.node("input|class:link-form-input-display-visual-image,id:link-form-input-display-visual-image,type:radio,name:link-form-input-display-visual,tabindex:1,value:image");
var displayImageInput = helper.node("input|type:text,class:link-form-input-image,placeholder:https://...,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var displayImageInput = helper.node("input|type:text,class:link-form-input-image,placeholder:https://...,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var displayImageHelper = render.form.helper("link-form-input-display-visual-image-helper", "Display an image in place of a letter or icon."); var displayImageHelper = render.form.helper("link-form-input-display-visual-image-helper", "Display an image in place of a letter or icon.");
// name // name
var nameShowCheckbox = helper.node("input|class:link-form-input-display-name-show,id:link-form-input-display-name-show,type:checkbox,tabindex:1"); var nameShowCheckbox = helper.node("input|class:link-form-input-display-name-show,id:link-form-input-display-name-show,type:checkbox,tabindex:1");
var nameShowLabel = render.form.label("link-form-input-display-name-show", "Show Name", "Display a Name on this Bookmark tile.", true); var nameShowLabel = render.form.label({
name: "link-form-input-display-name-show",
labelText: "Show Name",
labelDescription: "Display a Name on this Bookmark tile.",
icon: true
});
var nameInput = helper.node("input|type:text,class:link-form-input-display-name,id:link-form-input-display-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var nameInput = helper.node("input|type:text,class:link-form-input-display-name,id:link-form-input-display-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
form.appendChild( form.appendChild(
@ -1741,7 +1817,11 @@ var link = (function() {
); );
// url // url
var urlLabel = render.form.label("link-form-input-url", "URL", false, true); var urlLabel = render.form.label({
name: "link-form-input-url",
labelText: "URL",
icon: true
});
var urlInput = helper.node("input|type:text,class:link-form-input-url,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,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var urlInputHelper = render.form.helper("link-form-input-url-helper", "Be sure to use the full URL and include \"http://\" or \"https\://\"..."); var urlInputHelper = render.form.helper("link-form-input-url-helper", "Be sure to use the full URL and include \"http://\" or \"https\://\"...");
@ -1769,155 +1849,318 @@ var link = (function() {
var advancedCollapseButtonHelper = render.form.helper("link-form-image-helper", "Customise this Bookmarks appearance, Background, Colour and Accent."); var advancedCollapseButtonHelper = render.form.helper("link-form-image-helper", "Customise this Bookmarks appearance, Background, Colour and Accent.");
// background // background
var imageLabel = render.form.label("link-form-image", "Background image"); var imageLabel = render.form.label({
name: "link-form-image",
labelText: "Background image"
});
var imageInput = helper.node("input|type:text,class:link-form-image,id:link-form-image,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var imageInput = helper.node("input|type:text,class:link-form-image,id:link-form-image,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var imageInputHelper = render.form.helper("link-form-image-helper", "Display an image as the background of this Bookmark tile."); var imageInputHelper = render.form.helper("link-form-image-helper", "Display an image as the background of this Bookmark tile.");
var imageOpacityLabel = render.form.label("link-form-image-opacity-range", "Opacity"); var imageOpacityLabel = render.form.label({
name: "link-form-image-opacity-range",
labelText: "Opacity"
});
var imageOpacityInputRange = helper.node("input|class:link-form-image-opacity-range mr-3,id:link-form-image-opacity-range,type:range,name:link-form-image-opacity-range,min:0,max:100,tabindex:1"); var imageOpacityInputRange = helper.node("input|class:link-form-image-opacity-range mr-3,id:link-form-image-opacity-range,type:range,name:link-form-image-opacity-range,min:0,max:100,tabindex:1");
var imageOpacityInputNumber = helper.node("input|class:link-form-image-opacity-number form-group-item-medium form-group-radius-left,type:number,min:0,max:100,tabindex:1"); var imageOpacityInputNumber = helper.node("input|class:link-form-image-opacity-number form-group-item-medium form-group-radius-left,type:number,min:0,max:100,tabindex:1");
var imageOpacityInputDefault = render.form.button(false, "link-form-image-opacity-default", "icon-replay"); var imageOpacityInputDefault = render.form.button(false, "link-form-image-opacity-default", "icon-replay");
// tall wide // tall wide
var wideInput = helper.node("input|type:checkbox,class:link-form-wide,id:link-form-wide,tabindex:1"); var wideInput = helper.node("input|type:checkbox,class:link-form-wide,id:link-form-wide,tabindex:1");
var wideLabel = render.form.label("link-form-wide", "Wide tile", "Bookmark tile to span across two columns.", true); var wideLabel = render.form.label({
name: "link-form-wide",
labelText: "Wide tile",
labelDescription: "Bookmark tile to span across two columns.",
icon: true
});
var tallInput = helper.node("input|type:checkbox,class:link-form-tall,id:link-form-tall,tabindex:1"); var tallInput = helper.node("input|type:checkbox,class:link-form-tall,id:link-form-tall,tabindex:1");
var tallLabel = render.form.label("link-form-tall", "Tall tile", "Bookmark tile to span across two rows.", true); var tallLabel = render.form.label({
name: "link-form-tall",
labelText: "Tall tile",
labelDescription: "Bookmark tile to span across two rows.",
icon: true,
});
var wideTallLabelHelper = render.form.helper("link-form-wide-tall-helper", "Bookmark tile will span across two columns or rows if the Bookmark Area is large enough."); var wideTallLabelHelper = render.form.helper("link-form-wide-tall-helper", "Bookmark tile will span across two columns or rows if the Bookmark Area is large enough.");
// content // content
var displayAlignmentLabel = render.form.label(false, "Visual Element and Name alignment"); var displayAlignmentLabel = render.form.label({
var displayAlignmentTopLeftRadio = helper.node("input|class:link-form-input-display-alignment-topleft,id:link-form-input-display-alignment-topleft,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:topleft"); labelText: "Visual Element and Name alignment"
var displayAlignmentTopLeftLabel = render.form.label("link-form-input-display-alignment-topleft", false, false, true, false); });
var displayAlignmentTopCenterRadio = helper.node("input|class:link-form-input-display-alignment-topcenter,id:link-form-input-display-alignment-topcenter,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:topcenter"); var displayAlignmentTopLeftRadio = helper.node("input|class:link-form-input-display-alignment-topleft,id:link-form-input-display-alignment-topleft,type:radio,name:link-form-input-display-alignment,tabindex:1,value:topleft");
var displayAlignmentTopCenterLabel = render.form.label("link-form-input-display-alignment-topcenter", false, false, true, false); var displayAlignmentTopLeftLabel = render.form.label({
var displayAlignmentTopRightRadio = helper.node("input|class:link-form-input-display-alignment-topright,id:link-form-input-display-alignment-topright,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:topright"); name: "link-form-input-display-alignment-topleft",
var displayAlignmentTopRightLabel = render.form.label("link-form-input-display-alignment-topright", false, false, true, false); icon: true
var displayAlignmentCenterLeftRadio = helper.node("input|class:link-form-input-display-alignment-centerleft,id:link-form-input-display-alignment-centerleft,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:centerleft"); });
var displayAlignmentCenterLeftLabel = render.form.label("link-form-input-display-alignment-centerleft", false, false, true, false); var displayAlignmentTopCenterRadio = helper.node("input|class:link-form-input-display-alignment-topcenter,id:link-form-input-display-alignment-topcenter,type:radio,name:link-form-input-display-alignment,tabindex:1,value:topcenter");
var displayAlignmentCenterCenterRadio = helper.node("input|class:link-form-input-display-alignment-centercenter,id:link-form-input-display-alignment-centercenter,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:centercenter"); var displayAlignmentTopCenterLabel = render.form.label({
var displayAlignmentCenterCenterLabel = render.form.label("link-form-input-display-alignment-centercenter", false, false, true, false); name: "link-form-input-display-alignment-topcenter",
var displayAlignmentCenterRightRadio = helper.node("input|class:link-form-input-display-alignment-centerright,id:link-form-input-display-alignment-centerright,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:centerright"); icon: true
var displayAlignmentCenterRightLabel = render.form.label("link-form-input-display-alignment-centerright", false, false, true, false); });
var displayAlignmentBottomLeftRadio = helper.node("input|class:link-form-input-display-alignment-bottomleft,id:link-form-input-display-alignment-bottomleft,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:bottomleft"); var displayAlignmentTopRightRadio = helper.node("input|class:link-form-input-display-alignment-topright,id:link-form-input-display-alignment-topright,type:radio,name:link-form-input-display-alignment,tabindex:1,value:topright");
var displayAlignmentBottomLeftLabel = render.form.label("link-form-input-display-alignment-bottomleft", false, false, true, false); var displayAlignmentTopRightLabel = render.form.label({
var displayAlignmentBottomCenterRadio = helper.node("input|class:link-form-input-display-alignment-bottomcenter,id:link-form-input-display-alignment-bottomcenter,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:bottomcenter"); name: "link-form-input-display-alignment-topright",
var displayAlignmentBottomCenterLabel = render.form.label("link-form-input-display-alignment-bottomcenter", false, false, true, false); icon: true
var displayAlignmentBottomRightRadio = helper.node("input|class:link-form-input-display-alignment-bottomright,id:link-form-input-display-alignment-bottomright,type:radio,name:class:link-form-input-display-alignment,tabindex:1,value:bottomright"); });
var displayAlignmentBottomRightLabel = render.form.label("link-form-input-display-alignment-bottomright", false, false, true, false); var displayAlignmentCenterLeftRadio = helper.node("input|class:link-form-input-display-alignment-centerleft,id:link-form-input-display-alignment-centerleft,type:radio,name:link-form-input-display-alignment,tabindex:1,value:centerleft");
var displayAlignmentCenterLeftLabel = render.form.label({
name: "link-form-input-display-alignment-centerleft",
icon: true
});
var displayAlignmentCenterCenterRadio = helper.node("input|class:link-form-input-display-alignment-centercenter,id:link-form-input-display-alignment-centercenter,type:radio,name:link-form-input-display-alignment,tabindex:1,value:centercenter");
var displayAlignmentCenterCenterLabel = render.form.label({
name: "link-form-input-display-alignment-centercenter",
icon: true
});
var displayAlignmentCenterRightRadio = helper.node("input|class:link-form-input-display-alignment-centerright,id:link-form-input-display-alignment-centerright,type:radio,name:link-form-input-display-alignment,tabindex:1,value:centerright");
var displayAlignmentCenterRightLabel = render.form.label({
name: "link-form-input-display-alignment-centerright",
icon: true
});
var displayAlignmentBottomLeftRadio = helper.node("input|class:link-form-input-display-alignment-bottomleft,id:link-form-input-display-alignment-bottomleft,type:radio,name:link-form-input-display-alignment,tabindex:1,value:bottomleft");
var displayAlignmentBottomLeftLabel = render.form.label({
name: "link-form-input-display-alignment-bottomleft",
icon: true
});
var displayAlignmentBottomCenterRadio = helper.node("input|class:link-form-input-display-alignment-bottomcenter,id:link-form-input-display-alignment-bottomcenter,type:radio,name:link-form-input-display-alignment,tabindex:1,value:bottomcenter");
var displayAlignmentBottomCenterLabel = render.form.label({
name: "link-form-input-display-alignment-bottomcenter",
icon: true
});
var displayAlignmentBottomRightRadio = helper.node("input|class:link-form-input-display-alignment-bottomright,id:link-form-input-display-alignment-bottomright,type:radio,name:link-form-input-display-alignment,tabindex:1,value:bottomright");
var displayAlignmentBottomRightLabel = render.form.label({
name: "link-form-input-display-alignment-bottomright",
icon: true
});
var displayAlignmentHelper = render.form.helper("link-form-input-display-alignment-helper", "Position the Visual Element (letter, icon or image) and Name inside the Bookmark tile."); var displayAlignmentHelper = render.form.helper("link-form-input-display-alignment-helper", "Position the Visual Element (letter, icon or image) and Name inside the Bookmark tile.");
var displayLetterSizeLabel = render.form.label("link-form-input-display-visual-letter-size-range", "Letter size"); var displayLetterSizeLabel = render.form.label({
name: "link-form-input-display-visual-letter-size-range",
labelText: "Letter size"
});
var displayLetterSizeInputRange = helper.node("input|class:link-form-input-display-visual-letter-size-range mr-3,id:link-form-input-display-visual-letter-size-range,type:range,name:link-form-input-display-visual-letter-size-range,min:10,max:3000,step:10,tabindex:1"); var displayLetterSizeInputRange = helper.node("input|class:link-form-input-display-visual-letter-size-range mr-3,id:link-form-input-display-visual-letter-size-range,type:range,name:link-form-input-display-visual-letter-size-range,min:10,max:3000,step:10,tabindex:1");
var displayLetterSizeInputNumber = helper.node("input|class:link-form-input-display-visual-letter-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:3000,step:10,tabindex:1"); var displayLetterSizeInputNumber = helper.node("input|class:link-form-input-display-visual-letter-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:3000,step:10,tabindex:1");
var displayLetterSizeInputDefault = render.form.button(false, "link-form-input-display-visual-letter-size-default", "icon-replay"); var displayLetterSizeInputDefault = render.form.button(false, "link-form-input-display-visual-letter-size-default", "icon-replay");
var displayIconSizeLabel = render.form.label("link-form-input-display-visual-icon-size-range", "Icon size"); var displayIconSizeLabel = render.form.label({
name: "link-form-input-display-visual-icon-size-range",
labelText: "Icon size"
});
var displayIconSizeInputRange = helper.node("input|class:link-form-input-display-visual-icon-size-range mr-3,id:link-form-input-display-visual-icon-size-range,type:range,name:link-form-input-display-visual-icon-size-range,min:10,max:3000,step:10,tabindex:1"); var displayIconSizeInputRange = helper.node("input|class:link-form-input-display-visual-icon-size-range mr-3,id:link-form-input-display-visual-icon-size-range,type:range,name:link-form-input-display-visual-icon-size-range,min:10,max:3000,step:10,tabindex:1");
var displayIconSizeInputNumber = helper.node("input|class:link-form-input-display-visual-icon-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:3000,step:10,tabindex:1"); var displayIconSizeInputNumber = helper.node("input|class:link-form-input-display-visual-icon-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:3000,step:10,tabindex:1");
var displayIconSizeInputDefault = render.form.button(false, "link-form-input-display-visual-icon-size-default", "icon-replay"); var displayIconSizeInputDefault = render.form.button(false, "link-form-input-display-visual-icon-size-default", "icon-replay");
var displayImageSizeLabel = render.form.label("link-form-input-display-visual-image-size-range", "Image size"); var displayImageSizeLabel = render.form.label({
name: "link-form-input-display-visual-image-size-range",
labelText: "Image size"
});
var displayImageSizeInputRange = helper.node("input|class:link-form-input-display-visual-image-size-range mr-3,id:link-form-input-display-visual-image-size-range,type:range,name:link-form-input-display-visual-image-size-range,min:10,max:3000,step:10,tabindex:1"); var displayImageSizeInputRange = helper.node("input|class:link-form-input-display-visual-image-size-range mr-3,id:link-form-input-display-visual-image-size-range,type:range,name:link-form-input-display-visual-image-size-range,min:10,max:3000,step:10,tabindex:1");
var displayImageSizeInputNumber = helper.node("input|class:link-form-input-display-visual-image-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:3000,step:10,tabindex:1"); var displayImageSizeInputNumber = helper.node("input|class:link-form-input-display-visual-image-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:3000,step:10,tabindex:1");
var displayImageSizeInputDefault = render.form.button(false, "link-form-input-display-visual-image-size-default", "icon-replay"); var displayImageSizeInputDefault = render.form.button(false, "link-form-input-display-visual-image-size-default", "icon-replay");
var displayShadowSizeLabel = render.form.label("link-form-input-display-visual-shadow-size-range", "Shadow size"); var displayShadowSizeLabel = render.form.label({
name: "link-form-input-display-visual-shadow-size-range",
labelText: "Shadow size"
});
var displayShadowSizeInputRange = helper.node("input|class:link-form-input-display-visual-shadow-size-range mr-3,id:link-form-input-display-visual-shadow-size-range,type:range,name:link-form-input-display-visual-shadow-size-range,min:0,max:100,tabindex:1"); var displayShadowSizeInputRange = helper.node("input|class:link-form-input-display-visual-shadow-size-range mr-3,id:link-form-input-display-visual-shadow-size-range,type:range,name:link-form-input-display-visual-shadow-size-range,min:0,max:100,tabindex:1");
var displayShadowSizeInputNumber = helper.node("input|class:link-form-input-display-visual-shadow-size-number form-group-item-medium form-group-radius-left,type:number,min:0,max:100,tabindex:1"); var displayShadowSizeInputNumber = helper.node("input|class:link-form-input-display-visual-shadow-size-number form-group-item-medium form-group-radius-left,type:number,min:0,max:100,tabindex:1");
var displayShadowSizeInputDefault = render.form.button(false, "link-form-input-display-visual-shadow-size-default", "icon-replay"); var displayShadowSizeInputDefault = render.form.button(false, "link-form-input-display-visual-shadow-size-default", "icon-replay");
var displayShadowSizeInputHelper = render.form.helper("link-form-input-display-visual-shadow-size-helper", "Only applies to Letters or Icons."); var displayShadowSizeInputHelper = render.form.helper("link-form-input-display-visual-shadow-size-helper", "Only applies to Letters or Icons.");
var nameSizeLabel = render.form.label("link-form-input-display-name-size-range", "Name size"); var nameSizeLabel = render.form.label({
name: "link-form-input-display-name-size-range",
labelText: "Name size"
});
var nameSizeInputRange = helper.node("input|class:link-form-input-display-name-size-range mr-3,id:link-form-input-display-name-size-range,type:range,name:link-form-input-display-name-size-range,min:10,max:1500,step:10,tabindex:1"); var nameSizeInputRange = helper.node("input|class:link-form-input-display-name-size-range mr-3,id:link-form-input-display-name-size-range,type:range,name:link-form-input-display-name-size-range,min:10,max:1500,step:10,tabindex:1");
var nameSizeInputNumber = helper.node("input|class:link-form-input-display-name-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:1500,step:10,tabindex:1"); var nameSizeInputNumber = helper.node("input|class:link-form-input-display-name-size-number form-group-item-medium form-group-radius-left,type:number,min:10,max:1500,step:10,tabindex:1");
var nameSizeInputDefault = render.form.button(false, "link-form-input-display-name-size-default", "icon-replay"); var nameSizeInputDefault = render.form.button(false, "link-form-input-display-name-size-default", "icon-replay");
var displayRotateLabel = render.form.label("link-form-input-display-rotate-range", "Rotation"); var displayRotateLabel = render.form.label({
name: "link-form-input-display-rotate-range",
labelText: "Rotation"
});
var displayRotateRange = helper.node("input|class:link-form-input-display-rotate-range mr-3,id:link-form-input-display-rotate-range,type:range,name:link-form-input-display-rotate-range,min:-180,max:180,tabindex:1"); var displayRotateRange = helper.node("input|class:link-form-input-display-rotate-range mr-3,id:link-form-input-display-rotate-range,type:range,name:link-form-input-display-rotate-range,min:-180,max:180,tabindex:1");
var displayRotateNumber = helper.node("input|class:link-form-input-display-rotate-number form-group-item-medium form-group-radius-left,type:number,min:-180,max:180,tabindex:1"); var displayRotateNumber = helper.node("input|class:link-form-input-display-rotate-number form-group-item-medium form-group-radius-left,type:number,min:-180,max:180,tabindex:1");
var displayRotateDefault = render.form.button(false, "link-form-input-display-rotate-default", "icon-replay"); var displayRotateDefault = render.form.button(false, "link-form-input-display-rotate-default", "icon-replay");
var displayTranslateXLabel = render.form.label("link-form-input-display-translate-x-range", "Horizontally offset"); var displayTranslateXLabel = render.form.label({
name: "link-form-input-display-translate-x-range",
labelText: "Horizontally offset"
});
var displayTranslateXRange = helper.node("input|class:link-form-input-display-translate-x-range mr-3,id:link-form-input-display-translate-x-range,type:range,name:link-form-input-display-translate-x-range,min:-1000,max:1000,step:10,tabindex:1"); var displayTranslateXRange = helper.node("input|class:link-form-input-display-translate-x-range mr-3,id:link-form-input-display-translate-x-range,type:range,name:link-form-input-display-translate-x-range,min:-1000,max:1000,step:10,tabindex:1");
var displayTranslateXNumber = helper.node("input|class:link-form-input-display-translate-x-number form-group-item-medium form-group-radius-left,type:number,min:-1000,max:1000,step:10,tabindex:1"); var displayTranslateXNumber = helper.node("input|class:link-form-input-display-translate-x-number form-group-item-medium form-group-radius-left,type:number,min:-1000,max:1000,step:10,tabindex:1");
var displayTranslateXDefault = render.form.button(false, "link-form-input-display-translate-x-default", "icon-replay"); var displayTranslateXDefault = render.form.button(false, "link-form-input-display-translate-x-default", "icon-replay");
var displayTranslateYLabel = render.form.label("link-form-input-display-translate-y-range", "Vertically offset"); var displayTranslateYLabel = render.form.label({
name: "link-form-input-display-translate-y-range",
labelText: "Vertically offset"
});
var displayTranslateYRange = helper.node("input|class:link-form-input-display-translate-y-range mr-3,id:link-form-input-display-translate-y-range,type:range,name:link-form-input-display-translate-y-range,min:-1000,max:1000,step:10,tabindex:1"); var displayTranslateYRange = helper.node("input|class:link-form-input-display-translate-y-range mr-3,id:link-form-input-display-translate-y-range,type:range,name:link-form-input-display-translate-y-range,min:-1000,max:1000,step:10,tabindex:1");
var displayTranslateYNumber = helper.node("input|class:link-form-input-display-translate-y-number form-group-item-medium form-group-radius-left,type:number,min:-1000,max:1000,step:10,tabindex:1"); var displayTranslateYNumber = helper.node("input|class:link-form-input-display-translate-y-number form-group-item-medium form-group-radius-left,type:number,min:-1000,max:1000,step:10,tabindex:1");
var displayTranslateYDefault = render.form.button(false, "link-form-input-display-translate-y-default", "icon-replay"); var displayTranslateYDefault = render.form.button(false, "link-form-input-display-translate-y-default", "icon-replay");
var displayGutterLabel = render.form.label("link-form-input-display-gutter-range", "Gutter"); var displayGutterLabel = render.form.label({
name: "link-form-input-display-gutter-range",
labelText: "Gutter"
});
var displayGutterRange = helper.node("input|class:link-form-input-display-gutter-range mr-3,id:link-form-input-display-gutter-range,type:range,name:link-form-input-display-gutter-range,min:0,max:40,tabindex:1"); var displayGutterRange = helper.node("input|class:link-form-input-display-gutter-range mr-3,id:link-form-input-display-gutter-range,type:range,name:link-form-input-display-gutter-range,min:0,max:40,tabindex:1");
var displayGutterNumber = helper.node("input|class:link-form-input-display-gutter-number form-group-item-medium form-group-radius-left,type:number,min:0,max:40,tabindex:1"); var displayGutterNumber = helper.node("input|class:link-form-input-display-gutter-number form-group-item-medium form-group-radius-left,type:number,min:0,max:40,tabindex:1");
var displayGutterDefault = render.form.button(false, "link-form-input-display-gutter-default", "icon-replay"); var displayGutterDefault = render.form.button(false, "link-form-input-display-gutter-default", "icon-replay");
var displayAlignmentHorizontalRadio = helper.node("input|class:link-form-input-alignment-horizontal,id:link-form-input-alignment-horizontal,type:radio,name:link-form-input-alignment,tabindex:1,value:horizontal"); var displayAlignmentHorizontalRadio = helper.node("input|class:link-form-input-alignment-horizontal,id:link-form-input-alignment-horizontal,type:radio,name:link-form-input-alignment,tabindex:1,value:horizontal");
var displayAlignmentHorizontalLabel = render.form.label("link-form-input-alignment-horizontal", "Align horizontally", "Works well with Bookmark List Style.", true); var displayAlignmentHorizontalLabel = render.form.label({
name: "link-form-input-alignment-horizontal",
labelText: "Align horizontally",
labelDescription: "Works well with Bookmark List Style.",
icon: true
});
var displayAlignmentVerticalRadio = helper.node("input|class:link-form-input-alignment-vertical,id:link-form-input-alignment-vertical,type:radio,name:link-form-input-alignment,tabindex:1,value:vertical"); var displayAlignmentVerticalRadio = helper.node("input|class:link-form-input-alignment-vertical,id:link-form-input-alignment-vertical,type:radio,name:link-form-input-alignment,tabindex:1,value:vertical");
var displayAlignmentVerticalLabel = render.form.label("link-form-input-alignment-vertical", "Align vertically", "Works well with Bookmark Block Style.", true); var displayAlignmentVerticalLabel = render.form.label({
name: "link-form-input-alignment-vertical",
labelText: "Align vertically",
labelDescription: "Works well with Bookmark Block Style.",
icon: true
});
var displayAlignmentHelper = render.form.helper("link-form-wide-tall-helper", "Only available when Visual Element and Name are shown."); var displayAlignmentHelper = render.form.helper("link-form-wide-tall-helper", "Only available when Visual Element and Name are shown.");
var displayDirectionVisualnameRadio = helper.node("input|class:link-form-input-direction-visualname,id:link-form-input-direction-visualname,type:radio,name:link-form-input-direction,tabindex:1,value:visualname"); var displayDirectionVisualnameRadio = helper.node("input|class:link-form-input-direction-visualname,id:link-form-input-direction-visualname,type:radio,name:link-form-input-direction,tabindex:1,value:visualname");
var displayDirectionVisualnameLabel = render.form.label("link-form-input-direction-visualname", "Visual Element then Name", "Stack the Visual Element (letter, icon or image) before the Name.", true); var displayDirectionVisualnameLabel = render.form.label({
name: "link-form-input-direction-visualname",
labelText: "Visual Element then Name",
labelDescription: "Stack the Visual Element (letter, icon or image) before the Name.",
icon: true
});
var displayDirectionNamevisualRadio = helper.node("input|class:link-form-input-direction-namevisual,id:link-form-input-direction-namevisual,type:radio,name:link-form-input-direction,tabindex:1,value:namevisual"); var displayDirectionNamevisualRadio = helper.node("input|class:link-form-input-direction-namevisual,id:link-form-input-direction-namevisual,type:radio,name:link-form-input-direction,tabindex:1,value:namevisual");
var displayDirectionNamevisualLabel = render.form.label("link-form-input-direction-namevisual", "Name then Visual Element", "Stack the Name before the Visual Element (letter, icon or image).", true); var displayDirectionNamevisualLabel = render.form.label({
name: "link-form-input-direction-namevisual",
labelText: "Name then Visual Element",
labelDescription: "Stack the Name before the Visual Element (letter, icon or image).",
icon: true
});
var displayDirectionHelper = render.form.helper("link-form-wide-tall-helper", "Only available when Visual Element and Name are shown."); var displayDirectionHelper = render.form.helper("link-form-wide-tall-helper", "Only available when Visual Element and Name are shown.");
// color // color
var colorThemeRadio = helper.node("input|class:link-form-input-color-theme,id:link-form-input-color-theme,type:radio,name:link-form-input-color,tabindex:1,value:theme"); var colorThemeRadio = helper.node("input|class:link-form-input-color-theme,id:link-form-input-color-theme,type:radio,name:link-form-input-color,tabindex:1,value:theme");
var colorThemeLabel = render.form.label("link-form-input-color-theme", "Theme colour", "Use the Colour defined by the Theme.", true); var colorThemeLabel = render.form.label({
name: "link-form-input-color-theme",
labelText: "Theme colour",
labelDescription: "Use the Colour defined by the Theme.",
icon: true
});
var colorCustomRadio = helper.node("input|class:link-form-input-color-custom,id:link-form-input-color-custom,type:radio,name:link-form-input-color,tabindex:1,value:custom"); var colorCustomRadio = helper.node("input|class:link-form-input-color-custom,id:link-form-input-color-custom,type:radio,name:link-form-input-color,tabindex:1,value:custom");
var colorCustomLabel = render.form.label("link-form-input-color-custom", "Custom colour", "Override the Theme colour.", true); var colorCustomLabel = render.form.label({
name: "link-form-input-color-custom",
labelText: "Custom colour",
labelDescription: "Override the Theme colour.",
icon: true
});
var colorColorPicker = helper.node("input|id:link-form-input-color-picker,class:form-group-item-half link-form-input-color-picker,type:color,value:#000000,tabindex:1"); var colorColorPicker = helper.node("input|id:link-form-input-color-picker,class:form-group-item-half link-form-input-color-picker,type:color,value:#000000,tabindex:1");
var colorColorHex = helper.node("input|id:link-form-input-color-hex,class:form-group-item-half link-form-input-color-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7"); var colorColorHex = helper.node("input|id:link-form-input-color-hex,class:form-group-item-half link-form-input-color-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7");
var colorHslHLabel = helper.node("label:Hue|for:link-form-input-color-hsl-h-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var colorHslHLabel = render.form.label({
name: "link-form-input-color-hsl-h-range",
labelText: "Hue",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var colorHslHRange = helper.node("input|class:link-form-input-color-hsl-h-range mr-3,id:link-form-input-color-hsl-h-range,type:range,name:link-form-input-color-hsl-h-range,value:0,min:0,max:359,tabindex:1"); var colorHslHRange = helper.node("input|class:link-form-input-color-hsl-h-range mr-3,id:link-form-input-color-hsl-h-range,type:range,name:link-form-input-color-hsl-h-range,value:0,min:0,max:359,tabindex:1");
var colorHslHNumber = helper.node("input|class:link-form-input-color-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1"); var colorHslHNumber = helper.node("input|class:link-form-input-color-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1");
var colorHslSLabel = helper.node("label:Saturation|for:link-form-input-color-hsl-s-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var colorHslSLabel = render.form.label({
name: "link-form-input-color-hsl-s-range",
labelText: "Saturation",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var colorHslSRange = helper.node("input|class:link-form-input-color-hsl-s-range mr-3,id:link-form-input-color-hsl-s-range,type:range,name:link-form-input-color-hsl-s-range,value:0,min:0,max:100,tabindex:1"); var colorHslSRange = helper.node("input|class:link-form-input-color-hsl-s-range mr-3,id:link-form-input-color-hsl-s-range,type:range,name:link-form-input-color-hsl-s-range,value:0,min:0,max:100,tabindex:1");
var colorHslSNumber = helper.node("input|class:link-form-input-color-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1"); var colorHslSNumber = helper.node("input|class:link-form-input-color-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1");
var colorHslLLabel = helper.node("label:Lightness|for:link-form-input-color-hsl-l-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var colorHslLLabel = render.form.label({
name: "link-form-input-color-hsl-l-range",
labelText: "Lightness",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var colorHslLRange = helper.node("input|class:link-form-input-color-hsl-l-range mr-3,id:link-form-input-color-hsl-l-range,type:range,name:link-form-input-color-hsl-l-range,value:0,min:0,max:100,tabindex:1"); var colorHslLRange = helper.node("input|class:link-form-input-color-hsl-l-range mr-3,id:link-form-input-color-hsl-l-range,type:range,name:link-form-input-color-hsl-l-range,value:0,min:0,max:100,tabindex:1");
var colorHslLNumber = helper.node("input|class:link-form-input-color-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1"); var colorHslLNumber = helper.node("input|class:link-form-input-color-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1");
var colorRgbRLabel = helper.node("label:Red|for:link-form-input-color-rgb-r-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var colorRgbRLabel = render.form.label({
name: "link-form-input-color-rgb-r-range",
labelText: "Red",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var colorRgbRRange = helper.node("input|class:link-form-input-color-rgb-r-range mr-3,id:link-form-input-color-rgb-r-range,type:range,name:link-form-input-color-rgb-r-range,value:0,min:0,max:255,tabindex:1"); var colorRgbRRange = helper.node("input|class:link-form-input-color-rgb-r-range mr-3,id:link-form-input-color-rgb-r-range,type:range,name:link-form-input-color-rgb-r-range,value:0,min:0,max:255,tabindex:1");
var colorRgbRNumber = helper.node("input|class:link-form-input-color-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1"); var colorRgbRNumber = helper.node("input|class:link-form-input-color-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1");
var colorRgbGLabel = helper.node("label:Green|for:link-form-input-color-rgb-g-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var colorRgbGLabel = render.form.label({
name: "link-form-input-color-rgb-g-range",
labelText: "Green",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var colorRgbGRange = helper.node("input|class:link-form-input-color-rgb-g-range mr-3,id:link-form-input-color-rgb-g-range,type:range,name:link-form-input-color-rgb-g-range,value:0,min:0,max:255,tabindex:1"); var colorRgbGRange = helper.node("input|class:link-form-input-color-rgb-g-range mr-3,id:link-form-input-color-rgb-g-range,type:range,name:link-form-input-color-rgb-g-range,value:0,min:0,max:255,tabindex:1");
var colorRgbGNumber = helper.node("input|class:link-form-input-color-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1"); var colorRgbGNumber = helper.node("input|class:link-form-input-color-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1");
var colorRgbBLabel = helper.node("label:Blue|for:link-form-input-color-rgb-b-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var colorRgbBLabel = render.form.label({
name: "link-form-input-color-rgb-b-range",
labelText: "Blue",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var colorRgbBRange = helper.node("input|class:link-form-input-color-rgb-b-range mr-3,id:link-form-input-color-rgb-b-range,type:range,name:link-form-input-color-rgb-b-range,value:0,min:0,max:255,tabindex:1"); var colorRgbBRange = helper.node("input|class:link-form-input-color-rgb-b-range mr-3,id:link-form-input-color-rgb-b-range,type:range,name:link-form-input-color-rgb-b-range,value:0,min:0,max:255,tabindex:1");
var colorRgbBNumber = helper.node("input|class:link-form-input-color-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1"); var colorRgbBNumber = helper.node("input|class:link-form-input-color-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1");
var colorOpacityLabel = render.form.label("link-form-input-color-opacity-range", "Opacity"); var colorOpacityLabel = render.form.label({
name: "link-form-input-color-opacity-range",
labelText: "Opacity"
});
var colorOpacityInputRange = helper.node("input|class:link-form-input-color-opacity-range mr-3,id:link-form-input-color-opacity-range,type:range,name:link-form-input-color-opacity-range,min:0,max:100,tabindex:1"); var colorOpacityInputRange = helper.node("input|class:link-form-input-color-opacity-range mr-3,id:link-form-input-color-opacity-range,type:range,name:link-form-input-color-opacity-range,min:0,max:100,tabindex:1");
var colorOpacityInputNumber = helper.node("input|class:link-form-input-color-opacity-number form-group-item-medium form-group-radius-left,type:number,min:0,max:100,tabindex:1"); var colorOpacityInputNumber = helper.node("input|class:link-form-input-color-opacity-number form-group-item-medium form-group-radius-left,type:number,min:0,max:100,tabindex:1");
var colorOpacityInputDefault = render.form.button(false, "link-form-input-color-opacity-default", "icon-replay"); var colorOpacityInputDefault = render.form.button(false, "link-form-input-color-opacity-default", "icon-replay");
// accent // accent
var accentThemeRadio = helper.node("input|class:link-form-input-accent-theme,id:link-form-input-accent-theme,type:radio,name:link-form-input-accent,tabindex:1,value:theme"); var accentThemeRadio = helper.node("input|class:link-form-input-accent-theme,id:link-form-input-accent-theme,type:radio,name:link-form-input-accent,tabindex:1,value:theme");
var accentThemeLabel = render.form.label("link-form-input-accent-theme", "Theme accent", "Use the Accent defined by the Theme.", true); var accentThemeLabel = render.form.label({
name: "link-form-input-accent-theme",
labelText: "Theme accent",
labelDescription: "Use the Accent defined by the Theme.",
icon: true
});
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 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 = render.form.label("link-form-input-accent-custom", "Custom accent", "Override the Theme accent.", true); var accentCustomLabel = render.form.label({
name: "link-form-input-accent-custom",
labelText: "Custom accent",
labelDescription: "Override the Theme accent.",
icon: true
});
var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker,type:color,value:#000000,tabindex:1"); var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker,type:color,value:#000000,tabindex:1");
var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7"); var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7");
var accentHslHLabel = helper.node("label:Hue|for:link-form-input-accent-hsl-h-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var accentHslHLabel = render.form.label({
name: "link-form-input-accent-hsl-h-range",
labelText: "Hue",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var accentHslHRange = helper.node("input|class:link-form-input-accent-hsl-h-range mr-3,id:link-form-input-accent-hsl-h-range,type:range,name:link-form-input-accent-hsl-h-range,value:0,min:0,max:359,tabindex:1"); var accentHslHRange = helper.node("input|class:link-form-input-accent-hsl-h-range mr-3,id:link-form-input-accent-hsl-h-range,type:range,name:link-form-input-accent-hsl-h-range,value:0,min:0,max:359,tabindex:1");
var accentHslHNumber = helper.node("input|class:link-form-input-accent-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1"); var accentHslHNumber = helper.node("input|class:link-form-input-accent-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1");
var accentHslSLabel = helper.node("label:Saturation|for:link-form-input-accent-hsl-s-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var accentHslSLabel = render.form.label({
name: "link-form-input-accent-hsl-s-range",
labelText: "Saturation",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var accentHslSRange = helper.node("input|class:link-form-input-accent-hsl-s-range mr-3,id:link-form-input-accent-hsl-s-range,type:range,name:link-form-input-accent-hsl-s-range,value:0,min:0,max:100,tabindex:1"); var accentHslSRange = helper.node("input|class:link-form-input-accent-hsl-s-range mr-3,id:link-form-input-accent-hsl-s-range,type:range,name:link-form-input-accent-hsl-s-range,value:0,min:0,max:100,tabindex:1");
var accentHslSNumber = helper.node("input|class:link-form-input-accent-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1"); var accentHslSNumber = helper.node("input|class:link-form-input-accent-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1");
var accentHslLLabel = helper.node("label:Lightness|for:link-form-input-accent-hsl-l-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var accentHslLLabel = render.form.label({
name: "link-form-input-accent-hsl-l-range",
labelText: "Lightness",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var accentHslLRange = helper.node("input|class:link-form-input-accent-hsl-l-range mr-3,id:link-form-input-accent-hsl-l-range,type:range,name:link-form-input-accent-hsl-l-range,value:0,min:0,max:100,tabindex:1"); var accentHslLRange = helper.node("input|class:link-form-input-accent-hsl-l-range mr-3,id:link-form-input-accent-hsl-l-range,type:range,name:link-form-input-accent-hsl-l-range,value:0,min:0,max:100,tabindex:1");
var accentHslLNumber = helper.node("input|class:link-form-input-accent-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1"); var accentHslLNumber = helper.node("input|class:link-form-input-accent-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1");
var accentRgbRLabel = helper.node("label:Red|for:link-form-input-accent-rgb-r-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var accentRgbRLabel = render.form.label({
name: "link-form-input-accent-rgb-r-range",
labelText: "Red",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var accentRgbRRange = helper.node("input|class:link-form-input-accent-rgb-r-range mr-3,id:link-form-input-accent-rgb-r-range,type:range,name:link-form-input-accent-rgb-r-range,value:0,min:0,max:255,tabindex:1"); var accentRgbRRange = helper.node("input|class:link-form-input-accent-rgb-r-range mr-3,id:link-form-input-accent-rgb-r-range,type:range,name:link-form-input-accent-rgb-r-range,value:0,min:0,max:255,tabindex:1");
var accentRgbRNumber = helper.node("input|class:link-form-input-accent-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1"); var accentRgbRNumber = helper.node("input|class:link-form-input-accent-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1");
var accentRgbGLabel = helper.node("label:Green|for:link-form-input-accent-rgb-g-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var accentRgbGLabel = render.form.label({
name: "link-form-input-accent-rgb-g-range",
labelText: "Green",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var accentRgbGRange = helper.node("input|class:link-form-input-accent-rgb-g-range mr-3,id:link-form-input-accent-rgb-g-range,type:range,name:link-form-input-accent-rgb-g-range,value:0,min:0,max:255,tabindex:1"); var accentRgbGRange = helper.node("input|class:link-form-input-accent-rgb-g-range mr-3,id:link-form-input-accent-rgb-g-range,type:range,name:link-form-input-accent-rgb-g-range,value:0,min:0,max:255,tabindex:1");
var accentRgbGNumber = helper.node("input|class:link-form-input-accent-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1"); var accentRgbGNumber = helper.node("input|class:link-form-input-accent-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1");
var accentRgbBLabel = helper.node("label:Blue|for:link-form-input-accent-rgb-b-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"); var accentRgbBLabel = render.form.label({
name: "link-form-input-accent-rgb-b-range",
labelText: "Blue",
className: "form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0"
});
var accentRgbBRange = helper.node("input|class:link-form-input-accent-rgb-b-range mr-3,id:link-form-input-accent-rgb-b-range,type:range,name:link-form-input-accent-rgb-b-range,value:0,min:0,max:255,tabindex:1"); var accentRgbBRange = helper.node("input|class:link-form-input-accent-rgb-b-range mr-3,id:link-form-input-accent-rgb-b-range,type:range,name:link-form-input-accent-rgb-b-range,value:0,min:0,max:255,tabindex:1");
var accentRgbBNumber = helper.node("input|class:link-form-input-accent-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1"); var accentRgbBNumber = helper.node("input|class:link-form-input-accent-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1");
@ -2309,15 +2552,15 @@ var link = (function() {
value: name value: name
}] }]
}); });
groupExistingGroup.appendChild(option); groupExistingGroupSelect.appendChild(option);
}); });
} else { } else {
groupNewRadio.checked = true; groupNewRadio.checked = true;
groupExistingRadio.setAttribute("disabled", ""); groupExistingRadio.setAttribute("disabled", "");
groupExistingGroup.setAttribute("disabled", ""); groupExistingGroupSelect.setAttribute("disabled", "");
helper.addClass(groupExistingPositionLabel, "disabled"); helper.addClass(groupExistingPositionLabel, "disabled");
groupExistingPosition.setAttribute("disabled", ""); groupExistingPosition.setAttribute("disabled", "");
groupNewInput.removeAttribute("disabled"); groupNewNameInput.removeAttribute("disabled");
groupNewRandomNameButton.removeAttribute("disabled"); groupNewRandomNameButton.removeAttribute("disabled");
stagedLink.position.group.new = true; stagedLink.position.group.new = true;
}; };
@ -2354,7 +2597,7 @@ var link = (function() {
var populateForm = function() { var populateForm = function() {
groupExistingRadio.checked = true; groupExistingRadio.checked = true;
groupExistingGroup.selectedIndex = stagedLink.position.origin.group; groupExistingGroupSelect.selectedIndex = stagedLink.position.origin.group;
if (options.useStagedLink) { if (options.useStagedLink) {
groupExistingPosition.selectedIndex = stagedLink.position.origin.item; groupExistingPosition.selectedIndex = stagedLink.position.origin.item;
}; };
@ -2710,16 +2953,20 @@ var link = (function() {
var disableForm = function() { var disableForm = function() {
if (stagedLink.position.group.new) { if (stagedLink.position.group.new) {
groupExistingGroup.setAttribute("disabled", ""); helper.addClass(groupExistingGroupLabel, "disabled");
groupExistingGroupSelect.setAttribute("disabled", "");
groupExistingPosition.setAttribute("disabled", ""); groupExistingPosition.setAttribute("disabled", "");
helper.addClass(groupExistingPositionLabel, "disabled"); helper.addClass(groupExistingPositionLabel, "disabled");
groupNewInput.removeAttribute("disabled"); helper.removeClass(groupNewNameLabel, "disabled");
groupNewNameInput.removeAttribute("disabled");
groupNewRandomNameButton.removeAttribute("disabled"); groupNewRandomNameButton.removeAttribute("disabled");
} else { } else {
groupExistingGroup.removeAttribute("disabled"); helper.removeClass(groupExistingGroupLabel, "disabled");
groupExistingGroupSelect.removeAttribute("disabled");
groupExistingPosition.removeAttribute("disabled"); groupExistingPosition.removeAttribute("disabled");
helper.removeClass(groupExistingPositionLabel, "disabled"); helper.removeClass(groupExistingPositionLabel, "disabled");
groupNewInput.setAttribute("disabled", ""); helper.addClass(groupNewNameLabel, "disabled");
groupNewNameInput.setAttribute("disabled", "");
groupNewRandomNameButton.setAttribute("disabled", ""); groupNewRandomNameButton.setAttribute("disabled", "");
}; };
@ -3104,13 +3351,13 @@ var link = (function() {
}; };
}, false); }, false);
groupExistingRadio.addEventListener("change", function(event) { groupExistingRadio.addEventListener("change", function(event) {
stagedLink.position.destination.group = groupExistingGroup.selectedIndex; stagedLink.position.destination.group = groupExistingGroupSelect.selectedIndex;
stagedLink.position.group.new = false; stagedLink.position.group.new = false;
stagedLink.position.group.name.show = false; stagedLink.position.group.name.show = false;
stagedLink.position.group.openAll.show = false; stagedLink.position.group.openAll.show = false;
disableForm(); disableForm();
}, false); }, false);
groupExistingGroup.addEventListener("change", function(event) { groupExistingGroupSelect.addEventListener("change", function(event) {
stagedLink.position.destination.group = this.selectedIndex; stagedLink.position.destination.group = this.selectedIndex;
makePostionOptions(); makePostionOptions();
stagedLink.position.destination.item = groupExistingPosition.selectedIndex; stagedLink.position.destination.item = groupExistingPosition.selectedIndex;
@ -3125,7 +3372,7 @@ var link = (function() {
stagedLink.position.group.openAll.show = true; stagedLink.position.group.openAll.show = true;
disableForm(); disableForm();
}, false); }, false);
groupNewInput.addEventListener("input", function(event) { groupNewNameInput.addEventListener("input", function(event) {
stagedLink.position.group.name.text = this.value; stagedLink.position.group.name.text = this.value;
}, false); }, false);
groupNewRandomNameButton.addEventListener("click", function(event) { groupNewRandomNameButton.addEventListener("click", function(event) {
@ -3133,7 +3380,7 @@ var link = (function() {
adjectivesCount: helper.randomNumber(1, 3) adjectivesCount: helper.randomNumber(1, 3)
}); });
stagedLink.position.group.name.text = randomName; stagedLink.position.group.name.text = randomName;
groupNewInput.value = randomName; groupNewNameInput.value = randomName;
}, false); }, false);
displayShowCheckbox.addEventListener("change", function(event) { displayShowCheckbox.addEventListener("change", function(event) {
stagedLink.link.display.visual.show = this.checked; stagedLink.link.display.visual.show = this.checked;

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.69.0"; var current = "5.70.0";
var name = "Jaded Raven"; var name = "Jaded Raven";

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": "5.69.0", "version": "5.70.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"