avvo-styleguide/source/javascripts/modules/avvo_ui/polyfills/position-sticky/container.js

Avvo styleguide

const Container = {}

/**
 * Creates an instance of Container
 *
 * @param element
 * @returns {Container}
 * @static
 * @public
 */
Container.create = function create(element) {
  return Object.create(Container).init(element)
}

/**
 * Constructor method
 *
 * @param element {HTMLElement}
 * @returns {Container}
 * @instance
 * @private
 */
Container.init = function init(element) {
  this.constructor       = Container
  this.$element          = global.$(element)
  this.paddingTop        = null
  this.paddingBottom     = null
  this.borderTopWidth    = null
  this.borderBottomWidth = null

  this.validatePosScheme()
  this.setLayoutProperties()

  return this
}

/**
 * Ensures that the container's position is at least 'relative' so that when the sticky element
 * is positioned absolutely it is positioned within its container
 *
 * @instance
 * @private
 */
Container.validatePosScheme = function validatePosScheme() {
  if (this.$element.css('position') === 'static') {
    this.$element.css('position', 'relative')
  }
}

/**
 * Caches several layout properties
 *
 * @instance
 * @private
 */
Container.setLayoutProperties = function setLayoutProperties() {
  this.paddingTop        = parseFloat(this.$element.css('paddingTop'))
  this.paddingBottom     = parseFloat(this.$element.css('paddingBottom'))
  this.borderTopWidth    = parseFloat(this.$element.css('borderTopWidth'))
  this.borderBottomWidth = parseFloat(this.$element.css('borderBottomWidth'))
}

module.exports = Container