holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rename bodybackground to dummy, fix swipe event bug, improve transition of lazy loading

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-13 13:01:39 +08:00
parent f0e192f14d
commit 420c498723
5 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/body-background.css
View File

@ -1,6 +1,6 @@
/*Filter for body's lazy loaded background */
#bodyBackground {
#dummyBodyBackground {
background: var(--base-body-bg);
position: absolute;
top: 0;
@ -13,7 +13,11 @@
transition: all 3s;
}
.blurFiltered {
.dummyBackgroundBlur {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.dummyBackgroundHide {
opacity: 0;
}

2
index.html
View File

@ -34,7 +34,7 @@
<body>
<!-- The place where we set the DUMMY background/image -->
<div id='bodyBackground'></div>
<div id='dummyBodyBackground'></div>
<div class='bar' id='topPanel'>
<div id='clock'></div>

14
js/body-background-set.js
View File

@ -1,11 +1,11 @@
class BodyBackground {
class DummyBodyBackground {
constructor() {
this._body = document.body;
this._bodyBackground = document.querySelector('#bodyBackground');
this._dummyBodyBackground = document.querySelector('#dummyBodyBackground');
this._bodyStyle = this._body.style;
this._bodyBackgroundStyle = this._bodyBackground.style;
this._dummyBodyBackgroundStyle = this._dummyBodyBackground.style;
this._hqBackground = document.createElement('img');
@ -24,10 +24,10 @@ class BodyBackground {
_lazyLoadBackground = fileName => {
// Add a class to blur the dummy background
this._bodyBackground.classList.add('blurFiltered');
this._dummyBodyBackground.classList.add('dummyBackgroundBlur');
// Set a low quality background image for the dummy background
this._styleBodyBackgrond(this._bodyBackgroundStyle, `url('assets/backgrounds/${fileName}-low.webp')`);
this._styleBodyBackgrond(this._dummyBodyBackgroundStyle, `url('assets/backgrounds/${fileName}-low.webp')`);
// After loading/fetching the _hqBackground's background image
this._hqBackground.onload = () => {
@ -39,10 +39,10 @@ class BodyBackground {
setTimeout (
() => {
// Hide the dummy background
this._bodyBackgroundStyle.display = 'none';
this._dummyBodyBackground.classList.add('dummyBackgroundHide');
// Remove class to unblur
this._bodyBackground.classList.remove('blurFiltered');
this._dummyBodyBackground.classList.remove('dummyBackgroundBlur');
},
3000

2
js/mobile-swipe-callback.js
View File

@ -63,7 +63,7 @@ class SwipeEventCallbacks extends SwipeEventManager {
// Assign swipe callback for each IDs
_createSwipeEvents = () => {
this.swipeEvent('bodyBackground', this._bodyBackgroundSwipeEvent);
this.swipeEvent('dummyBodyBackground', this._bodyBackgroundSwipeEvent);
this.swipeEvent('rightDashboard', this._rightDashboardSwipeEvent);

4
js/script.js
View File

@ -1,8 +1,8 @@
// Instantiate config
const config = new Config();
// Instantiate background setter
const bodyBackground = new BodyBackground();
// Instantiate dummy background setter
const dummyBodyBackground = new DummyBodyBackground();
// Instantiate a clock object
const clock = new Clock();