xobs/lca2020-pay-it-forward
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use computed style when calculating bg birghtness

Browse Source
This commit is contained in:
Hakim El Hattab 2014-09-09 17:18:15 +02:00
parent 20e72df4bf
commit 9fb0c5f3d3
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/reveal.js
View File

@ -714,15 +714,16 @@
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition; if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
container.appendChild( element );
// If this slide has a background color, add a class that // If this slide has a background color, add a class that
// signals if it is light // signals if it is light
if( element.style.backgroundColor && colorBrightness( element.style.backgroundColor ) > 128 ) { var computedBackgroundColor = window.getComputedStyle( element ).backgroundColor;
if( computedBackgroundColor && colorBrightness( computedBackgroundColor ) > 128 ) {
slide.classList.add( 'is-background-light' ); slide.classList.add( 'is-background-light' );
element.classList.add( 'is-background-light' ); element.classList.add( 'is-background-light' );
} }
container.appendChild( element );
return element; return element;
} }

21
test/examples/slide-backgrounds.html
View File

@ -10,6 +10,15 @@
<link rel="stylesheet" href="../../css/reveal.css"> <link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/serif.css" id="theme"> <link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
<style type="text/css" media="screen">
.slides section,
.slides section h2 {
color: #fff;
}
.slides .is-background-light h2 {
color: #222;
}
</style>
</head> </head>
<body> <body>
@ -26,6 +35,10 @@
<h2>data-background: #bb00bb</h2> <h2>data-background: #bb00bb</h2>
</section> </section>
<section data-background-color="lightblue">
<h2>data-background: ----</h2>
</section>
<section> <section>
<section data-background="#ff0000"> <section data-background="#ff0000">
<h2>data-background: #ff0000</h2> <h2>data-background: #ff0000</h2>
@ -50,20 +63,20 @@
</section> </section>
</section> </section>
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)"> <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2> <h2>Background image</h2>
</section> </section>
<section> <section>
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)"> <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2> <h2>Background image</h2>
</section> </section>
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)"> <section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2> <h2>Background image</h2>
</section> </section>
</section> </section>
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)"> <section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(0,0,0,0.9)">
<h2>Background image</h2> <h2>Background image</h2>
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre> <pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
</section> </section>