Banri at 17:36, 19 February 2020

2020-02-19T17:36:28Z

← Older revision		Revision as of 17:36, 19 February 2020
Line 120:		Line 120:
	// setup close button		// setup close button
	$close = $('<button>');		$close = $('<button>');
	$close.html('<img src="/images/b/b5/Close-x-white.~~svg~~" />')		$close.html('<img src="/images/2/2b/Close-x-white.png" />')
	.addClass('close js-tooltip-close')		.addClass('close js-tooltip-close')
	.click(function(){		.click(function(){

Banri: Created page with "// /* JavaScript tooltips usage: recommended usage: see Template:Tooltip and Template:Tooltip text, or Module:Tooltip for module interface raw..."

2020-02-19T16:48:26Z

Created page with "// <nowiki> /* JavaScript tooltips usage: recommended usage: see Template:Tooltip and Template:Tooltip text, or Module:Tooltip for module interface raw..."

New page

// <nowiki>
/* JavaScript tooltips
usage:

recommended usage: see [[Template:Tooltip]] and [[Template:Tooltip text]], or [[Module:Tooltip]] for module interface

raw usage:

Place this where you want the button to appear:
<span class="hidden js-tooltip-click" style="display:none;" data-tooltip-name="test">clickable</span>

place this elsewhere to define the content of the tooltip:
<div class="hidden js-tooltip-wrapper" style="display:none;" data-tooltip-for="test" data-tooltip-arrow="yes" data-tooltip-arrow-size="10" data-tooltip-style="custom style"><div class="js-tooltip-text">Content</div></div>

span.js-tooltip-click - required
attribute: data-tooltip-name - links to the corresponding divl; can have many with the same name
content: the clickable thing, defaults to ?

div.js-tooltip-wrapper - required
attributes:
data-tooltip-for - required; links this to spans with the data-tooltip-name equal to this
data-tooltip-arrow - optional; yes for arrow, no/default for no arrow
data-tooltip-arrow-size - optional; yes for arrow, no/default for no arrow
data-tooltip-style - optional; the width of the arrow (height=2width) in px; also defines the gap between the tooltip and the span. defaults to 10

content: div.js-tooltip-text

div.js-tooltip-text - required
contains: text/html to display inside tooltip

*/
(function ($) {
if (!($('.js-tooltip-wrapper').length && $('.js-tooltip-click').length)) {
return;
}

// every tooltip wrapper on the page considered separately

// remove excess tooltip wrappers for the same name - can cause issues
(function(){
var forarr = {}, forarrv, key, first;
$('.js-tooltip-wrapper').each(function(){
forarr[$(this).attr('data-tooltip-for')] = true;
});
for (key in forarr) {
first = $('.js-tooltip-wrapper[data-tooltip-for="'+key+'"]').first();
$('.js-tooltip-wrapper[data-tooltip-for="'+key+'"]').not(first).remove();
}
})();

$('.js-tooltip-wrapper').each(function () {
var $span,
$text,
$arrow,
$wrapper,
$close,
resizeEvent,
hasArrow = true,
arrpos,
style,
styles,
parsed_styles,
name,
size,
limitwidth = false,
$currspan = $(null);

// setup vars
$wrapper = $(this);
name = $wrapper.attr('data-tooltip-for');

if ($wrapper.attr('data-tooltip-arrow')) {
hasArrow = $wrapper.attr('data-tooltip-arrow').toLowerCase() == 'yes';
}
if ($wrapper.attr('data-tooltip-limit-width')) {
limitwidth = $wrapper.attr('data-tooltip-limit-width').toLowerCase() == 'yes';
}
style = $wrapper.attr('data-tooltip-style');
size = parseInt($wrapper.attr('data-tooltip-arrow-size'), 10);
if (typeof size !== 'number' || isNaN(size)) {
size = 10;
}

$text = $wrapper.find('.js-tooltip-text');

// setup wrapper css for movement
$wrapper.removeClass('hidden')
.on('js-tooltip-close', function () {
$wrapper.hide();
$currspan.removeAttr('data-is-currspan');
$currspan = $(null);
});

// setup span css
$span = $('span.js-tooltip-click[data-tooltip-name="' + name + '"]');
$span.removeClass('hidden')
.attr('title', 'Click for explanation, click again to close');
if ($span.html() === '') {
$span.text('?');
}

// setup arrow
$arrow = $('<div>');
$arrow.addClass('js-tooltip-arrow')
.css({
top: ($wrapper.outerHeight() * 0.3) + 'px',
left: ('-' + (size+2) + 'px'), // width of arrow + width of text div border
'margin-top': ('-' + (size/2) + 'px'),
'border-width': size + 'px', //actual width of the arrow
});
arrpos = '-' + (size+2) + 'px';

// easiest way to deal with arrow is to just not add it if it isn't specified
if (hasArrow) {
$wrapper.prepend($arrow);
}

// setup close button
$close = $('<button>');
$close.html('<img src="/images/b/b5/Close-x-white.svg" />')
.addClass('close js-tooltip-close')
.click(function(){
$wrapper.trigger('js-tooltip-close');
});
$text.prepend($close);

// setup resize event for repositioning tooltips
resizeEvent = function () {
if ($currspan.length === 0) {
return;
}
var offset, position, width, $body, $mwtext;
offset = $currspan.offset();
position = $currspan.position();
width = $currspan.outerWidth();
$body = $('body');
$mwtext = $('#mw-content-text');

$wrapper.css({
top: (offset.top - $wrapper.outerHeight()*0.3) + 'px',
});
$arrow.css({
top: ($wrapper.outerHeight() * 0.3) + 'px',
});

if ((!limitwidth && offset.left > 0.5 * $body.width())
|| (limitwidth && position.left > 0.5 * $mwtext.width())) {
$wrapper.css({
right: (($body.width() - offset.left) - 5 + size) + 'px',
left: '', // remove other pos to prevent overspecification
});
$arrow.removeClass('js-tooltip-arrow-pointleft').addClass('js-tooltip-arrow-pointright').css({
left: '', // remove other pos to prevent overspecification
right: arrpos,
'border-left-width': size + 'px',
'border-right-width': 0,
});
if (limitwidth) {
$wrapper.css({
'max-width': '500px',
});
}
} else {
$wrapper.css({
left: (offset.left + width - 5 + size) + 'px',
right: '', // remove other pos to prevent overspecification
});
$arrow.removeClass('js-tooltip-arrow-pointright').addClass('js-tooltip-arrow-pointleft').css({
right: '', // remove other pos to prevent overspecification
left: arrpos,
'border-right-width': size + 'px',
'border-left-width': 0,
});
if (limitwidth) {
$wrapper.css({
'max-width': '500px',
});
}
}
};

// attach resize event
$(window).resize(resizeEvent);

// attach click event to span
$span.click(function (event) {
//no bubbles
event.preventDefault();
event.stopPropagation();
$this = $(event.currentTarget);
if ($this.attr('data-is-currspan') == 'true') {
// if the current span is clicked while the popup is open, close the popup
$this.removeAttr('data-is-currspan');
$currspan = $(null);
$wrapper.trigger('js-tooltip-close');
} else {
// else move and show the currently open popup
$currspan = $this;
$('.js-tooltip-wrapper').not($wrapper).trigger('js-tooltip-close');
$this.attr('data-is-currspan', true);
$wrapper.show();
resizeEvent();
}
});

// add custom style
if (typeof style === 'string' && style !== '') {
styles = style.split(';');
styles_parsed = {};
styles.forEach(function(v) {
if (typeof v === 'string') {
var arr = v.split(':');
if (typeof arr[1] === 'string' && arr[1].trim() !== '') {
styles_parsed[arr[0].trim()] = arr[1].trim();
}
}
});
$wrapper.css(styles_parsed);
}

// finish up
$wrapper.hide();
$span.show();
$wrapper.appendTo($('body'));
});

// close tooltip if clicked outside of
$(document).click(function (event) {
if ($('.js-tooltip-wrapper:visible').length && !$(event.target).closest('.js-tooltip-wrapper, .js-tooltip-click').length) {
$('.js-tooltip-wrapper').trigger('js-tooltip-close');
}
});
})($);

MediaWiki:Gadget-tooltips.js - Revision history

Banri at 17:36, 19 February 2020

Banri: Created page with "// /* JavaScript tooltips usage: recommended usage: see Template:Tooltip and Template:Tooltip text, or Module:Tooltip for module interface raw..."