[feature] add link edit and add preview

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

2
package-lock.json generated
View File

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

View File

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

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-wrap,
.form-helper {

View File

@ -1168,3 +1168,191 @@
.link-form-collapse-button.active .link-form-collapse-button-icon {
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;
}

View File

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

View File

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

View File

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