/**
* jQuery asTooltip v0.4.3
* https://github.com/amazingSurge/jquery-asTooltip
*
* Copyright (c) amazingSurge
* Released under the LGPL-3.0 license
*/
(function(global, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
factory(require('jquery'));
} else {
var mod = {
exports: {}
};
factory(global.jQuery);
global.jqueryAsTooltipEs = mod.exports;
}
})(this, function(_jquery) {
'use strict';
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) {
return obj && obj.__esModule
? obj
: {
default: obj
};
}
var _typeof =
typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
? function(obj) {
return typeof obj;
}
: function(obj) {
return obj &&
typeof Symbol === 'function' &&
obj.constructor === Symbol &&
obj !== Symbol.prototype
? 'symbol'
: typeof obj;
};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ('value' in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
var DEFAULTS = {
namespace: 'asTooltip',
skin: '',
closeBtn: false,
position: {
value: 'right middle',
target: false, //mouse || jqueryObj
container: false,
auto: false, //if true, judge by positionContainer
adjust: {
mouse: true, //Work when positionTarget is mouse
resize: true,
scroll: true
}
},
show: {
target: false,
event: 'mouseenter',
delay: 0
},
hide: {
target: false,
event: 'mouseleave',
delay: 0,
container: false, // only hideEvent is click, it can be body or obj
inactive: false //if true, it is always show when tip hovering
},
content: null,
contentAttr: 'title',
ajax: false,
tpl:
'
',
onInit: null,
onShow: null,
onHide: null,
onFocus: null,
onBlur: null
};
var NAMESPACE$1 = 'asTooltip';
var $win = (0, _jquery2.default)(window);
var instances = [];
// this is the core function to compute the position to show depended on the given placement argument
var computePlacementOffset = function computePlacementOffset(
element,
$tip,
position,
isMove
) {
// grab measurements
var elOffset = void 0;
var elWidth = void 0;
var elHeight = void 0;
var tipWidth = void 0;
var tipHeight = void 0;
var $element = (0, _jquery2.default)(element);
var x = 0;
var y = 0;
elOffset = isMove ? element : $element.offset();
elWidth = isMove ? 0 : $element.outerWidth();
elHeight = isMove ? 0 : $element.outerHeight();
tipWidth = $tip.outerWidth();
tipHeight = $tip.outerHeight();
for (var i = 0; i < position.length; i++) {
switch (position[i]) {
case 'left':
x = i === 0 ? elOffset.left - tipWidth : elOffset.left;
break;
case 'middle':
switch (position[0]) {
case 'left':
case 'right':
y = elOffset.top + (elHeight - tipHeight) / 2;
break;
case 'top':
case 'bottom':
x = elOffset.left + (elWidth - tipWidth) / 2;
break;
default:
break;
}
break;
case 'right':
x =
i === 0
? elOffset.left + elWidth
: elOffset.left + elWidth - tipWidth;
break;
case 'top':
y = i === 0 ? elOffset.top - tipHeight : elOffset.top;
break;
case 'bottom':
y =
i === 0
? elOffset.top + elHeight
: elOffset.top + elHeight - tipHeight;
break;
default:
break;
}
}
return {
left: Math.round(x),
top: Math.round(y)
};
};
var getViewportCollisions = function getViewportCollisions(
el,
$tip,
$container
) {
var $element = (0, _jquery2.default)(el);
var eOffset = $element.offset();
var cOffset = $container.offset();
var scrollLeft =
$container[0].tagName === 'BODY'
? $win.scrollLeft()
: $container.scrollLeft();
var scrollTop =
$container[0].tagName === 'BODY'
? $win.scrollTop()
: $container.scrollTop();
var offset =
$container[0].tagName === 'BODY'
? eOffset
: {
top: eOffset.top - cOffset.top,
left: eOffset.left - cOffset.left
};
var eWidth = $element.outerWidth();
var eHeight = $element.outerHeight();
var tWidth = $tip.outerWidth();
var tHeight = $tip.outerHeight();
var cWidth =
$container[0].tagName === 'BODY'
? $win.innerWidth()
: $container.outerWidth();
var cHeight =
$container[0].tagName === 'BODY'
? $win.innerHeight()
: $container.outerHeight();
var collisions = [];
if (tHeight > offset.top - scrollTop) {
collisions.push('top');
}
if (tHeight + eHeight + offset.top > scrollTop + cHeight) {
collisions.push('bottom');
}
if (tWidth > offset.left - scrollLeft) {
collisions.push('left');
}
if (tWidth + eWidth + offset.left > scrollLeft + cWidth) {
collisions.push('right');
}
return collisions;
};
/**
* Plugin constructor
**/
var asTooltip = (function() {
function asTooltip(element, options) {
_classCallCheck(this, asTooltip);
var body = (0, _jquery2.default)(document.body);
var newTarget = element[0] === document ? body : element;
var opts = void 0;
var targetData = void 0;
targetData = this.parseTargetData(
(0, _jquery2.default)(newTarget).data()
);
opts = this.options = _jquery2.default.extend(
true,
{},
DEFAULTS,
options,
targetData
);
opts.position.container = !opts.position.container
? body
: (0, _jquery2.default)(opts.position.container);
if (!opts.position.target) {
opts.position.target = newTarget;
}
if (!opts.show.target) {
opts.show.target = newTarget;
}
if (!opts.hide.target) {
opts.hide.target = newTarget;
}
this.$element = (0, _jquery2.default)(newTarget);
this.namespace = this.options.namespace;
opts.content = this.getContent();
this.enabled = true;
this.isOpen = false;
this.loadFlag = false;
this.moveFlag = false;
this.showTimer = null;
this.hideTimer = null;
this.classes = {
show: this.namespace + '_isShow',
isLoading: this.namespace + '_isLoading',
active: this.namespace + '_active',
enabled: this.namespace + '_enabled'
};
this.trigger('init');
this.init();
}
_createClass(
asTooltip,
[
{
key: 'init',
value: function init() {
var _this = this;
var opts = this.options;
var showTarget = opts.show.target;
var hideTarget = opts.hide.target;
var showEvent = opts.show.event;
var hideEvent = opts.hide.event;
// add namepace
this.$tip = (0, _jquery2.default)(
opts.tpl.replace(/{{namespace}}/g, this.namespace)
);
this.$loading = (0, _jquery2.default)(
'.' + this.namespace + '-loading',
this.$tip
);
this.$content = (0, _jquery2.default)(
'.' + this.namespace + '-content',
this.$tip
);
if (showTarget === hideTarget && showEvent === hideEvent) {
this._bind(showTarget, showEvent, function(e) {
if (_this.isOpen) {
_this.hideMethod(e);
} else {
_this.showMethod(e);
}
});
} else {
this._bind(showTarget, showEvent, function(e) {
_this.showMethod(e);
});
this._bind(hideTarget, hideEvent, function(e) {
_this.hideMethod(e);
});
}
if (opts.position.container[0].tagName === 'BODY') {
if (opts.position.adjust.resize) {
this._bind($win, 'resize', function() {
if (_this.isOpen) {
_this.setPosition();
}
});
}
if (opts.position.adjust.scroll) {
this._bind($win, 'scroll', function() {
if (_this.isOpen) {
_this.setPosition();
}
});
}
}
}
},
{
key: 'trigger',
value: function trigger(eventType) {
for (
var _len = arguments.length,
params = Array(_len > 1 ? _len - 1 : 0),
_key = 1;
_key < _len;
_key++
) {
params[_key - 1] = arguments[_key];
}
var data = [this].concat(params);
// event
this.$element.trigger(NAMESPACE$1 + '::' + eventType, data);
// callback
eventType = eventType.replace(/\b\w+\b/g, function(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1);
});
var onFunction = 'on' + eventType;
if (typeof this.options[onFunction] === 'function') {
this.options[onFunction].apply(this, params);
}
}
},
{
key: '_bind',
value: function _bind(targets, events, method, suffix) {
if (!targets || !method || !events.length) {
return;
}
var name = suffix ? events : events + '.' + suffix;
(0, _jquery2.default)(targets).on(
name,
_jquery2.default.proxy(method, this)
);
return this;
}
},
{
key: '_unbind',
value: function _unbind(targets, events, suffix) {
if (targets) {
(0, _jquery2.default)(targets).unbind(
suffix ? events : events + '.' + suffix
);
}
return this;
}
},
{
key: 'parseTargetData',
value: function parseTargetData(data) {
var targetData = {};
_jquery2.default.each(data, function(n, v) {
var names = n.split('_');
var len = names.length;
var path = targetData;
if (len === 1) {
targetData[names[0]] = v;
} else {
for (var i = 0; i < len; i++) {
if (i === 0) {
if (targetData[names[i]] === undefined) {
targetData[names[i]] = {};
}
} else if (i === len - 1) {
path[names[i]] = v;
} else {
if (path[names[i]] === undefined) {
path[names[i]] = {};
}
}
path = targetData[names[i]];
}
}
});
return targetData;
}
},
{
key: 'parseTpl',
value: function parseTpl(string) {
return string.replace('{{namespace}}', self.namespace);
}
},
{
key: 'getDelegateOptions',
value: function getDelegateOptions() {
var options = {};
if (this._options) {
_jquery2.default.each(this._options, function(key, value) {
if (DEFAULTS[key] !== value) {
options[key] = value;
}
});
}
return options;
}
},
{
key: 'showMethod',
value: function showMethod(obj) {
var self =
obj instanceof this.constructor
? obj
: (0, _jquery2.default)(obj.currentTarget).data(NAMESPACE$1);
var opts = this.options;
if (!self) {
self = new this.constructor(
obj.currentTarget,
this.getDelegateOptions()
);
(0, _jquery2.default)(obj.currentTarget).data(NAMESPACE$1, self);
}
if (!opts.ajax && !self.options.content) {
return;
}
if (self.isOpen) {
clearTimeout(self.hideTimer);
} else {
clearTimeout(self.showTimer);
self.showTimer = setTimeout(function() {
_jquery2.default.proxy(self.show, self)();
}, opts.show.delay);
}
if (opts.position.target === 'mouse') {
if (this.moveFlag) {
return;
}
this.isFirst = true;
(0, _jquery2.default)(document).on(
'mousemove.' + NAMESPACE$1,
_jquery2.default.proxy(this.move, self)
);
this.moveFlag = true;
}
if (opts.hide.event === 'click') {
if (opts.hide.container) {
this._bind(opts.hide.container, opts.hide.event, function(e) {
var $target = (0, _jquery2.default)(e.target);
if (
$target.closest(self.$el).length === 0 &&
$target.closest(self.$tip).length === 0
) {
if (self.isOpen) {
_jquery2.default.proxy(self.hide, self)();
}
}
});
}
}
}
},
{
key: 'hideMethod',
value: function hideMethod(obj) {
var self =
obj instanceof this.constructor
? obj
: (0, _jquery2.default)(obj.currentTarget).data(NAMESPACE$1);
var opts = this.options;
var show = false;
if (!self) {
self = new this.constructor(
obj.currentTarget,
this.getDelegateOptions()
);
(0, _jquery2.default)(obj.currentTarget).data(NAMESPACE$1, self);
}
if (!opts.ajax && !self.options.content) {
return;
}
if (!self.isOpen) {
clearTimeout(self.showTimer);
return;
}
if (opts.position.target === 'mouse') {
if (this.moveFlag) {
return;
}
}
if (opts.hide.event === 'click') {
if (opts.hide.container) {
this._unbind(opts.hide.container, opts.hide.event);
}
}
if (opts.hide.inactive) {
this._bind(self.$tip, 'mouseenter.' + NAMESPACE$1, function() {
show = true;
});
this._bind(self.$tip, 'mouseleave.' + NAMESPACE$1, function() {
show = false;
clearTimeout(self.hideTimer);
self.hideTimer = setTimeout(function() {
_jquery2.default.proxy(self.hide, self)();
}, self.options.hide.delay);
self._unbind(
self.$tip,
'mouseenter.' + NAMESPACE$1 + ' mouseleave.' + NAMESPACE$1
);
});
}
clearTimeout(self.hideTimer);
self.hideTimer = setTimeout(function() {
if (!show) {
_jquery2.default.proxy(self.hide, self)();
}
}, opts.hide.delay);
}
},
{
key: 'move',
value: function move(e) {
var x = Math.round(e.pageX);
var y = Math.round(e.pageY);
var t = this.$element.offset().top;
var l = this.$element.offset().left;
var w = this.$element.outerWidth();
var h = this.$element.outerHeight();
if (x >= l && x <= l + w && y >= t && y <= t + h) {
if (this.options.position.adjust.mouse) {
this.setPosition(e);
} else if (this.isFirst) {
this.setPosition(e);
this.isFirst = false;
}
} else {
(0, _jquery2.default)(document).off('mousemove.' + NAMESPACE$1);
this.moveFlag = false;
this.hideMethod(this.$element.data(NAMESPACE$1));
}
}
},
{
key: 'getContent',
value: function getContent() {
return (
this.$element.attr(this.options.contentAttr) ||
(typeof this.options.content === 'function'
? this.options.content()
: this.options.content)
);
}
},
{
key: 'setPosition',
value: function setPosition(e) {
var offset = void 0;
var _offset = void 0;
var positionAttr = void 0;
var opts = this.options;
var target = this.$el;
var $container = opts.position.container;
var flag = false;
var isMove = false;
positionAttr = $container.css('position');
var position = opts.position.value.split(' ');
if (opts.position.target === 'mouse' && e) {
target = {
top: Math.round(e.pageY),
left: Math.round(e.pageX)
};
isMove = true;
} else {
if (_typeof(opts.position.target) === 'object') {
target = opts.position.target;
}
}
if (opts.position.auto) {
if (opts.position.target !== 'mouse') {
var collisions = getViewportCollisions(
target,
this.$tip,
$container
);
var posArr = ['top', 'right', 'bottom', 'left'];
_jquery2.default.each(collisions, function(i, v) {
posArr = _jquery2.default.map(posArr, function(n) {
return n !== v ? n : null;
});
});
if (posArr.length > 0) {
position[0] = posArr[0];
}
}
}
this.$tip
.addClass(this.namespace + '-element-' + position[0])
.addClass(this.namespace + '-arrow-' + position[1]);
offset = computePlacementOffset(
target,
this.$tip,
position,
isMove
);
if (positionAttr !== 'static') {
_offset = $container.offset();
flag = true;
}
this.$tip.css({
top: offset.top + (flag ? -_offset.top : 0),
left: offset.left + (flag ? -_offset.left : 0)
});
}
},
{
key: 'loadToggle',
value: function loadToggle() {
var flag = this.loadFlag;
if (flag) {
this.$tip.removeClass(this.namespace + '_isLoading');
this.loadFlag = false;
} else {
this.$tip.addClass(this.namespace + '_isLoading');
this.loadFlag = true;
}
}
},
{
key: 'statusToggle',
value: function statusToggle(isOpen) {
if (isOpen) {
this.$element.removeClass(this.classes.active);
} else {
this.$element.addClass(this.classes.active);
}
}
},
{
key: 'rePosition',
value: function rePosition(e) {
this.setPosition(e);
return this;
}
},
{
key: 'setContent',
value: function setContent() {
var opts = this.options;
if (opts.ajax) {
this.loadToggle();
}
this.$content.html(opts.content);
this.$tip.appendTo(opts.position.container);
if (opts.position.target !== 'mouse') {
this.setPosition();
}
}
},
{
key: 'show',
value: function show() {
var opts = this.options;
if (!this.enabled) {
return;
}
// if (opts.closeBtn) this.$tip.addClass(this.classes.hasClose);
if (opts.skin) {
this.$tip.addClass(this.namespace + '_' + opts.skin);
}
if (opts.ajax) {
opts.ajax(this);
}
this.setContent(this.isOpen);
this.statusToggle(this.isOpen);
this.isOpen = true;
this.trigger('show');
return this;
}
},
{
key: 'hide',
value: function hide() {
if (this.options.ajax) {
this.$tip.removeClass(this.namespace + '_isLoading');
this.loadFlag = false;
}
this.$tip.off('.' + NAMESPACE$1);
this.statusToggle(this.isOpen);
this.$tip.remove();
this.isOpen = false;
this.trigger('hide');
return this;
}
},
{
key: 'enable',
value: function enable() {
this.enabled = true;
this.$element.addClass(this.classes.enabled);
this.trigger('enable');
return this;
}
},
{
key: 'disable',
value: function disable() {
this.enabled = false;
this.$element.removeClass(this.classes.enabled);
this.trigger('disable');
return this;
}
},
{
key: 'destroy',
value: function destroy() {
this.$element.off('.' + NAMESPACE$1);
this.trigger('destroy');
return this;
}
}
],
[
{
key: 'closeAll',
value: function closeAll() {
instances.map(function(instance) {
if (instance.isOpen) {
instance.hide();
}
});
}
},
{
key: 'setDefaults',
value: function setDefaults(options) {
if (_jquery2.default.isPlainObject(options)) {
_jquery2.default.extend(true, DEFAULTS, options);
}
}
}
]
);
return asTooltip;
})();
var info = {
version: '0.4.3'
};
var NAMESPACE = 'asTooltip';
var OtherAsTooltip = _jquery2.default.fn.asTooltip;
var jQueryAsTooltip = function jQueryAsTooltip(options) {
for (
var _len2 = arguments.length,
args = Array(_len2 > 1 ? _len2 - 1 : 0),
_key2 = 1;
_key2 < _len2;
_key2++
) {
args[_key2 - 1] = arguments[_key2];
}
if (typeof options === 'string') {
var method = options;
if (/^_/.test(method)) {
return false;
} else if (/^(get)/.test(method)) {
var instance = this.first().data(NAMESPACE);
if (instance && typeof instance[method] === 'function') {
return instance[method].apply(instance, args);
}
} else {
return this.each(function() {
var instance = _jquery2.default.data(this, NAMESPACE);
if (instance && typeof instance[method] === 'function') {
instance[method].apply(instance, args);
}
});
}
}
return this.each(function() {
if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
(0, _jquery2.default)(this).data(
NAMESPACE,
new asTooltip(this, options)
);
}
});
};
_jquery2.default.fn.asTooltip = jQueryAsTooltip;
_jquery2.default.asTooltip = _jquery2.default.extend(
{
setDefaults: asTooltip.setDefaults,
closeAll: asTooltip.closeAll,
noConflict: function noConflict() {
_jquery2.default.fn.asTooltip = OtherAsTooltip;
return jQueryAsTooltip;
}
},
info
);
});