http://morloch.shadowbaneemulator.com/index.php?action=history&feed=atom&title=MediaWiki%3ATooltips.js
MediaWiki:Tooltips.js - Revision history
2026-06-16T06:59:21Z
Revision history for this page on the wiki
MediaWiki 1.41.0
http://morloch.shadowbaneemulator.com/index.php?title=MediaWiki:Tooltips.js&diff=32788&oldid=prev
Rewen: Created page with "var tooltips = { debug: false, api: false, types: [], classes: ['basic-tooltip', 'advanced-tooltip'], advancedCounter: 1, events: [], timeouts:..."
2017-10-02T13:17:26Z
<p>Created page with "var tooltips = { debug: false, api: false, types: [], classes: ['basic-tooltip', 'advanced-tooltip'], advancedCounter: 1, events: [], timeouts:..."</p>
<p><b>New page</b></p><div>var tooltips = {<br />
debug: false,<br />
<br />
api: false,<br />
types: [],<br />
classes: ['basic-tooltip', 'advanced-tooltip'],<br />
advancedCounter: 1,<br />
<br />
events: [],<br />
timeouts: [],<br />
<br />
offsetX: 20,<br />
offsetY: 20,<br />
waitForImages: false,<br />
<br />
init: function() {<br />
if($(document.body).hasClass('mw-special-InfoboxBuilder')) return;<br />
if(location.search.search('ttdebug=true') != -1 || (typeof tooltips_debug != 'undefined' && tooltips_debug)) tooltips.debug = true;<br />
var href = $('link[rel="canonical"]').attr('href')<br />
if(typeof href == 'undefined' || !href) {<br />
console.log('Tooltips: script couldn\'t find required link[rel="canonical"] tag');<br />
tooltips.disabled = true;<br />
return false;<br />
}<br />
href = href.split('/wiki/');<br />
tooltips.api = href[0]+'/api.php?format=json&action=parse&disablepp=true&prop=text&title='+href[1];<br />
if(mw.util.getParamValue('uselang')) tooltips.api += '&uselang='+mw.util.getParamValue('uselang');<br />
tooltips.api += '&text=';<br />
<br />
tooltips.types['basic-tooltip'] = {};<br />
tooltips.types['advanced-tooltip'] = {};<br />
<br />
if(!tooltips.config()) {<br />
console.log('Tooltips: missing config');<br />
tooltips.disabled = true;<br />
return false;<br />
}<br />
<br />
var content = $('#WikiaMainContent')<br />
if(!content.length) content = $('#mw-content-text')<br />
<br />
if($('#tooltip-wrapper').length == 0) $('<div id="tooltip-wrapper" class="WikiaArticle"></div>').appendTo(document.body);<br />
if($('#tooltip-storage').length == 0) $('<div id="tooltip-storage" class="WikiaArticle"></div>').append('<div class="main-tooltip tt-basic-tooltip" id="tooltip-basic-tooltip">Lorem ipsum dolor sit amet</div>').appendTo(content);<br />
<br />
$('#tooltip-wrapper')<br />
.css({'margin':'0px','position':'fixed','height':'auto','min-height':'0','z-index': 6000000,'font-size':'14px'})<br />
.hide();<br />
<br />
$('#tooltip-storage')<br />
.css({'height':'0px','min-height':'0','visibility':'hidden','overflow':'hidden','position':'static','font-size':'14px'});<br />
<br />
<br />
$('#tooltip-basic-tooltip').data('type', 'basic-tooltip');<br />
<br />
tooltips.applyTooltips(document)<br />
<br />
mw.hook('wikipage.content').add(function(elem) {<br />
tooltips.applyTooltips($(elem));<br />
});<br />
<br />
if(typeof tooltips.events == 'string') tooltips.events = [tooltips.events]<br />
for(var x=0; x<tooltips.events.length; x++) { $(window).on(tooltips.events[x], function(ev, elem) { tooltips.applyTooltips(elem || this) }) }<br />
<br />
if(tooltips.debug) {<br />
$('#tooltip-wrapper').css({'background-color':'rgba(255,0,0,0.2)'})<br />
$('#tooltip-storage').css({'background-color':'rgba(0,255,0,0.2)','height':'500px','overflow-y':'scroll','visibility':'visible'})<br />
}<br />
},<br />
config: function() {<br />
if(typeof tooltips_list != 'undefined') {<br />
$(tooltips_list).each(function(i, v) { tooltips.addType(v) });<br />
}<br />
if(typeof tooltips_config == 'object') {<br />
tooltips.offsetX = tooltips_config.offsetX || tooltips.offsetX;<br />
tooltips.offsetY = tooltips_config.offsetY || tooltips.offsetY;<br />
tooltips.waitForImages = (tooltips_config.waitForImages || tooltips.waitForImages) && true;<br />
tooltips.events = tooltips_config.events || tooltips.events;<br />
}<br />
<br />
return true<br />
},<br />
applyTooltips: function(elem) {<br />
$(elem).find('.'+tooltips.classes.join(', .')).each(function() {<br />
$this = $(this)<br />
if($this.hasClass('tooltips-init-complete')) return;<br />
<br />
$this.find('*').removeAttr('title');<br />
$this.mouseover(tooltips.handlers.mouseOver);<br />
$this.mouseout(tooltips.handlers.mouseOut);<br />
$this.mousemove(tooltips.handlers.mouseMove);<br />
<br />
$this.data('tooltip-contents', $(this).attr('title'));<br />
$this.removeAttr('title');<br />
<br />
tooltips.advancedTooltip($this);<br />
<br />
$(this).addClass('tooltips-init-complete');<br />
});<br />
},<br />
advancedTooltip: function(elem) {<br />
elem = $(elem)<br />
if(!elem.hasClass('advanced-tooltip')) return;<br />
var tips = elem.find('.tooltip-contents')<br />
if(!tips.length) return;<br />
var tip = $('<div class="main-tooltip tt-advanced-tooltip"></div>').attr('id', 'tooltip-advanced-tooltip-'+tooltips.advancedCounter).appendTo('#tooltip-storage').data('type', 'advanced-tooltip').append($(tips[0]).contents()).each(tooltips.calcSize);<br />
tips.remove();<br />
elem.data('tooltip-id-advanced-tooltip', tooltips.advancedCounter);<br />
tooltips.advancedCounter++;<br />
},<br />
addType: function(tt) {<br />
if(typeof tooltips.types[tt.classname] == 'undefined') {<br />
var obj = {}<br />
<br />
if(typeof tt.parse == 'string' || typeof tt.parse == 'function') var parse = tt.parse; else var parse = false;<br />
if(typeof tt.text == 'string' || typeof tt.text == 'function') var text = tt.text; else var text = false;<br />
<br />
if(parse) {<br />
obj.text = parse;<br />
obj.parse = true;<br />
} else if(text) {<br />
obj.text = text;<br />
obj.parse = false;<br />
} else return;<br />
<br />
if(typeof obj.text == 'string') obj.parameters = tooltips.getParameters(obj.text); else obj.parameters = [];<br />
<br />
if(typeof tt.delay == 'string' || typeof tt.delay == 'number') obj.delay = parseInt(tt.delay); else obj.delay = false;<br />
if(typeof tt.onParsed == 'function') obj.onParsed = tt.onParsed;<br />
if(typeof tt.onShow == 'function') obj.onShow = tt.onShow;<br />
if(typeof tt.onHide == 'function') obj.onHide = tt.onHide;<br />
<br />
tooltips.types[tt.classname] = obj;<br />
if(tooltips.classes.indexOf(tt.classname) == -1) tooltips.classes.push(tt.classname)<br />
} else {<br />
if(typeof tt.delay == 'string' || typeof tt.delay == 'number') tooltips.types[tt.classname].delay = parseInt(tt.delay);<br />
if(typeof tt.onParsed == 'function') tooltips.types[tt.classname].onParsed = tt.onParsed;<br />
if(typeof tt.onShow == 'function') tooltips.types[tt.classname].onShow = tt.onShow;<br />
if(typeof tt.onHide == 'function') tooltips.types[tt.classname].onHide = tt.onHide;<br />
}<br />
},<br />
getParameters: function(text) {<br />
var list = []<br />
var matches = text.match(/<#\s*[a-z0-9_\-]+?\s*#>/gi)<br />
if(matches) {<br />
for(var x=0; x<matches.length; x++) {<br />
list.push(/<#\s*([a-z0-9_\-]+?)\s*#>/i.exec(matches[x])[1])<br />
}<br />
}<br />
return list<br />
},<br />
getAPI: function(text) {<br />
return tooltips.api+encodeURIComponent(text)<br />
},<br />
getText: function(type, elem) {<br />
if(typeof tooltips.types[type].text == 'function') {<br />
var text = tooltips.types[type].text($(elem)[0])<br />
} else {<br />
var text = tooltips.types[type].text<br />
for(var x=0; x<tooltips.types[type].parameters.length; x++) {<br />
var param = tooltips.types[type].parameters[x]<br />
var value = $(elem).data(param)<br />
if(typeof value == 'undefined') value = ''<br />
var rx = new RegExp('<#\\s*'+param.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")+'\\s*#>', 'g')<br />
text = text.replace(rx, value)<br />
}<br />
}<br />
return text<br />
},<br />
getTooltip: function(type, elem) {<br />
elem = $(elem)<br />
if(elem.data('tooltip-id-'+type)) return $('#tooltip-'+type+'-'+elem.data('tooltip-id-'+type))<br />
<br />
var text = tooltips.getText(type, elem)<br />
var id = tooltips.hash(text)<br />
elem.data('tooltip-id-'+type, id)<br />
<br />
var tip = $('#tooltip-'+type+'-'+elem.data('tooltip-id-'+type))<br />
if(tip.length) return tip;<br />
<br />
tip = $('<div class="main-tooltip"></div>').attr('id', 'tooltip-'+type+'-'+id).appendTo('#tooltip-storage').data('type', type).addClass('tt-'+type)<br />
<br />
tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1])<br />
tooltips.sameWidth()<br />
<br />
if(!tooltips.types[type].parse) {<br />
tip.html(text).each(tooltips.calcSize)<br />
tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1])<br />
tooltips.sameWidth()<br />
} else {<br />
tip.addClass('tooltip-loading')<br />
var api = tooltips.getAPI(text)<br />
if(tooltips.debug) tip.html('<pre style="padding:2px 3px;font-size:11px;">'+api+'</pre>')<br />
tip.attr('title', api)<br />
$.ajax({<br />
url: api,<br />
dataType: 'json',<br />
context: tip,<br />
success: function(data, textStatus, jqXHR) {<br />
$(this).html(data['parse']['text']['*']).each(tooltips.calcSize)<br />
tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1])<br />
tooltips.sameWidth()<br />
var images = $(this).find('img')<br />
images.fadeTo(0, 0).one('load', function() {<br />
if(tooltips.waitForImages) {<br />
$(this).fadeTo(0,1);<br />
$(this).addClass('image-loaded')<br />
tip = $(this).closest('.main-tooltip')<br />
if(tip.find('img').length == tip.find('img.image-loaded').length) {<br />
tip.removeClass('tooltip-loading').each(tooltips.calcSize)<br />
tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1])<br />
tooltips.sameWidth()<br />
}<br />
} else $(this).fadeTo(100,1);<br />
})<br />
if(tooltips.waitForImages) {<br />
if(images.length == 0) {<br />
$(this).removeClass('tooltip-loading').each(tooltips.calcSize)<br />
}<br />
} else {<br />
$(this).removeClass('tooltip-loading').each(tooltips.calcSize)<br />
}<br />
var type = $(this).data('type') || false<br />
if(type && typeof tooltips.types[type].onParsed == 'function') {<br />
tooltips.types[type].onParsed.call(this);<br />
tip.each(tooltips.calcSize)<br />
}<br />
if($(this).find('a.new').length > 0) $(this).addClass('has-redlinks')<br />
tooltips.wrapperPosition(tooltips.lastKnownMousePos[0], tooltips.lastKnownMousePos[1])<br />
tooltips.sameWidth()<br />
}<br />
});<br />
}<br />
return tip<br />
},<br />
getBasicTooltip: function(elem) {<br />
return $("#tooltip-basic-tooltip").html($(elem).data('tooltip-contents').replace(/\\n/g,'<br />')).each(tooltips.calcSize);<br />
},<br />
getAdvancedTooltip: function(elem) {<br />
return $("#tooltip-advanced-tooltip-"+$(elem).data('tooltip-id-advanced-tooltip'));<br />
},<br />
getTooltips: function(elem) {<br />
elem = $(elem)<br />
var classes = elem.attr('class').split(' ')<br />
var tips = []<br />
for(var i=0;i<classes.length;i++) {<br />
var tip = false;<br />
if(classes[i] == 'advanced-tooltip') tip = tooltips.getAdvancedTooltip(elem);<br />
else if(classes[i] == 'basic-tooltip') tip = tooltips.getBasicTooltip(elem);<br />
else if(typeof tooltips.types[classes[i]] != 'undefined') tip = tooltips.getTooltip(classes[i], elem);<br />
if(tip) tips.push(tip[0]);<br />
}<br />
return $(tips)<br />
},<br />
setOwnWidth: function() {<br />
$this = $(this)<br />
if(typeof $this.data('width') != 'undefined') $this.css('width', $this.data('width')+'px')<br />
else $this.css('width', '')<br />
},<br />
calcSize: function() {<br />
$this = $(this)<br />
$this.css('position', 'absolute')<br />
var temp = $this.css('width')<br />
$this.css('width', '')<br />
$this.data('width', parseFloat(window.getComputedStyle($this[0]).width));<br />
$this.data('height', parseFloat(window.getComputedStyle($this[0]).height));<br />
$this.data('outerwidth', $this.outerWidth(true));<br />
$this.data('outerheight', $this.outerHeight(true));<br />
$this.css('width', $this.data('width')+'px')<br />
$this.css('position', '')<br />
$this.css('width', temp)<br />
},<br />
sameWidth: function() {<br />
if($("#tooltip-wrapper").find('.main-tooltip').length == 1) {<br />
$("#tooltip-wrapper").find('.main-tooltip').each(tooltips.setOwnWidth)<br />
} else {<br />
var width = 0;<br />
$("#tooltip-wrapper").find('.main-tooltip').each(function() { width = Math.max(width, $(this).data('width') || 0); });<br />
$("#tooltip-wrapper").find('.main-tooltip').each(function() { $(this).css('width', width+'px'); });<br />
}<br />
},<br />
wrapperPosition: function(mouseX, mouseY) {<br />
var tipH = parseInt($("#tooltip-wrapper").css('padding-top')) + parseInt($("#tooltip-wrapper").css('padding-bottom'));<br />
var tipW = 0;<br />
<br />
$("#tooltip-wrapper").find('.main-tooltip').each( function(){ if(typeof $(this).data('outerheight') != 'undefined') tipH += $(this).data('outerheight'); });<br />
$("#tooltip-wrapper").find('.main-tooltip').each( function(){ if(typeof $(this).data('outerwidth') != 'undefined') tipW = Math.max(tipW, $(this).data('outerwidth') + parseInt($("#tooltip-wrapper").css('padding-left')) + parseInt($("#tooltip-wrapper").css('padding-right'))); });<br />
<br />
var coordX = tooltips.offsetX+mouseX;<br />
var coordY = tooltips.offsetY+mouseY;<br />
<br />
var toRight = $(window).width()-coordX;<br />
<br />
if ($("#tooltip-wrapper").css('position') == 'fixed') {<br />
coordX = coordX-$(window).scrollLeft();<br />
coordY = coordY-$(window).scrollTop();<br />
coordY = Math.min(coordY, $(window).height()-tipH-$('#WikiaBarWrapper').height());<br />
} else {<br />
coordY = Math.min(coordY, $(window).height()-tipH-$('#WikiaBarWrapper').height()+$(window).scrollTop());<br />
}<br />
if(toRight >= tipW) $("#tooltip-wrapper").css({left: coordX + 'px', top: coordY + 'px'});<br />
else $("#tooltip-wrapper").css({left: coordX-tipW-tooltips.offsetX*2 + 'px', top: coordY + 'px'});<br />
},<br />
handlers: {<br />
mouseOver: function(e) {<br />
tooltips.lastKnownMousePos = [e.pageX, e.pageY]<br />
tooltips.wrapperPosition(e.pageX, e.pageY)<br />
<br />
var tips = tooltips.getTooltips(this)<br />
$("#tooltip-wrapper").prepend(tips).show();<br />
tooltips.sameWidth()<br />
<br />
var handle = this<br />
tips.each(function() {<br />
var $this = $(this);<br />
var type = $(this).data('type') || false;<br />
<br />
$this.show();<br />
if(type && typeof tooltips.types[type] != 'undefined' && tooltips.types[type].delay) {<br />
$this.hide()<br />
tooltips.timeouts[$(this).attr('id')] = setTimeout(function(){<br />
$this.show();<br />
if(type && typeof tooltips.types[type].onShow == 'function') tooltips.types[type].onShow.call($this[0], handle);<br />
}, tooltips.types[type].delay)<br />
} else if(type && typeof tooltips.types[type].onShow == 'function') tooltips.types[type].onShow.call(this, handle);<br />
});<br />
},<br />
mouseOut: function(e) {<br />
tooltips.lastKnownMousePos = [e.pageX, e.pageY]<br />
tooltips.wrapperPosition(e.pageX, e.pageY)<br />
<br />
var handle = this<br />
$("#tooltip-wrapper").hide()<br />
$("#tooltip-wrapper").find('.main-tooltip').appendTo('#tooltip-storage').each(function() {<br />
var type = $(this).data('type') || false;<br />
if(type && typeof tooltips.types[type].onHide == 'function') tooltips.types[type].onHide.call(this, handle);<br />
$(this).show()<br />
clearTimeout(tooltips.timeouts[$(this).attr('id')])<br />
delete tooltips.timeouts[$(this).attr('id')]<br />
});<br />
},<br />
mouseMove: function(e) {<br />
tooltips.lastKnownMousePos = [e.pageX, e.pageY]<br />
tooltips.wrapperPosition(e.pageX, e.pageY)<br />
},<br />
},<br />
hash: function(text) {<br />
/* Source: http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/ */<br />
var hash = 0, i, char;<br />
if (text.length == 0) return hash;<br />
for (i = 0, l = text.length; i < l; i++) {<br />
char = text.charCodeAt(i);<br />
hash = ((hash<<5)-hash)+char;<br />
hash |= 0; // Convert to 32bit integer<br />
}<br />
return hash;<br />
},<br />
}<br />
$(tooltips.init);</div>
Rewen