jquery-asScrollable.js 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
  1. /**
  2. * jQuery asScrollable v0.4.10
  3. * https://github.com/amazingSurge/jquery-asScrollable
  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.jqueryAsScrollableEs = 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: 'asScrollable',
  66. skin: null,
  67. contentSelector: null,
  68. containerSelector: null,
  69. enabledClass: 'is-enabled',
  70. disabledClass: 'is-disabled',
  71. draggingClass: 'is-dragging',
  72. hoveringClass: 'is-hovering',
  73. scrollingClass: 'is-scrolling',
  74. direction: 'vertical', // vertical, horizontal, both, auto
  75. showOnHover: true,
  76. showOnBarHover: false,
  77. duration: 500,
  78. easing: 'ease-in', // linear, ease, ease-in, ease-out, ease-in-out
  79. responsive: true,
  80. throttle: 20,
  81. scrollbar: {}
  82. };
  83. function getTime() {
  84. if (typeof window.performance !== 'undefined' && window.performance.now) {
  85. return window.performance.now();
  86. }
  87. return Date.now();
  88. }
  89. function isPercentage(n) {
  90. return typeof n === 'string' && n.indexOf('%') !== -1;
  91. }
  92. function conventToPercentage(n) {
  93. if (n < 0) {
  94. n = 0;
  95. } else if (n > 1) {
  96. n = 1;
  97. }
  98. return parseFloat(n).toFixed(4) * 100 + '%';
  99. }
  100. function convertPercentageToFloat(n) {
  101. return parseFloat(n.slice(0, -1) / 100, 10);
  102. }
  103. var isFFLionScrollbar = (function() {
  104. 'use strict';
  105. var isOSXFF = void 0,
  106. ua = void 0,
  107. version = void 0;
  108. ua = window.navigator.userAgent;
  109. isOSXFF = /(?=.+Mac OS X)(?=.+Firefox)/.test(ua);
  110. if (!isOSXFF) {
  111. return false;
  112. }
  113. version = /Firefox\/\d{2}\./.exec(ua);
  114. if (version) {
  115. version = version[0].replace(/\D+/g, '');
  116. }
  117. return isOSXFF && +version > 23;
  118. })();
  119. var NAMESPACE$1 = 'asScrollable';
  120. var instanceId = 0;
  121. var AsScrollable = (function() {
  122. function AsScrollable(element, options) {
  123. _classCallCheck(this, AsScrollable);
  124. this.$element = (0, _jquery2.default)(element);
  125. options = this.options = _jquery2.default.extend(
  126. {},
  127. DEFAULTS,
  128. options || {},
  129. this.$element.data('options') || {}
  130. );
  131. this.classes = {
  132. wrap: options.namespace,
  133. content: options.namespace + '-content',
  134. container: options.namespace + '-container',
  135. bar: options.namespace + '-bar',
  136. barHide: options.namespace + '-bar-hide',
  137. skin: options.skin
  138. };
  139. this.attributes = {
  140. vertical: {
  141. axis: 'Y',
  142. overflow: 'overflow-y',
  143. scroll: 'scrollTop',
  144. scrollLength: 'scrollHeight',
  145. pageOffset: 'pageYOffset',
  146. ffPadding: 'padding-right',
  147. length: 'height',
  148. clientLength: 'clientHeight',
  149. offset: 'offsetHeight',
  150. crossLength: 'width',
  151. crossClientLength: 'clientWidth',
  152. crossOffset: 'offsetWidth'
  153. },
  154. horizontal: {
  155. axis: 'X',
  156. overflow: 'overflow-x',
  157. scroll: 'scrollLeft',
  158. scrollLength: 'scrollWidth',
  159. pageOffset: 'pageXOffset',
  160. ffPadding: 'padding-bottom',
  161. length: 'width',
  162. clientLength: 'clientWidth',
  163. offset: 'offsetWidth',
  164. crossLength: 'height',
  165. crossClientLength: 'clientHeight',
  166. crossOffset: 'offsetHeight'
  167. }
  168. };
  169. // Current state information.
  170. this._states = {};
  171. // Supported direction
  172. this.horizontal = null;
  173. this.vertical = null;
  174. this.$bar = null;
  175. // Current timeout
  176. this._frameId = null;
  177. this._timeoutId = null;
  178. this.instanceId = ++instanceId;
  179. this.easing =
  180. _jquery2.default.asScrollbar.getEasing(this.options.easing) ||
  181. _jquery2.default.asScrollbar.getEasing('ease');
  182. this.init();
  183. }
  184. _createClass(
  185. AsScrollable,
  186. [
  187. {
  188. key: 'init',
  189. value: function init() {
  190. var position = this.$element.css('position');
  191. if (this.options.containerSelector) {
  192. this.$container = this.$element.find(
  193. this.options.containerSelector
  194. );
  195. this.$wrap = this.$element;
  196. if (position === 'static') {
  197. this.$wrap.css('position', 'relative');
  198. }
  199. } else {
  200. this.$container = this.$element.wrap('<div>');
  201. this.$wrap = this.$container.parent();
  202. this.$wrap.height(this.$element.height());
  203. if (position !== 'static') {
  204. this.$wrap.css('position', position);
  205. } else {
  206. this.$wrap.css('position', 'relative');
  207. }
  208. }
  209. if (this.options.contentSelector) {
  210. this.$content = this.$container.find(
  211. this.options.contentSelector
  212. );
  213. } else {
  214. this.$content = this.$container.wrap('<div>');
  215. this.$container = this.$content.parent();
  216. }
  217. switch (this.options.direction) {
  218. case 'vertical': {
  219. this.vertical = true;
  220. break;
  221. }
  222. case 'horizontal': {
  223. this.horizontal = true;
  224. break;
  225. }
  226. case 'both': {
  227. this.horizontal = true;
  228. this.vertical = true;
  229. break;
  230. }
  231. case 'auto': {
  232. var overflowX = this.$element.css('overflow-x'),
  233. overflowY = this.$element.css('overflow-y');
  234. if (overflowX === 'scroll' || overflowX === 'auto') {
  235. this.horizontal = true;
  236. }
  237. if (overflowY === 'scroll' || overflowY === 'auto') {
  238. this.vertical = true;
  239. }
  240. break;
  241. }
  242. default: {
  243. break;
  244. }
  245. }
  246. if (!this.vertical && !this.horizontal) {
  247. return;
  248. }
  249. this.$wrap.addClass(this.classes.wrap);
  250. this.$container.addClass(this.classes.container);
  251. this.$content.addClass(this.classes.content);
  252. if (this.options.skin) {
  253. this.$wrap.addClass(this.classes.skin);
  254. }
  255. this.$wrap.addClass(this.options.enabledClass);
  256. if (this.vertical) {
  257. this.$wrap.addClass(this.classes.wrap + '-vertical');
  258. this.initLayout('vertical');
  259. this.createBar('vertical');
  260. }
  261. if (this.horizontal) {
  262. this.$wrap.addClass(this.classes.wrap + '-horizontal');
  263. this.initLayout('horizontal');
  264. this.createBar('horizontal');
  265. }
  266. this.bindEvents();
  267. this.trigger('ready');
  268. }
  269. },
  270. {
  271. key: 'bindEvents',
  272. value: function bindEvents() {
  273. var _this = this;
  274. if (this.options.responsive) {
  275. (0, _jquery2.default)(window).on(
  276. this.eventNameWithId('orientationchange'),
  277. function() {
  278. _this.update();
  279. }
  280. );
  281. (0, _jquery2.default)(window).on(
  282. this.eventNameWithId('resize'),
  283. this.throttle(function() {
  284. _this.update();
  285. }, this.options.throttle)
  286. );
  287. }
  288. if (!this.horizontal && !this.vertical) {
  289. return;
  290. }
  291. var that = this;
  292. this.$wrap.on(this.eventName('mouseenter'), function() {
  293. that.$wrap.addClass(_this.options.hoveringClass);
  294. that.enter('hovering');
  295. that.trigger('hover');
  296. });
  297. this.$wrap.on(this.eventName('mouseleave'), function() {
  298. that.$wrap.removeClass(_this.options.hoveringClass);
  299. if (!that.is('hovering')) {
  300. return;
  301. }
  302. that.leave('hovering');
  303. that.trigger('hovered');
  304. });
  305. if (this.options.showOnHover) {
  306. if (this.options.showOnBarHover) {
  307. this.$bar
  308. .on('asScrollbar::hover', function() {
  309. if (that.horizontal) {
  310. that.showBar('horizontal');
  311. }
  312. if (that.vertical) {
  313. that.showBar('vertical');
  314. }
  315. })
  316. .on('asScrollbar::hovered', function() {
  317. if (that.horizontal) {
  318. that.hideBar('horizontal');
  319. }
  320. if (that.vertical) {
  321. that.hideBar('vertical');
  322. }
  323. });
  324. } else {
  325. this.$element.on(
  326. NAMESPACE$1 + '::hover',
  327. _jquery2.default.proxy(this.showBar, this)
  328. );
  329. this.$element.on(
  330. NAMESPACE$1 + '::hovered',
  331. _jquery2.default.proxy(this.hideBar, this)
  332. );
  333. }
  334. }
  335. this.$container.on(this.eventName('scroll'), function() {
  336. if (that.horizontal) {
  337. var oldLeft = that.offsetLeft;
  338. that.offsetLeft = that.getOffset('horizontal');
  339. if (oldLeft !== that.offsetLeft) {
  340. that.trigger(
  341. 'scroll',
  342. that.getPercentOffset('horizontal'),
  343. 'horizontal'
  344. );
  345. if (that.offsetLeft === 0) {
  346. that.trigger('scrolltop', 'horizontal');
  347. }
  348. if (that.offsetLeft === that.getScrollLength('horizontal')) {
  349. that.trigger('scrollend', 'horizontal');
  350. }
  351. }
  352. }
  353. if (that.vertical) {
  354. var oldTop = that.offsetTop;
  355. that.offsetTop = that.getOffset('vertical');
  356. if (oldTop !== that.offsetTop) {
  357. that.trigger(
  358. 'scroll',
  359. that.getPercentOffset('vertical'),
  360. 'vertical'
  361. );
  362. if (that.offsetTop === 0) {
  363. that.trigger('scrolltop', 'vertical');
  364. }
  365. if (that.offsetTop === that.getScrollLength('vertical')) {
  366. that.trigger('scrollend', 'vertical');
  367. }
  368. }
  369. }
  370. });
  371. this.$element.on(NAMESPACE$1 + '::scroll', function(
  372. e,
  373. api,
  374. value,
  375. direction
  376. ) {
  377. if (!that.is('scrolling')) {
  378. that.enter('scrolling');
  379. that.$wrap.addClass(that.options.scrollingClass);
  380. }
  381. var bar = api.getBarApi(direction);
  382. bar.moveTo(conventToPercentage(value), false, true);
  383. clearTimeout(that._timeoutId);
  384. that._timeoutId = setTimeout(function() {
  385. that.$wrap.removeClass(that.options.scrollingClass);
  386. that.leave('scrolling');
  387. }, 200);
  388. });
  389. this.$bar.on('asScrollbar::change', function(e, api, value) {
  390. if (typeof e.target.direction === 'string') {
  391. that.scrollTo(
  392. e.target.direction,
  393. conventToPercentage(value),
  394. false,
  395. true
  396. );
  397. }
  398. });
  399. this.$bar
  400. .on('asScrollbar::drag', function() {
  401. that.$wrap.addClass(that.options.draggingClass);
  402. })
  403. .on('asScrollbar::dragged', function() {
  404. that.$wrap.removeClass(that.options.draggingClass);
  405. });
  406. }
  407. },
  408. {
  409. key: 'unbindEvents',
  410. value: function unbindEvents() {
  411. this.$wrap.off(this.eventName());
  412. this.$element
  413. .off(NAMESPACE$1 + '::scroll')
  414. .off(NAMESPACE$1 + '::hover')
  415. .off(NAMESPACE$1 + '::hovered');
  416. this.$container.off(this.eventName());
  417. (0, _jquery2.default)(window).off(this.eventNameWithId());
  418. }
  419. },
  420. {
  421. key: 'initLayout',
  422. value: function initLayout(direction) {
  423. if (direction === 'vertical') {
  424. this.$container.css('height', this.$wrap.height());
  425. }
  426. var attributes = this.attributes[direction],
  427. container = this.$container[0];
  428. // this.$container.css(attributes.overflow, 'scroll');
  429. var parentLength =
  430. container.parentNode[attributes.crossClientLength],
  431. scrollbarWidth = this.getBrowserScrollbarWidth(direction);
  432. this.$content.css(attributes.crossLength, parentLength + 'px');
  433. this.$container.css(
  434. attributes.crossLength,
  435. scrollbarWidth + parentLength + 'px'
  436. );
  437. if (scrollbarWidth === 0 && isFFLionScrollbar) {
  438. this.$container.css(attributes.ffPadding, 16);
  439. }
  440. }
  441. },
  442. {
  443. key: 'createBar',
  444. value: function createBar(direction) {
  445. var options = _jquery2.default.extend(this.options.scrollbar, {
  446. namespace: this.classes.bar,
  447. direction: direction,
  448. useCssTransitions: false,
  449. keyboard: false
  450. });
  451. var $bar = (0, _jquery2.default)('<div>');
  452. $bar.asScrollbar(options);
  453. if (this.options.showOnHover) {
  454. $bar.addClass(this.classes.barHide);
  455. }
  456. $bar.appendTo(this.$wrap);
  457. this['$' + direction] = $bar;
  458. if (this.$bar === null) {
  459. this.$bar = $bar;
  460. } else {
  461. this.$bar = this.$bar.add($bar);
  462. }
  463. this.updateBarHandle(direction);
  464. }
  465. },
  466. {
  467. key: 'trigger',
  468. value: function trigger(eventType) {
  469. for (
  470. var _len = arguments.length,
  471. params = Array(_len > 1 ? _len - 1 : 0),
  472. _key = 1;
  473. _key < _len;
  474. _key++
  475. ) {
  476. params[_key - 1] = arguments[_key];
  477. }
  478. var data = [this].concat(params);
  479. // event
  480. this.$element.trigger(NAMESPACE$1 + '::' + eventType, data);
  481. // callback
  482. eventType = eventType.replace(/\b\w+\b/g, function(word) {
  483. return word.substring(0, 1).toUpperCase() + word.substring(1);
  484. });
  485. var onFunction = 'on' + eventType;
  486. if (typeof this.options[onFunction] === 'function') {
  487. this.options[onFunction].apply(this, params);
  488. }
  489. }
  490. },
  491. {
  492. key: 'is',
  493. value: function is(state) {
  494. return this._states[state] && this._states[state] > 0;
  495. }
  496. },
  497. {
  498. key: 'enter',
  499. value: function enter(state) {
  500. if (this._states[state] === undefined) {
  501. this._states[state] = 0;
  502. }
  503. // this._states[state]++;
  504. this._states[state] = 1;
  505. }
  506. },
  507. {
  508. key: 'leave',
  509. value: function leave(state) {
  510. // this._states[state]--;
  511. this._states[state] = -1;
  512. }
  513. },
  514. {
  515. key: 'eventName',
  516. value: function eventName(events) {
  517. if (typeof events !== 'string' || events === '') {
  518. return '.' + this.options.namespace;
  519. }
  520. events = events.split(' ');
  521. var length = events.length;
  522. for (var i = 0; i < length; i++) {
  523. events[i] = events[i] + '.' + this.options.namespace;
  524. }
  525. return events.join(' ');
  526. }
  527. },
  528. {
  529. key: 'eventNameWithId',
  530. value: function eventNameWithId(events) {
  531. if (typeof events !== 'string' || events === '') {
  532. return '.' + this.options.namespace + '-' + this.instanceId;
  533. }
  534. events = events.split(' ');
  535. var length = events.length;
  536. for (var i = 0; i < length; i++) {
  537. events[i] =
  538. events[i] +
  539. '.' +
  540. this.options.namespace +
  541. '-' +
  542. this.instanceId;
  543. }
  544. return events.join(' ');
  545. }
  546. },
  547. {
  548. key: 'throttle',
  549. value: function throttle(func, wait) {
  550. var _this2 = this;
  551. var _now =
  552. Date.now ||
  553. function() {
  554. return new Date().getTime();
  555. };
  556. var timeout = void 0;
  557. var context = void 0;
  558. var args = void 0;
  559. var result = void 0;
  560. var previous = 0;
  561. var later = function later() {
  562. previous = _now();
  563. timeout = null;
  564. result = func.apply(context, args);
  565. if (!timeout) {
  566. context = args = null;
  567. }
  568. };
  569. return function() {
  570. for (
  571. var _len2 = arguments.length, params = Array(_len2), _key2 = 0;
  572. _key2 < _len2;
  573. _key2++
  574. ) {
  575. params[_key2] = arguments[_key2];
  576. }
  577. /*eslint consistent-this: "off"*/
  578. var now = _now();
  579. var remaining = wait - (now - previous);
  580. context = _this2;
  581. args = params;
  582. if (remaining <= 0 || remaining > wait) {
  583. if (timeout) {
  584. clearTimeout(timeout);
  585. timeout = null;
  586. }
  587. previous = now;
  588. result = func.apply(context, args);
  589. if (!timeout) {
  590. context = args = null;
  591. }
  592. } else if (!timeout) {
  593. timeout = setTimeout(later, remaining);
  594. }
  595. return result;
  596. };
  597. }
  598. },
  599. {
  600. key: 'getBrowserScrollbarWidth',
  601. value: function getBrowserScrollbarWidth(direction) {
  602. var attributes = this.attributes[direction],
  603. outer = void 0,
  604. outerStyle = void 0;
  605. if (attributes.scrollbarWidth) {
  606. return attributes.scrollbarWidth;
  607. }
  608. outer = document.createElement('div');
  609. outerStyle = outer.style;
  610. outerStyle.position = 'absolute';
  611. outerStyle.width = '100px';
  612. outerStyle.height = '100px';
  613. outerStyle.overflow = 'scroll';
  614. outerStyle.top = '-9999px';
  615. document.body.appendChild(outer);
  616. attributes.scrollbarWidth =
  617. outer[attributes.offset] - outer[attributes.clientLength];
  618. document.body.removeChild(outer);
  619. return attributes.scrollbarWidth;
  620. }
  621. },
  622. {
  623. key: 'getOffset',
  624. value: function getOffset(direction) {
  625. var attributes = this.attributes[direction],
  626. container = this.$container[0];
  627. return (
  628. container[attributes.pageOffset] || container[attributes.scroll]
  629. );
  630. }
  631. },
  632. {
  633. key: 'getPercentOffset',
  634. value: function getPercentOffset(direction) {
  635. return this.getOffset(direction) / this.getScrollLength(direction);
  636. }
  637. },
  638. {
  639. key: 'getContainerLength',
  640. value: function getContainerLength(direction) {
  641. return this.$container[0][this.attributes[direction].clientLength];
  642. }
  643. },
  644. {
  645. key: 'getScrollLength',
  646. value: function getScrollLength(direction) {
  647. var scrollLength = this.$content[0][
  648. this.attributes[direction].scrollLength
  649. ];
  650. return scrollLength - this.getContainerLength(direction);
  651. }
  652. },
  653. {
  654. key: 'scrollTo',
  655. value: function scrollTo(direction, value, trigger, sync) {
  656. var type =
  657. typeof value === 'undefined' ? 'undefined' : _typeof(value);
  658. if (type === 'string') {
  659. if (isPercentage(value)) {
  660. value =
  661. convertPercentageToFloat(value) *
  662. this.getScrollLength(direction);
  663. }
  664. value = parseFloat(value);
  665. type = 'number';
  666. }
  667. if (type !== 'number') {
  668. return;
  669. }
  670. this.move(direction, value, trigger, sync);
  671. }
  672. },
  673. {
  674. key: 'scrollBy',
  675. value: function scrollBy(direction, value, trigger, sync) {
  676. var type =
  677. typeof value === 'undefined' ? 'undefined' : _typeof(value);
  678. if (type === 'string') {
  679. if (isPercentage(value)) {
  680. value =
  681. convertPercentageToFloat(value) *
  682. this.getScrollLength(direction);
  683. }
  684. value = parseFloat(value);
  685. type = 'number';
  686. }
  687. if (type !== 'number') {
  688. return;
  689. }
  690. this.move(
  691. direction,
  692. this.getOffset(direction) + value,
  693. trigger,
  694. sync
  695. );
  696. }
  697. },
  698. {
  699. key: 'move',
  700. value: function move(direction, value, trigger, sync) {
  701. if (this[direction] !== true || typeof value !== 'number') {
  702. return;
  703. }
  704. this.enter('moving');
  705. if (value < 0) {
  706. value = 0;
  707. } else if (value > this.getScrollLength(direction)) {
  708. value = this.getScrollLength(direction);
  709. }
  710. var attributes = this.attributes[direction];
  711. var that = this;
  712. var callback = function callback() {
  713. that.leave('moving');
  714. };
  715. if (sync) {
  716. this.$container[0][attributes.scroll] = value;
  717. if (trigger !== false) {
  718. this.trigger(
  719. 'change',
  720. value / this.getScrollLength(direction),
  721. direction
  722. );
  723. }
  724. callback();
  725. } else {
  726. this.enter('animating');
  727. var startTime = getTime();
  728. var start = this.getOffset(direction);
  729. var end = value;
  730. var run = function run(time) {
  731. var percent = (time - startTime) / that.options.duration;
  732. if (percent > 1) {
  733. percent = 1;
  734. }
  735. percent = that.easing.fn(percent);
  736. var current = parseFloat(start + percent * (end - start), 10);
  737. that.$container[0][attributes.scroll] = current;
  738. if (trigger !== false) {
  739. that.trigger(
  740. 'change',
  741. value / that.getScrollLength(direction),
  742. direction
  743. );
  744. }
  745. if (percent === 1) {
  746. window.cancelAnimationFrame(that._frameId);
  747. that._frameId = null;
  748. that.leave('animating');
  749. callback();
  750. } else {
  751. that._frameId = window.requestAnimationFrame(run);
  752. }
  753. };
  754. this._frameId = window.requestAnimationFrame(run);
  755. }
  756. }
  757. },
  758. {
  759. key: 'scrollXto',
  760. value: function scrollXto(value, trigger, sync) {
  761. return this.scrollTo('horizontal', value, trigger, sync);
  762. }
  763. },
  764. {
  765. key: 'scrollYto',
  766. value: function scrollYto(value, trigger, sync) {
  767. return this.scrollTo('vertical', value, trigger, sync);
  768. }
  769. },
  770. {
  771. key: 'scrollXby',
  772. value: function scrollXby(value, trigger, sync) {
  773. return this.scrollBy('horizontal', value, trigger, sync);
  774. }
  775. },
  776. {
  777. key: 'scrollYby',
  778. value: function scrollYby(value, trigger, sync) {
  779. return this.scrollBy('vertical', value, trigger, sync);
  780. }
  781. },
  782. {
  783. key: 'getBar',
  784. value: function getBar(direction) {
  785. if (direction && this['$' + direction]) {
  786. return this['$' + direction];
  787. }
  788. return this.$bar;
  789. }
  790. },
  791. {
  792. key: 'getBarApi',
  793. value: function getBarApi(direction) {
  794. return this.getBar(direction).data('asScrollbar');
  795. }
  796. },
  797. {
  798. key: 'getBarX',
  799. value: function getBarX() {
  800. return this.getBar('horizontal');
  801. }
  802. },
  803. {
  804. key: 'getBarY',
  805. value: function getBarY() {
  806. return this.getBar('vertical');
  807. }
  808. },
  809. {
  810. key: 'showBar',
  811. value: function showBar(direction) {
  812. this.getBar(direction).removeClass(this.classes.barHide);
  813. }
  814. },
  815. {
  816. key: 'hideBar',
  817. value: function hideBar(direction) {
  818. this.getBar(direction).addClass(this.classes.barHide);
  819. }
  820. },
  821. {
  822. key: 'updateBarHandle',
  823. value: function updateBarHandle(direction) {
  824. var api = this.getBarApi(direction);
  825. if (!api) {
  826. return;
  827. }
  828. var containerLength = this.getContainerLength(direction),
  829. scrollLength = this.getScrollLength(direction);
  830. if (scrollLength > 0) {
  831. if (api.is('disabled')) {
  832. api.enable();
  833. }
  834. api.setHandleLength(
  835. api.getBarLength() *
  836. containerLength /
  837. (scrollLength + containerLength),
  838. true
  839. );
  840. } else {
  841. api.disable();
  842. }
  843. }
  844. },
  845. {
  846. key: 'disable',
  847. value: function disable() {
  848. if (!this.is('disabled')) {
  849. this.enter('disabled');
  850. this.$wrap
  851. .addClass(this.options.disabledClass)
  852. .removeClass(this.options.enabledClass);
  853. this.unbindEvents();
  854. this.unStyle();
  855. }
  856. this.trigger('disable');
  857. }
  858. },
  859. {
  860. key: 'enable',
  861. value: function enable() {
  862. if (this.is('disabled')) {
  863. this.leave('disabled');
  864. this.$wrap
  865. .addClass(this.options.enabledClass)
  866. .removeClass(this.options.disabledClass);
  867. this.bindEvents();
  868. this.update();
  869. }
  870. this.trigger('enable');
  871. }
  872. },
  873. {
  874. key: 'update',
  875. value: function update() {
  876. if (this.is('disabled')) {
  877. return;
  878. }
  879. if (this.$element.is(':visible')) {
  880. if (this.vertical) {
  881. this.initLayout('vertical');
  882. this.updateBarHandle('vertical');
  883. }
  884. if (this.horizontal) {
  885. this.initLayout('horizontal');
  886. this.updateBarHandle('horizontal');
  887. }
  888. }
  889. }
  890. },
  891. {
  892. key: 'unStyle',
  893. value: function unStyle() {
  894. if (this.horizontal) {
  895. this.$container.css({
  896. height: '',
  897. 'padding-bottom': ''
  898. });
  899. this.$content.css({
  900. height: ''
  901. });
  902. }
  903. if (this.vertical) {
  904. this.$container.css({
  905. width: '',
  906. height: '',
  907. 'padding-right': ''
  908. });
  909. this.$content.css({
  910. width: ''
  911. });
  912. }
  913. if (!this.options.containerSelector) {
  914. this.$wrap.css({
  915. height: ''
  916. });
  917. }
  918. }
  919. },
  920. {
  921. key: 'destroy',
  922. value: function destroy() {
  923. this.$wrap
  924. .removeClass(this.classes.wrap + '-vertical')
  925. .removeClass(this.classes.wrap + '-horizontal')
  926. .removeClass(this.classes.wrap)
  927. .removeClass(this.options.enabledClass)
  928. .removeClass(this.classes.disabledClass);
  929. this.unStyle();
  930. if (this.$bar) {
  931. this.$bar.remove();
  932. }
  933. this.unbindEvents();
  934. if (this.options.containerSelector) {
  935. this.$container.removeClass(this.classes.container);
  936. } else {
  937. this.$container.unwrap();
  938. }
  939. if (!this.options.contentSelector) {
  940. this.$content.unwrap();
  941. }
  942. this.$content.removeClass(this.classes.content);
  943. this.$element.data(NAMESPACE$1, null);
  944. this.trigger('destroy');
  945. }
  946. }
  947. ],
  948. [
  949. {
  950. key: 'setDefaults',
  951. value: function setDefaults(options) {
  952. _jquery2.default.extend(
  953. DEFAULTS,
  954. _jquery2.default.isPlainObject(options) && options
  955. );
  956. }
  957. }
  958. ]
  959. );
  960. return AsScrollable;
  961. })();
  962. var info = {
  963. version: '0.4.10'
  964. };
  965. var NAMESPACE = 'asScrollable';
  966. var OtherAsScrollable = _jquery2.default.fn.asScrollable;
  967. var jQueryAsScrollable = function jQueryAsScrollable(options) {
  968. for (
  969. var _len3 = arguments.length,
  970. args = Array(_len3 > 1 ? _len3 - 1 : 0),
  971. _key3 = 1;
  972. _key3 < _len3;
  973. _key3++
  974. ) {
  975. args[_key3 - 1] = arguments[_key3];
  976. }
  977. if (typeof options === 'string') {
  978. var method = options;
  979. if (/^_/.test(method)) {
  980. return false;
  981. } else if (/^(get)/.test(method)) {
  982. var instance = this.first().data(NAMESPACE);
  983. if (instance && typeof instance[method] === 'function') {
  984. return instance[method].apply(instance, args);
  985. }
  986. } else {
  987. return this.each(function() {
  988. var instance = _jquery2.default.data(this, NAMESPACE);
  989. if (instance && typeof instance[method] === 'function') {
  990. instance[method].apply(instance, args);
  991. }
  992. });
  993. }
  994. }
  995. return this.each(function() {
  996. if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
  997. (0, _jquery2.default)(this).data(
  998. NAMESPACE,
  999. new AsScrollable(this, options)
  1000. );
  1001. }
  1002. });
  1003. };
  1004. _jquery2.default.fn.asScrollable = jQueryAsScrollable;
  1005. _jquery2.default.asScrollable = _jquery2.default.extend(
  1006. {
  1007. setDefaults: AsScrollable.setDefaults,
  1008. noConflict: function noConflict() {
  1009. _jquery2.default.fn.asScrollable = OtherAsScrollable;
  1010. return jQueryAsScrollable;
  1011. }
  1012. },
  1013. info
  1014. );
  1015. });