123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470 |
- /**
- * jQuery slidePanel v0.3.5
- * https://github.com/amazingSurge/jquery-slidePanel
- *
- * Copyright (c) amazingSurge
- * Released under the LGPL-3.0 license
- */
- (function(global, factory) {
- if (typeof define === 'function' && define.amd) {
- define(['jquery'], factory);
- } else if (typeof exports !== 'undefined') {
- factory(require('jquery'));
- } else {
- var mod = {
- exports: {}
- };
- factory(global.jQuery);
- global.jquerySlidePanelEs = mod.exports;
- }
- })(this, function(_jquery) {
- 'use strict';
- var _jquery2 = _interopRequireDefault(_jquery);
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule
- ? obj
- : {
- default: obj
- };
- }
- function _classCallCheck(instance, Constructor) {
- if (!(instance instanceof Constructor)) {
- throw new TypeError('Cannot call a class as a function');
- }
- }
- var _createClass = (function() {
- function defineProperties(target, props) {
- for (var i = 0; i < props.length; i++) {
- var descriptor = props[i];
- descriptor.enumerable = descriptor.enumerable || false;
- descriptor.configurable = true;
- if ('value' in descriptor) descriptor.writable = true;
- Object.defineProperty(target, descriptor.key, descriptor);
- }
- }
- return function(Constructor, protoProps, staticProps) {
- if (protoProps) defineProperties(Constructor.prototype, protoProps);
- if (staticProps) defineProperties(Constructor, staticProps);
- return Constructor;
- };
- })();
- var info = {
- version: '0.3.5'
- };
- function convertMatrixToArray(value) {
- if (value && value.substr(0, 6) === 'matrix') {
- return value
- .replace(/^.*\((.*)\)$/g, '$1')
- .replace(/px/g, '')
- .split(/, +/);
- }
- return false;
- }
- function getHashCode(object) {
- /* eslint no-bitwise: "off" */
- if (typeof object !== 'string') {
- object = JSON.stringify(object);
- }
- var chr = void 0,
- hash = 0,
- i = void 0,
- len = void 0;
- if (object.length === 0) {
- return hash;
- }
- for (i = 0, len = object.length; i < len; i++) {
- chr = object.charCodeAt(i);
- hash = (hash << 5) - hash + chr;
- hash |= 0; // Convert to 32bit integer
- }
- return hash;
- }
- function getTime() {
- if (typeof window.performance !== 'undefined' && window.performance.now) {
- return window.performance.now();
- }
- return Date.now();
- }
- function isPercentage(n) {
- return typeof n === 'string' && n.indexOf('%') !== -1;
- }
- function isPx(n) {
- return typeof n === 'string' && n.indexOf('px') !== -1;
- }
- /* eslint no-unused-vars: "off" */
- var DEFAULTS = {
- skin: null,
- classes: {
- base: 'slidePanel',
- show: 'slidePanel-show',
- loading: 'slidePanel-loading',
- content: 'slidePanel-content',
- dragging: 'slidePanel-dragging',
- willClose: 'slidePanel-will-close'
- },
- closeSelector: null,
- template: function template(options) {
- return (
- '<div class="' +
- options.classes.base +
- ' ' +
- options.classes.base +
- '-' +
- options.direction +
- '"><div class="' +
- options.classes.content +
- '"></div></div>'
- );
- },
- loading: {
- appendTo: 'panel',
- template: function template(options) {
- return '<div class="' + options.classes.loading + '"></div>';
- },
- showCallback: function showCallback(options) {
- this.$el.addClass(options.classes.loading + '-show');
- },
- hideCallback: function hideCallback(options) {
- this.$el.removeClass(options.classes.loading + '-show');
- }
- },
- contentFilter: function contentFilter(content, object) {
- return content;
- },
- useCssTransforms3d: true,
- useCssTransforms: true,
- useCssTransitions: true,
- dragTolerance: 150,
- mouseDragHandler: null,
- mouseDrag: true,
- touchDrag: true,
- pointerDrag: true,
- direction: 'right', // top, bottom, left, right
- duration: '500',
- easing: 'ease', // linear, ease-in, ease-out, ease-in-out
- // callbacks
- beforeLoad: $.noop, // Before loading
- afterLoad: $.noop, // After loading
- beforeShow: $.noop, // Before opening
- afterShow: $.noop, // After opening
- onChange: $.noop, // On changing
- beforeHide: $.noop, // Before closing
- afterHide: $.noop, // After closing
- beforeDrag: $.noop, // Before drag
- afterDrag: $.noop // After drag
- };
- var Instance = (function() {
- function Instance(object) {
- _classCallCheck(this, Instance);
- for (
- var _len = arguments.length,
- args = Array(_len > 1 ? _len - 1 : 0),
- _key = 1;
- _key < _len;
- _key++
- ) {
- args[_key - 1] = arguments[_key];
- }
- this.initialize.apply(this, [object].concat(args));
- }
- _createClass(Instance, [
- {
- key: 'initialize',
- value: function initialize(object) {
- var options =
- (arguments.length <= 1 ? undefined : arguments[1]) || {};
- if (typeof object === 'string') {
- object = {
- url: object
- };
- } else if (object && object.nodeType === 1) {
- var $element = (0, _jquery2.default)(object);
- object = {
- url: $element.attr('href'),
- settings: $element.data('settings') || {},
- options: $element.data() || {}
- };
- }
- if (object && object.options) {
- object.options = _jquery2.default.extend(
- true,
- options,
- object.options
- );
- } else {
- object.options = options;
- }
- object.options = _jquery2.default.extend(
- true,
- {},
- DEFAULTS,
- object.options
- );
- _jquery2.default.extend(this, object);
- return this;
- }
- }
- ]);
- return Instance;
- })();
- /**
- * Css features detect
- **/
- var Support = {};
- (function(support) {
- /**
- * Borrowed from Owl carousel
- **/
- 'use strict';
- var events = {
- transition: {
- end: {
- WebkitTransition: 'webkitTransitionEnd',
- MozTransition: 'transitionend',
- OTransition: 'oTransitionEnd',
- transition: 'transitionend'
- }
- },
- animation: {
- end: {
- WebkitAnimation: 'webkitAnimationEnd',
- MozAnimation: 'animationend',
- OAnimation: 'oAnimationEnd',
- animation: 'animationend'
- }
- }
- },
- prefixes = ['webkit', 'Moz', 'O', 'ms'],
- style = (0, _jquery2.default)('<support>').get(0).style,
- tests = {
- csstransforms: function csstransforms() {
- return Boolean(test('transform'));
- },
- csstransforms3d: function csstransforms3d() {
- return Boolean(test('perspective'));
- },
- csstransitions: function csstransitions() {
- return Boolean(test('transition'));
- },
- cssanimations: function cssanimations() {
- return Boolean(test('animation'));
- }
- };
- var test = function test(property, prefixed) {
- var result = false,
- upper = property.charAt(0).toUpperCase() + property.slice(1);
- if (style[property] !== undefined) {
- result = property;
- }
- if (!result) {
- _jquery2.default.each(prefixes, function(i, prefix) {
- if (style[prefix + upper] !== undefined) {
- result = '-' + prefix.toLowerCase() + '-' + upper;
- return false;
- }
- return true;
- });
- }
- if (prefixed) {
- return result;
- }
- if (result) {
- return true;
- }
- return false;
- };
- var prefixed = function prefixed(property) {
- return test(property, true);
- };
- if (tests.csstransitions()) {
- /*eslint no-new-wrappers: "off"*/
- support.transition = new String(prefixed('transition'));
- support.transition.end = events.transition.end[support.transition];
- }
- if (tests.cssanimations()) {
- /*eslint no-new-wrappers: "off"*/
- support.animation = new String(prefixed('animation'));
- support.animation.end = events.animation.end[support.animation];
- }
- if (tests.csstransforms()) {
- /*eslint no-new-wrappers: "off"*/
- support.transform = new String(prefixed('transform'));
- support.transform3d = tests.csstransforms3d();
- }
- if (
- 'ontouchstart' in window ||
- (window.DocumentTouch && document instanceof window.DocumentTouch)
- ) {
- support.touch = true;
- } else {
- support.touch = false;
- }
- if (window.PointerEvent || window.MSPointerEvent) {
- support.pointer = true;
- } else {
- support.pointer = false;
- }
- support.prefixPointerEvent = function(pointerEvent) {
- return window.MSPointerEvent
- ? 'MSPointer' +
- pointerEvent.charAt(9).toUpperCase() +
- pointerEvent.substr(10)
- : pointerEvent;
- };
- })(Support);
- function easingBezier(mX1, mY1, mX2, mY2) {
- 'use strict';
- function a(aA1, aA2) {
- return 1.0 - 3.0 * aA2 + 3.0 * aA1;
- }
- function b(aA1, aA2) {
- return 3.0 * aA2 - 6.0 * aA1;
- }
- function c(aA1) {
- return 3.0 * aA1;
- }
- // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
- function calcBezier(aT, aA1, aA2) {
- return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
- }
- // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
- function getSlope(aT, aA1, aA2) {
- return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
- }
- function getTForX(aX) {
- // Newton raphson iteration
- var aGuessT = aX;
- for (var i = 0; i < 4; ++i) {
- var currentSlope = getSlope(aGuessT, mX1, mX2);
- if (currentSlope === 0.0) {
- return aGuessT;
- }
- var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
- aGuessT -= currentX / currentSlope;
- }
- return aGuessT;
- }
- if (mX1 === mY1 && mX2 === mY2) {
- return {
- css: 'linear',
- fn: function fn(aX) {
- return aX;
- }
- };
- }
- return {
- css: 'cubic-bezier(' + mX1 + ',' + mY1 + ',' + mX2 + ',' + mY2 + ')',
- fn: function fn(aX) {
- return calcBezier(getTForX(aX), mY1, mY2);
- }
- };
- }
- var Easings = {
- ease: easingBezier(0.25, 0.1, 0.25, 1.0),
- linear: easingBezier(0.0, 0.0, 1.0, 1.0),
- 'ease-in': easingBezier(0.42, 0.0, 1.0, 1.0),
- 'ease-out': easingBezier(0.0, 0.0, 0.58, 1.0),
- 'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0)
- };
- var Animate = {
- prepareTransition: function prepareTransition(
- $el,
- property,
- duration,
- easing,
- delay
- ) {
- var temp = [];
- if (property) {
- temp.push(property);
- }
- if (duration) {
- if (_jquery2.default.isNumeric(duration)) {
- duration = duration + 'ms';
- }
- temp.push(duration);
- }
- if (easing) {
- temp.push(easing);
- } else {
- temp.push(this.easing.css);
- }
- if (delay) {
- temp.push(delay);
- }
- $el.css(Support.transition, temp.join(' '));
- },
- do: function _do(view, value, callback) {
- SlidePanel.enter('animating');
- var duration = view.options.duration,
- easing = view.options.easing || 'ease';
- var that = this;
- var style = view.makePositionStyle(value);
- var property = null;
- for (property in style) {
- if ({}.hasOwnProperty.call(style, property)) {
- break;
- }
- }
- if (view.options.useCssTransitions && Support.transition) {
- setTimeout(function() {
- that.prepareTransition(view.$panel, property, duration, easing);
- }, 20);
- view.$panel.one(Support.transition.end, function() {
- if (_jquery2.default.isFunction(callback)) {
- callback();
- }
- view.$panel.css(Support.transition, '');
- SlidePanel.leave('animating');
- });
- setTimeout(function() {
- view.setPosition(value);
- }, 20);
- } else {
- var startTime = getTime();
- var start = view.getPosition();
- var end = value;
- var run = function run(time) {
- var percent = (time - startTime) / view.options.duration;
- if (percent > 1) {
- percent = 1;
- }
- percent = Easings[easing].fn(percent);
- var current = parseFloat(start + percent * (end - start), 10);
- view.setPosition(current);
- if (percent === 1) {
- window.cancelAnimationFrame(that._frameId);
- that._frameId = null;
- if (_jquery2.default.isFunction(callback)) {
- callback();
- }
- SlidePanel.leave('animating');
- } else {
- that._frameId = window.requestAnimationFrame(run);
- }
- };
- that._frameId = window.requestAnimationFrame(run);
- }
- }
- };
- var Loading = (function() {
- function Loading(view) {
- _classCallCheck(this, Loading);
- this.initialize(view);
- }
- _createClass(Loading, [
- {
- key: 'initialize',
- value: function initialize(view) {
- this._view = view;
- this.build();
- }
- },
- {
- key: 'build',
- value: function build() {
- if (this._builded) {
- return;
- }
- var options = this._view.options;
- var html = options.loading.template.call(this, options);
- this.$el = (0, _jquery2.default)(html);
- switch (options.loading.appendTo) {
- case 'panel':
- this.$el.appendTo(this._view.$panel);
- break;
- case 'body':
- this.$el.appendTo('body');
- break;
- default:
- this.$el.appendTo(options.loading.appendTo);
- }
- this._builded = true;
- }
- },
- {
- key: 'show',
- value: function show(callback) {
- this.build();
- var options = this._view.options;
- options.loading.showCallback.call(this, options);
- if (_jquery2.default.isFunction(callback)) {
- callback.call(this);
- }
- }
- },
- {
- key: 'hide',
- value: function hide(callback) {
- var options = this._view.options;
- options.loading.hideCallback.call(this, options);
- if (_jquery2.default.isFunction(callback)) {
- callback.call(this);
- }
- }
- }
- ]);
- return Loading;
- })();
- var Drag = (function() {
- function Drag() {
- _classCallCheck(this, Drag);
- this.initialize.apply(this, arguments);
- }
- _createClass(Drag, [
- {
- key: 'initialize',
- value: function initialize(view) {
- this._view = view;
- this.options = view.options;
- this._drag = {
- time: null,
- pointer: null
- };
- this.bindEvents();
- }
- },
- {
- key: 'bindEvents',
- value: function bindEvents() {
- var $panel = this._view.$panel,
- options = this.options;
- if (options.mouseDrag) {
- $panel.on(
- SlidePanel.eventName('mousedown'),
- _jquery2.default.proxy(this.onDragStart, this)
- );
- $panel.on(SlidePanel.eventName('dragstart selectstart'), function(
- event
- ) {
- /* eslint consistent-return: "off" */
- if (options.mouseDragHandler) {
- if (
- !(0, _jquery2.default)(event.target).is(
- options.mouseDragHandler
- ) &&
- !(
- (0, _jquery2.default)(event.target).parents(
- options.mouseDragHandler
- ).length > 0
- )
- ) {
- return;
- }
- }
- return false;
- });
- }
- if (options.touchDrag && Support.touch) {
- $panel.on(
- SlidePanel.eventName('touchstart'),
- _jquery2.default.proxy(this.onDragStart, this)
- );
- $panel.on(
- SlidePanel.eventName('touchcancel'),
- _jquery2.default.proxy(this.onDragEnd, this)
- );
- }
- if (options.pointerDrag && Support.pointer) {
- $panel.on(
- SlidePanel.eventName(Support.prefixPointerEvent('pointerdown')),
- _jquery2.default.proxy(this.onDragStart, this)
- );
- $panel.on(
- SlidePanel.eventName(Support.prefixPointerEvent('pointercancel')),
- _jquery2.default.proxy(this.onDragEnd, this)
- );
- }
- }
- },
- {
- key: 'onDragStart',
- value: function onDragStart(event) {
- var that = this;
- if (event.which === 3) {
- return;
- }
- var options = this.options;
- this._view.$panel.addClass(this.options.classes.dragging);
- this._position = this._view.getPosition(true);
- this._drag.time = new Date().getTime();
- this._drag.pointer = this.pointer(event);
- var callback = function callback() {
- SlidePanel.enter('dragging');
- SlidePanel.trigger(that._view, 'beforeDrag');
- };
- if (options.mouseDrag) {
- if (options.mouseDragHandler) {
- if (
- !(0, _jquery2.default)(event.target).is(
- options.mouseDragHandler
- ) &&
- !(
- (0, _jquery2.default)(event.target).parents(
- options.mouseDragHandler
- ).length > 0
- )
- ) {
- return;
- }
- }
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName('mouseup'),
- _jquery2.default.proxy(this.onDragEnd, this)
- );
- (0, _jquery2.default)(document).one(
- SlidePanel.eventName('mousemove'),
- _jquery2.default.proxy(function() {
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName('mousemove'),
- _jquery2.default.proxy(this.onDragMove, this)
- );
- callback();
- }, this)
- );
- }
- if (options.touchDrag && Support.touch) {
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName('touchend'),
- _jquery2.default.proxy(this.onDragEnd, this)
- );
- (0, _jquery2.default)(document).one(
- SlidePanel.eventName('touchmove'),
- _jquery2.default.proxy(function() {
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName('touchmove'),
- _jquery2.default.proxy(this.onDragMove, this)
- );
- callback();
- }, this)
- );
- }
- if (options.pointerDrag && Support.pointer) {
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName(Support.prefixPointerEvent('pointerup')),
- _jquery2.default.proxy(this.onDragEnd, this)
- );
- (0, _jquery2.default)(document).one(
- SlidePanel.eventName(Support.prefixPointerEvent('pointermove')),
- _jquery2.default.proxy(function() {
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName(
- Support.prefixPointerEvent('pointermove')
- ),
- _jquery2.default.proxy(this.onDragMove, this)
- );
- callback();
- }, this)
- );
- }
- (0, _jquery2.default)(document).on(
- SlidePanel.eventName('blur'),
- _jquery2.default.proxy(this.onDragEnd, this)
- );
- event.preventDefault();
- }
- },
- {
- key: 'onDragMove',
- value: function onDragMove(event) {
- var distance = this.distance(this._drag.pointer, this.pointer(event));
- if (!SlidePanel.is('dragging')) {
- return;
- }
- if (Math.abs(distance) > this.options.dragTolerance) {
- if (this._willClose !== true) {
- this._willClose = true;
- this._view.$panel.addClass(this.options.classes.willClose);
- }
- } else if (this._willClose !== false) {
- this._willClose = false;
- this._view.$panel.removeClass(this.options.classes.willClose);
- }
- if (!SlidePanel.is('dragging')) {
- return;
- }
- event.preventDefault();
- this.move(distance);
- }
- },
- {
- key: 'onDragEnd',
- value: function onDragEnd(event) {
- var distance = this.distance(this._drag.pointer, this.pointer(event));
- (0, _jquery2.default)(document).off(
- SlidePanel.eventName(
- 'mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'
- )
- );
- this._view.$panel.removeClass(this.options.classes.dragging);
- if (this._willClose === true) {
- this._willClose = false;
- this._view.$panel.removeClass(this.options.classes.willClose);
- }
- if (!SlidePanel.is('dragging')) {
- return;
- }
- SlidePanel.leave('dragging');
- SlidePanel.trigger(this._view, 'afterDrag');
- if (Math.abs(distance) < this.options.dragTolerance) {
- this._view.revert();
- } else {
- this._view.hide();
- // SlidePanel.hide();
- }
- }
- },
- {
- key: 'pointer',
- value: function pointer(event) {
- var result = {
- x: null,
- y: null
- };
- event = event.originalEvent || event || window.event;
- event =
- event.touches && event.touches.length
- ? event.touches[0]
- : event.changedTouches && event.changedTouches.length
- ? event.changedTouches[0]
- : event;
- if (event.pageX) {
- result.x = event.pageX;
- result.y = event.pageY;
- } else {
- result.x = event.clientX;
- result.y = event.clientY;
- }
- return result;
- }
- },
- {
- key: 'distance',
- value: function distance(first, second) {
- var d = this.options.direction;
- if (d === 'left' || d === 'right') {
- return second.x - first.x;
- }
- return second.y - first.y;
- }
- },
- {
- key: 'move',
- value: function move(value) {
- var position = this._position + value;
- if (
- this.options.direction === 'right' ||
- this.options.direction === 'bottom'
- ) {
- if (position < 0) {
- return;
- }
- } else if (position > 0) {
- return;
- }
- if (
- !this.options.useCssTransforms &&
- !this.options.useCssTransforms3d
- ) {
- if (
- this.options.direction === 'right' ||
- this.options.direction === 'bottom'
- ) {
- position = -position;
- }
- }
- this._view.setPosition(position + 'px');
- }
- }
- ]);
- return Drag;
- })();
- var View = (function() {
- function View(options) {
- _classCallCheck(this, View);
- this.initialize(options);
- }
- _createClass(View, [
- {
- key: 'initialize',
- value: function initialize(options) {
- this.options = options;
- this._instance = null;
- this._showed = false;
- this._isLoading = false;
- this.build();
- }
- },
- {
- key: 'setLength',
- value: function setLength() {
- switch (this.options.direction) {
- case 'top':
- case 'bottom':
- this._length = this.$panel.outerHeight();
- break;
- case 'left':
- case 'right':
- this._length = this.$panel.outerWidth();
- break;
- // no default
- }
- }
- },
- {
- key: 'build',
- value: function build() {
- if (this._builded) {
- return;
- }
- var options = this.options;
- var html = options.template.call(this, options);
- var that = this;
- this.$panel = (0, _jquery2.default)(html).appendTo('body');
- if (options.skin) {
- this.$panel.addClass(options.skin);
- }
- this.$content = this.$panel.find('.' + this.options.classes.content);
- if (options.closeSelector) {
- this.$panel.on(
- 'click touchstart',
- options.closeSelector,
- function() {
- that.hide();
- return false;
- }
- );
- }
- this.loading = new Loading(this);
- this.setLength();
- this.setPosition(this.getHidePosition());
- if (options.mouseDrag || options.touchDrag || options.pointerDrag) {
- this.drag = new Drag(this);
- }
- this._builded = true;
- }
- },
- {
- key: 'getHidePosition',
- value: function getHidePosition() {
- /* eslint consistent-return: "off" */
- var options = this.options;
- if (options.useCssTransforms || options.useCssTransforms3d) {
- switch (options.direction) {
- case 'top':
- case 'left':
- return '-100';
- case 'bottom':
- case 'right':
- return '100';
- // no default
- }
- }
- switch (options.direction) {
- case 'top':
- case 'bottom':
- return parseFloat(
- -(this._length / (0, _jquery2.default)(window).height()) * 100,
- 10
- );
- case 'left':
- case 'right':
- return parseFloat(
- -(this._length / (0, _jquery2.default)(window).width()) * 100,
- 10
- );
- // no default
- }
- }
- },
- {
- key: 'empty',
- value: function empty() {
- this._instance = null;
- this.$content.empty();
- }
- },
- {
- key: 'load',
- value: function load(object) {
- var that = this;
- var options = object.options;
- SlidePanel.trigger(this, 'beforeLoad', object);
- this.empty();
- function setContent(content) {
- content = options.contentFilter.call(this, content, object);
- that.$content.html(content);
- that.hideLoading();
- that._instance = object;
- SlidePanel.trigger(that, 'afterLoad', object);
- }
- if (object.content) {
- setContent(object.content);
- } else if (object.url) {
- this.showLoading();
- _jquery2.default
- .ajax(object.url, object.settings || {})
- .done(function(data) {
- setContent(data);
- });
- } else {
- setContent('');
- }
- }
- },
- {
- key: 'showLoading',
- value: function showLoading() {
- var that = this;
- this.loading.show(function() {
- that._isLoading = true;
- });
- }
- },
- {
- key: 'hideLoading',
- value: function hideLoading() {
- var that = this;
- this.loading.hide(function() {
- that._isLoading = false;
- });
- }
- },
- {
- key: 'show',
- value: function show(callback) {
- this.build();
- SlidePanel.enter('show');
- SlidePanel.trigger(this, 'beforeShow');
- (0, _jquery2.default)('html').addClass(
- this.options.classes.base + '-html'
- );
- this.$panel.addClass(this.options.classes.show);
- var that = this;
- Animate.do(this, 0, function() {
- that._showed = true;
- SlidePanel.trigger(that, 'afterShow');
- if (_jquery2.default.isFunction(callback)) {
- callback.call(that);
- }
- });
- }
- },
- {
- key: 'change',
- value: function change(object) {
- SlidePanel.trigger(this, 'beforeShow');
- SlidePanel.trigger(this, 'onChange', object, this._instance);
- this.load(object);
- SlidePanel.trigger(this, 'afterShow');
- }
- },
- {
- key: 'revert',
- value: function revert(callback) {
- var that = this;
- Animate.do(this, 0, function() {
- if (_jquery2.default.isFunction(callback)) {
- callback.call(that);
- }
- });
- }
- },
- {
- key: 'hide',
- value: function hide(callback) {
- SlidePanel.leave('show');
- SlidePanel.trigger(this, 'beforeHide');
- var that = this;
- Animate.do(this, this.getHidePosition(), function() {
- that.$panel.removeClass(that.options.classes.show);
- that._showed = false;
- that._instance = null;
- if (SlidePanel._current === that) {
- SlidePanel._current = null;
- }
- if (!SlidePanel.is('show')) {
- (0, _jquery2.default)('html').removeClass(
- that.options.classes.base + '-html'
- );
- }
- if (_jquery2.default.isFunction(callback)) {
- callback.call(that);
- }
- SlidePanel.trigger(that, 'afterHide');
- });
- }
- },
- {
- key: 'makePositionStyle',
- value: function makePositionStyle(value) {
- var property = void 0,
- x = '0',
- y = '0';
- if (!isPercentage(value) && !isPx(value)) {
- value = value + '%';
- }
- if (this.options.useCssTransforms && Support.transform) {
- if (
- this.options.direction === 'left' ||
- this.options.direction === 'right'
- ) {
- x = value;
- } else {
- y = value;
- }
- property = Support.transform.toString();
- if (this.options.useCssTransforms3d && Support.transform3d) {
- value = 'translate3d(' + x + ',' + y + ',0)';
- } else {
- value = 'translate(' + x + ',' + y + ')';
- }
- } else {
- property = this.options.direction;
- }
- var temp = {};
- temp[property] = value;
- return temp;
- }
- },
- {
- key: 'getPosition',
- value: function getPosition(px) {
- var value = void 0;
- if (this.options.useCssTransforms && Support.transform) {
- value = convertMatrixToArray(this.$panel.css(Support.transform));
- if (!value) {
- return 0;
- }
- if (
- this.options.direction === 'left' ||
- this.options.direction === 'right'
- ) {
- value = value[12] || value[4];
- } else {
- value = value[13] || value[5];
- }
- } else {
- value = this.$panel.css(this.options.direction);
- value = parseFloat(value.replace('px', ''));
- }
- if (px !== true) {
- value = value / this._length * 100;
- }
- return parseFloat(value, 10);
- }
- },
- {
- key: 'setPosition',
- value: function setPosition(value) {
- var style = this.makePositionStyle(value);
- this.$panel.css(style);
- }
- }
- ]);
- return View;
- })();
- var SlidePanel = {
- // Current state information.
- _states: {},
- _views: {},
- _current: null,
- is: function is(state) {
- return this._states[state] && this._states[state] > 0;
- },
- enter: function enter(state) {
- if (this._states[state] === undefined) {
- this._states[state] = 0;
- }
- this._states[state]++;
- },
- leave: function leave(state) {
- this._states[state]--;
- },
- trigger: function trigger(view, event) {
- for (
- var _len2 = arguments.length,
- args = Array(_len2 > 2 ? _len2 - 2 : 0),
- _key2 = 2;
- _key2 < _len2;
- _key2++
- ) {
- args[_key2 - 2] = arguments[_key2];
- }
- var data = [view].concat(args);
- // event
- (0, _jquery2.default)(document).trigger('slidePanel::' + event, data);
- if (_jquery2.default.isFunction(view.options[event])) {
- view.options[event].apply(view, args);
- }
- },
- eventName: function eventName(events) {
- if (typeof events !== 'string' || events === '') {
- return '.slidepanel';
- }
- events = events.split(' ');
- var length = events.length;
- for (var i = 0; i < length; i++) {
- events[i] = events[i] + '.slidepanel';
- }
- return events.join(' ');
- },
- show: function show(object, options) {
- var _this = this;
- if (!(object instanceof Instance)) {
- switch (arguments.length) {
- case 0:
- object = new Instance();
- break;
- case 1:
- object = new Instance(object);
- break;
- case 2:
- object = new Instance(object, options);
- break;
- // no default
- }
- }
- var view = this.getView(object.options);
- var callback = function callback() {
- view.show();
- view.load(object);
- _this._current = view;
- };
- if (this._current !== null) {
- if (view === this._current) {
- this._current.change(object);
- } else {
- this._current.hide(callback);
- }
- } else {
- callback();
- }
- },
- getView: function getView(options) {
- var code = getHashCode(options);
- if (this._views.hasOwnProperty(code)) {
- return this._views[code];
- }
- return (this._views[code] = new View(options));
- },
- hide: function hide(object) {
- if (
- typeof object !== 'undefined' &&
- typeof object.options !== 'undefined'
- ) {
- var view = this.getView(object.options);
- view.hide();
- } else if (this._current !== null) {
- this._current.hide();
- }
- }
- };
- var api = {
- is: function is(state) {
- return SlidePanel.is(state);
- },
- show: function show(object, options) {
- SlidePanel.show(object, options);
- return this;
- },
- hide: function hide() {
- for (
- var _len3 = arguments.length, args = Array(_len3), _key3 = 0;
- _key3 < _len3;
- _key3++
- ) {
- args[_key3] = arguments[_key3];
- }
- SlidePanel.hide(args);
- return this;
- }
- };
- if (!Date.now) {
- Date.now = function() {
- return new Date().getTime();
- };
- }
- var vendors = ['webkit', 'moz'];
- for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
- var vp = vendors[i];
- window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
- window.cancelAnimationFrame =
- window[vp + 'CancelAnimationFrame'] ||
- window[vp + 'CancelRequestAnimationFrame'];
- }
- if (
- /iP(ad|hone|od).*OS (6|7|8)/.test(window.navigator.userAgent) ||
- !window.requestAnimationFrame ||
- !window.cancelAnimationFrame
- ) {
- var lastTime = 0;
- window.requestAnimationFrame = function(callback) {
- var now = getTime();
- var nextTime = Math.max(lastTime + 16, now);
- return setTimeout(function() {
- callback((lastTime = nextTime));
- }, nextTime - now);
- };
- window.cancelAnimationFrame = clearTimeout;
- }
- var OtherSlidePanel = _jquery2.default.fn.slidePanel;
- var jQuerySlidePanel = function jQuerySlidePanel(options) {
- for (
- var _len4 = arguments.length,
- args = Array(_len4 > 1 ? _len4 - 1 : 0),
- _key4 = 1;
- _key4 < _len4;
- _key4++
- ) {
- args[_key4 - 1] = arguments[_key4];
- }
- var method = options;
- if (typeof options === 'string') {
- return this.each(function() {
- var instance = _jquery2.default.data(this, 'slidePanel');
- if (!(instance instanceof Instance)) {
- instance = new Instance(this, args);
- _jquery2.default.data(this, 'slidePanel', instance);
- }
- switch (method) {
- case 'hide':
- SlidePanel.hide(instance);
- break;
- case 'show':
- SlidePanel.show(instance);
- break;
- // no default
- }
- });
- }
- return this.each(function() {
- if (!_jquery2.default.data(this, 'slidePanel')) {
- _jquery2.default.data(this, 'slidePanel', new Instance(this, options));
- (0, _jquery2.default)(this).on('click', function(e) {
- var instance = _jquery2.default.data(this, 'slidePanel');
- SlidePanel.show(instance);
- e.preventDefault();
- e.stopPropagation();
- });
- }
- });
- };
- _jquery2.default.fn.slidePanel = jQuerySlidePanel;
- _jquery2.default.slidePanel = function() {
- SlidePanel.show.apply(SlidePanel, arguments);
- };
- _jquery2.default.extend(
- _jquery2.default.slidePanel,
- {
- setDefaults: function setDefaults(options) {
- _jquery2.default.extend(
- true,
- DEFAULTS,
- _jquery2.default.isPlainObject(options) && options
- );
- },
- noConflict: function noConflict() {
- _jquery2.default.fn.slidePanel = OtherSlidePanel;
- return jQuerySlidePanel;
- }
- },
- info,
- api
- );
- });
|