backgroundimage.js

define([
  'lodash'
], function () {
  'use strict';

  var pluginName = 'backgroundImage',
      version = '',
      throttle = _.throttle,
      defaults = {},
      BackgroundImage;

  BackgroundImage = function BackgroundImage(element, options) {
    var self = this;

    self.element = element;
    self.options = jQuery.extend({}, defaults, options);

    self.initialize();
  };

  BackgroundImage.prototype = /** @lends BackgroundImage */ {
    _backgrounds: [],

    /**
     *
     * @return {void}
     */
    initialize: function initialize() {
      var self = this;

      self._setUp();
      self._setBackgrounds();
      self._events();
      self._onBreakPointChange();
    },

    _events: function _events() {
      var self = this;

      jQuery(window).on('resize.' + self.eventNamespace, throttle(function() {
        self._onBreakPointChange();
      }, 50));
    },

    _setUp: function _setUp() {
      var self = this;

      self._defaults = defaults;
      self._name = pluginName;
      self.eventNamespace =  pluginName + jQuery.now();
      self.version = version;
      self.$element = jQuery(self.element);
    },

    /**
     * Handles the break point change
     * @return {void}
     */
    _onBreakPointChange: function _onBreakPointChange() {
      var self = this,
          mediaSize = self._getMediaSize();

      _.each(self._backgrounds, function(obj) {

        // set the background image to the element
        self._setBackground(obj.$el, self._getBackground(obj, mediaSize));
      });
    },

    /**
     * Gets the current breakpoint size
     * @see WindowManager
     * @return {String} Returns xs, s, m, l, xl
     */
    _getMediaSize: function _getMediaSize() {
      // When getComputedStyle isn't supported (IE8 and below)
      if (typeof window.getComputedStyle === 'function') {
        return window.getComputedStyle(document.body,':after')
        .getPropertyValue('content')
        // Remove quotes
        // IE11 and below return the string "s" instead of just s
        .replace(/\"|\'/g,'');
      }
      // Always return 'm' as IE8 is using stripmq for the IE8+below css
      else {
        return 'm';
      }
    },

    /**
     * Gets the correct background image for the window size
     * @param  {Object} obj
     * @param  {String} size
     * @return {String} Returns the correct background size
     */
    _getBackground: function _getBackground(obj, size) {
      // default to xs if size is a falsy
      size = size || 'xs';

      // return the small size if current size is not set
      return obj[size] || obj.xs;
    },

    /**
     * Sets the background variable to the backgrounds attached to the view
     * @returns {void}
     */
    _setBackgrounds: function _setBackgrounds() {
      var self = this;

      self._getElements()
      .each(function() {
        var $element = jQuery(this);

        self._backgrounds.push({
          '$el': $element,
          'xs': $element.data('default'),
          's': $element.data('small'),
          'm': $element.data('medium'),
          'l': $element.data('large'),
          'xl': $element.data('large'),
        });
      });
    },

    /**
     * Get all elements that have responsive-background
     * @return {void}
     */
    _getElements: function _getElements() {
      return this.$element.find('.backgroundImage').addBack();
    },

    /**
     * Sets the background for the itemview
     * @param {jQuery} $element
     * @param {String} background
     */
    _setBackground: function _setBackground($element, background) {
      if (typeof background != 'undefined') {
        $element.css({'background-image': 'url(' + background + ')'});
      }
    }
  };

  jQuery.fn[pluginName] = function(options) {
    // get the arguments
    var args = jQuery.makeArray(arguments),
        after = args.slice(1);

    return this.each(function() {
      var element = this;

      var instance = jQuery.data(element, pluginName);
      if (instance) {
        // call a method on the instance
        if (typeof options == 'string') {
          instance[options].apply(instance, after);
        }
      }
      else {
        // create the plugin
        jQuery.data(
          element,
          pluginName,
          new BackgroundImage(element, options)
        );
      }
    });
  };

  // Module support
  if (
    typeof module === 'object' &&
    module && typeof module.exports === 'object'
  ) {
    // Node.js module pattern
    module.exports = jQuery;
  }
  else {
    // AMD
    if (typeof define === 'function' && define.amd) {
      define('jquery-inview', [], function() { return jQuery; });
    }
  }
});