xobs/fossasia-22-renode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Group background reads and writes

Browse Source
This commit is contained in:
Jeroen Hermans 2020-11-16 09:47:58 +01:00
parent 10f02ece99
commit e57ff233a4
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/controllers/backgrounds.js
View File

@ -27,8 +27,6 @@ export default class Backgrounds {
*/ */
create() { create() {
let printMode = this.Reveal.isPrintingPDF();
// Clear prior backgrounds // Clear prior backgrounds
this.element.innerHTML = ''; this.element.innerHTML = '';
this.element.classList.add( 'no-transition' ); this.element.classList.add( 'no-transition' );
@ -114,9 +112,24 @@ export default class Backgrounds {
*/ */
sync( slide ) { sync( slide ) {
let element = slide.slideBackgroundElement, const element = slide.slideBackgroundElement,
contentElement = slide.slideBackgroundContentElement; contentElement = slide.slideBackgroundContentElement;
const data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundImage: slide.getAttribute( 'data-background-image' ),
backgroundVideo: slide.getAttribute( 'data-background-video' ),
backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ),
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
backgroundOpacity: slide.getAttribute( 'data-background-opacity' ),
};
const dataPreload = slide.hasAttribute( 'data-preload' );
// Reset the prior background state in case this is not the // Reset the prior background state in case this is not the
// initial sync // initial sync
slide.classList.remove( 'has-dark-background' ); slide.classList.remove( 'has-dark-background' );
@ -135,19 +148,6 @@ export default class Backgrounds {
contentElement.style.opacity = ''; contentElement.style.opacity = '';
contentElement.innerHTML = ''; contentElement.innerHTML = '';
let data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundImage: slide.getAttribute( 'data-background-image' ),
backgroundVideo: slide.getAttribute( 'data-background-video' ),
backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ),
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
};
if( data.background ) { if( data.background ) {
// Auto-wrap image urls in url(...) // Auto-wrap image urls in url(...)
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) { if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
@ -179,7 +179,7 @@ export default class Backgrounds {
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
if( slide.hasAttribute( 'data-preload' ) ) element.setAttribute( 'data-preload', '' ); if( dataPreload ) element.setAttribute( 'data-preload', '' );
// Background image options are set on the content wrapper // Background image options are set on the content wrapper
if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize; if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
@ -194,14 +194,14 @@ export default class Backgrounds {
// If no bg color was found, check the computed background // If no bg color was found, check the computed background
if( !contrastColor ) { if( !contrastColor ) {
let computedBackgroundStyle = window.getComputedStyle( element ); const computedBackgroundStyle = window.getComputedStyle( element );
if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) { if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
contrastColor = computedBackgroundStyle.backgroundColor; contrastColor = computedBackgroundStyle.backgroundColor;
} }
} }
if( contrastColor ) { if( contrastColor ) {
let rgb = colorToRgb( contrastColor ); const rgb = colorToRgb( contrastColor );
// Ignore fully transparent backgrounds. Some browsers return // Ignore fully transparent backgrounds. Some browsers return
// rgba(0,0,0,0) when reading the computed background color of // rgba(0,0,0,0) when reading the computed background color of