extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-10 07:58:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add link edit and add preview

Browse Source
This commit is contained in:
Kombie 2020-06-27 09:10:23 +01:00 committed by GitHub
parent 437889cc4d
commit 8bfc3d4bb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 369 additions and 70 deletions
Show Stats 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.48.1", "version": "5.49.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.48.1", "version": "5.49.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": {

19
src/css/form.css
View File

@ -1,3 +1,22 @@
/* fieldset */
fieldset:not(:only-child):not(:last-child),
.fieldset:not(:only-child):not(:last-child) {
border-bottom: var(--horizontal-rule-small);
position: relative;
width: 100%;
display: block;
}
fieldset:not(:first-child),
.fieldset:not(:first-child) {
padding-top: calc(var(--form-wrap-space) * 2);
}
fieldset:not(:last-child),
.fieldset:not(:last-child) {
padding-bottom: calc(var(--form-wrap-space) * 2);
}
/* form variants */ /* form variants */
.form-wrap, .form-wrap,
.form-helper { .form-helper {

188
src/css/link.css
View File

@ -1168,3 +1168,191 @@
.link-form-collapse-button.active .link-form-collapse-button-icon { .link-form-collapse-button.active .link-form-collapse-button-icon {
transform: rotate(-180deg); transform: rotate(-180deg);
} }
/* link form */
.link-form-wrap {
display: block;
}
@media (min-width: 900px) {
.link-form-wrap {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: calc(var(--form-wrap-space) * 2);
align-items: stretch;
}
}
/* link preview */
.link-form-aside {
display: none;
}
@media (min-width: 900px) {
.link-form-aside {
display: block;
}
}
.link-form-preview-area {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
position: sticky;
top: 50%;
transform: translateY(-50%);
}
.link-item-preview {
width: 100%;
height: 10em;
position: relative;
}
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item-preview .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item-preview:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item-preview .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item-preview:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item-preview .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item-preview:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item-preview:focus .link-panel-front {
box-shadow: none;
}
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item-preview:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item-preview:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item-preview:hover .link-panel-front {
box-shadow: var(--theme-shadow-bottom-large);
}
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item-preview:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item-preview:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item-preview:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item-preview:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item-preview:hover .link-panel-front {
box-shadow: var(--theme-shadow-top-large);
}
.is-edit .link-item-preview .link-panel-front,
.is-edit .link-item-preview:hover .link-panel-front,
.is-edit .link-item-preview:focus .link-panel-front {
height: 100%;
}
.is-theme-radius .link-item-preview .link-panel-front,
.is-edit.is-theme-radius .link-item-preview .link-panel-front {
border-radius: var(--theme-radius);
}
.is-edit .link-item-preview .link-display {
font-size: 1em;
}
.link-item-preview:hover .link-display-letter,
.link-item-preview:focus .link-display-letter,
.link-item-preview:hover .link-display-icon,
.link-item-preview:focus .link-display-icon {
color: rgb(var(--theme-style-text));
}
.link-item-preview .link-panel-front:focus .link-display-letter,
.link-item-preview .link-panel-front:focus .link-display-icon {
color: rgb(var(--theme-style-text));
}
.link-item-preview:hover .link-display-name,
.link-item-preview:focus .link-display-name {
color: rgb(var(--theme-style-text));
}
.link-item-preview .link-panel-front:focus .link-display-name {
color: rgb(var(--theme-style-text));
}
.is-theme-radius.is-link-item-url-show.is-link-orientation-top .link-item-preview:focus .link-panel-front,
.is-theme-radius.is-link-item-url-show.is-link-orientation-top .link-item-preview:focus-within .link-panel-front,
.is-theme-radius.is-link-item-url-show.is-link-orientation-top .link-item-preview:hover .link-panel-front {
border-top-left-radius: calc(var(--theme-radius) / 4);
border-top-right-radius: calc(var(--theme-radius) / 4);
}
.is-theme-radius.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:focus .link-panel-front,
.is-theme-radius.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-front,
.is-theme-radius.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:hover .link-panel-front {
border-bottom-left-radius: calc(var(--theme-radius) / 4);
border-bottom-right-radius: calc(var(--theme-radius) / 4);
}
.is-link-item-line-show .link-item-preview .link-panel-front {
height: calc(100% - var(--layout-line-width));
}
.is-link-item-url-show .link-item-preview:focus .link-panel-front,
.is-link-item-url-show .link-item-preview:focus-within .link-panel-front,
.is-link-item-url-show .link-item-preview:hover .link-panel-front {
height: calc(100% - var(--link-item-url-height));
}
.is-edit .link-item-preview .link-panel-back {
height: 100%;
top: 0;
}
.is-link-orientation-top .link-item-preview .link-panel-back {
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--link-item-clip-padding)), 0 calc(0% + var(--link-item-clip-padding)));
}
.is-link-orientation-bottom .link-item-preview .link-panel-back {
clip-path: polygon(0 calc(100% - var(--link-item-clip-padding)), 100% calc(100% - var(--link-item-clip-padding)), 100% 100%, 0 100%);
}
.is-link-orientation-top.is-link-item-line-show .link-item-preview .link-panel-back {
clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-clip-padding)), 0 calc(var(--layout-line-width) + var(--link-item-clip-padding)));
}
.is-link-orientation-bottom.is-link-item-line-show .link-item-preview .link-panel-back {
clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-clip-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-clip-padding)), 100% 100%, 0 100%);
}
.is-link-orientation-top .link-item-preview:focus .link-panel-back,
.is-link-orientation-top .link-item-preview:focus-within .link-panel-back,
.is-link-orientation-top .link-item-preview:hover .link-panel-back,
.is-link-orientation-bottom .link-item-preview:focus .link-panel-back,
.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-back,
.is-link-orientation-bottom .link-item-preview:hover .link-panel-back {
top: 0;
height: 100%;
}
.is-link-item-url-show.is-link-orientation-top .link-item-preview:focus .link-panel-back,
.is-link-item-url-show.is-link-orientation-top .link-item-preview:focus-within .link-panel-back,
.is-link-item-url-show.is-link-orientation-top .link-item-preview:hover .link-panel-back {
clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-clip-padding)), 0 calc(var(--link-item-url-height) + var(--link-item-clip-padding)));
}
.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:focus .link-panel-back,
.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-back,
.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:hover .link-panel-back {
clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + var(--link-item-clip-padding))), 100% calc(100% - calc(var(--link-item-url-height) + var(--link-item-clip-padding))), 100% 100%, 0 100%);
}
.is-link-orientation-top.is-link-item-url-show .link-item-preview:focus-within .link-url,
.is-link-orientation-top.is-link-item-url-show .link-item-preview:focus .link-url,
.is-link-orientation-top.is-link-item-url-show .link-item-preview:hover .link-url {
top: 0;
}
.is-link-orientation-bottom.is-link-item-url-show .link-item-preview:focus-within .link-url,
.is-link-orientation-bottom.is-link-item-url-show .link-item-preview:focus .link-url,
.is-link-orientation-bottom.is-link-item-url-show .link-item-preview:hover .link-url {
bottom: 0;
}

224
src/js/link.js
View File

@ -1,5 +1,7 @@
var link = (function() { var link = (function() {
var _timerLinkItemPreview = null;
var stagedGroup = { var stagedGroup = {
position: { position: {
origin: null, origin: null,
@ -799,7 +801,9 @@ var link = (function() {
options = helper.applyOptions(options, override); options = helper.applyOptions(options, override);
}; };
var form = helper.node("form|class:group-form"); var form = helper.node("form|class:group-form");
var fieldset = helper.node("fieldset"); var fieldsetName = helper.node("fieldset");
var fieldsetOpenAll = helper.node("fieldset");
var fieldsetPosition = helper.node("fieldset");
// group name // group name
var groupFormInputNameShowWrap = helper.node("div|class:form-wrap"); var groupFormInputNameShowWrap = helper.node("div|class:form-wrap");
@ -846,14 +850,17 @@ var link = (function() {
groupFormOpenAllInputWrap.appendChild(groupFormInputOpenallLabel); groupFormOpenAllInputWrap.appendChild(groupFormInputOpenallLabel);
groupFormOpenAllInputHelper.appendChild(groupFormOpenAllInputHelperItem); groupFormOpenAllInputHelper.appendChild(groupFormOpenAllInputHelperItem);
fieldset.appendChild(groupFormInputNameShowWrap); fieldsetName.appendChild(groupFormInputNameShowWrap);
fieldset.appendChild(groupFormInputNameIndentWrap); fieldsetName.appendChild(groupFormInputNameIndentWrap);
fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(groupFormOpenAllInputWrap); fieldsetOpenAll.appendChild(groupFormOpenAllInputWrap);
fieldset.appendChild(groupFormOpenAllInputHelper); fieldsetOpenAll.appendChild(groupFormOpenAllInputHelper);
fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(groupFormPositionInputWrap); fieldsetPosition.appendChild(groupFormPositionInputWrap);
form.appendChild(fieldset);
form.appendChild(fieldsetName);
form.appendChild(fieldsetOpenAll);
form.appendChild(fieldsetPosition);
var makeGroupOptions = function() { var makeGroupOptions = function() {
var optionCount = bookmarks.get().length; var optionCount = bookmarks.get().length;
@ -976,7 +983,13 @@ var link = (function() {
}; };
render.item = { render.item = {
link: function() { link: function(override) {
var options = {
preview: null
};
if (override) {
options = helper.applyOptions(options, override);
};
var linkItemOptions = { var linkItemOptions = {
tag: "div", tag: "div",
attr: [{ attr: [{
@ -984,6 +997,9 @@ var link = (function() {
value: "link-item" value: "link-item"
}] }]
}; };
if (options.preview) {
linkItemOptions.attr[0].value = "link-item-preview";
};
if (stagedLink.link.wide) { if (stagedLink.link.wide) {
linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-wide"; linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-wide";
}; };
@ -1029,7 +1045,7 @@ var link = (function() {
value: 1 value: 1
}] }]
}; };
if (helper.checkIfValidString(stagedLink.link.url)) { if (helper.checkIfValidString(stagedLink.link.url) && !options.preview) {
linkPanelFrontOptions.attr.push({ linkPanelFrontOptions.attr.push({
key: "href", key: "href",
value: helper.removeSpaces(stagedLink.link.url) value: helper.removeSpaces(stagedLink.link.url)
@ -1040,7 +1056,7 @@ var link = (function() {
value: "#" value: "#"
}); });
}; };
if (state.get.current().link.item.newTab) { if (state.get.current().link.item.newTab && !options.preview) {
linkPanelFrontOptions.attr.push({ linkPanelFrontOptions.attr.push({
key: "target", key: "target",
value: "_blank" value: "_blank"
@ -1163,7 +1179,9 @@ var link = (function() {
linkUrl.appendChild(linkUrlText); linkUrl.appendChild(linkUrlText);
}; };
linkPanelBack.appendChild(linkUrl); linkPanelBack.appendChild(linkUrl);
linkPanelBack.appendChild(linkControl); if (!options.preview) {
linkPanelBack.appendChild(linkControl);
};
linkItem.appendChild(linkPanelFront); linkItem.appendChild(linkPanelFront);
linkItem.appendChild(linkPanelBack); linkItem.appendChild(linkPanelBack);
@ -1200,8 +1218,19 @@ var link = (function() {
if (override) { if (override) {
options = helper.applyOptions(options, override); options = helper.applyOptions(options, override);
}; };
var formWrap = helper.node("form|class:link-form-wrap");
var form = helper.node("form|class:link-form"); var form = helper.node("form|class:link-form");
var fieldset = helper.node("fieldset"); var formAside = helper.node("div|class:link-form-aside");
var previewArea = helper.node("div|class:link-form-preview-area");
var fieldsetGroup = helper.node("fieldset");
var fieldsetDisplayVisual = helper.node("fieldset");
var fieldsetNameURL = helper.node("fieldset");
var fieldsetColorOverride = helper.node("fieldset");
var fieldsetAccentOverride = helper.node("fieldset");
var fieldsetBackground = helper.node("fieldset");
var fieldsetWideTall = helper.node("fieldset");
// group existing // group existing
var groupExistingRadioWrap = helper.node("div|class:form-wrap"); var groupExistingRadioWrap = helper.node("div|class:form-wrap");
@ -1453,8 +1482,8 @@ var link = (function() {
groupExistingFormIndent.appendChild(groupExistingGroupInputWrap); groupExistingFormIndent.appendChild(groupExistingGroupInputWrap);
groupExistingFormIndent.appendChild(groupExistingPositionInputWrap); groupExistingFormIndent.appendChild(groupExistingPositionInputWrap);
groupExistingFormIndentWrap.appendChild(groupExistingFormIndent); groupExistingFormIndentWrap.appendChild(groupExistingFormIndent);
fieldset.appendChild(groupExistingRadioWrap); fieldsetGroup.appendChild(groupExistingRadioWrap);
fieldset.appendChild(groupExistingFormIndentWrap); fieldsetGroup.appendChild(groupExistingFormIndentWrap);
groupNewRadioWrap.appendChild(groupNewRadio); groupNewRadioWrap.appendChild(groupNewRadio);
groupNewLable.appendChild(groupNewLableLableIcon); groupNewLable.appendChild(groupNewLableLableIcon);
@ -1465,25 +1494,23 @@ var link = (function() {
groupNewFormIndent.appendChild(groupNewInputWrap); groupNewFormIndent.appendChild(groupNewInputWrap);
groupNewFormIndent.appendChild(groupNewRandomNameButtonWrap); groupNewFormIndent.appendChild(groupNewRandomNameButtonWrap);
groupNewFormIndentWrap.appendChild(groupNewFormIndent); groupNewFormIndentWrap.appendChild(groupNewFormIndent);
fieldset.appendChild(groupNewRadioWrap); fieldsetGroup.appendChild(groupNewRadioWrap);
fieldset.appendChild(groupNewFormIndentWrap); fieldsetGroup.appendChild(groupNewFormIndentWrap);
fieldset.appendChild(helper.node("hr"));
displayLetterRadioWrap.appendChild(displayLetterRadio); displayLetterRadioWrap.appendChild(displayLetterRadio);
displayLetterLable.appendChild(displayLetterLableIcon); displayLetterLable.appendChild(displayLetterLableIcon);
displayLetterLable.appendChild(displayLetterLableText); displayLetterLable.appendChild(displayLetterLableText);
displayLetterRadioWrap.appendChild(displayLetterLable); displayLetterRadioWrap.appendChild(displayLetterLable);
fieldset.appendChild(displayLetterRadioWrap); fieldsetDisplayVisual.appendChild(displayLetterRadioWrap);
displayLetterInputWrap.appendChild(displayLetterInput); displayLetterInputWrap.appendChild(displayLetterInput);
displayLetterFormIndent.appendChild(displayLetterInputWrap); displayLetterFormIndent.appendChild(displayLetterInputWrap);
displayLetterFormIndentWrap.appendChild(displayLetterFormIndent); displayLetterFormIndentWrap.appendChild(displayLetterFormIndent);
fieldset.appendChild(displayLetterFormIndentWrap); fieldsetDisplayVisual.appendChild(displayLetterFormIndentWrap);
displayIconRadiotWrap.appendChild(displayIconRadio); displayIconRadiotWrap.appendChild(displayIconRadio);
displayIconLable.appendChild(displayIconLableIcon); displayIconLable.appendChild(displayIconLableIcon);
displayIconLable.appendChild(displayIconLableText); displayIconLable.appendChild(displayIconLableText);
displayIconRadiotWrap.appendChild(displayIconLable); displayIconRadiotWrap.appendChild(displayIconLable);
fieldset.appendChild(displayIconRadiotWrap); fieldsetDisplayVisual.appendChild(displayIconRadiotWrap);
displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon); displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon);
displayIconFormGroup.appendChild(displayIconInput); displayIconFormGroup.appendChild(displayIconInput);
displayIconFormGroup.appendChild(displayIconFormGroupText); displayIconFormGroup.appendChild(displayIconFormGroupText);
@ -1493,7 +1520,7 @@ var link = (function() {
displayIconHelper.appendChild(displayIconHelperItem); displayIconHelper.appendChild(displayIconHelperItem);
displayIconFormIndent.appendChild(displayIconHelper); displayIconFormIndent.appendChild(displayIconHelper);
displayIconFormIndentWrap.appendChild(displayIconFormIndent); displayIconFormIndentWrap.appendChild(displayIconFormIndent);
fieldset.appendChild(displayIconFormIndentWrap); fieldsetDisplayVisual.appendChild(displayIconFormIndentWrap);
displayImageRadiotWrap.appendChild(displayImageRadio); displayImageRadiotWrap.appendChild(displayImageRadio);
displayImageLable.appendChild(displayImageLableIcon); displayImageLable.appendChild(displayImageLableIcon);
displayImageLable.appendChild(displayImageLableText); displayImageLable.appendChild(displayImageLableText);
@ -1502,40 +1529,36 @@ var link = (function() {
displayImageInputWrap.appendChild(displayImageInput); displayImageInputWrap.appendChild(displayImageInput);
displayImageFormIndent.appendChild(displayImageInputWrap); displayImageFormIndent.appendChild(displayImageInputWrap);
displayImageFormIndentWrap.appendChild(displayImageFormIndent); displayImageFormIndentWrap.appendChild(displayImageFormIndent);
fieldset.appendChild(displayImageRadiotWrap); fieldsetDisplayVisual.appendChild(displayImageRadiotWrap);
fieldset.appendChild(displayImageFormIndentWrap); fieldsetDisplayVisual.appendChild(displayImageFormIndentWrap);
displayImageHelper.appendChild(displayImageHelperItem); displayImageHelper.appendChild(displayImageHelperItem);
displayImageFormIndent.appendChild(displayImageHelper); displayImageFormIndent.appendChild(displayImageHelper);
fieldset.appendChild(helper.node("hr"));
nameInputWrap.appendChild(nameLabel); nameInputWrap.appendChild(nameLabel);
nameInputWrap.appendChild(nameInput); nameInputWrap.appendChild(nameInput);
fieldset.appendChild(nameInputWrap); fieldsetNameURL.appendChild(nameInputWrap);
urlInputWrap.appendChild(urlLabel); urlInputWrap.appendChild(urlLabel);
urlInputWrap.appendChild(urlInput); urlInputWrap.appendChild(urlInput);
fieldset.appendChild(urlInputWrap); fieldsetNameURL.appendChild(urlInputWrap);
urlInputHelper.appendChild(urlInputHelperItem); urlInputHelper.appendChild(urlInputHelperItem);
fieldset.appendChild(urlInputHelper); fieldsetNameURL.appendChild(urlInputHelper);
fieldset.appendChild(helper.node("hr"));
colorLabelWrap.appendChild(colorLabel); colorLabelWrap.appendChild(colorLabel);
fieldset.appendChild(colorLabelWrap); fieldsetColorOverride.appendChild(colorLabelWrap);
colorThemeRadioWrap.appendChild(colorThemeRadio); colorThemeRadioWrap.appendChild(colorThemeRadio);
colorThemeLabel.appendChild(colorThemeLabelIcon); colorThemeLabel.appendChild(colorThemeLabelIcon);
colorThemeLabelBlock.appendChild(colorThemeLabelBlockItem1); colorThemeLabelBlock.appendChild(colorThemeLabelBlockItem1);
colorThemeLabelBlock.appendChild(colorThemeLabelBlockItem2); colorThemeLabelBlock.appendChild(colorThemeLabelBlockItem2);
colorThemeLabel.appendChild(colorThemeLabelBlock); colorThemeLabel.appendChild(colorThemeLabelBlock);
colorThemeRadioWrap.appendChild(colorThemeLabel); colorThemeRadioWrap.appendChild(colorThemeLabel);
fieldset.appendChild(colorThemeRadioWrap); fieldsetColorOverride.appendChild(colorThemeRadioWrap);
colorCustomInputWrap.appendChild(colorCustomRadio); colorCustomInputWrap.appendChild(colorCustomRadio);
colorCustomLabel.appendChild(colorCustomLabelIcon); colorCustomLabel.appendChild(colorCustomLabelIcon);
colorCustomBlock.appendChild(colorCustomBlockItem1); colorCustomBlock.appendChild(colorCustomBlockItem1);
colorCustomBlock.appendChild(colorCustomBlockItem2); colorCustomBlock.appendChild(colorCustomBlockItem2);
colorCustomLabel.appendChild(colorCustomBlock); colorCustomLabel.appendChild(colorCustomBlock);
colorCustomInputWrap.appendChild(colorCustomLabel); colorCustomInputWrap.appendChild(colorCustomLabel);
fieldset.appendChild(colorCustomInputWrap); fieldsetColorOverride.appendChild(colorCustomInputWrap);
colorColorCollapseButton.appendChild(colorColorCollapseButtonIcon); colorColorCollapseButton.appendChild(colorColorCollapseButtonIcon);
colorColorFormGroup.appendChild(colorColorPicker); colorColorFormGroup.appendChild(colorColorPicker);
colorColorFormGroup.appendChild(colorColorHex); colorColorFormGroup.appendChild(colorColorHex);
@ -1586,26 +1609,24 @@ var link = (function() {
colorColorFormIndent.appendChild(colorColorCollapse); colorColorFormIndent.appendChild(colorColorCollapse);
colorColorFormIndentWrap.appendChild(colorColorFormIndent); colorColorFormIndentWrap.appendChild(colorColorFormIndent);
fieldset.appendChild(colorColorFormIndentWrap); fieldsetColorOverride.appendChild(colorColorFormIndentWrap);
fieldset.appendChild(helper.node("hr"));
accentLabelWrap.appendChild(accentLabel); accentLabelWrap.appendChild(accentLabel);
fieldset.appendChild(accentLabelWrap); fieldsetAccentOverride.appendChild(accentLabelWrap);
accentThemeRadioWrap.appendChild(accentThemeRadio); accentThemeRadioWrap.appendChild(accentThemeRadio);
accentThemeLabel.appendChild(accentThemeLabelIcon); accentThemeLabel.appendChild(accentThemeLabelIcon);
accentThemeLabelBlock.appendChild(accentThemeLabelBlockItem1); accentThemeLabelBlock.appendChild(accentThemeLabelBlockItem1);
accentThemeLabelBlock.appendChild(accentThemeLabelBlockItem2); accentThemeLabelBlock.appendChild(accentThemeLabelBlockItem2);
accentThemeLabel.appendChild(accentThemeLabelBlock); accentThemeLabel.appendChild(accentThemeLabelBlock);
accentThemeRadioWrap.appendChild(accentThemeLabel); accentThemeRadioWrap.appendChild(accentThemeLabel);
fieldset.appendChild(accentThemeRadioWrap); fieldsetAccentOverride.appendChild(accentThemeRadioWrap);
accentCustomInputWrap.appendChild(accentCustomRadio); accentCustomInputWrap.appendChild(accentCustomRadio);
accentCustomLabel.appendChild(accentCustomLabelIcon); accentCustomLabel.appendChild(accentCustomLabelIcon);
accentCustomLabelBlock.appendChild(accentCustomLabelBlockItem1); accentCustomLabelBlock.appendChild(accentCustomLabelBlockItem1);
accentCustomLabelBlock.appendChild(accentCustomLabelBlockItem2); accentCustomLabelBlock.appendChild(accentCustomLabelBlockItem2);
accentCustomLabel.appendChild(accentCustomLabelBlock); accentCustomLabel.appendChild(accentCustomLabelBlock);
accentCustomInputWrap.appendChild(accentCustomLabel); accentCustomInputWrap.appendChild(accentCustomLabel);
fieldset.appendChild(accentCustomInputWrap); fieldsetAccentOverride.appendChild(accentCustomInputWrap);
accentColorCollapseButton.appendChild(accentColorCollapseButtonIcon) accentColorCollapseButton.appendChild(accentColorCollapseButtonIcon)
accentColorFormGroup.appendChild(accentColorPicker); accentColorFormGroup.appendChild(accentColorPicker);
accentColorFormGroup.appendChild(accentColorHex); accentColorFormGroup.appendChild(accentColorHex);
@ -1656,17 +1677,13 @@ var link = (function() {
accentColorFormIndent.appendChild(accentColorCollapse); accentColorFormIndent.appendChild(accentColorCollapse);
accentColorFormIndentWrap.appendChild(accentColorFormIndent); accentColorFormIndentWrap.appendChild(accentColorFormIndent);
fieldset.appendChild(accentColorFormIndentWrap); fieldsetAccentOverride.appendChild(accentColorFormIndentWrap);
fieldset.appendChild(helper.node("hr"));
imageInputWrap.appendChild(imageLabel); imageInputWrap.appendChild(imageLabel);
imageInputWrap.appendChild(imageInput); imageInputWrap.appendChild(imageInput);
fieldset.appendChild(imageInputWrap); fieldsetBackground.appendChild(imageInputWrap);
imageInputHelper.appendChild(imageInputHelperItem); imageInputHelper.appendChild(imageInputHelperItem);
fieldset.appendChild(imageInputHelper); fieldsetBackground.appendChild(imageInputHelper);
fieldset.appendChild(helper.node("hr"));
wideInputWrap.appendChild(wideInput); wideInputWrap.appendChild(wideInput);
wideLabel.appendChild(wideLabelIcon); wideLabel.appendChild(wideLabelIcon);
@ -1674,7 +1691,7 @@ var link = (function() {
wideLabelBlock.appendChild(wideLabelBlockItem2); wideLabelBlock.appendChild(wideLabelBlockItem2);
wideLabel.appendChild(wideLabelBlock); wideLabel.appendChild(wideLabelBlock);
wideInputWrap.appendChild(wideLabel); wideInputWrap.appendChild(wideLabel);
fieldset.appendChild(wideInputWrap); fieldsetWideTall.appendChild(wideInputWrap);
tallInputWrap.appendChild(tallInput); tallInputWrap.appendChild(tallInput);
tallLabel.appendChild(tallLabelIcon); tallLabel.appendChild(tallLabelIcon);
@ -1682,9 +1699,20 @@ var link = (function() {
tallLabelBlock.appendChild(tallLabelBlockItem2); tallLabelBlock.appendChild(tallLabelBlockItem2);
tallLabel.appendChild(tallLabelBlock); tallLabel.appendChild(tallLabelBlock);
tallInputWrap.appendChild(tallLabel); tallInputWrap.appendChild(tallLabel);
fieldset.appendChild(tallInputWrap); fieldsetWideTall.appendChild(tallInputWrap);
form.appendChild(fieldset); form.appendChild(fieldsetGroup);
form.appendChild(fieldsetDisplayVisual);
form.appendChild(fieldsetNameURL);
form.appendChild(fieldsetColorOverride);
form.appendChild(fieldsetAccentOverride);
form.appendChild(fieldsetBackground);
form.appendChild(fieldsetWideTall);
formAside.appendChild(previewArea);
formWrap.appendChild(form);
formWrap.appendChild(formAside);
var makeGroupOptions = function() { var makeGroupOptions = function() {
if (bookmarks.get().length > 0) { if (bookmarks.get().length > 0) {
@ -2202,6 +2230,7 @@ var link = (function() {
displayIconFormGroupText.tabIndex = -1; displayIconFormGroupText.tabIndex = -1;
displayImageInput.setAttribute("disabled", ""); displayImageInput.setAttribute("disabled", "");
helper.addClass(displayImageHelperItem, "disabled"); helper.addClass(displayImageHelperItem, "disabled");
render.item.preview.delay();
}, false); }, false);
displayIconRadio.addEventListener("change", function(event) { displayIconRadio.addEventListener("change", function(event) {
stagedLink.link.visual.display = this.value; stagedLink.link.visual.display = this.value;
@ -2214,6 +2243,7 @@ var link = (function() {
displayIconFormGroupText.tabIndex = 1; displayIconFormGroupText.tabIndex = 1;
displayImageInput.setAttribute("disabled", ""); displayImageInput.setAttribute("disabled", "");
helper.addClass(displayImageHelperItem, "disabled"); helper.addClass(displayImageHelperItem, "disabled");
render.item.preview.delay();
}, false); }, false);
displayImageRadio.addEventListener("change", function(event) { displayImageRadio.addEventListener("change", function(event) {
stagedLink.link.visual.display = this.value; stagedLink.link.visual.display = this.value;
@ -2226,18 +2256,23 @@ var link = (function() {
displayIconFormGroupText.tabIndex = -1; displayIconFormGroupText.tabIndex = -1;
displayImageInput.removeAttribute("disabled"); displayImageInput.removeAttribute("disabled");
helper.removeClass(displayImageHelperItem, "disabled"); helper.removeClass(displayImageHelperItem, "disabled");
render.item.preview.delay();
}, false); }, false);
displayLetterInput.addEventListener("input", function(event) { displayLetterInput.addEventListener("input", function(event) {
stagedLink.link.visual.letter = this.value; stagedLink.link.visual.letter = this.value;
render.item.preview.delay();
}, false); }, false);
nameInput.addEventListener("input", function(event) { nameInput.addEventListener("input", function(event) {
stagedLink.link.name = this.value; stagedLink.link.name = this.value;
render.item.preview.delay();
}, false); }, false);
displayImageInput.addEventListener("input", function(event) { displayImageInput.addEventListener("input", function(event) {
stagedLink.link.visual.image = this.value; stagedLink.link.visual.image = this.value;
render.item.preview.delay();
}, false); }, false);
urlInput.addEventListener("input", function(event) { urlInput.addEventListener("input", function(event) {
stagedLink.link.url = this.value; stagedLink.link.url = this.value;
render.item.preview.delay();
}, false); }, false);
displayIconFormGroupClear.addEventListener("click", function(event) { displayIconFormGroupClear.addEventListener("click", function(event) {
stagedLink.link.visual.icon.name = ""; stagedLink.link.visual.icon.name = "";
@ -2248,6 +2283,7 @@ var link = (function() {
existingIcon.remove(); existingIcon.remove();
}; };
displayIconInput.value = ""; displayIconInput.value = "";
render.item.preview.delay();
}, false); }, false);
colorThemeRadio.addEventListener("change", function() { colorThemeRadio.addEventListener("change", function() {
@ -2273,6 +2309,7 @@ var link = (function() {
helper.addClass(colorRgbBLabel, "disabled", ""); helper.addClass(colorRgbBLabel, "disabled", "");
colorRgbBRange.setAttribute("disabled", ""); colorRgbBRange.setAttribute("disabled", "");
colorRgbBNumber.setAttribute("disabled", ""); colorRgbBNumber.setAttribute("disabled", "");
render.item.preview.delay();
}, false); }, false);
colorCustomRadio.addEventListener("change", function() { colorCustomRadio.addEventListener("change", function() {
stagedLink.link.color.by = this.value; stagedLink.link.color.by = this.value;
@ -2297,16 +2334,19 @@ var link = (function() {
helper.removeClass(colorRgbBLabel, "disabled"); helper.removeClass(colorRgbBLabel, "disabled");
colorRgbBRange.removeAttribute("disabled"); colorRgbBRange.removeAttribute("disabled");
colorRgbBNumber.removeAttribute("disabled"); colorRgbBNumber.removeAttribute("disabled");
render.item.preview.delay();
}, false); }, false);
colorColorPicker.addEventListener("change", function() { colorColorPicker.addEventListener("change", function() {
mirror.data.color.by.hex(this.value); mirror.data.color.by.hex(this.value);
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}, false); }, false);
colorColorHex.addEventListener("input", function() { colorColorHex.addEventListener("input", function() {
if (helper.isHexNumber(this.value)) { if (helper.isHexNumber(this.value)) {
mirror.data.color.by.hex(this.value); mirror.data.color.by.hex(this.value);
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}; };
}, false); }, false);
colorColorCollapseButton.addEventListener("click", function() { colorColorCollapseButton.addEventListener("click", function() {
@ -2321,6 +2361,7 @@ var link = (function() {
stagedLink.link.color.hsl.h = parseInt(this.value, 10); stagedLink.link.color.hsl.h = parseInt(this.value, 10);
mirror.data.color.by.hsl(); mirror.data.color.by.hsl();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}); });
colorHslHNumber.addEventListener("input", function() { colorHslHNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
@ -2331,81 +2372,92 @@ var link = (function() {
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
colorHslSRange.addEventListener("input", function() { colorHslSRange.addEventListener("input", function() {
stagedLink.link.color.hsl.s = parseInt(this.value, 10); stagedLink.link.color.hsl.s = parseInt(this.value, 10);
mirror.data.color.by.hsl(); mirror.data.color.by.hsl();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}); });
colorHslSNumber.addEventListener("input", function() { colorHslSNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.color.hsl.s input.value = stagedLink.link.color.hsl.s;
}; };
stagedLink.link.color.hsl.s = mirror.minMax(this); stagedLink.link.color.hsl.s = mirror.minMax(this);
mirror.data.color.by.hsl(); mirror.data.color.by.hsl();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
colorHslLRange.addEventListener("input", function() { colorHslLRange.addEventListener("input", function() {
stagedLink.link.color.hsl.l = parseInt(this.value, 10); stagedLink.link.color.hsl.l = parseInt(this.value, 10);
mirror.data.color.by.hsl(); mirror.data.color.by.hsl();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}); });
colorHslLNumber.addEventListener("input", function() { colorHslLNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.color.hsl.l input.value = stagedLink.link.color.hsl.l;
}; };
stagedLink.link.color.hsl.l = mirror.minMax(this); stagedLink.link.color.hsl.l = mirror.minMax(this);
mirror.data.color.by.hsl(); mirror.data.color.by.hsl();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
colorRgbRRange.addEventListener("input", function() { colorRgbRRange.addEventListener("input", function() {
stagedLink.link.color.rgb.r = parseInt(this.value, 10); stagedLink.link.color.rgb.r = parseInt(this.value, 10);
mirror.data.color.by.rgb(); mirror.data.color.by.rgb();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}); });
colorRgbRNumber.addEventListener("input", function() { colorRgbRNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.color.rgb.r input.value = stagedLink.link.color.rgb.r;
}; };
stagedLink.link.color.rgb.r = mirror.minMax(this); stagedLink.link.color.rgb.r = mirror.minMax(this);
mirror.data.color.by.rgb(); mirror.data.color.by.rgb();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
colorRgbGRange.addEventListener("input", function() { colorRgbGRange.addEventListener("input", function() {
stagedLink.link.color.rgb.g = parseInt(this.value, 10); stagedLink.link.color.rgb.g = parseInt(this.value, 10);
mirror.data.color.by.rgb(); mirror.data.color.by.rgb();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}); });
colorRgbGNumber.addEventListener("input", function() { colorRgbGNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.color.rgb.g input.value = stagedLink.link.color.rgb.g;
}; };
stagedLink.link.color.rgb.g = mirror.minMax(this); stagedLink.link.color.rgb.g = mirror.minMax(this);
mirror.data.color.by.rgb(); mirror.data.color.by.rgb();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
colorRgbBRange.addEventListener("input", function() { colorRgbBRange.addEventListener("input", function() {
stagedLink.link.color.rgb.b = parseInt(this.value, 10); stagedLink.link.color.rgb.b = parseInt(this.value, 10);
mirror.data.color.by.rgb(); mirror.data.color.by.rgb();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
render.item.preview.delay();
}); });
colorRgbBNumber.addEventListener("input", function() { colorRgbBNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.color.rgb.b input.value = stagedLink.link.color.rgb.b;
}; };
stagedLink.link.color.rgb.b = mirror.minMax(this); stagedLink.link.color.rgb.b = mirror.minMax(this);
mirror.data.color.by.rgb(); mirror.data.color.by.rgb();
mirror.value(this, mirror.inputs.color()); mirror.value(this, mirror.inputs.color());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
accentThemeRadio.addEventListener("change", function() { accentThemeRadio.addEventListener("change", function() {
@ -2431,6 +2483,7 @@ var link = (function() {
helper.addClass(accentRgbBLabel, "disabled", ""); helper.addClass(accentRgbBLabel, "disabled", "");
accentRgbBRange.setAttribute("disabled", ""); accentRgbBRange.setAttribute("disabled", "");
accentRgbBNumber.setAttribute("disabled", ""); accentRgbBNumber.setAttribute("disabled", "");
render.item.preview.delay();
}, false); }, false);
accentCustomRadio.addEventListener("change", function() { accentCustomRadio.addEventListener("change", function() {
stagedLink.link.accent.by = this.value; stagedLink.link.accent.by = this.value;
@ -2455,16 +2508,19 @@ var link = (function() {
helper.removeClass(accentRgbBLabel, "disabled"); helper.removeClass(accentRgbBLabel, "disabled");
accentRgbBRange.removeAttribute("disabled"); accentRgbBRange.removeAttribute("disabled");
accentRgbBNumber.removeAttribute("disabled"); accentRgbBNumber.removeAttribute("disabled");
render.item.preview.delay();
}, false); }, false);
accentColorPicker.addEventListener("change", function() { accentColorPicker.addEventListener("change", function() {
mirror.data.accent.by.hex(this.value); mirror.data.accent.by.hex(this.value);
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}, false); }, false);
accentColorHex.addEventListener("input", function() { accentColorHex.addEventListener("input", function() {
if (helper.isHexNumber(this.value)) { if (helper.isHexNumber(this.value)) {
mirror.data.accent.by.hex(this.value); mirror.data.accent.by.hex(this.value);
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}; };
}, false); }, false);
accentColorCollapseButton.addEventListener("click", function() { accentColorCollapseButton.addEventListener("click", function() {
@ -2479,94 +2535,107 @@ var link = (function() {
stagedLink.link.accent.hsl.h = parseInt(this.value, 10); stagedLink.link.accent.hsl.h = parseInt(this.value, 10);
mirror.data.accent.by.hsl(); mirror.data.accent.by.hsl();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}); });
accentHslHNumber.addEventListener("input", function() { accentHslHNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.accent.hsl.h input.value = stagedLink.link.accent.hsl.h;
}; };
stagedLink.link.accent.hsl.h = mirror.minMax(this); stagedLink.link.accent.hsl.h = mirror.minMax(this);
mirror.data.accent.by.hsl(); mirror.data.accent.by.hsl();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
accentHslSRange.addEventListener("input", function() { accentHslSRange.addEventListener("input", function() {
stagedLink.link.accent.hsl.s = parseInt(this.value, 10); stagedLink.link.accent.hsl.s = parseInt(this.value, 10);
mirror.data.accent.by.hsl(); mirror.data.accent.by.hsl();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}); });
accentHslSNumber.addEventListener("input", function() { accentHslSNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.accent.hsl.s input.value = stagedLink.link.accent.hsl.s;
}; };
stagedLink.link.accent.hsl.s = mirror.minMax(this); stagedLink.link.accent.hsl.s = mirror.minMax(this);
mirror.data.accent.by.hsl(); mirror.data.accent.by.hsl();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
accentHslLRange.addEventListener("input", function() { accentHslLRange.addEventListener("input", function() {
stagedLink.link.accent.hsl.l = parseInt(this.value, 10); stagedLink.link.accent.hsl.l = parseInt(this.value, 10);
mirror.data.accent.by.hsl(); mirror.data.accent.by.hsl();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}); });
accentHslLNumber.addEventListener("input", function() { accentHslLNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.accent.hsl.l input.value = stagedLink.link.accent.hsl.l;
}; };
stagedLink.link.accent.hsl.l = mirror.minMax(this); stagedLink.link.accent.hsl.l = mirror.minMax(this);
mirror.data.accent.by.hsl(); mirror.data.accent.by.hsl();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
accentRgbRRange.addEventListener("input", function() { accentRgbRRange.addEventListener("input", function() {
stagedLink.link.accent.rgb.r = parseInt(this.value, 10); stagedLink.link.accent.rgb.r = parseInt(this.value, 10);
mirror.data.accent.by.rgb(); mirror.data.accent.by.rgb();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}); });
accentRgbRNumber.addEventListener("input", function() { accentRgbRNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.accent.rgb.r input.value = stagedLink.link.accent.rgb.r;
}; };
stagedLink.link.accent.rgb.r = mirror.minMax(this); stagedLink.link.accent.rgb.r = mirror.minMax(this);
mirror.data.accent.by.rgb(); mirror.data.accent.by.rgb();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
accentRgbGRange.addEventListener("input", function() { accentRgbGRange.addEventListener("input", function() {
stagedLink.link.accent.rgb.g = parseInt(this.value, 10); stagedLink.link.accent.rgb.g = parseInt(this.value, 10);
mirror.data.accent.by.rgb(); mirror.data.accent.by.rgb();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}); });
accentRgbGNumber.addEventListener("input", function() { accentRgbGNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.accent.rgb.g input.value = stagedLink.link.accent.rgb.g;
}; };
stagedLink.link.accent.rgb.g = mirror.minMax(this); stagedLink.link.accent.rgb.g = mirror.minMax(this);
mirror.data.accent.by.rgb(); mirror.data.accent.by.rgb();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
accentRgbBRange.addEventListener("input", function() { accentRgbBRange.addEventListener("input", function() {
stagedLink.link.accent.rgb.b = parseInt(this.value, 10); stagedLink.link.accent.rgb.b = parseInt(this.value, 10);
mirror.data.accent.by.rgb(); mirror.data.accent.by.rgb();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
render.item.preview.delay();
}); });
accentRgbBNumber.addEventListener("input", function() { accentRgbBNumber.addEventListener("input", function() {
var set = function(input) { var set = function(input) {
input.value = stagedLink.link.accent.rgb.b input.value = stagedLink.link.accent.rgb.b;
}; };
stagedLink.link.accent.rgb.b = mirror.minMax(this); stagedLink.link.accent.rgb.b = mirror.minMax(this);
mirror.data.accent.by.rgb(); mirror.data.accent.by.rgb();
mirror.value(this, mirror.inputs.accent()); mirror.value(this, mirror.inputs.accent());
clearTimeout(mirror.delay); clearTimeout(mirror.delay);
mirror.delay = setTimeout(set, 1000, this); mirror.delay = setTimeout(set, 1000, this);
render.item.preview.delay();
}); });
imageInput.addEventListener("input", function(event) { imageInput.addEventListener("input", function(event) {
stagedLink.link.image = this.value; stagedLink.link.image = this.value;
render.item.preview.delay();
}, false); }, false);
wideInput.addEventListener("change", function(event) { wideInput.addEventListener("change", function(event) {
stagedLink.link.wide = this.checked; stagedLink.link.wide = this.checked;
@ -2580,7 +2649,29 @@ var link = (function() {
postFocus: displayIconFormGroupText postFocus: displayIconFormGroupText
}); });
return form; return formWrap;
},
preview: {
update: function() {
var preview = render.item.link({
preview: true
});
var previewHeading = helper.node("p:Preview|class:link-form-preview-headline small muted");
helper.e(".link-form-preview-area").appendChild(previewHeading);
helper.e(".link-form-preview-area").appendChild(preview);
},
clear: function() {
while (helper.e(".link-form-preview-area").lastChild) {
helper.e(".link-form-preview-area").removeChild(helper.e(".link-form-preview-area").lastChild);
};
},
delay: function() {
clearTimeout(_timerLinkItemPreview);
_timerLinkItemPreview = setTimeout(function functionName() {
render.item.preview.clear();
render.item.preview.update();
}, 300);
}
}, },
formCollapse: function() { formCollapse: function() {
helper.eA(".link-form-collapse").forEach(function(arrayItem, index) { helper.eA(".link-form-collapse").forEach(function(arrayItem, index) {
@ -2939,6 +3030,7 @@ var link = (function() {
helper.e(".link-form-input-icon").value = autoSuggestData.label; helper.e(".link-form-input-icon").value = autoSuggestData.label;
helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.visual.icon.prefix + " fa-" + stagedLink.link.visual.icon.name)); helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.visual.icon.prefix + " fa-" + stagedLink.link.visual.icon.name));
helper.e(".link-form-text-icon").focus(); helper.e(".link-form-text-icon").focus();
render.item.preview.delay();
}; };
render.add = { render.add = {
@ -2965,9 +3057,9 @@ var link = (function() {
successAction: successAction, successAction: successAction,
cancelAction: cancelAction, cancelAction: cancelAction,
actionText: "Add", actionText: "Add",
size: "small",
content: render.item.form() content: render.item.form()
}); });
render.item.preview.update();
shade.open({ shade.open({
action: function() { action: function() {
add.item.close(); add.item.close();
@ -3076,9 +3168,9 @@ var link = (function() {
successAction: successAction, successAction: successAction,
cancelAction: cancelAction, cancelAction: cancelAction,
actionText: "Save", actionText: "Save",
size: "small",
content: form content: form
}); });
render.item.preview.update();
shade.open({ shade.open({
action: function() { action: function() {
edit.item.close(); edit.item.close();

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.48.1"; var current = "5.49.0";
var name = "Macabre Caterpillar"; var name = "Macabre Caterpillar";

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