This commit is contained in:
2021-12-17 23:02:20 +03:00
parent d2aeea12da
commit 2143a9f4b8
6 changed files with 223 additions and 12 deletions
+48 -5
View File
@@ -3,6 +3,7 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
var Viewer = require('Viewer');
var support = require('support');
var Collection = require('Collection');
var ActionCollection = require('ActionCollection');
var Action = require('Action');
var userAction = require('userAction');
@@ -11,7 +12,15 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
const PLUGIN_NAME = 'tooltip2';
/**
* @class Tooltip2Default
*/
const Default = {
hAlign: 'center',
vAlign: 'top',
hDirection: 'center',
vDirection: 'top',
offset: 10,
template: '<div class="tooltip" role="tooltip" style="display: none">' +
//'<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
'<div class="tooltip-inner"></div>' +
@@ -23,21 +32,32 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
* @memberOf kit
* @param masterNode
* @param hintNode
* @param options
* @constructor
*/
var Tooltip2 = function(masterNode, hintNode) {
var Tooltip2 = function(masterNode, hintNode, options = {}) {
var self = this;
var masterOptions = {};
/**
* @type {Tooltip2Default}
*/
this.options = Object.assign({}, Default, masterOptions, options);
this.masterNode = support.getNode(masterNode);
if(!support.isElement(this.masterNode)){
console.warn('Tooltip2: masterNode not valid', this.masterNode);
}
this.hintNode = support.getNode(hintNode);
if(!this.hintNode) {
this.hintNode = support.makeNode(Default.template);
this.hintNode = support.makeNode(this.options.template);
}
if(!support.isElement(this.hintNode)){
console.warn('Tooltip2: masterNode not valid', this.hintNode);
}
this.hintNode.remove();
this.masterNode.appendChild(this.hintNode);
support.setNodeData(this.masterNode, PLUGIN_NAME, this);
//support.setNodeData(this.masterNode, PLUGIN_NAME, this);
this.align = new align.Class(this.hintNode, this.masterNode);
this.align.offset = [0, 10];
var hint = new userAction.Hint(this.masterNode, this.hintNode);
this.viewer = hint.viewer;
this.viewer.delayHide = 400;
@@ -53,6 +73,19 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
var __proto = Tooltip2.prototype;
var vDirection = new Collection(['top', 'bottom']);
var hDirection = new Collection(['left', 'right']);
__proto.__setOffset = function(){
var offset = this.options.offset;
this.align.offset = [0, 0];
var directions = new Collection([this.options.hDirection, this.options.vDirection]);
if(hDirection.includes(this.options.hDirection) || directions.includes('start'))
this.align.offset[0] = offset;
if(vDirection.includes(this.options.vDirection) || directions.includes('end'))
this.align.offset[1] = offset;
};
__proto.setContent = function(html = ''){
var titleNode = this.hintNode.querySelector('.tooltip-inner');
support.innerHtml(titleNode, html);
@@ -70,7 +103,17 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
support.setNodeData(this.masterNode, PLUGIN_NAME, null);
};
__proto.render = function(){
this.align.set('center', 'top', 'center', 'top');
if(this.viewer.isShown()) {
this.__setOffset();
this.align.set(this.options.hAlign, this.options.vAlign, this.options.hDirection, this.options.vDirection);
}
};
/**
* @param options {Tooltip2Default}
*/
__proto.setOptions = function(options){
Object.assign(this.options, options);
this.render();
};
module.exports = Tooltip2;