Removed jquery-backstretch that handled the UserBackground

The UserBackground is now handled with CSS3 on body.thm-body
This allowed me to remove the #rl-bg so that the "video-on-login-screen" plugin will not work indefinitely.
This commit is contained in:
djmaze 2020-07-13 15:47:19 +02:00
parent 213f5d183e
commit 412d69ce75
22 changed files with 30 additions and 869 deletions

View file

@ -34,7 +34,7 @@ import {
Magics
} from 'Common/Enums';
import { $html, leftPanelWidth, leftPanelDisabled, bAnimationSupported, bMobileDevice } from 'Common/Globals';
import { $html, leftPanelWidth, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
import { runHook } from 'Common/Plugins';
@ -146,14 +146,12 @@ class AppUser extends AbstractApp {
if (Settings.settingsGet('UserBackgroundHash')) {
_.delay(() => {
$('#rl-bg')
.attr('style', 'background-image: none !important;')
.backstretch(userBackground(Settings.settingsGet('UserBackgroundHash')), {
fade: bAnimationSupported ? Magics.Time1s : 0,
centeredX: true,
centeredY: true
})
.removeAttr('style');
const img = userBackground(Settings.settingsGet('UserBackgroundHash')),
b = window.document.body;
if (img) {
b.classList.add('UserBackground');
b.style.backgroundImage = "url("+img+")";
}
}, Magics.Time1s);
}
}

View file

@ -234,16 +234,13 @@ function runApp() {
jassl(appData.StaticLibJsLink).then(() => {
if (window.$) {
window.$('#rl-check').remove();
if (appData.IncludeBackground) {
window
.$('#rl-bg')
.attr('style', 'background-image: none !important;')
.backstretch(
appData.IncludeBackground.replace('{{USER}}', window.__rlah ? window.__rlah() || '0' : '0'),
{ fade: 100, centeredX: true, centeredY: true }
)
.removeAttr('style');
}
if (appData.IncludeBackground) {
const img = appData.IncludeBackground.replace('{{USER}}', window.__rlah ? window.__rlah() || '0' : '0'),
b = window.document.body;
if (img) {
b.classList.add('UserBackground');
b.style.backgroundImage = "url("+img+")";
}
}
});

View file

@ -1,4 +1,3 @@
<div id="rl-bg" class="thm-body"></div>
<div id="rl-loading" class="thm-loading" style="opacity:0">
<div id="rl-loading-desc"></div>
<div class="e-spinner">
@ -21,4 +20,4 @@
</div>
</div>
<div id="rl-templates"></div>
<div id="rl-hidden"></div>
<div id="rl-hidden"></div>

View file

@ -1,5 +1,5 @@
import window from 'window';
import _ from '_';
import $ from '$';
import ko from 'ko';
import Jua from 'Jua';
@ -48,20 +48,13 @@ class ThemesUserSettings {
});
this.background.hash.subscribe((value) => {
const $bg = $('#rl-bg');
const b = window.document.body;
if (!value) {
if ($bg.data('backstretch')) {
$bg.backstretch('destroy').attr('style', '');
}
b.classList.remove('UserBackground');
b.removeAttribute('style');
} else {
$bg
.attr('style', 'background-image: none !important;')
.backstretch(userBackground(value), {
fade: Magics.Time1s,
centeredX: true,
centeredY: true
})
.removeAttr('style');
b.classList.add('UserBackground');
b.style.backgroundImage = "url("+userBackground(value)+")";
}
});
}

View file

@ -1,11 +1,9 @@
#rl-bg {
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
.UserBackground {
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#rl-content {