perfect-scrollbar.esm.js 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341
  1. /*!
  2. * perfect-scrollbar v1.5.0
  3. * Copyright 2020 Hyunje Jun, MDBootstrap and Contributors
  4. * Licensed under MIT
  5. */
  6. function get(element) {
  7. return getComputedStyle(element);
  8. }
  9. function set(element, obj) {
  10. for (var key in obj) {
  11. var val = obj[key];
  12. if (typeof val === 'number') {
  13. val = val + "px";
  14. }
  15. element.style[key] = val;
  16. }
  17. return element;
  18. }
  19. function div(className) {
  20. var div = document.createElement('div');
  21. div.className = className;
  22. return div;
  23. }
  24. var elMatches =
  25. typeof Element !== 'undefined' &&
  26. (Element.prototype.matches ||
  27. Element.prototype.webkitMatchesSelector ||
  28. Element.prototype.mozMatchesSelector ||
  29. Element.prototype.msMatchesSelector);
  30. function matches(element, query) {
  31. if (!elMatches) {
  32. throw new Error('No element matching method supported');
  33. }
  34. return elMatches.call(element, query);
  35. }
  36. function remove(element) {
  37. if (element.remove) {
  38. element.remove();
  39. } else {
  40. if (element.parentNode) {
  41. element.parentNode.removeChild(element);
  42. }
  43. }
  44. }
  45. function queryChildren(element, selector) {
  46. return Array.prototype.filter.call(element.children, function (child) { return matches(child, selector); }
  47. );
  48. }
  49. var cls = {
  50. main: 'ps',
  51. rtl: 'ps__rtl',
  52. element: {
  53. thumb: function (x) { return ("ps__thumb-" + x); },
  54. rail: function (x) { return ("ps__rail-" + x); },
  55. consuming: 'ps__child--consume',
  56. },
  57. state: {
  58. focus: 'ps--focus',
  59. clicking: 'ps--clicking',
  60. active: function (x) { return ("ps--active-" + x); },
  61. scrolling: function (x) { return ("ps--scrolling-" + x); },
  62. },
  63. };
  64. /*
  65. * Helper methods
  66. */
  67. var scrollingClassTimeout = { x: null, y: null };
  68. function addScrollingClass(i, x) {
  69. var classList = i.element.classList;
  70. var className = cls.state.scrolling(x);
  71. if (classList.contains(className)) {
  72. clearTimeout(scrollingClassTimeout[x]);
  73. } else {
  74. classList.add(className);
  75. }
  76. }
  77. function removeScrollingClass(i, x) {
  78. scrollingClassTimeout[x] = setTimeout(
  79. function () { return i.isAlive && i.element.classList.remove(cls.state.scrolling(x)); },
  80. i.settings.scrollingThreshold
  81. );
  82. }
  83. function setScrollingClassInstantly(i, x) {
  84. addScrollingClass(i, x);
  85. removeScrollingClass(i, x);
  86. }
  87. var EventElement = function EventElement(element) {
  88. this.element = element;
  89. this.handlers = {};
  90. };
  91. var prototypeAccessors = { isEmpty: { configurable: true } };
  92. EventElement.prototype.bind = function bind (eventName, handler) {
  93. if (typeof this.handlers[eventName] === 'undefined') {
  94. this.handlers[eventName] = [];
  95. }
  96. this.handlers[eventName].push(handler);
  97. this.element.addEventListener(eventName, handler, false);
  98. };
  99. EventElement.prototype.unbind = function unbind (eventName, target) {
  100. var this$1 = this;
  101. this.handlers[eventName] = this.handlers[eventName].filter(function (handler) {
  102. if (target && handler !== target) {
  103. return true;
  104. }
  105. this$1.element.removeEventListener(eventName, handler, false);
  106. return false;
  107. });
  108. };
  109. EventElement.prototype.unbindAll = function unbindAll () {
  110. for (var name in this.handlers) {
  111. this.unbind(name);
  112. }
  113. };
  114. prototypeAccessors.isEmpty.get = function () {
  115. var this$1 = this;
  116. return Object.keys(this.handlers).every(
  117. function (key) { return this$1.handlers[key].length === 0; }
  118. );
  119. };
  120. Object.defineProperties( EventElement.prototype, prototypeAccessors );
  121. var EventManager = function EventManager() {
  122. this.eventElements = [];
  123. };
  124. EventManager.prototype.eventElement = function eventElement (element) {
  125. var ee = this.eventElements.filter(function (ee) { return ee.element === element; })[0];
  126. if (!ee) {
  127. ee = new EventElement(element);
  128. this.eventElements.push(ee);
  129. }
  130. return ee;
  131. };
  132. EventManager.prototype.bind = function bind (element, eventName, handler) {
  133. this.eventElement(element).bind(eventName, handler);
  134. };
  135. EventManager.prototype.unbind = function unbind (element, eventName, handler) {
  136. var ee = this.eventElement(element);
  137. ee.unbind(eventName, handler);
  138. if (ee.isEmpty) {
  139. // remove
  140. this.eventElements.splice(this.eventElements.indexOf(ee), 1);
  141. }
  142. };
  143. EventManager.prototype.unbindAll = function unbindAll () {
  144. this.eventElements.forEach(function (e) { return e.unbindAll(); });
  145. this.eventElements = [];
  146. };
  147. EventManager.prototype.once = function once (element, eventName, handler) {
  148. var ee = this.eventElement(element);
  149. var onceHandler = function (evt) {
  150. ee.unbind(eventName, onceHandler);
  151. handler(evt);
  152. };
  153. ee.bind(eventName, onceHandler);
  154. };
  155. function createEvent(name) {
  156. if (typeof window.CustomEvent === 'function') {
  157. return new CustomEvent(name);
  158. } else {
  159. var evt = document.createEvent('CustomEvent');
  160. evt.initCustomEvent(name, false, false, undefined);
  161. return evt;
  162. }
  163. }
  164. function processScrollDiff(
  165. i,
  166. axis,
  167. diff,
  168. useScrollingClass,
  169. forceFireReachEvent
  170. ) {
  171. if ( useScrollingClass === void 0 ) useScrollingClass = true;
  172. if ( forceFireReachEvent === void 0 ) forceFireReachEvent = false;
  173. var fields;
  174. if (axis === 'top') {
  175. fields = [
  176. 'contentHeight',
  177. 'containerHeight',
  178. 'scrollTop',
  179. 'y',
  180. 'up',
  181. 'down' ];
  182. } else if (axis === 'left') {
  183. fields = [
  184. 'contentWidth',
  185. 'containerWidth',
  186. 'scrollLeft',
  187. 'x',
  188. 'left',
  189. 'right' ];
  190. } else {
  191. throw new Error('A proper axis should be provided');
  192. }
  193. processScrollDiff$1(i, diff, fields, useScrollingClass, forceFireReachEvent);
  194. }
  195. function processScrollDiff$1(
  196. i,
  197. diff,
  198. ref,
  199. useScrollingClass,
  200. forceFireReachEvent
  201. ) {
  202. var contentHeight = ref[0];
  203. var containerHeight = ref[1];
  204. var scrollTop = ref[2];
  205. var y = ref[3];
  206. var up = ref[4];
  207. var down = ref[5];
  208. if ( useScrollingClass === void 0 ) useScrollingClass = true;
  209. if ( forceFireReachEvent === void 0 ) forceFireReachEvent = false;
  210. var element = i.element;
  211. // reset reach
  212. i.reach[y] = null;
  213. // 1 for subpixel rounding
  214. if (element[scrollTop] < 1) {
  215. i.reach[y] = 'start';
  216. }
  217. // 1 for subpixel rounding
  218. if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) {
  219. i.reach[y] = 'end';
  220. }
  221. if (diff) {
  222. element.dispatchEvent(createEvent(("ps-scroll-" + y)));
  223. if (diff < 0) {
  224. element.dispatchEvent(createEvent(("ps-scroll-" + up)));
  225. } else if (diff > 0) {
  226. element.dispatchEvent(createEvent(("ps-scroll-" + down)));
  227. }
  228. if (useScrollingClass) {
  229. setScrollingClassInstantly(i, y);
  230. }
  231. }
  232. if (i.reach[y] && (diff || forceFireReachEvent)) {
  233. element.dispatchEvent(createEvent(("ps-" + y + "-reach-" + (i.reach[y]))));
  234. }
  235. }
  236. function toInt(x) {
  237. return parseInt(x, 10) || 0;
  238. }
  239. function isEditable(el) {
  240. return (
  241. matches(el, 'input,[contenteditable]') ||
  242. matches(el, 'select,[contenteditable]') ||
  243. matches(el, 'textarea,[contenteditable]') ||
  244. matches(el, 'button,[contenteditable]')
  245. );
  246. }
  247. function outerWidth(element) {
  248. var styles = get(element);
  249. return (
  250. toInt(styles.width) +
  251. toInt(styles.paddingLeft) +
  252. toInt(styles.paddingRight) +
  253. toInt(styles.borderLeftWidth) +
  254. toInt(styles.borderRightWidth)
  255. );
  256. }
  257. var env = {
  258. isWebKit:
  259. typeof document !== 'undefined' &&
  260. 'WebkitAppearance' in document.documentElement.style,
  261. supportsTouch:
  262. typeof window !== 'undefined' &&
  263. ('ontouchstart' in window ||
  264. ('maxTouchPoints' in window.navigator &&
  265. window.navigator.maxTouchPoints > 0) ||
  266. (window.DocumentTouch && document instanceof window.DocumentTouch)),
  267. supportsIePointer:
  268. typeof navigator !== 'undefined' && navigator.msMaxTouchPoints,
  269. isChrome:
  270. typeof navigator !== 'undefined' &&
  271. /Chrome/i.test(navigator && navigator.userAgent),
  272. };
  273. function updateGeometry(i) {
  274. var element = i.element;
  275. var roundedScrollTop = Math.floor(element.scrollTop);
  276. var rect = element.getBoundingClientRect();
  277. i.containerWidth = Math.ceil(rect.width);
  278. i.containerHeight = Math.ceil(rect.height);
  279. i.contentWidth = element.scrollWidth;
  280. i.contentHeight = element.scrollHeight;
  281. if (!element.contains(i.scrollbarXRail)) {
  282. // clean up and append
  283. queryChildren(element, cls.element.rail('x')).forEach(function (el) { return remove(el); }
  284. );
  285. element.appendChild(i.scrollbarXRail);
  286. }
  287. if (!element.contains(i.scrollbarYRail)) {
  288. // clean up and append
  289. queryChildren(element, cls.element.rail('y')).forEach(function (el) { return remove(el); }
  290. );
  291. element.appendChild(i.scrollbarYRail);
  292. }
  293. if (
  294. !i.settings.suppressScrollX &&
  295. i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth
  296. ) {
  297. i.scrollbarXActive = true;
  298. i.railXWidth = i.containerWidth - i.railXMarginWidth;
  299. i.railXRatio = i.containerWidth / i.railXWidth;
  300. i.scrollbarXWidth = getThumbSize(
  301. i,
  302. toInt((i.railXWidth * i.containerWidth) / i.contentWidth)
  303. );
  304. i.scrollbarXLeft = toInt(
  305. ((i.negativeScrollAdjustment + element.scrollLeft) *
  306. (i.railXWidth - i.scrollbarXWidth)) /
  307. (i.contentWidth - i.containerWidth)
  308. );
  309. } else {
  310. i.scrollbarXActive = false;
  311. }
  312. if (
  313. !i.settings.suppressScrollY &&
  314. i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight
  315. ) {
  316. i.scrollbarYActive = true;
  317. i.railYHeight = i.containerHeight - i.railYMarginHeight;
  318. i.railYRatio = i.containerHeight / i.railYHeight;
  319. i.scrollbarYHeight = getThumbSize(
  320. i,
  321. toInt((i.railYHeight * i.containerHeight) / i.contentHeight)
  322. );
  323. i.scrollbarYTop = toInt(
  324. (roundedScrollTop * (i.railYHeight - i.scrollbarYHeight)) /
  325. (i.contentHeight - i.containerHeight)
  326. );
  327. } else {
  328. i.scrollbarYActive = false;
  329. }
  330. if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
  331. i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
  332. }
  333. if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
  334. i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
  335. }
  336. updateCss(element, i);
  337. if (i.scrollbarXActive) {
  338. element.classList.add(cls.state.active('x'));
  339. } else {
  340. element.classList.remove(cls.state.active('x'));
  341. i.scrollbarXWidth = 0;
  342. i.scrollbarXLeft = 0;
  343. element.scrollLeft = i.isRtl === true ? i.contentWidth : 0;
  344. }
  345. if (i.scrollbarYActive) {
  346. element.classList.add(cls.state.active('y'));
  347. } else {
  348. element.classList.remove(cls.state.active('y'));
  349. i.scrollbarYHeight = 0;
  350. i.scrollbarYTop = 0;
  351. element.scrollTop = 0;
  352. }
  353. }
  354. function getThumbSize(i, thumbSize) {
  355. if (i.settings.minScrollbarLength) {
  356. thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
  357. }
  358. if (i.settings.maxScrollbarLength) {
  359. thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
  360. }
  361. return thumbSize;
  362. }
  363. function updateCss(element, i) {
  364. var xRailOffset = { width: i.railXWidth };
  365. var roundedScrollTop = Math.floor(element.scrollTop);
  366. if (i.isRtl) {
  367. xRailOffset.left =
  368. i.negativeScrollAdjustment +
  369. element.scrollLeft +
  370. i.containerWidth -
  371. i.contentWidth;
  372. } else {
  373. xRailOffset.left = element.scrollLeft;
  374. }
  375. if (i.isScrollbarXUsingBottom) {
  376. xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;
  377. } else {
  378. xRailOffset.top = i.scrollbarXTop + roundedScrollTop;
  379. }
  380. set(i.scrollbarXRail, xRailOffset);
  381. var yRailOffset = { top: roundedScrollTop, height: i.railYHeight };
  382. if (i.isScrollbarYUsingRight) {
  383. if (i.isRtl) {
  384. yRailOffset.right =
  385. i.contentWidth -
  386. (i.negativeScrollAdjustment + element.scrollLeft) -
  387. i.scrollbarYRight -
  388. i.scrollbarYOuterWidth -
  389. 9;
  390. } else {
  391. yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
  392. }
  393. } else {
  394. if (i.isRtl) {
  395. yRailOffset.left =
  396. i.negativeScrollAdjustment +
  397. element.scrollLeft +
  398. i.containerWidth * 2 -
  399. i.contentWidth -
  400. i.scrollbarYLeft -
  401. i.scrollbarYOuterWidth;
  402. } else {
  403. yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
  404. }
  405. }
  406. set(i.scrollbarYRail, yRailOffset);
  407. set(i.scrollbarX, {
  408. left: i.scrollbarXLeft,
  409. width: i.scrollbarXWidth - i.railBorderXWidth,
  410. });
  411. set(i.scrollbarY, {
  412. top: i.scrollbarYTop,
  413. height: i.scrollbarYHeight - i.railBorderYWidth,
  414. });
  415. }
  416. function clickRail(i) {
  417. var element = i.element;
  418. i.event.bind(i.scrollbarY, 'mousedown', function (e) { return e.stopPropagation(); });
  419. i.event.bind(i.scrollbarYRail, 'mousedown', function (e) {
  420. var positionTop =
  421. e.pageY -
  422. window.pageYOffset -
  423. i.scrollbarYRail.getBoundingClientRect().top;
  424. var direction = positionTop > i.scrollbarYTop ? 1 : -1;
  425. i.element.scrollTop += direction * i.containerHeight;
  426. updateGeometry(i);
  427. e.stopPropagation();
  428. });
  429. i.event.bind(i.scrollbarX, 'mousedown', function (e) { return e.stopPropagation(); });
  430. i.event.bind(i.scrollbarXRail, 'mousedown', function (e) {
  431. var positionLeft =
  432. e.pageX -
  433. window.pageXOffset -
  434. i.scrollbarXRail.getBoundingClientRect().left;
  435. var direction = positionLeft > i.scrollbarXLeft ? 1 : -1;
  436. i.element.scrollLeft += direction * i.containerWidth;
  437. updateGeometry(i);
  438. e.stopPropagation();
  439. });
  440. }
  441. function dragThumb(i) {
  442. bindMouseScrollHandler(i, [
  443. 'containerWidth',
  444. 'contentWidth',
  445. 'pageX',
  446. 'railXWidth',
  447. 'scrollbarX',
  448. 'scrollbarXWidth',
  449. 'scrollLeft',
  450. 'x',
  451. 'scrollbarXRail' ]);
  452. bindMouseScrollHandler(i, [
  453. 'containerHeight',
  454. 'contentHeight',
  455. 'pageY',
  456. 'railYHeight',
  457. 'scrollbarY',
  458. 'scrollbarYHeight',
  459. 'scrollTop',
  460. 'y',
  461. 'scrollbarYRail' ]);
  462. }
  463. function bindMouseScrollHandler(
  464. i,
  465. ref
  466. ) {
  467. var containerHeight = ref[0];
  468. var contentHeight = ref[1];
  469. var pageY = ref[2];
  470. var railYHeight = ref[3];
  471. var scrollbarY = ref[4];
  472. var scrollbarYHeight = ref[5];
  473. var scrollTop = ref[6];
  474. var y = ref[7];
  475. var scrollbarYRail = ref[8];
  476. var element = i.element;
  477. var startingScrollTop = null;
  478. var startingMousePageY = null;
  479. var scrollBy = null;
  480. function mouseMoveHandler(e) {
  481. if (e.touches && e.touches[0]) {
  482. e[pageY] = e.touches[0].pageY;
  483. }
  484. element[scrollTop] =
  485. startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
  486. addScrollingClass(i, y);
  487. updateGeometry(i);
  488. e.stopPropagation();
  489. e.preventDefault();
  490. }
  491. function mouseUpHandler() {
  492. removeScrollingClass(i, y);
  493. i[scrollbarYRail].classList.remove(cls.state.clicking);
  494. i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
  495. }
  496. function bindMoves(e, touchMode) {
  497. startingScrollTop = element[scrollTop];
  498. if (touchMode && e.touches) {
  499. e[pageY] = e.touches[0].pageY;
  500. }
  501. startingMousePageY = e[pageY];
  502. scrollBy =
  503. (i[contentHeight] - i[containerHeight]) /
  504. (i[railYHeight] - i[scrollbarYHeight]);
  505. if (!touchMode) {
  506. i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
  507. i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
  508. e.preventDefault();
  509. } else {
  510. i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
  511. }
  512. i[scrollbarYRail].classList.add(cls.state.clicking);
  513. e.stopPropagation();
  514. }
  515. i.event.bind(i[scrollbarY], 'mousedown', function (e) {
  516. bindMoves(e);
  517. });
  518. i.event.bind(i[scrollbarY], 'touchstart', function (e) {
  519. bindMoves(e, true);
  520. });
  521. }
  522. function keyboard(i) {
  523. var element = i.element;
  524. var elementHovered = function () { return matches(element, ':hover'); };
  525. var scrollbarFocused = function () { return matches(i.scrollbarX, ':focus') || matches(i.scrollbarY, ':focus'); };
  526. function shouldPreventDefault(deltaX, deltaY) {
  527. var scrollTop = Math.floor(element.scrollTop);
  528. if (deltaX === 0) {
  529. if (!i.scrollbarYActive) {
  530. return false;
  531. }
  532. if (
  533. (scrollTop === 0 && deltaY > 0) ||
  534. (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)
  535. ) {
  536. return !i.settings.wheelPropagation;
  537. }
  538. }
  539. var scrollLeft = element.scrollLeft;
  540. if (deltaY === 0) {
  541. if (!i.scrollbarXActive) {
  542. return false;
  543. }
  544. if (
  545. (scrollLeft === 0 && deltaX < 0) ||
  546. (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)
  547. ) {
  548. return !i.settings.wheelPropagation;
  549. }
  550. }
  551. return true;
  552. }
  553. i.event.bind(i.ownerDocument, 'keydown', function (e) {
  554. if (
  555. (e.isDefaultPrevented && e.isDefaultPrevented()) ||
  556. e.defaultPrevented
  557. ) {
  558. return;
  559. }
  560. if (!elementHovered() && !scrollbarFocused()) {
  561. return;
  562. }
  563. var activeElement = document.activeElement
  564. ? document.activeElement
  565. : i.ownerDocument.activeElement;
  566. if (activeElement) {
  567. if (activeElement.tagName === 'IFRAME') {
  568. activeElement = activeElement.contentDocument.activeElement;
  569. } else {
  570. // go deeper if element is a webcomponent
  571. while (activeElement.shadowRoot) {
  572. activeElement = activeElement.shadowRoot.activeElement;
  573. }
  574. }
  575. if (isEditable(activeElement)) {
  576. return;
  577. }
  578. }
  579. var deltaX = 0;
  580. var deltaY = 0;
  581. switch (e.which) {
  582. case 37: // left
  583. if (e.metaKey) {
  584. deltaX = -i.contentWidth;
  585. } else if (e.altKey) {
  586. deltaX = -i.containerWidth;
  587. } else {
  588. deltaX = -30;
  589. }
  590. break;
  591. case 38: // up
  592. if (e.metaKey) {
  593. deltaY = i.contentHeight;
  594. } else if (e.altKey) {
  595. deltaY = i.containerHeight;
  596. } else {
  597. deltaY = 30;
  598. }
  599. break;
  600. case 39: // right
  601. if (e.metaKey) {
  602. deltaX = i.contentWidth;
  603. } else if (e.altKey) {
  604. deltaX = i.containerWidth;
  605. } else {
  606. deltaX = 30;
  607. }
  608. break;
  609. case 40: // down
  610. if (e.metaKey) {
  611. deltaY = -i.contentHeight;
  612. } else if (e.altKey) {
  613. deltaY = -i.containerHeight;
  614. } else {
  615. deltaY = -30;
  616. }
  617. break;
  618. case 32: // space bar
  619. if (e.shiftKey) {
  620. deltaY = i.containerHeight;
  621. } else {
  622. deltaY = -i.containerHeight;
  623. }
  624. break;
  625. case 33: // page up
  626. deltaY = i.containerHeight;
  627. break;
  628. case 34: // page down
  629. deltaY = -i.containerHeight;
  630. break;
  631. case 36: // home
  632. deltaY = i.contentHeight;
  633. break;
  634. case 35: // end
  635. deltaY = -i.contentHeight;
  636. break;
  637. default:
  638. return;
  639. }
  640. if (i.settings.suppressScrollX && deltaX !== 0) {
  641. return;
  642. }
  643. if (i.settings.suppressScrollY && deltaY !== 0) {
  644. return;
  645. }
  646. element.scrollTop -= deltaY;
  647. element.scrollLeft += deltaX;
  648. updateGeometry(i);
  649. if (shouldPreventDefault(deltaX, deltaY)) {
  650. e.preventDefault();
  651. }
  652. });
  653. }
  654. function wheel(i) {
  655. var element = i.element;
  656. function shouldPreventDefault(deltaX, deltaY) {
  657. var roundedScrollTop = Math.floor(element.scrollTop);
  658. var isTop = element.scrollTop === 0;
  659. var isBottom =
  660. roundedScrollTop + element.offsetHeight === element.scrollHeight;
  661. var isLeft = element.scrollLeft === 0;
  662. var isRight =
  663. element.scrollLeft + element.offsetWidth === element.scrollWidth;
  664. var hitsBound;
  665. // pick axis with primary direction
  666. if (Math.abs(deltaY) > Math.abs(deltaX)) {
  667. hitsBound = isTop || isBottom;
  668. } else {
  669. hitsBound = isLeft || isRight;
  670. }
  671. return hitsBound ? !i.settings.wheelPropagation : true;
  672. }
  673. function getDeltaFromEvent(e) {
  674. var deltaX = e.deltaX;
  675. var deltaY = -1 * e.deltaY;
  676. if (typeof deltaX === 'undefined' || typeof deltaY === 'undefined') {
  677. // OS X Safari
  678. deltaX = (-1 * e.wheelDeltaX) / 6;
  679. deltaY = e.wheelDeltaY / 6;
  680. }
  681. if (e.deltaMode && e.deltaMode === 1) {
  682. // Firefox in deltaMode 1: Line scrolling
  683. deltaX *= 10;
  684. deltaY *= 10;
  685. }
  686. if (deltaX !== deltaX && deltaY !== deltaY /* NaN checks */) {
  687. // IE in some mouse drivers
  688. deltaX = 0;
  689. deltaY = e.wheelDelta;
  690. }
  691. if (e.shiftKey) {
  692. // reverse axis with shift key
  693. return [-deltaY, -deltaX];
  694. }
  695. return [deltaX, deltaY];
  696. }
  697. function shouldBeConsumedByChild(target, deltaX, deltaY) {
  698. // FIXME: this is a workaround for <select> issue in FF and IE #571
  699. if (!env.isWebKit && element.querySelector('select:focus')) {
  700. return true;
  701. }
  702. if (!element.contains(target)) {
  703. return false;
  704. }
  705. var cursor = target;
  706. while (cursor && cursor !== element) {
  707. if (cursor.classList.contains(cls.element.consuming)) {
  708. return true;
  709. }
  710. var style = get(cursor);
  711. // if deltaY && vertical scrollable
  712. if (deltaY && style.overflowY.match(/(scroll|auto)/)) {
  713. var maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
  714. if (maxScrollTop > 0) {
  715. if (
  716. (cursor.scrollTop > 0 && deltaY < 0) ||
  717. (cursor.scrollTop < maxScrollTop && deltaY > 0)
  718. ) {
  719. return true;
  720. }
  721. }
  722. }
  723. // if deltaX && horizontal scrollable
  724. if (deltaX && style.overflowX.match(/(scroll|auto)/)) {
  725. var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
  726. if (maxScrollLeft > 0) {
  727. if (
  728. (cursor.scrollLeft > 0 && deltaX < 0) ||
  729. (cursor.scrollLeft < maxScrollLeft && deltaX > 0)
  730. ) {
  731. return true;
  732. }
  733. }
  734. }
  735. cursor = cursor.parentNode;
  736. }
  737. return false;
  738. }
  739. function mousewheelHandler(e) {
  740. var ref = getDeltaFromEvent(e);
  741. var deltaX = ref[0];
  742. var deltaY = ref[1];
  743. if (shouldBeConsumedByChild(e.target, deltaX, deltaY)) {
  744. return;
  745. }
  746. var shouldPrevent = false;
  747. if (!i.settings.useBothWheelAxes) {
  748. // deltaX will only be used for horizontal scrolling and deltaY will
  749. // only be used for vertical scrolling - this is the default
  750. element.scrollTop -= deltaY * i.settings.wheelSpeed;
  751. element.scrollLeft += deltaX * i.settings.wheelSpeed;
  752. } else if (i.scrollbarYActive && !i.scrollbarXActive) {
  753. // only vertical scrollbar is active and useBothWheelAxes option is
  754. // active, so let's scroll vertical bar using both mouse wheel axes
  755. if (deltaY) {
  756. element.scrollTop -= deltaY * i.settings.wheelSpeed;
  757. } else {
  758. element.scrollTop += deltaX * i.settings.wheelSpeed;
  759. }
  760. shouldPrevent = true;
  761. } else if (i.scrollbarXActive && !i.scrollbarYActive) {
  762. // useBothWheelAxes and only horizontal bar is active, so use both
  763. // wheel axes for horizontal bar
  764. if (deltaX) {
  765. element.scrollLeft += deltaX * i.settings.wheelSpeed;
  766. } else {
  767. element.scrollLeft -= deltaY * i.settings.wheelSpeed;
  768. }
  769. shouldPrevent = true;
  770. }
  771. updateGeometry(i);
  772. shouldPrevent = shouldPrevent || shouldPreventDefault(deltaX, deltaY);
  773. if (shouldPrevent && !e.ctrlKey) {
  774. e.stopPropagation();
  775. e.preventDefault();
  776. }
  777. }
  778. if (typeof window.onwheel !== 'undefined') {
  779. i.event.bind(element, 'wheel', mousewheelHandler);
  780. } else if (typeof window.onmousewheel !== 'undefined') {
  781. i.event.bind(element, 'mousewheel', mousewheelHandler);
  782. }
  783. }
  784. function touch(i) {
  785. if (!env.supportsTouch && !env.supportsIePointer) {
  786. return;
  787. }
  788. var element = i.element;
  789. function shouldPrevent(deltaX, deltaY) {
  790. var scrollTop = Math.floor(element.scrollTop);
  791. var scrollLeft = element.scrollLeft;
  792. var magnitudeX = Math.abs(deltaX);
  793. var magnitudeY = Math.abs(deltaY);
  794. if (magnitudeY > magnitudeX) {
  795. // user is perhaps trying to swipe up/down the page
  796. if (
  797. (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
  798. (deltaY > 0 && scrollTop === 0)
  799. ) {
  800. // set prevent for mobile Chrome refresh
  801. return window.scrollY === 0 && deltaY > 0 && env.isChrome;
  802. }
  803. } else if (magnitudeX > magnitudeY) {
  804. // user is perhaps trying to swipe left/right across the page
  805. if (
  806. (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
  807. (deltaX > 0 && scrollLeft === 0)
  808. ) {
  809. return true;
  810. }
  811. }
  812. return true;
  813. }
  814. function applyTouchMove(differenceX, differenceY) {
  815. element.scrollTop -= differenceY;
  816. element.scrollLeft -= differenceX;
  817. updateGeometry(i);
  818. }
  819. var startOffset = {};
  820. var startTime = 0;
  821. var speed = {};
  822. var easingLoop = null;
  823. function getTouch(e) {
  824. if (e.targetTouches) {
  825. return e.targetTouches[0];
  826. } else {
  827. // Maybe IE pointer
  828. return e;
  829. }
  830. }
  831. function shouldHandle(e) {
  832. if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
  833. return false;
  834. }
  835. if (e.targetTouches && e.targetTouches.length === 1) {
  836. return true;
  837. }
  838. if (
  839. e.pointerType &&
  840. e.pointerType !== 'mouse' &&
  841. e.pointerType !== e.MSPOINTER_TYPE_MOUSE
  842. ) {
  843. return true;
  844. }
  845. return false;
  846. }
  847. function touchStart(e) {
  848. if (!shouldHandle(e)) {
  849. return;
  850. }
  851. var touch = getTouch(e);
  852. startOffset.pageX = touch.pageX;
  853. startOffset.pageY = touch.pageY;
  854. startTime = new Date().getTime();
  855. if (easingLoop !== null) {
  856. clearInterval(easingLoop);
  857. }
  858. }
  859. function shouldBeConsumedByChild(target, deltaX, deltaY) {
  860. if (!element.contains(target)) {
  861. return false;
  862. }
  863. var cursor = target;
  864. while (cursor && cursor !== element) {
  865. if (cursor.classList.contains(cls.element.consuming)) {
  866. return true;
  867. }
  868. var style = get(cursor);
  869. // if deltaY && vertical scrollable
  870. if (deltaY && style.overflowY.match(/(scroll|auto)/)) {
  871. var maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
  872. if (maxScrollTop > 0) {
  873. if (
  874. (cursor.scrollTop > 0 && deltaY < 0) ||
  875. (cursor.scrollTop < maxScrollTop && deltaY > 0)
  876. ) {
  877. return true;
  878. }
  879. }
  880. }
  881. // if deltaX && horizontal scrollable
  882. if (deltaX && style.overflowX.match(/(scroll|auto)/)) {
  883. var maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
  884. if (maxScrollLeft > 0) {
  885. if (
  886. (cursor.scrollLeft > 0 && deltaX < 0) ||
  887. (cursor.scrollLeft < maxScrollLeft && deltaX > 0)
  888. ) {
  889. return true;
  890. }
  891. }
  892. }
  893. cursor = cursor.parentNode;
  894. }
  895. return false;
  896. }
  897. function touchMove(e) {
  898. if (shouldHandle(e)) {
  899. var touch = getTouch(e);
  900. var currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
  901. var differenceX = currentOffset.pageX - startOffset.pageX;
  902. var differenceY = currentOffset.pageY - startOffset.pageY;
  903. if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
  904. return;
  905. }
  906. applyTouchMove(differenceX, differenceY);
  907. startOffset = currentOffset;
  908. var currentTime = new Date().getTime();
  909. var timeGap = currentTime - startTime;
  910. if (timeGap > 0) {
  911. speed.x = differenceX / timeGap;
  912. speed.y = differenceY / timeGap;
  913. startTime = currentTime;
  914. }
  915. if (shouldPrevent(differenceX, differenceY)) {
  916. e.preventDefault();
  917. }
  918. }
  919. }
  920. function touchEnd() {
  921. if (i.settings.swipeEasing) {
  922. clearInterval(easingLoop);
  923. easingLoop = setInterval(function() {
  924. if (i.isInitialized) {
  925. clearInterval(easingLoop);
  926. return;
  927. }
  928. if (!speed.x && !speed.y) {
  929. clearInterval(easingLoop);
  930. return;
  931. }
  932. if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
  933. clearInterval(easingLoop);
  934. return;
  935. }
  936. applyTouchMove(speed.x * 30, speed.y * 30);
  937. speed.x *= 0.8;
  938. speed.y *= 0.8;
  939. }, 10);
  940. }
  941. }
  942. if (env.supportsTouch) {
  943. i.event.bind(element, 'touchstart', touchStart);
  944. i.event.bind(element, 'touchmove', touchMove);
  945. i.event.bind(element, 'touchend', touchEnd);
  946. } else if (env.supportsIePointer) {
  947. if (window.PointerEvent) {
  948. i.event.bind(element, 'pointerdown', touchStart);
  949. i.event.bind(element, 'pointermove', touchMove);
  950. i.event.bind(element, 'pointerup', touchEnd);
  951. } else if (window.MSPointerEvent) {
  952. i.event.bind(element, 'MSPointerDown', touchStart);
  953. i.event.bind(element, 'MSPointerMove', touchMove);
  954. i.event.bind(element, 'MSPointerUp', touchEnd);
  955. }
  956. }
  957. }
  958. var defaultSettings = function () { return ({
  959. handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
  960. maxScrollbarLength: null,
  961. minScrollbarLength: null,
  962. scrollingThreshold: 1000,
  963. scrollXMarginOffset: 0,
  964. scrollYMarginOffset: 0,
  965. suppressScrollX: false,
  966. suppressScrollY: false,
  967. swipeEasing: true,
  968. useBothWheelAxes: false,
  969. wheelPropagation: true,
  970. wheelSpeed: 1,
  971. }); };
  972. var handlers = {
  973. 'click-rail': clickRail,
  974. 'drag-thumb': dragThumb,
  975. keyboard: keyboard,
  976. wheel: wheel,
  977. touch: touch,
  978. };
  979. var PerfectScrollbar = function PerfectScrollbar(element, userSettings) {
  980. var this$1 = this;
  981. if ( userSettings === void 0 ) userSettings = {};
  982. if (typeof element === 'string') {
  983. element = document.querySelector(element);
  984. }
  985. if (!element || !element.nodeName) {
  986. throw new Error('no element is specified to initialize PerfectScrollbar');
  987. }
  988. this.element = element;
  989. element.classList.add(cls.main);
  990. this.settings = defaultSettings();
  991. for (var key in userSettings) {
  992. this.settings[key] = userSettings[key];
  993. }
  994. this.containerWidth = null;
  995. this.containerHeight = null;
  996. this.contentWidth = null;
  997. this.contentHeight = null;
  998. var focus = function () { return element.classList.add(cls.state.focus); };
  999. var blur = function () { return element.classList.remove(cls.state.focus); };
  1000. this.isRtl = get(element).direction === 'rtl';
  1001. if (this.isRtl === true) {
  1002. element.classList.add(cls.rtl);
  1003. }
  1004. this.isNegativeScroll = (function () {
  1005. var originalScrollLeft = element.scrollLeft;
  1006. var result = null;
  1007. element.scrollLeft = -1;
  1008. result = element.scrollLeft < 0;
  1009. element.scrollLeft = originalScrollLeft;
  1010. return result;
  1011. })();
  1012. this.negativeScrollAdjustment = this.isNegativeScroll
  1013. ? element.scrollWidth - element.clientWidth
  1014. : 0;
  1015. this.event = new EventManager();
  1016. this.ownerDocument = element.ownerDocument || document;
  1017. this.scrollbarXRail = div(cls.element.rail('x'));
  1018. element.appendChild(this.scrollbarXRail);
  1019. this.scrollbarX = div(cls.element.thumb('x'));
  1020. this.scrollbarXRail.appendChild(this.scrollbarX);
  1021. this.scrollbarX.setAttribute('tabindex', 0);
  1022. this.event.bind(this.scrollbarX, 'focus', focus);
  1023. this.event.bind(this.scrollbarX, 'blur', blur);
  1024. this.scrollbarXActive = null;
  1025. this.scrollbarXWidth = null;
  1026. this.scrollbarXLeft = null;
  1027. var railXStyle = get(this.scrollbarXRail);
  1028. this.scrollbarXBottom = parseInt(railXStyle.bottom, 10);
  1029. if (isNaN(this.scrollbarXBottom)) {
  1030. this.isScrollbarXUsingBottom = false;
  1031. this.scrollbarXTop = toInt(railXStyle.top);
  1032. } else {
  1033. this.isScrollbarXUsingBottom = true;
  1034. }
  1035. this.railBorderXWidth =
  1036. toInt(railXStyle.borderLeftWidth) + toInt(railXStyle.borderRightWidth);
  1037. // Set rail to display:block to calculate margins
  1038. set(this.scrollbarXRail, { display: 'block' });
  1039. this.railXMarginWidth =
  1040. toInt(railXStyle.marginLeft) + toInt(railXStyle.marginRight);
  1041. set(this.scrollbarXRail, { display: '' });
  1042. this.railXWidth = null;
  1043. this.railXRatio = null;
  1044. this.scrollbarYRail = div(cls.element.rail('y'));
  1045. element.appendChild(this.scrollbarYRail);
  1046. this.scrollbarY = div(cls.element.thumb('y'));
  1047. this.scrollbarYRail.appendChild(this.scrollbarY);
  1048. this.scrollbarY.setAttribute('tabindex', 0);
  1049. this.event.bind(this.scrollbarY, 'focus', focus);
  1050. this.event.bind(this.scrollbarY, 'blur', blur);
  1051. this.scrollbarYActive = null;
  1052. this.scrollbarYHeight = null;
  1053. this.scrollbarYTop = null;
  1054. var railYStyle = get(this.scrollbarYRail);
  1055. this.scrollbarYRight = parseInt(railYStyle.right, 10);
  1056. if (isNaN(this.scrollbarYRight)) {
  1057. this.isScrollbarYUsingRight = false;
  1058. this.scrollbarYLeft = toInt(railYStyle.left);
  1059. } else {
  1060. this.isScrollbarYUsingRight = true;
  1061. }
  1062. this.scrollbarYOuterWidth = this.isRtl ? outerWidth(this.scrollbarY) : null;
  1063. this.railBorderYWidth =
  1064. toInt(railYStyle.borderTopWidth) + toInt(railYStyle.borderBottomWidth);
  1065. set(this.scrollbarYRail, { display: 'block' });
  1066. this.railYMarginHeight =
  1067. toInt(railYStyle.marginTop) + toInt(railYStyle.marginBottom);
  1068. set(this.scrollbarYRail, { display: '' });
  1069. this.railYHeight = null;
  1070. this.railYRatio = null;
  1071. this.reach = {
  1072. x:
  1073. element.scrollLeft <= 0
  1074. ? 'start'
  1075. : element.scrollLeft >= this.contentWidth - this.containerWidth
  1076. ? 'end'
  1077. : null,
  1078. y:
  1079. element.scrollTop <= 0
  1080. ? 'start'
  1081. : element.scrollTop >= this.contentHeight - this.containerHeight
  1082. ? 'end'
  1083. : null,
  1084. };
  1085. this.isAlive = true;
  1086. this.settings.handlers.forEach(function (handlerName) { return handlers[handlerName](this$1); });
  1087. this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only
  1088. this.lastScrollLeft = element.scrollLeft; // for onScroll only
  1089. this.event.bind(this.element, 'scroll', function (e) { return this$1.onScroll(e); });
  1090. updateGeometry(this);
  1091. };
  1092. PerfectScrollbar.prototype.update = function update () {
  1093. if (!this.isAlive) {
  1094. return;
  1095. }
  1096. // Recalcuate negative scrollLeft adjustment
  1097. this.negativeScrollAdjustment = this.isNegativeScroll
  1098. ? this.element.scrollWidth - this.element.clientWidth
  1099. : 0;
  1100. // Recalculate rail margins
  1101. set(this.scrollbarXRail, { display: 'block' });
  1102. set(this.scrollbarYRail, { display: 'block' });
  1103. this.railXMarginWidth =
  1104. toInt(get(this.scrollbarXRail).marginLeft) +
  1105. toInt(get(this.scrollbarXRail).marginRight);
  1106. this.railYMarginHeight =
  1107. toInt(get(this.scrollbarYRail).marginTop) +
  1108. toInt(get(this.scrollbarYRail).marginBottom);
  1109. // Hide scrollbars not to affect scrollWidth and scrollHeight
  1110. set(this.scrollbarXRail, { display: 'none' });
  1111. set(this.scrollbarYRail, { display: 'none' });
  1112. updateGeometry(this);
  1113. processScrollDiff(this, 'top', 0, false, true);
  1114. processScrollDiff(this, 'left', 0, false, true);
  1115. set(this.scrollbarXRail, { display: '' });
  1116. set(this.scrollbarYRail, { display: '' });
  1117. };
  1118. PerfectScrollbar.prototype.onScroll = function onScroll (e) {
  1119. if (!this.isAlive) {
  1120. return;
  1121. }
  1122. updateGeometry(this);
  1123. processScrollDiff(this, 'top', this.element.scrollTop - this.lastScrollTop);
  1124. processScrollDiff(
  1125. this,
  1126. 'left',
  1127. this.element.scrollLeft - this.lastScrollLeft
  1128. );
  1129. this.lastScrollTop = Math.floor(this.element.scrollTop);
  1130. this.lastScrollLeft = this.element.scrollLeft;
  1131. };
  1132. PerfectScrollbar.prototype.destroy = function destroy () {
  1133. if (!this.isAlive) {
  1134. return;
  1135. }
  1136. this.event.unbindAll();
  1137. remove(this.scrollbarX);
  1138. remove(this.scrollbarY);
  1139. remove(this.scrollbarXRail);
  1140. remove(this.scrollbarYRail);
  1141. this.removePsClasses();
  1142. // unset elements
  1143. this.element = null;
  1144. this.scrollbarX = null;
  1145. this.scrollbarY = null;
  1146. this.scrollbarXRail = null;
  1147. this.scrollbarYRail = null;
  1148. this.isAlive = false;
  1149. };
  1150. PerfectScrollbar.prototype.removePsClasses = function removePsClasses () {
  1151. this.element.className = this.element.className
  1152. .split(' ')
  1153. .filter(function (name) { return !name.match(/^ps([-_].+|)$/); })
  1154. .join(' ');
  1155. };
  1156. export default PerfectScrollbar;
  1157. //# sourceMappingURL=perfect-scrollbar.esm.js.map