467 lines
26 KiB
JavaScript
467 lines
26 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.popup', ['kendo.core'], f);
|
|
}(function () {
|
|
var __meta__ = {
|
|
id: 'popup',
|
|
name: 'Pop-up',
|
|
category: 'framework',
|
|
depends: ['core'],
|
|
advanced: true
|
|
};
|
|
(function ($, undefined) {
|
|
var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget, support = kendo.support, getOffset = kendo.getOffset, OPEN = 'open', CLOSE = 'close', DEACTIVATE = 'deactivate', ACTIVATE = 'activate', CENTER = 'center', LEFT = 'left', RIGHT = 'right', TOP = 'top', BOTTOM = 'bottom', ABSOLUTE = 'absolute', HIDDEN = 'hidden', BODY = 'body', LOCATION = 'location', POSITION = 'position', VISIBLE = 'visible', EFFECTS = 'effects', ACTIVE = 'k-state-active', ACTIVEBORDER = 'k-state-border', ACTIVEBORDERREGEXP = /k-state-border-(\w+)/, ACTIVECHILDREN = '.k-picker-wrap, .k-dropdown-wrap, .k-link', MOUSEDOWN = 'down', DOCUMENT_ELEMENT = $(document.documentElement), WINDOW = $(window), SCROLL = 'scroll', cssPrefix = support.transitions.css, TRANSFORM = cssPrefix + 'transform', extend = $.extend, NS = '.kendoPopup', styles = [
|
|
'font-size',
|
|
'font-family',
|
|
'font-stretch',
|
|
'font-style',
|
|
'font-weight',
|
|
'line-height'
|
|
];
|
|
function contains(container, target) {
|
|
return container === target || $.contains(container, target);
|
|
}
|
|
var Popup = Widget.extend({
|
|
init: function (element, options) {
|
|
var that = this, parentPopup;
|
|
options = options || {};
|
|
if (options.isRtl) {
|
|
options.origin = options.origin || BOTTOM + ' ' + RIGHT;
|
|
options.position = options.position || TOP + ' ' + RIGHT;
|
|
}
|
|
Widget.fn.init.call(that, element, options);
|
|
element = that.element;
|
|
options = that.options;
|
|
that.collisions = options.collision ? options.collision.split(' ') : [];
|
|
that.downEvent = kendo.applyEventMap(MOUSEDOWN, kendo.guid());
|
|
if (that.collisions.length === 1) {
|
|
that.collisions.push(that.collisions[0]);
|
|
}
|
|
parentPopup = $(that.options.anchor).closest('.k-popup,.k-group').filter(':not([class^=km-])');
|
|
options.appendTo = $($(options.appendTo)[0] || parentPopup[0] || BODY);
|
|
that.element.hide().addClass('k-popup k-group k-reset').toggleClass('k-rtl', !!options.isRtl).css({ position: ABSOLUTE }).appendTo(options.appendTo).on('mouseenter' + NS, function () {
|
|
that._hovered = true;
|
|
}).on('mouseleave' + NS, function () {
|
|
that._hovered = false;
|
|
});
|
|
that.wrapper = $();
|
|
if (options.animation === false) {
|
|
options.animation = {
|
|
open: { effects: {} },
|
|
close: {
|
|
hide: true,
|
|
effects: {}
|
|
}
|
|
};
|
|
}
|
|
extend(options.animation.open, {
|
|
complete: function () {
|
|
that.wrapper.css({ overflow: VISIBLE });
|
|
that._activated = true;
|
|
that._trigger(ACTIVATE);
|
|
}
|
|
});
|
|
extend(options.animation.close, {
|
|
complete: function () {
|
|
that._animationClose();
|
|
}
|
|
});
|
|
that._mousedownProxy = function (e) {
|
|
that._mousedown(e);
|
|
};
|
|
if (support.mobileOS.android) {
|
|
that._resizeProxy = function (e) {
|
|
setTimeout(function () {
|
|
that._resize(e);
|
|
}, 600);
|
|
};
|
|
} else {
|
|
that._resizeProxy = function (e) {
|
|
that._resize(e);
|
|
};
|
|
}
|
|
if (options.toggleTarget) {
|
|
$(options.toggleTarget).on(options.toggleEvent + NS, $.proxy(that.toggle, that));
|
|
}
|
|
},
|
|
events: [
|
|
OPEN,
|
|
ACTIVATE,
|
|
CLOSE,
|
|
DEACTIVATE
|
|
],
|
|
options: {
|
|
name: 'Popup',
|
|
toggleEvent: 'click',
|
|
origin: BOTTOM + ' ' + LEFT,
|
|
position: TOP + ' ' + LEFT,
|
|
anchor: BODY,
|
|
appendTo: null,
|
|
collision: 'flip fit',
|
|
viewport: window,
|
|
copyAnchorStyles: true,
|
|
autosize: false,
|
|
modal: false,
|
|
adjustSize: {
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
animation: {
|
|
open: {
|
|
effects: 'slideIn:down',
|
|
transition: true,
|
|
duration: 200
|
|
},
|
|
close: {
|
|
duration: 100,
|
|
hide: true
|
|
}
|
|
}
|
|
},
|
|
_animationClose: function () {
|
|
var that = this;
|
|
var location = that.wrapper.data(LOCATION);
|
|
that.wrapper.hide();
|
|
if (location) {
|
|
that.wrapper.css(location);
|
|
}
|
|
if (that.options.anchor != BODY) {
|
|
that._hideDirClass();
|
|
}
|
|
that._closing = false;
|
|
that._trigger(DEACTIVATE);
|
|
},
|
|
destroy: function () {
|
|
var that = this, options = that.options, element = that.element.off(NS), parent;
|
|
Widget.fn.destroy.call(that);
|
|
if (options.toggleTarget) {
|
|
$(options.toggleTarget).off(NS);
|
|
}
|
|
if (!options.modal) {
|
|
DOCUMENT_ELEMENT.unbind(that.downEvent, that._mousedownProxy);
|
|
that._toggleResize(false);
|
|
}
|
|
kendo.destroy(that.element.children());
|
|
element.removeData();
|
|
if (options.appendTo[0] === document.body) {
|
|
parent = element.parent('.k-animation-container');
|
|
if (parent[0]) {
|
|
parent.remove();
|
|
} else {
|
|
element.remove();
|
|
}
|
|
}
|
|
},
|
|
open: function (x, y) {
|
|
var that = this, fixed = {
|
|
isFixed: !isNaN(parseInt(y, 10)),
|
|
x: x,
|
|
y: y
|
|
}, element = that.element, options = that.options, animation, wrapper, anchor = $(options.anchor), mobile = element[0] && element.hasClass('km-widget');
|
|
if (!that.visible()) {
|
|
if (options.copyAnchorStyles) {
|
|
if (mobile && styles[0] == 'font-size') {
|
|
styles.shift();
|
|
}
|
|
element.css(kendo.getComputedStyles(anchor[0], styles));
|
|
}
|
|
if (element.data('animating') || that._trigger(OPEN)) {
|
|
return;
|
|
}
|
|
that._activated = false;
|
|
if (!options.modal) {
|
|
DOCUMENT_ELEMENT.unbind(that.downEvent, that._mousedownProxy).bind(that.downEvent, that._mousedownProxy);
|
|
that._toggleResize(false);
|
|
that._toggleResize(true);
|
|
}
|
|
that.wrapper = wrapper = kendo.wrap(element, options.autosize).css({
|
|
overflow: HIDDEN,
|
|
display: 'block',
|
|
position: ABSOLUTE
|
|
});
|
|
if (support.mobileOS.android) {
|
|
wrapper.css(TRANSFORM, 'translatez(0)');
|
|
}
|
|
wrapper.css(POSITION);
|
|
if ($(options.appendTo)[0] == document.body) {
|
|
wrapper.css(TOP, '-10000px');
|
|
}
|
|
that.flipped = that._position(fixed);
|
|
animation = that._openAnimation();
|
|
if (options.anchor != BODY) {
|
|
that._showDirClass(animation);
|
|
}
|
|
element.data(EFFECTS, animation.effects).kendoStop(true).kendoAnimate(animation);
|
|
}
|
|
},
|
|
_openAnimation: function () {
|
|
var animation = extend(true, {}, this.options.animation.open);
|
|
animation.effects = kendo.parseEffects(animation.effects, this.flipped);
|
|
return animation;
|
|
},
|
|
_hideDirClass: function () {
|
|
var anchor = $(this.options.anchor);
|
|
var direction = ((anchor.attr('class') || '').match(ACTIVEBORDERREGEXP) || [
|
|
'',
|
|
'down'
|
|
])[1];
|
|
var dirClass = ACTIVEBORDER + '-' + direction;
|
|
anchor.removeClass(dirClass).children(ACTIVECHILDREN).removeClass(ACTIVE).removeClass(dirClass);
|
|
this.element.removeClass(ACTIVEBORDER + '-' + kendo.directions[direction].reverse);
|
|
},
|
|
_showDirClass: function (animation) {
|
|
var direction = animation.effects.slideIn ? animation.effects.slideIn.direction : 'down';
|
|
var dirClass = ACTIVEBORDER + '-' + direction;
|
|
$(this.options.anchor).addClass(dirClass).children(ACTIVECHILDREN).addClass(ACTIVE).addClass(dirClass);
|
|
this.element.addClass(ACTIVEBORDER + '-' + kendo.directions[direction].reverse);
|
|
},
|
|
position: function () {
|
|
if (this.visible()) {
|
|
this.flipped = this._position();
|
|
}
|
|
},
|
|
toggle: function () {
|
|
var that = this;
|
|
that[that.visible() ? CLOSE : OPEN]();
|
|
},
|
|
visible: function () {
|
|
return this.element.is(':' + VISIBLE);
|
|
},
|
|
close: function (skipEffects) {
|
|
var that = this, options = that.options, wrap, animation, openEffects, closeEffects;
|
|
if (that.visible()) {
|
|
wrap = that.wrapper[0] ? that.wrapper : kendo.wrap(that.element).hide();
|
|
that._toggleResize(false);
|
|
if (that._closing || that._trigger(CLOSE)) {
|
|
that._toggleResize(true);
|
|
return;
|
|
}
|
|
that.element.find('.k-popup').each(function () {
|
|
var that = $(this), popup = that.data('kendoPopup');
|
|
if (popup) {
|
|
popup.close(skipEffects);
|
|
}
|
|
});
|
|
DOCUMENT_ELEMENT.unbind(that.downEvent, that._mousedownProxy);
|
|
if (skipEffects) {
|
|
animation = {
|
|
hide: true,
|
|
effects: {}
|
|
};
|
|
} else {
|
|
animation = extend(true, {}, options.animation.close);
|
|
openEffects = that.element.data(EFFECTS);
|
|
closeEffects = animation.effects;
|
|
if (!closeEffects && !kendo.size(closeEffects) && openEffects && kendo.size(openEffects)) {
|
|
animation.effects = openEffects;
|
|
animation.reverse = true;
|
|
}
|
|
that._closing = true;
|
|
}
|
|
that.element.kendoStop(true);
|
|
wrap.css({ overflow: HIDDEN });
|
|
that.element.kendoAnimate(animation);
|
|
}
|
|
},
|
|
_trigger: function (ev) {
|
|
return this.trigger(ev, { type: ev });
|
|
},
|
|
_resize: function (e) {
|
|
var that = this;
|
|
if (support.resize.indexOf(e.type) !== -1) {
|
|
clearTimeout(that._resizeTimeout);
|
|
that._resizeTimeout = setTimeout(function () {
|
|
that._position();
|
|
that._resizeTimeout = null;
|
|
}, 50);
|
|
} else {
|
|
if (!that._hovered || that._activated && that.element.hasClass('k-list-container')) {
|
|
that.close();
|
|
}
|
|
}
|
|
},
|
|
_toggleResize: function (toggle) {
|
|
var method = toggle ? 'on' : 'off';
|
|
var eventNames = support.resize;
|
|
if (!(support.mobileOS.ios || support.mobileOS.android)) {
|
|
eventNames += ' ' + SCROLL;
|
|
}
|
|
this._scrollableParents()[method](SCROLL, this._resizeProxy);
|
|
WINDOW[method](eventNames, this._resizeProxy);
|
|
},
|
|
_mousedown: function (e) {
|
|
var that = this, container = that.element[0], options = that.options, anchor = $(options.anchor)[0], toggleTarget = options.toggleTarget, target = kendo.eventTarget(e), popup = $(target).closest('.k-popup'), mobile = popup.parent().parent('.km-shim').length;
|
|
popup = popup[0];
|
|
if (!mobile && popup && popup !== that.element[0]) {
|
|
return;
|
|
}
|
|
if ($(e.target).closest('a').data('rel') === 'popover') {
|
|
return;
|
|
}
|
|
if (!contains(container, target) && !contains(anchor, target) && !(toggleTarget && contains($(toggleTarget)[0], target))) {
|
|
that.close();
|
|
}
|
|
},
|
|
_fit: function (position, size, viewPortSize) {
|
|
var output = 0;
|
|
if (position + size > viewPortSize) {
|
|
output = viewPortSize - (position + size);
|
|
}
|
|
if (position < 0) {
|
|
output = -position;
|
|
}
|
|
return output;
|
|
},
|
|
_flip: function (offset, size, anchorSize, viewPortSize, origin, position, boxSize) {
|
|
var output = 0;
|
|
boxSize = boxSize || size;
|
|
if (position !== origin && position !== CENTER && origin !== CENTER) {
|
|
if (offset + boxSize > viewPortSize) {
|
|
output += -(anchorSize + size);
|
|
}
|
|
if (offset + output < 0) {
|
|
output += anchorSize + size;
|
|
}
|
|
}
|
|
return output;
|
|
},
|
|
_scrollableParents: function () {
|
|
return $(this.options.anchor).parentsUntil('body').filter(function (index, element) {
|
|
return kendo.isScrollable(element);
|
|
});
|
|
},
|
|
_position: function (fixed) {
|
|
var that = this, element = that.element, wrapper = that.wrapper, options = that.options, viewport = $(options.viewport), viewportOffset = viewport.offset(), anchor = $(options.anchor), origins = options.origin.toLowerCase().split(' '), positions = options.position.toLowerCase().split(' '), collisions = that.collisions, zoomLevel = support.zoomLevel(), siblingContainer, parents, parentZIndex, zIndex = 10002, isWindow = !!(viewport[0] == window && window.innerWidth && zoomLevel <= 1.02), idx = 0, docEl = document.documentElement, length, viewportWidth, viewportHeight;
|
|
viewportWidth = isWindow ? window.innerWidth : viewport.width();
|
|
viewportHeight = isWindow ? window.innerHeight : viewport.height();
|
|
if (isWindow && docEl.scrollHeight - docEl.clientHeight > 0) {
|
|
viewportWidth -= kendo.support.scrollbar();
|
|
}
|
|
siblingContainer = anchor.parents().filter(wrapper.siblings());
|
|
if (siblingContainer[0]) {
|
|
parentZIndex = Math.max(Number(siblingContainer.css('zIndex')), 0);
|
|
if (parentZIndex) {
|
|
zIndex = parentZIndex + 10;
|
|
} else {
|
|
parents = anchor.parentsUntil(siblingContainer);
|
|
for (length = parents.length; idx < length; idx++) {
|
|
parentZIndex = Number($(parents[idx]).css('zIndex'));
|
|
if (parentZIndex && zIndex < parentZIndex) {
|
|
zIndex = parentZIndex + 10;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
wrapper.css('zIndex', zIndex);
|
|
if (fixed && fixed.isFixed) {
|
|
wrapper.css({
|
|
left: fixed.x,
|
|
top: fixed.y
|
|
});
|
|
} else {
|
|
wrapper.css(that._align(origins, positions));
|
|
}
|
|
var pos = getOffset(wrapper, POSITION, anchor[0] === wrapper.offsetParent()[0]), offset = getOffset(wrapper), anchorParent = anchor.offsetParent().parent('.k-animation-container,.k-popup,.k-group');
|
|
if (anchorParent.length) {
|
|
pos = getOffset(wrapper, POSITION, true);
|
|
offset = getOffset(wrapper);
|
|
}
|
|
if (viewport[0] === window) {
|
|
offset.top -= window.pageYOffset || document.documentElement.scrollTop || 0;
|
|
offset.left -= window.pageXOffset || document.documentElement.scrollLeft || 0;
|
|
} else {
|
|
offset.top -= viewportOffset.top;
|
|
offset.left -= viewportOffset.left;
|
|
}
|
|
if (!that.wrapper.data(LOCATION)) {
|
|
wrapper.data(LOCATION, extend({}, pos));
|
|
}
|
|
var offsets = extend({}, offset), location = extend({}, pos), adjustSize = options.adjustSize;
|
|
if (collisions[0] === 'fit') {
|
|
location.top += that._fit(offsets.top, wrapper.outerHeight() + adjustSize.height, viewportHeight / zoomLevel);
|
|
}
|
|
if (collisions[1] === 'fit') {
|
|
location.left += that._fit(offsets.left, wrapper.outerWidth() + adjustSize.width, viewportWidth / zoomLevel);
|
|
}
|
|
var flipPos = extend({}, location);
|
|
var elementHeight = element.outerHeight();
|
|
var wrapperHeight = wrapper.outerHeight();
|
|
if (!wrapper.height() && elementHeight) {
|
|
wrapperHeight = wrapperHeight + elementHeight;
|
|
}
|
|
if (collisions[0] === 'flip') {
|
|
location.top += that._flip(offsets.top, elementHeight, anchor.outerHeight(), viewportHeight / zoomLevel, origins[0], positions[0], wrapperHeight);
|
|
}
|
|
if (collisions[1] === 'flip') {
|
|
location.left += that._flip(offsets.left, element.outerWidth(), anchor.outerWidth(), viewportWidth / zoomLevel, origins[1], positions[1], wrapper.outerWidth());
|
|
}
|
|
element.css(POSITION, ABSOLUTE);
|
|
wrapper.css(location);
|
|
return location.left != flipPos.left || location.top != flipPos.top;
|
|
},
|
|
_align: function (origin, position) {
|
|
var that = this, element = that.wrapper, anchor = $(that.options.anchor), verticalOrigin = origin[0], horizontalOrigin = origin[1], verticalPosition = position[0], horizontalPosition = position[1], anchorOffset = getOffset(anchor), appendTo = $(that.options.appendTo), appendToOffset, width = element.outerWidth(), height = element.outerHeight(), anchorWidth = anchor.outerWidth(), anchorHeight = anchor.outerHeight(), top = anchorOffset.top, left = anchorOffset.left, round = Math.round;
|
|
if (appendTo[0] != document.body) {
|
|
appendToOffset = getOffset(appendTo);
|
|
top -= appendToOffset.top;
|
|
left -= appendToOffset.left;
|
|
}
|
|
if (verticalOrigin === BOTTOM) {
|
|
top += anchorHeight;
|
|
}
|
|
if (verticalOrigin === CENTER) {
|
|
top += round(anchorHeight / 2);
|
|
}
|
|
if (verticalPosition === BOTTOM) {
|
|
top -= height;
|
|
}
|
|
if (verticalPosition === CENTER) {
|
|
top -= round(height / 2);
|
|
}
|
|
if (horizontalOrigin === RIGHT) {
|
|
left += anchorWidth;
|
|
}
|
|
if (horizontalOrigin === CENTER) {
|
|
left += round(anchorWidth / 2);
|
|
}
|
|
if (horizontalPosition === RIGHT) {
|
|
left -= width;
|
|
}
|
|
if (horizontalPosition === CENTER) {
|
|
left -= round(width / 2);
|
|
}
|
|
return {
|
|
top: top,
|
|
left: left
|
|
};
|
|
}
|
|
});
|
|
ui.plugin(Popup);
|
|
}(window.kendo.jQuery));
|
|
return window.kendo;
|
|
}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {
|
|
(a3 || a2)();
|
|
})); |