diff --git a/src/css/group.css b/src/css/group.css index 9aa8111a..89083ff3 100644 --- a/src/css/group.css +++ b/src/css/group.css @@ -113,14 +113,14 @@ justify-content: flex-start; } -.is-group-order-headerbody.is-group-openall-show .group-header, -.is-group-order-headerbody.is-group-name-show .group-header, +.is-group-order-headerbody .group-header-name.group-header, +.is-group-order-headerbody .group-header-openall.group-header, .is-group-order-headerbody.is-edit .group-header { padding-bottom: calc(var(--layout-space) * var(--layout-gutter)); } -.is-group-order-bodyheader.is-group-openall-show .group-header, -.is-group-order-bodyheader.is-group-name-show .group-header, +.is-group-order-bodyheader .group-header-name.group-header, +.is-group-order-bodyheader .group-header-openall.group-header, .is-group-order-bodyheader.is-edit .group-header { padding-top: calc(var(--layout-space) * var(--layout-gutter)); } diff --git a/src/html/menu/content/groups/names.html b/src/html/menu/content/groups/names.html index f3c847b2..b60684bb 100644 --- a/src/html/menu/content/groups/names.html +++ b/src/html/menu/content/groups/names.html @@ -4,19 +4,21 @@
- - +
+ + +
+
+

Individual Group Names can be shown or hidden from their respective edit controls.

+
+
-
-
- -
- - - -
-
+ +
+ + +
diff --git a/src/html/menu/content/groups/openall.html b/src/html/menu/content/groups/openall.html index 4474826b..4c8d9bdb 100644 --- a/src/html/menu/content/groups/openall.html +++ b/src/html/menu/content/groups/openall.html @@ -4,25 +4,21 @@
- - +
+ + +
-

The Open all button will show when there is at least one Bookmark in a Group.

-
-
-

This can be overridden for individual Groups using their edit conttrols.

+

Individual Group Open all buttons can be shown or hidden from their respective edit controls.

+
-
-
- -
- - - -
-
+ +
+ + +
diff --git a/src/js/bookmarks.js b/src/js/bookmarks.js index 1b3c52bd..5fcdafba 100644 --- a/src/js/bookmarks.js +++ b/src/js/bookmarks.js @@ -3,8 +3,13 @@ var bookmarks = (function() { var mod = {}; mod.all = [{ - name: "Cool stuff", - openAll: true, + name: { + text: "Cool stuff", + show: true + }, + openAll: { + show: true + }, items: [{ display: "icon", letter: "AS", @@ -127,8 +132,13 @@ var bookmarks = (function() { timeStamp: 1546453111953 }] }, { - name: "Dev sites", - openAll: true, + name: { + text: "Dev sites", + show: true + }, + openAll: { + show: true + }, items: [{ display: "icon", letter: "DEV", diff --git a/src/js/control.js b/src/js/control.js index 779b8b42..dc7d6441 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -3944,12 +3944,17 @@ var control = (function() { }], names: [{ element: ".control-group-name-show", - path: "group.name.show", - type: "checkbox", + type: "button", func: function() { + link.mod.name.show(); + link.groupAndItems(); + } + }, { + element: ".control-group-name-hide", + type: "button", + func: function() { + link.mod.name.hide(); link.groupAndItems(); - render.class(); - render.dependents(); } }, { element: ".control-group-name-size-range", @@ -4049,12 +4054,17 @@ var control = (function() { }], openall: [{ element: ".control-group-openall-show", - path: "group.openAll.show", - type: "checkbox", + type: "button", func: function() { + link.mod.openall.show(); + link.groupAndItems(); + } + }, { + element: ".control-group-openall-hide", + type: "button", + func: function() { + link.mod.openall.hide(); link.groupAndItems(); - render.class(); - render.dependents(); } }, { element: ".control-group-openall-size-range", @@ -6435,24 +6445,6 @@ var control = (function() { ], name: "is-group-area-justify-" + state.get.current().group.area.justify }], - name: [{ - remove: [ - "is-group-name-show" - ], - condition: function() { - return state.get.current().group.name.show; - }, - name: "is-group-name-show" - }], - openall: [{ - remove: [ - "is-group-openall-show" - ], - condition: function() { - return state.get.current().group.openAll.show; - }, - name: "is-group-openall-show" - }], order: [{ remove: [ "is-group-order-headerbody", @@ -6689,8 +6681,6 @@ var control = (function() { classCheck(all.header.border); classCheck(all.header.position); classCheck(all.group.area); - classCheck(all.group.name); - classCheck(all.group.openall); classCheck(all.group.order); classCheck(all.group.border); classCheck(all.link); @@ -7178,34 +7168,6 @@ var control = (function() { } }] }, - group: [{ - condition: function() { - return state.get.current().group.name.show; - }, - dependents: function() { - return [ - "[for=control-group-name-size-range]", - ".control-group-name-size-range", - ".control-group-name-size-number", - ".control-group-name-size-default" - ]; - } - }, { - condition: function() { - return state.get.current().group.openAll.show; - }, - dependents: function() { - return [ - "[for=control-group-openall-size-range]", - ".control-group-openall-size-range", - ".control-group-openall-size-number", - ".control-group-openall-size-default", - ".control-group-openall-style-label", - ".control-group-openall-style-box", - ".control-group-openall-style-clear" - ]; - } - }], link: [{ condition: function() { return state.get.current().link.show; @@ -7483,7 +7445,6 @@ var control = (function() { disableCheck(all.header.menu); disableCheck(all.header.position); disableCheck(all.header.color); - disableCheck(all.group); disableCheck(all.link); disableCheck(all.theme); disableCheck(all.background); diff --git a/src/js/link.js b/src/js/link.js index cf61fa25..d8bba7e6 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -6,22 +6,29 @@ var link = (function() { destination: null }, group: { - name: null, - openAll: null, + name: { + text: null, + show: null + }, + openAll: { + show: null + }, items: null } }; stagedGroup.init = function() { stagedGroup.group.items = []; - stagedGroup.group.openAll = true; + stagedGroup.group.name.show = true; + stagedGroup.group.openAll.show = true; }; stagedGroup.reset = function() { stagedGroup.position.origin = null; stagedGroup.position.destination = null; - stagedGroup.group.name = null; - stagedGroup.group.openAll = null; + stagedGroup.group.name.text = null; + stagedGroup.group.name.show = null; + stagedGroup.group.openAll.show = null; stagedGroup.group.items = null; }; @@ -135,6 +142,32 @@ var link = (function() { } }; + mod.name = { + show: function() { + bookmarks.get().forEach(function(arrayItem, index) { + arrayItem.name.show = true; + }); + }, + hide: function() { + bookmarks.get().forEach(function(arrayItem, index) { + arrayItem.name.show = false; + }); + } + }; + + mod.openall = { + show: function() { + bookmarks.get().forEach(function(arrayItem, index) { + arrayItem.openAll.show = true; + }); + }, + hide: function() { + bookmarks.get().forEach(function(arrayItem, index) { + arrayItem.openAll.show = false; + }); + } + }; + mod.edit = { mode: { open: function() { @@ -383,7 +416,7 @@ var link = (function() { var groupName = helper.node("div|class:group-name"); var groupNameText = helper.makeNode({ tag: "h1", - text: stagedGroup.group.name, + text: stagedGroup.group.name.text, attr: [{ key: "class", value: "group-name-text" @@ -392,6 +425,18 @@ var link = (function() { groupName.appendChild(groupNameText); groupHeaderItemName.appendChild(groupName); + var groupOpenall = helper.node("div|class:group-openall form-group"); + var groupOpenallItem = helper.node("button|class:button group-openall-item,tabindex:1,title:Open all Bookmarks in this Group"); + var groupOpenallItemText = helper.node("span:Open all|class:button-text"); + groupOpenallItem.appendChild(groupOpenallItemText); + groupOpenall.appendChild(groupOpenallItem); + + if (state.get.current().group.openAll.style == "clear") { + helper.addClass(groupOpenallItem, "button-link"); + }; + + groupHeaderItemOpenall.appendChild(groupOpenall); + var groupControl = helper.node("div|class:group-control form-group"); var groupControlItemUp = helper.node("button|class:button group-control-item group-control-item-up,tabindex:-1,title:Move this group up"); @@ -453,30 +498,17 @@ var link = (function() { render.remove.group(copyStagedGroup); }, false); - - var groupOpenall = helper.node("div|class:group-openall form-group"); - - var groupOpenallItem = helper.node("button|class:button group-openall-item,tabindex:1,title:Open all Bookmarks in this Group"); - var groupOpenallItemText = helper.node("span:Open all|class:button-text"); - groupOpenallItem.appendChild(groupOpenallItemText); - groupOpenall.appendChild(groupOpenallItem); - - - if (state.get.current().group.openAll.style == "clear") { - helper.addClass(groupOpenallItem, "button-link"); - }; - groupOpenallItem.addEventListener("click", function() { render.group.openall.all(copyStagedGroup); }); - groupHeaderItemOpenall.appendChild(groupOpenall); - groupHeader.appendChild(groupHeaderItemControl); - if (state.get.current().group.name.show) { + if (stagedGroup.group.name.show && stagedGroup.group.name.text.replace(/\s/g, "") != "") { + helper.addClass(groupHeader, "group-header-name"); groupHeader.appendChild(groupHeaderItemName); }; - if (state.get.current().group.openAll.show && stagedGroup.group.openAll && stagedGroup.group.items.length > 0) { + if (stagedGroup.group.openAll.show && stagedGroup.group.items.length > 0) { + helper.addClass(groupHeader, "group-header-openall"); groupHeader.appendChild(groupHeaderItemOpenall); }; group.appendChild(groupHeader); @@ -495,6 +527,17 @@ var link = (function() { var form = helper.node("form|class:group-form"); var fieldset = helper.node("fieldset"); + // group name + var groupFormInputNameShowWrap = helper.node("div|class:form-wrap"); + var groupFormInputNameShowLabel = helper.node("label|for:group-form-input-name-show"); + var groupFormInputNameShowText = helper.node("span:Show Group name"); + var groupFormInputNameShowIcon = helper.node("span|class:label-icon"); + var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,checked"); + var groupFormInputNameIndentWrap = helper.node("div|class:form-wrap"); + var groupFormInputNameIndent = helper.node("div|class:form-indent"); + var groupFormInputNameWrap = helper.node("div|class:form-wrap"); + var groupFormInputName = helper.node("input|type:text,class:group-form-input-name,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); + // group position var groupFormPositionInputWrap = helper.node("div|class:form-wrap"); var groupFormPositionLabel = helper.node("label:Position|for:group-form-position"); @@ -502,42 +545,40 @@ var link = (function() { var groupFormRandomNameButtonWrap = helper.node("div|class:form-wrap"); var groupFormRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1"); - // group name - var groupFormNameInputWrap = helper.node("div|class:form-wrap"); - var groupFormInputNameLabel = helper.node("label:Name|for:group-form-input-name"); - var groupFormInputName = helper.node("input|type:text,class:group-form-input-name,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); - // open all var groupFormOpenAllInputWrap = helper.node("div|class:form-wrap"); var groupFormInputOpenallLabel = helper.node("label|for:group-form-input-openall"); - var groupFormInputOpenallLabelText = helper.node("span:Show Open all in this Group"); + var groupFormInputOpenallLabelText = helper.node("span:Show Open all"); var groupFormInputOpenallLabelIcon = helper.node("span|class:label-icon"); var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,checked"); - var groupFormOpenAllInputHelper1 = helper.node("div|class:form-helper"); - var groupFormOpenAllInputHelper1Item = helper.node("p:Override the global Group setting to show or hide the Open all button.|class:link-form-input-icon-helper form-helper-item"); - var groupFormOpenAllInputHelper2 = helper.node("div|class:form-helper"); - var groupFormOpenAllInputHelper2Item = helper.node("p:The Open all button will show when there is at least one Bookmark in this Group.|class:link-form-input-icon-helper form-helper-item"); + var groupFormOpenAllInputHelper = helper.node("div|class:form-helper"); + var groupFormOpenAllInputHelperItem = helper.node("p:Open all button will appear if there is at least one Bookmark in this Group.|class:link-form-input-icon-helper form-helper-item"); + + groupFormInputNameShowLabel.appendChild(groupFormInputNameShowIcon); + groupFormInputNameShowLabel.appendChild(groupFormInputNameShowText); + groupFormInputNameShowWrap.appendChild(groupFormInputNameShowInput); + groupFormInputNameShowWrap.appendChild(groupFormInputNameShowLabel); + groupFormInputNameWrap.appendChild(groupFormInputName); + groupFormRandomNameButtonWrap.appendChild(groupFormRandomNameButton); + groupFormInputNameIndent.appendChild(groupFormInputNameWrap); + groupFormInputNameIndent.appendChild(groupFormRandomNameButtonWrap); + groupFormInputNameIndentWrap.appendChild(groupFormInputNameIndent); groupFormPositionInputWrap.appendChild(groupFormPositionLabel); groupFormPositionInputWrap.appendChild(groupFormPositionSelect); - groupFormRandomNameButtonWrap.appendChild(groupFormRandomNameButton); - groupFormNameInputWrap.appendChild(groupFormInputNameLabel); - groupFormNameInputWrap.appendChild(groupFormInputName); groupFormInputOpenallLabel.appendChild(groupFormInputOpenallLabelIcon); groupFormInputOpenallLabel.appendChild(groupFormInputOpenallLabelText); - groupFormOpenAllInputHelper1.appendChild(groupFormOpenAllInputHelper1Item); - groupFormOpenAllInputHelper2.appendChild(groupFormOpenAllInputHelper2Item); groupFormOpenAllInputWrap.appendChild(groupFormOpenAllInput); groupFormOpenAllInputWrap.appendChild(groupFormInputOpenallLabel); - groupFormOpenAllInputWrap.appendChild(groupFormOpenAllInputHelper1); - groupFormOpenAllInputWrap.appendChild(groupFormOpenAllInputHelper2); + groupFormOpenAllInputHelper.appendChild(groupFormOpenAllInputHelperItem); - fieldset.appendChild(groupFormNameInputWrap); - fieldset.appendChild(groupFormRandomNameButtonWrap); + fieldset.appendChild(groupFormInputNameShowWrap); + fieldset.appendChild(groupFormInputNameIndentWrap); fieldset.appendChild(helper.node("hr")); fieldset.appendChild(groupFormPositionInputWrap); fieldset.appendChild(helper.node("hr")); fieldset.appendChild(groupFormOpenAllInputWrap); + fieldset.appendChild(groupFormOpenAllInputHelper); form.appendChild(fieldset); var makeGroupOptions = function() { @@ -551,9 +592,10 @@ var link = (function() { }; var populateForm = function() { + groupFormInputNameShowInput.checked = stagedGroup.group.name.show; groupFormPositionSelect.selectedIndex = stagedGroup.position.origin; - groupFormInputName.value = stagedGroup.group.name; - groupFormOpenAllInput.checked = stagedGroup.group.openAll; + groupFormInputName.value = stagedGroup.group.name.text; + groupFormOpenAllInput.checked = stagedGroup.group.openAll.show; }; var setLastPosition = function() { @@ -575,21 +617,31 @@ var link = (function() { return false; }; }, false); + groupFormInputNameShowInput.addEventListener("change", function(event) { + stagedGroup.group.name.show = this.checked; + if (stagedGroup.group.name.show) { + groupFormInputName.removeAttribute("disabled"); + groupFormRandomNameButton.removeAttribute("disabled"); + } else { + groupFormInputName.setAttribute("disabled", ""); + groupFormRandomNameButton.setAttribute("disabled", ""); + }; + }, false); groupFormPositionSelect.addEventListener("change", function(event) { stagedGroup.position.destination = this.selectedIndex; }, false); groupFormInputName.addEventListener("input", function(event) { - stagedGroup.group.name = this.value; + stagedGroup.group.name.text = this.value; }, false); groupFormRandomNameButton.addEventListener("click", function(event) { var randomName = helper.randomString({ mix: true }); - stagedGroup.group.name = randomName; + stagedGroup.group.name.text = randomName; groupFormInputName.value = randomName; }, false); groupFormOpenAllInput.addEventListener("change", function(event) { - stagedGroup.group.openAll = this.checked; + stagedGroup.group.openAll.show = this.checked; }, false); return form; @@ -987,10 +1039,10 @@ var link = (function() { bookmarks.get().forEach(function(arrayItem, index) { var option = helper.makeNode({ tag: "option", - text: arrayItem.name, + text: arrayItem.name.text, attr: [{ key: "value", - value: arrayItem.name + value: arrayItem.name.text }] }); groupExistingGroup.appendChild(option); @@ -1674,7 +1726,7 @@ var link = (function() { var form = render.group.form({ useStagedGroup: true }); - var heading = "Edit " + stagedGroup.group.name; + var heading = "Edit " + stagedGroup.group.name.text; var successAction = function() { var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); bookmarks.mod.edit.group(copyStagedGroup); @@ -1768,8 +1820,8 @@ var link = (function() { stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group)); stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position)); var heading; - if (stagedGroup.group.name != null && stagedGroup.group.name != "") { - heading = "Remove " + stagedGroup.group.name; + if (stagedGroup.group.name.text != null && stagedGroup.group.name.text != "") { + heading = "Remove " + stagedGroup.group.name.text; } else { heading = "Remove unnamed group"; }; diff --git a/src/js/update.js b/src/js/update.js index 37e1b098..ce73fa20 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -885,8 +885,16 @@ var update = (function() { data.state.layout.direction = "vertical"; data.state.link.area.direction = "ltr"; data.bookmarks.forEach(function(arrayItem, index) { - arrayItem.openAll = true; + arrayItem.name = { + show: data.state.group.name.show, + text: arrayItem.name + }; + arrayItem.openAll = { + show: data.state.group.openAll.show + }; }); + delete data.state.group.name.show; + delete data.state.group.openAll.show; return data; } }; diff --git a/src/style-guide.html b/src/style-guide.html index f4ae1a37..19e17640 100644 --- a/src/style-guide.html +++ b/src/style-guide.html @@ -283,6 +283,9 @@