perfect-scrollbar.common.js 34 KB

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