support for optional background property overrides (#453)
This commit is contained in:
parent
bfadfcc7ce
commit
c11e8f624f
21
js/reveal.js
21
js/reveal.js
|
@ -258,19 +258,30 @@ var Reveal = (function(){
|
||||||
// given slide
|
// given slide
|
||||||
function _createBackground( slide, container ) {
|
function _createBackground( slide, container ) {
|
||||||
|
|
||||||
var background = slide.getAttribute( 'data-background' );
|
var data = {
|
||||||
|
background: slide.getAttribute( 'data-background' ),
|
||||||
|
backgroundSize: slide.getAttribute( 'data-background-size' ),
|
||||||
|
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
||||||
|
backgroundPosition: slide.getAttribute( 'data-background-position' )
|
||||||
|
};
|
||||||
|
|
||||||
var element = document.createElement( 'div' );
|
var element = document.createElement( 'div' );
|
||||||
|
|
||||||
if( background ) {
|
if( data.background ) {
|
||||||
// Auto-wrap image urls in url(...)
|
// Auto-wrap image urls in url(...)
|
||||||
if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( background ) ) {
|
if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( data.background ) ) {
|
||||||
element.style.backgroundImage = 'url('+ background +')';
|
element.style.backgroundImage = 'url('+ data.background +')';
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
element.style.background = background;
|
element.style.background = data.background;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Additional and optional background properties
|
||||||
|
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
|
||||||
|
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
|
||||||
|
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
|
||||||
|
|
||||||
container.appendChild( element );
|
container.appendChild( element );
|
||||||
|
|
||||||
return element;
|
return element;
|
||||||
|
|
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -54,8 +54,9 @@
|
||||||
<h2>Background image</h2>
|
<h2>Background image</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-background="assets/image2.png">
|
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat">
|
||||||
<h2>Background image</h2>
|
<h2>Background image</h2>
|
||||||
|
<code>data-background-size="100px" data-background-repeat="repeat"</code>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user