vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3965 - For Tooltip CSS

pull/4052/head^2
Tuğçe Küçükoğlu 2023-06-14 17:10:55 +03:00
parent fd41318aae
commit 5128b6e362
1 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/lib/tooltip/Tooltip.js
View File

@ -136,6 +136,23 @@ function getTooltipElement(el) {
return document.getElementById(el.$_ptooltipId); return document.getElementById(el.$_ptooltipId);
} }
function setGlobalPTOptions(el, container) {
const addCSS = (element, section) => {
section.class && DomHandler.addMultipleClasses(element, section.class);
section.style && DomHandler.addStyles(element, section.style);
};
el.$_ptooltipPTOptions.css && addCSS(container, el.$_ptooltipPTOptions.css.root);
el.$_ptooltipPTCss && addCSS(container, el.$_ptooltipPTCss.root);
for (let section of ['arrow', 'text']) {
const element = DomHandler.findSingle(container, `[data-pc-section="${section}"]`);
el.$_ptooltipPTOptions.css[section] && addCSS(element, el.$_ptooltipPTOptions.css[section]);
el.$_ptooltipPTCss[section] && addCSS(element, el.$_ptooltipPTCss[section]);
}
}
function create(el) { function create(el) {
const id = el.$_ptooltipIdAttr !== '' ? el.$_ptooltipIdAttr : UniqueComponentId() + '_tooltip'; const id = el.$_ptooltipIdAttr !== '' ? el.$_ptooltipIdAttr : UniqueComponentId() + '_tooltip';
@ -144,15 +161,22 @@ function create(el) {
let container = document.createElement('div'); let container = document.createElement('div');
container.id = id; container.id = id;
container.setAttribute('data-pc-section', 'root');
container.setAttribute('data-pc-name', 'tooltip');
let tooltipArrow = document.createElement('div'); let tooltipArrow = document.createElement('div');
tooltipArrow.className = 'p-tooltip-arrow'; tooltipArrow.setAttribute('data-pc-section', 'arrow');
container.appendChild(tooltipArrow); container.appendChild(tooltipArrow);
let tooltipText = document.createElement('div'); let tooltipText = document.createElement('div');
tooltipText.setAttribute('data-pc-section', 'text');
if (!el.$_ptooltipUnstyled) {
tooltipArrow.className = 'p-tooltip-arrow';
tooltipText.className = 'p-tooltip-text'; tooltipText.className = 'p-tooltip-text';
}
if (el.$_ptooltipEscape) { if (el.$_ptooltipEscape) {
tooltipText.innerHTML = el.$_ptooltipValue; tooltipText.innerHTML = el.$_ptooltipValue;
@ -171,6 +195,8 @@ function create(el) {
container.style.width = 'fit-content'; container.style.width = 'fit-content';
} }
setGlobalPTOptions(el, container);
return container; return container;
} }
@ -306,7 +332,7 @@ function preAlign(el, position) {
tooltipElement.style.left = -999 + 'px'; tooltipElement.style.left = -999 + 'px';
tooltipElement.style.top = -999 + 'px'; tooltipElement.style.top = -999 + 'px';
tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`; tooltipElement.className += el.$_ptooltipUnstyled ? el.$_ptooltipClass : ` p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`;
} }
function isOutOfBounds(el) { function isOutOfBounds(el) {
@ -356,28 +382,36 @@ const Tooltip = {
target.$_ptooltipEscape = false; target.$_ptooltipEscape = false;
target.$_ptooltipClass = null; target.$_ptooltipClass = null;
target.$_ptooltipFitContent = true; target.$_ptooltipFitContent = true;
target.$_ptooltipIdAttr = '';
target.$_ptooltipShowDelay = 0; target.$_ptooltipShowDelay = 0;
target.$_ptooltipHideDelay = 0; target.$_ptooltipHideDelay = 0;
target.$_ptooltipPTCss = '';
} else if (typeof options.value === 'object' && options.value) { } else if (typeof options.value === 'object' && options.value) {
if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return; if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return;
else { else {
/* eslint-disable */
target.$_ptooltipValue = options.value.value; target.$_ptooltipValue = options.value.value;
target.$_ptooltipDisabled = !!options.value.disabled === options.value.disabled ? options.value.disabled : false; target.$_ptooltipDisabled = !!options.value.disabled === options.value.disabled ? options.value.disabled : false;
target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false; target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false;
target.$_ptooltipClass = options.value.class; target.$_ptooltipClass = options.value.class || '';
target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true; target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
target.$_ptooltipIdAttr = options.value.id || ''; target.$_ptooltipIdAttr = options.value.id || '';
target.$_ptooltipShowDelay = options.value.showDelay || 0; target.$_ptooltipShowDelay = options.value.showDelay || 0;
target.$_ptooltipHideDelay = options.value.hideDelay || 0; target.$_ptooltipHideDelay = options.value.hideDelay || 0;
target.$_ptooltipPTCss = options.value.pt && options.value.pt.css;
} }
} }
target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip; if (options.instance.$primevue && options.instance.$primevue.config) {
target.$_ptooltipZIndex = options.instance.$primevue.config.zIndex.tooltip;
target.$_ptooltipUnstyled = options.instance.$primevue.config.unstyled || false;
target.$_ptooltipPTOptions = options.instance.$primevue.config.pt && options.instance.$primevue.config.pt.directives && options.instance.$primevue.config.pt.directives.tooltip;
}
bindEvents(target); bindEvents(target);
}, },
unmounted(el) { unmounted(el) {
let target = getTarget(el); let target = getTarget(el);
remove(target); remove(target);
unbindEvents(target); unbindEvents(target);
@ -388,10 +422,12 @@ const Tooltip = {
}, },
updated(el, options) { updated(el, options) {
let target = getTarget(el); let target = getTarget(el);
target.$_ptooltipModifiers = getModifiers(options); target.$_ptooltipModifiers = getModifiers(options);
if (!options.value) { if (!options.value) {
unbindEvents(target); unbindEvents(target);
return; return;
} }
@ -403,26 +439,32 @@ const Tooltip = {
target.$_ptooltipIdAttr = ''; target.$_ptooltipIdAttr = '';
target.$_ptooltipShowDelay = 0; target.$_ptooltipShowDelay = 0;
target.$_ptooltipHideDelay = 0; target.$_ptooltipHideDelay = 0;
target.$_ptooltipPTCss = '';
bindEvents(target); bindEvents(target);
} else if (typeof options.value === 'object' && options.value) { } else if (typeof options.value === 'object' && options.value) {
if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') { if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') {
unbindEvents(target); unbindEvents(target);
return; return;
} else { } else {
/* eslint-disable */
target.$_ptooltipValue = options.value.value; target.$_ptooltipValue = options.value.value;
target.$_ptooltipDisabled = !!options.value.disabled === options.value.disabled ? options.value.disabled : false; target.$_ptooltipDisabled = !!options.value.disabled === options.value.disabled ? options.value.disabled : false;
target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false; target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false;
target.$_ptooltipClass = options.value.class; target.$_ptooltipClass = options.value.class || '';
target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true; target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
target.$_ptooltipIdAttr = options.value.id || ''; target.$_ptooltipIdAttr = options.value.id || '';
target.$_ptooltipShowDelay = options.value.showDelay || 0; target.$_ptooltipShowDelay = options.value.showDelay || 0;
target.$_ptooltipHideDelay = options.value.hideDelay || 0; target.$_ptooltipHideDelay = options.value.hideDelay || 0;
target.$_ptooltipPTCss = options.value.pt && options.value.pt.css;
bindEvents(target); bindEvents(target);
} }
} }
if (options.instance.$primevue && options.instance.$primevue.config) {
target.$_ptooltipPTOptions = options.instance.$primevue.config.pt && options.instance.$primevue.config.pt.directives && options.instance.$primevue.config.pt.directives.tooltip;
}
} }
}; };