xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Giacomo Zinetti <giacomo.zinetti@giko.it>
This commit is contained in:
hakimel 2022-05-02 14:49:21 +02:00
parent eada286ca0
commit 0ca389721c
6 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo.html
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">
</a>
</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">
<h2>Image Backgrounds</h2>
<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
js/controllers/backgrounds.js
View File

@ -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', '' );