|
|
| (39 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /** Begin shared desktop + mobile view script **/ |
| | |
| | /* Make sure any changes are copied to MediaWiki:Mobile.js and vice versa. */ |
| | /* Any JavaScript here will be loaded in desktop and mobile view skins on every page load. */ |
| | |
| | /* Any JavaScript here will be loaded in both desktop view and mobile view skins on every page load. */ |
|
| |
|
| /*************************************** | | /*************************************** |
| Line 15: |
Line 20: |
| }; | | }; |
| })(); | | })(); |
|
| | |
| /*********************************************************** | | /*********************************************************** |
| * Name: collapseTable | | * Name: dragscroll |
| * Description: Collapses a single table, showing only the header. | | * Description: Scrolls a .dragscroll's contents when clicked and dragged. |
| * Maintainers: (Wikipedia) [[User:R. Koot]], (Dragon Quest Wiki) [[User:FlyingRagnar]] | | * Additional Notes: https://github.com/asvd/dragscroll |
| * Source: Wikipedia Common.js, imported 2/1/10
| |
| * Additional Notes: This is the primary method used to collapse navigational templates.
| |
| * This code has been updated to use the jQuery toggle() function. Various effects were tested, but due
| |
| * to the fact that multiple <tr>s are being toggled, they did not look good. As a result, it does just a basic toggle
| |
| * with no effects.
| |
| */ | | */ |
| mw.loader.load( 'jquery.effects.core' );
| | /** |
| var autoCollapse = 2;
| | * @fileoverview dragscroll - scroll area by dragging |
| var collapseCaption = "hide";
| | * @version 0.0.5 |
| var expandCaption = "show";
| | * |
| function collapseTable( tableIndex ) | | * @license MIT, see http://github.com/asvd/intence |
| { | | * @copyright 2015 asvd <heliosframework@gmail.com> |
| var Button = document.getElementById( "collapseButton" + tableIndex ); | | */ |
| var Table = document.getElementById( "collapsibleTable" + tableIndex );
| | |
|
| | |
| if ( !Table || !Button ) {
| | (function (root, factory) { |
| return false; | | if (typeof define === 'function' && define.amd) { |
| }
| | define(['exports'], factory); |
|
| | } else if (typeof exports !== 'undefined') { |
| var targt = "#collapsibleTable" + tableIndex + " tr";
| | factory(exports); |
| $( targt + ":first-child").addClass("master");
| |
| $( targt + ":not(.master)").toggle();
| |
|
| |
| if ( Button.firstChild.data == collapseCaption ) { | |
| Button.firstChild.data = expandCaption; | |
| } else { | | } else { |
| Button.firstChild.data = collapseCaption; | | factory((root.dragscroll = {})); |
| } | | } |
| } | | }(this, function (exports) { |
| | var _window = window; |
| | var _document = document; |
| | var mousemove = 'mousemove'; |
| | var mouseup = 'mouseup'; |
| | var mousedown = 'mousedown'; |
| | var EventListener = 'EventListener'; |
| | var addEventListener = 'add'+EventListener; |
| | var removeEventListener = 'remove'+EventListener; |
|
| |
|
| /***********************************************************
| | var dragged = []; |
| * Name: createTableCollapseButtons
| | var reset = function(i, el) { |
| * Description: Runs at page load, finds each table with class collapsible and inserts the necessary
| | for (i = 0; i < dragged.length;) { |
| * elements to make the table have collapsible functionality. The actual collapsing is then handled
| | el = dragged[i++]; |
| * by the collapseTable function.
| | el[removeEventListener](mousedown, el.md, 0); |
| * Maintainers: (Wikipedia) [[User:R. Koot]], (Dragon Quest Wiki) [[User:FlyingRagnar]]
| | _window[removeEventListener](mouseup, el.mu, 0); |
| * Source: Wikipedia Common.js, imported 2/1/10
| | _window[removeEventListener](mousemove, el.mm, 0); |
| * Additional Notes: This method sets up the collapsing functionality. Dragon Quest wiki does not currently use the 'innercollapse', 'outercollapse', or 'autocollapse'
| | } |
| * functionality. It is generally preferred to allow tables to size themselves rather than specify a fixed width.
| |
| * Usage: Create a table and give it the class "collapsible". Ensure that the table has a header row. Add the class
| |
| * "collapsed" if you wish the table to be collapsed on page load.
| |
| */
| |
| function createTableCollapseButtons()
| |
| {
| |
| 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 Common.css
| |
|
| |
|
| ButtonLink.style.color = Header.style.color;
| | dragged = _document.getElementsByClassName('dragscroll'); |
| ButtonLink.setAttribute( "id", "collapseButton" + tableIndex ); | | for (i = 0; i < dragged.length;) { |
| ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
| | (function(el, lastClientX, lastClientY, pushed){ |
| ButtonLink.appendChild( ButtonText );
| | el[addEventListener]( |
| | mousedown, |
| | el.md = function(e) { |
| | pushed = 1; |
| | lastClientX = e.clientX; |
| | lastClientY = e.clientY; |
|
| |
|
| // fix width of table to be the same when shown or hidden (IE only)
| | e.preventDefault(); |
| // Tables[i].style.width = Tables[i].offsetWidth;
| | e.stopPropagation(); |
|
| | }, 0 |
| Button.appendChild( document.createTextNode( "[" ) );
| | ); |
| Button.appendChild( ButtonLink );
| | |
| Button.appendChild( document.createTextNode( "]" ) );
| | _window[addEventListener]( |
|
| | mouseup, el.mu = function() {pushed = 0;}, 0 |
| Header.insertBefore( Button, Header.childNodes[0] );
| | ); |
| tableIndex++;
| | |
| }
| | _window[addEventListener]( |
| }
| | mousemove, |
|
| | el.mm = function(e, scroller) { |
| for ( var i = 0; i < tableIndex; i++ ) {
| | scroller = el.scroller||el; |
| if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
| | if (pushed) { |
| collapseTable( i );
| | scroller.scrollLeft -= |
| }
| | (- lastClientX + (lastClientX=e.clientX)); |
| else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
| | scroller.scrollTop -= |
| var element = NavigationBoxes[i];
| | (- lastClientY + (lastClientY=e.clientY)); |
| while (element = element.parentNode) {
| | } |
| if ( hasClass( element, "outercollapse" ) ) {
| | }, 0 |
| collapseTable ( i );
| | ); |
| break; | | })(dragged[i++]); |
| } | |
| }
| |
| } | | } |
| } | | } |
| }
| |
|
| |
| addOnloadHook( createTableCollapseButtons );
| |
|
| |
| /***********************************************************
| |
| * Name: collapseSpoiler
| |
| * Description: Toggles a spoiler for display on a page.
| |
| * Maintainers: [[User:FlyingRagnar]]
| |
| * Additional Notes: Similar to collapseTable, this function toggles spoilers
| |
| * for display. The jQuery blind effect is used when they are toggled.
| |
| */
| |
| mw.loader.load( 'jquery.effects.blind' );
| |
| mw.loader.load( 'jquery.ui.button' );
| |
| var collapseSpoilerCaption = "Hide spoilers";
| |
| var expandSpoilerCaption = "Show spoilers";
| |
| function collapseSpoiler( spoilerIndex )
| |
| {
| |
| var Button = document.getElementById( "collapseSpoilerButton" + spoilerIndex );
| |
| var Div = document.getElementById( "collapsibleSpoiler" + spoilerIndex );
| |
|
| |
| if ( !Div || !Button ) {
| |
| return false;
| |
| }
| |
|
| |
| var options = {};
| |
| var targt = "#collapsibleSpoiler" + spoilerIndex;
| |
| $( targt ).toggle("blind", options, 500);
| |
|
| |
|
| if ( Button.firstChild.innerHTML == collapseSpoilerCaption ) { | | |
| Button.firstChild.innerHTML = expandSpoilerCaption; | | if (_document.readyState == 'complete') { |
| | reset(); |
| } else { | | } else { |
| Button.firstChild.innerHTML = collapseSpoilerCaption; | | _window[addEventListener]('load', reset, 0); |
| }
| |
| }
| |
| | |
| /***********************************************************
| |
| * Name: createSpoilerCollapseButtons
| |
| * Description: Runs on page load, adds functionality to toggle spoilers
| |
| * Maintainers: [[User:FlyingRagnar]]
| |
| * Additional Notes: Works very similar to createTableCollapseButtons.
| |
| * Uses a jQuery button to trigger the toggle of spoilers. All spoilers
| |
| * are hidden by default when a page loads.
| |
| */
| |
| function createSpoilerCollapseButtons()
| |
| {
| |
| var spoilerIndex = 0;
| |
| var Spoilers = document.getElementsByTagName( "div" );
| |
| | |
| // These methods don't work in IE
| |
| //var SpoilerHeaders = document.getElementsByClassName( "spoilerstart" );
| |
| //var Spoilers = document.getElementsByClassName( "spoiler" );
| |
|
| |
| for ( var i = 0; i < Spoilers.length; i++ ) {
| |
| if ( hasClass( Spoilers[i], "spoiler" ) ) {
| |
| Spoilers[i].setAttribute( "id", "collapsibleSpoiler" + spoilerIndex );
| |
| spoilerIndex++;
| |
| } else if ( hasClass ( Spoilers[i], "spoilerstart" ) ) {
| |
| var Button = document.createElement( "button" );
| |
| var ButtonText = document.createTextNode( collapseSpoilerCaption );
| |
|
| |
| Button.setAttribute( "id", "collapseSpoilerButton" + spoilerIndex );
| |
| Button.setAttribute( "onclick", "collapseSpoiler(" + spoilerIndex + ");" );
| |
| Button.appendChild( ButtonText );
| |
|
| |
| // fix width of table to be the same when shown or hidden (IE only)
| |
| // Tables[i].style.width = Tables[i].offsetWidth;
| |
|
| |
| Spoilers[i].insertBefore( Button, Spoilers[i].childNodes[0] );
| |
| $( "button", ".spoilerstart" ).button();
| |
| // Apparently button() is not supported on IE7 or earlier. Oh well.
| |
|
| |
| }
| |
| }
| |
|
| |
| for ( var i = 0; i < spoilerIndex; i++ ) {
| |
| collapseSpoiler( i );
| |
| }
| |
| }
| |
|
| |
| addOnloadHook( createSpoilerCollapseButtons );
| |
| | |
| /***********************************************************
| |
| * Name: createJQueryTabs
| |
| * Description: Runs at page load, inserts jQuery tabs into a page wherever a <div> with class "tabs" is found.
| |
| * Maintainers: [[User:FlyingRagnar]]
| |
| * Additional Notes: This function effectively replaces the Tabber extension which was
| |
| * previously used to insert tabs into a page. The template [[Template:VersionTabs]] is
| |
| * the primary method to use when inserting jQuery tabs into a page. It is tightly
| |
| * coupled to this function.
| |
| */
| |
| mw.loader.load( 'jquery.ui.tabs' );
| |
| function createJQueryTabs()
| |
| {
| |
| var tabGroup = 0;
| |
| var Tabs = document.getElementsByTagName( "div" );
| |
|
| |
| for ( var i = 0; i < Tabs.length; i++ ) {
| |
| if ( hasClass( Tabs[i], "tabs" ) ) {
| |
|
| |
| Tabs[i].setAttribute("id", "tabs" + tabGroup);
| |
| | |
| var children = Tabs[i].childNodes;
| |
| var h = 0;
| |
| for( var j = 0; j < children.length; j++ ) {
| |
| if ( children[j].nodeName == "UL" ) {
| |
| var Tlinks = children[j].getElementsByTagName( "a" );
| |
| for( var k = h; k < Tlinks.length; k++ ) {
| |
| Tlinks[k].setAttribute("href", "#tabs" + tabGroup + "-" + (k+1));
| |
| }
| |
| } else if ( children[j].nodeName == "DIV" ) {
| |
| children[j].setAttribute("id", "tabs" + tabGroup + "-" + (h+1));
| |
| h++;
| |
| }
| |
| }
| |
| // apply the jQuery code to take effect
| |
| jQuery( "#tabs" + tabGroup ).tabs({ /*event: "mouseover"*/ });
| |
| tabGroup++;
| |
| }
| |
| } | | } |
| }
| |
| jQuery( createJQueryTabs );
| |
|
| |
|
| mw.loader.load( 'jquery.ui.accordion' );
| | exports.reset = reset; |
| function accordionVideos()
| | })); |
| {
| |
| jQuery( "#accordion" ).accordion({ collapsible: true, active: false });
| |
| }
| |
| jQuery( accordionVideos );
| |
|
| |
|
| mw.loader.load( 'jquery.clickmenu' );
| | /** End shared desktop + mobile view script **/ |
| function activateClickMenu()
| |
| {
| |
| $( "#list" ).clickMenu();
| |
| }
| |
| $( activateClickMenu );
| |