User:Aarnott/Lego Bin 14

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 = $("&lt;span&gt;");     $expandSpan.addClass("mw-collapsible-toggle");     var $expandLink = $("&lt;a&gt;", {            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 = $("&lt;tr&gt;"); var $loadingSpinnerCol = $("&lt;td&gt;"); $loadingSpinnerCol.attr('colSpan', "" + 3 + ""); $loadingSpinnerCol.attr('style', 'text-align:left; vertical-align:middle;'); var $loadingSpinnerImage = $("&lt;img&gt;"); $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 = $("&lt;tr&gt;");                 var $noNavboxCol = $("&lt;td&gt;");                 $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" + " &lt;a href='"+navboxUrl+"'&gt;"+navboxPath+"&lt;a&gt; to see if it is" + " configured correctly. You can also message one of the" + "&lt;a href='/w/index.php?title=Special%3AListUsers&username=&group=sysop&limit=50'&gt;Administrators&lt;a&gt;" + " 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 = $("&lt;tr&gt;");             var $failNavboxCol = $("&lt;td&gt;");             $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.