xobs/lca2019-talk
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
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.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
container.appendChild( element );
// If this slide has a background color, add a class that
// 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' );
element.classList.add( 'is-background-light' );
}
container.appendChild( 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/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>
<body>
@@ -26,6 +35,10 @@
<h2>data-background: #bb00bb</h2>
</section>
<section data-background-color="lightblue">
<h2>data-background: ----</h2>
</section>
<section>
<section data-background="#ff0000">
<h2>data-background: #ff0000</h2>
@@ -50,20 +63,20 @@
</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>
</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>
</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>
</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>
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
</section>