phyks
/
reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

support for optional background property overrides (#453)

This commit is contained in:
Hakim El Hattab 2013-06-04 19:58:50 +02:00
parent bfadfcc7ce
commit c11e8f624f
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/reveal.js
View File

@ -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
View File

File diff suppressed because one or more lines are too long

3
test/background.html
View File

@ -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>