Skip to content

Commit df6a002

Browse files
briangonzalezbriangonzalez
committed
issue briangonzalez#4 - cleaned up options and readme
1 parent 9ed3e04 commit df6a002

File tree

4 files changed

+77
-16
lines changed

4 files changed

+77
-16
lines changed

‎README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,8 @@ Default Options
3535
----------------
3636
- __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.
3737
- __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.
38-
- __changeTxtColor__ boolean _(default: `false`)_ option to change color of parent text according generated background image
39-
- __parentTxtLight__ String _(default: `#fff`)_ text color used when background color is dark
40-
- __parentTxtDark__ String _(default: `#000`)_ text color used when background color is light
38+
- __normalizeTextColor__ boolean _(default: `false`)_ option to normalize the color of the parent text if background color is too dark or too light
39+
- __normalizedTextColors__ Object Literal _(default: `{dark: '#000', light: '#fff'}`)_ text colors used when background is either too dark/light
4140

4241

4342
__Example:__

‎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: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@
99
var EVENT_CF = 'ab-color-found';
1010

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

1921
// Include RGBaster - https://github.com/briangonzalez/rgbaster.js
2022
/* jshint ignore:start */
2123
(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);
22-
/* jshint ignore:end */
24+
/* jshint ignore:end */
2325

2426
/* Our main function declaration. */
2527
$.adaptiveBackground = {
@@ -57,15 +59,16 @@
5759

5860
$parent.css({ backgroundColor: data.color });
5961

60-
if (opts.changeTxtColor){
61-
/* Small helper function for calculating color contrast */
62-
var getTxtColor = function (){
62+
if ( opts.normalizeTextColor ){
63+
64+
/* Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ */
65+
var getTextColor = function (){
6366
var rgb = $data.color.match(/\d+/g);
6467
var yiq = ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
65-
return yiq >= 128 ? opts.parentTxtDark : opts.parentTxtLight;
68+
return yiq >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;
6669
};
6770

68-
$parent.css({ color: getTxtColor });
71+
$parent.css({ color: getTextColor() });
6972
}
7073
});
7174

0 commit comments

Comments
 (0)