User:Aarnott/Lego Bin 14

Ghostwheel's Homebrew (310 Articles)

Ghostwheelv

Working prototype for user boxes below:

/**
 * Find the user navbox, which is identified by the id #user_navbox,
 * and append an [Expand] link to the header. The [Expand] link will
 * load the navbox contents dynamically when the user clicks it.
 *
 */
jQuery(document).ready(function($) {
    var $expandSpan = $("<span>");
    $expandSpan.addClass("mw-collapsible-toggle");

    var $expandLink = $("<a>",
        {
            text: '[Expand]',
            href: '#',
            click: function() {
                loadUserNavboxContents();
            }
        }
    );
    $expandSpan.append($expandLink);

    $("#dynamic_user_navbox th").append($expandSpan);
});

function loadUserNavboxContents() {
    //Attach the spinner icon while the content loads
    var $loadingSpinnerRow = $("<tr>");
    var $loadingSpinnerCol = $("<td>");
    $loadingSpinnerCol.attr('colSpan', "" + 3 + "");
    $loadingSpinnerCol.attr('style', 'text-align:left; vertical-align:middle;');

    var $loadingSpinnerImage = $("<img>");
    $loadingSpinnerImage.attr('src', 'http://dnd-wiki.org/w/images/4/44/Spinner.gif');

    $loadingSpinnerCol.append($loadingSpinnerImage);
    $loadingSpinnerCol.append("  Loading...");    
    $loadingSpinnerRow.append($loadingSpinnerCol);
    $("#dynamic_user_navbox").append($loadingSpinnerRow);

    //The user navbox has an html data attribute called "data-author", which
    //is used to store the author's name. This author name corresponds directly
    //to a url for the author's fully opened navbox.
    var author = $("#dynamic_user_navbox").attr('data-author');
    var navboxPath = 'User:Aarnott/Lego_Bin_14/Navbox/' + author;
    var navboxUrl = '/wiki/' + navboxPath;
    $.get(navboxUrl)
        .done(function(data) {
            //The user_navbox with the full content replaces the loader navbox
            var $html = $(data);
            var navbox = $html.find("#user_navbox");
            if(navbox.length > 0) {
                $("#dynamic_user_navbox").replaceWith(navbox[0]);
            } else {
                //Detach the spinner
                $loadingSpinnerRow.detach();
                //Error condition -- no navbox found
                var $noNavboxRow = $("<tr>");
                var $noNavboxCol = $("<td>");
                $noNavboxCol.attr('colSpan', "" + 3 + "");
                $noNavboxCol.attr('style', 'text-align:left; vertical-align:middle;');
                $noNavboxCol.append("No user navbox data was found. If this is your navbox, check"
                    + " <a href='"+navboxUrl+"'>"+navboxPath+"<a> to see if it is"
                    + " configured correctly. You can also message one of the"
                    + "<a href='/w/index.php?title=Special%3AListUsers&username=&group=sysop&limit=50'>Administrators<a>"
                    + " if you have any questions.");
                $noNavboxRow.append($noNavboxCol);
                $("#dynamic_user_navbox").append($noNavboxRow);
            }
        })
        .fail(function(jqxhr, textStatus, error) {
            var errorMessage = textStatus + ", " + error;
            //Detach the spinner
            $loadingSpinnerRow.detach();
            //Error condition -- no navbox found
            var $failNavboxRow = $("<tr>");
            var $failNavboxCol = $("<td>");
            $failNavboxCol.attr('colSpan', "" + 3 + "");
            $failNavboxCol.attr('style', 'text-align:left; vertical-align:middle;');
            $failNavboxCol.append("Failed to load the user's navbox: " + errorMessage);
            $failNavboxRow.append($failNavboxCol);
            $("#dynamic_user_navbox").append($failNavboxRow);
        }
    ); 
}

• I modified the NavBox to have an optional id element, which is used so I can find the User's Navbox with JQuery more easily.
• The User's Navbox is split into two parts.
  • The first part is the table that will have the JQuery loading function attached. This is User:Aarnott/Lego Bin 14/Navbox/User/Loader.
  • The second part generates the same User NavBox we already use. This is User:Aarnott/Lego Bin 14/Navbox/User.
• We would be replacing the Navbox/User reference in Template:Navboxes‎ with Navbox/User/Loader and with the added JS code, it should work.