IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: introduces setup for d-popover (#16720)

Browse Source 
This new function get rids of previous showPopover/hidePopover API and is only a very thin wrapper around tippy with defaults for Discourse project
This commit is contained in:
Joffrey JAFFEUX 2022-05-11 16:32:31 +02:00 committed by GitHub
parent 5165fb638e
commit bc87c1bd5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/assets/javascripts/discourse/app/lib/d-popover.js
View File

@ -26,35 +26,18 @@ export const hideOnEscapePlugin = {
},
};
// legacy, shouldn't be needed with setup
export function hidePopover(event) {
if (event?.target?._tippy) {
showPopover(event);
}
}
// options accepts all tippy.js options as defined in their documentation
// https://atomiks.github.io/tippyjs/v6/all-props/
// legacy, setup() should be used
export function showPopover(event, options = {}) {
const tippyOptions = Object.assign(
{
arrow: iconHTML("tippy-rounded-arrow"),
content: options.textContent || options.htmlContent,
allowHTML: options?.htmlContent?.length,
trigger: "mouseenter click",
hideOnClick: true,
zIndex: 1400,
plugins: [hideOnEscapePlugin],
},
options
);
// legacy support
delete tippyOptions.textContent;
delete tippyOptions.htmlContent;
const instance = event.target._tippy
? event.target._tippy
: tippy(event.target, tippyOptions);
: setup(event.target, options);
// hangs on legacy ember
if (!isLegacyEmber) {
@ -70,3 +53,28 @@ export function showPopover(event, options = {}) {
instance.show();
}
}
// target is the element that triggers the display of the popover
// options accepts all tippy.js options as defined in their documentation
// https://atomiks.github.io/tippyjs/v6/all-props/
export default function setup(target, options) {
const tippyOptions = Object.assign(
{
arrow: iconHTML("tippy-rounded-arrow"),
content: options.textContent || options.htmlContent,
allowHTML: options?.htmlContent?.length,
trigger: "mouseenter click",
hideOnClick: true,
zIndex: 1400,
plugins: [hideOnEscapePlugin],
touch: ["hold", 500],
},
options
);
// legacy support
delete tippyOptions.textContent;
delete tippyOptions.htmlContent;
return tippy(target, tippyOptions);
}