708 lines
26 KiB
JavaScript
708 lines
26 KiB
JavaScript
(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 < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) defineProperties(Constructor, staticProps);
|
|
return Constructor;
|
|
};
|
|
}();
|
|
|
|
/**
|
|
* Sticky Sidebar v2 JavaScript Plugin.
|
|
* @version 1.0.1
|
|
* @author Øystein Blixhavn <oystein@blixhavn.no>
|
|
* @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,
|
|
|
|
/**
|
|
* Parent element where the scrolling happens.
|
|
*/
|
|
scrollContainer: 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.");
|
|
}
|
|
|
|
// Get scroll container, if provided
|
|
this.scrollContainer = this.options.scrollContainer ? document.querySelector(this.options.scrollContainer) : undefined;
|
|
|
|
// 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() {
|
|
this.eventTarget = this.scrollContainer ? this.scrollContainer : window;
|
|
|
|
this.eventTarget.addEventListener('resize', this, { passive: true, capture: false });
|
|
this.eventTarget.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;
|
|
|
|
if (this.scrollContainer) {
|
|
dims.viewportTop = this.scrollContainer.scrollTop;
|
|
dims.viewportLeft = this.scrollContainer.scrollLeft;
|
|
} else {
|
|
dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
|
}
|
|
dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
|
|
|
|
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.lastTopSpacing) {
|
|
dims.translateY += dims.lastTopSpacing - dims.topSpacing;
|
|
this._reStyle = true;
|
|
}
|
|
} else if ('VIEWPORT-BOTTOM' === this.affixedType) {
|
|
// Adjust translate Y in the case decrease bottom spacing value.
|
|
if (dims.bottomSpacing < dims.lastBottomSpacing) {
|
|
dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
|
|
this._reStyle = true;
|
|
}
|
|
}
|
|
|
|
dims.lastTopSpacing = dims.topSpacing;
|
|
dims.lastBottomSpacing = dims.bottomSpacing;
|
|
}
|
|
}, {
|
|
key: 'isSidebarFitsViewport',
|
|
value: function isSidebarFitsViewport() {
|
|
var dims = this.dimensions;
|
|
var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
|
|
return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
|
|
}
|
|
}, {
|
|
key: 'observeScrollDir',
|
|
value: function observeScrollDir() {
|
|
var dims = this.dimensions;
|
|
if (dims.lastViewportTop === dims.viewportTop) return;
|
|
|
|
var furthest = 'down' === this.direction ? Math.min : Math.max;
|
|
|
|
// If the browser is scrolling not in the same direction.
|
|
if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down';
|
|
}
|
|
}, {
|
|
key: 'getAffixType',
|
|
value: function getAffixType() {
|
|
this._calcDimensionsWithScroll();
|
|
var dims = this.dimensions;
|
|
var colliderTop = dims.viewportTop + dims.topSpacing;
|
|
var affixType = this.affixedType;
|
|
|
|
if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) {
|
|
dims.translateY = 0;
|
|
affixType = 'STATIC';
|
|
} else {
|
|
affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
|
|
}
|
|
|
|
// Make sure the translate Y is not bigger than container height.
|
|
dims.translateY = Math.max(0, dims.translateY);
|
|
dims.translateY = Math.min(dims.containerHeight, dims.translateY);
|
|
dims.translateY = Math.round(dims.translateY);
|
|
|
|
dims.lastViewportTop = dims.viewportTop;
|
|
return affixType;
|
|
}
|
|
}, {
|
|
key: '_getAffixTypeScrollingDown',
|
|
value: function _getAffixTypeScrollingDown() {
|
|
var dims = this.dimensions;
|
|
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
|
var colliderTop = dims.viewportTop + dims.topSpacing;
|
|
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
|
var affixType = this.affixedType;
|
|
|
|
if (this.isSidebarFitsViewport()) {
|
|
if (dims.sidebarHeight + colliderTop >= 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 <= colliderBottom) {
|
|
dims.translateY = dims.containerBottom - sidebarBottom;
|
|
affixType = 'CONTAINER-BOTTOM';
|
|
} else if (sidebarBottom + dims.translateY <= colliderBottom) {
|
|
dims.translateY = colliderBottom - sidebarBottom;
|
|
affixType = 'VIEWPORT-BOTTOM';
|
|
} else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
|
|
affixType = 'VIEWPORT-UNBOTTOM';
|
|
}
|
|
}
|
|
|
|
return affixType;
|
|
}
|
|
}, {
|
|
key: '_getAffixTypeScrollingUp',
|
|
value: function _getAffixTypeScrollingUp() {
|
|
var dims = this.dimensions;
|
|
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
|
var colliderTop = dims.viewportTop + dims.topSpacing;
|
|
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
|
var affixType = this.affixedType;
|
|
|
|
if (colliderTop <= dims.translateY + dims.containerTop) {
|
|
dims.translateY = colliderTop - dims.containerTop;
|
|
affixType = 'VIEWPORT-TOP';
|
|
} else if (dims.containerBottom <= colliderBottom) {
|
|
dims.translateY = dims.containerBottom - sidebarBottom;
|
|
affixType = 'CONTAINER-BOTTOM';
|
|
} else if (!this.isSidebarFitsViewport()) {
|
|
|
|
if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
|
|
affixType = 'VIEWPORT-UNBOTTOM';
|
|
}
|
|
}
|
|
|
|
return affixType;
|
|
}
|
|
}, {
|
|
key: '_getStyle',
|
|
value: function _getStyle(affixType) {
|
|
if ('undefined' === typeof affixType) return;
|
|
|
|
var style = { inner: {}, outer: {} };
|
|
var dims = this.dimensions;
|
|
|
|
switch (affixType) {
|
|
case 'VIEWPORT-TOP':
|
|
style.inner = { position: 'fixed', top: dims.topSpacing,
|
|
left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth };
|
|
break;
|
|
case 'VIEWPORT-BOTTOM':
|
|
style.inner = { position: 'fixed', top: 'auto', left: dims.sidebarLeft,
|
|
bottom: dims.bottomSpacing, width: dims.sidebarWidth };
|
|
break;
|
|
case 'CONTAINER-BOTTOM':
|
|
case 'VIEWPORT-UNBOTTOM':
|
|
var translate = this._getTranslate(0, dims.translateY + 'px');
|
|
|
|
if (translate) style.inner = { transform: translate };else style.inner = { position: 'absolute', top: dims.translateY, width: dims.sidebarWidth };
|
|
break;
|
|
}
|
|
|
|
switch (affixType) {
|
|
case 'VIEWPORT-TOP':
|
|
case 'VIEWPORT-BOTTOM':
|
|
case 'VIEWPORT-UNBOTTOM':
|
|
case 'CONTAINER-BOTTOM':
|
|
style.outer = { height: dims.sidebarHeight, position: 'relative' };
|
|
break;
|
|
}
|
|
|
|
style.outer = StickySidebar.extend({ height: '', position: '' }, style.outer);
|
|
style.inner = StickySidebar.extend({ position: 'relative', top: '', left: '',
|
|
bottom: '', width: '', transform: '' }, style.inner);
|
|
|
|
return style;
|
|
}
|
|
}, {
|
|
key: 'stickyPosition',
|
|
value: function stickyPosition(force) {
|
|
if (this._breakpoint) return;
|
|
|
|
force = this._reStyle || force || false;
|
|
|
|
var offsetTop = this.options.topSpacing;
|
|
var offsetBottom = this.options.bottomSpacing;
|
|
|
|
var affixType = this.getAffixType();
|
|
var style = this._getStyle(affixType);
|
|
|
|
if ((this.affixedType != affixType || force) && affixType) {
|
|
var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
|
StickySidebar.eventTrigger(this.sidebar, affixEvent);
|
|
|
|
if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass);
|
|
|
|
for (var key in style.outer) {
|
|
var unit = 'number' === typeof style.outer[key] ? 'px' : '';
|
|
this.sidebar.style[key] = style.outer[key] + unit;
|
|
}
|
|
|
|
for (var _key in style.inner) {
|
|
var _unit = 'number' === typeof style.inner[_key] ? 'px' : '';
|
|
this.sidebarInner.style[_key] = style.inner[_key] + _unit;
|
|
}
|
|
|
|
var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
|
StickySidebar.eventTrigger(this.sidebar, affixedEvent);
|
|
} else {
|
|
if (this._initialized) this.sidebarInner.style.left = style.inner.left;
|
|
}
|
|
|
|
this.affixedType = affixType;
|
|
}
|
|
}, {
|
|
key: '_widthBreakpoint',
|
|
value: function _widthBreakpoint() {
|
|
|
|
if (window.innerWidth <= this.options.minWidth) {
|
|
this._breakpoint = true;
|
|
this.affixedType = 'STATIC';
|
|
|
|
this.sidebar.removeAttribute('style');
|
|
StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
|
|
this.sidebarInner.removeAttribute('style');
|
|
} else {
|
|
this._breakpoint = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'updateSticky',
|
|
value: function updateSticky() {
|
|
var _this3 = this;
|
|
|
|
var event = arguments.length > 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
|