(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (factory((global.StickySidebar = {}))); }(this, (function (exports) { 'use strict'; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; function unwrapExports (x) { return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; } function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var stickySidebar = createCommonjsModule(function (module, exports) { (function (global, factory) { if (typeof undefined === "function" && undefined.amd) { undefined(['exports'], factory); } else { factory(exports); } })(commonjsGlobal, function (exports) { Object.defineProperty(exports, "__esModule", { value: true }); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i * @license The MIT License (MIT) */ var StickySidebar = function () { // --------------------------------- // # Define Constants // --------------------------------- // var EVENT_KEY = '.stickySidebar'; var DEFAULTS = { /** * Additional top spacing of the element when it becomes sticky. * @type {Numeric|Function} */ topSpacing: 0, /** * Additional bottom spacing of the element when it becomes sticky. * @type {Numeric|Function} */ bottomSpacing: 0, /** * Container sidebar selector to know what the beginning and end of sticky element. * @type {String|False} */ containerSelector: false, /** * Inner wrapper selector. * @type {String} */ innerWrapperSelector: '.inner-wrapper-sticky', /** * The name of CSS class to apply to elements when they have become stuck. * @type {String|False} */ stickyClass: 'is-affixed', /** * Detect when sidebar and its container change height so re-calculate their dimensions. * @type {Boolean} */ resizeSensor: true, /** * The sidebar returns to its normal position if its width below this value. * @type {Numeric} */ minWidth: false }; // --------------------------------- // # Class Definition // --------------------------------- // /** * Sticky Sidebar Class. * @public */ var StickySidebar = function () { /** * Sticky Sidebar Constructor. * @constructor * @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector. * @param {Object} options - The options of sticky sidebar. */ function StickySidebar(sidebar) { var _this = this; var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; _classCallCheck(this, StickySidebar); this.options = StickySidebar.extend(DEFAULTS, options); // Sidebar element query if there's no one, throw error. this.sidebar = 'string' === typeof sidebar ? document.querySelector(sidebar) : sidebar; if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element."); this.sidebarInner = false; this.container = this.sidebar.parentElement; // Current Affix Type of sidebar element. this.affixedType = 'STATIC'; this.direction = 'down'; this.support = { transform: false, transform3d: false }; this._initialized = false; this._reStyle = false; this._breakpoint = false; // Dimensions of sidebar, container and screen viewport. this.dimensions = { translateY: 0, maxTranslateY: 0, topSpacing: 0, lastTopSpacing: 0, bottomSpacing: 0, lastBottomSpacing: 0, sidebarHeight: 0, sidebarWidth: 0, containerTop: 0, containerHeight: 0, viewportHeight: 0, viewportTop: 0, lastViewportTop: 0 }; // Bind event handlers for referencability. ['handleEvent'].forEach(function (method) { _this[method] = _this[method].bind(_this); }); // Initialize sticky sidebar for first time. this.initialize(); } /** * Initializes the sticky sidebar by adding inner wrapper, define its container, * min-width breakpoint, calculating dimensions, adding helper classes and inline style. * @private */ _createClass(StickySidebar, [{ key: 'initialize', value: function initialize() { var _this2 = this; this._setSupportFeatures(); // Get sticky sidebar inner wrapper, if not found, will create one. if (this.options.innerWrapperSelector) { this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector); if (null === this.sidebarInner) this.sidebarInner = false; } if (!this.sidebarInner) { var wrapper = document.createElement('div'); wrapper.setAttribute('class', 'inner-wrapper-sticky'); this.sidebar.appendChild(wrapper); while (this.sidebar.firstChild != wrapper) { wrapper.appendChild(this.sidebar.firstChild); }this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky'); } // Container wrapper of the sidebar. if (this.options.containerSelector) { var containers = document.querySelectorAll(this.options.containerSelector); containers = Array.prototype.slice.call(containers); containers.forEach(function (container, item) { if (!container.contains(_this2.sidebar)) return; _this2.container = container; }); if (!containers.length) throw new Error("The container does not contains on the sidebar."); } // If top/bottom spacing is not function parse value to integer. if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0; if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0; // Breakdown sticky sidebar if screen width below `options.minWidth`. this._widthBreakpoint(); // Calculate dimensions of sidebar, container and viewport. this.calcDimensions(); // Affix sidebar in proper position. this.stickyPosition(); // Bind all events. this.bindEvents(); // Inform other properties the sticky sidebar is initialized. this._initialized = true; } }, { key: 'bindEvents', value: function bindEvents() { window.addEventListener('resize', this, { passive: true, capture: false }); window.addEventListener('scroll', this, { passive: true, capture: false }); this.sidebar.addEventListener('update' + EVENT_KEY, this); if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) { new ResizeSensor(this.sidebarInner, this.handleEvent); new ResizeSensor(this.container, this.handleEvent); } } }, { key: 'handleEvent', value: function handleEvent(event) { this.updateSticky(event); } }, { key: 'calcDimensions', value: function calcDimensions() { if (this._breakpoint) return; var dims = this.dimensions; // Container of sticky sidebar dimensions. dims.containerTop = StickySidebar.offsetRelative(this.container).top; dims.containerHeight = this.container.clientHeight; dims.containerBottom = dims.containerTop + dims.containerHeight; // Sidebar dimensions. dims.sidebarHeight = this.sidebarInner.offsetHeight; dims.sidebarWidth = this.sidebarInner.offsetWidth; // Screen viewport dimensions. dims.viewportHeight = window.innerHeight; // Maximum sidebar translate Y. dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight; this._calcDimensionsWithScroll(); } }, { key: '_calcDimensionsWithScroll', value: function _calcDimensionsWithScroll() { var dims = this.dimensions; dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left; dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop; dims.viewportBottom = dims.viewportTop + dims.viewportHeight; dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft; dims.topSpacing = this.options.topSpacing; dims.bottomSpacing = this.options.bottomSpacing; if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0; if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0; if ('VIEWPORT-TOP' === this.affixedType) { // Adjust translate Y in the case decrease top spacing value. if (dims.topSpacing = dims.containerBottom) { dims.translateY = dims.containerBottom - sidebarBottom; affixType = 'CONTAINER-BOTTOM'; } else if (colliderTop >= dims.containerTop) { dims.translateY = colliderTop - dims.containerTop; affixType = 'VIEWPORT-TOP'; } } else { if (dims.containerBottom 0 && arguments[0] !== undefined ? arguments[0] : {}; if (this._running) return; this._running = true; (function (eventType) { requestAnimationFrame(function () { switch (eventType) { // When browser is scrolling and re-calculate just dimensions // within scroll. case 'scroll': _this3._calcDimensionsWithScroll(); _this3.observeScrollDir(); _this3.stickyPosition(); break; // When browser is resizing or there's no event, observe width // breakpoint and re-calculate dimensions. case 'resize': default: _this3._widthBreakpoint(); _this3.calcDimensions(); _this3.stickyPosition(true); break; } _this3._running = false; }); })(event.type); } }, { key: '_setSupportFeatures', value: function _setSupportFeatures() { var support = this.support; support.transform = StickySidebar.supportTransform(); support.transform3d = StickySidebar.supportTransform(true); } }, { key: '_getTranslate', value: function _getTranslate() { var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false; } }, { key: 'destroy', value: function destroy() { window.removeEventListener('resize', this, { capture: false }); window.removeEventListener('scroll', this, { capture: false }); this.sidebar.classList.remove(this.options.stickyClass); this.sidebar.style.minHeight = ''; this.sidebar.removeEventListener('update' + EVENT_KEY, this); var styleReset = { inner: {}, outer: {} }; styleReset.inner = { position: '', top: '', left: '', bottom: '', width: '', transform: '' }; styleReset.outer = { height: '', position: '' }; for (var key in styleReset.outer) { this.sidebar.style[key] = styleReset.outer[key]; }for (var _key2 in styleReset.inner) { this.sidebarInner.style[_key2] = styleReset.inner[_key2]; }if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) { ResizeSensor.detach(this.sidebarInner, this.handleEvent); ResizeSensor.detach(this.container, this.handleEvent); } } }], [{ key: 'supportTransform', value: function supportTransform(transform3d) { var result = false, property = transform3d ? 'perspective' : 'transform', upper = property.charAt(0).toUpperCase() + property.slice(1), prefixes = ['Webkit', 'Moz', 'O', 'ms'], support = document.createElement('support'), style = support.style; (property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) { if (style[property] !== undefined) { result = property; return false; } }); return result; } }, { key: 'eventTrigger', value: function eventTrigger(element, eventName, data) { try { var event = new CustomEvent(eventName, { detail: data }); } catch (e) { var event = document.createEvent('CustomEvent'); event.initCustomEvent(eventName, true, true, data); } element.dispatchEvent(event); } }, { key: 'extend', value: function extend(defaults, options) { var results = {}; for (var key in defaults) { if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key]; } return results; } }, { key: 'offsetRelative', value: function offsetRelative(element) { var result = { left: 0, top: 0 }; do { var offsetTop = element.offsetTop; var offsetLeft = element.offsetLeft; if (!isNaN(offsetTop)) result.top += offsetTop; if (!isNaN(offsetLeft)) result.left += offsetLeft; element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent; } while (element); return result; } }, { key: 'addClass', value: function addClass(element, className) { if (!StickySidebar.hasClass(element, className)) { if (element.classList) element.classList.add(className);else element.className += ' ' + className; } } }, { key: 'removeClass', value: function removeClass(element, className) { if (StickySidebar.hasClass(element, className)) { if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } } }, { key: 'hasClass', value: function hasClass(element, className) { if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className); } }, { key: 'defaults', get: function () { return DEFAULTS; } }]); return StickySidebar; }(); return StickySidebar; }(); exports.default = StickySidebar; // Global // ------------------------- window.StickySidebar = StickySidebar; }); }); var stickySidebar$1 = unwrapExports(stickySidebar); exports['default'] = stickySidebar$1; exports.__moduleExports = stickySidebar; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=sticky-sidebar.js.map