280 lines
15 KiB
JavaScript
280 lines
15 KiB
JavaScript
/**
|
|
* Kendo UI v2016.1.226 (http://www.telerik.com/kendo-ui)
|
|
* Copyright 2016 Telerik AD. All rights reserved.
|
|
*
|
|
* Kendo UI commercial licenses may be obtained at
|
|
* http://www.telerik.com/purchase/license-agreement/kendo-ui-complete
|
|
* If you do not own a commercial license, this file shall be governed by the trial license terms.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
(function (f, define) {
|
|
define('kendo.mobile.drawer', [
|
|
'kendo.mobile.view',
|
|
'kendo.userevents'
|
|
], f);
|
|
}(function () {
|
|
var __meta__ = {
|
|
id: 'mobile.drawer',
|
|
name: 'Drawer',
|
|
category: 'mobile',
|
|
description: 'The Kendo Mobile Drawer widget provides slide to reveal global application toolbox',
|
|
depends: [
|
|
'mobile.view',
|
|
'userevents'
|
|
]
|
|
};
|
|
(function ($, undefined) {
|
|
var kendo = window.kendo, mobile = kendo.mobile, os = kendo.support.mobileOS, Transition = kendo.effects.Transition, roleSelector = kendo.roleSelector, AXIS = 'x', ui = mobile.ui, SWIPE_TO_OPEN = !(os.ios && os.majorVersion == 7 && !os.appMode), BEFORE_SHOW = 'beforeShow', INIT = 'init', SHOW = 'show', HIDE = 'hide', AFTER_HIDE = 'afterHide', NULL_VIEW = { enable: $.noop };
|
|
var Drawer = ui.View.extend({
|
|
init: function (element, options) {
|
|
$(element).parent().prepend(element);
|
|
mobile.ui.Widget.fn.init.call(this, element, options);
|
|
if (!this.options.$angular) {
|
|
this._layout();
|
|
this._scroller();
|
|
}
|
|
this._model();
|
|
var pane = this.element.closest(roleSelector('pane')).data('kendoMobilePane'), userEvents;
|
|
if (pane) {
|
|
this.pane = pane;
|
|
this.pane.bind('viewShow', function (e) {
|
|
drawer._viewShow(e);
|
|
});
|
|
this.pane.bind('sameViewRequested', function () {
|
|
drawer.hide();
|
|
});
|
|
userEvents = this.userEvents = new kendo.UserEvents(pane.element, {
|
|
fastTap: true,
|
|
filter: roleSelector('view splitview'),
|
|
allowSelection: true
|
|
});
|
|
} else {
|
|
this.currentView = NULL_VIEW;
|
|
var container = $(this.options.container);
|
|
if (!container) {
|
|
throw new Error('The drawer needs a container configuration option set.');
|
|
}
|
|
userEvents = this.userEvents = new kendo.UserEvents(container, {
|
|
fastTap: true,
|
|
allowSelection: true
|
|
});
|
|
this._attachTransition(container);
|
|
}
|
|
var drawer = this;
|
|
var hide = function (e) {
|
|
if (drawer.visible) {
|
|
drawer.hide();
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
if (this.options.swipeToOpen && SWIPE_TO_OPEN) {
|
|
userEvents.bind('press', function () {
|
|
drawer.transition.cancel();
|
|
});
|
|
userEvents.bind('start', function (e) {
|
|
drawer._start(e);
|
|
});
|
|
userEvents.bind('move', function (e) {
|
|
drawer._update(e);
|
|
});
|
|
userEvents.bind('end', function (e) {
|
|
drawer._end(e);
|
|
});
|
|
userEvents.bind('tap', hide);
|
|
} else {
|
|
userEvents.bind('press', hide);
|
|
}
|
|
this.leftPositioned = this.options.position === 'left';
|
|
this.visible = false;
|
|
this.element.hide().addClass('km-drawer').addClass(this.leftPositioned ? 'km-left-drawer' : 'km-right-drawer');
|
|
this.trigger(INIT);
|
|
},
|
|
options: {
|
|
name: 'Drawer',
|
|
position: 'left',
|
|
views: [],
|
|
swipeToOpenViews: [],
|
|
swipeToOpen: true,
|
|
title: '',
|
|
container: null
|
|
},
|
|
events: [
|
|
BEFORE_SHOW,
|
|
HIDE,
|
|
AFTER_HIDE,
|
|
INIT,
|
|
SHOW
|
|
],
|
|
show: function () {
|
|
if (this._activate()) {
|
|
this._show();
|
|
}
|
|
},
|
|
hide: function () {
|
|
if (!this.currentView) {
|
|
return;
|
|
}
|
|
this.currentView.enable();
|
|
Drawer.current = null;
|
|
this._moveViewTo(0);
|
|
this.trigger(HIDE, { view: this });
|
|
},
|
|
openFor: function () {
|
|
if (this.visible) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
},
|
|
destroy: function () {
|
|
ui.View.fn.destroy.call(this);
|
|
this.userEvents.destroy();
|
|
},
|
|
_activate: function () {
|
|
if (this.visible) {
|
|
return true;
|
|
}
|
|
var visibleOnCurrentView = this._currentViewIncludedIn(this.options.views);
|
|
if (!visibleOnCurrentView || this.trigger(BEFORE_SHOW, { view: this })) {
|
|
return false;
|
|
}
|
|
this._setAsCurrent();
|
|
this.element.show();
|
|
this.trigger(SHOW, { view: this });
|
|
this._invokeNgController();
|
|
return true;
|
|
},
|
|
_currentViewIncludedIn: function (views) {
|
|
if (!this.pane || !views.length) {
|
|
return true;
|
|
}
|
|
var view = this.pane.view();
|
|
return $.inArray(view.id.replace('#', ''), views) > -1 || $.inArray(view.element.attr('id'), views) > -1;
|
|
},
|
|
_show: function () {
|
|
this.currentView.enable(false);
|
|
this.visible = true;
|
|
var offset = this.element.width();
|
|
if (!this.leftPositioned) {
|
|
offset = -offset;
|
|
}
|
|
this._moveViewTo(offset);
|
|
},
|
|
_setAsCurrent: function () {
|
|
if (Drawer.last !== this) {
|
|
if (Drawer.last) {
|
|
Drawer.last.element.hide();
|
|
}
|
|
this.element.show();
|
|
}
|
|
Drawer.last = this;
|
|
Drawer.current = this;
|
|
},
|
|
_moveViewTo: function (offset) {
|
|
this.userEvents.cancel();
|
|
this.transition.moveTo({
|
|
location: offset,
|
|
duration: 400,
|
|
ease: Transition.easeOutExpo
|
|
});
|
|
},
|
|
_viewShow: function (e) {
|
|
if (this.currentView) {
|
|
this.currentView.enable();
|
|
}
|
|
if (this.currentView === e.view) {
|
|
this.hide();
|
|
return;
|
|
}
|
|
this.currentView = e.view;
|
|
this._attachTransition(e.view.element);
|
|
},
|
|
_attachTransition: function (element) {
|
|
var that = this, movable = this.movable, currentOffset = movable && movable.x;
|
|
if (this.transition) {
|
|
this.transition.cancel();
|
|
this.movable.moveAxis('x', 0);
|
|
}
|
|
movable = this.movable = new kendo.ui.Movable(element);
|
|
this.transition = new Transition({
|
|
axis: AXIS,
|
|
movable: this.movable,
|
|
onEnd: function () {
|
|
if (movable[AXIS] === 0) {
|
|
element[0].style.cssText = '';
|
|
that.element.hide();
|
|
that.trigger(AFTER_HIDE);
|
|
that.visible = false;
|
|
}
|
|
}
|
|
});
|
|
if (currentOffset) {
|
|
element.addClass('k-fx-hidden');
|
|
kendo.animationFrame(function () {
|
|
element.removeClass('k-fx-hidden');
|
|
that.movable.moveAxis(AXIS, currentOffset);
|
|
that.hide();
|
|
});
|
|
}
|
|
},
|
|
_start: function (e) {
|
|
var userEvents = e.sender;
|
|
if (Math.abs(e.x.velocity) < Math.abs(e.y.velocity) || kendo.triggeredByInput(e.event) || !this._currentViewIncludedIn(this.options.swipeToOpenViews)) {
|
|
userEvents.cancel();
|
|
return;
|
|
}
|
|
var leftPositioned = this.leftPositioned, visible = this.visible, canMoveLeft = leftPositioned && visible || !leftPositioned && !Drawer.current, canMoveRight = !leftPositioned && visible || leftPositioned && !Drawer.current, leftSwipe = e.x.velocity < 0;
|
|
if (canMoveLeft && leftSwipe || canMoveRight && !leftSwipe) {
|
|
if (this._activate()) {
|
|
userEvents.capture();
|
|
return;
|
|
}
|
|
}
|
|
userEvents.cancel();
|
|
},
|
|
_update: function (e) {
|
|
var movable = this.movable, newPosition = movable.x + e.x.delta, limitedPosition;
|
|
if (this.leftPositioned) {
|
|
limitedPosition = Math.min(Math.max(0, newPosition), this.element.width());
|
|
} else {
|
|
limitedPosition = Math.max(Math.min(0, newPosition), -this.element.width());
|
|
}
|
|
this.movable.moveAxis(AXIS, limitedPosition);
|
|
e.event.preventDefault();
|
|
e.event.stopPropagation();
|
|
},
|
|
_end: function (e) {
|
|
var velocity = e.x.velocity, pastHalf = Math.abs(this.movable.x) > this.element.width() / 2, velocityThreshold = 0.8, shouldShow;
|
|
if (this.leftPositioned) {
|
|
shouldShow = velocity > -velocityThreshold && (velocity > velocityThreshold || pastHalf);
|
|
} else {
|
|
shouldShow = velocity < velocityThreshold && (velocity < -velocityThreshold || pastHalf);
|
|
}
|
|
if (shouldShow) {
|
|
this._show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
}
|
|
});
|
|
ui.plugin(Drawer);
|
|
}(window.kendo.jQuery));
|
|
return window.kendo;
|
|
}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {
|
|
(a3 || a2)();
|
|
})); |