/*
* webui popover plugin - v1.2.17
* A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!
* https://github.com/sandywalker/webui-popover
*
* Made by Sandy Duan
* Under MIT License
*/
layui.define(['jquery', 'element'], function(exports) {
var $=layui.$;
// Create the defaults once
var pluginName = 'webuiPopover';
var pluginClass = 'webui-popover';
var pluginType = 'webui.popover';
var defaults = {
placement: 'auto',
container: null,
width: 'auto',
height: 'auto',
trigger: 'click', //hover,click,sticky,manual
style: '',
opacity:null,
selector: false, // jQuery selector, if a selector is provided, popover objects will be delegated to the specified.
delay: {
show: null,
hide: 300
},
async: {
type: 'GET',
before: null, //function(that, xhr, settings){}
success: null, //function(that, xhr){}
error: null //function(that, xhr, data){}
},
cache: true,
multi: false,
arrow: true,
title: '',
content: '',
closeable: false,
padding: true,
url: '',
type: 'html',
direction: '', // ltr,rtl
animation: null,
template: '<div class="webui-popover">' +
'<div class="webui-arrow"></div>' +
'<div class="webui-popover-inner">' +
'<a href="#" class="close"></a>' +
'<h3 class="webui-popover-title"></h3>' +
'<div class="webui-popover-content"><i class="icon-refresh"></i> <p> </p></div>' +
'</div>' +
'</div>',
backdrop: false,
dismissible: true,
onShow: null,
onHide: null,
abortXHR: true,
autoHide: false,
offsetTop: 0,
offsetLeft: 0,
iframeOptions: {
frameborder: '0',
allowtransparency: 'true',
id: '',
name: '',
scrolling: '',
onload: '',
height: '',
width: ''
},
hideEmpty: false
};
var rtlClass = pluginClass + '-rtl';
var _srcElements = [];
var backdrop = $('<div class="webui-popover-backdrop"></div>');
var _globalIdSeed = 0;
var _isBodyEventHandled = false;
var _offsetOut = -2000; // the value offset out of the screen
var $document = $(document);
var toNumber = function (numeric, fallback) {
return isNaN(numeric) ? (fallback || 0) : Number(numeric);
};
var getPopFromElement = function ($element) {
return $element.data('plugin_' + pluginName);
};
var hideAllPop = function () {
var pop = null;
for (var i = 0; i < _srcElements.length; i++) {
pop = getPopFromElement(_srcElements[i]);
if (pop) {
pop.hide(true);
}
}
$document.trigger('hiddenAll.' + pluginType);
};
var hideOtherPops = function (currentPop) {
var pop = null;
for (var i = 0; i < _srcElements.length; i++) {
pop = getPopFromElement(_srcElements[i]);
if (pop && pop.id !== currentPop.id) {
pop.hide(true);
}
}
$document.trigger('hiddenAll.' + pluginType);
};
var isMobile = ('ontouchstart' in document.documentElement) && (/Mobi/.test(navigator.userAgent));
var pointerEventToXY = function (e) {
var out = {
x: 0,
y: 0
};
if (e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend' || e.type === 'touchcancel') {
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
out.x = touch.pageX;
out.y = touch.pageY;
} else if (e.type === 'mousedown' || e.type === 'mouseup' || e.type === 'click') {
out.x = e.pageX;
out.y = e.pageY;
}
return out;
};
// The actual plugin constructor
function WebuiPopover(element, options) {
this.$element = $(element);
if (options) {
if ($.type(options.delay) === 'string' || $.type(options.delay) === 'number') {
options.delay = {
show: options.delay,
hide: options.delay
}; // bc break fix
}
}
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this._targetclick = false;
this.init();
_srcElements.push(this.$element);
return this;
}
WebuiPopover.prototype = {
//init webui popover
init: function () {
if (this.$element[0] instanceof document.constructor && !this.options.selector) {
throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!');
}
if (this.getTrigger() !== 'manual') {
//init the event handlers
if (isMobile) {
this.$element.off('touchend', this.options.selector).on('touchend', this.options.selector, $.proxy(this.toggle, this));
} else if (this.getTrigger() === 'click') {
this.$element.off('click', this.options.selector).on('click', this.options.selector, $.proxy(this.toggle, this));
} else if (this.getTrigger() === 'hover') {
this.$element
.off('mouseenter mouseleave click', this.options.selector)
.on('mouseenter', this.options.selector, $.proxy(this.mouseenterHandler, this))
.on('mouseleave', this.options.selector, $.proxy(this.mouseleaveHandler, this));
}
}
this._poped = false;
this._inited = true;
this._opened = false;
this._idSeed = _globalIdSeed;
this.id = pluginName + this._idSeed;
// normalize container
this.options.container = $(this.options.container || document.body).first();
if (this.options.backdrop) {
backdrop.appendTo(this.options.container).hide();
}
_globalIdSeed++;
if (this.getTrigger() === 'sticky') {
this.show();
}
if (this.options.selector) {
this._options = $.extend({}, this.options, {
selector: ''
});
}
},
/* api methods and actions */
destroy: function () {
var index = -1;
for (var i = 0; i < _srcElements.length; i++) {
if (_srcElements[i] === this.$element) {
index = i;
break;
}
}
_srcElements.splice(index, 1);
this.hide();
this.$element.data('plugin_' + pluginName, null);
if (this.getTrigger() === 'click') {
this.$element.off('click');
} else if (this.getTrigger() === 'hover') {
this.$element.off('mouseenter mouseleave');
}
if (this.$target) {
this.$target.remove();
}
},
getDelegateOptions: function () {
var options = {};
this._options && $.each(this._options, function (key, value) {
if (defaults[key] !== value) {
options[key] = value;
}
});
return options;
},
/*
param: force boolean value, if value is true then force hide the popover
param: event dom event,
*/
hide: function (force, event) {
if (!force && this.getTrigger() === 'sticky') {
return;
}
if (!this._opened) {
return;
}
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (this.xhr && this.options.abortXHR === true) {
this.xhr.abort();
this.xhr = null;
}
var e = $.Event('hide.' + pluginType);
this.$element.trigger(e, [this.$target]);
if (this.$target) {
this.$target.removeClass('in').addClass(this.getHideAnimation());
var that = this;
setTimeout(function () {
that.$target.hide();
if (!that.getCache()) {
that.$target.remove();
//that.getTriggerElement.removeAttr('data-target');
}
}, that.getHideDelay());
}
if (this.options.backdrop) {
backdrop.hide();
}
this._opened = false;
this.$element.trigger('hidden.' + pluginType, [this.$target]);
if (this.options.onHide) {
this.options.onHide(this.$target);
}
},
resetAutoHide: function () {
var that = this;
var autoHide = that.getAutoHide();
if (autoHide) {
if (that.autoHideHandler) {
clearTimeout(that.autoHideHandler);
}
that.autoHideHandler = setTimeout(function () {
that.hide();
}, autoHide);
}
},
delegate: function (eventTarget) {
var self = $(eventTarget).data('plugin_' + pluginName);
if (!self) {
self = new WebuiPopover(eventTarget, this.getDelegateOptions());
$(eventTarget).data('plugin_' + pluginName, self);
}
return self;
},
toggle: function (e) {
var self = this;
if (e) {
e.preventDefault();
e.stopPropagation();
if (this.options.selector) {
self = this.delegate(e.currentTarget);
}
}
self[self.getTarget().hasClass('in') ? 'hide' : 'show']();
},
hideAll: function () {
hideAllPop();
},
hideOthers: function () {
hideOtherPops(this);
},
/*core method ,show popover */
show: function () {
if (this._opened) {
return;
}
//removeAllTargets();
var
$target = this.getTarget().removeClass().addClass(pluginClass).addClass(this._customTargetClass);
if (!this.options.multi) {
this.hideOthers();
}
// use cache by default, if not cache setted , reInit the contents
if (!this.getCache() || !this._poped || this.content === '') {
this.content = '';
this.setTitle(this.getTitle());
if (!this.options.closeable) {
$target.find('.close').off('click').remove();
}
if (!this.isAsync()) {
this.setContent(this.getContent());
} else {
this.setContentASync(this.options.content);
}
if (this.canEmptyHide() && this.content === '') {
return;
}
$target.show();
}
this.displayContent();
if (this.options.onShow) {
this.options.onShow($target);
}
this.bindBodyEvents();
if (this.options.backdrop) {
backdrop.show();
}
this._opened = true;
this.resetAutoHide();
},
displayContent: function () {
var
//element postion
elementPos = this.getElementPosition(),
//target postion
$target = this.getTarget().removeClass().addClass(pluginClass).addClass(this._customTargetClass),
//target content
$targetContent = this.getContentElement(),
//target Width
targetWidth = $target[0].offsetWidth,
//target Height
targetHeight = $target[0].offsetHeight,
//placement
placement = 'bottom',
e = $.Event('show.' + pluginType);
if (this.canEmptyHide()) {
var content = $targetContent.children().html();
if (content !== null && content.trim().length === 0) {
return;
}
}
//if (this.hasContent()){
this.$element.trigger(e, [$target]);
//}
// support width as data attribute
var optWidth = this.$element.data('width') || this.options.width;
if (optWidth === '') {
optWidth = this._defaults.width;
}
if (optWidth !== 'auto') {
$target.width(optWidth);
}
// support height as data attribute
var optHeight = this.$element.data('height') || this.options.height;
if (optHeight === '') {
optHeight = this._defaults.height;
}
if (optHeight !== 'auto') {
$targetContent.height(optHeight);
}
if (this.options.style) {
this.$target.addClass(pluginClass + '-' + this.options.style);
}
//check rtl
if (this.options.direction === 'rtl' && !$targetContent.hasClass(rtlClass)) {
$targetContent.addClass(rtlClass);
}
//init the popover and insert into the document body
if (!this.options.arrow) {
$target.find('.webui-arrow').remove();
}
$target.detach().css({
top: _offsetOut,
left: _offsetOut,
display: 'block',
opacity:this.options.opacity || 1
});
if (this.getAnimation()) {
$target.addClass(this.getAnimation());
}
$target.appendTo(this.options.container);
placement = this.getPlacement(elementPos);
//This line is just for compatible with knockout custom binding
this.$element.trigger('added.' + pluginType);
this.initTargetEvents();
if (!this.options.padding) {
if (this.options.height !== 'auto') {
$targetContent.css('height', $targetContent.outerHeight());
}
this.$target.addClass('webui-no-padding');
}
// add maxHeight and maxWidth support by limodou@gmail.com 2016/10/1
if (this.options.maxHeight) {
$targetContent.css('maxHeight', this.options.maxHeight);
}
if (this.options.maxWidth) {
$targetContent.css('maxWidth', this.options.maxWidth);
}
// end
targetWidth = $target[0].offsetWidth;
targetHeight = $target[0].offsetHeight;
var postionInfo = this.getTargetPositin(elementPos, placement, targetWidth, targetHeight);
this.$target.css(postionInfo.position).addClass(placement).addClass('in');
if (this.options.type === 'iframe') {
var $iframe = $target.find('iframe');
var iframeWidth = $target.width();
var iframeHeight = $iframe.parent().height();
if (this.options.iframeOptions.width !== '' && this.options.iframeOptions.width !== 'auto') {
iframeWidth = this.options.iframeOptions.width;
}
if (this.options.iframeOptions.height !== '' && this.options.iframeOptions.height !== 'auto') {
iframeHeight = this.options.iframeOptions.height;
}
$iframe.width(iframeWidth).height(iframeHeight);
}
if (!this.options.arrow) {
this.$target.css({
'margin': 0
});
}
if (this.options.arrow) {
var $arrow = this.$target.find('.webui-arrow');
$arrow.removeAttr('style');
//prevent arrow change by content size
if (placement === 'left' || placement === 'right') {
$arrow.css({
top: this.$target.height() / 2
});
} else if (placement === 'top' || placement === 'bottom') {
$arrow.css({
left: this.$target.width() / 2
});
}
if (postionInfo.arrowOffset) {
//hide the arrow if offset is negative
if (postionInfo.arrowOffset.left === -1 || postionInfo.arrowOffset.top === -1) {
$arrow.hide();
} else {
$arrow.css(postionInfo.arrowOffset);
}
}
}
this._poped = true;
this.$element.trigger('shown.' + pluginType, [this.$target]);
},
isTargetLoaded: function () {
return this.getTarget().find('i.glyphicon-refresh').length === 0;
},
/*getter setters */
getTriggerElement: function () {
return this.$element;
},
getTarget: function () {
if (!this.$target) {
var id = pluginName + this._idSeed;
this.$target = $(this.options.template)
.attr('id', id);
this._customTargetClass = this.$target.attr('class') !== pluginClass ? this.$target.attr('class') : null;
this.getTriggerElement().attr('data-target', id);
}
if (!this.$target.data('trigger-element')) {
this.$target.data('trigger-element', this.getTriggerElement());
}
return this.$target;
},
removeTarget: function () {
this.$target.remove();
this.$target = null;
this.$contentElement = null;
},
getTitleElement: function () {
return this.getTarget().find('.' + pluginClass + '-title');
},
getContentElement: function () {
if (!this.$contentElement) {
this.$contentElement = this.getTarget().find('.' + pluginClass + '-content');
}
return this.$contentElement;
},
getTitle: function () {
return this.$element.attr('data-title') || this.options.title || this.$element.attr('title');
},
getUrl: function () {
return this.$element.attr('data-url') || this.options.url;
},
getAutoHide: function () {
return this.$element.attr('data-auto-hide') || this.options.autoHide;
},
getOffsetTop: function () {
return toNumber(this.$element.attr('data-offset-top')) || this.options.offsetTop;
},
getOffsetLeft: function () {
return toNumber(this.$element.attr('data-offset-left')) || this.options.offsetLeft;
},
getCache: function () {
var dataAttr = this.$element.attr('data-cache');
if (typeof (dataAttr) !== 'undefined') {
switch (dataAttr.toLowerCase()) {
case 'true':
case 'yes':
case '1':
return true;
case 'false':
case 'no':
case '0':
return false;
}
}
return this.options.cache;
},
getTrigger: function () {
return this.$element.attr('data-trigger') || this.options.trigger;
},
getDelayShow: function () {
var dataAttr = this.$element.attr('data-delay-show');
if (typeof (dataAttr) !== 'undefined') {
return dataAttr;
}
return this.options.delay.show === 0 ? 0 : this.options.delay.show || 100;
},
getHideDelay: function () {
var dataAttr = this.$element.attr('data-delay-hide');
if (typeof (dataAttr) !== 'undefined') {
return dataAttr;
}
return this.options.delay.hide === 0 ? 0 : this.options.delay.hide || 100;
},
getAnimation: function () {
var dataAttr = this.$element.attr('data-animation');
return dataAttr || this.options.animation;
},
getHideAnimation: function () {
var ani = this.getAnimation();
return ani ? ani + '-out' : 'out';
},
setTitle: function (title) {
var $titleEl = this.getTitleElement();
if (title) {
//check rtl
if (this.options.direction === 'rtl' && !$titleEl.hasClass(rtlClass)) {
$titleEl.addClass(rtlClass);
}
$titleEl.html(title);
} else {
$titleEl.remove();
}
},
hasContent: function () {
return this.getContent();
},
canEmptyHide: function () {
return this.options.hideEmpty && this.options.type === 'html';
},
getIframe: function () {
var $iframe = $('<iframe></iframe>').attr('src', this.getUrl());
var self = this;
$.each(this._defaults.iframeOptions, function (opt) {
if (typeof self.options.iframeOptions[opt] !== 'undefined') {
$iframe.attr(opt, self.options.iframeOptions[opt]);
}
});
return $iframe;
},
getContent: function () {
if (this.getUrl()) {
switch (this.options.type) {
case 'iframe':
this.content = this.getIframe();
break;
case 'html':
try {
this.content = $(this.getUrl());
if (!this.content.is(':visible')) {
this.content.show();
}
} catch (error) {
throw new Error('Unable to get popover content. Invalid selector specified.');
}
break;
}
} else if (!this.content) {
var content = '';
if ($.isFunction(this.options.content)) {
content = this.options.content.apply(this.$element[0], [this]);
} else {
content = this.options.content;
}
this.content = this.$element.attr('data-content') || content;
if (!this.content) {
var $next = this.$element.next();
if ($next && $next.hasClass(pluginClass + '-content')) {
this.content = $next;
}
}
}
return this.content;
},
setContent: function (content) {
var $target = this.getTarget();
var $ct = this.getContentElement();
if (typeof content === 'string') {
$ct.html(content);
} else if (content instanceof $) {
$ct.html('');
//Don't want to clone too many times.
if (!this.options.cache) {
content.clone(true, true).removeClass(pluginClass + '-content').appendTo($ct);
} else {
content.removeClass(pluginClass + '-content').appendTo($ct);
}
}
this.$target = $target;
},
isAsync: function () {
return this.options.type === 'async';
},
setContentASync: function (content) {
var that = this;
if (this.xhr) {
return;
}
this.xhr = $.ajax({
url: this.getUrl(),
type: this.options.async.type,
cache: this.getCache(),
beforeSend: function (xhr, settings) {
if (that.options.async.before) {
that.options.async.before(that, xhr, settings);
}
},
success: function (data) {
that.bindBodyEvents();
if (content && $.isFunction(content)) {
that.content = content.apply(that.$element[0], [data]);
} else {
that.content = data;
}
that.setContent(that.content);
var $targetContent = that.getContentElement();
$targetContent.removeAttr('style');
that.displayContent();
if (that.options.async.success) {
that.options.async.success(that, data);
}
},
complete: function () {
that.xhr = null;
},
error: function (xhr, data) {
if (that.options.async.error) {
that.options.async.error(that, xhr, data);
}
}
});
},
bindBodyEvents: function () {
if (_isBodyEventHandled) {
return;
}
if (this.options.dismissible && this.getTrigger() === 'click') {
if (isMobile) {
$document.off('touchstart.webui-popover').on('touchstart.webui-popover', $.proxy(this.bodyTouchStartHandler, this));
} else {
$document.off('keyup.webui-popover').on('keyup.webui-popover', $.proxy(this.escapeHandler, this));
$document.off('click.webui-popover').on('click.webui-popover', $.proxy(this.bodyClickHandler, this));
}
} else if (this.getTrigger() === 'hover') {
$document.off('touchend.webui-popover')
.on('touchend.webui-popover', $.proxy(this.bodyClickHandler, this));
}
},
/* event handlers */
mouseenterHandler: function (e) {
var self = this;
if (e && this.options.selector) {
self = this.delegate(e.currentTarget);
}
if (self._timeout) {
clearTimeout(self._timeout);
}
self._enterTimeout = setTimeout(function () {
if (!self.getTarget().is(':visible')) {
self.show();
}
}, this.getDelayShow());
},
mouseleaveHandler: function () {
var self = this;
clearTimeout(self._enterTimeout);
//key point, set the _timeout then use clearTimeout when mouse leave
self._timeout = setTimeout(function () {
self.hide();
}, this.getHideDelay());
},
escapeHandler: function (e) {
if (e.keyCode === 27) {
this.hideAll();
}
},
bodyTouchStartHandler: function (e) {
var self = this;
var $eventEl = $(e.currentTarget);
$eventEl.on('touchend', function (e) {
self.bodyClickHandler(e);
$eventEl.off('touchend');
});
$eventEl.on('touchmove', function () {
$eventEl.off('touchend');
});
},
bodyClickHandler: function (e) {
_isBodyEventHandled = true;
var canHide = true;
for (var i = 0; i < _srcElements.length; i++) {
var pop = getPopFromElement(_srcElements[i]);
if (pop && pop._opened) {
var offset = pop.getTarget().offset();
var popX1 = offset.left;
var popY1 = offset.top;
var popX2 = offset.left + pop.getTarget().width();
var popY2 = offset.top + pop.getTarget().height();
var pt = pointerEventToXY(e);
var inPop = pt.x >= popX1 && pt.x <= popX2 && pt.y >= popY1 && pt.y <= popY2;
if (inPop) {
canHide = false;
break;
}
}
}
if (canHide) {
hideAllPop();
}
},
/*
targetClickHandler: function() {
this._targetclick = true;
},
*/
//reset and init the target events;
initTargetEvents: function () {
if (this.getTrigger() === 'hover') {
this.$target
.off('mouseenter mouseleave')
.on('mouseenter', $.proxy(this.mouseenterHandler, this))
.on('mouseleave', $.proxy(this.mouseleaveHandler, this));
}
this.$target.find('.close').off('click').on('click', $.proxy(this.hide, this, true));
//this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this));
},
/* utils methods */
//caculate placement of the popover
getPlacement: function (pos) {
var
placement,
container = this.options.container,
clientWidth = container.innerWidth(),
clientHeight = container.innerHeight(),
scrollTop = container.scrollTop(),
scrollLeft = container.scrollLeft(),
pageX = Math.max(0, pos.left - scrollLeft),
pageY = Math.max(0, pos.top - scrollTop);
//arrowSize = 20;
//if placement equals autoļ¼caculate the placement by element information;
if (typeof (this.options.placement) === 'function') {
placement = this.options.placement.call(this, this.getTarget()[0], this.$element[0]);
} else {
placement = this.$element.data('placement') || this.options.placement;
}
var isH = placement === 'horizontal';
var isV = placement === 'vertical';
var detect = placement === 'auto' || isH || isV;
if (detect) {
if (pageX < clientWidth / 3) {
if (pageY < clientHeight / 3) {
placement = isH ? 'right-bottom' : 'bottom-right';
} else if (pageY < clientHeight * 2 / 3) {
if (isV) {
placement = pageY <= clientHeight / 2 ? 'bottom-right' : 'top-right';
} else {
placement = 'right';
}
} else {
placement = isH ? 'right-top' : 'top-right';
}
//placement= pageY>targetHeight+arrowSize?'top-right':'bottom-right';
} else if (pageX < clientWidth * 2 / 3) {
if (pageY < clientHeight / 3) {
if (isH) {
placement = pageX <= clientWidth / 2 ? 'right-bottom' : 'left-bottom';
} else {
placement = 'bottom';
}
} else if (pageY < clientHeight * 2 / 3) {
if (isH) {
placement = pageX <= clientWidth / 2 ? 'right' : 'left';
} else {
placement = pageY <= clientHeight / 2 ? 'bottom' : 'top';
}
} else {
if (isH) {
placement = pageX <= clientWidth / 2 ? 'right-top' : 'left-top';
} else {
placement = 'top';
}
}
} else {
//placement = pageY>targetHeight+arrowSize?'top-left':'bottom-left';
if (pageY < clientHeight / 3) {
placement = isH ? 'left-bottom' : 'bottom-left';
} else if (pageY < clientHeight * 2 / 3) {
if (isV) {
placement = pageY <= clientHeight / 2 ? 'bottom-left' : 'top-left';
} else {
placement = 'left';
}
} else {
placement = isH ? 'left-top' : 'top-left';
}
}
} else if (placement === 'auto-top') {
if (pageX < clientWidth / 3) {
placement = 'top-right';
} else if (pageX < clientWidth * 2 / 3) {
placement = 'top';
} else {
placement = 'top-left';
}
} else if (placement === 'auto-bottom') {
if (pageX < clientWidth / 3) {
placement = 'bottom-right';
} else if (pageX < clientWidth * 2 / 3) {
placement = 'bottom';
} else {
placement = 'bottom-left';
}
} else if (placement === 'auto-left') {
if (pageY < clientHeight / 3) {
placement = 'left-top';
} else if (pageY < clientHeight * 2 / 3) {
placement = 'left';
} else {
placement = 'left-bottom';
}
} else if (placement === 'auto-right') {
if (pageY < clientHeight / 3) {
placement = 'right-bottom';
} else if (pageY < clientHeight * 2 / 3) {
placement = 'right';
} else {
placement = 'right-top';
}
}
return placement;
},
getElementPosition: function () {
// If the container is the body or normal conatiner, just use $element.offset()
var elRect = this.$element[0].getBoundingClientRect();
var container = this.options.container;
var cssPos = container.css('position');
if (container.is(document.body) || cssPos === 'static') {
return $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth || elRect.width,
height: this.$element[0].offsetHeight || elRect.height
});
// Else fixed container need recalculate the position
} else if (cssPos === 'fixed') {
var containerRect = container[0].getBoundingClientRect();
return {
top: elRect.top - containerRect.top + container.scrollTop(),
left: elRect.left - containerRect.left + container.scrollLeft(),
width: elRect.width,
height: elRect.height
};
} else if (cssPos === 'relative') {
return {
top: this.$element.offset().top - container.offset().top,
left: this.$element.offset().left - container.offset().left,
width: this.$element[0].offsetWidth || elRect.width,
height: this.$element[0].offsetHeight || elRect.height
};
}
},
getTargetPositin: function (elementPos, placement, targetWidth, targetHeight) {
var pos = elementPos,
container = this.options.container,
//clientWidth = container.innerWidth(),
//clientHeight = container.innerHeight(),
elementW = this.$element.outerWidth(),
elementH = this.$element.outerHeight(),
scrollTop = document.documentElement.scrollTop + container.scrollTop(),
scrollLeft = document.documentElement.scrollLeft + container.scrollLeft(),
position = {},
arrowOffset = null,
arrowSize = this.options.arrow ? 20 : 0,
padding = 10,
fixedW = elementW < arrowSize + padding ? arrowSize : 0,
fixedH = elementH < arrowSize + padding ? arrowSize : 0,
refix = 0,
pageH = document.documentElement.clientHeight + scrollTop,
pageW = document.documentElement.clientWidth + scrollLeft;
var validLeft = pos.left + pos.width / 2 - fixedW > 0;
var validRight = pos.left + pos.width / 2 + fixedW < pageW;
var validTop = pos.top + pos.height / 2 - fixedH > 0;
var validBottom = pos.top + pos.height / 2 + fixedH < pageH;
switch (placement) {
case 'bottom':
position = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - targetWidth / 2
};
break;
case 'top':
position = {
top: pos.top - targetHeight,
left: pos.left + pos.width / 2 - targetWidth / 2
};
break;
case 'left':
position = {
top: pos.top + pos.height / 2 - targetHeight / 2,
left: pos.left - targetWidth
};
break;
case 'right':
position = {
top: pos.top + pos.height / 2 - targetHeight / 2,
left: pos.left + pos.width
};
break;
case 'top-right':
position = {
top: pos.top - targetHeight,
left: validLeft ? pos.left - fixedW : padding
};
arrowOffset = {
left: validLeft ? Math.min(elementW, targetWidth) / 2 + fixedW : _offsetOut
};
break;
case 'top-left':
refix = validRight ? fixedW : -padding;
position = {
top: pos.top - targetHeight,
left: pos.left - targetWidth + pos.width + refix
};
arrowOffset = {
left: validRight ? targetWidth - Math.min(elementW, targetWidth) / 2 - fixedW : _offsetOut
};
break;
case 'bottom-right':
position = {
top: pos.top + pos.height,
left: validLeft ? pos.left - fixedW : padding
};
arrowOffset = {
left: validLeft ? Math.min(elementW, targetWidth) / 2 + fixedW : _offsetOut
};
break;
case 'bottom-left':
refix = validRight ? fixedW : -padding;
position = {
top: pos.top + pos.height,
left: pos.left - targetWidth + pos.width + refix
};
arrowOffset = {
left: validRight ? targetWidth - Math.min(elementW, targetWidth) / 2 - fixedW : _offsetOut
};
break;
case 'right-top':
refix = validBottom ? fixedH : -padding;
position = {
top: pos.top - targetHeight + pos.height + refix,
left: pos.left + pos.width
};
arrowOffset = {
top: validBottom ? targetHeight - Math.min(elementH, targetHeight) / 2 - fixedH : _offsetOut
};
break;
case 'right-bottom':
position = {
top: validTop ? pos.top - fixedH : padding,
left: pos.left + pos.width
};
arrowOffset = {
top: validTop ? Math.min(elementH, targetHeight) / 2 + fixedH : _offsetOut
};
break;
case 'left-top':
refix = validBottom ? fixedH : -padding;
position = {
top: pos.top - targetHeight + pos.height + refix,
left: pos.left - targetWidth
};
arrowOffset = {
top: validBottom ? targetHeight - Math.min(elementH, targetHeight) / 2 - fixedH : _offsetOut
};
break;
case 'left-bottom':
position = {
top: validTop ? pos.top - fixedH : padding,
left: pos.left - targetWidth
};
arrowOffset = {
top: validTop ? Math.min(elementH, targetHeight) / 2 + fixedH : _offsetOut
};
break;
}
position.top += this.getOffsetTop();
position.left += this.getOffsetLeft();
return {
position: position,
arrowOffset: arrowOffset
};
}
};
$.fn[pluginName] = function (options, noInit) {
var results = [];
var $result = this.each(function () {
var webuiPopover = $.data(this, 'plugin_' + pluginName);
if (!webuiPopover) {
if (!options) {
webuiPopover = new WebuiPopover(this, null);
} else if (typeof options === 'string') {
if (options !== 'destroy') {
if (!noInit) {
webuiPopover = new WebuiPopover(this, null);
results.push(webuiPopover[options]());
}
}
} else if (typeof options === 'object') {
webuiPopover = new WebuiPopover(this, options);
}
$.data(this, 'plugin_' + pluginName, webuiPopover);
} else {
if (options === 'destroy') {
webuiPopover.destroy();
} else if (typeof options === 'string') {
results.push(webuiPopover[options]());
}
}
});
return (results.length) ? results : $result;
};
//Global object exposes to window.
var webuiPopovers = (function () {
var _hideAll = function () {
hideAllPop();
};
var _create = function (selector, options) {
options = options || {};
$(selector).webuiPopover(options);
};
var _isCreated = function (selector) {
var created = true;
$(selector).each(function (i, item) {
created = created && $(item).data('plugin_' + pluginName) !== undefined;
});
return created;
};
var _show = function (selector, options) {
if (options) {
$(selector).webuiPopover(options).webuiPopover('show');
} else {
$(selector).webuiPopover('show');
}
};
var _hide = function (selector) {
$(selector).webuiPopover('hide');
};
var _setDefaultOptions = function (options) {
defaults = $.extend({}, defaults, options);
};
var _updateContent = function (selector, content) {
var pop = $(selector).data('plugin_' + pluginName);
if (pop) {
var cache = pop.getCache();
pop.options.cache = false;
pop.options.content = content;
if (pop._opened) {
pop._opened = false;
pop.show();
} else {
if (pop.isAsync()) {
pop.setContentASync(content);
} else {
pop.setContent(content);
}
}
pop.options.cache = cache;
}
};
var _updateContentAsync = function (selector, url) {
var pop = $(selector).data('plugin_' + pluginName);
if (pop) {
var cache = pop.getCache();
var type = pop.options.type;
pop.options.cache = false;
pop.options.url = url;
if (pop._opened) {
pop._opened = false;
pop.show();
} else {
pop.options.type = 'async';
pop.setContentASync(pop.content);
}
pop.options.cache = cache;
pop.options.type = type;
}
};
return {
show: _show,
hide: _hide,
create: _create,
isCreated: _isCreated,
hideAll: _hideAll,
updateContent: _updateContent,
updateContentAsync: _updateContentAsync,
setDefaultOptions: _setDefaultOptions
};
})();
window.WebuiPopovers = webuiPopovers;
exports("popover",WebuiPopovers);
})