Skip to content

Commit 281494a

Browse files
briangonzalezbriangonzalez
committed
Merge branch 'rastasheep-master'
2 parents 1943ec0 + df6a002 commit 281494a

File tree

4 files changed

+86
-6
lines changed

4 files changed

+86
-6
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ Default Options
3434
----------------
3535
- __selector__ String _(default: `'img[data-adaptive-background="1"]'`)_ a CSS selector which denotes which images to grab/process. Ideally, this selector would start with _img_, to ensure we only grab and try to process actual images.
3636
- __parent__ falsy _(default: `null`)_ a CSS selector which denotes which parent to apply the background color to. By default, the color is applied to the parent one level up the DOM tree.
37+
- __normalizeTextColor__ boolean _(default: `false`)_ option to normalize the color of the parent text if background color is too dark or too light
38+
- __normalizedTextColors__ Object Literal _(default: `{dark: '#000', light: '#fff'}`)_ text colors used when background is either too dark/light
39+
3740

3841
__Example:__
3942
Call the `run` method, passing in any options you'd like to override.

‎demos/adaptive-text.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Normalized Text</title>
5+
6+
<script type="text/javascript" src='/lib/jquery.js'></script>
7+
<script type="text/javascript" src='/src/jquery.adaptive-backgrounds.js'></script>
8+
<script type="text/javascript">
9+
10+
$(document).ready(function(){
11+
$.adaptiveBackground.run({
12+
normalizeTextColor: true
13+
})
14+
});
15+
16+
</script>
17+
18+
<style type="text/css">
19+
20+
body{
21+
max-width: 500px;
22+
margin: 0 auto;
23+
}
24+
25+
.img-wrap{
26+
border: 2px solid #ccc;
27+
width: 600px;
28+
position: absolute;
29+
top: 50%; left: 50%;
30+
text-align: center;
31+
color: red;
32+
transform: translateY(-50%) translateX(-50%);
33+
-webkit-transform: translateY(-50%) translateX(-50%);
34+
}
35+
36+
.img-wrap img{
37+
height: 100%;
38+
height: 300px;
39+
}
40+
41+
.img-wrap .text{
42+
font-family: Arial;
43+
font-size: 100px;
44+
font-weight: bold;
45+
font-style: italic;
46+
}
47+
48+
</style>
49+
50+
</head>
51+
<body>
52+
53+
<div class='img-wrap'>
54+
<div class='text'>WOW</div>
55+
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
56+
</div>
57+
58+
</body>
59+
</html>

‎dist/jquery.adaptive-backgrounds.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jquery.adaptive-backgrounds.js

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,19 @@
99
var EVENT_CF = 'ab-color-found';
1010

1111
var DEFAULTS = {
12-
selector: 'img[data-adaptive-background="1"]',
13-
parent: null,
12+
selector: 'img[data-adaptive-background="1"]',
13+
parent: null,
14+
normalizeTextColor: false,
15+
normalizedTextColors: {
16+
light: "#fff",
17+
dark: "#000"
18+
}
1419
};
1520

1621
// Include RGBaster - https://github.com/briangonzalez/rgbaster.js
1722
/* jshint ignore:start */
1823
(function(n,t){var a=function(){return document.createElement("canvas").getContext("2d")};var e=function(n,t){var e=new Image;e.crossOrigin="Anonymous";e.src=n.src;e.onload=function(){var r=a();r.drawImage(e,0,0);var o=r.getImageData(0,0,n.width,n.height);t&&t(o.data)}};var r=function(n){return["rgb(",n,")"].join("")};var o=function(n){return n.map(function(n){return r(n.name)})};var i=5;var u=10;var c={};c.colors=function(n,t,a){e(n,function(n){var e=n.length,c={},m="",f=[],l={dominant:{name:"",count:0},palette:Array.apply(null,Array(a||u)).map(Boolean).map(function(n){return{name:"0,0,0",count:0}})};var v=0;while(v<e){f[0]=n[v];f[1]=n[v+1];f[2]=n[v+2];m=f.join(",");if(m in c){c[m]=c[m]+1}else{c[m]=1}if(m!=="0,0,0"&&m!=="255,255,255"){var d=c[m];if(d>l.dominant.count){l.dominant.name=m;l.dominant.count=d}else{l.palette.some(function(n){if(d>n.count){n.name=m;n.count=d;return true}})}}v+=i*4}t&&t({dominant:r(l.dominant.name),palette:o(l.palette)})})};n.RGBaster=n.RGBaster||c})(window);
19-
/* jshint ignore:end */
24+
/* jshint ignore:end */
2025

2126
/* Our main function declaration. */
2227
$.adaptiveBackground = {
@@ -40,6 +45,7 @@
4045

4146
/* Subscribe to our color-found event. */
4247
$this.on( EVENT_CF, function(ev, data){
48+
var $data = data;
4349
var $parent;
4450
if ( $this.attr( DATA_PARENT ) ){
4551
$parent = $this.parents( $this.attr( DATA_PARENT ) );
@@ -52,6 +58,18 @@
5258
}
5359

5460
$parent.css({ backgroundColor: data.color });
61+
62+
if ( opts.normalizeTextColor ){
63+
64+
/* Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ */
65+
var getTextColor = function (){
66+
var rgb = $data.color.match(/\d+/g);
67+
var yiq = ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
68+
return yiq >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;
69+
};
70+
71+
$parent.css({ color: getTextColor() });
72+
}
5573
});
5674

5775
/* Handle the colors. */
@@ -61,4 +79,4 @@
6179
},
6280
};
6381

64-
})(jQuery);
82+
})(jQuery);

0 commit comments

Comments
 (0)