add overscroll unblur controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

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": {

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,

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 };

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 };

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 };

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;
-}
+}

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 };

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 };

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';
 

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"