Honkai: Nexus Anima Wiki

MediaWiki:Gadget-Tooltip.js: Difference between revisions

Browse history interactively
← Older edit

Kuhlau (talk | contribs)

2 user groups
347 edits
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
347 edits
No edit summary
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
347 edits
No edit summary
 
(One intermediate revision by the same user not shown)
Line 5: Line 5:


// Auto-positioning of floating tooltips, on desktop/hoverable only (maybe need to refine by skin so that it matches the css?)
// Auto-positioning of floating tooltips, on desktop/hoverable only (maybe need to refine by skin so that it matches the css?)
if (window.matchMedia('(hover: hover)').matches) {
mw.loader.using('oojs-ui-widgets').then(() => { // make sure the PopupWidget library is loaded
mw.loader.using('oojs-ui-widgets').then(() => { // make sure the PopupWidget library is loaded
const supportsHover = window.matchMedia('(hover: hover)').matches;
const supportsHover = window.matchMedia('(hover: hover)').matches;
mw.hook('wikipage.content').add((contents)=>{ // hydrate any content inserted
mw.hook('wikipage.content').add((contents)=>{ // hydrate any content inserted
if (contents instanceof Element || contents instanceof NodeList) {contents = $(contents);}
if (contents instanceof Element || contents instanceof NodeList) {contents = $(contents);}
if (!contents || !(contents instanceof jQuery) || contents.length===0) {return;}
if (!contents || !(contents instanceof jQuery) || contents.length===0) {return;}
contents
contents
.find('.custom-tt-wrapper.mw-collapsible')
.find('.custom-tt-wrapper.mw-collapsible')
.each((_, wrapper) => {
.each((_, wrapper) => {
const
const
$wrapper = $(wrapper),
$wrapper = $(wrapper),
// isEE = $wrapper.hasClass('hnaw-extra-effect-wrapper'), // If we ever need something similar to GIW's Extra Effect template
// isEE = $wrapper.hasClass('hnaw-extra-effect-wrapper'), // If we ever need something similar to GIW's Extra Effect template
$toggle = $('<span>', {
$toggle = $('<span>', {
'class': 'custom-tt toggle-tooltip',//+(isEE ? ' hnaw-extra-effect' : ''),
'class': 'custom-tt toggle-tooltip',//+(isEE ? ' hnaw-extra-effect' : ''),
html: $wrapper.find('.mw-collapsible-toggle').html()
html: $wrapper.find('.mw-collapsible-toggle').html()
}),
}),
$content = $wrapper.find('.mw-collapsible-content'),
$content = $wrapper.find('.mw-collapsible-content'),
popup = new OO.ui.PopupWidget({
popup = new OO.ui.PopupWidget({
$content: $('<div>', { html: $content.html() }),
$content: $('<div>', { html: $content.html() }),
$container: $('.mw-parser-output'),
$container: $('.mw-parser-output'),
anchor: true, // !isEE
anchor: true, // !isEE
});
});
// Remove default collapsible
// Remove default collapsible
$wrapper.toggleClass(['mw-collapsible', 'mw-made-collapsible', 'mw-collapsed'], false);
$wrapper.toggleClass(['mw-collapsible', 'mw-made-collapsible', 'mw-collapsed'], false);
$wrapper.find('.mw-collapsible-toggle').replaceWith($toggle);
$wrapper.find('.mw-collapsible-toggle').replaceWith($toggle);
$content.remove();
$content.remove();
// [[T:Tt]]'s toggle effect
// [[T:Tt]]'s toggle effect
$wrapper.append(popup.$element);
$wrapper.append(popup.$element);
$toggle.on('click', ()=> { popup.toggle() });
// T:Extra Effect's hover effect
// T:Extra Effect's hover effect
if (window.matchMedia('(hover: hover)').matches) {
let time;
let time;
$toggle.add(popup.$element).on('mouseover mouseout', (e) => {
$toggle.add(popup.$element).on('mouseover mouseout', (e) => {
Line 45: Line 46:
}, e.type==='mouseout' ? 250 : 0);
}, e.type==='mouseout' ? 250 : 0);
});
});
});
}
});
});
});
});
}
});
Retrieved from "https://hna.wiki/MediaWiki:Gadget-Tooltip.js"