MediaWiki:Common.js: Difference between revisions

From Dragon Quest Wiki
Jump to navigation Jump to search
(adding video accordion jQuery code)
(Removing jquery functions instead of just commenting them out)
 
(43 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) {
                        scroller = el.scroller||el;
                        if (pushed) {
                            scroller.scrollLeft -=
                                (- lastClientX + (lastClientX=e.clientX));
                            scroller.scrollTop -=
                                (- lastClientY + (lastClientY=e.clientY));
                        }
                    }, 0
                );
            })(dragged[i++]);
         }
         }
     }
     }
    for ( var i = 0;  i < tableIndex; i++ ) {
        if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
            collapseTable( i );
        }
        else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
            var element = NavigationBoxes[i];
            while (element = element.parentNode) {
                if ( hasClass( element, "outercollapse" ) ) {
                    collapseTable ( i );
                    break;
                }
            }
        }
    }
}
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 );


/***********************************************************
     exports.reset = reset;
*  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' );
/** End shared desktop + mobile view script **/
function accordionVideos()
{
  jQuery( "#accordion" ).accordion({ collapsible: true });
}
jQuery( accordionVideos );

Latest revision as of 03:58, 26 February 2022

/** 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. */

/***************************************
 * Name: hasClass
 * Description: Checks if a element has a specified class name.  Uses regular expressions and caching for better performance.
 * Maintainers (Wikipedia): [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
 * Source: Wikipedia Common.js, imported 2/1/10
 * Additional Notes: This is a utility method used in other methods.
 */
 
var hasClass = (function () {
    var reCache = {};
    return function (element, className) {
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
    };
})();

/***********************************************************
 *  Name: dragscroll
 *  Description: Scrolls a .dragscroll's contents when clicked and dragged.
 *  Additional Notes: https://github.com/asvd/dragscroll
 */
/**
 * @fileoverview dragscroll - scroll area by dragging
 * @version 0.0.5
 * 
 * @license MIT, see http://github.com/asvd/intence
 * @copyright 2015 asvd <heliosframework@gmail.com> 
 */


(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports'], factory);
    } else if (typeof exports !== 'undefined') {
        factory(exports);
    } else {
        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 = [];
    var reset = function(i, el) {
        for (i = 0; i < dragged.length;) {
            el = dragged[i++];
            el[removeEventListener](mousedown, el.md, 0);
            _window[removeEventListener](mouseup, el.mu, 0);
            _window[removeEventListener](mousemove, el.mm, 0);
        }

        dragged = _document.getElementsByClassName('dragscroll');
        for (i = 0; i < dragged.length;) {
            (function(el, lastClientX, lastClientY, pushed){
                el[addEventListener](
                    mousedown,
                    el.md = function(e) {
                        pushed = 1;
                        lastClientX = e.clientX;
                        lastClientY = e.clientY;

                        e.preventDefault();
                        e.stopPropagation();
                    }, 0
                );
                 
                 _window[addEventListener](
                     mouseup, el.mu = function() {pushed = 0;}, 0
                 );
                 
                _window[addEventListener](
                    mousemove,
                    el.mm = function(e, scroller) {
                        scroller = el.scroller||el;
                        if (pushed) {
                             scroller.scrollLeft -=
                                 (- lastClientX + (lastClientX=e.clientX));
                             scroller.scrollTop -=
                                 (- lastClientY + (lastClientY=e.clientY));
                        }
                    }, 0
                );
             })(dragged[i++]);
        }
    }

      
    if (_document.readyState == 'complete') {
        reset();
    } else {
        _window[addEventListener]('load', reset, 0);
    }

    exports.reset = reset;
}));

/** End shared desktop + mobile view script **/
Retrieved from "https://dragon-quest.org/w/index.php?title=MediaWiki:Common.js&oldid=170424"