MediaWiki:Common.js: Difference between revisions

From FamilySearch Wiki
(Center the page title on Main Page and Guided Research for Online Records)
(correct jQuery syntax for multiple values by enclosing with curly braces)
Line 2: Line 2:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


if ( /Main_Page/.test(document.location.href) || /Guided_Research_for_Online_Records/.test(document.location.href) ) {
if ( ( /Main_Page/.test(document.location.href) ) || ( /Guided_Research_for_Online_Records/.test(document.location.href) ) ) {
     $("#content h1").css("border", "0", "textAlign", "center");
     $("#content h1").css({"border":0, "text-align":"center"});
}
}



Revision as of 00:02, 4 March 2021

/* Any JavaScript here will be loaded for all users on every page load. */

if ( ( /Main_Page/.test(document.location.href) ) || ( /Guided_Research_for_Online_Records/.test(document.location.href) ) ) {
    $("#content h1").css({"border":0, "text-align":"center"});
}

// Initialize Tooltips from Bootstrap
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
});

/**
 * Display the 'Additional online resources' using jQuery
 */
$(document).ready(function(){
  $("#mw-customcollapsible-Additional_online_resources").css({"display": "block"});
});

/* Add Adobe Launch 2020-11-12 
 * There is a corresponding section in override.php to load the library */
$(document).ready(function(){
  // information to record
  var config = {
        'site_id': 'FamilySearch',
        'site_language': mw.config.get('wgContentLanguage'), // e.g. 'en'
        'page_channel': 'Wiki',
        'page_detail': document.location.pathname + document.location.search, //'Home' for the homepage or a unique page title for other pages; including querystring
        'page_type': 'wiki',
        'visitor_state': 'lo'
    };
    // send it
    try {
    	_satellite.track('page_view', config);
    } catch (e) {
    	// ignore
    }
    console.log("recorded page view for " + config.page_detail);
});
/* End Adobe Launch code */


function getCookie(name) {
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec(document.cookie);
    return (value !== null) ? unescape(value[1]) : null;
}
setTimeout(function() {
    var templeCookie = getCookie('fs-highconf') || getCookie('fs-templeinfo');
    if (templeCookie && templeCookie.indexOf('true') > -1) {
        var body = document.querySelector('body');
        body.classList.add('templeMember');
    }
}, 2000);

/**
 * Test if an element has a certain class
 * @deprecated:  Use $(element).hasClass() instead.
 */
mw.log.deprecate( window, 'hasClass', function ( element, className ) {
    return $( element ).hasClass( className );
}, 'Use jQuery.hasClass() instead' );

/**
 * Collapsible tables
 *
 * Allows tables to be collapsed, showing only the header. See [[Wikipedia:NavFrame]].
 *
 * @version 2.0.3 (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.
 */

var autoCollapse = 2;
var collapseCaption = 'hide';
var expandCaption = 'show';
var tableIndex = 0;

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( $content ) {
    var NavigationBoxes = {};
    var $Tables = $content.find( 'table' );
    var i;

    $Tables.each( function( i, table ) {
        if ( $(table).hasClass( 'collapsible' ) ) {

            /* only add button and increment count if there is a header row to work with */
            var HeaderRow = table.getElementsByTagName( 'tr' )[0];
            if ( !HeaderRow ) {
                return;
            }
            var Header = table.getElementsByTagName( 'th' )[0];
            if ( !Header ) {
                return;
            }

            NavigationBoxes[ tableIndex ] = table;
            table.setAttribute( 'id', 'collapsibleTable' + tableIndex );

            var Button     = document.createElement( 'span' );
            var ButtonLink = document.createElement( 'a' );
            var ButtonText = document.createTextNode( collapseCaption );
            // Styles are declared in [[MediaWiki:Common.css]]
            Button.className = 'collapseButton';

            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 );
        }
        else if ( $( NavigationBoxes[i] ).hasClass ( 'innercollapse' ) ) {
            var element = NavigationBoxes[i];
            while ((element = element.parentNode)) {
                if ( $( element ).hasClass( 'outercollapse' ) ) {
                    collapseTable ( i );
                    break;
                }
            }
        }
    }
}

mw.hook( 'wikipage.content' ).add( createCollapseButtons );

/**
 * Dynamic Navigation Bars (experimental)
 *
 * Description: See [[Wikipedia:NavFrame]].
 * Maintainers: UNMAINTAINED
 */

/* set up the words in your language */
var NavigationBarHide = '[' + collapseCaption + ']';
var NavigationBarShow = '[' + expandCaption + ']';
var indexNavigationBar = 0;

/**
 * Shows and hides content and picture (if available) of navigation bars
 * Parameters:
 *     indexNavigationBar: the index of navigation bar to be toggled
 **/
window.toggleNavigationBar = function ( indexNavigationBar, event ) {
    var NavToggle = document.getElementById( 'NavToggle' + indexNavigationBar );
    var NavFrame = document.getElementById( 'NavFrame' + indexNavigationBar );
    var NavChild;

    if ( !NavFrame || !NavToggle ) {
        return false;
    }

    /* if shown now */
    if ( NavToggle.firstChild.data === NavigationBarHide ) {
        for ( NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) {
            if ( $( NavChild ).hasClass( 'NavContent' ) || $( NavChild ).hasClass( 'NavPic' ) ) {
                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( 'NavContent' ) || $( NavChild ).hasClass( 'NavPic' ) ) {
                NavChild.style.display = 'block';
            }
        }
        NavToggle.firstChild.data = NavigationBarHide;
    }

    event.preventDefault();
};

/* adds show/hide-button to navigation bars */
function createNavigationBarToggleButton( $content ) {
    var NavChild;
    /* iterate over all < div >-elements */
    var $divs = $content.find( 'div' );
    $divs.each( function ( i, NavFrame ) {
        /* if found a navigation bar */
        if ( $( NavFrame ).hasClass( 'NavFrame' ) ) {

            indexNavigationBar++;
            var NavToggle = document.createElement( 'a' );
            NavToggle.className = 'NavToggle';
            NavToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
            NavToggle.setAttribute( 'href', '#' );
            $( NavToggle ).on( 'click', $.proxy( window.toggleNavigationBar, window, indexNavigationBar ) );

            var isCollapsed = $( NavFrame ).hasClass( 'collapsed' );
            /**
             * Check if any children are already hidden.  This loop is here for backwards compatibility:
             * the old way of making NavFrames start out collapsed was to manually add style="display:none"
             * to all the NavPic/NavContent elements.  Since this was bad for accessibility (no way to make
             * the content visible without JavaScript support), the new recommended way is to add the class
             * "collapsed" to the NavFrame itself, just like with collapsible tables.
             */
            for ( NavChild = NavFrame.firstChild; NavChild != null && !isCollapsed; NavChild = NavChild.nextSibling ) {
                if ( $( NavChild ).hasClass( 'NavPic' ) || $( NavChild ).hasClass( 'NavContent' ) ) {
                    if ( NavChild.style.display === 'none' ) {
                        isCollapsed = true;
                    }
                }
            }
            if ( isCollapsed ) {
                for ( NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) {
                    if ( $( NavChild ).hasClass( 'NavPic' ) || $( NavChild ).hasClass( 'NavContent' ) ) {
                        NavChild.style.display = 'none';
                    }
                }
            }
            var NavToggleText = document.createTextNode( isCollapsed ? NavigationBarShow : NavigationBarHide );
            NavToggle.appendChild( NavToggleText );

            /* Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked) */
            for( var j = 0; j < NavFrame.childNodes.length; j++ ) {
                if ( $( NavFrame.childNodes[j] ).hasClass( 'NavHead' ) ) {
                    NavToggle.style.color = NavFrame.childNodes[j].style.color;
                    NavFrame.childNodes[j].appendChild( NavToggle );
                }
            }
            NavFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
        }
    } );
}

mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton );

/* Added for Accordion button */
(function() {
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
})();

/* end Accordion button */


/**
 * Conditional include of Map Menus data structure 
 * and all the Map Menus functionality
 * - only for 'Main Page' landing pages
 */
const re = /Hauptseite|Main_Page|P%C3%A1gina_principal|Accueil|Pagina_principale|%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8|%EB%8C%80%EB%AC%B8|%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0|Huvudsida|%E9%A6%96%E9%A1%B5/;
if ( re.test(document.location.pathname) ) {

    // console.log('loading menus data');
    const regr = /GR$/;
    var isGR = regr.test(document.location.pathname);
    var lang = mw.config.get('wgContentLanguage');
    var variant = 'MapMenu.js';
    if (isGR) {
    	variant = 'MapMenu-GR.js';
    }
    mw.loader.load('/wiki/' + lang + '/index.php?title=MediaWiki:' + variant + '&action=raw&ctype=text/javascript');

    /**
     * Attach a click handler to our buttons to show the "countries" menus
     */
    $('[id$=_button]').click(function () {
        // show the menu in case it's hidden
        $("#menu").show();
        var position = this.id.indexOf('_button');
        var name = this.id.substring(0, position);
        name += "_countries";
        // console.log ("showing list for " + name);
        if (name == 'all_countries_countries') {
            showAllCountries();
        } else {
            showList(name);
        }
    });

    /**
     * Attach a click handler to "links" (spans with class .menulink) in the menus.
     * Because the menus are dynamic, we use a "delegated" event handler
     * with jQuery's .on()
     * https://api.jquery.com/on/
     */
    $("#menu").on("click", ".menulink", function () {
        // console.log( $( this ).text() );
        // find out what menu to show
        var menu = $(this).text().toLowerCase();
        // replace all the blanks
        menu = menu.replace(/ /g, "_");
        menu = menu + "_states";
        // console.log("showing menu for " + menu);
        showList(menu);
    });

    /**
     * Add an event listener to state and country menus
     * so that clicking the red [x] will close the menu.
     */
    $("#menu").on("click", ".exit", function () {
        var menu = $(".exit").parent().attr("parent");
        if (menu) {
            showList(menu);
        } else {
        	//showAllCountries();
            $("#menu").hide();
        }
    });
}
/* end code for landing page*/

/** 2020/08/31 Add code for new Help Menu Overlay */
// URL for bringing in the bundle to the wiki
const url = '/wiki/public_html/helptray.js';
// the selector for the Help button in the header
const button = document.querySelector('#helpLink');
button.addEventListener('click', function () {
  // If the script that brings in the Help Overlay isn't on the page yet, we know
  // we need to load it in
  if ( typeof window.renderHelpTray === "undefined" ) {
    const script = document.createElement('script');
    script.setAttribute('src', url);
    // Once the script loads, we need to do a little more set up and then actually
    // open the Help Overlay
    script.onload = function () {
      // This event is fired when the Help Overlay is rendered for the first time
      // Setting { once: true } as an option avoids the potential for multiple
      // times getting called. Once this event fires, we just fire the event to
      // let the Help Overlay it needs to open
      document.addEventListener('helpTrayReady', function () {
        document.dispatchEvent(new CustomEvent('openHelpTray'));
      }, { once: true });
      // Here we create an element to render the Help Overlay on. Just a generic div works
      const renderDiv = document.createElement('div');
      // We add an ID in case we need to easily reference it elsewhere
      renderDiv.id = 'helpOverlayRoot';
      // If you go the route of creating the element programatically, be sure to add it
      // to the body somewhere. Here we just put at the end of the <body>
      document.body.appendChild(renderDiv);
      // This is a consistent way to get info about the size and position of the button
      // We can use this to determine where to set the initial position (the x being pulled
      // out here will be the left of the button, which is the correct x value to start the
      // help tray at. The y is the top of the button, which we can add the button's height
      // to in order to get the correct y value to start the help tray at)
      const rect = button.getBoundingClientRect();
      const x = rect.left;
      const y = rect.top;
      const height = rect.height;
      // Finally, call the renderHelpTray function with the element (required) and the
      // initial position (optional but highly recommended)
      window.renderHelpTray(renderDiv, [x, y + height]);
    };
    document.head.insertBefore(script, document.head.firstChild);
  } else {
    // If we get to this else, the script is already on the page, so we just need
    // to dispatch the appropriate event. At a minimum, this can just fire the
    // openHelpTray event, but the ideal scenario is that the button click acts as
    // a toggle. This example shows how to check if the Help Overlay is already open
    // on the page, and fires the appropriate event based on that
    const eventName = document.querySelector('[data-test=helpOverlayCloseButton]') ? 'closeHelpTray' : 'openHelpTray';
    document.dispatchEvent(new CustomEvent(eventName));
  }
});