MediaWiki:Gadget-Tooltip.js: Difference between revisions

mw.hook('wikipage.content').add(() => {
	// add class to body as hook for any further styling or detection
	document.body.classList.add('gadget-toggle-tooltip');
});

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