mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-12 02:42:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: background fade in animation (WIP)

Browse Source
This commit is contained in:
David Ralph
2021-04-10 22:32:46 +01:00
parent f4de44bbbb
commit 149bcdbe05
4 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/widgets/background/Background.jsx
View File

@@ -68,10 +68,21 @@ export default class Background extends React.PureComponent {
if (this.state.url !== '') {
const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
document.querySelector('#backgroundImage').setAttribute(
'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
);
const backgroundImage = document.querySelector('#backgroundImage');
backgroundImage.classList.add('backgroundPreload');
let preloader = document.createElement('img');
preloader.src = url;
preloader.addEventListener('load', () => {
backgroundImage.classList.remove('backgroundPreload');
backgroundImage.classList.add('fade-in');
backgroundImage.setAttribute(
'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
);
preloader = null;
});
} else {
document.querySelector('#backgroundImage').setAttribute(
'style',
@@ -136,7 +147,7 @@ export default class Background extends React.PureComponent {
case 'colour':
// background colour
const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {"angle":"180","gradient":[{"colour":"#ffb032","stop":0}],"type":"linear"};
const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
let gradientSettings = '';
try {
gradientSettings = JSON.parse(customBackgroundColour);