kendo.responsivepanel.js
9.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/**
* Kendo UI v2016.1.112 (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.responsivepanel', ['kendo.core'], f);
}(function () {
var __meta__ = {
id: 'responsive-panel',
name: 'Responsive Panel',
category: 'web',
description: 'The Responsive Panel widget allows a panel of content to be hidden on mobile devices, available through a toggle button.',
depends: ['core']
};
(function ($, undefined) {
var proxy = $.proxy;
var NS = '.kendoResponsivePanel';
var OPEN = 'open';
var CLOSE = 'close';
var ACTIVATE_EVENTS = 'click' + NS + ' touchstart' + NS;
var Widget = kendo.ui.Widget;
var ResponsivePanel = Widget.extend({
init: function (element, options) {
Widget.fn.init.call(this, element, options);
this._guid = '_' + kendo.guid();
this._toggleHandler = proxy(this._toggleButtonClick, this);
this._closeHandler = proxy(this._close, this);
$(document.documentElement).on(ACTIVATE_EVENTS, this.options.toggleButton, this._toggleHandler);
this._registerBreakpoint();
this.element.addClass('k-rpanel k-rpanel-' + this.options.orientation + ' ' + this._guid);
this._resizeHandler = proxy(this.resize, this, true);
$(window).on('resize' + NS, this._resizeHandler);
},
_mediaQuery: '@media (max-width: #= breakpoint-1 #px) {' + '.#= guid #.k-rpanel-animate.k-rpanel-left,' + '.#= guid #.k-rpanel-animate.k-rpanel-right {' + '-webkit-transition: -webkit-transform .2s ease-out;' + '-ms-transition: -ms-transform .2s ease-out;' + 'transition: transform .2s ease-out;' + '} ' + '.#= guid #.k-rpanel-top {' + 'overflow: hidden;' + '}' + '.#= guid #.k-rpanel-animate.k-rpanel-top {' + '-webkit-transition: max-height .2s linear;' + '-ms-transition: max-height .2s linear;' + 'transition: max-height .2s linear;' + '}' + '} ' + '@media (min-width: #= breakpoint #px) {' + '#= toggleButton # { display: none; } ' + '.#= guid #.k-rpanel-left { float: left; } ' + '.#= guid #.k-rpanel-right { float: right; } ' + '.#= guid #.k-rpanel-left, .#= guid #.k-rpanel-right {' + 'position: relative;' + '-webkit-transform: translateX(0);' + '-ms-transform: translateX(0);' + 'transform: translateX(0);' + '-webkit-transform: translateX(0) translateZ(0);' + '-ms-transform: translateX(0) translateZ(0);' + 'transform: translateX(0) translateZ(0);' + '} ' + '.#= guid #.k-rpanel-top { max-height: none; }' + '}',
_registerBreakpoint: function () {
var options = this.options;
this._registerStyle(kendo.template(this._mediaQuery)({
breakpoint: options.breakpoint,
toggleButton: options.toggleButton,
guid: this._guid
}));
},
_registerStyle: function (cssText) {
var head = $('head,body')[0];
var style = document.createElement('style');
head.appendChild(style);
if (style.styleSheet) {
style.styleSheet.cssText = cssText;
} else {
style.appendChild(document.createTextNode(cssText));
}
},
options: {
name: 'ResponsivePanel',
orientation: 'left',
toggleButton: '.k-rpanel-toggle',
breakpoint: 640,
autoClose: true
},
events: [
OPEN,
CLOSE
],
_resize: function () {
this.element.removeClass('k-rpanel-animate k-rpanel-expanded');
$(document.documentElement).off(ACTIVATE_EVENTS, this._closeHandler);
},
_toggleButtonClick: function (e) {
e.preventDefault();
if (this.element.hasClass('k-rpanel-expanded')) {
this.close();
} else {
this.open();
}
},
open: function () {
if (!this.trigger(OPEN)) {
this.element.addClass('k-rpanel-animate k-rpanel-expanded');
if (this.options.autoClose) {
$(document.documentElement).on(ACTIVATE_EVENTS, this._closeHandler);
}
}
},
close: function () {
if (!this.trigger(CLOSE)) {
this.element.addClass('k-rpanel-animate').removeClass('k-rpanel-expanded');
$(document.documentElement).off(ACTIVATE_EVENTS, this._closeHandler);
}
},
_close: function (e) {
var prevented = e.isDefaultPrevented();
var container = $(e.target).closest(this.options.toggleButton + ',.k-rpanel');
if (!container.length && !prevented) {
this.close();
}
},
destroy: function () {
Widget.fn.destroy.call(this);
$(window).off('resize' + NS, this._resizeHandler);
$(document.documentElement).off(ACTIVATE_EVENTS, this._closeHandler);
}
});
kendo.ui.plugin(ResponsivePanel);
}(window.kendo.jQuery));
return window.kendo;
}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {
(a3 || a2)();
}));