User:Rigel Kent/mobile.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/** Begin shared desktop + mobile view script **/

/* Make sure any changes are copied to MediaWiki:Common.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: 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( "li" );
                  for( var k = h; k < Tlinks.length; k++ ) {
                     Tlinks[k].innerHTML = '<a href="#tabs' + tabGroup + '-' + (k+1) + '">' + Tlinks[k].innerHTML + '</a>';
                  }
               } 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++;
        }
    }
} 

/***********************************************************
 *  Name: accordionVideos
 *  Description: Runs at page load, inserts jQuery accordion into a page wherever a <div> with class "accordion" is found.
 *  Maintainers: [[User:FlyingRagnar]]
 *  Additional Notes: This function is currently used for displaying videos within wiki pages in a "one at a time" manner.
 */
mw.loader.load( 'jquery.ui.accordion' );
function accordionVideos()
{
   jQuery( "#accordion" ).accordion({ collapsible: true, active: false });
} 

// after the page has loaded, add the tab and accordion formatting
jQuery( document ).ready( function( $ ) {
        // ensure that the resource modules are used as dependencies so they are fully loaded in time
        mw.loader.using( 'jquery.ui.tabs', function() {createJQueryTabs();} );
        mw.loader.using( 'jquery.ui.accordion', function() {accordionVideos();} );
} );

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

/* Any JavaScript below will be loaded in mobile view skins only on every page load. */

/* Load and run makeCollapsible module like desktop skins */
mw.loader.using( 'jquery.makeCollapsible', function () {
    $( function () { 
        $( '.content' ).find( '.mw-collapsible' ).makeCollapsible();
    } );
} );

/* Override mobile image max-width inside .dragscroll elements, if scripts are enabled */
$( function () {
    $( '.content' ).find( '.dragscroll' ).find( 'img' ).addClass( 'max-width-none' );
}