Difference between revisions of "MediaWiki:Common.js"
From EVE University Wiki
(adding new hook for tooltip) |
m (under development) |
||
Line 99: | Line 99: | ||
**********************************************************/ | **********************************************************/ | ||
var _tooltipClassName = 'uniwiki-tooltip'; | var _tooltipClassName = 'uniwiki-tooltip'; | ||
+ | var _tooltipFrameClassName = 'uniwiki-tooltip-frame'; | ||
+ | var _activeTooltipIdx = -1; | ||
function checkElementByClassComp() { | function checkElementByClassComp() { | ||
if (document.getElementsByClassName == undefined) { | if (document.getElementsByClassName == undefined) { | ||
Line 119: | Line 121: | ||
function createTooltipTrigger() { | function createTooltipTrigger() { | ||
var tooltips = document.getElementsByClassName(_tooltipClassName); | var tooltips = document.getElementsByClassName(_tooltipClassName); | ||
− | for(var i=0;i<tooltips.length;i++) | + | for(var i=0;i<tooltips.length;i++) { |
− | |||
tooltips[i].setAttribute( 'id', 'tooltipidx-' + i ); | tooltips[i].setAttribute( 'id', 'tooltipidx-' + i ); | ||
+ | tooltips[i].setAttribute( 'onmouseout', 'showTooltip(' + i + ')' ); | ||
+ | tooltips[i].setAttribute( 'onmouseover', 'hideTooltip()'); | ||
+ | |||
+ | var matchFrameClassName = new RegExp("(?:^|\\s)" + _tooltipFrameClassName + "(?:$|\\s)"); | ||
+ | var innerTooltipEls = tooltips[i].getElementsByTagName('*'); | ||
+ | for(var j=0;(innerEl = innerTooltipEls[j]) != null;j++) { | ||
+ | if(innerEl && innerEl.indexOf(_tooltipFrameClassName) != -1 && matchFrameClassName.test(innerEl.className)) { | ||
+ | tooltips[i].setAttribute( 'id', 'tooltipframeidx-' + i ); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function tooltipMouseHandler(e) { | ||
+ | if (!e){ e = window.event; } | ||
+ | mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; | ||
+ | mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; | ||
+ | moveTooltip(mouseX, mouseY); | ||
+ | } | ||
+ | function moveTooltip(x, y) { | ||
+ | if(_activeTooltipIdx != -1) { | ||
+ | document.getElementById('tooltipidx' + _activeTooltipIdx).style.left = x + 15 + 'px'; | ||
+ | document.getElementById('tooltipidx' + _activeTooltipIdx).style.top = y + 'px'; | ||
} | } | ||
+ | return false; | ||
+ | } | ||
+ | function showTooltip(id) { | ||
+ | document.onmousemove = tooltipMouseHandler; | ||
+ | _activeTooltipIdx = id; | ||
+ | document.getElementById( 'tooltipidx-' + i ).style.display = 'block'; | ||
} | } | ||
+ | function hideTooltip() { | ||
+ | document.getElementsByClassName(_tooltipClassName).style.display = 'none'; | ||
+ | _activeTooltipIdx = -1; | ||
+ | document.onmousemove = null; | ||
+ | } | ||
addOnloadHook(checkElementByClassComp); | addOnloadHook(checkElementByClassComp); | ||
addOnloadHook(createTooltipTrigger); | addOnloadHook(createTooltipTrigger); |
Revision as of 11:17, 1 November 2011
/* Any JavaScript here will be loaded for all users on every page load. */ /** Collapsible tables ********************************************************* * * Description: Allows tables to be collapsed, showing only the header. See * http://www.mediawiki.org/wiki/Manual:Collapsible_tables. * Maintainers: [[**MAINTAINERS**]] */ var autoCollapse = 2; var collapseCaption = 'hide'; var expandCaption = 'show'; function collapseTable( tableIndex ) { var Button = document.getElementById( 'collapseButton' + tableIndex ); var Table = document.getElementById( 'collapsibleTable' + tableIndex ); if ( !Table || !Button ) { return false; } var Rows = Table.rows; if ( Button.firstChild.data == collapseCaption ) { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = 'none'; } Button.firstChild.data = expandCaption; } else { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = Rows[0].style.display; } Button.firstChild.data = collapseCaption; } } function createCollapseButtons() { var tableIndex = 0; var NavigationBoxes = new Object(); var Tables = document.getElementsByTagName( 'table' ); for ( var i = 0; i < Tables.length; i++ ) { if ( hasClass( Tables[i], 'collapsible' ) ) { /* only add button and increment count if there is a header row to work with */ var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0]; if( !HeaderRow ) continue; var Header = HeaderRow.getElementsByTagName( 'th' )[0]; if( !Header ) continue; NavigationBoxes[tableIndex] = Tables[i]; Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex ); var Button = document.createElement( 'span' ); var ButtonLink = document.createElement( 'a' ); var ButtonText = document.createTextNode( collapseCaption ); Button.className = 'collapseButton'; // Styles are declared in MediaWiki:Common.css ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex ); ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" ); ButtonLink.appendChild( ButtonText ); Button.appendChild( document.createTextNode( '[' ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( ']' ) ); Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; } } for ( var i = 0; i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], 'collapsed' ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], 'autocollapse' ) ) ) { collapseTable( i ); } } } addOnloadHook( createCollapseButtons ); /** Test if an element has a certain class ************************************** * * Description: Uses regular expressions and caching for better performance. * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]] */ var hasClass = (function() { var reCache = {}; return function( element, className ) { return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); }; })(); /** Eve University Tooltip ********************************************************* * * Description: Allows easy use of auto-generated tooltip * http://wiki.eveuniversity.org/Template:Tooltip * Maintainers: Sarah Schneider **********************************************************/ var _tooltipClassName = 'uniwiki-tooltip'; var _tooltipFrameClassName = 'uniwiki-tooltip-frame'; var _activeTooltipIdx = -1; function checkElementByClassComp() { if (document.getElementsByClassName == undefined) { document.getElementsByClassName = function(className) { var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); var allElements = document.getElementsByTagName("*"); var results = []; var element; for (var i = 0; (element = allElements[i]) != null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) results.push(element); } return results; } } } function createTooltipTrigger() { var tooltips = document.getElementsByClassName(_tooltipClassName); for(var i=0;i<tooltips.length;i++) { tooltips[i].setAttribute( 'id', 'tooltipidx-' + i ); tooltips[i].setAttribute( 'onmouseout', 'showTooltip(' + i + ')' ); tooltips[i].setAttribute( 'onmouseover', 'hideTooltip()'); var matchFrameClassName = new RegExp("(?:^|\\s)" + _tooltipFrameClassName + "(?:$|\\s)"); var innerTooltipEls = tooltips[i].getElementsByTagName('*'); for(var j=0;(innerEl = innerTooltipEls[j]) != null;j++) { if(innerEl && innerEl.indexOf(_tooltipFrameClassName) != -1 && matchFrameClassName.test(innerEl.className)) { tooltips[i].setAttribute( 'id', 'tooltipframeidx-' + i ); } } } } function tooltipMouseHandler(e) { if (!e){ e = window.event; } mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; moveTooltip(mouseX, mouseY); } function moveTooltip(x, y) { if(_activeTooltipIdx != -1) { document.getElementById('tooltipidx' + _activeTooltipIdx).style.left = x + 15 + 'px'; document.getElementById('tooltipidx' + _activeTooltipIdx).style.top = y + 'px'; } return false; } function showTooltip(id) { document.onmousemove = tooltipMouseHandler; _activeTooltipIdx = id; document.getElementById( 'tooltipidx-' + i ).style.display = 'block'; } function hideTooltip() { document.getElementsByClassName(_tooltipClassName).style.display = 'none'; _activeTooltipIdx = -1; document.onmousemove = null; } addOnloadHook(checkElementByClassComp); addOnloadHook(createTooltipTrigger);