Skip to content

Commit ec82ab9

Browse files
briangonzalezbriangonzalez
committed
fixes briangonzalez#8 - adding in functionality for acquiring dominant color of background image
1 parent 32ea8f0 commit ec82ab9

File tree

4 files changed

+78
-7
lines changed

4 files changed

+78
-7
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,14 @@ The script looks for image(s) with the `data-adaptive-background` attribute:
2020
<img src="/image.jpg" data-adaptive-background='1'>
2121
```
2222

23+
__Using an element with a CSS Background Image__
24+
25+
Instead of using an `<img>` element nested inside of parent element, AB supports grabbing the dominant color of a background image of a standalone element, then applying the corresponding dominant color as the background color of said element. Enable this functionality by adding a data property, `data-ab-css-background` to the element. See the example below:
26+
27+
```
28+
<div style='background-image: url(https://github.com/some-image.jpg)' data-adaptive-background='1' data-ab-css-background='1'></div>
29+
```
30+
2331
Demo
2432
-----------
2533
Here's a little demo of how it works. (1) The page loads (2) the dominant background color of the image is extracted (3) said color is applied to parent of image.

‎demos/background.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Background</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+
});
13+
14+
</script>
15+
16+
<style type="text/css">
17+
18+
body{
19+
max-width: 500px;
20+
margin: 0 auto;
21+
}
22+
23+
.img-wrap{
24+
border: 2px solid #ccc;
25+
height: 500px;
26+
width: 500px;
27+
position: absolute;
28+
top: 50%; left: 50%;
29+
text-align: center;
30+
-webkit-transform: translateY(-50%) translateX(-50%);
31+
background-image: url('images/3.jpg');
32+
background-size: 200px 300px;
33+
background-repeat: no-repeat;
34+
}
35+
36+
</style>
37+
38+
</head>
39+
<body>
40+
41+
<div class='img-wrap' data-adaptive-background='1' data-ab-css-background='1'>
42+
</div>
43+
44+
</body>
45+
</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: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
/* Constants & defaults. */
77
var DATA_COLOR = 'data-ab-color';
88
var DATA_PARENT = 'data-ab-parent';
9+
var DATA_CSS_BG = 'data-ab-css-background';
910
var EVENT_CF = 'ab-color-found';
1011

1112
var DEFAULTS = {
12-
selector: 'img[data-adaptive-background="1"]',
13+
selector: '[data-adaptive-background="1"]',
1314
parent: null,
1415
normalizeTextColor: false,
1516
normalizedTextColors: {
@@ -20,7 +21,7 @@
2021

2122
// Include RGBaster - https://github.com/briangonzalez/rgbaster.js
2223
/* jshint ignore:start */
23-
!function(a){"use strict";var b=function(){return document.createElement("canvas").getContext("2d")},c=function(a,c){var d=new Image;"data:"!==a.src.substring(0,5)&&(d.crossOrigin="Anonymous"),d.src=a.src,d.onload=function(){var e=b();e.drawImage(d,0,0);var f=e.getImageData(0,0,a.width,a.height);c&&c(f.data)}},d=function(a){return["rgb(",a,")"].join("")},e=function(a){return a.map(function(a){return d(a.name)})},f=5,g=10,h={};h.colors=function(a,b,h){c(a,function(a){for(var c=a.length,i={},j="",k=[],l={dominant:{name:"",count:0},palette:Array.apply(null,Array(h||g)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},m=0;c>m;){if(k[0]=a[m],k[1]=a[m+1],k[2]=a[m+2],j=k.join(","),i[j]=j in i?i[j]+1:1,"0,0,0"!==j&&"255,255,255"!==j){var n=i[j];n>l.dominant.count?(l.dominant.name=j,l.dominant.count=n):l.palette.some(function(a){return n>a.count?(a.name=j,a.count=n,!0):void 0})}m+=4*f}b&&b({dominant:d(l.dominant.name),palette:e(l.palette)})})},a.RGBaster=a.RGBaster||h}(window);
24+
!function(a){"use strict";var b=function(){return document.createElement("canvas").getContext("2d")},c=function(a,c){var d=new Image,e=a.src||a;"data:"!==e.substring(0,5)&&(d.crossOrigin="Anonymous"),d.onload=function(){var a=b();a.drawImage(d,0,0);var e=a.getImageData(0,0,d.width,d.height);c&&c(e.data)},d.src=e},d=function(a){return["rgb(",a,")"].join("")},e=function(a){return a.map(function(a){return d(a.name)})},f=5,g=10,h={};h.colors=function(a,b,h){c(a,function(a){for(var c=a.length,i={},j="",k=[],l={dominant:{name:"",count:0},palette:Array.apply(null,Array(h||g)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},m=0;c>m;){if(k[0]=a[m],k[1]=a[m+1],k[2]=a[m+2],j=k.join(","),i[j]=j in i?i[j]+1:1,"0,0,0"!==j&&"255,255,255"!==j){var n=i[j];n>l.dominant.count?(l.dominant.name=j,l.dominant.count=n):l.palette.some(function(a){return n>a.count?(a.name=j,a.count=n,!0):void 0})}m+=4*f}b&&b({dominant:d(l.dominant.name),palette:e(l.palette)})})},a.RGBaster=a.RGBaster||h}(window);
2425
/* jshint ignore:end */
2526

2627
/* Our main function declaration. */
@@ -35,19 +36,36 @@
3536
$( opts.selector ).each(function(index, el){
3637
var $this = $(this);
3738

38-
/* Small helper function which applies colors, attrs, and triggers events. */
39+
/* Small helper functions which applie
40+
colors, attrs, triggers events, and check for css
41+
*/
3942
var handleColors = function(){
40-
RGBaster.colors($this[0], function(colors){
43+
var img = useCSSBackground() ? CSSBackground() : $this[0];
44+
45+
RGBaster.colors(img, function(colors){
4146
$this.attr(DATA_COLOR, colors.dominant);
4247
$this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });
4348
}, 20);
4449
};
4550

51+
var useCSSBackground = function(){
52+
return $this.attr( DATA_CSS_BG );
53+
};
54+
55+
var CSSBackground = function(){
56+
return $this.css('background-image')
57+
.replace('url(https://github.com/'%3C/span%3E%3Cspan%20class=pl-kos%3E,%3C/span%3E%3Cspan%20class=pl-s%3E''%3C/span%3E%3Cspan%20class=pl-kos%3E).replace(')','');
58+
};
59+
4660
/* Subscribe to our color-found event. */
4761
$this.on( EVENT_CF, function(ev, data){
4862
var $data = data;
4963
var $parent;
50-
if ( $this.attr( DATA_PARENT ) ){
64+
65+
if ( useCSSBackground() ){
66+
$parent = $this;
67+
}
68+
else if ( $this.attr( DATA_PARENT ) ){
5169
$parent = $this.parents( $this.attr( DATA_PARENT ) );
5270
}
5371
else if (opts.parent) {

0 commit comments

Comments
 (0)