mtb_store_frontend/public/static/js/adaptive-backgrounds.js

/* jshint debug: true, expr: true */

;
(function ($) {
  /* 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 BLEND = 'blend';

  var DEFAULTS = {
    selector: '[data-adaptive-background]',
    parent: null,
    exclude: ['rgb(0,0,0)', 'rgb(255,255,255)'],
    shadeVariation: false,
    shadePercentage: 0,
    shadeColors: {
      light: 'rgb(255,255,255)',
      dark: 'rgb(0,0,0)' 
    },
    normalizeTextColor: false,
    normalizedTextColors: {
      light: "#fff",
      dark: "#000"
    },
    lumaClasses: {
      light: "ab-light",
      dark: "ab-dark"
    },
    transparent: null
  };

  // Include RGBaster - https://github.com/briangonzalez/rgbaster.js
  /* jshint ignore:start */
  !function(n,t){"use strict";var e=function(n,t){var e=document.createElement("canvas");return e.setAttribute("width",n),e.setAttribute("height",t),e.getContext("2d")},r=function(n,t){var r=new Image,i=n.src||n;"data:"!==i.substring(0,5)&&(r.crossOrigin="Anonymous"),r.onload=function(){var n=e(r.width,r.height);n.drawImage(r,0,0);var i=n.getImageData(0,0,r.width,r.height);t&&t(i.data)},r.src=i},i=function(n){return["rgb(",n,")"].join("")},a=function(n){var t=[];for(var e in n)t.push(o(e,n[e]));return t.sort(function(n,t){return t.count-n.count}),t},u=function(n,t){if(n.length>t)return n.slice(0,t);for(var e=n.length-1;t-1>e;e++)n.push(o("0,0,0",0));return n},o=function(n,t){return{name:i(n),count:t}},c=10,s={};s.colors=function(n,e){e=e||{};var o=e.exclude||[],s=e.paletteSize||c;r(n,function(n){for(var r={},c="",f=[],d=0;d<n.length;d+=4)f[0]=n[d],f[1]=n[d+1],f[2]=n[d+2],c=f.join(","),-1===f.indexOf(t)&&0!==n[d+3]&&-1===o.indexOf(i(c))&&(r[c]=c in r?r[c]+1:1);if(e.success){var g=u(a(r),s+1);e.success({dominant:g[0].name,secondary:g[1].name,palette:g.map(function(n){return n.name}).slice(1)})}})},n.RGBaster=n.RGBaster||s}(window);

  function shadeRGBColor(color, percent){var f=color.split(","),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);return "rgb("+(Math.round((t-R)*p)+R)+","+(Math.round((t-G)*p)+G)+","+(Math.round((t-B)*p)+B)+")";}

  function blendRGBColors(c0, c1, p){var f=c0.split(","),t=c1.split(","),R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);return "rgb("+(Math.round((parseInt(t[0].slice(4))-R)*p)+R)+","+(Math.round((parseInt(t[1])-G)*p)+G)+","+(Math.round((parseInt(t[2])-B)*p)+B)+")";}
  /* jshint ignore:end */

  /*
  Our main function declaration.
  */
  $.adaptiveBackground = {
    run: function (options) {
      var opts = $.extend({}, DEFAULTS, options);

      /* Loop over each element, waiting for it to load
      then finding its color, and triggering the
      color found event when color has been found.
      */
      $(opts.selector).each(function (index, el) {
        var $this = $(this);

        /*  Small helper functions which applies
            colors, attrs, triggers events, etc.
        */
        var handleColors = function () {
          if ($this[0].tagName == 'PICTURE') {
            var images = $this[0].children;
            for (var image in images) {
              if (images[image].tagName == 'IMG') {
                var img = images[image];
                break;
              }
            };
            if (img.currentSrc) {
              img = img.currentSrc;
            };
          } else {
            var img = useCSSBackground() ? getCSSBackground() : $this[0];
          }

          RGBaster.colors(img, {
            paletteSize: 20,
            exclude: opts.exclude,
            success: function (colors) {
              $this.attr(DATA_COLOR, colors.dominant);
              $this.trigger(EVENT_CF, {
                color: colors.dominant,
                palette: colors.palette
              });
            }
          });

        };

        // Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ
        var getYIQ = function (color) {
          var rgb = color.match(/\d+/g);
          return ((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000;
        };

        var useCSSBackground = function () {
          var attr = $this.attr(DATA_CSS_BG);
          return (typeof attr !== typeof undefined && attr !== false);
        };

        var getCSSBackground = function () {
          var str = $this.css('background-image');
          var regex = /\(([^)]+)\)/;
          var match = regex.exec(str)[1].replace(/"/g, '')
          return match;
        };

        var getShadeAdjustment = function (color) {
          if (opts.shadeVariation == true) {
            return getYIQ(color) <= 128 ? shadeRGBColor(color, opts.shadePercentage) : shadeRGBColor(color, -(opts.shadePercentage), opts.shadePercentage);
          } else if (opts.shadeVariation == BLEND) {
            return getYIQ(color) >= 128 ? blendRGBColors(color, opts.shadeColors.dark, opts.shadePercentage) : blendRGBColors(color, opts.shadeColors.light, opts.shadePercentage);
          }
        };

        /* Subscribe to our color-found event. */
        $this.on(EVENT_CF, function (ev, data) {
          // Try to find the parent.
          var $parent;
          if (opts.parent && $this.parents(opts.parent).length) {
            $parent = $this.parents(opts.parent);
          } else if ($this.attr(DATA_PARENT) && $this.parents($this.attr(DATA_PARENT)).length) {
            $parent = $this.parents($this.attr(DATA_PARENT));
          } else if (useCSSBackground()) {
            $parent = $this;
          } else if (opts.parent) {
            $parent = $this.parents(opts.parent);
          } else {
            $parent = $this.parent();
          }

          if (!!opts.shadeVariation)
            data.color = getShadeAdjustment(data.color);

          if ($.isNumeric(opts.transparent) && opts.transparent != null && opts.transparent >= 0.01 && opts.transparent <= 0.99) {
            var dominantColor = data.color;
            var rgbToRgba = dominantColor.replace("rgb", "rgba");
            var transparentColor = rgbToRgba.replace(")", ", " + opts.transparent + ")");
            $parent.css({
              backgroundColor: transparentColor
            });
          } else {
            $parent.css({
              backgroundColor: data.color
            });
          }

          var getNormalizedTextColor = function (color) {
            return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;
          };

          var getLumaClass = function (color) {
            return getYIQ(color) <= 128 ? opts.lumaClasses.dark : opts.lumaClasses.light;
          };

          // Normalize the text color based on luminance.
          if (opts.normalizeTextColor)
            $parent.css({
              color: getNormalizedTextColor(data.color)
            });

          // Add a class based on luminance.
          $parent.addClass(getLumaClass(data.color))
            .attr('data-ab-yaq', getYIQ(data.color));

          opts.success && opts.success($this, data);
        });

        /* Handle the colors. */
        handleColors();

      });
    }
  };
})(jQuery);