add support for 'data-background-gradient' #2510
Co-authored-by: Giacomo Zinetti <giacomo.zinetti@giko.it>edit
parent
eada286ca0
commit
0ca389721c
|
@ -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">
|
||||
</a>
|
||||
</section>
|
||||
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
|
||||
<h2>Gradient Backgrounds</h2>
|
||||
<pre><code class="hljs html wrap"><section data-background-gradient=
|
||||
"linear-gradient(to bottom, #ddd, #191919)"></code></pre>
|
||||
</section>
|
||||
<section data-background="https://static.slid.es/reveal/image-placeholder.png">
|
||||
<h2>Image Backgrounds</h2>
|
||||
<pre><code class="hljs html"><section data-background="image.png"></code></pre>
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -122,6 +122,7 @@ export default class Backgrounds {
|
|||
backgroundVideo: slide.getAttribute( 'data-background-video' ),
|
||||
backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
|
||||
backgroundColor: slide.getAttribute( 'data-background-color' ),
|
||||
backgroundGradient: slide.getAttribute( 'data-background-gradient' ),
|
||||
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
||||
backgroundPosition: slide.getAttribute( 'data-background-position' ),
|
||||
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
|
||||
|
@ -161,13 +162,14 @@ export default class Backgrounds {
|
|||
// Create a hash for this combination of background settings.
|
||||
// This is used to determine when two slide backgrounds are
|
||||
// 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 +
|
||||
data.backgroundSize +
|
||||
data.backgroundImage +
|
||||
data.backgroundVideo +
|
||||
data.backgroundIframe +
|
||||
data.backgroundColor +
|
||||
data.backgroundGradient +
|
||||
data.backgroundRepeat +
|
||||
data.backgroundPosition +
|
||||
data.backgroundTransition +
|
||||
|
@ -177,6 +179,7 @@ export default class Backgrounds {
|
|||
// Additional and optional background properties
|
||||
if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
|
||||
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( dataPreload ) element.setAttribute( 'data-preload', '' );
|
||||
|
|
Loading…
Reference in New Issue