diff --git a/package-lock.json b/package-lock.json index 2d47444c..c83321e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "4.41.0", + "version": "4.42.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index cc6b672f..4883755f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "4.41.0", + "version": "4.42.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/group.css b/src/css/group.css index b818638b..86cb7b32 100644 --- a/src/css/group.css +++ b/src/css/group.css @@ -40,6 +40,62 @@ transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04); } +.group-header-item { + display: flex; +} + +.is-group-area-justify-center .group-header-item:not(:only-child):not(:last-child), +.is-group-area-justify-left .group-header-item:not(:only-child):not(:last-child) { + margin-right: calc(var(--layout-space) * var(--layout-gutter)); +} + +.is-group-area-justify-right .group-header-item:not(:only-child):not(:last-child) { + margin-left: calc(var(--layout-space) * var(--layout-gutter)); +} + +.group-header-item-name { + flex-shrink: 1; + overflow: hidden; +} + +.group-header-item-control { + height: 0; + width: 0; + overflow: hidden; + flex-shrink: 0; + transition: + width var(--layout-timing-extra-fast), + height var(--layout-timing-extra-fast) var(--layout-duration-04), + margin var(--layout-timing-extra-fast); +} + +.is-edit .group-header-item-control { + height: 2.5em; + width: 15em; + transition: + width var(--layout-timing-extra-fast) var(--layout-duration-04), + height var(--layout-timing-extra-fast), + margin var(--layout-timing-extra-fast) var(--layout-duration-04); +} + +.is-group-area-justify-center .group-header-item-control:not(:only-child):not(:last-child), +.is-group-area-justify-left .group-header-item-control:not(:only-child):not(:last-child) { + margin-right: 0; +} + +.is-edit.is-group-area-justify-center .group-header-item-control:not(:only-child):not(:last-child), +.is-edit.is-group-area-justify-left .group-header-item-control:not(:only-child):not(:last-child) { + margin-right: calc(var(--layout-space) * var(--layout-gutter)); +} + +.is-group-area-justify-right .group-header-item-control:not(:only-child):not(:last-child) { + margin-left: 0; +} + +.is-edit.is-group-area-justify-right .group-header-item-control:not(:only-child):not(:last-child) { + margin-left: calc(var(--layout-space) * var(--layout-gutter)); +} + .is-edit .group-header { transition: padding var(--layout-timing-extra-fast); } @@ -58,30 +114,25 @@ 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.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.is-edit .group-header { padding-top: calc(var(--layout-space) * var(--layout-gutter)); } .group-name { - margin-right: 0; + height: 2.5em; display: flex; align-items: center; - height: 0; max-width: 100%; overflow: hidden; font-size: var(--group-name-size); - transition: height var(--layout-timing-extra-fast); -} - -.is-group-name-show .group-name { - display: flex; - height: 2.5em; } .group-name-text { @@ -91,41 +142,15 @@ white-space: nowrap; } -.group-control { - margin-right: 0; - margin-bottom: 0; - overflow: hidden; - height: 0; - width: 0; - flex-shrink: 0; - transition: - width var(--layout-timing-extra-fast), - height var(--layout-timing-extra-fast) var(--layout-duration-04), - margin var(--layout-timing-extra-fast); -} - -.is-edit .group-control { - height: 2.5em; - width: 16em; - transition: - width var(--layout-timing-extra-fast) var(--layout-duration-04), - height var(--layout-timing-extra-fast), - margin var(--layout-timing-extra-fast) var(--layout-duration-04); -} - -.is-edit.is-group-name-show.is-group-area-justify-left .group-control, -.is-edit.is-group-name-show.is-group-area-justify-center .group-control { - margin-right: 1em; -} - -.is-edit.is-group-name-show.is-group-area-justify-right .group-control { - margin-left: 1em; -} - .group-control-item { - padding-left: 1.25em; - padding-right: 1.25em; + padding-left: 0; + padding-right: 0; flex-shrink: 0; + width: 3em; +} + +.group-openall { + font-size: var(--group-openall-size); } .group-body { diff --git a/src/css/header.css b/src/css/header.css index 9c86f34c..9777528d 100755 --- a/src/css/header.css +++ b/src/css/header.css @@ -192,17 +192,6 @@ position: relative; } -.header-item-menu-baseline-alignment-character { - width: 0; - opacity: 0; - pointer-events: none; - visibility: hidden; - padding: 0; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - .header-item-body { display: flex; align-items: center; diff --git a/src/css/utilities.css b/src/css/utilities.css index b3e38ee4..ff740d65 100755 --- a/src/css/utilities.css +++ b/src/css/utilities.css @@ -64,3 +64,14 @@ flex-wrap: nowrap; align-items: center; } + +.baseline-alignment-icon-character { + width: 0; + opacity: 0; + pointer-events: none; + visibility: hidden; + padding: 0; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/src/css/variables.css b/src/css/variables.css index 92f36f2a..8b84b5b8 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -90,6 +90,7 @@ --header-transitional-size: 1em; /* group */ --group-name-size: 1em; + --group-openall-size: 1em; --group-border: 0; /* link */ --link-area-width: 100%; diff --git a/src/html/menu/menu-content/groups.html b/src/html/menu/menu-content/groups.html index ee90aca6..020e1252 100644 --- a/src/html/menu/menu-content/groups.html +++ b/src/html/menu/menu-content/groups.html @@ -1,4 +1,35 @@ -
+ + +
+
+

Open all Bookmarks

+
+
-
- -
-
-
-
- - -
-
- - -
-
- - + + +
+
+
+
+ +
+ + +
-
-

Effects may not be visible if the Group Name is not shown.

+
+
+ +
+
+ + +
+
+ +
diff --git a/src/html/menu/menu-content/header.html b/src/html/menu/menu-content/header.html index 6a6fdebf..bd562238 100644 --- a/src/html/menu/menu-content/header.html +++ b/src/html/menu/menu-content/header.html @@ -508,7 +508,9 @@
- +
+ +
@@ -629,7 +631,9 @@
- +
+ +
@@ -678,7 +682,9 @@
- +
+ +
@@ -713,7 +719,9 @@

Settings menu

- +
+ +
diff --git a/src/html/menu/menu-nav.html b/src/html/menu/menu-nav.html index cda46cc5..8f0f9f96 100644 --- a/src/html/menu/menu-nav.html +++ b/src/html/menu/menu-nav.html @@ -31,6 +31,7 @@
+ Area Names Order Border diff --git a/src/js/control.js b/src/js/control.js index acac8155..6b8c42b2 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -2857,6 +2857,27 @@ var control = (function() { func: function() { render.class(); } + }, { + element: ".control-group-area-justify-left", + path: "group.area.justify", + type: "radio", + func: function() { + render.class(); + } + }, { + element: ".control-group-area-justify-center", + path: "group.area.justify", + type: "radio", + func: function() { + render.class(); + } + }, { + element: ".control-group-area-justify-right", + path: "group.area.justify", + type: "radio", + func: function() { + render.class(); + } }, { element: ".control-group-name-show", path: "group.name.show", @@ -2922,7 +2943,7 @@ var control = (function() { } }], func: function() { - link.render.group.size(); + link.render.group.name.size(); } }, { element: ".control-group-name-size-number", @@ -2941,7 +2962,7 @@ var control = (function() { valueConvert: ["float"] }], func: function() { - link.render.group.size(); + link.render.group.name.size(); } }, { element: ".control-group-name-size-default", @@ -2957,30 +2978,127 @@ var control = (function() { }], func: function() { mod.default("group.name.size"); - link.render.group.size(); + link.render.group.name.size(); render.update.control.header(); render.update.control.menu(); } }, { - element: ".control-group-area-justify-left", - path: "group.area.justify", - type: "radio", + element: ".control-group-openall-show", + path: "group.openAll.show", + type: "checkbox", func: function() { + link.groupAndItems(); render.class(); + render.dependents(); } }, { - element: ".control-group-area-justify-center", - path: "group.area.justify", - type: "radio", + element: ".control-group-openall-size-range", + path: "group.openAll.size", + type: "range", + valueConvert: ["float"], + valueModify: { + min: 10, + max: 500, + step: 10 + }, + mirrorElement: [{ + element: ".control-group-openall-size-number", + path: "group.openAll.size", + type: "number", + valueConvert: ["float"] + }], + additionalEvents: [{ + event: "input", + func: function() { + edge.box.open({ + element: helper.e(".group-openall"), + }); + } + }, { + event: "mousedown", + func: function() { + edge.box.open({ + element: helper.e(".group-openall"), + }); + } + }, { + event: "mouseup", + func: function() { + edge.box.close(); + } + }, { + event: "touchend", + func: function() { + edge.box.close(); + } + }, { + event: "keydown", + func: function() { + if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) { + edge.box.open({ + element: ".header-item-coloraccent", + }); + }; + } + }, { + event: "keyup", + func: function() { + edge.box.close(); + } + }], func: function() { - render.class(); + link.render.group.openall.size(); } }, { - element: ".control-group-area-justify-right", - path: "group.area.justify", + element: ".control-group-openall-size-number", + path: "group.openAll.size", + type: "number", + valueConvert: ["float"], + valueModify: { + min: 10, + max: 500, + step: 10 + }, + mirrorElement: [{ + element: ".control-group-openall-size-range", + path: "group.openAll.size", + type: "range", + valueConvert: ["float"] + }], + func: function() { + link.render.group.openall.size(); + } + }, { + element: ".control-group-openall-size-default", + type: "button", + additionalEvents: [{ + event: "click", + func: function() { + edge.box.open({ + element: helper.e(".group-openall"), + delay: 500 + }); + } + }], + func: function() { + mod.default("group.openAll.size"); + link.render.group.openall.size(); + render.update.control.header(); + render.update.control.menu(); + } + }, { + element: ".control-group-openall-style-box", + path: "group.openAll.style", type: "radio", func: function() { - render.class(); + link.groupAndItems(); + } + }, { + element: ".control-group-openall-style-clear", + path: "group.openAll.style", + type: "radio", + func: function() { + link.groupAndItems(); } }, { element: ".control-group-order-headerbody", @@ -6199,6 +6317,15 @@ var control = (function() { }, 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", @@ -6427,6 +6554,7 @@ var control = (function() { 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); @@ -6898,6 +7026,21 @@ var control = (function() { ".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() { diff --git a/src/js/header.js b/src/js/header.js index 774ed1f5..a0000898 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -440,7 +440,7 @@ var header = (function() { }, menu: function() { var button = helper.node("button|class:control-menu-open button,tabindex:1"); - var baselineAlignmentCharacter = helper.node("span:-|class:header-item-menu-baseline-alignment-character,aria-hidden:true"); + var baselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true"); var buttonIcon = helper.node("span|class:icon-settings"); if (state.get.current().header.menu.style == "clear") { helper.addClass(button, "button-link"); diff --git a/src/js/link.js b/src/js/link.js index 01d99f20..0e78bec9 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -366,9 +366,17 @@ var link = (function() { render.group = { area: function() { + var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); + var group = helper.node("div|class:group"); var groupHeader = helper.node("div|class:group-header"); + var groupHeaderItemControl = helper.node("div|class:group-header-item group-header-item-control"); + var groupHeaderItemName = helper.node("div|class:group-header-item group-header-item-name"); + var groupHeaderItemOpenall = helper.node("div|class:group-header-item group-header-item-openall"); + + var groupBody = helper.node("div|class:group-body"); + var groupName = helper.node("div|class:group-name"); var groupNameText = helper.makeNode({ tag: "h1", @@ -378,67 +386,104 @@ var link = (function() { value: "group-name-text" }] }); + groupName.appendChild(groupNameText); + groupHeaderItemName.appendChild(groupName); + var groupControl = helper.node("div|class:group-control form-group"); - groupHeader.appendChild(groupControl); - group.appendChild(groupHeader); - if (state.get.current().group.name.show) { - groupName.appendChild(groupNameText); - groupHeader.appendChild(groupName); - }; + var groupControlItemUp = helper.node("button|class:button group-control-item group-control-item-up,tabindex:-1,title:Move this group up"); + var groupControlItemUpIcon = helper.node("span|class:icon-arrow-up"); + var groupControlItemUpBaselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true"); + groupControlItemUp.appendChild(groupControlItemUpBaselineAlignmentCharacter); + groupControlItemUp.appendChild(groupControlItemUpIcon); + groupControl.appendChild(groupControlItemUp); - var groupBody = helper.node("div|class:group-body"); - group.appendChild(groupBody); + var groupControlItemHandle = helper.node("div|class:button group-control-item group-control-item-handle,tabindex:-1,title:Drag group to reorder"); + var groupControlItemHandleIcon = helper.node("span|class:icon-reorder"); + var groupControlItemHandleBaselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true"); + groupControlItemHandle.appendChild(groupControlItemHandleBaselineAlignmentCharacter); + groupControlItemHandle.appendChild(groupControlItemHandleIcon); + groupControl.appendChild(groupControlItemHandle); - var itemGroupControlItemUp = helper.node("button|class:button button-small group-control-item group-control-item-up,tabindex:-1,title:Move this group up"); - var itemGroupControlItemUpIcon = helper.node("span|class:button-icon icon-arrow-up"); - itemGroupControlItemUp.appendChild(itemGroupControlItemUpIcon); - groupControl.appendChild(itemGroupControlItemUp); + var groupControlItemDown = helper.node("button|class:button group-control-item group-control-item-down,tabindex:-1,title:Move this group down"); + var groupControlItemDownIcon = helper.node("span|class:icon-arrow-down"); + var groupControlItemDownBaselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true"); + groupControlItemDown.appendChild(groupControlItemDownBaselineAlignmentCharacter); + groupControlItemDown.appendChild(groupControlItemDownIcon); + groupControl.appendChild(groupControlItemDown); - var itemGroupControlItemHandle = helper.node("div|class:button button-small group-control-item group-control-item-handle,tabindex:-1,title:Drag group to reorder"); - var itemGroupControlItemHandleIcon = helper.node("span|class:button-icon icon-reorder"); - itemGroupControlItemHandle.appendChild(itemGroupControlItemHandleIcon); - groupControl.appendChild(itemGroupControlItemHandle); + var groupControlItemEdit = helper.node("button|class:button group-control-item group-control-item-edit,tabindex:-1,title:Edit this group"); + var groupControlItemEditIcon = helper.node("span|class:icon-edit"); + var groupControlItemEditBaselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true"); + groupControlItemEdit.appendChild(groupControlItemEditBaselineAlignmentCharacter); + groupControlItemEdit.appendChild(groupControlItemEditIcon); + groupControl.appendChild(groupControlItemEdit); - var itemGroupControlItemDown = helper.node("button|class:button button-small group-control-item group-control-item-down,tabindex:-1,title:Move this group down"); - var itemGroupControlItemDownIcon = helper.node("span|class:button-icon icon-arrow-down"); - itemGroupControlItemDown.appendChild(itemGroupControlItemDownIcon); - groupControl.appendChild(itemGroupControlItemDown); - - var itemGroupControlItemEdit = helper.node("button|class:button button-small group-control-item group-control-item-edit,tabindex:-1,title:Edit this group"); - var itemGroupControlItemEditIcon = helper.node("span|class:button-icon icon-edit"); - itemGroupControlItemEdit.appendChild(itemGroupControlItemEditIcon); - groupControl.appendChild(itemGroupControlItemEdit); - - var itemGroupControlItemRemove = helper.node("button|class:button button-small group-control-item group-control-item-remove,tabindex:-1,title:Remove this group"); - var itemGroupControlItemRemoveIcon = helper.node("span|class:button-icon icon-close"); - itemGroupControlItemRemove.appendChild(itemGroupControlItemRemoveIcon); - groupControl.appendChild(itemGroupControlItemRemove); + var groupControlItemRemove = helper.node("button|class:button group-control-item group-control-item-remove,tabindex:-1,title:Remove this group"); + var groupControlItemRemoveIcon = helper.node("span|class:icon-close"); + var groupControlItemRemoveBaselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true"); + groupControlItemRemove.appendChild(groupControlItemRemoveBaselineAlignmentCharacter); + groupControlItemRemove.appendChild(groupControlItemRemoveIcon); + groupControl.appendChild(groupControlItemRemove); if (state.get.current().search) { - itemGroupControlItemUp.disabled = true; - helper.addClass(itemGroupControlItemHandle, "disabled"); - itemGroupControlItemDown.disabled = true; + groupControlItemUp.disabled = true; + helper.addClass(groupControlItemHandle, "disabled"); + groupControlItemDown.disabled = true; }; - var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup)); + groupHeaderItemControl.appendChild(groupControl); - itemGroupControlItemUp.addEventListener("click", function(event) { + groupControlItemUp.addEventListener("click", function(event) { render.move.group.up(copyStagedGroup); }, false); - itemGroupControlItemDown.addEventListener("click", function() { + groupControlItemDown.addEventListener("click", function() { render.move.group.down(copyStagedGroup); }, false); - itemGroupControlItemEdit.addEventListener("click", function() { + groupControlItemEdit.addEventListener("click", function() { edit.group.open(copyStagedGroup); }, false); - itemGroupControlItemRemove.addEventListener("click", function() { + groupControlItemRemove.addEventListener("click", 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() { + console.log(copyStagedGroup.group.items); + copyStagedGroup.group.items.forEach(function(arrayItem, index) { + chrome.tabs.create({ + url: arrayItem.url + }); + }) + }); + + groupHeaderItemOpenall.appendChild(groupOpenall); + + groupHeader.appendChild(groupHeaderItemControl); + if (state.get.current().group.name.show) { + groupHeader.appendChild(groupHeaderItemName); + }; + if (state.get.current().group.openAll.show && stagedGroup.group.items.length > 0) { + groupHeader.appendChild(groupHeaderItemOpenall); + }; + group.appendChild(groupHeader); + group.appendChild(groupBody); + return group; }, form: function(override) { @@ -524,9 +569,17 @@ var link = (function() { return form; }, - size: function() { - var html = helper.e("html"); - html.style.setProperty("--group-name-size", state.get.current().group.name.size + "em"); + name: { + size: function() { + var html = helper.e("html"); + html.style.setProperty("--group-name-size", state.get.current().group.name.size + "em"); + } + }, + openall: { + size: function() { + var html = helper.e("html"); + html.style.setProperty("--group-openall-size", state.get.current().group.openAll.size + "em"); + } }, border: function() { var html = helper.e("html"); @@ -1811,7 +1864,8 @@ var link = (function() { mod.add.item.close(); mod.add.group.close(); groupAndItems(); - render.group.size(); + render.group.name.size(); + render.group.openall.size(); render.group.border(); render.item.color.custom(); render.item.size(); diff --git a/src/js/state.js b/src/js/state.js index 43fc7987..8f60a819 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -230,6 +230,11 @@ var state = (function() { show: true, size: 1 }, + openAll: { + show: true, + size: 1, + style: "box" + }, border: 0, order: "headerbody", add: false, @@ -405,6 +410,9 @@ var state = (function() { name: { size: 1 }, + openAll: { + size: 1 + }, border: 0 }, layout: { diff --git a/src/js/update.js b/src/js/update.js index 3e5cde76..00818453 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -865,6 +865,14 @@ var update = (function() { "4.41.0": function(data) { data.state.header.search.newTab = false; return data; + }, + "4.42.0": function(data) { + data.state.group.openAll = { + show: true, + size: 1, + style: "box" + }; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index fa9ee8e2..69f5705a 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.41.0"; + var current = "4.42.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index c0d8dad0..91895c81 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.41.0", + "version": "4.42.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"