123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356 |
- /*!
- * perfect-scrollbar v1.5.3
- * Copyright 2021 Hyunje Jun, MDBootstrap and Contributors
- * Licensed under MIT
- */
- (function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
- typeof define === 'function' && define.amd ? define(factory) :
- (global = global || self, global.PerfectScrollbar = factory());
- }(this, (function () { 'use strict';
- function get(element) {
- return getComputedStyle(element);
- }
- function set(element, obj) {
- for (var key in obj) {
- var val = obj[key];
- if (typeof val === 'number') {
- val = val + "px";
- }
- element.style[key] = val;
- }
- return element;
- }
- function div(className) {
- var div = document.createElement('div');
- div.className = className;
- return div;
- }
- var elMatches =
- typeof Element !== 'undefined' &&
- (Element.prototype.matches ||
- Element.prototype.webkitMatchesSelector ||
- Element.prototype.mozMatchesSelector ||
- Element.prototype.msMatchesSelector);
- function matches(element, query) {
- if (!elMatches) {
- throw new Error('No element matching method supported');
- }
- return elMatches.call(element, query);
- }
- function remove(element) {
- if (element.remove) {
- element.remove();
- } else {
- if (element.parentNode) {
- element.parentNode.removeChild(element);
- }
- }
- }
- function queryChildren(element, selector) {
- return Array.prototype.filter.call(element.children, function (child) { return matches(child, selector); }
- );
- }
- var cls = {
- main: 'ps',
- rtl: 'ps__rtl',
- element: {
- thumb: function (x) { return ("ps__thumb-" + x); },
- rail: function (x) { return ("ps__rail-" + x); },
- consuming: 'ps__child--consume',
- },
- state: {
- focus: 'ps--focus',
- clicking: 'ps--clicking',
- active: function (x) { return ("ps--active-" + x); },
- scrolling: function (x) { return ("ps--scrolling-" + x); },
- },
- };
- /*
- * Helper methods
- */
- var scrollingClassTimeout = { x: null, y: null };
- function addScrollingClass(i, x) {
- var classList = i.element.classList;
- var className = cls.state.scrolling(x);
- if (classList.contains(className)) {
- clearTimeout(scrollingClassTimeout[x]);
- } else {
- classList.add(className);
- }
- }
- function removeScrollingClass(i, x) {
- scrollingClassTimeout[x] = setTimeout(
- function () { return i.isAlive && i.element.classList.remove(cls.state.scrolling(x)); },
- i.settings.scrollingThreshold
- );
- }
- function setScrollingClassInstantly(i, x) {
- addScrollingClass(i, x);
- removeScrollingClass(i, x);
- }
- var EventElement = function EventElement(element) {
- this.element = element;
- this.handlers = {};
- };
- var prototypeAccessors = { isEmpty: { configurable: true } };
- EventElement.prototype.bind = function bind (eventName, handler) {
- if (typeof this.handlers[eventName] === 'undefined') {
- this.handlers[eventName] = [];
- }
- this.handlers[eventName].push(handler);
- this.element.addEventListener(eventName, handler, {passive:false});
- };
- EventElement.prototype.unbind = function unbind (eventName, target) {
- var this$1 = this;
- this.handlers[eventName] = this.handlers[eventName].filter(function (handler) {
- if (target && handler !== target) {
- return true;
- }
- this$1.element.removeEventListener(eventName, handler, {passive:false});
- return false;
- });
- };
- EventElement.prototype.unbindAll = function unbindAll () {
- for (var name in this.handlers) {
- this.unbind(name);
- }
- };
- prototypeAccessors.isEmpty.get = function () {
- var this$1 = this;
- return Object.keys(this.handlers).every(
- function (key) { return this$1.handlers[key].length === 0; }
- );
- };
- Object.defineProperties( EventElement.prototype, prototypeAccessors );
- var EventManager = function EventManager() {
- this.eventElements = [];
- };
- EventManager.prototype.eventElement = function eventElement (element) {
- var ee = this.eventElements.filter(function (ee) { return ee.element === element; })[0];
- if (!ee) {
- ee = new EventElement(element);
- this.eventElements.push(ee);
- }
- return ee;
- };
- EventManager.prototype.bind = function bind (element, eventName, handler) {
- this.eventElement(element).bind(eventName, handler);
- };
- EventManager.prototype.unbind = function unbind (element, eventName, handler) {
- var ee = this.eventElement(element);
- ee.unbind(eventName, handler);
- if (ee.isEmpty) {
- // remove
- this.eventElements.splice(this.eventElements.indexOf(ee), 1);
- }
- };
- EventManager.prototype.unbindAll = function unbindAll () {
- this.eventElements.forEach(function (e) { return e.unbindAll(); });
- this.eventElements = [];
- };
- EventManager.prototype.once = function once (element, eventName, handler) {
- var ee = this.eventElement(element);
- var onceHandler = function (evt) {
- ee.unbind(eventName, onceHandler);
- handler(evt);
- };
- ee.bind(eventName, onceHandler);
- };
- function createEvent(name) {
- if (typeof window.CustomEvent === 'function') {
- return new CustomEvent(name);
- } else {
- var evt = document.createEvent('CustomEvent');
- evt.initCustomEvent(name, false, false, undefined);
- return evt;
- }
- }
- function processScrollDiff(
- i,
- axis,
- diff,
- useScrollingClass,
- forceFireReachEvent
- ) {
- if ( useScrollingClass === void 0 ) useScrollingClass = true;
- if ( forceFireReachEvent === void 0 ) forceFireReachEvent = false;
- var fields;
- if (axis === 'top') {
- fields = [
- 'contentHeight',
- 'containerHeight',
- 'scrollTop',
- 'y',
- 'up',
- 'down' ];
- } else if (axis === 'left') {
- fields = [
- 'contentWidth',
- 'containerWidth',
- 'scrollLeft',
- 'x',
- 'left',
- 'right' ];
- } else {
- throw new Error('A proper axis should be provided');
- }
- processScrollDiff$1(i, diff, fields, useScrollingClass, forceFireReachEvent);
- }
- function processScrollDiff$1(
- i,
- diff,
- ref,
- useScrollingClass,
- forceFireReachEvent
- ) {
- var contentHeight = ref[0];
- var containerHeight = ref[1];
- var scrollTop = ref[2];
- var y = ref[3];
- var up = ref[4];
- var down = ref[5];
- if ( useScrollingClass === void 0 ) useScrollingClass = true;
- if ( forceFireReachEvent === void 0 ) forceFireReachEvent = false;
- var element = i.element;
- // reset reach
- i.reach[y] = null;
- // 1 for subpixel rounding
- if (element[scrollTop] < 1) {
- i.reach[y] = 'start';
- }
- // 1 for subpixel rounding
- if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) {
- i.reach[y] = 'end';
- }
- if (diff) {
- element.dispatchEvent(createEvent(("ps-scroll-" + y)));
- if (diff < 0) {
- element.dispatchEvent(createEvent(("ps-scroll-" + up)));
- } else if (diff > 0) {
- element.dispatchEvent(createEvent(("ps-scroll-" + down)));
- }
- if (useScrollingClass) {
- setScrollingClassInstantly(i, y);
- }
- }
- if (i.reach[y] && (diff || forceFireReachEvent)) {
- element.dispatchEvent(createEvent(("ps-" + y + "-reach-" + (i.reach[y]))));
- }
- }
- function toInt(x) {
- return parseInt(x, 10) || 0;
- }
- function isEditable(el) {
- return (
- matches(el, 'input,[contenteditable]') ||
- matches(el, 'select,[contenteditable]') ||
- matches(el, 'textarea,[contenteditable]') ||
- matches(el, 'button,[contenteditable]')
- );
- }
- function outerWidth(element) {
- var styles = get(element);
- return (
- toInt(styles.width) +
- toInt(styles.paddingLeft) +
- toInt(styles.paddingRight) +
- toInt(styles.borderLeftWidth) +
- toInt(styles.borderRightWidth)
- );
- }
- var env = {
- isWebKit:
- typeof document !== 'undefined' &&
- 'WebkitAppearance' in document.documentElement.style,
- supportsTouch:
- typeof window !== 'undefined' &&
- ('ontouchstart' in window ||
- ('maxTouchPoints' in window.navigator &&
- window.navigator.maxTouchPoints > 0) ||
- (window.DocumentTouch && document instanceof window.DocumentTouch)),
- supportsIePointer:
- typeof navigator !== 'undefined' && navigator.msMaxTouchPoints,
- isChrome:
- typeof navigator !== 'undefined' &&
- /Chrome/i.test(navigator && navigator.userAgent),
- };
- function updateGeometry(i) {
- var element = i.element;
- var roundedScrollTop = Math.floor(element.scrollTop);
- var rect = element.getBoundingClientRect();
- i.containerWidth = Math.round(rect.width);
- i.containerHeight = Math.round(rect.height);
- i.contentWidth = element.scrollWidth;
- i.contentHeight = element.scrollHeight;
- if (!element.contains(i.scrollbarXRail)) {
- // clean up and append
- queryChildren(element, cls.element.rail('x')).forEach(function (el) { return remove(el); }
- );
- element.appendChild(i.scrollbarXRail);
- }
- if (!element.contains(i.scrollbarYRail)) {
- // clean up and append
- queryChildren(element, cls.element.rail('y')).forEach(function (el) { return remove(el); }
- );
- element.appendChild(i.scrollbarYRail);
- }
- if (
- !i.settings.suppressScrollX &&
- i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth
- ) {
- i.scrollbarXActive = true;
- i.railXWidth = i.containerWidth - i.railXMarginWidth;
- i.railXRatio = i.containerWidth / i.railXWidth;
- i.scrollbarXWidth = getThumbSize(
- i,
- toInt((i.railXWidth * i.containerWidth) / i.contentWidth)
- );
- i.scrollbarXLeft = toInt(
- ((i.negativeScrollAdjustment + element.scrollLeft) *
- (i.railXWidth - i.scrollbarXWidth)) /
- (i.contentWidth - i.containerWidth)
- );
- } else {
- i.scrollbarXActive = false;
- }
- if (
- !i.settings.suppressScrollY &&
- i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight
- ) {
- i.scrollbarYActive = true;
- i.railYHeight = i.containerHeight - i.railYMarginHeight;
- i.railYRatio = i.containerHeight / i.railYHeight;
- i.scrollbarYHeight = getThumbSize(
- i,
- toInt((i.railYHeight * i.containerHeight) / i.contentHeight)
- );
- i.scrollbarYTop = toInt(
- (roundedScrollTop * (i.railYHeight - i.scrollbarYHeight)) /
- (i.contentHeight - i.containerHeight)
- );
- } else {
- i.scrollbarYActive = false;
- }
- if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
- i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
- }
- if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
- i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
- }
- updateCss(element, i);
- if (i.scrollbarXActive) {
- element.classList.add(cls.state.active('x'));
- } else {
- element.classList.remove(cls.state.active('x'));
- i.scrollbarXWidth = 0;
- i.scrollbarXLeft = 0;
- element.scrollLeft = i.isRtl === true ? i.contentWidth : 0;
- }
- if (i.scrollbarYActive) {
- element.classList.add(cls.state.active('y'));
- } else {
- element.classList.remove(cls.state.active('y'));
- i.scrollbarYHeight = 0;
- i.scrollbarYTop = 0;
- element.scrollTop = 0;
- }
- }
- function getThumbSize(i, thumbSize) {
- if (i.settings.minScrollbarLength) {
- thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
- }
- if (i.settings.maxScrollbarLength) {
- thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
- }
- return thumbSize;
- }
- function updateCss(element, i) {
- var xRailOffset = { width: i.railXWidth };
- var roundedScrollTop = Math.floor(element.scrollTop);
- if (i.isRtl) {
- xRailOffset.left =
- i.negativeScrollAdjustment +
- element.scrollLeft +
- i.containerWidth -
- i.contentWidth;
- } else {
- xRailOffset.left = element.scrollLeft;
- }
- if (i.isScrollbarXUsingBottom) {
- xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;
- } else {
- xRailOffset.top = i.scrollbarXTop + roundedScrollTop;
- }
- set(i.scrollbarXRail, xRailOffset);
- var yRailOffset = { top: roundedScrollTop, height: i.railYHeight };
- if (i.isScrollbarYUsingRight) {
- if (i.isRtl) {
- yRailOffset.right =
- i.contentWidth -
- (i.negativeScrollAdjustment + element.scrollLeft) -
- i.scrollbarYRight -
- i.scrollbarYOuterWidth -
- 9;
- } else {
- yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
- }
- } else {
- if (i.isRtl) {
- yRailOffset.left =
- i.negativeScrollAdjustment +
- element.scrollLeft +
- i.containerWidth * 2 -
- i.contentWidth -
- i.scrollbarYLeft -
- i.scrollbarYOuterWidth;
- } else {
- yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
- }
- }
- set(i.scrollbarYRail, yRailOffset);
- set(i.scrollbarX, {
- left: i.scrollbarXLeft,
- width: i.scrollbarXWidth - i.railBorderXWidth,
- });
- set(i.scrollbarY, {
- top: i.scrollbarYTop,
- height: i.scrollbarYHeight - i.railBorderYWidth,
- });
- }
- function clickRail(i) {
- var element = i.element;
- i.event.bind(i.scrollbarY, 'mousedown', function (e) { return e.stopPropagation(); });
- i.event.bind(i.scrollbarYRail, 'mousedown', function (e) {
- var positionTop =
- e.pageY -
- window.pageYOffset -
- i.scrollbarYRail.getBoundingClientRect().top;
- var direction = positionTop > i.scrollbarYTop ? 1 : -1;
- i.element.scrollTop += direction * i.containerHeight;
- updateGeometry(i);
- e.stopPropagation();
- });
- i.event.bind(i.scrollbarX, 'mousedown', function (e) { return e.stopPropagation(); });
- i.event.bind(i.scrollbarXRail, 'mousedown', function (e) {
- var positionLeft =
- e.pageX -
- window.pageXOffset -
- i.scrollbarXRail.getBoundingClientRect().left;
- var direction = positionLeft > i.scrollbarXLeft ? 1 : -1;
- i.element.scrollLeft += direction * i.containerWidth;
- updateGeometry(i);
- e.stopPropagation();
- });
- }
- function dragThumb(i) {
- bindMouseScrollHandler(i, [
- 'containerWidth',
- 'contentWidth',
- 'pageX',
- 'railXWidth',
- 'scrollbarX',
- 'scrollbarXWidth',
- 'scrollLeft',
- 'x',
- 'scrollbarXRail' ]);
- bindMouseScrollHandler(i, [
- 'containerHeight',
- 'contentHeight',
- 'pageY',
- 'railYHeight',
- 'scrollbarY',
- 'scrollbarYHeight',
- 'scrollTop',
- 'y',
- 'scrollbarYRail' ]);
- }
- function bindMouseScrollHandler(
- i,
- ref
- ) {
- var containerHeight = ref[0];
- var contentHeight = ref[1];
- var pageY = ref[2];
- var railYHeight = ref[3];
- var scrollbarY = ref[4];
- var scrollbarYHeight = ref[5];
- var scrollTop = ref[6];
- var y = ref[7];
- var scrollbarYRail = ref[8];
- var element = i.element;
- var startingScrollTop = null;
- var startingMousePageY = null;
- var scrollBy = null;
- function mouseMoveHandler(e) {
- if (e.touches && e.touches[0]) {
- e[pageY] = e.touches[0].pageY;
- }
- element[scrollTop] =
- startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
- addScrollingClass(i, y);
- updateGeometry(i);
- e.stopPropagation();
- if (e.type.startsWith('touch') && e.changedTouches.length > 1) {
- e.preventDefault();
- }
- }
- function mouseUpHandler() {
- removeScrollingClass(i, y);
- i[scrollbarYRail].classList.remove(cls.state.clicking);
- i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
- }
- function bindMoves(e, touchMode) {
- startingScrollTop = element[scrollTop];
- if (touchMode && e.touches) {
- e[pageY] = e.touches[0].pageY;
- }
- startingMousePageY = e[pageY];
- scrollBy =
- (i[contentHeight] - i[containerHeight]) /
- (i[railYHeight] - i[scrollbarYHeight]);
- if (!touchMode) {
- i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
- i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
- e.preventDefault();
- } else {
- i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
- }
- i[scrollbarYRail].classList.add(cls.state.clicking);
- e.stopPropagation();
- }
- i.event.bind(i[scrollbarY], 'mousedown', function (e) {
- bindMoves(e);
- });
- i.event.bind(i[scrollbarY], 'touchstart', function (e) {
- bindMoves(e, true);
- });
- }
- function keyboard(i) {
- var element = i.element;
- var elementHovered = function () { return matches(element, ':hover'); };
- var scrollbarFocused = function () { return matches(i.scrollbarX, ':focus') || matches(i.scrollbarY, ':focus'); };
- function shouldPreventDefault(deltaX, deltaY) {
- var scrollTop = Math.floor(element.scrollTop);
- if (deltaX === 0) {
- if (!i.scrollbarYActive) {
- return false;
- }
- if (
- (scrollTop === 0 && deltaY > 0) ||
- (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)
- ) {
- return !i.settings.wheelPropagation;
- }
- }
- var scrollLeft = element.scrollLeft;
- if (deltaY === 0) {
- if (!i.scrollbarXActive) {
- return false;
- }
- if (
- (scrollLeft === 0 && deltaX < 0) ||
- (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)
- ) {
- return !i.settings.wheelPropagation;
- }
- }
- return true;
- }
- i.event.bind(i.ownerDocument, 'keydown', function (e) {
- if (
- (e.isDefaultPrevented && e.isDefaultPrevented()) ||
- e.defaultPrevented
- ) {
- return;
- }
- if (!elementHovered() && !scrollbarFocused()) {
- return;
- }
- var activeElement = document.activeElement
- ? document.activeElement
- : i.ownerDocument.activeElement;
- if (activeElement) {
- if (activeElement.tagName === 'IFRAME') {
- activeElement = activeElement.contentDocument.activeElement;
- } else {
- // go deeper if element is a webcomponent
- while (activeElement.shadowRoot) {
- activeElement = activeElement.shadowRoot.activeElement;
- }
- }
- if (isEditable(activeElement)) {
- return;
- }
- }
- var deltaX = 0;
- var deltaY = 0;
- switch (e.which) {
- case 37: // left
- if (e.metaKey) {
- deltaX = -i.contentWidth;
- } else if (e.altKey) {
- deltaX = -i.containerWidth;
- } else {
- deltaX = -30;
- }
- break;
- case 38: // up
- if (e.metaKey) {
- deltaY = i.contentHeight;
- } else if (e.altKey) {
- deltaY = i.containerHeight;
- } else {
- deltaY = 30;
- }
- break;
- case 39: // right
- if (e.metaKey) {
- deltaX = i.contentWidth;
- } else if (e.altKey) {
- deltaX = i.containerWidth;
- } else {
- deltaX = 30;
- }
- break;
- case 40: // down
- if (e.metaKey) {
- deltaY = -i.contentHeight;
- } else if (e.altKey) {
- deltaY = -i.containerHeight;
- } else {
- deltaY = -30;
- }
- break;
- case 32: // space bar
- if (e.shiftKey) {
- deltaY = i.containerHeight;
- } else {
- deltaY = -i.containerHeight;
- }
- break;
- case 33: // page up
- deltaY = i.containerHeight;
- break;
- case 34: // page down
- deltaY = -i.containerHeight;
- break;
- case 36: // home
- deltaY = i.contentHeight;
- break;
- case 35: // end
- deltaY = -i.contentHeight;
- break;
- default:
- return;
- }
- if (i.settings.suppressScrollX && deltaX !== 0) {
- return;
- }
- if (i.settings.suppressScrollY && deltaY !== 0) {
- return;
- }
- element.scrollTop -= deltaY;
- element.scrollLeft += deltaX;
- updateGeometry(i);
- if (shouldPreventDefault(deltaX, deltaY)) {
- e.preventDefault();
- }
- });
- }
- function wheel(i) {
- var element = i.element;
- function shouldPreventDefault(deltaX, deltaY) {
- var roundedScrollTop = Math.floor(element.scrollTop);
- var isTop = element.scrollTop === 0;
- var isBottom =
- roundedScrollTop + element.offsetHeight === element.scrollHeight;
- var isLeft = element.scrollLeft === 0;
- var isRight =
- element.scrollLeft + element.offsetWidth === element.scrollWidth;
- var hitsBound;
- // pick axis with primary direction
- if (Math.abs(deltaY) > Math.abs(deltaX)) {
- hitsBound = isTop || isBottom;
- } else {
- hitsBound = isLeft || isRight;
- }
- return hitsBound ? !i.settings.wheelPropagation : true;
- }
- function getDeltaFromEvent(e) {
- var deltaX = e.deltaX;
- var deltaY = -1 * e.deltaY;
- if (typeof deltaX === 'undefined' || typeof deltaY === 'undefined') {
- // OS X Safari
- deltaX = (-1 * e.wheelDeltaX) / 6;
- deltaY = e.wheelDeltaY / 6;
- }
- if (e.deltaMode && e.deltaMode === 1) {
- // Firefox in deltaMode 1: Line scrolling
- deltaX *= 10;
- deltaY *= 10;
- }
- if (deltaX !== deltaX && deltaY !== deltaY /* NaN checks */) {
- // IE in some mouse drivers
- deltaX = 0;
- deltaY = e.wheelDelta;
- }
- if (e.shiftKey) {
- // reverse axis with shift key
- return [-deltaY, -deltaX];
- }
- return [deltaX, deltaY];
- }
- function shouldBeConsumedByChild(target, deltaX, deltaY) {
- // FIXME: this is a workaround for <select> issue in FF and IE #571
- if (!env.isWebKit && element.querySelector('select:focus')) {
- return true;
- }
- if (!element.contains(target)) {
- return false;
- }
- var cursor = target;
- while (cursor && cursor !== element) {
- if (cursor.classList.contains(cls.element.consuming)) {
- return true;
- }
- var style = get(cursor);
- // if deltaY && vertical scrollable
- if (deltaY && style.overflowY.match(/(scroll|auto)/)) {
- var maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
- if (maxScrollTop > 0) {
- if (
- (cursor.scrollTop > 0 && deltaY < 0) ||
- (cursor.scrollTop < maxScrollTop && deltaY > 0)
- ) {
- return true;
- }
- }
- }
- // if deltaX && horizontal scrollable
- if (deltaX && style.overflowX.match(/(scroll|auto)/)) {
- var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
- if (maxScrollLeft > 0) {
- if (
- (cursor.scrollLeft > 0 && deltaX < 0) ||
- (cursor.scrollLeft < maxScrollLeft && deltaX > 0)
- ) {
- return true;
- }
- }
- }
- cursor = cursor.parentNode;
- }
- return false;
- }
- function mousewheelHandler(e) {
- var ref = getDeltaFromEvent(e);
- var deltaX = ref[0];
- var deltaY = ref[1];
- if (shouldBeConsumedByChild(e.target, deltaX, deltaY)) {
- return;
- }
- var shouldPrevent = false;
- if (!i.settings.useBothWheelAxes) {
- // deltaX will only be used for horizontal scrolling and deltaY will
- // only be used for vertical scrolling - this is the default
- element.scrollTop -= deltaY * i.settings.wheelSpeed;
- element.scrollLeft += deltaX * i.settings.wheelSpeed;
- } else if (i.scrollbarYActive && !i.scrollbarXActive) {
- // only vertical scrollbar is active and useBothWheelAxes option is
- // active, so let's scroll vertical bar using both mouse wheel axes
- if (deltaY) {
- element.scrollTop -= deltaY * i.settings.wheelSpeed;
- } else {
- element.scrollTop += deltaX * i.settings.wheelSpeed;
- }
- shouldPrevent = true;
- } else if (i.scrollbarXActive && !i.scrollbarYActive) {
- // useBothWheelAxes and only horizontal bar is active, so use both
- // wheel axes for horizontal bar
- if (deltaX) {
- element.scrollLeft += deltaX * i.settings.wheelSpeed;
- } else {
- element.scrollLeft -= deltaY * i.settings.wheelSpeed;
- }
- shouldPrevent = true;
- }
- updateGeometry(i);
- shouldPrevent = shouldPrevent || shouldPreventDefault(deltaX, deltaY);
- if (shouldPrevent && !e.ctrlKey) {
- e.stopPropagation();
- e.preventDefault();
- }
- }
- if (typeof window.onwheel !== 'undefined') {
- i.event.bind(element, 'wheel', mousewheelHandler);
- } else if (typeof window.onmousewheel !== 'undefined') {
- i.event.bind(element, 'mousewheel', mousewheelHandler);
- }
- }
- function touch(i) {
- if (!env.supportsTouch && !env.supportsIePointer) {
- return;
- }
- var element = i.element;
- function shouldPrevent(deltaX, deltaY) {
- var scrollTop = Math.floor(element.scrollTop);
- var scrollLeft = element.scrollLeft;
- var magnitudeX = Math.abs(deltaX);
- var magnitudeY = Math.abs(deltaY);
- if (magnitudeY > magnitudeX) {
- // user is perhaps trying to swipe up/down the page
- if (
- (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
- (deltaY > 0 && scrollTop === 0)
- ) {
- // set prevent for mobile Chrome refresh
- return window.scrollY === 0 && deltaY > 0 && env.isChrome;
- }
- } else if (magnitudeX > magnitudeY) {
- // user is perhaps trying to swipe left/right across the page
- if (
- (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
- (deltaX > 0 && scrollLeft === 0)
- ) {
- return true;
- }
- }
- return true;
- }
- function applyTouchMove(differenceX, differenceY) {
- element.scrollTop -= differenceY;
- element.scrollLeft -= differenceX;
- updateGeometry(i);
- }
- var startOffset = {};
- var startTime = 0;
- var speed = {};
- var easingLoop = null;
- function getTouch(e) {
- if (e.targetTouches) {
- return e.targetTouches[0];
- } else {
- // Maybe IE pointer
- return e;
- }
- }
- function shouldHandle(e) {
- if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
- return false;
- }
- if (e.targetTouches && e.targetTouches.length === 1) {
- return true;
- }
- if (
- e.pointerType &&
- e.pointerType !== 'mouse' &&
- e.pointerType !== e.MSPOINTER_TYPE_MOUSE
- ) {
- return true;
- }
- return false;
- }
- function touchStart(e) {
- if (!shouldHandle(e)) {
- return;
- }
- var touch = getTouch(e);
- startOffset.pageX = touch.pageX;
- startOffset.pageY = touch.pageY;
- startTime = new Date().getTime();
- if (easingLoop !== null) {
- clearInterval(easingLoop);
- }
- }
- function shouldBeConsumedByChild(target, deltaX, deltaY) {
- if (!element.contains(target)) {
- return false;
- }
- var cursor = target;
- while (cursor && cursor !== element) {
- if (cursor.classList.contains(cls.element.consuming)) {
- return true;
- }
- var style = get(cursor);
- // if deltaY && vertical scrollable
- if (deltaY && style.overflowY.match(/(scroll|auto)/)) {
- var maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
- if (maxScrollTop > 0) {
- if (
- (cursor.scrollTop > 0 && deltaY < 0) ||
- (cursor.scrollTop < maxScrollTop && deltaY > 0)
- ) {
- return true;
- }
- }
- }
- // if deltaX && horizontal scrollable
- if (deltaX && style.overflowX.match(/(scroll|auto)/)) {
- var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
- if (maxScrollLeft > 0) {
- if (
- (cursor.scrollLeft > 0 && deltaX < 0) ||
- (cursor.scrollLeft < maxScrollLeft && deltaX > 0)
- ) {
- return true;
- }
- }
- }
- cursor = cursor.parentNode;
- }
- return false;
- }
- function touchMove(e) {
- if (shouldHandle(e)) {
- var touch = getTouch(e);
- var currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
- var differenceX = currentOffset.pageX - startOffset.pageX;
- var differenceY = currentOffset.pageY - startOffset.pageY;
- if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
- return;
- }
- applyTouchMove(differenceX, differenceY);
- startOffset = currentOffset;
- var currentTime = new Date().getTime();
- var timeGap = currentTime - startTime;
- if (timeGap > 0) {
- speed.x = differenceX / timeGap;
- speed.y = differenceY / timeGap;
- startTime = currentTime;
- }
- if (shouldPrevent(differenceX, differenceY)) {
- e.preventDefault();
- }
- }
- }
- function touchEnd() {
- if (i.settings.swipeEasing) {
- clearInterval(easingLoop);
- easingLoop = setInterval(function() {
- if (i.isInitialized) {
- clearInterval(easingLoop);
- return;
- }
- if (!speed.x && !speed.y) {
- clearInterval(easingLoop);
- return;
- }
- if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
- clearInterval(easingLoop);
- return;
- }
- if (!i.element) {
- clearInterval(easingLoop);
- return;
- }
- applyTouchMove(speed.x * 30, speed.y * 30);
- speed.x *= 0.8;
- speed.y *= 0.8;
- }, 10);
- }
- }
- if (env.supportsTouch) {
- i.event.bind(element, 'touchstart', touchStart);
- i.event.bind(element, 'touchmove', touchMove);
- i.event.bind(element, 'touchend', touchEnd);
- } else if (env.supportsIePointer) {
- if (window.PointerEvent) {
- i.event.bind(element, 'pointerdown', touchStart);
- i.event.bind(element, 'pointermove', touchMove);
- i.event.bind(element, 'pointerup', touchEnd);
- } else if (window.MSPointerEvent) {
- i.event.bind(element, 'MSPointerDown', touchStart);
- i.event.bind(element, 'MSPointerMove', touchMove);
- i.event.bind(element, 'MSPointerUp', touchEnd);
- }
- }
- }
- var defaultSettings = function () { return ({
- handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
- maxScrollbarLength: null,
- minScrollbarLength: null,
- scrollingThreshold: 1000,
- scrollXMarginOffset: 0,
- scrollYMarginOffset: 0,
- suppressScrollX: false,
- suppressScrollY: false,
- swipeEasing: true,
- useBothWheelAxes: false,
- wheelPropagation: true,
- wheelSpeed: 1,
- }); };
- var handlers = {
- 'click-rail': clickRail,
- 'drag-thumb': dragThumb,
- keyboard: keyboard,
- wheel: wheel,
- touch: touch,
- };
- var PerfectScrollbar = function PerfectScrollbar(element, userSettings) {
- var this$1 = this;
- if ( userSettings === void 0 ) userSettings = {};
- if (typeof element === 'string') {
- element = document.querySelector(element);
- }
- if (!element || !element.nodeName) {
- throw new Error('no element is specified to initialize PerfectScrollbar');
- }
- this.element = element;
- element.classList.add(cls.main);
- this.settings = defaultSettings();
- for (var key in userSettings) {
- this.settings[key] = userSettings[key];
- }
- this.containerWidth = null;
- this.containerHeight = null;
- this.contentWidth = null;
- this.contentHeight = null;
- var focus = function () { return element.classList.add(cls.state.focus); };
- var blur = function () { return element.classList.remove(cls.state.focus); };
- this.isRtl = get(element).direction === 'rtl';
- if (this.isRtl === true) {
- element.classList.add(cls.rtl);
- }
- this.isNegativeScroll = (function () {
- var originalScrollLeft = element.scrollLeft;
- var result = null;
- element.scrollLeft = -1;
- result = element.scrollLeft < 0;
- element.scrollLeft = originalScrollLeft;
- return result;
- })();
- this.negativeScrollAdjustment = this.isNegativeScroll
- ? element.scrollWidth - element.clientWidth
- : 0;
- this.event = new EventManager();
- this.ownerDocument = element.ownerDocument || document;
- this.scrollbarXRail = div(cls.element.rail('x'));
- element.appendChild(this.scrollbarXRail);
- this.scrollbarX = div(cls.element.thumb('x'));
- this.scrollbarXRail.appendChild(this.scrollbarX);
- this.scrollbarX.setAttribute('tabindex', 0);
- this.event.bind(this.scrollbarX, 'focus', focus);
- this.event.bind(this.scrollbarX, 'blur', blur);
- this.scrollbarXActive = null;
- this.scrollbarXWidth = null;
- this.scrollbarXLeft = null;
- var railXStyle = get(this.scrollbarXRail);
- this.scrollbarXBottom = parseInt(railXStyle.bottom, 10);
- if (isNaN(this.scrollbarXBottom)) {
- this.isScrollbarXUsingBottom = false;
- this.scrollbarXTop = toInt(railXStyle.top);
- } else {
- this.isScrollbarXUsingBottom = true;
- }
- this.railBorderXWidth =
- toInt(railXStyle.borderLeftWidth) + toInt(railXStyle.borderRightWidth);
- // Set rail to display:block to calculate margins
- set(this.scrollbarXRail, { display: 'block' });
- this.railXMarginWidth =
- toInt(railXStyle.marginLeft) + toInt(railXStyle.marginRight);
- set(this.scrollbarXRail, { display: '' });
- this.railXWidth = null;
- this.railXRatio = null;
- this.scrollbarYRail = div(cls.element.rail('y'));
- element.appendChild(this.scrollbarYRail);
- this.scrollbarY = div(cls.element.thumb('y'));
- this.scrollbarYRail.appendChild(this.scrollbarY);
- this.scrollbarY.setAttribute('tabindex', 0);
- this.event.bind(this.scrollbarY, 'focus', focus);
- this.event.bind(this.scrollbarY, 'blur', blur);
- this.scrollbarYActive = null;
- this.scrollbarYHeight = null;
- this.scrollbarYTop = null;
- var railYStyle = get(this.scrollbarYRail);
- this.scrollbarYRight = parseInt(railYStyle.right, 10);
- if (isNaN(this.scrollbarYRight)) {
- this.isScrollbarYUsingRight = false;
- this.scrollbarYLeft = toInt(railYStyle.left);
- } else {
- this.isScrollbarYUsingRight = true;
- }
- this.scrollbarYOuterWidth = this.isRtl ? outerWidth(this.scrollbarY) : null;
- this.railBorderYWidth =
- toInt(railYStyle.borderTopWidth) + toInt(railYStyle.borderBottomWidth);
- set(this.scrollbarYRail, { display: 'block' });
- this.railYMarginHeight =
- toInt(railYStyle.marginTop) + toInt(railYStyle.marginBottom);
- set(this.scrollbarYRail, { display: '' });
- this.railYHeight = null;
- this.railYRatio = null;
- this.reach = {
- x:
- element.scrollLeft <= 0
- ? 'start'
- : element.scrollLeft >= this.contentWidth - this.containerWidth
- ? 'end'
- : null,
- y:
- element.scrollTop <= 0
- ? 'start'
- : element.scrollTop >= this.contentHeight - this.containerHeight
- ? 'end'
- : null,
- };
- this.isAlive = true;
- this.settings.handlers.forEach(function (handlerName) { return handlers[handlerName](this$1); });
- this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only
- this.lastScrollLeft = element.scrollLeft; // for onScroll only
- this.event.bind(this.element, 'scroll', function (e) { return this$1.onScroll(e); });
- updateGeometry(this);
- };
- PerfectScrollbar.prototype.update = function update () {
- if (!this.isAlive) {
- return;
- }
- // Recalcuate negative scrollLeft adjustment
- this.negativeScrollAdjustment = this.isNegativeScroll
- ? this.element.scrollWidth - this.element.clientWidth
- : 0;
- // Recalculate rail margins
- set(this.scrollbarXRail, { display: 'block' });
- set(this.scrollbarYRail, { display: 'block' });
- this.railXMarginWidth =
- toInt(get(this.scrollbarXRail).marginLeft) +
- toInt(get(this.scrollbarXRail).marginRight);
- this.railYMarginHeight =
- toInt(get(this.scrollbarYRail).marginTop) +
- toInt(get(this.scrollbarYRail).marginBottom);
- // Hide scrollbars not to affect scrollWidth and scrollHeight
- set(this.scrollbarXRail, { display: 'none' });
- set(this.scrollbarYRail, { display: 'none' });
- updateGeometry(this);
- processScrollDiff(this, 'top', 0, false, true);
- processScrollDiff(this, 'left', 0, false, true);
- set(this.scrollbarXRail, { display: '' });
- set(this.scrollbarYRail, { display: '' });
- };
- PerfectScrollbar.prototype.onScroll = function onScroll (e) {
- if (!this.isAlive) {
- return;
- }
- updateGeometry(this);
- processScrollDiff(this, 'top', this.element.scrollTop - this.lastScrollTop);
- processScrollDiff(
- this,
- 'left',
- this.element.scrollLeft - this.lastScrollLeft
- );
- this.lastScrollTop = Math.floor(this.element.scrollTop);
- this.lastScrollLeft = this.element.scrollLeft;
- };
- PerfectScrollbar.prototype.destroy = function destroy () {
- if (!this.isAlive) {
- return;
- }
- this.event.unbindAll();
- remove(this.scrollbarX);
- remove(this.scrollbarY);
- remove(this.scrollbarXRail);
- remove(this.scrollbarYRail);
- this.removePsClasses();
- // unset elements
- this.element = null;
- this.scrollbarX = null;
- this.scrollbarY = null;
- this.scrollbarXRail = null;
- this.scrollbarYRail = null;
- this.isAlive = false;
- };
- PerfectScrollbar.prototype.removePsClasses = function removePsClasses () {
- this.element.className = this.element.className
- .split(' ')
- .filter(function (name) { return !name.match(/^ps([-_].+|)$/); })
- .join(' ');
- };
- return PerfectScrollbar;
- })));
|