This commit is contained in:
2022-01-12 21:07:38 +03:00
parent 5bc48555fe
commit ed4e1a54ba
5 changed files with 169 additions and 16 deletions
+1
View File
@@ -616,6 +616,7 @@ window.kit.service = window.kit.service || {};
* @class kitConfig * @class kitConfig
*/ */
var defaultConfig = { var defaultConfig = {
version: '1.10',
assetsPath: '', assetsPath: '',
requiredDependencies: [], requiredDependencies: [],
autoloadPluginList: [], autoloadPluginList: [],
+8 -3
View File
@@ -69,7 +69,7 @@ __PluginManager__.registerPlugins({
module: '/tooltip.js', module: '/tooltip.js',
type: 'loader', type: 'loader',
css: '/tooltip.css', css: '/tooltip.css',
onInstall: function(){ onInstall: function(plugin){
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new __pmGlobal__.Tooltip(tooltipTriggerEl, {sanitize: false}); return new __pmGlobal__.Tooltip(tooltipTriggerEl, {sanitize: false});
@@ -82,8 +82,13 @@ __PluginManager__.registerPlugins({
module: '/tooltip2.js', module: '/tooltip2.js',
type: 'loader', type: 'loader',
css: '/tooltip2.css', css: '/tooltip2.css',
onInstall: function(){ onInstall: function(plugin){
var elements = [].slice.call(document.querySelectorAll('[data-kit-tooltip2="autoload"]'));
elements.map(function (element) {
var tooltip = new __pmGlobal__.Tooltip2(element);
tooltip.run();
console.log(tooltip);
});
}, },
deps: ['Viewer', 'support', 'ActionCollection', 'Action', 'userAction', 'align', 'Collection', 'animations'], deps: ['Viewer', 'support', 'ActionCollection', 'Action', 'userAction', 'align', 'Collection', 'animations'],
}, },
+142 -7
View File
@@ -3,6 +3,81 @@ __PluginManager__.register('support', function(module, exports, require, global)
window.pre = console.log; window.pre = console.log;
var data = function(){
function normalizeData(val) {
if (val === 'true') {
return true
}
if (val === 'false') {
return false
}
if (val === Number(val).toString()) {
return Number(val)
}
if (val === '' || val === 'null') {
return null
}
return val
}
function normalizeDataKey(key) {
return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`);
}
const manipulator = {
set(element, key, value, prefix = 'kit') {
if(prefix !== '') {
prefix = '-' + prefix;
}
element.setAttribute(`data${prefix}-${normalizeDataKey(key)}`, value)
},
remove(element, key, prefix = 'kit') {
if(prefix !== '') {
prefix = '-' + prefix;
}
element.removeAttribute(`data${prefix}-${normalizeDataKey(key)}`)
},
getList(element, prefix = 'kit') {
element = getNode(element);
if (!element) {
return {};
}
const attributes = {};
Object.keys(element.dataset)
.filter(key => key.startsWith(prefix))
.forEach(key => {
var regex = new RegExp(`^${prefix}`, '');
var pureKey = key.replace(regex, '');
pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length);
if(pureKey !== '') {
attributes[pureKey] = normalizeData(element.dataset[key])
}
});
return attributes
},
get(element, key, prefix = 'kit') {
if(prefix !== '') {
prefix = '-' + prefix;
}
return normalizeData(element.getAttribute(`data${prefix}-${normalizeDataKey(key)}`))
},
};
return manipulator;
}();
var node = { var node = {
isRelate: function (node, container = document) { isRelate: function (node, container = document) {
return node === container || container.contains(node); return node === container || container.contains(node);
@@ -68,6 +143,7 @@ __PluginManager__.register('support', function(module, exports, require, global)
function isNumber(value) { function isNumber(value) {
return !Number.isNaN(value) && isFinite(value) && typeof value === 'number'; return !Number.isNaN(value) && isFinite(value) && typeof value === 'number';
} }
function isArray(value) { return Array.isArray(value);}
/** /**
* @return {number} * @return {number}
*/ */
@@ -160,12 +236,58 @@ __PluginManager__.register('support', function(module, exports, require, global)
node.kit = node.kit || {}; node.kit = node.kit || {};
node.kit[key] = value; node.kit[key] = value;
} }
function getNodeData(node, key) { function setObjProp(object, branch, value) {
if(!isElement(node)) return null; if(!Array.isArray(branch)) {
if(node.hasOwnProperty('kit') && node.kit.hasOwnProperty(key)) { branch = [branch];
return node.kit[key];
} }
return null; if(!isObject(object)) return false;
var i = 0, obj = {}, result = true;
obj[i] = object;
branch.forEach(function (key) {
if(!result) {
return;
}
++i;
if(i === branch.length) {
obj[i-1][key] = value;
return;
}
obj[i-1][key] = obj[i-1][key] || {};
result = isObject(obj[i-1][key]);
obj[i] = obj[i-1][key];
});
return result;
}
function getInstanceData(node, key, def = null) {
if(!Array.isArray(key)) {
key = [key];
}
var branch = ['kit'].concat(key);
return getObjProp(node, branch, def);
}
function getObjProp(object, branch, def = null) {
if(!Array.isArray(branch)) {
branch = [branch];
}
if(!isObject(object)) return null;
var i = 0, obj = {}, result = true;
obj[i] = object;
branch.forEach(function (key) {
if(!result) {
return;
}
++i;
if(!isObject(obj[i-1]) || !obj[i-1].hasOwnProperty(key)) {
result = false;
return;
}
obj[i] = obj[i-1][key];
});
if(result) {
return obj[i];
}
return def;
} }
function definePropertyGet(obj, key, val) { function definePropertyGet(obj, key, val) {
Object.defineProperty(obj, key, { Object.defineProperty(obj, key, {
@@ -203,7 +325,7 @@ __PluginManager__.register('support', function(module, exports, require, global)
function insertAfter(newNode, referenceNode) { function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
} }
function tagName(node, tagName) { function setTagName(node, tagName) {
if(!tagName) { if(!tagName) {
return null; return null;
} }
@@ -229,6 +351,15 @@ __PluginManager__.register('support', function(module, exports, require, global)
return result; return result;
} }
function toString(value) {
return String(value);
}
function getDataOptions(node, pluginId, prefix = 'kit') {
node = getNode(node);
node.getAttribute('')
}
/** /**
* @memberOf kit * @memberOf kit
*/ */
@@ -258,7 +389,11 @@ __PluginManager__.register('support', function(module, exports, require, global)
args2array, args2array,
innerHtml, innerHtml,
makeNodeList, makeNodeList,
tagName setTagName,
tagName: setTagName,
data,
setObjProp,
getObjProp
}; };
return module.exports = support; return module.exports = support;
+16 -6
View File
@@ -10,6 +10,7 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
var align = require('align'); var align = require('align');
var animations = require('animations'); var animations = require('animations');
const PLUGIN_PREFIX = 'kit';
const PLUGIN_NAME = 'tooltip2'; const PLUGIN_NAME = 'tooltip2';
/** /**
@@ -21,6 +22,8 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
hDirection: 'center', hDirection: 'center',
vDirection: 'top', vDirection: 'top',
offset: 10, offset: 10,
contentSelector: '.tooltip-inner',
content: '',
template: '<div class="tooltip" role="tooltip" style="display: none">' + template: '<div class="tooltip" role="tooltip" style="display: none">' +
//'<div class="tooltip-arrow" data-popper-arrow="true"></div>' + //'<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
'<div class="tooltip-inner"></div>' + '<div class="tooltip-inner"></div>' +
@@ -37,15 +40,18 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
*/ */
var Tooltip2 = function(masterNode, hintNode, options = {}) { var Tooltip2 = function(masterNode, hintNode, options = {}) {
var self = this; var self = this;
var masterOptions = {};
/**
* @type {Tooltip2Default}
*/
this.options = Object.assign({}, Default, masterOptions, options);
this.masterNode = support.getNode(masterNode); this.masterNode = support.getNode(masterNode);
if(!support.isElement(this.masterNode)){ if(!support.isElement(this.masterNode)){
console.warn('Tooltip2: masterNode not valid', this.masterNode); console.warn('Tooltip2: masterNode not valid', this.masterNode);
} }
var prefix = PLUGIN_PREFIX + PLUGIN_NAME.charAt(0).toUpperCase() + PLUGIN_NAME.slice(1, PLUGIN_NAME.length);
var masterOptions = support.data.getList(this.masterNode, prefix);
/**
* @type {Tooltip2Default}
*/
this.options = Object.assign({}, Default, masterOptions, options);
this.hintNode = support.getNode(hintNode); this.hintNode = support.getNode(hintNode);
if(!this.hintNode) { if(!this.hintNode) {
this.hintNode = support.makeNode(this.options.template); this.hintNode = support.makeNode(this.options.template);
@@ -57,6 +63,10 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
this.masterNode.appendChild(this.hintNode); this.masterNode.appendChild(this.hintNode);
//support.setNodeData(this.masterNode, PLUGIN_NAME, this); //support.setNodeData(this.masterNode, PLUGIN_NAME, this);
if(String(this.options.content) !== '') {
this.setContent(this.options.content);
}
this.align = new align.Class(this.hintNode, this.masterNode); this.align = new align.Class(this.hintNode, this.masterNode);
var hint = new userAction.Hint(this.masterNode, this.hintNode); var hint = new userAction.Hint(this.masterNode, this.hintNode);
this.viewer = hint.viewer; this.viewer = hint.viewer;
@@ -87,7 +97,7 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
}; };
__proto.setContent = function(html = ''){ __proto.setContent = function(html = ''){
var titleNode = this.hintNode.querySelector('.tooltip-inner'); var titleNode = this.hintNode.querySelector(this.options.contentSelector);
support.innerHtml(titleNode, html); support.innerHtml(titleNode, html);
}; };
+2
View File
@@ -174,6 +174,8 @@ $APPLICATION->ShowHead();
<div class="test-block"><div id="master7" class="test-mater"><mark></mark></div></div> <div class="test-block"><div id="master7" class="test-mater"><mark></mark></div></div>
<div class="test-block"><div id="master8" class="test-mater"><mark></mark><mark2></mark2></div></div> <div class="test-block"><div id="master8" class="test-mater"><mark></mark><mark2></mark2></div></div>
<div class="test-block"><div id="master9" class="test-mater"><mark></mark><mark2></mark2></div></div> <div class="test-block"><div id="master9" class="test-mater"><mark></mark><mark2></mark2></div></div>
<div class="test-block"><div class="test-mater" data-kit-tooltip2="autoload" data-kit-tooltip2-content="Инициализация по data"></div></div>
<div style="clear: both"></div> <div style="clear: both"></div>
</div> </div>