jquery-asScrollbar.js 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343
  1. /**
  2. * jQuery asScrollbar v0.5.7
  3. * https://github.com/amazingSurge/jquery-asScrollbar
  4. *
  5. * Copyright (c) amazingSurge
  6. * Released under the LGPL-3.0 license
  7. */
  8. (function(global, factory) {
  9. if (typeof define === 'function' && define.amd) {
  10. define(['jquery'], factory);
  11. } else if (typeof exports !== 'undefined') {
  12. factory(require('jquery'));
  13. } else {
  14. var mod = {
  15. exports: {}
  16. };
  17. factory(global.jQuery);
  18. global.jqueryAsScrollbarEs = mod.exports;
  19. }
  20. })(this, function(_jquery) {
  21. 'use strict';
  22. var _jquery2 = _interopRequireDefault(_jquery);
  23. function _interopRequireDefault(obj) {
  24. return obj && obj.__esModule
  25. ? obj
  26. : {
  27. default: obj
  28. };
  29. }
  30. var _typeof =
  31. typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
  32. ? function(obj) {
  33. return typeof obj;
  34. }
  35. : function(obj) {
  36. return obj &&
  37. typeof Symbol === 'function' &&
  38. obj.constructor === Symbol &&
  39. obj !== Symbol.prototype
  40. ? 'symbol'
  41. : typeof obj;
  42. };
  43. function _classCallCheck(instance, Constructor) {
  44. if (!(instance instanceof Constructor)) {
  45. throw new TypeError('Cannot call a class as a function');
  46. }
  47. }
  48. var _createClass = (function() {
  49. function defineProperties(target, props) {
  50. for (var i = 0; i < props.length; i++) {
  51. var descriptor = props[i];
  52. descriptor.enumerable = descriptor.enumerable || false;
  53. descriptor.configurable = true;
  54. if ('value' in descriptor) descriptor.writable = true;
  55. Object.defineProperty(target, descriptor.key, descriptor);
  56. }
  57. }
  58. return function(Constructor, protoProps, staticProps) {
  59. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  60. if (staticProps) defineProperties(Constructor, staticProps);
  61. return Constructor;
  62. };
  63. })();
  64. var DEFAULTS = {
  65. namespace: 'asScrollbar',
  66. skin: null,
  67. handleSelector: null,
  68. handleTemplate: '<div class="{{handle}}"></div>',
  69. barClass: null,
  70. handleClass: null,
  71. disabledClass: 'is-disabled',
  72. draggingClass: 'is-dragging',
  73. hoveringClass: 'is-hovering',
  74. direction: 'vertical',
  75. barLength: null,
  76. handleLength: null,
  77. minHandleLength: 30,
  78. maxHandleLength: null,
  79. mouseDrag: true,
  80. touchDrag: true,
  81. pointerDrag: true,
  82. clickMove: true,
  83. clickMoveStep: 0.3, // 0 - 1
  84. mousewheel: true,
  85. mousewheelSpeed: 50,
  86. keyboard: true,
  87. useCssTransforms3d: true,
  88. useCssTransforms: true,
  89. useCssTransitions: true,
  90. duration: '500',
  91. easing: 'ease' // linear, ease-in, ease-out, ease-in-out
  92. };
  93. var easingBezier = function easingBezier(mX1, mY1, mX2, mY2) {
  94. 'use strict';
  95. var a = function a(aA1, aA2) {
  96. return 1.0 - 3.0 * aA2 + 3.0 * aA1;
  97. };
  98. var b = function b(aA1, aA2) {
  99. return 3.0 * aA2 - 6.0 * aA1;
  100. };
  101. var c = function c(aA1) {
  102. return 3.0 * aA1;
  103. };
  104. // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  105. var calcBezier = function calcBezier(aT, aA1, aA2) {
  106. return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
  107. };
  108. // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  109. var getSlope = function getSlope(aT, aA1, aA2) {
  110. return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
  111. };
  112. var getTForX = function getTForX(aX) {
  113. // Newton raphson iteration
  114. var aGuessT = aX;
  115. for (var i = 0; i < 4; ++i) {
  116. var currentSlope = getSlope(aGuessT, mX1, mX2);
  117. if (currentSlope === 0.0) {
  118. return aGuessT;
  119. }
  120. var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  121. aGuessT -= currentX / currentSlope;
  122. }
  123. return aGuessT;
  124. };
  125. if (mX1 === mY1 && mX2 === mY2) {
  126. return {
  127. css: 'linear',
  128. fn: function fn(aX) {
  129. return aX;
  130. }
  131. };
  132. }
  133. return {
  134. css: 'cubic-bezier(' + mX1 + ',' + mY1 + ',' + mX2 + ',' + mY2 + ')',
  135. fn: function fn(aX) {
  136. return calcBezier(getTForX(aX), mY1, mY2);
  137. }
  138. };
  139. };
  140. var EASING = {
  141. ease: easingBezier(0.25, 0.1, 0.25, 1.0),
  142. linear: easingBezier(0.0, 0.0, 1.0, 1.0),
  143. 'ease-in': easingBezier(0.42, 0.0, 1.0, 1.0),
  144. 'ease-out': easingBezier(0.0, 0.0, 0.58, 1.0),
  145. 'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0)
  146. };
  147. if (!Date.now) {
  148. Date.now = function() {
  149. return new Date().getTime();
  150. };
  151. }
  152. var vendors = ['webkit', 'moz'];
  153. for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
  154. var vp = vendors[i];
  155. window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
  156. window.cancelAnimationFrame =
  157. window[vp + 'CancelAnimationFrame'] ||
  158. window[vp + 'CancelRequestAnimationFrame'];
  159. }
  160. if (
  161. /iP(ad|hone|od).*OS (6|7|8)/.test(window.navigator.userAgent) ||
  162. !window.requestAnimationFrame ||
  163. !window.cancelAnimationFrame
  164. ) {
  165. var lastTime = 0;
  166. window.requestAnimationFrame = function(callback) {
  167. var now = getTime();
  168. var timePlus = 16;
  169. var nextTime = Math.max(lastTime + timePlus, now);
  170. return setTimeout(function() {
  171. callback((lastTime = nextTime));
  172. }, nextTime - now);
  173. };
  174. window.cancelAnimationFrame = clearTimeout;
  175. }
  176. function isPercentage(n) {
  177. return typeof n === 'string' && n.indexOf('%') !== -1;
  178. }
  179. function convertPercentageToFloat(n) {
  180. return parseFloat(n.slice(0, -1) / 100, 10);
  181. }
  182. function convertMatrixToArray(value) {
  183. if (value && value.substr(0, 6) === 'matrix') {
  184. return value
  185. .replace(/^.*\((.*)\)$/g, '$1')
  186. .replace(/px/g, '')
  187. .split(/, +/);
  188. }
  189. return false;
  190. }
  191. function getTime() {
  192. if (typeof window.performance !== 'undefined' && window.performance.now) {
  193. return window.performance.now();
  194. }
  195. return Date.now();
  196. }
  197. /**
  198. * Css features detect
  199. **/
  200. var support = {};
  201. (function(support) {
  202. /**
  203. * Borrowed from Owl carousel
  204. **/
  205. 'use strict';
  206. var events = {
  207. transition: {
  208. end: {
  209. WebkitTransition: 'webkitTransitionEnd',
  210. MozTransition: 'transitionend',
  211. OTransition: 'oTransitionEnd',
  212. transition: 'transitionend'
  213. }
  214. },
  215. animation: {
  216. end: {
  217. WebkitAnimation: 'webkitAnimationEnd',
  218. MozAnimation: 'animationend',
  219. OAnimation: 'oAnimationEnd',
  220. animation: 'animationend'
  221. }
  222. }
  223. },
  224. prefixes = ['webkit', 'Moz', 'O', 'ms'],
  225. style = (0, _jquery2.default)('<support>').get(0).style,
  226. tests = {
  227. csstransforms: function csstransforms() {
  228. return Boolean(test('transform'));
  229. },
  230. csstransforms3d: function csstransforms3d() {
  231. return Boolean(test('perspective'));
  232. },
  233. csstransitions: function csstransitions() {
  234. return Boolean(test('transition'));
  235. },
  236. cssanimations: function cssanimations() {
  237. return Boolean(test('animation'));
  238. }
  239. };
  240. var test = function test(property, prefixed) {
  241. var result = false,
  242. upper = property.charAt(0).toUpperCase() + property.slice(1);
  243. if (style[property] !== undefined) {
  244. result = property;
  245. }
  246. if (!result) {
  247. _jquery2.default.each(prefixes, function(i, prefix) {
  248. if (style[prefix + upper] !== undefined) {
  249. result = '-' + prefix.toLowerCase() + '-' + upper;
  250. return false;
  251. }
  252. return true;
  253. });
  254. }
  255. if (prefixed) {
  256. return result;
  257. }
  258. if (result) {
  259. return true;
  260. }
  261. return false;
  262. };
  263. var prefixed = function prefixed(property) {
  264. return test(property, true);
  265. };
  266. if (tests.csstransitions()) {
  267. /*eslint no-new-wrappers: "off"*/
  268. support.transition = new String(prefixed('transition'));
  269. support.transition.end = events.transition.end[support.transition];
  270. }
  271. if (tests.cssanimations()) {
  272. /*eslint no-new-wrappers: "off"*/
  273. support.animation = new String(prefixed('animation'));
  274. support.animation.end = events.animation.end[support.animation];
  275. }
  276. if (tests.csstransforms()) {
  277. /*eslint no-new-wrappers: "off"*/
  278. support.transform = new String(prefixed('transform'));
  279. support.transform3d = tests.csstransforms3d();
  280. }
  281. if (
  282. 'ontouchstart' in window ||
  283. (window.DocumentTouch && document instanceof window.DocumentTouch)
  284. ) {
  285. support.touch = true;
  286. } else {
  287. support.touch = false;
  288. }
  289. if (window.PointerEvent || window.MSPointerEvent) {
  290. support.pointer = true;
  291. } else {
  292. support.pointer = false;
  293. }
  294. support.prefixPointerEvent = function(pointerEvent) {
  295. return window.MSPointerEvent
  296. ? 'MSPointer' +
  297. pointerEvent.charAt(9).toUpperCase() +
  298. pointerEvent.substr(10)
  299. : pointerEvent;
  300. };
  301. })(support);
  302. var NAMESPACE$1 = 'asScrollbar';
  303. /**
  304. * Plugin constructor
  305. **/
  306. var asScrollbar = (function() {
  307. function asScrollbar(bar) {
  308. var options =
  309. arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  310. _classCallCheck(this, asScrollbar);
  311. this.$bar = (0, _jquery2.default)(bar);
  312. options = this.options = _jquery2.default.extend(
  313. {},
  314. DEFAULTS,
  315. options,
  316. this.$bar.data('options') || {}
  317. );
  318. bar.direction = this.options.direction;
  319. this.classes = {
  320. directionClass: options.namespace + '-' + options.direction,
  321. barClass: options.barClass ? options.barClass : options.namespace,
  322. handleClass: options.handleClass
  323. ? options.handleClass
  324. : options.namespace + '-handle'
  325. };
  326. if (this.options.direction === 'vertical') {
  327. this.attributes = {
  328. axis: 'Y',
  329. position: 'top',
  330. length: 'height',
  331. clientLength: 'clientHeight'
  332. };
  333. } else if (this.options.direction === 'horizontal') {
  334. this.attributes = {
  335. axis: 'X',
  336. position: 'left',
  337. length: 'width',
  338. clientLength: 'clientWidth'
  339. };
  340. }
  341. // Current state information.
  342. this._states = {};
  343. // Current state information for the drag operation.
  344. this._drag = {
  345. time: null,
  346. pointer: null
  347. };
  348. // Current timeout
  349. this._frameId = null;
  350. // Current handle position
  351. this.handlePosition = 0;
  352. this.easing = EASING[this.options.easing] || EASING.ease;
  353. this.init();
  354. }
  355. _createClass(
  356. asScrollbar,
  357. [
  358. {
  359. key: 'init',
  360. value: function init() {
  361. var options = this.options;
  362. this.$handle = this.$bar.find(this.options.handleSelector);
  363. if (this.$handle.length === 0) {
  364. this.$handle = (0, _jquery2.default)(
  365. options.handleTemplate.replace(
  366. /\{\{handle\}\}/g,
  367. this.classes.handleClass
  368. )
  369. ).appendTo(this.$bar);
  370. } else {
  371. this.$handle.addClass(this.classes.handleClass);
  372. }
  373. this.$bar
  374. .addClass(this.classes.barClass)
  375. .addClass(this.classes.directionClass)
  376. .attr('draggable', false);
  377. if (options.skin) {
  378. this.$bar.addClass(options.skin);
  379. }
  380. if (options.barLength !== null) {
  381. this.setBarLength(options.barLength);
  382. }
  383. if (options.handleLength !== null) {
  384. this.setHandleLength(options.handleLength);
  385. }
  386. this.updateLength();
  387. this.bindEvents();
  388. this.trigger('ready');
  389. }
  390. },
  391. {
  392. key: 'trigger',
  393. value: function trigger(eventType) {
  394. for (
  395. var _len = arguments.length,
  396. params = Array(_len > 1 ? _len - 1 : 0),
  397. _key = 1;
  398. _key < _len;
  399. _key++
  400. ) {
  401. params[_key - 1] = arguments[_key];
  402. }
  403. var data = [this].concat(params);
  404. // event
  405. this.$bar.trigger(NAMESPACE$1 + '::' + eventType, data);
  406. // callback
  407. eventType = eventType.replace(/\b\w+\b/g, function(word) {
  408. return word.substring(0, 1).toUpperCase() + word.substring(1);
  409. });
  410. var onFunction = 'on' + eventType;
  411. if (typeof this.options[onFunction] === 'function') {
  412. this.options[onFunction].apply(this, params);
  413. }
  414. }
  415. },
  416. {
  417. key: 'is',
  418. value: function is(state) {
  419. return this._states[state] && this._states[state] > 0;
  420. }
  421. },
  422. {
  423. key: 'enter',
  424. value: function enter(state) {
  425. if (this._states[state] === undefined) {
  426. this._states[state] = 0;
  427. }
  428. this._states[state]++;
  429. }
  430. },
  431. {
  432. key: 'leave',
  433. value: function leave(state) {
  434. this._states[state]--;
  435. }
  436. },
  437. {
  438. key: 'eventName',
  439. value: function eventName(events) {
  440. if (typeof events !== 'string' || events === '') {
  441. return '.' + this.options.namespace;
  442. }
  443. events = events.split(' ');
  444. var length = events.length;
  445. for (var _i = 0; _i < length; _i++) {
  446. events[_i] = events[_i] + '.' + this.options.namespace;
  447. }
  448. return events.join(' ');
  449. }
  450. },
  451. {
  452. key: 'bindEvents',
  453. value: function bindEvents() {
  454. var _this = this;
  455. if (this.options.mouseDrag) {
  456. this.$handle.on(
  457. this.eventName('mousedown'),
  458. _jquery2.default.proxy(this.onDragStart, this)
  459. );
  460. this.$handle.on(
  461. this.eventName('dragstart selectstart'),
  462. function() {
  463. return false;
  464. }
  465. );
  466. }
  467. if (this.options.touchDrag && support.touch) {
  468. this.$handle.on(
  469. this.eventName('touchstart'),
  470. _jquery2.default.proxy(this.onDragStart, this)
  471. );
  472. this.$handle.on(
  473. this.eventName('touchcancel'),
  474. _jquery2.default.proxy(this.onDragEnd, this)
  475. );
  476. }
  477. if (this.options.pointerDrag && support.pointer) {
  478. this.$handle.on(
  479. this.eventName(support.prefixPointerEvent('pointerdown')),
  480. _jquery2.default.proxy(this.onDragStart, this)
  481. );
  482. this.$handle.on(
  483. this.eventName(support.prefixPointerEvent('pointercancel')),
  484. _jquery2.default.proxy(this.onDragEnd, this)
  485. );
  486. }
  487. if (this.options.clickMove) {
  488. this.$bar.on(
  489. this.eventName('mousedown'),
  490. _jquery2.default.proxy(this.onClick, this)
  491. );
  492. }
  493. if (this.options.mousewheel) {
  494. this.$bar.on('mousewheel', function(e) {
  495. var delta = void 0;
  496. if (_this.options.direction === 'vertical') {
  497. delta = e.deltaFactor * e.deltaY;
  498. } else if (_this.options.direction === 'horizontal') {
  499. delta = -1 * e.deltaFactor * e.deltaX;
  500. }
  501. var offset = _this.getHandlePosition();
  502. if (offset <= 0 && delta > 0) {
  503. return true;
  504. } else if (offset >= _this.barLength && delta < 0) {
  505. return true;
  506. }
  507. offset -= _this.options.mousewheelSpeed * delta;
  508. _this.move(offset, true);
  509. return false;
  510. });
  511. }
  512. this.$bar.on(this.eventName('mouseenter'), function() {
  513. _this.$bar.addClass(_this.options.hoveringClass);
  514. _this.enter('hovering');
  515. _this.trigger('hover');
  516. });
  517. this.$bar.on(this.eventName('mouseleave'), function() {
  518. _this.$bar.removeClass(_this.options.hoveringClass);
  519. if (!_this.is('hovering')) {
  520. return;
  521. }
  522. _this.leave('hovering');
  523. _this.trigger('hovered');
  524. });
  525. if (this.options.keyboard) {
  526. (0, _jquery2.default)(document).on(
  527. this.eventName('keydown'),
  528. function(e) {
  529. if (e.isDefaultPrevented && e.isDefaultPrevented()) {
  530. return;
  531. }
  532. if (!_this.is('hovering')) {
  533. return;
  534. }
  535. var activeElement = document.activeElement;
  536. // go deeper if element is a webcomponent
  537. while (activeElement.shadowRoot) {
  538. activeElement = activeElement.shadowRoot.activeElement;
  539. }
  540. if (
  541. (0, _jquery2.default)(activeElement).is(
  542. ':input,select,option,[contenteditable]'
  543. )
  544. ) {
  545. return;
  546. }
  547. var by = 0,
  548. to = null;
  549. var down = 40,
  550. end = 35,
  551. home = 36,
  552. left = 37,
  553. pageDown = 34,
  554. pageUp = 33,
  555. right = 39,
  556. spaceBar = 32,
  557. up = 38;
  558. var webkitDown = 63233,
  559. webkitEnd = 63275,
  560. webkitHome = 63273,
  561. webkitLeft = 63234,
  562. webkitPageDown = 63277,
  563. webkitPageUp = 63276,
  564. webkitRight = 63235,
  565. webkitUp = 63232;
  566. switch (e.which) {
  567. case left: // left
  568. case webkitUp:
  569. by = -30;
  570. break;
  571. case up: // up
  572. case webkitDown:
  573. by = -30;
  574. break;
  575. case right: // right
  576. case webkitLeft:
  577. by = 30;
  578. break;
  579. case down: // down
  580. case webkitRight:
  581. by = 30;
  582. break;
  583. case pageUp: // page up
  584. case webkitPageUp:
  585. by = -90;
  586. break;
  587. case spaceBar: // space bar
  588. case pageDown: // page down
  589. case webkitPageDown:
  590. by = -90;
  591. break;
  592. case end: // end
  593. case webkitEnd:
  594. to = '100%';
  595. break;
  596. case home: // home
  597. case webkitHome:
  598. to = 0;
  599. break;
  600. default:
  601. return;
  602. }
  603. if (by || to !== null) {
  604. if (by) {
  605. _this.moveBy(by, true);
  606. } else if (to !== null) {
  607. _this.moveTo(to, true);
  608. }
  609. e.preventDefault();
  610. }
  611. }
  612. );
  613. }
  614. }
  615. },
  616. {
  617. key: 'onClick',
  618. value: function onClick(event) {
  619. var num = 3;
  620. if (event.which === num) {
  621. return;
  622. }
  623. if (event.target === this.$handle[0]) {
  624. return;
  625. }
  626. this._drag.time = new Date().getTime();
  627. this._drag.pointer = this.pointer(event);
  628. var offset = this.$handle.offset();
  629. var distance = this.distance(
  630. {
  631. x: offset.left,
  632. y: offset.top
  633. },
  634. this._drag.pointer
  635. ),
  636. factor = 1;
  637. if (distance > 0) {
  638. distance -= this.handleLength;
  639. } else {
  640. distance = Math.abs(distance);
  641. factor = -1;
  642. }
  643. if (distance > this.barLength * this.options.clickMoveStep) {
  644. distance = this.barLength * this.options.clickMoveStep;
  645. }
  646. this.moveBy(factor * distance, true);
  647. }
  648. },
  649. {
  650. key: 'onDragStart',
  651. value: function onDragStart(event) {
  652. var _this2 = this;
  653. var num = 3;
  654. if (event.which === num) {
  655. return;
  656. }
  657. // this.$bar.toggleClass(this.options.draggingClass, event.type === 'mousedown');
  658. this.$bar.addClass(this.options.draggingClass);
  659. this._drag.time = new Date().getTime();
  660. this._drag.pointer = this.pointer(event);
  661. var callback = function callback() {
  662. _this2.enter('dragging');
  663. _this2.trigger('drag');
  664. };
  665. if (this.options.mouseDrag) {
  666. (0, _jquery2.default)(document).on(
  667. this.eventName('mouseup'),
  668. _jquery2.default.proxy(this.onDragEnd, this)
  669. );
  670. (0, _jquery2.default)(document).one(
  671. this.eventName('mousemove'),
  672. _jquery2.default.proxy(function() {
  673. (0, _jquery2.default)(document).on(
  674. _this2.eventName('mousemove'),
  675. _jquery2.default.proxy(_this2.onDragMove, _this2)
  676. );
  677. callback();
  678. }, this)
  679. );
  680. }
  681. if (this.options.touchDrag && support.touch) {
  682. (0, _jquery2.default)(document).on(
  683. this.eventName('touchend'),
  684. _jquery2.default.proxy(this.onDragEnd, this)
  685. );
  686. (0, _jquery2.default)(document).one(
  687. this.eventName('touchmove'),
  688. _jquery2.default.proxy(function() {
  689. (0, _jquery2.default)(document).on(
  690. _this2.eventName('touchmove'),
  691. _jquery2.default.proxy(_this2.onDragMove, _this2)
  692. );
  693. callback();
  694. }, this)
  695. );
  696. }
  697. if (this.options.pointerDrag && support.pointer) {
  698. (0, _jquery2.default)(document).on(
  699. this.eventName(support.prefixPointerEvent('pointerup')),
  700. _jquery2.default.proxy(this.onDragEnd, this)
  701. );
  702. (0, _jquery2.default)(document).one(
  703. this.eventName(support.prefixPointerEvent('pointermove')),
  704. _jquery2.default.proxy(function() {
  705. (0, _jquery2.default)(document).on(
  706. _this2.eventName(support.prefixPointerEvent('pointermove')),
  707. _jquery2.default.proxy(_this2.onDragMove, _this2)
  708. );
  709. callback();
  710. }, this)
  711. );
  712. }
  713. (0, _jquery2.default)(document).on(
  714. this.eventName('blur'),
  715. _jquery2.default.proxy(this.onDragEnd, this)
  716. );
  717. }
  718. },
  719. {
  720. key: 'onDragMove',
  721. value: function onDragMove(event) {
  722. var distance = this.distance(
  723. this._drag.pointer,
  724. this.pointer(event)
  725. );
  726. if (!this.is('dragging')) {
  727. return;
  728. }
  729. event.preventDefault();
  730. this.moveBy(distance, true);
  731. }
  732. },
  733. {
  734. key: 'onDragEnd',
  735. value: function onDragEnd() {
  736. (0, _jquery2.default)(document).off(
  737. this.eventName(
  738. 'mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'
  739. )
  740. );
  741. this.$bar.removeClass(this.options.draggingClass);
  742. this.handlePosition = this.getHandlePosition();
  743. if (!this.is('dragging')) {
  744. return;
  745. }
  746. this.leave('dragging');
  747. this.trigger('dragged');
  748. }
  749. },
  750. {
  751. key: 'pointer',
  752. value: function pointer(event) {
  753. var result = {
  754. x: null,
  755. y: null
  756. };
  757. event = event.originalEvent || event || window.event;
  758. event =
  759. event.touches && event.touches.length
  760. ? event.touches[0]
  761. : event.changedTouches && event.changedTouches.length
  762. ? event.changedTouches[0]
  763. : event;
  764. if (event.pageX) {
  765. result.x = event.pageX;
  766. result.y = event.pageY;
  767. } else {
  768. result.x = event.clientX;
  769. result.y = event.clientY;
  770. }
  771. return result;
  772. }
  773. },
  774. {
  775. key: 'distance',
  776. value: function distance(first, second) {
  777. if (this.options.direction === 'vertical') {
  778. return second.y - first.y;
  779. }
  780. return second.x - first.x;
  781. }
  782. },
  783. {
  784. key: 'setBarLength',
  785. value: function setBarLength(length, update) {
  786. if (typeof length !== 'undefined') {
  787. this.$bar.css(this.attributes.length, length);
  788. }
  789. if (update !== false) {
  790. this.updateLength();
  791. }
  792. }
  793. },
  794. {
  795. key: 'setHandleLength',
  796. value: function setHandleLength(length, update) {
  797. if (typeof length !== 'undefined') {
  798. if (length < this.options.minHandleLength) {
  799. length = this.options.minHandleLength;
  800. } else if (
  801. this.options.maxHandleLength &&
  802. length > this.options.maxHandleLength
  803. ) {
  804. length = this.options.maxHandleLength;
  805. }
  806. this.$handle.css(this.attributes.length, length);
  807. if (update !== false) {
  808. this.updateLength(length);
  809. }
  810. }
  811. }
  812. },
  813. {
  814. key: 'updateLength',
  815. value: function updateLength(length, barLength) {
  816. if (typeof length !== 'undefined') {
  817. this.handleLength = length;
  818. } else {
  819. this.handleLength = this.getHandleLenght();
  820. }
  821. if (typeof barLength !== 'undefined') {
  822. this.barLength = barLength;
  823. } else {
  824. this.barLength = this.getBarLength();
  825. }
  826. }
  827. },
  828. {
  829. key: 'getBarLength',
  830. value: function getBarLength() {
  831. return this.$bar[0][this.attributes.clientLength];
  832. }
  833. },
  834. {
  835. key: 'getHandleLenght',
  836. value: function getHandleLenght() {
  837. return this.$handle[0][this.attributes.clientLength];
  838. }
  839. },
  840. {
  841. key: 'getHandlePosition',
  842. value: function getHandlePosition() {
  843. var value = void 0;
  844. if (this.options.useCssTransforms && support.transform) {
  845. value = convertMatrixToArray(this.$handle.css(support.transform));
  846. if (!value) {
  847. return 0;
  848. }
  849. if (this.attributes.axis === 'X') {
  850. value = value[12] || value[4];
  851. } else {
  852. value = value[13] || value[5];
  853. }
  854. } else {
  855. value = this.$handle.css(this.attributes.position);
  856. }
  857. return parseFloat(value.replace('px', ''));
  858. }
  859. },
  860. {
  861. key: 'makeHandlePositionStyle',
  862. value: function makeHandlePositionStyle(value) {
  863. var property = void 0,
  864. x = '0',
  865. y = '0';
  866. if (this.options.useCssTransforms && support.transform) {
  867. if (this.attributes.axis === 'X') {
  868. x = value + 'px';
  869. } else {
  870. y = value + 'px';
  871. }
  872. property = support.transform.toString();
  873. if (this.options.useCssTransforms3d && support.transform3d) {
  874. value = 'translate3d(' + x + ',' + y + ',0)';
  875. } else {
  876. value = 'translate(' + x + ',' + y + ')';
  877. }
  878. } else {
  879. property = this.attributes.position;
  880. }
  881. var temp = {};
  882. temp[property] = value;
  883. return temp;
  884. }
  885. },
  886. {
  887. key: 'setHandlePosition',
  888. value: function setHandlePosition(value) {
  889. var style = this.makeHandlePositionStyle(value);
  890. this.$handle.css(style);
  891. if (!this.is('dragging')) {
  892. this.handlePosition = parseFloat(value);
  893. }
  894. }
  895. },
  896. {
  897. key: 'moveTo',
  898. value: function moveTo(value, trigger, sync) {
  899. var type =
  900. typeof value === 'undefined' ? 'undefined' : _typeof(value);
  901. if (type === 'string') {
  902. if (isPercentage(value)) {
  903. value =
  904. convertPercentageToFloat(value) *
  905. (this.barLength - this.handleLength);
  906. }
  907. value = parseFloat(value);
  908. type = 'number';
  909. }
  910. if (type !== 'number') {
  911. return;
  912. }
  913. this.move(value, trigger, sync);
  914. }
  915. },
  916. {
  917. key: 'moveBy',
  918. value: function moveBy(value, trigger, sync) {
  919. var type =
  920. typeof value === 'undefined' ? 'undefined' : _typeof(value);
  921. if (type === 'string') {
  922. if (isPercentage(value)) {
  923. value =
  924. convertPercentageToFloat(value) *
  925. (this.barLength - this.handleLength);
  926. }
  927. value = parseFloat(value);
  928. type = 'number';
  929. }
  930. if (type !== 'number') {
  931. return;
  932. }
  933. this.move(this.handlePosition + value, trigger, sync);
  934. }
  935. },
  936. {
  937. key: 'move',
  938. value: function move(value, trigger, sync) {
  939. if (typeof value !== 'number' || this.is('disabled')) {
  940. return;
  941. }
  942. if (value < 0) {
  943. value = 0;
  944. } else if (value + this.handleLength > this.barLength) {
  945. value = this.barLength - this.handleLength;
  946. }
  947. if (!this.is('dragging') && sync !== true) {
  948. this.doMove(
  949. value,
  950. this.options.duration,
  951. this.options.easing,
  952. trigger
  953. );
  954. } else {
  955. this.setHandlePosition(value);
  956. if (trigger) {
  957. this.trigger(
  958. 'change',
  959. value / (this.barLength - this.handleLength)
  960. );
  961. }
  962. }
  963. }
  964. },
  965. {
  966. key: 'doMove',
  967. value: function doMove(value, duration, easing, trigger) {
  968. var _this3 = this;
  969. var property = void 0;
  970. this.enter('moving');
  971. duration = duration ? duration : this.options.duration;
  972. easing = easing ? easing : this.options.easing;
  973. var style = this.makeHandlePositionStyle(value);
  974. for (property in style) {
  975. if ({}.hasOwnProperty.call(style, property)) {
  976. break;
  977. }
  978. }
  979. if (this.options.useCssTransitions && support.transition) {
  980. this.enter('transition');
  981. this.prepareTransition(property, duration, easing);
  982. this.$handle.one(support.transition.end, function() {
  983. _this3.$handle.css(support.transition, '');
  984. if (trigger) {
  985. _this3.trigger(
  986. 'change',
  987. value / (_this3.barLength - _this3.handleLength)
  988. );
  989. }
  990. _this3.leave('transition');
  991. _this3.leave('moving');
  992. });
  993. this.setHandlePosition(value);
  994. } else {
  995. this.enter('animating');
  996. var startTime = getTime();
  997. var start = this.getHandlePosition();
  998. var end = value;
  999. var run = function run(time) {
  1000. var percent = (time - startTime) / _this3.options.duration;
  1001. if (percent > 1) {
  1002. percent = 1;
  1003. }
  1004. percent = _this3.easing.fn(percent);
  1005. var scale = 10;
  1006. var current = parseFloat(
  1007. start + percent * (end - start),
  1008. scale
  1009. );
  1010. _this3.setHandlePosition(current);
  1011. if (trigger) {
  1012. _this3.trigger(
  1013. 'change',
  1014. current / (_this3.barLength - _this3.handleLength)
  1015. );
  1016. }
  1017. if (percent === 1) {
  1018. window.cancelAnimationFrame(_this3._frameId);
  1019. _this3._frameId = null;
  1020. _this3.leave('animating');
  1021. _this3.leave('moving');
  1022. } else {
  1023. _this3._frameId = window.requestAnimationFrame(run);
  1024. }
  1025. };
  1026. this._frameId = window.requestAnimationFrame(run);
  1027. }
  1028. }
  1029. },
  1030. {
  1031. key: 'prepareTransition',
  1032. value: function prepareTransition(property, duration, easing, delay) {
  1033. var temp = [];
  1034. if (property) {
  1035. temp.push(property);
  1036. }
  1037. if (duration) {
  1038. if (_jquery2.default.isNumeric(duration)) {
  1039. duration = duration + 'ms';
  1040. }
  1041. temp.push(duration);
  1042. }
  1043. if (easing) {
  1044. temp.push(easing);
  1045. } else {
  1046. temp.push(this.easing.css);
  1047. }
  1048. if (delay) {
  1049. temp.push(delay);
  1050. }
  1051. this.$handle.css(support.transition, temp.join(' '));
  1052. }
  1053. },
  1054. {
  1055. key: 'enable',
  1056. value: function enable() {
  1057. this._states.disabled = 0;
  1058. this.$bar.removeClass(this.options.disabledClass);
  1059. this.trigger('enable');
  1060. }
  1061. },
  1062. {
  1063. key: 'disable',
  1064. value: function disable() {
  1065. this._states.disabled = 1;
  1066. this.$bar.addClass(this.options.disabledClass);
  1067. this.trigger('disable');
  1068. }
  1069. },
  1070. {
  1071. key: 'destroy',
  1072. value: function destroy() {
  1073. this.$handle.removeClass(this.classes.handleClass);
  1074. this.$bar
  1075. .removeClass(this.classes.barClass)
  1076. .removeClass(this.classes.directionClass)
  1077. .attr('draggable', null);
  1078. if (this.options.skin) {
  1079. this.$bar.removeClass(this.options.skin);
  1080. }
  1081. this.$bar.off(this.eventName());
  1082. this.$handle.off(this.eventName());
  1083. this.trigger('destroy');
  1084. }
  1085. }
  1086. ],
  1087. [
  1088. {
  1089. key: 'registerEasing',
  1090. value: function registerEasing(name) {
  1091. for (
  1092. var _len2 = arguments.length,
  1093. args = Array(_len2 > 1 ? _len2 - 1 : 0),
  1094. _key2 = 1;
  1095. _key2 < _len2;
  1096. _key2++
  1097. ) {
  1098. args[_key2 - 1] = arguments[_key2];
  1099. }
  1100. EASING[name] = easingBezier.apply(undefined, args);
  1101. }
  1102. },
  1103. {
  1104. key: 'getEasing',
  1105. value: function getEasing(name) {
  1106. return EASING[name];
  1107. }
  1108. },
  1109. {
  1110. key: 'setDefaults',
  1111. value: function setDefaults(options) {
  1112. _jquery2.default.extend(
  1113. DEFAULTS,
  1114. _jquery2.default.isPlainObject(options) && options
  1115. );
  1116. }
  1117. }
  1118. ]
  1119. );
  1120. return asScrollbar;
  1121. })();
  1122. var info = {
  1123. version: '0.5.7'
  1124. };
  1125. var NAMESPACE = 'asScrollbar';
  1126. var OtherAsScrollbar = _jquery2.default.fn.asScrollbar;
  1127. var jQueryAsScrollbar = function jQueryAsScrollbar(options) {
  1128. for (
  1129. var _len3 = arguments.length,
  1130. args = Array(_len3 > 1 ? _len3 - 1 : 0),
  1131. _key3 = 1;
  1132. _key3 < _len3;
  1133. _key3++
  1134. ) {
  1135. args[_key3 - 1] = arguments[_key3];
  1136. }
  1137. if (typeof options === 'string') {
  1138. var method = options;
  1139. if (/^_/.test(method)) {
  1140. return false;
  1141. } else if (/^(get)/.test(method)) {
  1142. var instance = this.first().data(NAMESPACE);
  1143. if (instance && typeof instance[method] === 'function') {
  1144. return instance[method].apply(instance, args);
  1145. }
  1146. } else {
  1147. return this.each(function() {
  1148. var instance = _jquery2.default.data(this, NAMESPACE);
  1149. if (instance && typeof instance[method] === 'function') {
  1150. instance[method].apply(instance, args);
  1151. }
  1152. });
  1153. }
  1154. }
  1155. return this.each(function() {
  1156. if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
  1157. (0, _jquery2.default)(this).data(
  1158. NAMESPACE,
  1159. new asScrollbar(this, options)
  1160. );
  1161. }
  1162. });
  1163. };
  1164. _jquery2.default.fn.asScrollbar = jQueryAsScrollbar;
  1165. _jquery2.default.asScrollbar = _jquery2.default.extend(
  1166. {
  1167. setDefaults: asScrollbar.setDefaults,
  1168. registerEasing: asScrollbar.registerEasing,
  1169. getEasing: asScrollbar.getEasing,
  1170. noConflict: function noConflict() {
  1171. _jquery2.default.fn.asScrollbar = OtherAsScrollbar;
  1172. return jQueryAsScrollbar;
  1173. }
  1174. },
  1175. info
  1176. );
  1177. });