From f9183a47dbfaaaa56bfcb96af0053b2ec84f645b Mon Sep 17 00:00:00 2001 From: Kuldeep M Date: Sun, 5 Dec 2021 23:24:44 +0000 Subject: [PATCH] add overscroll unblur controls --- package-lock.json | 2 +- package.json | 2 +- src/component/layout/index.css | 8 ++- src/component/layout/index.js | 61 ++++++++++++++++++- .../menuContent/layoutSetting/index.js | 60 ++++++++++++++---- src/component/state/index.js | 4 +- src/component/theme/index.css | 6 +- src/component/theme/index.js | 3 +- src/component/update/index.js | 16 ++++- src/component/version/index.js | 2 +- src/manifest.json | 2 +- 11 files changed, 136 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 01aab85f..a13c6640 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "7.3.0", + "version": "7.4.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index f60658d2..bb9960ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "7.3.0", + "version": "7.4.0", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks with nightTab.", "main": "index.js", "scripts": { diff --git a/src/component/layout/index.css b/src/component/layout/index.css index 68298dd1..d4914000 100644 --- a/src/component/layout/index.css +++ b/src/component/layout/index.css @@ -7,6 +7,10 @@ --layout-line-width: 0.25em; } +:root { + --layout-overscroll: 75; +} + :root { --layout-duration-01: 0.1s; --layout-duration-02: 0.2s; @@ -188,8 +192,8 @@ margin-right: calc((var(--layout-space) * var(--layout-padding)) * -1); } -.is-layout-overscroll body { - margin-bottom: 75vh; +.is-layout-overscroll-active body { + margin-bottom: calc(var(--layout-overscroll) * 1vh); } html.is-layout-scrollbar-auto, diff --git a/src/component/layout/index.js b/src/component/layout/index.js index 3cd99b8e..55e6a2ef 100644 --- a/src/component/layout/index.js +++ b/src/component/layout/index.js @@ -34,7 +34,7 @@ layout.area = { let breakpoint; - entries.forEach(function (entry) { + entries.forEach(function(entry) { if (entry.contentRect.width <= size.sm) { breakpoint = 'xs'; @@ -174,6 +174,60 @@ layout.breakpoint = { } }; +layout.overscroll = { + bind: () => { + + if (state.get.current().layout.overscroll.unblur) { + + window.addEventListener('scroll', layout.overscroll.unblur); + + } else { + + window.removeEventListener('scroll', layout.overscroll.unblur); + + } + + }, + unblur: () => { + + const html = document.querySelector('html'); + + const body = document.querySelector('body'); + + const overscrollHeight = parseInt(window.innerHeight * (parseFloat(getComputedStyle(html).getPropertyValue('--layout-overscroll'), 10) / 100), 10); + + const bottomOfBody = (window.scrollY + window.innerHeight) - body.offsetHeight; // height of body not including the margin when scroll past end is true + + if (body.offsetHeight < (window.scrollY + window.innerHeight)) { + + switch (state.get.current().theme.background.type) { + + case 'image': + + html.style.setProperty('--theme-background-image-blur', parseInt(state.get.current().theme.background.image.blur - ((parseInt(((bottomOfBody) / overscrollHeight) * 100, 10) / 100) * state.get.current().theme.background.image.blur), 10)); + + break; + + case 'video': + + html.style.setProperty('--theme-background-video-blur', parseInt(state.get.current().theme.background.video.blur - ((parseInt(((bottomOfBody) / overscrollHeight) * 100, 10) / 100) * state.get.current().theme.background.video.blur), 10)); + + break; + + } + + } else { + + applyCSSVar([ + 'theme.background.image.blur', + 'theme.background.video.blur' + ]); + + } + + } +}; + layout.title = { render: () => { @@ -228,11 +282,12 @@ layout.init = () => { 'layout.scrollbar' ]); applyCSSState([ - 'layout.overscroll' + 'layout.overscroll.active' ]); layout.area.render(); layout.title.render(); layout.favicon.render(); + layout.overscroll.bind(); }; -export { layout }; +export { layout }; \ No newline at end of file diff --git a/src/component/menuContent/layoutSetting/index.js b/src/component/menuContent/layoutSetting/index.js index c1e141c8..cc103e7c 100644 --- a/src/component/menuContent/layoutSetting/index.js +++ b/src/component/menuContent/layoutSetting/index.js @@ -3,6 +3,7 @@ import { data } from '../../data'; import { header } from '../../header'; import { bookmark } from '../../bookmark'; import { layout } from '../../layout'; +import { theme } from '../../theme'; import * as form from '../../form'; @@ -84,6 +85,12 @@ layoutSetting.disable = () => { } + if (state.get.current().layout.overscroll.active) { + layoutSetting.control.page.overscroll.unblur.enable(); + } else { + layoutSetting.control.page.overscroll.unblur.disable(); + } + }; layoutSetting.edge = { @@ -467,16 +474,36 @@ layoutSetting.page = (parent) => { text: ['Not supported by all browsers.'] }); - layoutSetting.control.page.overscroll = new Control_checkbox({ - object: state.get.current(), - path: 'layout.overscroll', - id: 'layout-overscroll', - labelText: 'Scroll past end', - action: () => { - applyCSSState('layout.overscroll'); - data.save(); - } - }); + layoutSetting.control.page.overscroll = { + active: new Control_checkbox({ + object: state.get.current(), + path: 'layout.overscroll.active', + id: 'layout-overscroll-active', + labelText: 'Scroll past end', + action: () => { + applyCSSState('layout.overscroll.active'); + layoutSetting.disable(); + data.save(); + } + }), + unblur: new Control_checkbox({ + object: state.get.current(), + path: 'layout.overscroll.unblur', + id: 'layout-overscroll-unblur-background', + labelText: 'Unblur background image or video', + description: [ + 'Background image or video will unblur when scrolled to the bottom of the page.', + 'Image or video blur can be found under Theme Background.' + ], + action: () => { + theme.background.image.render(); + theme.background.video.clear(); + theme.background.video.render(); + layout.overscroll.bind(); + data.save(); + } + }) + }; parent.appendChild( node('div', [ @@ -487,10 +514,19 @@ layoutSetting.page = (parent) => { layoutSetting.control.page.scrollbar.inline(), layoutSetting.control.page.scrollbarHelper.wrap(), node('hr'), - layoutSetting.control.page.overscroll.wrap() + layoutSetting.control.page.overscroll.active.wrap(), + form.wrap({ + children: [ + form.indent({ + children: [ + layoutSetting.control.page.overscroll.unblur.wrap() + ] + }) + ] + }) ]) ); }; -export { layoutSetting }; +export { layoutSetting }; \ No newline at end of file diff --git a/src/component/state/index.js b/src/component/state/index.js index 49f4a0bd..13b7133c 100644 --- a/src/component/state/index.js +++ b/src/component/state/index.js @@ -19,7 +19,7 @@ state.default = { scrollbar: 'auto', title: '', favicon: '', - overscroll: false + overscroll: { active: false, unblur: false } }, header: { item: { justify: 'left' }, @@ -292,4 +292,4 @@ state.set = { } }; -export { state }; +export { state }; \ No newline at end of file diff --git a/src/component/theme/index.css b/src/component/theme/index.css index ffb6e895..e9dbb970 100644 --- a/src/component/theme/index.css +++ b/src/component/theme/index.css @@ -345,11 +345,11 @@ width: 100%; height: 100%; z-index: 1; - opacity: calc(var(--theme-background-image-opacity) / 100); background-image: var(--theme-background-image); background-attachment: fixed; background-size: cover; background-position: center; + opacity: calc(var(--theme-background-image-opacity) / 100); transform: scale(calc(calc(var(--theme-background-image-scale) / 100) + calc(var(--theme-background-image-blur) / 400))); filter: blur(calc(var(--theme-background-image-blur) * 1px)) grayscale(calc(var(--theme-background-image-grayscale) / 100)); } @@ -385,8 +385,8 @@ height: 100%; z-index: 1; opacity: calc(var(--theme-background-video-opacity) / 100); + transform: scale(calc(calc(var(--theme-background-video-scale) / 100) + calc(var(--theme-background-video-blur) / 400))); filter: blur(calc(var(--theme-background-video-blur) * 1px)) grayscale(calc(var(--theme-background-video-grayscale) / 100)); - transform: scale(calc(var(--theme-background-video-scale) / 100)); } .theme-background-type-video-accent { @@ -426,4 +426,4 @@ .is-theme-background-type-image .theme-background-type-image, .is-theme-background-type-video .theme-background-type-video { opacity: 1; -} +} \ No newline at end of file diff --git a/src/component/theme/index.js b/src/component/theme/index.js index 71d7e1eb..d61d01ef 100644 --- a/src/component/theme/index.js +++ b/src/component/theme/index.js @@ -1,5 +1,6 @@ import { state } from '../state'; import { APP_NAME } from '../../constant'; +import { layout } from '../layout'; import { toolbar } from '../toolbar'; import { bookmark } from '../bookmark'; import { bookmarkDefault } from '../bookmarkDefault'; @@ -542,4 +543,4 @@ theme.init = () => { ]); }; -export { theme }; +export { theme }; \ No newline at end of file diff --git a/src/component/update/index.js b/src/component/update/index.js index 59270036..a854a47f 100644 --- a/src/component/update/index.js +++ b/src/component/update/index.js @@ -6,7 +6,7 @@ const update = {}; update.mod = updateLegacy.get(); -update.mod['7.0.0'] = function (data) { +update.mod['7.0.0'] = function(data) { data.state.header.order.splice(data.state.header.order.indexOf('editAdd'), 1); data.state.header.order.splice(data.state.header.order.indexOf('colorAccent'), 1); @@ -572,7 +572,7 @@ update.mod['7.0.0'] = function (data) { return data; }; -update.mod['7.1.0'] = function (data) { +update.mod['7.1.0'] = function(data) { data.state.layout.favicon = ''; @@ -606,6 +606,16 @@ update.mod['7.1.0'] = function (data) { return data; }; +update.mod['7.4.0'] = function(data) { + + data.state.layout.overscroll = { + active: data.state.layout.overscroll, + unblur: false + }; + + return data; +}; + update.run = (data) => { // loop over all updates in mod.all object @@ -627,4 +637,4 @@ update.run = (data) => { }; -export { update }; +export { update }; \ No newline at end of file diff --git a/src/component/version/index.js b/src/component/version/index.js index ee591455..c850d8a0 100644 --- a/src/component/version/index.js +++ b/src/component/version/index.js @@ -1,6 +1,6 @@ export const version = {}; -version.number = '7.3.0'; +version.number = '7.4.0'; version.name = 'Delightful Komodo Dragon'; diff --git a/src/manifest.json b/src/manifest.json index 8bde8682..e12accd2 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": "7.3.0", + "version": "7.4.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"