jquery-slidePanel.es.js 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171
  1. /**
  2. * jQuery slidePanel v0.3.5
  3. * https://github.com/amazingSurge/jquery-slidePanel
  4. *
  5. * Copyright (c) amazingSurge
  6. * Released under the LGPL-3.0 license
  7. */
  8. import $$1 from 'jquery';
  9. var info = {
  10. version:'0.3.5'
  11. };
  12. function convertMatrixToArray(value) {
  13. if (value && (value.substr(0, 6) === 'matrix')) {
  14. return value.replace(/^.*\((.*)\)$/g, '$1').replace(/px/g, '').split(/, +/);
  15. }
  16. return false;
  17. }
  18. function getHashCode(object) {
  19. /* eslint no-bitwise: "off" */
  20. if (typeof object !== 'string') {
  21. object = JSON.stringify(object);
  22. }
  23. let chr, hash = 0,
  24. i, len;
  25. if (object.length === 0) {
  26. return hash;
  27. }
  28. for (i = 0, len = object.length; i < len; i++) {
  29. chr = object.charCodeAt(i);
  30. hash = ((hash << 5) - hash) + chr;
  31. hash |= 0; // Convert to 32bit integer
  32. }
  33. return hash;
  34. }
  35. function getTime() {
  36. if (typeof window.performance !== 'undefined' && window.performance.now) {
  37. return window.performance.now();
  38. }
  39. return Date.now();
  40. }
  41. function isPercentage(n) {
  42. return typeof n === 'string' && n.indexOf('%') !== -1;
  43. }
  44. function isPx(n) {
  45. return typeof n === 'string' && n.indexOf('px') !== -1;
  46. }
  47. /* eslint no-unused-vars: "off" */
  48. var DEFAULTS = {
  49. skin: null,
  50. classes: {
  51. base: 'slidePanel',
  52. show: 'slidePanel-show',
  53. loading: 'slidePanel-loading',
  54. content: 'slidePanel-content',
  55. dragging: 'slidePanel-dragging',
  56. willClose: 'slidePanel-will-close'
  57. },
  58. closeSelector: null,
  59. template(options) {
  60. return `<div class="${options.classes.base} ${options.classes.base}-${options.direction}"><div class="${options.classes.content}"></div></div>`;
  61. },
  62. loading: {
  63. appendTo: 'panel', // body, panel
  64. template(options) {
  65. return `<div class="${options.classes.loading}"></div>`;
  66. },
  67. showCallback(options) {
  68. this.$el.addClass(`${options.classes.loading}-show`);
  69. },
  70. hideCallback(options) {
  71. this.$el.removeClass(`${options.classes.loading}-show`);
  72. }
  73. },
  74. contentFilter(content, object) {
  75. return content;
  76. },
  77. useCssTransforms3d: true,
  78. useCssTransforms: true,
  79. useCssTransitions: true,
  80. dragTolerance: 150,
  81. mouseDragHandler: null,
  82. mouseDrag: true,
  83. touchDrag: true,
  84. pointerDrag: true,
  85. direction: 'right', // top, bottom, left, right
  86. duration: '500',
  87. easing: 'ease', // linear, ease-in, ease-out, ease-in-out
  88. // callbacks
  89. beforeLoad: $.noop, // Before loading
  90. afterLoad: $.noop, // After loading
  91. beforeShow: $.noop, // Before opening
  92. afterShow: $.noop, // After opening
  93. onChange: $.noop, // On changing
  94. beforeHide: $.noop, // Before closing
  95. afterHide: $.noop, // After closing
  96. beforeDrag: $.noop, // Before drag
  97. afterDrag: $.noop // After drag
  98. };
  99. class Instance {
  100. constructor(object,...args){
  101. this.initialize(object,...args);
  102. }
  103. initialize(object,...args) {
  104. const options = args[0] || {};
  105. if (typeof object === 'string') {
  106. object = {
  107. url: object
  108. };
  109. } else if (object && object.nodeType === 1) {
  110. const $element = $$1(object);
  111. object = {
  112. url: $element.attr('href'),
  113. settings: $element.data('settings') || {},
  114. options: $element.data() || {}
  115. };
  116. }
  117. if (object && object.options) {
  118. object.options = $$1.extend(true, options, object.options);
  119. } else {
  120. object.options = options;
  121. }
  122. object.options = $$1.extend(true, {}, DEFAULTS, object.options);
  123. $$1.extend(this, object);
  124. return this;
  125. }
  126. }
  127. /**
  128. * Css features detect
  129. **/
  130. let Support = {};
  131. ((support) => {
  132. /**
  133. * Borrowed from Owl carousel
  134. **/
  135. 'use strict';
  136. const events = {
  137. transition: {
  138. end: {
  139. WebkitTransition: 'webkitTransitionEnd',
  140. MozTransition: 'transitionend',
  141. OTransition: 'oTransitionEnd',
  142. transition: 'transitionend'
  143. }
  144. },
  145. animation: {
  146. end: {
  147. WebkitAnimation: 'webkitAnimationEnd',
  148. MozAnimation: 'animationend',
  149. OAnimation: 'oAnimationEnd',
  150. animation: 'animationend'
  151. }
  152. }
  153. },
  154. prefixes = ['webkit', 'Moz', 'O', 'ms'],
  155. style = $$1('<support>').get(0).style,
  156. tests = {
  157. csstransforms() {
  158. return Boolean(test('transform'));
  159. },
  160. csstransforms3d() {
  161. return Boolean(test('perspective'));
  162. },
  163. csstransitions() {
  164. return Boolean(test('transition'));
  165. },
  166. cssanimations() {
  167. return Boolean(test('animation'));
  168. }
  169. };
  170. const test = (property, prefixed) => {
  171. let result = false,
  172. upper = property.charAt(0).toUpperCase() + property.slice(1);
  173. if (style[property] !== undefined) {
  174. result = property;
  175. }
  176. if (!result) {
  177. $$1.each(prefixes, (i, prefix) => {
  178. if (style[prefix + upper] !== undefined) {
  179. result = `-${prefix.toLowerCase()}-${upper}`;
  180. return false;
  181. }
  182. return true;
  183. });
  184. }
  185. if (prefixed) {
  186. return result;
  187. }
  188. if (result) {
  189. return true;
  190. }
  191. return false;
  192. };
  193. const prefixed = (property) => {
  194. return test(property, true);
  195. };
  196. if (tests.csstransitions()) {
  197. /*eslint no-new-wrappers: "off"*/
  198. support.transition = new String(prefixed('transition'));
  199. support.transition.end = events.transition.end[support.transition];
  200. }
  201. if (tests.cssanimations()) {
  202. /*eslint no-new-wrappers: "off"*/
  203. support.animation = new String(prefixed('animation'));
  204. support.animation.end = events.animation.end[support.animation];
  205. }
  206. if (tests.csstransforms()) {
  207. /*eslint no-new-wrappers: "off"*/
  208. support.transform = new String(prefixed('transform'));
  209. support.transform3d = tests.csstransforms3d();
  210. }
  211. if (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) {
  212. support.touch = true;
  213. } else {
  214. support.touch = false;
  215. }
  216. if (window.PointerEvent || window.MSPointerEvent) {
  217. support.pointer = true;
  218. } else {
  219. support.pointer = false;
  220. }
  221. support.prefixPointerEvent = (pointerEvent) => {
  222. return window.MSPointerEvent ?
  223. `MSPointer${pointerEvent.charAt(9).toUpperCase()}${pointerEvent.substr(10)}` :
  224. pointerEvent;
  225. };
  226. })(Support);
  227. function easingBezier(mX1, mY1, mX2, mY2) {
  228. 'use strict';
  229. function a(aA1, aA2) {
  230. return 1.0 - 3.0 * aA2 + 3.0 * aA1;
  231. }
  232. function b(aA1, aA2) {
  233. return 3.0 * aA2 - 6.0 * aA1;
  234. }
  235. function c(aA1) {
  236. return 3.0 * aA1;
  237. }
  238. // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  239. function calcBezier(aT, aA1, aA2) {
  240. return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
  241. }
  242. // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  243. function getSlope(aT, aA1, aA2) {
  244. return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
  245. }
  246. function getTForX(aX) {
  247. // Newton raphson iteration
  248. let aGuessT = aX;
  249. for (let i = 0; i < 4; ++i) {
  250. const currentSlope = getSlope(aGuessT, mX1, mX2);
  251. if (currentSlope === 0.0) {
  252. return aGuessT;
  253. }
  254. const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  255. aGuessT -= currentX / currentSlope;
  256. }
  257. return aGuessT;
  258. }
  259. if (mX1 === mY1 && mX2 === mY2) {
  260. return {
  261. css: 'linear',
  262. fn(aX) {
  263. return aX;
  264. }
  265. };
  266. }
  267. return {
  268. css: `cubic-bezier(${mX1},${mY1},${mX2},${mY2})`,
  269. fn(aX) {
  270. return calcBezier(getTForX(aX), mY1, mY2);
  271. }
  272. };
  273. }
  274. const Easings = {
  275. ease: easingBezier(0.25, 0.1, 0.25, 1.0),
  276. linear: easingBezier(0.00, 0.0, 1.00, 1.0),
  277. 'ease-in': easingBezier(0.42, 0.0, 1.00, 1.0),
  278. 'ease-out': easingBezier(0.00, 0.0, 0.58, 1.0),
  279. 'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0)
  280. };
  281. const Animate = {
  282. prepareTransition($el, property, duration, easing, delay) {
  283. const temp = [];
  284. if (property) {
  285. temp.push(property);
  286. }
  287. if (duration) {
  288. if ($$1.isNumeric(duration)) {
  289. duration = `${duration}ms`;
  290. }
  291. temp.push(duration);
  292. }
  293. if (easing) {
  294. temp.push(easing);
  295. } else {
  296. temp.push(this.easing.css);
  297. }
  298. if (delay) {
  299. temp.push(delay);
  300. }
  301. $el.css(Support.transition, temp.join(' '));
  302. },
  303. do(view, value, callback) {
  304. SlidePanel.enter('animating');
  305. const duration = view.options.duration,
  306. easing = view.options.easing || 'ease';
  307. const that = this;
  308. let style = view.makePositionStyle(value);
  309. let property = null;
  310. for (property in style) {
  311. if ({}.hasOwnProperty.call(style, property)) {
  312. break;
  313. }
  314. }
  315. if (view.options.useCssTransitions && Support.transition) {
  316. setTimeout(() => {
  317. that.prepareTransition(view.$panel, property, duration, easing);
  318. }, 20);
  319. view.$panel.one(Support.transition.end, () => {
  320. if ($$1.isFunction(callback)) {
  321. callback();
  322. }
  323. view.$panel.css(Support.transition, '');
  324. SlidePanel.leave('animating');
  325. });
  326. setTimeout(() => {
  327. view.setPosition(value);
  328. }, 20);
  329. } else {
  330. const startTime = getTime();
  331. const start = view.getPosition();
  332. const end = value;
  333. const run = time => {
  334. let percent = (time - startTime) / view.options.duration;
  335. if (percent > 1) {
  336. percent = 1;
  337. }
  338. percent = Easings[easing].fn(percent);
  339. const current = parseFloat(start + percent * (end - start), 10);
  340. view.setPosition(current);
  341. if (percent === 1) {
  342. window.cancelAnimationFrame(that._frameId);
  343. that._frameId = null;
  344. if ($$1.isFunction(callback)) {
  345. callback();
  346. }
  347. SlidePanel.leave('animating');
  348. } else {
  349. that._frameId = window.requestAnimationFrame(run);
  350. }
  351. };
  352. that._frameId = window.requestAnimationFrame(run);
  353. }
  354. }
  355. };
  356. class Loading {
  357. constructor(view) {
  358. this.initialize(view);
  359. }
  360. initialize(view) {
  361. this._view = view;
  362. this.build();
  363. }
  364. build() {
  365. if (this._builded) {
  366. return;
  367. }
  368. const options = this._view.options;
  369. const html = options.loading.template.call(this, options);
  370. this.$el = $$1(html);
  371. switch (options.loading.appendTo) {
  372. case 'panel':
  373. this.$el.appendTo(this._view.$panel);
  374. break;
  375. case 'body':
  376. this.$el.appendTo('body');
  377. break;
  378. default:
  379. this.$el.appendTo(options.loading.appendTo);
  380. }
  381. this._builded = true;
  382. }
  383. show(callback) {
  384. this.build();
  385. const options = this._view.options;
  386. options.loading.showCallback.call(this, options);
  387. if ($$1.isFunction(callback)) {
  388. callback.call(this);
  389. }
  390. }
  391. hide(callback) {
  392. const options = this._view.options;
  393. options.loading.hideCallback.call(this, options);
  394. if ($$1.isFunction(callback)) {
  395. callback.call(this);
  396. }
  397. }
  398. }
  399. class Drag {
  400. constructor(...args){
  401. this.initialize(...args);
  402. }
  403. initialize(view) {
  404. this._view = view;
  405. this.options = view.options;
  406. this._drag = {
  407. time: null,
  408. pointer: null
  409. };
  410. this.bindEvents();
  411. }
  412. bindEvents() {
  413. const $panel = this._view.$panel,
  414. options = this.options;
  415. if (options.mouseDrag) {
  416. $panel.on(SlidePanel.eventName('mousedown'), $$1.proxy(this.onDragStart, this));
  417. $panel.on(SlidePanel.eventName('dragstart selectstart'), (event) => {
  418. /* eslint consistent-return: "off" */
  419. if (options.mouseDragHandler) {
  420. if (!($$1(event.target).is(options.mouseDragHandler)) && !($$1(event.target).parents(options.mouseDragHandler).length > 0)) {
  421. return;
  422. }
  423. }
  424. return false;
  425. });
  426. }
  427. if (options.touchDrag && Support.touch) {
  428. $panel.on(SlidePanel.eventName('touchstart'), $$1.proxy(this.onDragStart, this));
  429. $panel.on(SlidePanel.eventName('touchcancel'), $$1.proxy(this.onDragEnd, this));
  430. }
  431. if (options.pointerDrag && Support.pointer) {
  432. $panel.on(SlidePanel.eventName(Support.prefixPointerEvent('pointerdown')), $$1.proxy(this.onDragStart, this));
  433. $panel.on(SlidePanel.eventName(Support.prefixPointerEvent('pointercancel')), $$1.proxy(this.onDragEnd, this));
  434. }
  435. }
  436. /**
  437. * Handles `touchstart` and `mousedown` events.
  438. */
  439. onDragStart(event) {
  440. const that = this;
  441. if (event.which === 3) {
  442. return;
  443. }
  444. const options = this.options;
  445. this._view.$panel.addClass(this.options.classes.dragging);
  446. this._position = this._view.getPosition(true);
  447. this._drag.time = new Date().getTime();
  448. this._drag.pointer = this.pointer(event);
  449. const callback = () => {
  450. SlidePanel.enter('dragging');
  451. SlidePanel.trigger(that._view, 'beforeDrag');
  452. };
  453. if (options.mouseDrag) {
  454. if (options.mouseDragHandler) {
  455. if (!($$1(event.target).is(options.mouseDragHandler)) && !($$1(event.target).parents(options.mouseDragHandler).length > 0)) {
  456. return;
  457. }
  458. }
  459. $$1(document).on(SlidePanel.eventName('mouseup'), $$1.proxy(this.onDragEnd, this));
  460. $$1(document).one(SlidePanel.eventName('mousemove'), $$1.proxy(function () {
  461. $$1(document).on(SlidePanel.eventName('mousemove'), $$1.proxy(this.onDragMove, this));
  462. callback();
  463. }, this));
  464. }
  465. if (options.touchDrag && Support.touch) {
  466. $$1(document).on(SlidePanel.eventName('touchend'), $$1.proxy(this.onDragEnd, this));
  467. $$1(document).one(SlidePanel.eventName('touchmove'), $$1.proxy(function () {
  468. $$1(document).on(SlidePanel.eventName('touchmove'), $$1.proxy(this.onDragMove, this));
  469. callback();
  470. }, this));
  471. }
  472. if (options.pointerDrag && Support.pointer) {
  473. $$1(document).on(SlidePanel.eventName(Support.prefixPointerEvent('pointerup')), $$1.proxy(this.onDragEnd, this));
  474. $$1(document).one(SlidePanel.eventName(Support.prefixPointerEvent('pointermove')), $$1.proxy(function () {
  475. $$1(document).on(SlidePanel.eventName(Support.prefixPointerEvent('pointermove')), $$1.proxy(this.onDragMove, this));
  476. callback();
  477. }, this));
  478. }
  479. $$1(document).on(SlidePanel.eventName('blur'), $$1.proxy(this.onDragEnd, this));
  480. event.preventDefault();
  481. }
  482. /**
  483. * Handles the `touchmove` and `mousemove` events.
  484. */
  485. onDragMove(event) {
  486. const distance = this.distance(this._drag.pointer, this.pointer(event));
  487. if (!SlidePanel.is('dragging')) {
  488. return;
  489. }
  490. if (Math.abs(distance) > this.options.dragTolerance) {
  491. if (this._willClose !== true) {
  492. this._willClose = true;
  493. this._view.$panel.addClass(this.options.classes.willClose);
  494. }
  495. } else if (this._willClose !== false) {
  496. this._willClose = false;
  497. this._view.$panel.removeClass(this.options.classes.willClose);
  498. }
  499. if (!SlidePanel.is('dragging')) {
  500. return;
  501. }
  502. event.preventDefault();
  503. this.move(distance);
  504. }
  505. /**
  506. * Handles the `touchend` and `mouseup` events.
  507. */
  508. onDragEnd(event) {
  509. const distance = this.distance(this._drag.pointer, this.pointer(event));
  510. $$1(document).off(SlidePanel.eventName('mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'));
  511. this._view.$panel.removeClass(this.options.classes.dragging);
  512. if (this._willClose === true) {
  513. this._willClose = false;
  514. this._view.$panel.removeClass(this.options.classes.willClose);
  515. }
  516. if (!SlidePanel.is('dragging')) {
  517. return;
  518. }
  519. SlidePanel.leave('dragging');
  520. SlidePanel.trigger(this._view, 'afterDrag');
  521. if (Math.abs(distance) < this.options.dragTolerance) {
  522. this._view.revert();
  523. } else {
  524. this._view.hide();
  525. // SlidePanel.hide();
  526. }
  527. }
  528. /**
  529. * Gets unified pointer coordinates from event.
  530. * @returns {Object} - Contains `x` and `y` coordinates of current pointer position.
  531. */
  532. pointer(event) {
  533. const result = {
  534. x: null,
  535. y: null
  536. };
  537. event = event.originalEvent || event || window.event;
  538. event = event.touches && event.touches.length ?
  539. event.touches[0] : event.changedTouches && event.changedTouches.length ?
  540. event.changedTouches[0] : event;
  541. if (event.pageX) {
  542. result.x = event.pageX;
  543. result.y = event.pageY;
  544. } else {
  545. result.x = event.clientX;
  546. result.y = event.clientY;
  547. }
  548. return result;
  549. }
  550. /**distance
  551. * Gets the distance of two pointer.
  552. */
  553. distance(first, second) {
  554. const d = this.options.direction;
  555. if (d === 'left' || d === 'right') {
  556. return second.x - first.x;
  557. }
  558. return second.y - first.y;
  559. }
  560. move(value) {
  561. let position = this._position + value;
  562. if (this.options.direction === 'right' || this.options.direction === 'bottom') {
  563. if (position < 0) {
  564. return;
  565. }
  566. } else if (position > 0) {
  567. return;
  568. }
  569. if (!this.options.useCssTransforms && !this.options.useCssTransforms3d) {
  570. if (this.options.direction === 'right' || this.options.direction === 'bottom') {
  571. position = -position;
  572. }
  573. }
  574. this._view.setPosition(`${position}px`);
  575. }
  576. }
  577. class View {
  578. constructor(options) {
  579. this.initialize(options);
  580. }
  581. initialize(options) {
  582. this.options = options;
  583. this._instance = null;
  584. this._showed = false;
  585. this._isLoading = false;
  586. this.build();
  587. }
  588. setLength() {
  589. switch (this.options.direction) {
  590. case 'top':
  591. case 'bottom':
  592. this._length = this.$panel.outerHeight();
  593. break;
  594. case 'left':
  595. case 'right':
  596. this._length = this.$panel.outerWidth();
  597. break;
  598. // no default
  599. }
  600. }
  601. build() {
  602. if (this._builded) {
  603. return;
  604. }
  605. const options = this.options;
  606. const html = options.template.call(this, options);
  607. const that = this;
  608. this.$panel = $$1(html).appendTo('body');
  609. if (options.skin) {
  610. this.$panel.addClass(options.skin);
  611. }
  612. this.$content = this.$panel.find(`.${this.options.classes.content}`);
  613. if (options.closeSelector) {
  614. this.$panel.on('click touchstart', options.closeSelector, () => {
  615. that.hide();
  616. return false;
  617. });
  618. }
  619. this.loading = new Loading(this);
  620. this.setLength();
  621. this.setPosition(this.getHidePosition());
  622. if (options.mouseDrag || options.touchDrag || options.pointerDrag) {
  623. this.drag = new Drag(this);
  624. }
  625. this._builded = true;
  626. }
  627. getHidePosition() {
  628. /* eslint consistent-return: "off" */
  629. const options = this.options;
  630. if (options.useCssTransforms || options.useCssTransforms3d) {
  631. switch (options.direction) {
  632. case 'top':
  633. case 'left':
  634. return '-100';
  635. case 'bottom':
  636. case 'right':
  637. return '100';
  638. // no default
  639. }
  640. }
  641. switch (options.direction) {
  642. case 'top':
  643. case 'bottom':
  644. return parseFloat(-(this._length / $$1(window).height()) * 100, 10);
  645. case 'left':
  646. case 'right':
  647. return parseFloat(-(this._length / $$1(window).width()) * 100, 10);
  648. // no default
  649. }
  650. }
  651. empty() {
  652. this._instance = null;
  653. this.$content.empty();
  654. }
  655. load(object) {
  656. const that = this;
  657. const options = object.options;
  658. SlidePanel.trigger(this, 'beforeLoad', object);
  659. this.empty();
  660. function setContent(content) {
  661. content = options.contentFilter.call(this, content, object);
  662. that.$content.html(content);
  663. that.hideLoading();
  664. that._instance = object;
  665. SlidePanel.trigger(that, 'afterLoad', object);
  666. }
  667. if (object.content) {
  668. setContent(object.content);
  669. } else if (object.url) {
  670. this.showLoading();
  671. $$1.ajax(object.url, object.settings || {}).done(data => {
  672. setContent(data);
  673. });
  674. } else {
  675. setContent('');
  676. }
  677. }
  678. showLoading() {
  679. const that = this;
  680. this.loading.show(() => {
  681. that._isLoading = true;
  682. });
  683. }
  684. hideLoading() {
  685. const that = this;
  686. this.loading.hide(() => {
  687. that._isLoading = false;
  688. });
  689. }
  690. show(callback) {
  691. this.build();
  692. SlidePanel.enter('show');
  693. SlidePanel.trigger(this, 'beforeShow');
  694. $$1('html').addClass(`${this.options.classes.base}-html`);
  695. this.$panel.addClass(this.options.classes.show);
  696. const that = this;
  697. Animate.do(this, 0, () => {
  698. that._showed = true;
  699. SlidePanel.trigger(that, 'afterShow');
  700. if ($$1.isFunction(callback)) {
  701. callback.call(that);
  702. }
  703. });
  704. }
  705. change(object) {
  706. SlidePanel.trigger(this, 'beforeShow');
  707. SlidePanel.trigger(this, 'onChange', object, this._instance);
  708. this.load(object);
  709. SlidePanel.trigger(this, 'afterShow');
  710. }
  711. revert(callback) {
  712. const that = this;
  713. Animate.do(this, 0, () => {
  714. if ($$1.isFunction(callback)) {
  715. callback.call(that);
  716. }
  717. });
  718. }
  719. hide(callback) {
  720. SlidePanel.leave('show');
  721. SlidePanel.trigger(this, 'beforeHide');
  722. const that = this;
  723. Animate.do(this, this.getHidePosition(), () => {
  724. that.$panel.removeClass(that.options.classes.show);
  725. that._showed = false;
  726. that._instance = null;
  727. if (SlidePanel._current === that) {
  728. SlidePanel._current = null;
  729. }
  730. if (!SlidePanel.is('show')) {
  731. $$1('html').removeClass(`${that.options.classes.base}-html`);
  732. }
  733. if ($$1.isFunction(callback)) {
  734. callback.call(that);
  735. }
  736. SlidePanel.trigger(that, 'afterHide');
  737. });
  738. }
  739. makePositionStyle(value) {
  740. let property, x = '0',
  741. y = '0';
  742. if (!isPercentage(value) && !isPx(value)) {
  743. value = `${value}%`;
  744. }
  745. if (this.options.useCssTransforms && Support.transform) {
  746. if (this.options.direction === 'left' || this.options.direction === 'right') {
  747. x = value;
  748. } else {
  749. y = value;
  750. }
  751. property = Support.transform.toString();
  752. if (this.options.useCssTransforms3d && Support.transform3d) {
  753. value = `translate3d(${x},${y},0)`;
  754. } else {
  755. value = `translate(${x},${y})`;
  756. }
  757. } else {
  758. property = this.options.direction;
  759. }
  760. const temp = {};
  761. temp[property] = value;
  762. return temp;
  763. }
  764. getPosition(px) {
  765. let value;
  766. if (this.options.useCssTransforms && Support.transform) {
  767. value = convertMatrixToArray(this.$panel.css(Support.transform));
  768. if (!value) {
  769. return 0;
  770. }
  771. if (this.options.direction === 'left' || this.options.direction === 'right') {
  772. value = value[12] || value[4];
  773. } else {
  774. value = value[13] || value[5];
  775. }
  776. } else {
  777. value = this.$panel.css(this.options.direction);
  778. value = parseFloat(value.replace('px', ''));
  779. }
  780. if (px !== true) {
  781. value = (value / this._length) * 100;
  782. }
  783. return parseFloat(value, 10);
  784. }
  785. setPosition(value) {
  786. const style = this.makePositionStyle(value);
  787. this.$panel.css(style);
  788. }
  789. }
  790. const SlidePanel = {
  791. // Current state information.
  792. _states: {},
  793. _views: {},
  794. _current: null,
  795. /**
  796. * Checks whether the carousel is in a specific state or not.
  797. */
  798. is(state) {
  799. return this._states[state] && this._states[state] > 0;
  800. },
  801. /**
  802. * Enters a state.
  803. */
  804. enter(state) {
  805. if (this._states[state] === undefined) {
  806. this._states[state] = 0;
  807. }
  808. this._states[state]++;
  809. },
  810. /**
  811. * Leaves a state.
  812. */
  813. leave(state) {
  814. this._states[state]--;
  815. },
  816. trigger(view, event, ...args) {
  817. const data = [view].concat(args);
  818. // event
  819. $$1(document).trigger(`slidePanel::${event}`, data);
  820. if ($$1.isFunction(view.options[event])) {
  821. view.options[event].apply(view, args);
  822. }
  823. },
  824. eventName(events) {
  825. if (typeof events !== 'string' || events === '') {
  826. return '.slidepanel';
  827. }
  828. events = events.split(' ');
  829. const length = events.length;
  830. for (let i = 0; i < length; i++) {
  831. events[i] = `${events[i]}.slidepanel`;
  832. }
  833. return events.join(' ');
  834. },
  835. show(object, options) {
  836. if (!(object instanceof Instance)) {
  837. switch (arguments.length) {
  838. case 0:
  839. object = new Instance();
  840. break;
  841. case 1:
  842. object = new Instance(object);
  843. break;
  844. case 2:
  845. object = new Instance(object, options);
  846. break;
  847. // no default
  848. }
  849. }
  850. const view = this.getView(object.options);
  851. const callback = () => {
  852. view.show();
  853. view.load(object);
  854. this._current = view;
  855. };
  856. if (this._current !== null) {
  857. if (view === this._current) {
  858. this._current.change(object);
  859. } else {
  860. this._current.hide(callback);
  861. }
  862. } else {
  863. callback();
  864. }
  865. },
  866. getView(options) {
  867. const code = getHashCode(options);
  868. if (this._views.hasOwnProperty(code)) {
  869. return this._views[code];
  870. }
  871. return (this._views[code] = new View(options));
  872. },
  873. hide(object) {
  874. if (typeof object !== 'undefined' && typeof object.options !== 'undefined') {
  875. const view = this.getView(object.options);
  876. view.hide();
  877. } else if (this._current !== null) {
  878. this._current.hide();
  879. }
  880. }
  881. };
  882. var api = {
  883. is(state) {
  884. return SlidePanel.is(state);
  885. },
  886. show(object, options) {
  887. SlidePanel.show(object, options);
  888. return this;
  889. },
  890. hide(...args) {
  891. SlidePanel.hide(args);
  892. return this;
  893. }
  894. };
  895. if (!Date.now) {
  896. Date.now = () => {
  897. return new Date().getTime();
  898. };
  899. }
  900. const vendors = ['webkit', 'moz'];
  901. for (let i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
  902. const vp = vendors[i];
  903. window.requestAnimationFrame = window[`${vp}RequestAnimationFrame`];
  904. window.cancelAnimationFrame = (window[`${vp}CancelAnimationFrame`] || window[`${vp}CancelRequestAnimationFrame`]);
  905. }
  906. if (/iP(ad|hone|od).*OS (6|7|8)/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
  907. let lastTime = 0;
  908. window.requestAnimationFrame = callback => {
  909. const now = getTime();
  910. const nextTime = Math.max(lastTime + 16, now);
  911. return setTimeout(() => {
  912. callback(lastTime = nextTime);
  913. },
  914. nextTime - now);
  915. };
  916. window.cancelAnimationFrame = clearTimeout;
  917. }
  918. const OtherSlidePanel = $$1.fn.slidePanel;
  919. const jQuerySlidePanel = function(options, ...args) {
  920. const method = options;
  921. if (typeof options === 'string') {
  922. return this.each(function() {
  923. let instance = $$1.data(this, 'slidePanel');
  924. if (!(instance instanceof Instance)) {
  925. instance = new Instance(this, args);
  926. $$1.data(this, 'slidePanel', instance);
  927. }
  928. switch (method) {
  929. case 'hide':
  930. SlidePanel.hide(instance);
  931. break;
  932. case 'show':
  933. SlidePanel.show(instance);
  934. break;
  935. // no default
  936. }
  937. });
  938. }
  939. return this.each(function() {
  940. if (!$$1.data(this, 'slidePanel')) {
  941. $$1.data(this, 'slidePanel', new Instance(this, options));
  942. $$1(this).on('click', function(e) {
  943. const instance = $$1.data(this, 'slidePanel');
  944. SlidePanel.show(instance);
  945. e.preventDefault();
  946. e.stopPropagation();
  947. });
  948. }
  949. });
  950. };
  951. $$1.fn.slidePanel = jQuerySlidePanel;
  952. $$1.slidePanel = function(...args) {
  953. SlidePanel.show(...args);
  954. };
  955. $$1.extend($$1.slidePanel, {
  956. setDefaults: function(options) {
  957. $$1.extend(true, DEFAULTS, $$1.isPlainObject(options) && options);
  958. },
  959. noConflict: function() {
  960. $$1.fn.slidePanel = OtherSlidePanel;
  961. return jQuerySlidePanel;
  962. }
  963. }, info, api);