add support for 'data-background-gradient' #2510

Co-authored-by: Giacomo Zinetti <giacomo.zinetti@giko.it>
edit
hakimel 2022-05-02 14:49:21 +02:00
parent eada286ca0
commit 0ca389721c
6 changed files with 13 additions and 5 deletions

View File

@ -273,6 +273,11 @@
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow"> <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
</a> </a>
</section> </section>
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
<h2>Gradient Backgrounds</h2>
<pre><code class="hljs html wrap">&lt;section data-background-gradient=
"linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
</section>
<section data-background="https://static.slid.es/reveal/image-placeholder.png"> <section data-background="https://static.slid.es/reveal/image-placeholder.png">
<h2>Image Backgrounds</h2> <h2>Image Backgrounds</h2>
<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre> <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>

2
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -122,6 +122,7 @@ export default class Backgrounds {
backgroundVideo: slide.getAttribute( 'data-background-video' ), backgroundVideo: slide.getAttribute( 'data-background-video' ),
backgroundIframe: slide.getAttribute( 'data-background-iframe' ), backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
backgroundColor: slide.getAttribute( 'data-background-color' ), backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundGradient: slide.getAttribute( 'data-background-gradient' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ), backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ), backgroundPosition: slide.getAttribute( 'data-background-position' ),
backgroundTransition: slide.getAttribute( 'data-background-transition' ), backgroundTransition: slide.getAttribute( 'data-background-transition' ),
@ -161,13 +162,14 @@ export default class Backgrounds {
// Create a hash for this combination of background settings. // Create a hash for this combination of background settings.
// This is used to determine when two slide backgrounds are // This is used to determine when two slide backgrounds are
// the same. // the same.
if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) { if( data.background || data.backgroundColor || data.backgroundGradient || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
element.setAttribute( 'data-background-hash', data.background + element.setAttribute( 'data-background-hash', data.background +
data.backgroundSize + data.backgroundSize +
data.backgroundImage + data.backgroundImage +
data.backgroundVideo + data.backgroundVideo +
data.backgroundIframe + data.backgroundIframe +
data.backgroundColor + data.backgroundColor +
data.backgroundGradient +
data.backgroundRepeat + data.backgroundRepeat +
data.backgroundPosition + data.backgroundPosition +
data.backgroundTransition + data.backgroundTransition +
@ -177,6 +179,7 @@ export default class Backgrounds {
// Additional and optional background properties // Additional and optional background properties
if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize ); if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundGradient ) element.style.backgroundImage = data.backgroundGradient;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
if( dataPreload ) element.setAttribute( 'data-preload', '' ); if( dataPreload ) element.setAttribute( 'data-preload', '' );