User:Aarnott/Lego Bin 14

Ghostwheel's Homebrew (310 Articles)

Ghostwheelv

Working prototype for user boxes below:

jQuery(document).ready(function($) {
    var $expandSpan = $("<span>");
    $expandSpan.addClass("mw-collapsible-toggle");

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

    $expandSpan.append($expandLink);

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

function loadUserNavboxContents() {
    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);
    $("#user_navbox").append($loadingSpinnerRow);

    var author = $("#user_navbox").attr('data-author');

    $.get('/wiki/User:Aarnott/Lego_Bin_14/Navbox/'+author,
        function(data) {
            var $html = $(data);
            $("#user_navbox").replaceWith($html.find("#user_navbox"));
        }
    ); 
}

• 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.
• I haven't written any exception handlers yet, but that would probably be a good idea...