From WikiChip
Difference between revisions of "MediaWiki:Common.js"
(adding a floating scrollbar) |
|||
(7 intermediate revisions by the same user not shown) | |||
Line 210: | Line 210: | ||
− | /* | + | /* highlight/un-highlight comptable rows */ |
− | + | (function () { | |
− | + | $(".comptable tr").click(function() { | |
− | + | $(this).toggleClass("comptable-highlight", this.clicked); | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | }()); | |
− | |||
− | |||
− | |||
− | (function ( | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* jquery.rwdImageMaps.js | |
− | + | - https://github.com/stowball/jQuery-rwdImageMaps/blob/master/jquery.rwdImageMaps.js */ | |
− | + | ;(function($) { | |
− | + | $.fn.rwdImageMaps = function() { | |
− | + | var $img = this; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | var rwdImageMap = function() { | |
− | + | $img.each(function() { | |
− | + | if (typeof($(this).attr('usemap')) == 'undefined') | |
− | + | return; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | var that = this, | |
− | + | $that = $(that); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy | |
− | + | $('<img />').on('load', function() { | |
− | + | var attrW = 'width', | |
− | + | attrH = 'height', | |
− | + | w = $that.attr(attrW), | |
− | + | h = $that.attr(attrH); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | if (!w || !h) { | |
− | + | var temp = new Image(); | |
− | + | temp.src = $that.attr('src'); | |
− | + | if (!w) | |
− | + | w = temp.width; | |
− | + | if (!h) | |
− | + | h = temp.height; | |
− | + | } | |
− | |||
− | |||
− | + | var wPercent = $that.width()/100, | |
− | + | hPercent = $that.height()/100, | |
− | + | map = $that.attr('usemap').replace('#', ''), | |
− | + | c = 'coords'; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | $('map[name="' + map + '"]').find('area').each(function() { | ||
+ | var $this = $(this); | ||
+ | if (!$this.data(c)) | ||
+ | $this.data(c, $this.attr(c)); | ||
+ | var coords = $this.data(c).split(','), | ||
+ | coordsPercent = new Array(coords.length); | ||
+ | for (var i = 0; i < coordsPercent.length; ++i) { | ||
+ | if (i % 2 === 0) | ||
+ | coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent); | ||
+ | else | ||
+ | coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent); | ||
+ | } | ||
+ | $this.attr(c, coordsPercent.toString()); | ||
+ | }); | ||
+ | }).attr('src', $that.attr('src')); | ||
+ | }); | ||
+ | }; | ||
+ | $(window).resize(rwdImageMap).trigger('resize'); | ||
+ | return this; | ||
+ | }; | ||
+ | })(jQuery); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | $(function() { | + | $(document).ready(function(e) { |
− | + | $('img[usemap]').rwdImageMaps(); | |
}); | }); |
Latest revision as of 01:58, 13 September 2018
/**
* Dynamic Navigation Bars. See [[Wikipedia:NavFrame]]
*
* Based on script from en.wikipedia.org, 2008-09-15.
*
* @source www.mediawiki.org/wiki/MediaWiki:Gadget-NavFrame.js
* @maintainer Helder.wiki, 2012–2013
* @maintainer Krinkle, 2013
*/
( function () {
// Set up the words in your language
var collapseCaption = 'hide';
var expandCaption = 'show';
var navigationBarHide = '[' + collapseCaption + ']';
var navigationBarShow = '[' + expandCaption + ']';
/**
* Shows and hides content and picture (if available) of navigation bars.
*
* @param {number} indexNavigationBar The index of navigation bar to be toggled
* @param {jQuery.Event} e Event object
*/
function toggleNavigationBar( indexNavigationBar, e ) {
var navChild,
navToggle = document.getElementById( 'NavToggle' + indexNavigationBar ),
navFrame = document.getElementById( 'NavFrame' + indexNavigationBar );
// Prevent browser from jumping to href "#"
e.preventDefault();
if ( !navFrame || !navToggle ) {
return false;
}
// If shown now
if ( navToggle.firstChild.data == navigationBarHide ) {
for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
if ( hasClass( navChild, 'NavPic' ) ) {
navChild.style.display = 'none';
}
if ( hasClass( navChild, 'NavContent' ) ) {
navChild.style.display = 'none';
}
}
navToggle.firstChild.data = navigationBarShow;
// If hidden now
} else if ( navToggle.firstChild.data == navigationBarShow ) {
for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
navChild.style.display = 'block';
}
}
navToggle.firstChild.data = navigationBarHide;
}
}
/**
* Adds show/hide-button to navigation bars.
*
* @param {jQuery} $content
*/
function createNavigationBarToggleButton( $content ) {
var i, j, navFrame, navToggle, navToggleText, navChild,
indexNavigationBar = 0,
navFrames = $content.find( 'div.NavFrame' ).toArray();
// Iterate over all (new) nav frames
for ( i = 0; i < navFrames.length; i++ ) {
navFrame = navFrames[i];
// If found a navigation bar
indexNavigationBar++;
navToggle = document.createElement( 'a' );
navToggle.className = 'NavToggle';
navToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
navToggle.setAttribute( 'href', '#' );
$( navToggle ).on( 'click', $.proxy( toggleNavigationBar, null, indexNavigationBar ) );
navToggleText = document.createTextNode( navigationBarHide );
for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
if ( navChild.style.display == 'none' ) {
navToggleText = document.createTextNode( navigationBarShow );
break;
}
}
}
navToggle.appendChild( navToggleText );
// Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
for ( j = 0; j < navFrame.childNodes.length; j++ ) {
if ( $( navFrame.childNodes[j] ).hasClass( 'NavHead' ) ) {
navFrame.childNodes[j].appendChild( navToggle );
}
}
navFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
}
}
mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton );
}());
/**
* Collapsible tables
*
* @version 2.0.2 (2014-03-14)
* @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js
* @author [[User:R. Koot]]
* @author [[User:Krinkle]]
* @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which
* is supported in MediaWiki core.
*/
/*global $, mw */
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;
var i;
if ( Button.firstChild.data === collapseCaption ) {
for ( i = 1; i < Rows.length; i++ ) {
Rows[i].style.display = 'none';
}
Button.firstChild.data = expandCaption;
} else {
for ( i = 1; i < Rows.length; i++ ) {
Rows[i].style.display = Rows[0].style.display;
}
Button.firstChild.data = collapseCaption;
}
}
function createClickHandler( tableIndex ) {
return function ( e ) {
e.preventDefault();
collapseTable( tableIndex );
};
}
function createCollapseButtons() {
var tableIndex = 0;
var NavigationBoxes = {};
var Tables = document.getElementsByTagName( 'table' );
var i;
for ( i = 0; i < Tables.length; i++ ) {
if ( $( Tables[i] ).hasClass( '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 );
// TODO: Declare styles in [[MediaWiki:Gadget-collapsibleTables.css]]
// Button.className = 'collapseButton';
Button.style.styleFloat = 'right';
Button.style.cssFloat = 'right';
Button.style.fontWeight = 'normal';
Button.style.textAlign = 'right';
Button.style.width = '6em';
ButtonLink.style.color = Header.style.color;
ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
ButtonLink.setAttribute( 'href', '#' );
$( ButtonLink ).on( 'click', createClickHandler( tableIndex ) );
ButtonLink.appendChild( ButtonText );
Button.appendChild( document.createTextNode( '[' ) );
Button.appendChild( ButtonLink );
Button.appendChild( document.createTextNode( ']' ) );
Header.insertBefore( Button, Header.firstChild );
tableIndex++;
}
}
for ( i = 0; i < tableIndex; i++ ) {
if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) ||
( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) )
) {
collapseTable( i );
}
}
}
mw.hook( 'wikipage.content' ).add( createCollapseButtons );
/* highlight/un-highlight comptable rows */
(function () {
$(".comptable tr").click(function() {
$(this).toggleClass("comptable-highlight", this.clicked);
});
}());
/* jquery.rwdImageMaps.js
- https://github.com/stowball/jQuery-rwdImageMaps/blob/master/jquery.rwdImageMaps.js */
;(function($) {
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').on('load', function() {
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);
if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = temp.width;
if (!h)
h = temp.height;
}
var wPercent = $that.width()/100,
hPercent = $that.height()/100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function() {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
else
coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
}
$this.attr(c, coordsPercent.toString());
});
}).attr('src', $that.attr('src'));
});
};
$(window).resize(rwdImageMap).trigger('resize');
return this;
};
})(jQuery);
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});