jquery-slidePanel.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470
  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. (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.jquerySlidePanelEs = 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. function _classCallCheck(instance, Constructor) {
  31. if (!(instance instanceof Constructor)) {
  32. throw new TypeError('Cannot call a class as a function');
  33. }
  34. }
  35. var _createClass = (function() {
  36. function defineProperties(target, props) {
  37. for (var i = 0; i < props.length; i++) {
  38. var descriptor = props[i];
  39. descriptor.enumerable = descriptor.enumerable || false;
  40. descriptor.configurable = true;
  41. if ('value' in descriptor) descriptor.writable = true;
  42. Object.defineProperty(target, descriptor.key, descriptor);
  43. }
  44. }
  45. return function(Constructor, protoProps, staticProps) {
  46. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  47. if (staticProps) defineProperties(Constructor, staticProps);
  48. return Constructor;
  49. };
  50. })();
  51. var info = {
  52. version: '0.3.5'
  53. };
  54. function convertMatrixToArray(value) {
  55. if (value && value.substr(0, 6) === 'matrix') {
  56. return value
  57. .replace(/^.*\((.*)\)$/g, '$1')
  58. .replace(/px/g, '')
  59. .split(/, +/);
  60. }
  61. return false;
  62. }
  63. function getHashCode(object) {
  64. /* eslint no-bitwise: "off" */
  65. if (typeof object !== 'string') {
  66. object = JSON.stringify(object);
  67. }
  68. var chr = void 0,
  69. hash = 0,
  70. i = void 0,
  71. len = void 0;
  72. if (object.length === 0) {
  73. return hash;
  74. }
  75. for (i = 0, len = object.length; i < len; i++) {
  76. chr = object.charCodeAt(i);
  77. hash = (hash << 5) - hash + chr;
  78. hash |= 0; // Convert to 32bit integer
  79. }
  80. return hash;
  81. }
  82. function getTime() {
  83. if (typeof window.performance !== 'undefined' && window.performance.now) {
  84. return window.performance.now();
  85. }
  86. return Date.now();
  87. }
  88. function isPercentage(n) {
  89. return typeof n === 'string' && n.indexOf('%') !== -1;
  90. }
  91. function isPx(n) {
  92. return typeof n === 'string' && n.indexOf('px') !== -1;
  93. }
  94. /* eslint no-unused-vars: "off" */
  95. var DEFAULTS = {
  96. skin: null,
  97. classes: {
  98. base: 'slidePanel',
  99. show: 'slidePanel-show',
  100. loading: 'slidePanel-loading',
  101. content: 'slidePanel-content',
  102. dragging: 'slidePanel-dragging',
  103. willClose: 'slidePanel-will-close'
  104. },
  105. closeSelector: null,
  106. template: function template(options) {
  107. return (
  108. '<div class="' +
  109. options.classes.base +
  110. ' ' +
  111. options.classes.base +
  112. '-' +
  113. options.direction +
  114. '"><div class="' +
  115. options.classes.content +
  116. '"></div></div>'
  117. );
  118. },
  119. loading: {
  120. appendTo: 'panel',
  121. template: function template(options) {
  122. return '<div class="' + options.classes.loading + '"></div>';
  123. },
  124. showCallback: function showCallback(options) {
  125. this.$el.addClass(options.classes.loading + '-show');
  126. },
  127. hideCallback: function hideCallback(options) {
  128. this.$el.removeClass(options.classes.loading + '-show');
  129. }
  130. },
  131. contentFilter: function contentFilter(content, object) {
  132. return content;
  133. },
  134. useCssTransforms3d: true,
  135. useCssTransforms: true,
  136. useCssTransitions: true,
  137. dragTolerance: 150,
  138. mouseDragHandler: null,
  139. mouseDrag: true,
  140. touchDrag: true,
  141. pointerDrag: true,
  142. direction: 'right', // top, bottom, left, right
  143. duration: '500',
  144. easing: 'ease', // linear, ease-in, ease-out, ease-in-out
  145. // callbacks
  146. beforeLoad: $.noop, // Before loading
  147. afterLoad: $.noop, // After loading
  148. beforeShow: $.noop, // Before opening
  149. afterShow: $.noop, // After opening
  150. onChange: $.noop, // On changing
  151. beforeHide: $.noop, // Before closing
  152. afterHide: $.noop, // After closing
  153. beforeDrag: $.noop, // Before drag
  154. afterDrag: $.noop // After drag
  155. };
  156. var Instance = (function() {
  157. function Instance(object) {
  158. _classCallCheck(this, Instance);
  159. for (
  160. var _len = arguments.length,
  161. args = Array(_len > 1 ? _len - 1 : 0),
  162. _key = 1;
  163. _key < _len;
  164. _key++
  165. ) {
  166. args[_key - 1] = arguments[_key];
  167. }
  168. this.initialize.apply(this, [object].concat(args));
  169. }
  170. _createClass(Instance, [
  171. {
  172. key: 'initialize',
  173. value: function initialize(object) {
  174. var options =
  175. (arguments.length <= 1 ? undefined : arguments[1]) || {};
  176. if (typeof object === 'string') {
  177. object = {
  178. url: object
  179. };
  180. } else if (object && object.nodeType === 1) {
  181. var $element = (0, _jquery2.default)(object);
  182. object = {
  183. url: $element.attr('href'),
  184. settings: $element.data('settings') || {},
  185. options: $element.data() || {}
  186. };
  187. }
  188. if (object && object.options) {
  189. object.options = _jquery2.default.extend(
  190. true,
  191. options,
  192. object.options
  193. );
  194. } else {
  195. object.options = options;
  196. }
  197. object.options = _jquery2.default.extend(
  198. true,
  199. {},
  200. DEFAULTS,
  201. object.options
  202. );
  203. _jquery2.default.extend(this, object);
  204. return this;
  205. }
  206. }
  207. ]);
  208. return Instance;
  209. })();
  210. /**
  211. * Css features detect
  212. **/
  213. var Support = {};
  214. (function(support) {
  215. /**
  216. * Borrowed from Owl carousel
  217. **/
  218. 'use strict';
  219. var events = {
  220. transition: {
  221. end: {
  222. WebkitTransition: 'webkitTransitionEnd',
  223. MozTransition: 'transitionend',
  224. OTransition: 'oTransitionEnd',
  225. transition: 'transitionend'
  226. }
  227. },
  228. animation: {
  229. end: {
  230. WebkitAnimation: 'webkitAnimationEnd',
  231. MozAnimation: 'animationend',
  232. OAnimation: 'oAnimationEnd',
  233. animation: 'animationend'
  234. }
  235. }
  236. },
  237. prefixes = ['webkit', 'Moz', 'O', 'ms'],
  238. style = (0, _jquery2.default)('<support>').get(0).style,
  239. tests = {
  240. csstransforms: function csstransforms() {
  241. return Boolean(test('transform'));
  242. },
  243. csstransforms3d: function csstransforms3d() {
  244. return Boolean(test('perspective'));
  245. },
  246. csstransitions: function csstransitions() {
  247. return Boolean(test('transition'));
  248. },
  249. cssanimations: function cssanimations() {
  250. return Boolean(test('animation'));
  251. }
  252. };
  253. var test = function test(property, prefixed) {
  254. var result = false,
  255. upper = property.charAt(0).toUpperCase() + property.slice(1);
  256. if (style[property] !== undefined) {
  257. result = property;
  258. }
  259. if (!result) {
  260. _jquery2.default.each(prefixes, function(i, prefix) {
  261. if (style[prefix + upper] !== undefined) {
  262. result = '-' + prefix.toLowerCase() + '-' + upper;
  263. return false;
  264. }
  265. return true;
  266. });
  267. }
  268. if (prefixed) {
  269. return result;
  270. }
  271. if (result) {
  272. return true;
  273. }
  274. return false;
  275. };
  276. var prefixed = function prefixed(property) {
  277. return test(property, true);
  278. };
  279. if (tests.csstransitions()) {
  280. /*eslint no-new-wrappers: "off"*/
  281. support.transition = new String(prefixed('transition'));
  282. support.transition.end = events.transition.end[support.transition];
  283. }
  284. if (tests.cssanimations()) {
  285. /*eslint no-new-wrappers: "off"*/
  286. support.animation = new String(prefixed('animation'));
  287. support.animation.end = events.animation.end[support.animation];
  288. }
  289. if (tests.csstransforms()) {
  290. /*eslint no-new-wrappers: "off"*/
  291. support.transform = new String(prefixed('transform'));
  292. support.transform3d = tests.csstransforms3d();
  293. }
  294. if (
  295. 'ontouchstart' in window ||
  296. (window.DocumentTouch && document instanceof window.DocumentTouch)
  297. ) {
  298. support.touch = true;
  299. } else {
  300. support.touch = false;
  301. }
  302. if (window.PointerEvent || window.MSPointerEvent) {
  303. support.pointer = true;
  304. } else {
  305. support.pointer = false;
  306. }
  307. support.prefixPointerEvent = function(pointerEvent) {
  308. return window.MSPointerEvent
  309. ? 'MSPointer' +
  310. pointerEvent.charAt(9).toUpperCase() +
  311. pointerEvent.substr(10)
  312. : pointerEvent;
  313. };
  314. })(Support);
  315. function easingBezier(mX1, mY1, mX2, mY2) {
  316. 'use strict';
  317. function a(aA1, aA2) {
  318. return 1.0 - 3.0 * aA2 + 3.0 * aA1;
  319. }
  320. function b(aA1, aA2) {
  321. return 3.0 * aA2 - 6.0 * aA1;
  322. }
  323. function c(aA1) {
  324. return 3.0 * aA1;
  325. }
  326. // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  327. function calcBezier(aT, aA1, aA2) {
  328. return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
  329. }
  330. // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  331. function getSlope(aT, aA1, aA2) {
  332. return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
  333. }
  334. function getTForX(aX) {
  335. // Newton raphson iteration
  336. var aGuessT = aX;
  337. for (var i = 0; i < 4; ++i) {
  338. var currentSlope = getSlope(aGuessT, mX1, mX2);
  339. if (currentSlope === 0.0) {
  340. return aGuessT;
  341. }
  342. var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  343. aGuessT -= currentX / currentSlope;
  344. }
  345. return aGuessT;
  346. }
  347. if (mX1 === mY1 && mX2 === mY2) {
  348. return {
  349. css: 'linear',
  350. fn: function fn(aX) {
  351. return aX;
  352. }
  353. };
  354. }
  355. return {
  356. css: 'cubic-bezier(' + mX1 + ',' + mY1 + ',' + mX2 + ',' + mY2 + ')',
  357. fn: function fn(aX) {
  358. return calcBezier(getTForX(aX), mY1, mY2);
  359. }
  360. };
  361. }
  362. var Easings = {
  363. ease: easingBezier(0.25, 0.1, 0.25, 1.0),
  364. linear: easingBezier(0.0, 0.0, 1.0, 1.0),
  365. 'ease-in': easingBezier(0.42, 0.0, 1.0, 1.0),
  366. 'ease-out': easingBezier(0.0, 0.0, 0.58, 1.0),
  367. 'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0)
  368. };
  369. var Animate = {
  370. prepareTransition: function prepareTransition(
  371. $el,
  372. property,
  373. duration,
  374. easing,
  375. delay
  376. ) {
  377. var temp = [];
  378. if (property) {
  379. temp.push(property);
  380. }
  381. if (duration) {
  382. if (_jquery2.default.isNumeric(duration)) {
  383. duration = duration + 'ms';
  384. }
  385. temp.push(duration);
  386. }
  387. if (easing) {
  388. temp.push(easing);
  389. } else {
  390. temp.push(this.easing.css);
  391. }
  392. if (delay) {
  393. temp.push(delay);
  394. }
  395. $el.css(Support.transition, temp.join(' '));
  396. },
  397. do: function _do(view, value, callback) {
  398. SlidePanel.enter('animating');
  399. var duration = view.options.duration,
  400. easing = view.options.easing || 'ease';
  401. var that = this;
  402. var style = view.makePositionStyle(value);
  403. var property = null;
  404. for (property in style) {
  405. if ({}.hasOwnProperty.call(style, property)) {
  406. break;
  407. }
  408. }
  409. if (view.options.useCssTransitions && Support.transition) {
  410. setTimeout(function() {
  411. that.prepareTransition(view.$panel, property, duration, easing);
  412. }, 20);
  413. view.$panel.one(Support.transition.end, function() {
  414. if (_jquery2.default.isFunction(callback)) {
  415. callback();
  416. }
  417. view.$panel.css(Support.transition, '');
  418. SlidePanel.leave('animating');
  419. });
  420. setTimeout(function() {
  421. view.setPosition(value);
  422. }, 20);
  423. } else {
  424. var startTime = getTime();
  425. var start = view.getPosition();
  426. var end = value;
  427. var run = function run(time) {
  428. var percent = (time - startTime) / view.options.duration;
  429. if (percent > 1) {
  430. percent = 1;
  431. }
  432. percent = Easings[easing].fn(percent);
  433. var current = parseFloat(start + percent * (end - start), 10);
  434. view.setPosition(current);
  435. if (percent === 1) {
  436. window.cancelAnimationFrame(that._frameId);
  437. that._frameId = null;
  438. if (_jquery2.default.isFunction(callback)) {
  439. callback();
  440. }
  441. SlidePanel.leave('animating');
  442. } else {
  443. that._frameId = window.requestAnimationFrame(run);
  444. }
  445. };
  446. that._frameId = window.requestAnimationFrame(run);
  447. }
  448. }
  449. };
  450. var Loading = (function() {
  451. function Loading(view) {
  452. _classCallCheck(this, Loading);
  453. this.initialize(view);
  454. }
  455. _createClass(Loading, [
  456. {
  457. key: 'initialize',
  458. value: function initialize(view) {
  459. this._view = view;
  460. this.build();
  461. }
  462. },
  463. {
  464. key: 'build',
  465. value: function build() {
  466. if (this._builded) {
  467. return;
  468. }
  469. var options = this._view.options;
  470. var html = options.loading.template.call(this, options);
  471. this.$el = (0, _jquery2.default)(html);
  472. switch (options.loading.appendTo) {
  473. case 'panel':
  474. this.$el.appendTo(this._view.$panel);
  475. break;
  476. case 'body':
  477. this.$el.appendTo('body');
  478. break;
  479. default:
  480. this.$el.appendTo(options.loading.appendTo);
  481. }
  482. this._builded = true;
  483. }
  484. },
  485. {
  486. key: 'show',
  487. value: function show(callback) {
  488. this.build();
  489. var options = this._view.options;
  490. options.loading.showCallback.call(this, options);
  491. if (_jquery2.default.isFunction(callback)) {
  492. callback.call(this);
  493. }
  494. }
  495. },
  496. {
  497. key: 'hide',
  498. value: function hide(callback) {
  499. var options = this._view.options;
  500. options.loading.hideCallback.call(this, options);
  501. if (_jquery2.default.isFunction(callback)) {
  502. callback.call(this);
  503. }
  504. }
  505. }
  506. ]);
  507. return Loading;
  508. })();
  509. var Drag = (function() {
  510. function Drag() {
  511. _classCallCheck(this, Drag);
  512. this.initialize.apply(this, arguments);
  513. }
  514. _createClass(Drag, [
  515. {
  516. key: 'initialize',
  517. value: function initialize(view) {
  518. this._view = view;
  519. this.options = view.options;
  520. this._drag = {
  521. time: null,
  522. pointer: null
  523. };
  524. this.bindEvents();
  525. }
  526. },
  527. {
  528. key: 'bindEvents',
  529. value: function bindEvents() {
  530. var $panel = this._view.$panel,
  531. options = this.options;
  532. if (options.mouseDrag) {
  533. $panel.on(
  534. SlidePanel.eventName('mousedown'),
  535. _jquery2.default.proxy(this.onDragStart, this)
  536. );
  537. $panel.on(SlidePanel.eventName('dragstart selectstart'), function(
  538. event
  539. ) {
  540. /* eslint consistent-return: "off" */
  541. if (options.mouseDragHandler) {
  542. if (
  543. !(0, _jquery2.default)(event.target).is(
  544. options.mouseDragHandler
  545. ) &&
  546. !(
  547. (0, _jquery2.default)(event.target).parents(
  548. options.mouseDragHandler
  549. ).length > 0
  550. )
  551. ) {
  552. return;
  553. }
  554. }
  555. return false;
  556. });
  557. }
  558. if (options.touchDrag && Support.touch) {
  559. $panel.on(
  560. SlidePanel.eventName('touchstart'),
  561. _jquery2.default.proxy(this.onDragStart, this)
  562. );
  563. $panel.on(
  564. SlidePanel.eventName('touchcancel'),
  565. _jquery2.default.proxy(this.onDragEnd, this)
  566. );
  567. }
  568. if (options.pointerDrag && Support.pointer) {
  569. $panel.on(
  570. SlidePanel.eventName(Support.prefixPointerEvent('pointerdown')),
  571. _jquery2.default.proxy(this.onDragStart, this)
  572. );
  573. $panel.on(
  574. SlidePanel.eventName(Support.prefixPointerEvent('pointercancel')),
  575. _jquery2.default.proxy(this.onDragEnd, this)
  576. );
  577. }
  578. }
  579. },
  580. {
  581. key: 'onDragStart',
  582. value: function onDragStart(event) {
  583. var that = this;
  584. if (event.which === 3) {
  585. return;
  586. }
  587. var options = this.options;
  588. this._view.$panel.addClass(this.options.classes.dragging);
  589. this._position = this._view.getPosition(true);
  590. this._drag.time = new Date().getTime();
  591. this._drag.pointer = this.pointer(event);
  592. var callback = function callback() {
  593. SlidePanel.enter('dragging');
  594. SlidePanel.trigger(that._view, 'beforeDrag');
  595. };
  596. if (options.mouseDrag) {
  597. if (options.mouseDragHandler) {
  598. if (
  599. !(0, _jquery2.default)(event.target).is(
  600. options.mouseDragHandler
  601. ) &&
  602. !(
  603. (0, _jquery2.default)(event.target).parents(
  604. options.mouseDragHandler
  605. ).length > 0
  606. )
  607. ) {
  608. return;
  609. }
  610. }
  611. (0, _jquery2.default)(document).on(
  612. SlidePanel.eventName('mouseup'),
  613. _jquery2.default.proxy(this.onDragEnd, this)
  614. );
  615. (0, _jquery2.default)(document).one(
  616. SlidePanel.eventName('mousemove'),
  617. _jquery2.default.proxy(function() {
  618. (0, _jquery2.default)(document).on(
  619. SlidePanel.eventName('mousemove'),
  620. _jquery2.default.proxy(this.onDragMove, this)
  621. );
  622. callback();
  623. }, this)
  624. );
  625. }
  626. if (options.touchDrag && Support.touch) {
  627. (0, _jquery2.default)(document).on(
  628. SlidePanel.eventName('touchend'),
  629. _jquery2.default.proxy(this.onDragEnd, this)
  630. );
  631. (0, _jquery2.default)(document).one(
  632. SlidePanel.eventName('touchmove'),
  633. _jquery2.default.proxy(function() {
  634. (0, _jquery2.default)(document).on(
  635. SlidePanel.eventName('touchmove'),
  636. _jquery2.default.proxy(this.onDragMove, this)
  637. );
  638. callback();
  639. }, this)
  640. );
  641. }
  642. if (options.pointerDrag && Support.pointer) {
  643. (0, _jquery2.default)(document).on(
  644. SlidePanel.eventName(Support.prefixPointerEvent('pointerup')),
  645. _jquery2.default.proxy(this.onDragEnd, this)
  646. );
  647. (0, _jquery2.default)(document).one(
  648. SlidePanel.eventName(Support.prefixPointerEvent('pointermove')),
  649. _jquery2.default.proxy(function() {
  650. (0, _jquery2.default)(document).on(
  651. SlidePanel.eventName(
  652. Support.prefixPointerEvent('pointermove')
  653. ),
  654. _jquery2.default.proxy(this.onDragMove, this)
  655. );
  656. callback();
  657. }, this)
  658. );
  659. }
  660. (0, _jquery2.default)(document).on(
  661. SlidePanel.eventName('blur'),
  662. _jquery2.default.proxy(this.onDragEnd, this)
  663. );
  664. event.preventDefault();
  665. }
  666. },
  667. {
  668. key: 'onDragMove',
  669. value: function onDragMove(event) {
  670. var distance = this.distance(this._drag.pointer, this.pointer(event));
  671. if (!SlidePanel.is('dragging')) {
  672. return;
  673. }
  674. if (Math.abs(distance) > this.options.dragTolerance) {
  675. if (this._willClose !== true) {
  676. this._willClose = true;
  677. this._view.$panel.addClass(this.options.classes.willClose);
  678. }
  679. } else if (this._willClose !== false) {
  680. this._willClose = false;
  681. this._view.$panel.removeClass(this.options.classes.willClose);
  682. }
  683. if (!SlidePanel.is('dragging')) {
  684. return;
  685. }
  686. event.preventDefault();
  687. this.move(distance);
  688. }
  689. },
  690. {
  691. key: 'onDragEnd',
  692. value: function onDragEnd(event) {
  693. var distance = this.distance(this._drag.pointer, this.pointer(event));
  694. (0, _jquery2.default)(document).off(
  695. SlidePanel.eventName(
  696. 'mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'
  697. )
  698. );
  699. this._view.$panel.removeClass(this.options.classes.dragging);
  700. if (this._willClose === true) {
  701. this._willClose = false;
  702. this._view.$panel.removeClass(this.options.classes.willClose);
  703. }
  704. if (!SlidePanel.is('dragging')) {
  705. return;
  706. }
  707. SlidePanel.leave('dragging');
  708. SlidePanel.trigger(this._view, 'afterDrag');
  709. if (Math.abs(distance) < this.options.dragTolerance) {
  710. this._view.revert();
  711. } else {
  712. this._view.hide();
  713. // SlidePanel.hide();
  714. }
  715. }
  716. },
  717. {
  718. key: 'pointer',
  719. value: function pointer(event) {
  720. var result = {
  721. x: null,
  722. y: null
  723. };
  724. event = event.originalEvent || event || window.event;
  725. event =
  726. event.touches && event.touches.length
  727. ? event.touches[0]
  728. : event.changedTouches && event.changedTouches.length
  729. ? event.changedTouches[0]
  730. : event;
  731. if (event.pageX) {
  732. result.x = event.pageX;
  733. result.y = event.pageY;
  734. } else {
  735. result.x = event.clientX;
  736. result.y = event.clientY;
  737. }
  738. return result;
  739. }
  740. },
  741. {
  742. key: 'distance',
  743. value: function distance(first, second) {
  744. var d = this.options.direction;
  745. if (d === 'left' || d === 'right') {
  746. return second.x - first.x;
  747. }
  748. return second.y - first.y;
  749. }
  750. },
  751. {
  752. key: 'move',
  753. value: function move(value) {
  754. var position = this._position + value;
  755. if (
  756. this.options.direction === 'right' ||
  757. this.options.direction === 'bottom'
  758. ) {
  759. if (position < 0) {
  760. return;
  761. }
  762. } else if (position > 0) {
  763. return;
  764. }
  765. if (
  766. !this.options.useCssTransforms &&
  767. !this.options.useCssTransforms3d
  768. ) {
  769. if (
  770. this.options.direction === 'right' ||
  771. this.options.direction === 'bottom'
  772. ) {
  773. position = -position;
  774. }
  775. }
  776. this._view.setPosition(position + 'px');
  777. }
  778. }
  779. ]);
  780. return Drag;
  781. })();
  782. var View = (function() {
  783. function View(options) {
  784. _classCallCheck(this, View);
  785. this.initialize(options);
  786. }
  787. _createClass(View, [
  788. {
  789. key: 'initialize',
  790. value: function initialize(options) {
  791. this.options = options;
  792. this._instance = null;
  793. this._showed = false;
  794. this._isLoading = false;
  795. this.build();
  796. }
  797. },
  798. {
  799. key: 'setLength',
  800. value: function setLength() {
  801. switch (this.options.direction) {
  802. case 'top':
  803. case 'bottom':
  804. this._length = this.$panel.outerHeight();
  805. break;
  806. case 'left':
  807. case 'right':
  808. this._length = this.$panel.outerWidth();
  809. break;
  810. // no default
  811. }
  812. }
  813. },
  814. {
  815. key: 'build',
  816. value: function build() {
  817. if (this._builded) {
  818. return;
  819. }
  820. var options = this.options;
  821. var html = options.template.call(this, options);
  822. var that = this;
  823. this.$panel = (0, _jquery2.default)(html).appendTo('body');
  824. if (options.skin) {
  825. this.$panel.addClass(options.skin);
  826. }
  827. this.$content = this.$panel.find('.' + this.options.classes.content);
  828. if (options.closeSelector) {
  829. this.$panel.on(
  830. 'click touchstart',
  831. options.closeSelector,
  832. function() {
  833. that.hide();
  834. return false;
  835. }
  836. );
  837. }
  838. this.loading = new Loading(this);
  839. this.setLength();
  840. this.setPosition(this.getHidePosition());
  841. if (options.mouseDrag || options.touchDrag || options.pointerDrag) {
  842. this.drag = new Drag(this);
  843. }
  844. this._builded = true;
  845. }
  846. },
  847. {
  848. key: 'getHidePosition',
  849. value: function getHidePosition() {
  850. /* eslint consistent-return: "off" */
  851. var options = this.options;
  852. if (options.useCssTransforms || options.useCssTransforms3d) {
  853. switch (options.direction) {
  854. case 'top':
  855. case 'left':
  856. return '-100';
  857. case 'bottom':
  858. case 'right':
  859. return '100';
  860. // no default
  861. }
  862. }
  863. switch (options.direction) {
  864. case 'top':
  865. case 'bottom':
  866. return parseFloat(
  867. -(this._length / (0, _jquery2.default)(window).height()) * 100,
  868. 10
  869. );
  870. case 'left':
  871. case 'right':
  872. return parseFloat(
  873. -(this._length / (0, _jquery2.default)(window).width()) * 100,
  874. 10
  875. );
  876. // no default
  877. }
  878. }
  879. },
  880. {
  881. key: 'empty',
  882. value: function empty() {
  883. this._instance = null;
  884. this.$content.empty();
  885. }
  886. },
  887. {
  888. key: 'load',
  889. value: function load(object) {
  890. var that = this;
  891. var options = object.options;
  892. SlidePanel.trigger(this, 'beforeLoad', object);
  893. this.empty();
  894. function setContent(content) {
  895. content = options.contentFilter.call(this, content, object);
  896. that.$content.html(content);
  897. that.hideLoading();
  898. that._instance = object;
  899. SlidePanel.trigger(that, 'afterLoad', object);
  900. }
  901. if (object.content) {
  902. setContent(object.content);
  903. } else if (object.url) {
  904. this.showLoading();
  905. _jquery2.default
  906. .ajax(object.url, object.settings || {})
  907. .done(function(data) {
  908. setContent(data);
  909. });
  910. } else {
  911. setContent('');
  912. }
  913. }
  914. },
  915. {
  916. key: 'showLoading',
  917. value: function showLoading() {
  918. var that = this;
  919. this.loading.show(function() {
  920. that._isLoading = true;
  921. });
  922. }
  923. },
  924. {
  925. key: 'hideLoading',
  926. value: function hideLoading() {
  927. var that = this;
  928. this.loading.hide(function() {
  929. that._isLoading = false;
  930. });
  931. }
  932. },
  933. {
  934. key: 'show',
  935. value: function show(callback) {
  936. this.build();
  937. SlidePanel.enter('show');
  938. SlidePanel.trigger(this, 'beforeShow');
  939. (0, _jquery2.default)('html').addClass(
  940. this.options.classes.base + '-html'
  941. );
  942. this.$panel.addClass(this.options.classes.show);
  943. var that = this;
  944. Animate.do(this, 0, function() {
  945. that._showed = true;
  946. SlidePanel.trigger(that, 'afterShow');
  947. if (_jquery2.default.isFunction(callback)) {
  948. callback.call(that);
  949. }
  950. });
  951. }
  952. },
  953. {
  954. key: 'change',
  955. value: function change(object) {
  956. SlidePanel.trigger(this, 'beforeShow');
  957. SlidePanel.trigger(this, 'onChange', object, this._instance);
  958. this.load(object);
  959. SlidePanel.trigger(this, 'afterShow');
  960. }
  961. },
  962. {
  963. key: 'revert',
  964. value: function revert(callback) {
  965. var that = this;
  966. Animate.do(this, 0, function() {
  967. if (_jquery2.default.isFunction(callback)) {
  968. callback.call(that);
  969. }
  970. });
  971. }
  972. },
  973. {
  974. key: 'hide',
  975. value: function hide(callback) {
  976. SlidePanel.leave('show');
  977. SlidePanel.trigger(this, 'beforeHide');
  978. var that = this;
  979. Animate.do(this, this.getHidePosition(), function() {
  980. that.$panel.removeClass(that.options.classes.show);
  981. that._showed = false;
  982. that._instance = null;
  983. if (SlidePanel._current === that) {
  984. SlidePanel._current = null;
  985. }
  986. if (!SlidePanel.is('show')) {
  987. (0, _jquery2.default)('html').removeClass(
  988. that.options.classes.base + '-html'
  989. );
  990. }
  991. if (_jquery2.default.isFunction(callback)) {
  992. callback.call(that);
  993. }
  994. SlidePanel.trigger(that, 'afterHide');
  995. });
  996. }
  997. },
  998. {
  999. key: 'makePositionStyle',
  1000. value: function makePositionStyle(value) {
  1001. var property = void 0,
  1002. x = '0',
  1003. y = '0';
  1004. if (!isPercentage(value) && !isPx(value)) {
  1005. value = value + '%';
  1006. }
  1007. if (this.options.useCssTransforms && Support.transform) {
  1008. if (
  1009. this.options.direction === 'left' ||
  1010. this.options.direction === 'right'
  1011. ) {
  1012. x = value;
  1013. } else {
  1014. y = value;
  1015. }
  1016. property = Support.transform.toString();
  1017. if (this.options.useCssTransforms3d && Support.transform3d) {
  1018. value = 'translate3d(' + x + ',' + y + ',0)';
  1019. } else {
  1020. value = 'translate(' + x + ',' + y + ')';
  1021. }
  1022. } else {
  1023. property = this.options.direction;
  1024. }
  1025. var temp = {};
  1026. temp[property] = value;
  1027. return temp;
  1028. }
  1029. },
  1030. {
  1031. key: 'getPosition',
  1032. value: function getPosition(px) {
  1033. var value = void 0;
  1034. if (this.options.useCssTransforms && Support.transform) {
  1035. value = convertMatrixToArray(this.$panel.css(Support.transform));
  1036. if (!value) {
  1037. return 0;
  1038. }
  1039. if (
  1040. this.options.direction === 'left' ||
  1041. this.options.direction === 'right'
  1042. ) {
  1043. value = value[12] || value[4];
  1044. } else {
  1045. value = value[13] || value[5];
  1046. }
  1047. } else {
  1048. value = this.$panel.css(this.options.direction);
  1049. value = parseFloat(value.replace('px', ''));
  1050. }
  1051. if (px !== true) {
  1052. value = value / this._length * 100;
  1053. }
  1054. return parseFloat(value, 10);
  1055. }
  1056. },
  1057. {
  1058. key: 'setPosition',
  1059. value: function setPosition(value) {
  1060. var style = this.makePositionStyle(value);
  1061. this.$panel.css(style);
  1062. }
  1063. }
  1064. ]);
  1065. return View;
  1066. })();
  1067. var SlidePanel = {
  1068. // Current state information.
  1069. _states: {},
  1070. _views: {},
  1071. _current: null,
  1072. is: function is(state) {
  1073. return this._states[state] && this._states[state] > 0;
  1074. },
  1075. enter: function enter(state) {
  1076. if (this._states[state] === undefined) {
  1077. this._states[state] = 0;
  1078. }
  1079. this._states[state]++;
  1080. },
  1081. leave: function leave(state) {
  1082. this._states[state]--;
  1083. },
  1084. trigger: function trigger(view, event) {
  1085. for (
  1086. var _len2 = arguments.length,
  1087. args = Array(_len2 > 2 ? _len2 - 2 : 0),
  1088. _key2 = 2;
  1089. _key2 < _len2;
  1090. _key2++
  1091. ) {
  1092. args[_key2 - 2] = arguments[_key2];
  1093. }
  1094. var data = [view].concat(args);
  1095. // event
  1096. (0, _jquery2.default)(document).trigger('slidePanel::' + event, data);
  1097. if (_jquery2.default.isFunction(view.options[event])) {
  1098. view.options[event].apply(view, args);
  1099. }
  1100. },
  1101. eventName: function eventName(events) {
  1102. if (typeof events !== 'string' || events === '') {
  1103. return '.slidepanel';
  1104. }
  1105. events = events.split(' ');
  1106. var length = events.length;
  1107. for (var i = 0; i < length; i++) {
  1108. events[i] = events[i] + '.slidepanel';
  1109. }
  1110. return events.join(' ');
  1111. },
  1112. show: function show(object, options) {
  1113. var _this = this;
  1114. if (!(object instanceof Instance)) {
  1115. switch (arguments.length) {
  1116. case 0:
  1117. object = new Instance();
  1118. break;
  1119. case 1:
  1120. object = new Instance(object);
  1121. break;
  1122. case 2:
  1123. object = new Instance(object, options);
  1124. break;
  1125. // no default
  1126. }
  1127. }
  1128. var view = this.getView(object.options);
  1129. var callback = function callback() {
  1130. view.show();
  1131. view.load(object);
  1132. _this._current = view;
  1133. };
  1134. if (this._current !== null) {
  1135. if (view === this._current) {
  1136. this._current.change(object);
  1137. } else {
  1138. this._current.hide(callback);
  1139. }
  1140. } else {
  1141. callback();
  1142. }
  1143. },
  1144. getView: function getView(options) {
  1145. var code = getHashCode(options);
  1146. if (this._views.hasOwnProperty(code)) {
  1147. return this._views[code];
  1148. }
  1149. return (this._views[code] = new View(options));
  1150. },
  1151. hide: function hide(object) {
  1152. if (
  1153. typeof object !== 'undefined' &&
  1154. typeof object.options !== 'undefined'
  1155. ) {
  1156. var view = this.getView(object.options);
  1157. view.hide();
  1158. } else if (this._current !== null) {
  1159. this._current.hide();
  1160. }
  1161. }
  1162. };
  1163. var api = {
  1164. is: function is(state) {
  1165. return SlidePanel.is(state);
  1166. },
  1167. show: function show(object, options) {
  1168. SlidePanel.show(object, options);
  1169. return this;
  1170. },
  1171. hide: function hide() {
  1172. for (
  1173. var _len3 = arguments.length, args = Array(_len3), _key3 = 0;
  1174. _key3 < _len3;
  1175. _key3++
  1176. ) {
  1177. args[_key3] = arguments[_key3];
  1178. }
  1179. SlidePanel.hide(args);
  1180. return this;
  1181. }
  1182. };
  1183. if (!Date.now) {
  1184. Date.now = function() {
  1185. return new Date().getTime();
  1186. };
  1187. }
  1188. var vendors = ['webkit', 'moz'];
  1189. for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
  1190. var vp = vendors[i];
  1191. window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
  1192. window.cancelAnimationFrame =
  1193. window[vp + 'CancelAnimationFrame'] ||
  1194. window[vp + 'CancelRequestAnimationFrame'];
  1195. }
  1196. if (
  1197. /iP(ad|hone|od).*OS (6|7|8)/.test(window.navigator.userAgent) ||
  1198. !window.requestAnimationFrame ||
  1199. !window.cancelAnimationFrame
  1200. ) {
  1201. var lastTime = 0;
  1202. window.requestAnimationFrame = function(callback) {
  1203. var now = getTime();
  1204. var nextTime = Math.max(lastTime + 16, now);
  1205. return setTimeout(function() {
  1206. callback((lastTime = nextTime));
  1207. }, nextTime - now);
  1208. };
  1209. window.cancelAnimationFrame = clearTimeout;
  1210. }
  1211. var OtherSlidePanel = _jquery2.default.fn.slidePanel;
  1212. var jQuerySlidePanel = function jQuerySlidePanel(options) {
  1213. for (
  1214. var _len4 = arguments.length,
  1215. args = Array(_len4 > 1 ? _len4 - 1 : 0),
  1216. _key4 = 1;
  1217. _key4 < _len4;
  1218. _key4++
  1219. ) {
  1220. args[_key4 - 1] = arguments[_key4];
  1221. }
  1222. var method = options;
  1223. if (typeof options === 'string') {
  1224. return this.each(function() {
  1225. var instance = _jquery2.default.data(this, 'slidePanel');
  1226. if (!(instance instanceof Instance)) {
  1227. instance = new Instance(this, args);
  1228. _jquery2.default.data(this, 'slidePanel', instance);
  1229. }
  1230. switch (method) {
  1231. case 'hide':
  1232. SlidePanel.hide(instance);
  1233. break;
  1234. case 'show':
  1235. SlidePanel.show(instance);
  1236. break;
  1237. // no default
  1238. }
  1239. });
  1240. }
  1241. return this.each(function() {
  1242. if (!_jquery2.default.data(this, 'slidePanel')) {
  1243. _jquery2.default.data(this, 'slidePanel', new Instance(this, options));
  1244. (0, _jquery2.default)(this).on('click', function(e) {
  1245. var instance = _jquery2.default.data(this, 'slidePanel');
  1246. SlidePanel.show(instance);
  1247. e.preventDefault();
  1248. e.stopPropagation();
  1249. });
  1250. }
  1251. });
  1252. };
  1253. _jquery2.default.fn.slidePanel = jQuerySlidePanel;
  1254. _jquery2.default.slidePanel = function() {
  1255. SlidePanel.show.apply(SlidePanel, arguments);
  1256. };
  1257. _jquery2.default.extend(
  1258. _jquery2.default.slidePanel,
  1259. {
  1260. setDefaults: function setDefaults(options) {
  1261. _jquery2.default.extend(
  1262. true,
  1263. DEFAULTS,
  1264. _jquery2.default.isPlainObject(options) && options
  1265. );
  1266. },
  1267. noConflict: function noConflict() {
  1268. _jquery2.default.fn.slidePanel = OtherSlidePanel;
  1269. return jQuerySlidePanel;
  1270. }
  1271. },
  1272. info,
  1273. api
  1274. );
  1275. });