A jQuery plugin to enable full width containers in limited width parents

jquery.fullwidth.js

/**
 * A jQuery plugin to enable full width containers in limited width parents
 * @external "jQuery.fn"
 * @see {@link http://docs.jquery.com/Plugins/Authoring The jQuery Plugin Guide}
 * @example
 * $('img.full-width').fullWidth('.container');
 * $('img.full-width').each(function(){ $(this).data('fullWidth').removeFullWidth() });
 */

// Closure - BEGIN
(function($) {

  // hasAttr utility plugin
  $.fn.hasAttr = function(attrName) {
    let result = true
    this.each(function(i,e,arr) {
      if(!this.hasAttribute("name"))
        result = false
    });
    return result
  };


  /**
   * Plugin instance constructor
   * @function external:"jQuery".fullWidth
   * @param {HTMLElement} el HTML element that should be full width
   * @param {string} parentSelector `el` will be made as wide as the first element in its parent tree that matches this selector
   */
  $.fullWidth = function(el, parentSelector, options) {
    // NB. `options` is not currently used

    // To avoid scope issues, use 'base' instead of 'this'
    // to reference this class from internal events and functions.
    var base = this;

    // Access to jQuery and DOM versions of element
    base.$el = $(el);
    base.el = el;

    // By default looks for a  parent with class 'post', so it will (hopefully) work on wordpress pages by default
    $.fullWidth.defaultOptions = {
      parentSelector: '.post'
    };

    base.init = function() {
      if (typeof(parentSelector) === "undefined" || parentSelector === null)
        parentSelector = $.fullWidth.defaultOptions.parentSelector;

      base.options = $.extend({}, $.fullWidth.defaultOptions, {
        "parentSelector": parentSelector
      }, options);
      
      base.$el.each(function(i, e, arr) {
        let $e = $(this)
        // Add a reverse reference to the plugin on the DOM object
        $e.data('fullWidth', base);
        // Keep original styles in case removeFullWidth is called and they need to be restored
        if($e.hasAttr('style') && $e.attr('style') && !$e.data('fullWidthStyle'))
          $e.data('fullWidthStyle', $e.attr('style'));
      })
    };

    base.makeFullWidth = function() {
      base.$el.each(function(i, e, arr) {
        let $e = $(this)
        let $parent = $e.parents(base.options.parentSelector)
        if (!$parent.length) {
          console.error('ERROR in jQuery.fullWidth: Could not find "' + base.options.parentSelector + '" in parents')
          base.removeFullWidth()
          return false
        }

        // Remove any styles that could break the calculation
        $e.removeAttr('style').css({
          maxWidth: 'initial',
          margin: '0',
          padding: '0',
          width: 'initial'
        })

        // Returns how far the given element is from the left of the window
        function getLeft($el) {
          return $el.parent().offset().left -
            parseFloat($el.parent().css('marginLeft').replace('px', '')) +
            parseFloat($el.parent().css('paddingLeft').replace('px', '')) +
            $el.position().left;
        }
        
        //Finally, set full width CSS
        let diff = getLeft($e) - getLeft($parent)
        $e.css({
          width: $parent.width(),
          marginLeft: (-diff) + 'px'
        })
      })
    };

    // Function to remove effect of the fullWidth plugin from the element(s)
    base.removeFullWidth = function() {
      base.$el.each(function(i, e, arr) {
        let $e = $(this)
        console.log($e)
        $e.removeAttr('style');
        if($e.data('fullWidthStyle'))
          $e.attr('style', $e.data('fullWidthStyle'));
        $e.removeData('fullWidthStyle');
        $e.removeData('fullWidth');
      })
      $(window).off('resize', base.makeFullWidth)
      base = null
    }

    // Run initializer
    base.init();
  };

  /**
   * jQuery plugin function
   * @function external:"jQuery.fn".fullWidth
   * @param {string} parentSelector The element(s) in the current jQuery selection will be made as wide as the first element in their parent tree that match this selector
   */
  $.fn.fullWidth = function(parentSelector, options) {
    return this.each(function(i,e,arr) {
      let $e = $(this)
      if ($e.data('fullWidth')){
        $e.data('fullWidth').options = $.extend({},{"parentSelector": parentSelector},options)
        $e.data('fullWidth').makeFullWidth()
      } else {
        let instance = new $.fullWidth(this, parentSelector, options);
        $(window).on('resize', instance.makeFullWidth)
        instance.makeFullWidth()
      }
    });
  };

})(jQuery); // Closure - END