https://www.evang-frauenfeld.ch/jquery.adaptive-backgrounds.js?v=a4b05c1fb6518387cfcff2e8d345ce47

1
2/* jshint debug: true, expr: true */
3
4;(function($){
5
6  /* Constants & defaults. */
7  var DATA_COLOR    = 'data-ab-color';
8  var DATA_PARENT   = 'data-ab-parent';
9  var DATA_CSS_BG   = 'data-ab-css-background';
10  var EVENT_CF      = 'ab-color-found';
11
12  var DEFAULTS      = {
13    selector:             '[data-adaptive-background]',
14    parent:               null,
15    exclude:              [ 'rgb(0,0,0)', 'rgb(255,255,255)' ],
16    normalizeTextColor:   false,
17    normalizedTextColors:  {
18      light:      "#fff",
19      dark:       "#000"
20    },
21    lumaClasses:  {
22      light:      "ab-light",
23      dark:       "ab-dark"
24    }
25  };
26
27  // Include RGBaster - https://github.com/briangonzalez/rgbaster.js
28  /* jshint ignore:start */
29  !function(n){"use strict";var t=function(){return document.createElement("canvas").getContext("2d")},e=function(n,e){var a=new Image,o=n.src||n;"data:"!==o.substring(0,5)&&(a.crossOrigin="Anonymous"),a.onload=function(){var n=t("2d");n.drawImage(a,0,0);var o=n.getImageData(0,0,a.width,a.height);e&&e(o.data)},a.src=o},a=function(n){return["rgb(",n,")"].join("")},o=function(n){return n.map(function(n){return a(n.name)})},r=5,i=10,c={};c.colors=function(n,t){t=t||{};var c=t.exclude||[],u=t.paletteSize||i;e(n,function(e){for(var i=n.width*n.height||e.length,m={},s="",d=[],f={dominant:{name:"",count:0},palette:Array.apply(null,new Array(u)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},l=0;i>l;){if(d[0]=e[l],d[1]=e[l+1],d[2]=e[l+2],s=d.join(","),m[s]=s in m?m[s]+1:1,-1===c.indexOf(a(s))){var g=m[s];g>f.dominant.count?(f.dominant.name=s,f.dominant.count=g):f.palette.some(function(n){return g>n.count?(n.name=s,n.count=g,!0):void 0})}l+=4*r}if(t.success){var p=o(f.palette);t.success({dominant:a(f.dominant.name),secondary:p[0],palette:p})}})},n.RGBaster=n.RGBaster||c}(window);
30  /* jshint ignore:end */
31
32
33  /*
34    Our main function declaration.
35  */
36  $.adaptiveBackground = {
37    run: function( options ){
38      var opts = $.extend({}, DEFAULTS, options);
39
40      /* Loop over each element, waiting for it to load
41         then finding its color, and triggering the
42         color found event when color has been found.
43      */
44      $( opts.selector ).each(function(index, el){
45        var $this = $(this);
46
47        /*  Small helper functions which applies
48            colors, attrs, triggers events, etc.
49        */
50        var handleColors = function () {
51          var img = useCSSBackground() ? getCSSBackground() : $this[0];
52
53          RGBaster.colors(img, {
54            paletteSize: 20,
55            exclude: opts.exclude,
56            success: function(colors) {
57              $this.attr(DATA_COLOR, colors.dominant);
58              $this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });
59            }
60          });
61
62        };
63
64        var useCSSBackground = function(){
65          var attr = $this.attr( DATA_CSS_BG );
66          return (typeof attr !== typeof undefined && attr !== false);
67        };
68
69        var getCSSBackground = function(){
70          var str = $this.css('background-image');
71          var regex = /\(([^)]+)\)/;
72          var match = regex.exec(str)[1].replace(/"/g, '')
73          return match;
74        };
75
76        /* Subscribe to our color-found event. */
77        $this.on( EVENT_CF, function(ev, data){
78
79          // Try to find the parent.
80          var $parent;
81          if ( opts.parent && $this.parents( opts.parent ).length ) {
82            $parent = $this.parents( opts.parent );
83          }
84          else if ( $this.attr( DATA_PARENT ) && $this.parents( $this.attr( DATA_PARENT ) ).length ){
85            $parent = $this.parents( $this.attr( DATA_PARENT ) );
86          }
87          else if ( useCSSBackground() ){
88            $parent = $this;
89          }
90          else if (opts.parent) {
91            $parent = $this.parents( opts.parent );
92          }
93          else {
94            $parent = $this.parent();
95          }
96
97          $parent.css({ backgroundColor: data.color });
98
99          // Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ
100          var getYIQ = function(color){
101            var rgb = data.color.match(/\d+/g);
102            return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
103          };
104
105          var getNormalizedTextColor = function (color){
106            return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;
107          };
108
109          var getLumaClass = function (color){
110            return getYIQ(color) <= 128 ? opts.lumaClasses.dark : opts.lumaClasses.light;
111          };
112
113          // Normalize the text color based on luminance.
114          if ( opts.normalizeTextColor )
115            $parent.css({ color: getNormalizedTextColor(data.color) });
116
117          // Add a class based on luminance.
118          $parent.addClass( getLumaClass(data.color) )
119                 .attr('data-ab-yaq', getYIQ(data.color));
120
121          opts.success && opts.success($this, data);
122        });
123
124        /* Handle the colors. */
125        handleColors();
126
127      });
128    }
129  };
130
131})(jQuery);