Using jQuery with Mediawiki

[FlyingRagnar]

While I'm still waiting for any kind of response in the membership forum....

jQuery is included with Mediawiki 1.16 and newer.  In 1.17, you can load portions of the jQuery UI library on demand in your Common.js file as part of the ResourceLoader portions of Mediawiki. 

There are a lot of uses for jQuery within the wiki pages.  For example, a couple of the NIWA wikis use the Tabber extension (or at least include it).  However, jQuery has its own tabs you can use instead to save on performance. 

I've been experimenting with using the jQuery tabs and ways to include video content on wiki articles without it becoming too cluttered.

http://dragon-quest.org/wiki/Tantegel
http://dragon-quest.org/wiki/MediaWiki:Common.js

[Greenpickle]

I think from a usability perspective requiring a click to change tabs might be better.  People don't expect stuff to just change without clicking on anything.

That template:VersionTabs scares me.  Maybe try Loops and Variables?

Why the non-breaking spaces in tab names?  Something doesn't work with spaces?

JQuery lets you do lots of stuff like DOM traversal much more easily.  I haven't really used it, but something like this (obviously just a sample):

Code Select Expand

var tabGroup = 0;
$('div.tabs').each (function () {
    var h = 0;
    this.children('ul, div').find('a').each(function () {
        if (this.is('ul')) { /* tab stuff */ }
        else this.attr('id', 'tabs' + tabGroup + '-' + (++h));
    });
    $("#tabs" + tabGroup).tabs({event: 'mouseover'});
    tabGroup++;
});

Otherwise, stuff like this to make our wikis stand out is good.  I should do more...

[FlyingRagnar]

Excellent suggestions.  Yeah there are plenty of spots where jQuery can be used to make things more simple.  I put the tabs on mouse over, but really it is just an experiment to see if that would be better than requiring a click. 

VersionTabs definitely isn't a work of art, but I don't think there is anything potentially dangerous about it.

[Greenpickle]

No, I wasn't saying there was anything inherently wrong; I just have OCD and can't help trying to make code as clean as possible.

[FlyingRagnar]

To answer your other question, the old Tabber extension did not allow spaces in the tab names.  Since converting over, I have not gone back and changed those pages to remove the spaces.  I would assume that jQuery would have no problem with it.

[Tappy]

Tabs should need to be clicked, there can be a lot of "Oops, didn't mean to hover over that."

[FlyingRagnar]

Yeah I changed it back to clicks and it feels more normal.  The downside to using tabs in general is that the printable versions of articles do not show all of the information on the page.  Seems like I would need to modify the Mediawiki PHP code to do something special in that case. 

[Greenpickle]

You could try disabling that JavaScript when loading a printable version of the page, and have some sane-looking fallback for tab-less presentation of the content.  That is, instead of having bullet points and stuff, have the tabs looking like (but not being...) headings, so that when the JS doesn't run, it looks normal-ish.

[FlyingRagnar]

Bump.  I've been messing with jQuery some more using the updated version that comes with Mediawiki.  Here are a couple useful tips:

http://www.mediawiki.org/wiki/Manual:Collapsible_elements

As of Mediawiki 1.18, using jQuery for collapsing elements is now supported natively.  Just add the class 'mw-collapsible' and 'mw-collapsed' to a table or div and it just works.  This allowed me to get rid of 4 separate javascript functions in my Common.js.  The jQuery features a little animation when expanding/collapsing things.  You can customize it a little bit, but it mainly is for hiding navigation bars that are so widely used.  Here it is in action: http://dragon-quest.org/wiki/Category:Navigation_templates/Sandbox.

I also made use of this feature to redo our spoiler template, which is used to hide spoiler information.  Check it out in use here: http://dragon-quest.org/wiki/Dragon_Quest_V#Characters.

Finally, our wiki was dealing with a race condition with jQuery libraries being loaded for Common.js.  I am using jquery.ui.tabs and jquery.ui.accordion to format things.  Sometimes the libraries would get loaded and look fine, other times they would not get loaded in time and the pages looked bad.  I think I have fixed it now by forcing mediawiki to load them as dependencies.

jQuery( document ).ready( function( $ ) {
        mw.loader.using( 'jquery.ui.tabs', function() {createJQueryTabs();} );
        mw.loader.using( 'jquery.ui.accordion', function() {accordionVideos();} );
} );

So at the end of page loading, the resource loader ensures that each library is loaded before calling the functions which then go and create the tab/accordion formattings on the page.  I need to do some testing in different browsers still.

The only bad news I found is that the resource loader by default does not load any extra modules when using the MobileFrontend extension (aka mobile browser formatting).  That means that any special formattings won't happen and the pages will likely look bad.  Not sure if I will do anything to deal with that at this point or not.