extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2025-03-14 22:38:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

merge daily wallpaper

Browse Source
This commit is contained in:
windwp 2020-06-16 11:52:11 +07:00
parent 0250bd2163
commit f906a0ac6a
3 changed files with 122 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/theme-engine.css
View File

@ -163,6 +163,18 @@ select::-ms-expand {
width: 25%;
}
.themeEngineCheckBoxGroups{
display: flex;
}
.themeEngineCheckBoxGroups > *{
margin:5px;
}
.themeEngineCheckBox{
width: 18px;
height: 18px;
}
#unsplashKeyword,
#blurSet,
#animSpeedSet {
height: 32px;

2
index.html
View File

@ -187,7 +187,6 @@
<input type='text' class='themeEngineInputs' id='unsplashKeyword' autocomplete='off' placeholder='Unslash search keyword'/>
</div>
</div>
<div class='themeEngineGroups'>
<div class='themeEngineGroups' id='themeEngineBlurStrength'>
<label for='blurSet' class='themeEngineLabels'>Blur Strength in Pixels</label>
@ -290,6 +289,7 @@
<script src='js/config.js'></script>
<script src='js/background-set.js'></script>
<script src='js/daily-background-set.js'></script>
<script src='js/clock.js'></script>
<script src='js/dock-buttons.js'></script>
<script src='js/profile-image.js'></script>

197
js/daily-background-set.js
View File

@ -5,105 +5,126 @@ const DW_KEY_TIME = "dailyWallpaperTime";
const DW_KEY_BG = "dailyWallpaperBG";
const DW_URL = "https://source.unsplash.com/";
var resetTheme = document.getElementById("themeEngineReset");
var backgroundBody = document.getElementById("bodyBackground");
// High quality background, we'll lazy load this
var hqBackground = document.createElement("img");
var dailyWallpaperCheckbox = document.getElementById("dailyWallpaperCheckbox");
var unsplashKeyword = document.getElementById("unsplashKeyword");
var dailySettingGroups = document.getElementById("dailySettingGroups");
// Style body background
class DailyWallpaper {
constructor() {
this._resetTheme = document.getElementById("themeEngineReset");
this._dummyBodyBackground = document.getElementById("dummyBodyBackground");
this._hqBackground = document.createElement("img");
this._dailyWallpaperCheckbox = document.getElementById(
"dailyWallpaperCheckbox"
);
this._unsplashKeyword = document.getElementById("unsplashKeyword");
this._dailySettingGroups = document.getElementById("dailySettingGroups");
this._dummyBodyBackgroundStyle = this._dummyBodyBackground.style;
this._bodyStyle = document.body.style;
const lazyLoadUnSplashBackground = (bgUrl) => {
const styleBodyBackground = (bgBodyStyle) => {
bgBodyStyle.backgroundSize = "cover";
bgBodyStyle.backgroundRepeat = "no-repeat";
bgBodyStyle.backgroundPosition = "center";
bgBodyStyle.backgroundAttachment = "fixed";
this._resetTheme.addEventListener("mouseup", () => {
localStorage.removeItem(DW_KEY_ENABLE);
localStorage.removeItem(DW_KEY_KEYWORD);
localStorage.removeItem(DW_KEY_BG);
localStorage.removeItem(DW_KEY_TIME);
this.dailyWallPaperUI(true);
});
this._dailyWallpaperCheckbox.onchange = (event) => {
localStorage.setItem(DW_KEY_ENABLE, event.target.checked.toString());
this.dailyWallPaperUI();
this.unsplashBGLoad();
};
this._unsplashKeyword.onchange = (event) => {
localStorage.setItem(DW_KEY_KEYWORD, event.target.value);
localStorage.removeItem(DW_KEY_TIME);
this.unsplashBGLoad();
};
this.unsplashBGLoad();
}
_styleBodyBackgrond = (elemStyle, urlStr) => {
elemStyle.background = urlStr;
elemStyle.backgroundSize = "cover";
elemStyle.backgroundRepeat = "no-repeat";
elemStyle.backgroundPosition = "center";
elemStyle.backgroundAttachment = "fixed";
};
// Shorten backgroundBody.style or alias it
var bgBodyStyle = backgroundBody.style;
_lazyLoadBackground = (fileName) => {
// Add a class to blur the dummy background
this._dummyBodyBackground.classList.add("dummyBackgroundBlur");
// Set a low quality background image
bgBodyStyle.background = bgUrl;
styleBodyBackground(bgBodyStyle);
// Set a low quality background image for the dummy background
this._styleBodyBackgrond(
this._dummyBodyBackgroundStyle,
`url('${fileName}')`
);
// Add a class to blur it
backgroundBody.classList.add("blurFiltered");
// After loading/fetching the _hqBackground's background image
this._hqBackground.onload = () => {
// After downloading the HQ image, set it as bg of body
this._styleBodyBackgrond(
this._bodyStyle,
`url('${this._hqBackground.src}')`
);
hqBackground.onload = () => {
// After downloading the HQ image, set it as bg
backgroundBody.style.background = "url(" + bgUrl + ";)";
styleBodyBackground(bgBodyStyle);
// Add a delay before hiding the overlay dummy background to avoid the white flicker
setTimeout(() => {
// Hide the dummy background
this._dummyBodyBackground.classList.add("dummyBackgroundHide");
// Remove class to unblur
backgroundBody.classList.remove("blurFiltered");
// Remove class to unblur
this._dummyBodyBackground.classList.remove("dummyBackgroundBlur");
}, 3000);
};
// Add a delay when to fetch the hq background
setTimeout(() => {
this._hqBackground.src = `${fileName}`;
}, 500);
};
// Add a delay when to fetch background
setTimeout(() => {
hqBackground.src = bgUrl;
}, 50);
};
const unsplashBGLoad = () => {
const isEnable = localStorage.getItem(DW_KEY_ENABLE) === "true";
if (isEnable) {
const date = new Date();
const lastTimeUpdate = localStorage.getItem(DW_KEY_TIME);
let urlBg = localStorage.getItem(DW_KEY_BG);
const keyword = localStorage.getItem(DW_KEY_KEYWORD) || KEYWORD;
if (
!lastTimeUpdate ||
new Date(lastTimeUpdate).getDate() != date.getDate()
) {
const size = `${window.screen.width}x${window.screen.height}`;
const url = `${DW_URL}${size}/?${keyword}`;
fetch(url).then((data) => {
if (data && data.url) {
urlBg = data.url;
localStorage.setItem(DW_KEY_BG, urlBg);
localStorage.setItem(DW_KEY_TIME, date.toISOString());
lazyLoadUnSplashBackground(urlBg);
}
});
unsplashBGLoad() {
const isEnable = localStorage.getItem(DW_KEY_ENABLE) === "true";
if (isEnable) {
const date = new Date();
const lastTimeUpdate = localStorage.getItem(DW_KEY_TIME);
let urlBg = localStorage.getItem(DW_KEY_BG);
const keyword = localStorage.getItem(DW_KEY_KEYWORD) || KEYWORD;
if (
!lastTimeUpdate ||
new Date(lastTimeUpdate).getDate() != date.getDate()
) {
console.log("load new wallpaer");
const size = `${window.screen.width}x${window.screen.height}`;
const url = `${DW_URL}${size}/?${keyword}`;
fetch(url).then((data) => {
if (data && data.url) {
urlBg = data.url;
localStorage.setItem(DW_KEY_BG, urlBg);
localStorage.setItem(DW_KEY_TIME, date.toISOString());
this._lazyLoadBackground(urlBg);
}
});
}
if (urlBg) {
this._lazyLoadBackground(urlBg);
}
} else {
// load default bg
// new DummyBodyBackground();
}
if (urlBg) {
lazyLoadUnSplashBackground(urlBg);
this.dailyWallPaperUI(true);
}
dailyWallPaperUI(isChangeUI) {
const isEnable = localStorage.getItem(DW_KEY_ENABLE) === "true";
this._dailySettingGroups.style.display = isEnable ? "block" : "none";
if (isChangeUI) {
dailyWallpaperCheckbox.checked = isEnable;
const keyword = localStorage.getItem(DW_KEY_KEYWORD) || KEYWORD;
this._unsplashKeyword.value = keyword;
}
} else {
initLazyLoad();
}
dailyWallPaperUI(true);
};
const dailyWallPaperUI = (isChangeUI) => {
const isEnable = localStorage.getItem(DW_KEY_ENABLE) === "true";
dailySettingGroups.style.display = isEnable ? "block" : "none";
if (isChangeUI) {
dailyWallpaperCheckbox.checked = isEnable;
const keyword = localStorage.getItem(DW_KEY_KEYWORD) || KEYWORD;
unsplashKeyword.value = keyword;
}
};
resetTheme.addEventListener("mouseup", () => {
localStorage.removeItem(DW_KEY_ENABLE);
localStorage.removeItem(DW_KEY_KEYWORD);
localStorage.removeItem(DW_KEY_BG);
localStorage.removeItem(DW_KEY_TIME);
dailyWallPaperUI(true);
});
dailyWallpaperCheckbox.onchange = (event) => {
localStorage.setItem(DW_KEY_ENABLE, event.target.checked.toString());
dailyWallPaperUI();
unsplashBGLoad();
}
window.onload = () => {
new DailyWallpaper();
};
unsplashKeyword.onchange = (event) => {
localStorage.setItem(DW_KEY_KEYWORD, event.target.value);
localStorage.removeItem(DW_KEY_TIME);
unsplashBGLoad();
};
// Initialize
window.onload = unsplashBGLoad();