composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-21 17:48:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Tooltip: Move new wrappers from CombodoBackofficeToolbox into CombodoGlobalToolbox so it can be used in any GUIs

Browse Source
This commit is contained in:
Molkobain
2020-10-20 18:08:02 +02:00
parent a6ea75f5fe
commit 91ee5ebfeb
3 changed files with 78 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
js/pages/backoffice/toolbox.js
View File

@@ -60,81 +60,17 @@ function SwitchTabMode()
/**
* A toolbox for common JS operations in the backoffice. Meant to be used by Combodo developers and the community.
* @type {{InitTooltipFromMarkup: CombodoBackofficeToolbox.InitTooltipFromMarkup}}
* @api
* @since 3.0.0
*/
const CombodoBackofficeToolbox = {
// Instanciate tooltips (abstraction layer between iTop markup and tooltip plugin to ease its replacement in the future)
/**
* Instanciate a tooltip on oElem from its data attributes
*
* Note: Content SHOULD be HTML entity encoded to avoid markup breaks (eg. when using a double quote in a sentence)
*
* @param oElem
* @constructor
*/
InitTooltipFromMarkup: function(oElem)
{
const oOptions = {
allowHTML: true, // Always true so line breaks can work. Don't worry content will be sanitized.
};
// Content must be reworked before getting into the tooltip
// - Should we enable HTML content or keep text as is
const bEnableHTML = oElem.attr('data-tooltip-html-enabled') === 'true';
// - Content should be sanitized unless the developer says otherwise
// Note: Condition is inversed on purpose. When the developer is instanciating a tooltip,
// we want him/her to explicitly declare that he/she wants the sanitizer to be skipped.
// Whereas in this code, it's easier to follow the logic with the variable oriented this way.
const bSanitizeContent = oElem.attr('data-tooltip-sanitizer-skipped') !== 'true';
// - Sanitize content and make sure line breaks are kept
const oTmpContentElem = $('<div />').html(oElem.attr('data-tooltip-content'));
let sContent = '';
if(bEnableHTML)
{
sContent = oTmpContentElem.html();
if(bSanitizeContent)
{
sContent = sContent.replace(/<script/g, '&lt;script WARNING: scripts are not allowed in tooltips');
}
}
else
{
sContent = oTmpContentElem.text();
sContent = sContent.replace(/(\r\n|\n\r|\r|\n)/g, '<br/>');
}
oOptions['content'] = sContent;
oOptions['placement'] = oElem.attr('data-tooltip-placement') ?? 'top';
oOptions['trigger'] = oElem.attr('data-tooltip-trigger') ?? 'mouseenter focus';
const sShiftingOffset = oElem.attr('data-tooltip-shifting-offset');
const sDistanceOffset = oElem.attr('data-tooltip-distance-offset');
oOptions['offset'] = [
(sShiftingOffset === undefined) ? 0 : parseInt(sShiftingOffset),
(sDistanceOffset === undefined) ? 10 : parseInt(sDistanceOffset),
];
oOptions['animation'] = oElem.attr('data-tooltip-animation') ?? 'shift-away-subtle';
const sShowDelay = oElem.attr('data-tooltip-show-delay');
const sHideDelay = oElem.attr('data-tooltip-hide-delay');
oOptions['delay'] = [
(typeof sShowDelay === 'undefined') ? 200 : parseInt(sShowDelay),
(typeof sHideDelay === 'undefined') ? null : parseInt(sHideDelay),
];
tippy(oElem[0], oOptions);
}
};
// Processing
$(document).ready(function(){
// Enable tooltips based on existing HTML markup, won't work on markup added dynamically after DOM ready (AJAX, ...)
$('[data-tooltip-content]').each(function(){
CombodoBackofficeToolbox.InitTooltipFromMarkup($(this));
CombodoGlobalToolbox.InitTooltipFromMarkup($(this));
});
});

77
js/utils.js
View File

@@ -796,4 +796,79 @@ Dict.Format = function () {
var args = Array.from(arguments);
args[0] = Dict.S(arguments[0]);
return Format(args);
}
}
/**
* A toolbox for common JS operations accross the app no matter the GUI. Meant to be used by Combodo developers and the community.
*
* Note: All functions like those above should be moved in the corresponding toolbox to avoid name collision with other libs and scripts.
*
* @api
* @since 3.0.0
*/
const CombodoGlobalToolbox = {
// Instanciate tooltips (abstraction layer between iTop markup and tooltip plugin to ease its replacement in the future)
/**
* Instanciate a tooltip on oElem from its data attributes
*
* Note: Content SHOULD be HTML entity encoded to avoid markup breaks (eg. when using a double quote in a sentence)
*
* @param oElem
* @constructor
*/
InitTooltipFromMarkup: function(oElem)
{
const oOptions = {
allowHTML: true, // Always true so line breaks can work. Don't worry content will be sanitized.
};
// Content must be reworked before getting into the tooltip
// - Should we enable HTML content or keep text as is
const bEnableHTML = oElem.attr('data-tooltip-html-enabled') === 'true';
// - Content should be sanitized unless the developer says otherwise
// Note: Condition is inversed on purpose. When the developer is instanciating a tooltip,
// we want him/her to explicitly declare that he/she wants the sanitizer to be skipped.
// Whereas in this code, it's easier to follow the logic with the variable oriented this way.
const bSanitizeContent = oElem.attr('data-tooltip-sanitizer-skipped') !== 'true';
// - Sanitize content and make sure line breaks are kept
const oTmpContentElem = $('<div />').html(oElem.attr('data-tooltip-content'));
let sContent = '';
if(bEnableHTML)
{
sContent = oTmpContentElem.html();
if(bSanitizeContent)
{
sContent = sContent.replace(/<script/g, '&lt;script WARNING: scripts are not allowed in tooltips');
}
}
else
{
sContent = oTmpContentElem.text();
sContent = sContent.replace(/(\r\n|\n\r|\r|\n)/g, '<br/>');
}
oOptions['content'] = sContent;
oOptions['placement'] = oElem.attr('data-tooltip-placement') ?? 'top';
oOptions['trigger'] = oElem.attr('data-tooltip-trigger') ?? 'mouseenter focus';
const sShiftingOffset = oElem.attr('data-tooltip-shifting-offset');
const sDistanceOffset = oElem.attr('data-tooltip-distance-offset');
oOptions['offset'] = [
(sShiftingOffset === undefined) ? 0 : parseInt(sShiftingOffset),
(sDistanceOffset === undefined) ? 10 : parseInt(sDistanceOffset),
];
oOptions['animation'] = oElem.attr('data-tooltip-animation') ?? 'shift-away-subtle';
const sShowDelay = oElem.attr('data-tooltip-show-delay');
const sHideDelay = oElem.attr('data-tooltip-hide-delay');
oOptions['delay'] = [
(typeof sShowDelay === 'undefined') ? 200 : parseInt(sShowDelay),
(typeof sHideDelay === 'undefined') ? null : parseInt(sHideDelay),
];
tippy(oElem[0], oOptions);
}
};

2
sources/application/WebPage/iTopWebPage.php
View File

@@ -319,7 +319,7 @@ JS
JS
);
// TODO 3.0.0: Change CSS class and extract this in backoffice.js
// TODO 3.0.0: Change CSS class and extract this in backoffice/toolbox.js
// Highlight code content created with CKEditor
$this->add_ready_script(
<<<JS