diff --git a/package-lock.json b/package-lock.json index bb3d0566..58b9ea1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "7.0.2", + "version": "7.1.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 9cae5814..9a39352b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "7.0.2", + "version": "7.1.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/component/bookmark/index.css b/src/component/bookmark/index.css index de45c4bc..1505fd9e 100644 --- a/src/component/bookmark/index.css +++ b/src/component/bookmark/index.css @@ -84,12 +84,25 @@ .bookmark-group { width: 100%; display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; gap: calc(var(--layout-space) * var(--layout-padding)); align-items: stretch; justify-content: stretch; } +.is-group-area-justify-left .bookmark-group { + justify-content: flex-start; +} + +.is-group-area-justify-center .bookmark-group { + justify-content: center; +} + +.is-group-area-justify-right .bookmark-group { + justify-content: flex-end; +} + .bookmark { font-size: 1em; position: relative; diff --git a/src/component/bookmarkEmpty/index.css b/src/component/bookmarkEmpty/index.css index e21bf7c3..752d2e82 100644 --- a/src/component/bookmarkEmpty/index.css +++ b/src/component/bookmarkEmpty/index.css @@ -10,6 +10,7 @@ justify-content: center; align-items: center; flex-wrap: wrap; + width: 100%; } .bookmark-empty-headline:not(:last-child) { diff --git a/src/component/bookmarkPreset/index.js b/src/component/bookmarkPreset/index.js index aa464872..7f8cfd96 100644 --- a/src/component/bookmarkPreset/index.js +++ b/src/component/bookmarkPreset/index.js @@ -3,7 +3,8 @@ bookmarkPreset.get = () => { return [{ name: { text: 'Cool stuff', show: true }, - openAll: { show: true }, + collapse: false, + toolbar: { openAll: { show: true }, collapse: { show: true } }, items: [{ url: 'https://zombiefox.github.io/awesomeSheet/', display: { @@ -115,7 +116,8 @@ }] }, { name: { text: 'Dev sites', show: true }, - openAll: { show: true }, + collapse: false, + toolbar: { openAll: { show: true }, collapse: { show: true } }, items: [{ url: 'https://devdocs.io/', display: { diff --git a/src/component/bookmarkTile/index.js b/src/component/bookmarkTile/index.js index 458dd7e2..029225f1 100644 --- a/src/component/bookmarkTile/index.js +++ b/src/component/bookmarkTile/index.js @@ -483,11 +483,13 @@ const BookmarkTile = function({ this.element.content.background.wrap.appendChild(this.element.content.background.video); if (isValidString(bookmarkData.link.background.video.url)) { - const backgroundVideoElement = new Video({ + + this.video = new Video({ url: bookmarkData.link.background.video.url }); - this.element.content.background.video.appendChild(backgroundVideoElement.video); + this.element.content.background.video.appendChild(this.video.video); + }; break; @@ -547,6 +549,8 @@ const BookmarkTile = function({ }; + this.video = false; + this.assemble(); this.style(); diff --git a/src/component/customThemeTile/index.js b/src/component/customThemeTile/index.js index af8cbbaf..dcc667ad 100644 --- a/src/component/customThemeTile/index.js +++ b/src/component/customThemeTile/index.js @@ -198,7 +198,7 @@ export const CustomThemeTile = function({ themeSetting.control.opacity.search.update(); - themeSetting.control.opacity.openAll.update(); + themeSetting.control.opacity.group.toolbar.update(); themeSetting.disable(); @@ -279,7 +279,7 @@ export const CustomThemeTile = function({ 'theme.bookmark.color.opacity', 'theme.bookmark.item.opacity', 'theme.toolbar.opacity', - 'theme.group.openAll.opacity' + 'theme.group.toolbar.opacity' ]); applyCSSClass([ diff --git a/src/component/group/index.css b/src/component/group/index.css index cd41ea99..b9183025 100644 --- a/src/component/group/index.css +++ b/src/component/group/index.css @@ -15,6 +15,10 @@ transition: gap var(--layout-transition-extra-fast) var(--layout-duration-04); } +.is-group-collapse.group { + width: initial; +} + .is-group-order-header-body .group { flex-direction: column; } @@ -28,7 +32,7 @@ } .group.is-group-header, -.group.is-group-open-all { +.group.is-group-toolbar { gap: calc(var(--layout-space) * var(--layout-gutter)); } @@ -94,6 +98,10 @@ grid-auto-flow: dense; } +.is-group-collapse .group-body { + display: none; +} + .group-control { margin-left: calc(calc(var(--layout-space) * var(--layout-gutter)) * -1); height: 0; @@ -129,21 +137,29 @@ transition: width var(--layout-transition-extra-fast); } -.group-control-open-all { - font-size: calc(calc(var(--group-openall-size) / 10) * 0.1em); +.group-toolbar-button { + font-size: calc(calc(var(--group-toolbar-size) / 10) * 0.1em); } -.group-control-open-all { - background-color: hsl(var(--button-background), calc(var(--theme-group-openall-opacity) / 100)); +.group-toolbar-button { + background-color: hsl(var(--button-background), calc(var(--theme-group-toolbar-opacity) / 100)); } -.group-control-open-all:focus, -.group-control-open-all:hover { - background-color: hsl(var(--button-background-focus-hover), calc(var(--theme-group-openall-opacity) / 100)); +.group-toolbar-button:focus, +.group-toolbar-button:hover { + background-color: hsl(var(--button-background-focus-hover), calc(var(--theme-group-toolbar-opacity) / 100)); } -.group-control-open-all:active { - background-color: hsl(var(--button-background-active), calc(var(--theme-group-openall-opacity) / 100)); +.group-toolbar-button:active { + background-color: hsl(var(--button-background-active), calc(var(--theme-group-toolbar-opacity) / 100)); +} + +.group-toolbar-collapse .icon { + transition: transform var(--layout-transition-fast); +} + +.is-group-collapse .group-toolbar-collapse .icon { + transform: rotate(180deg); } .group-sort-placeholder { @@ -160,21 +176,21 @@ box-shadow: var(--edge-on-accent); } -.is-group-open-all-opacity-low .group-control-open-all { +.is-group-toolbar-opacity-low .group-toolbar-button { --button-text: var(--theme-primary-text-010); --button-text-focus-hover: var(--theme-primary-text-010); --button-text-active: var(--theme-primary-text-010); --button-text-disabled: var(--theme-primary-010); } -.is-group-open-all-opacity-low.is-theme-background-type-accent .group-control-open-all { +.is-group-toolbar-opacity-low.is-theme-background-type-accent .group-toolbar-button { --button-text: var(--theme-accent-text); --button-text-focus-hover: var(--theme-accent-text); --button-text-active: var(--theme-accent-text); --button-text-disabled: var(--theme-accent-text); } -.is-group-open-all-opacity-low.is-theme-background-type-color .group-control-open-all { +.is-group-toolbar-opacity-low.is-theme-background-type-color .group-toolbar-button { --button-text: var(--theme-background-color-text); --button-text-focus-hover: var(--theme-background-color-text); --button-text-active: var(--theme-background-color-text); diff --git a/src/component/group/index.js b/src/component/group/index.js index 157b7871..814c14cc 100644 --- a/src/component/group/index.js +++ b/src/component/group/index.js @@ -299,7 +299,7 @@ group.sort = { group.init = () => { applyCSSVar([ 'group.name.size', - 'group.openAll.size' + 'group.toolbar.size' ]); applyCSSClass([ 'group.area.justify', diff --git a/src/component/groupArea/index.js b/src/component/groupArea/index.js index 4a3c1ad6..1c43598a 100644 --- a/src/component/groupArea/index.js +++ b/src/component/groupArea/index.js @@ -32,6 +32,10 @@ export const GroupArea = function({ control: node('div|class:group-control'), group: node('div|class:group-control-group form-group form-group-horizontal') }, + toolbar: { + toolbar: node('div|class:group-toolbar'), + group: node('div|class:group-toolbar-group form-group form-group-horizontal') + }, body: node('div|class:group-body') }; @@ -166,10 +170,12 @@ export const GroupArea = function({ this.openAll = { button: new Button({ - text: 'Open all', + text: 'Open all Bookmarks in ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'), style: ['line'], - title: 'Open all Bookmarks in this Group', - classList: ['group-control-button', 'group-control-open-all'], + title: 'Open all Bookmarks in ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'), + srOnly: true, + iconName: 'openAll', + classList: ['group-toolbar-button', 'group-toolbar-open-all'], func: () => { this.openAll.open(); } @@ -197,14 +203,57 @@ export const GroupArea = function({ } }; + this.collapse = { + button: new Button({ + text: 'Collapse ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'), + style: ['line'], + title: 'Collapse ' + (isValidString(groupData.group.name.text) ? groupData.group.name.text : 'this Group'), + srOnly: true, + iconName: 'arrowKeyboardUp', + classList: ['group-toolbar-button', 'group-toolbar-collapse'], + func: () => { + this.collapse.toggle(); + this.collapse.video(); + this.update.style(); + data.save(); + } + }), + toggle: () => { + + if (groupData.group.collapse) { + groupData.group.collapse = false; + } else { + groupData.group.collapse = true; + }; + + }, + video: () => { + + if (bookmark.tile.current.length > 0) { + bookmark.tile.current.forEach((item, i) => { + + if (item.video) { + if (groupData.group.collapse) { + item.video.pause(); + } else { + item.video.play(); + }; + }; + + }); + }; + + } + }; + this.style = () => { if (groupData.group.name.show && isValidString(groupData.group.name.text)) { this.element.group.classList.add('is-group-header'); }; - if (groupData.group.openAll.show && groupData.group.items.length > 0) { - this.element.group.classList.add('is-group-open-all'); + if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) { + this.element.group.classList.add('is-group-toolbar'); }; }; @@ -267,8 +316,20 @@ export const GroupArea = function({ this.element.header.appendChild(this.element.name.name); }; - if (groupData.group.openAll.show && groupData.group.items.length > 0) { - this.element.header.appendChild(this.openAll.button.button); + if (groupData.group.toolbar.collapse.show) { + this.element.toolbar.group.appendChild(this.collapse.button.button); + }; + + if (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0) { + this.element.toolbar.group.appendChild(this.openAll.button.button); + }; + + if (groupData.group.toolbar.collapse.show || (groupData.group.toolbar.openAll.show && groupData.group.items.length > 0)) { + + this.element.toolbar.toolbar.appendChild(this.element.toolbar.group); + + this.element.header.appendChild(this.element.toolbar.toolbar); + }; this.element.group.appendChild(this.element.header); @@ -303,13 +364,31 @@ export const GroupArea = function({ const html = document.querySelector('html'); - if (state.get.current().theme.group.openAll.opacity < 40) { + if (state.get.current().theme.group.toolbar.opacity < 40) { - html.classList.add('is-group-open-all-opacity-low'); + html.classList.add('is-group-toolbar-opacity-low'); + + this.openAll.button.style.update(['link']); + + this.collapse.button.style.update(['link']); } else { - html.classList.remove('is-group-open-all-opacity-low'); + html.classList.remove('is-group-toolbar-opacity-low'); + + this.openAll.button.style.update(['line']); + + this.collapse.button.style.update(['line']); + + }; + + if (groupData.group.collapse) { + + this.element.group.classList.add('is-group-collapse'); + + } else { + + this.element.group.classList.remove('is-group-collapse'); }; diff --git a/src/component/groupDefault/index.js b/src/component/groupDefault/index.js index 43579e1b..0029d3a8 100644 --- a/src/component/groupDefault/index.js +++ b/src/component/groupDefault/index.js @@ -1,5 +1,6 @@ export const groupDefault = { name: { text: '', show: true }, - openAll: { show: true }, + collapse: false, + toolbar: { size: 100, openAll: { show: true }, collapse: { show: true } }, items: [] }; diff --git a/src/component/groupForm/index.js b/src/component/groupForm/index.js index c7ad0b8d..b9e6931c 100644 --- a/src/component/groupForm/index.js +++ b/src/component/groupForm/index.js @@ -104,15 +104,24 @@ export const GroupForm = function({ } }) }, + collapse: { + show: new Control_checkbox({ + object: groupData.group, + path: 'toolbar.collapse.show', + id: 'toolbar-collapse-show', + labelText: 'Show Collapse', + description: 'The Collapse button will show or hide the Bookmaks in this Group.' + }) + }, openAll: { show: new Control_checkbox({ object: groupData.group, - path: 'openAll.show', - id: 'openAll-show', + path: 'toolbar.openAll.show', + id: 'toolbar-openAll-show', labelText: 'Show Open all', description: 'Open all button will appear if there is at least one Bookmark in this Group.' }) - }, + } }; this.control.destination = new Control_select({ @@ -184,14 +193,15 @@ export const GroupForm = function({ children: [ form.wrap({ children: [ - node('h2:Open all|class:mb-2'), - node('p:Display a button to open all Bookmarks in this Group.|class:mb-5') + node('h2:Toolbar|class:mb-2'), + node('p:Display controls to open all or show/hide the Bookmarks in this Group.|class:mb-5') ] }), form.wrap({ children: [ form.indent({ children: [ + this.control.group.collapse.show.wrap(), this.control.group.openAll.show.wrap() ] }) diff --git a/src/component/icon/index.js b/src/component/icon/index.js index f70794b6..a0da17aa 100644 --- a/src/component/icon/index.js +++ b/src/component/icon/index.js @@ -102,6 +102,12 @@ icon.all = { }, random: { path: 'M10.59 9.17L5.41 4L4 5.41L9.17 10.58L10.59 9.17ZM14.5 4L16.54 6.04L4 18.59L5.41 20L17.96 7.46L20 9.5V4H14.5ZM14.83 13.41L13.42 14.82L16.55 17.95L14.5 20H20V14.5L17.96 16.54L14.83 13.41V13.41Z' + }, + tab: { + path: 'M0 0h24v24H0V0zm0 0h24v24H0V0z M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/>