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

2
index.html
View File

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

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

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

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

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

4
js/script.js
View File

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