fixes briangonzalez#8 - adding in functionality for acquiring dominan…

…t color of background image
MediaSapiens · Jan 14, 2014 · ec82ab9 · ec82ab9
1 parent 32ea8f0
commit ec82ab9
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,14 @@ The script looks for image(s) with the `data-adaptive-background` attribute:
 <img src="/image.jpg" data-adaptive-background='1'>
 ```
 
+__Using an element with a CSS Background Image__
+
+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:
+
+```
+<div style='background-image: url(/some-image.jpg)' data-adaptive-background='1' data-ab-css-background='1'></div>
+``` 
+
 Demo 
 -----------
 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.

diff --git a/demos/background.html b/demos/background.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Background</title>
+
+  <script type="text/javascript" src='/lib/jquery.js'></script>
+  <script type="text/javascript" src='/src/jquery.adaptive-backgrounds.js'></script>
+  <script type="text/javascript">
+
+  $(document).ready(function(){
+    $.adaptiveBackground.run();
+  });
+
+  </script>
+
+  <style type="text/css"> 
+
+    body{
+      max-width: 500px;
+      margin: 0 auto;
+    }
+
+    .img-wrap{
+      border: 2px solid #ccc;
+      height: 500px;
+      width: 500px; 
+      position: absolute;
+      top: 50%; left: 50%;
+      text-align: center;
+      -webkit-transform: translateY(-50%) translateX(-50%);
+      background-image: url('images/3.jpg');
+      background-size: 200px 300px;
+      background-repeat: no-repeat;
+    }
+
+  </style>
+
+</head>
+<body>
+
+  <div class='img-wrap' data-adaptive-background='1' data-ab-css-background='1'>
+  </div>
+
+</body>
+</html>
diff --git a/dist/jquery.adaptive-backgrounds.min.js b/dist/jquery.adaptive-backgrounds.min.js
diff --git a/src/jquery.adaptive-backgrounds.js b/src/jquery.adaptive-backgrounds.js
@@ -6,10 +6,11 @@
   /* Constants & defaults. */ 
   var DATA_COLOR    = 'data-ab-color';
   var DATA_PARENT   = 'data-ab-parent';
+  var DATA_CSS_BG   = 'data-ab-css-background';
   var EVENT_CF      = 'ab-color-found';
 
   var DEFAULTS      = {
-    selector:             'img[data-adaptive-background="1"]',
+    selector:             '[data-adaptive-background="1"]',
     parent:               null,
     normalizeTextColor:   false,
     normalizedTextColors:  {
@@ -20,7 +21,7 @@
 
   // Include RGBaster - https://github.com/briangonzalez/rgbaster.js
   /* jshint ignore:start */
-  !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);
+  !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);
   /* jshint ignore:end */
 
   /* Our main function declaration. */ 
@@ -35,19 +36,36 @@
       $( opts.selector ).each(function(index, el){
         var $this = $(this);
 
-        /* Small helper function which applies colors, attrs, and triggers events. */
+        /*  Small helper functions which applie 
+            colors, attrs, triggers events, and check for css 
+        */
         var handleColors = function(){
-          RGBaster.colors($this[0], function(colors){
+          var img = useCSSBackground() ? CSSBackground() : $this[0];
+
+          RGBaster.colors(img, function(colors){
             $this.attr(DATA_COLOR, colors.dominant);
             $this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });
           }, 20);
         };
 
+        var useCSSBackground = function(){
+          return $this.attr( DATA_CSS_BG );
+        };
+
+        var CSSBackground = function(){
+          return $this.css('background-image')
+                      .replace('url(','').replace(')','');
+        };
+
         /* Subscribe to our color-found event. */
         $this.on( EVENT_CF, function(ev, data){
           var $data = data;
           var $parent;
-          if ( $this.attr( DATA_PARENT ) ){
+
+          if ( useCSSBackground() ){
+            $parent = $this;
+          }
+          else if ( $this.attr( DATA_PARENT ) ){
             $parent = $this.parents( $this.attr( DATA_PARENT ) );
           } 
           else if (opts.parent) {