diff --git a/package-lock.json b/package-lock.json index 9183e464..d50824cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.48.1", + "version": "5.49.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 14ba2dc6..1962f342 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/css/form.css b/src/css/form.css index ffa5ccdf..439cf873 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -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 { diff --git a/src/css/link.css b/src/css/link.css index e0ca6067..7217efcd 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -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; +} diff --git a/src/js/link.js b/src/js/link.js index 6e4e5fa7..fe5a08b9 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -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(); diff --git a/src/js/version.js b/src/js/version.js index 8941cbe4..4f3f679c 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "5.48.1"; + var current = "5.49.0"; var name = "Macabre Caterpillar"; diff --git a/src/manifest.json b/src/manifest.json index 6b6361da..37a08d32 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "name": "nightTab", "short_name": "nightTab", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", - "version": "5.48.1", + "version": "5.49.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"