201 lines
12 KiB
JavaScript
201 lines
12 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.switch', [
|
|
'kendo.fx',
|
|
'kendo.userevents'
|
|
], f);
|
|
}(function () {
|
|
var __meta__ = {
|
|
id: 'mobile.switch',
|
|
name: 'Switch',
|
|
category: 'mobile',
|
|
description: 'The mobile Switch widget is used to display two exclusive choices.',
|
|
depends: [
|
|
'fx',
|
|
'userevents'
|
|
]
|
|
};
|
|
(function ($, undefined) {
|
|
var kendo = window.kendo, ui = kendo.mobile.ui, Widget = ui.Widget, support = kendo.support, CHANGE = 'change', SWITCHON = 'km-switch-on', SWITCHOFF = 'km-switch-off', MARGINLEFT = 'margin-left', ACTIVE_STATE = 'km-state-active', DISABLED_STATE = 'km-state-disabled', DISABLED = 'disabled', TRANSFORMSTYLE = support.transitions.css + 'transform', proxy = $.proxy;
|
|
function limitValue(value, minLimit, maxLimit) {
|
|
return Math.max(minLimit, Math.min(maxLimit, value));
|
|
}
|
|
var SWITCH_MARKUP = '<span class="km-switch km-widget"> <span class="km-switch-wrapper"><span class="km-switch-background"></span></span> <span class="km-switch-container"><span class="km-switch-handle" > <span class="km-switch-label-on">{0}</span> <span class="km-switch-label-off">{1}</span> </span> </span>';
|
|
var Switch = Widget.extend({
|
|
init: function (element, options) {
|
|
var that = this, checked;
|
|
Widget.fn.init.call(that, element, options);
|
|
options = that.options;
|
|
that.wrapper = $(kendo.format(SWITCH_MARKUP, options.onLabel, options.offLabel));
|
|
that.handle = that.wrapper.find('.km-switch-handle');
|
|
that.background = that.wrapper.find('.km-switch-background');
|
|
that.wrapper.insertBefore(that.element).prepend(that.element);
|
|
that._drag();
|
|
that.origin = parseInt(that.background.css(MARGINLEFT), 10);
|
|
that.constrain = 0;
|
|
that.snapPoint = 0;
|
|
element = that.element[0];
|
|
element.type = 'checkbox';
|
|
that._animateBackground = true;
|
|
checked = that.options.checked;
|
|
if (checked === null) {
|
|
checked = element.checked;
|
|
}
|
|
that.check(checked);
|
|
that.options.enable = that.options.enable && !that.element.attr(DISABLED);
|
|
that.enable(that.options.enable);
|
|
that.refresh();
|
|
kendo.notify(that, kendo.mobile.ui);
|
|
},
|
|
refresh: function () {
|
|
var that = this, handleWidth = that.handle.outerWidth(true);
|
|
that.width = that.wrapper.width();
|
|
that.constrain = that.width - handleWidth;
|
|
that.snapPoint = that.constrain / 2;
|
|
if (typeof that.origin != 'number') {
|
|
that.origin = parseInt(that.background.css(MARGINLEFT), 10);
|
|
}
|
|
that.background.data('origin', that.origin);
|
|
that.check(that.element[0].checked);
|
|
},
|
|
events: [CHANGE],
|
|
options: {
|
|
name: 'Switch',
|
|
onLabel: 'on',
|
|
offLabel: 'off',
|
|
checked: null,
|
|
enable: true
|
|
},
|
|
check: function (check) {
|
|
var that = this, element = that.element[0];
|
|
if (check === undefined) {
|
|
return element.checked;
|
|
}
|
|
that._position(check ? that.constrain : 0);
|
|
element.checked = check;
|
|
that.wrapper.toggleClass(SWITCHON, check).toggleClass(SWITCHOFF, !check);
|
|
},
|
|
value: function () {
|
|
return this.check.apply(this, arguments);
|
|
},
|
|
destroy: function () {
|
|
Widget.fn.destroy.call(this);
|
|
this.userEvents.destroy();
|
|
},
|
|
toggle: function () {
|
|
var that = this;
|
|
that.check(!that.element[0].checked);
|
|
},
|
|
enable: function (enable) {
|
|
var element = this.element, wrapper = this.wrapper;
|
|
if (typeof enable == 'undefined') {
|
|
enable = true;
|
|
}
|
|
this.options.enable = enable;
|
|
if (enable) {
|
|
element.removeAttr(DISABLED);
|
|
} else {
|
|
element.attr(DISABLED, DISABLED);
|
|
}
|
|
wrapper.toggleClass(DISABLED_STATE, !enable);
|
|
},
|
|
_resize: function () {
|
|
this.refresh();
|
|
},
|
|
_move: function (e) {
|
|
var that = this;
|
|
e.preventDefault();
|
|
that._position(limitValue(that.position + e.x.delta, 0, that.width - that.handle.outerWidth(true)));
|
|
},
|
|
_position: function (position) {
|
|
var that = this;
|
|
that.position = position;
|
|
that.handle.css(TRANSFORMSTYLE, 'translatex(' + position + 'px)');
|
|
if (that._animateBackground) {
|
|
that.background.css(MARGINLEFT, that.origin + position);
|
|
}
|
|
},
|
|
_start: function () {
|
|
if (!this.options.enable) {
|
|
this.userEvents.cancel();
|
|
} else {
|
|
this.userEvents.capture();
|
|
this.handle.addClass(ACTIVE_STATE);
|
|
}
|
|
},
|
|
_stop: function () {
|
|
var that = this;
|
|
that.handle.removeClass(ACTIVE_STATE);
|
|
that._toggle(that.position > that.snapPoint);
|
|
},
|
|
_toggle: function (checked) {
|
|
var that = this, handle = that.handle, element = that.element[0], value = element.checked, duration = kendo.mobile.application && kendo.mobile.application.os.wp ? 100 : 200, distance;
|
|
that.wrapper.toggleClass(SWITCHON, checked).toggleClass(SWITCHOFF, !checked);
|
|
that.position = distance = checked * that.constrain;
|
|
if (that._animateBackground) {
|
|
that.background.kendoStop(true, true).kendoAnimate({
|
|
effects: 'slideMargin',
|
|
offset: distance,
|
|
reset: true,
|
|
reverse: !checked,
|
|
axis: 'left',
|
|
duration: duration
|
|
});
|
|
}
|
|
handle.kendoStop(true, true).kendoAnimate({
|
|
effects: 'slideTo',
|
|
duration: duration,
|
|
offset: distance + 'px,0',
|
|
reset: true,
|
|
complete: function () {
|
|
if (value !== checked) {
|
|
element.checked = checked;
|
|
that.trigger(CHANGE, { checked: checked });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
_drag: function () {
|
|
var that = this;
|
|
that.userEvents = new kendo.UserEvents(that.wrapper, {
|
|
fastTap: true,
|
|
tap: function () {
|
|
if (that.options.enable) {
|
|
that._toggle(!that.element[0].checked);
|
|
}
|
|
},
|
|
start: proxy(that._start, that),
|
|
move: proxy(that._move, that),
|
|
end: proxy(that._stop, that)
|
|
});
|
|
}
|
|
});
|
|
ui.plugin(Switch);
|
|
}(window.kendo.jQuery));
|
|
return window.kendo;
|
|
}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {
|
|
(a3 || a2)();
|
|
})); |