مدیاویکی:Stickysidebar.js
نکته: پس از انتشار ممکن است برای دیدن تغییرات نیاز باشد که حافظهٔ نهانی مرورگر خود را پاک کنید.
- فایرفاکس / سافاری: کلید Shift را نگه دارید و روی دکمهٔ Reload کلیک کنید، یا کلیدهای Ctrl-F5 یا Ctrl-R را با هم فشار دهید (در رایانههای اپل مکینتاش کلیدهای ⌘-R)
- گوگل کروم: کلیدهای Ctrl+Shift+R را با هم فشار دهید (در رایانههای اپل مکینتاش کلیدهای ⌘-Shift-R)
- اینترنت اکسپلورر/ Edge: کلید Ctrl را نگهدارید و روی دکمهٔ Refresh کلیک کنید، یا کلیدهای Ctrl-F5 را با هم فشار دهید
- اپرا: Ctrl-F5 را بفشارید.
// https://blixhavn.github.io/sticky-sidebar-v2/js/rAF.js //
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// https://blixhavn.github.io/sticky-sidebar-v2/js/ResizeSensor.js
/**
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
* directory of this distribution and at
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
*/
;
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof exports === "object") {
module.exports = factory();
} else {
root.ResizeSensor = factory();
}
}(typeof window !== 'undefined' ? window : this, function () {
// Make sure it does not throw in a SSR (Server Side Rendering) situation
if (typeof window === "undefined") {
return null;
}
// Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
// In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
// would generate too many unnecessary events.
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (fn) {
return window.setTimeout(fn, 20);
};
/**
* Iterate over each of the provided element(s).
*
* @param {HTMLElement|HTMLElement[]} elements
* @param {Function} callback
*/
function forEachElement(elements, callback){
var elementsType = Object.prototype.toString.call(elements);
var isCollectionTyped = ('[object Array]' === elementsType
|| ('[object NodeList]' === elementsType)
|| ('[object HTMLCollection]' === elementsType)
|| ('[object Object]' === elementsType)
|| ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
|| ('undefined' !== typeof Elements && elements instanceof Elements) //mootools
);
var i = 0, j = elements.length;
if (isCollectionTyped) {
for (; i < j; i++) {
callback(elements[i]);
}
} else {
callback(elements);
}
}
/**
* Class for dimension change detection.
*
* @param {Element|Element[]|Elements|jQuery} element
* @param {Function} callback
*
* @constructor
*/
var ResizeSensor = function(element, callback) {
/**
*
* @constructor
*/
function EventQueue() {
var q = [];
this.add = function(ev) {
q.push(ev);
};
var i, j;
this.call = function() {
for (i = 0, j = q.length; i < j; i++) {
q[i].call();
}
};
this.remove = function(ev) {
var newQueue = [];
for(i = 0, j = q.length; i < j; i++) {
if(q[i] !== ev) newQueue.push(q[i]);
}
q = newQueue;
}
this.length = function() {
return q.length;
}
}
/**
*
* @param {HTMLElement} element
* @param {Function} resized
*/
function attachResizeEvent(element, resized) {
if (!element) return;
if (element.resizedAttached) {
element.resizedAttached.add(resized);
return;
}
element.resizedAttached = new EventQueue();
element.resizedAttached.add(resized);
element.resizeSensor = document.createElement('div');
element.resizeSensor.className = 'resize-sensor';
var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
element.resizeSensor.style.cssText = style;
element.resizeSensor.innerHTML =
'<div class="resize-sensor-expand" style="' + style + '">' +
'<div style="' + styleChild + '"></div>' +
'</div>' +
'<div class="resize-sensor-shrink" style="' + style + '">' +
'<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
'</div>';
element.appendChild(element.resizeSensor);
if (element.resizeSensor.offsetParent !== element) {
element.style.position = 'relative';
}
var expand = element.resizeSensor.childNodes[0];
var expandChild = expand.childNodes[0];
var shrink = element.resizeSensor.childNodes[1];
var dirty, rafId, newWidth, newHeight;
var lastWidth = element.offsetWidth;
var lastHeight = element.offsetHeight;
var reset = function() {
expandChild.style.width = '100000px';
expandChild.style.height = '100000px';
expand.scrollLeft = 100000;
expand.scrollTop = 100000;
shrink.scrollLeft = 100000;
shrink.scrollTop = 100000;
};
reset();
var onResized = function() {
rafId = 0;
if (!dirty) return;
lastWidth = newWidth;
lastHeight = newHeight;
if (element.resizedAttached) {
element.resizedAttached.call();
}
};
var onScroll = function() {
newWidth = element.offsetWidth;
newHeight = element.offsetHeight;
dirty = newWidth != lastWidth || newHeight != lastHeight;
if (dirty && !rafId) {
rafId = requestAnimationFrame(onResized);
}
reset();
};
var addEvent = function(el, name, cb) {
if (el.attachEvent) {
el.attachEvent('on' + name, cb);
} else {
el.addEventListener(name, cb);
}
};
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
}
forEachElement(element, function(elem){
attachResizeEvent(elem, callback);
});
this.detach = function(ev) {
ResizeSensor.detach(element, ev);
};
};
ResizeSensor.detach = function(element, ev) {
forEachElement(element, function(elem){
if (!elem) return
if(elem.resizedAttached && typeof ev == "function"){
elem.resizedAttached.remove(ev);
if(elem.resizedAttached.length()) return;
}
if (elem.resizeSensor) {
if (elem.contains(elem.resizeSensor)) {
elem.removeChild(elem.resizeSensor);
}
delete elem.resizeSensor;
delete elem.resizedAttached;
}
});
};
return ResizeSensor;
}));
// https://blixhavn.github.io/sticky-sidebar-v2/js/sticky-sidebar.js
(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 JavaScript Plugin.
* @version 3.3.4
* @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
* @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.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
var stickySidebar = new StickySidebar('#mw-panel', {
// topSpacing: 20,
// bottomSpacing: 20,
//containerSelector: '#mw-navigation',
// innerWrapperSelector: false
});