mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-30 14:21:05 +02:00
[refactor] improve link and group form labels
This commit is contained in:
2
package-lock.json
generated
2
package-lock.json
generated
@ -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": {
|
||||||
|
@ -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
449
src/js/link.js
@ -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;
|
||||||
|
@ -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,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"
|
||||||
|
Reference in New Issue
Block a user