From 05bb5acc6f385107759758e3bd08255770d46ef1 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Wed, 8 Jan 2020 18:44:01 -0700 Subject: [PATCH] [feature] add custom theme rename controls --- package-lock.json | 2 +- package.json | 2 +- src/js/theme.js | 112 ++++++++++++++++++++++++++++++++++++---------- src/js/version.js | 2 +- src/manifest.json | 2 +- 5 files changed, 93 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index d7d18561..7ca0e98f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.12.1", + "version": "4.13.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 902b21b5..cc091e7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.12.1", + "version": "4.13.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/js/theme.js b/src/js/theme.js index 10343d0d..db4c1817 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -1094,6 +1094,9 @@ var theme = (function() { add: function() { state.get.current().theme.custom.all.push(JSON.parse(JSON.stringify(stagedThemeCustom.theme))); }, + edit: function() { + state.get.current().theme.custom.all.splice(stagedThemeCustom.position.index, 1, JSON.parse(JSON.stringify(stagedThemeCustom.theme))); + }, remove: function(copyStagedThemeCustom) { state.get.current().theme.custom.all.splice(stagedThemeCustom.position.index, 1); }, @@ -1463,7 +1466,9 @@ var theme = (function() { var themeCustomButton = helper.node("button|class:theme-custom-button button mb-0,tabindex:-1"); var themeCustomPreview = helper.node("span|class:theme-custom-preview"); var themeCustomControl = helper.node("div|class:theme-custom-control"); - var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button mb-0,tabindex:-2"); + var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small mb-0,tabindex:-2"); + var themeCustomEditIcon = helper.node("spa|class:button-icon icon-edit"); + var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small mb-0,tabindex:-2"); var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close"); var shadeSteps = 4; var rgb = arrayItem.color.rgb; @@ -1505,7 +1510,9 @@ var theme = (function() { }; themeCustomButton.appendChild(themeCustomPreview); + themeCustomEdit.appendChild(themeCustomEditIcon); themeCustomRemove.appendChild(themeCustomRemoveIcon); + themeCustomControl.appendChild(themeCustomEdit); themeCustomControl.appendChild(themeCustomRemove); themeCustomTile.appendChild(themeCustomButton); themeCustomTile.appendChild(themeCustomControl); @@ -1535,6 +1542,11 @@ var theme = (function() { control.render.class(); }, false); + themeCustomEdit.addEventListener("click", function() { + menu.close(); + render.custom.edit(copyStagedThemeCustom); + }, false); + themeCustomRemove.addEventListener("click", function() { menu.close(); render.custom.remove(copyStagedThemeCustom); @@ -1546,28 +1558,39 @@ var theme = (function() { themeCustomSaved.appendChild(helper.node("hr")); }; }, - add: function() { - var form = function() { - var form = helper.node("form|class:group-form"); - var fieldset = helper.node("fieldset"); - var inputWrap = helper.node("div|class:input-wrap"); - var label = helper.node("label:Name|for:theme-name"); - var input = helper.node("input|id:theme-name,class:theme-name mb-0,type:text,tabindex:1,placeholder:Example theme,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); - inputWrap.appendChild(label); - inputWrap.appendChild(input); - fieldset.appendChild(inputWrap); - form.appendChild(fieldset); - input.addEventListener("input", function() { - stagedThemeCustom.theme.name = this.value; - }, false); - form.addEventListener("keydown", function(event) { - if (event.keyCode == 13) { - event.preventDefault(); - return false; - }; - }, false); - return form; + form: function(override) { + var options = { + useStagedTheme: null }; + if (override) { + options = helper.applyOptions(options, override); + }; + var form = helper.node("form|class:group-form"); + var fieldset = helper.node("fieldset"); + var inputWrap = helper.node("div|class:input-wrap"); + var label = helper.node("label:Name|for:theme-name"); + var input = helper.node("input|id:theme-name,class:theme-name mb-0,type:text,tabindex:1,placeholder:Example theme,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); + inputWrap.appendChild(label); + inputWrap.appendChild(input); + fieldset.appendChild(inputWrap); + form.appendChild(fieldset); + + if (options.useStagedTheme) { + input.value = stagedThemeCustom.theme.name; + }; + + input.addEventListener("input", function() { + stagedThemeCustom.theme.name = this.value; + }, false); + form.addEventListener("keydown", function(event) { + if (event.keyCode == 13) { + event.preventDefault(); + return false; + }; + }, false); + return form; + }, + add: function() { var successAction = function() { stagedThemeCustom.theme.font = state.get.current().theme.font; stagedThemeCustom.theme.color = state.get.current().theme.color; @@ -1592,11 +1615,54 @@ var theme = (function() { }; modal.open({ heading: "Save current Theme", + content: render.custom.form(), + successAction: successAction, + cancelAction: cancelAction, + actionText: "Save", + size: "small" + }); + shade.open({ + action: function() { + modal.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + } + }); + pagelock.lock(); + }, + edit: function(copyStagedThemeCustom) { + stagedThemeCustom.position.index = JSON.parse(JSON.stringify(copyStagedThemeCustom.position.index)); + stagedThemeCustom.theme = JSON.parse(JSON.stringify(copyStagedThemeCustom.theme)); + var form = render.custom.form({ + useStagedTheme: true + }); + var heading; + if (stagedThemeCustom.theme.name != null && stagedThemeCustom.theme.name != "") { + heading = "Edit " + stagedThemeCustom.theme.name; + } else { + heading = "Edit unnamed theme"; + }; + var successAction = function() { + mod.custom.edit(); + data.save(); + render.custom.clear(); + render.custom.all(); + shade.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + }; + var cancelAction = function() { + shade.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + }; + modal.open({ + heading: heading, successAction: successAction, cancelAction: cancelAction, actionText: "Save", size: "small", - content: form() + content: form }); shade.open({ action: function() { diff --git a/src/js/version.js b/src/js/version.js index db0647b5..cb771fdf 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.12.1"; + var current = "4.13.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index 80a181ee..bc4aaa9a 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": "4.12.1", + "version": "4.13.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"