InfoWidgets

InfoWidgets show short configurable lists of your wiki's pages that fulfill certain criteria. It could be the visitor's watchlist e.g. - or a list of wanted pages... Think of InfoWidgets as  pages in pocket format.

To see a demo go to the landing page of our wiki. What you see there are the, the   and the   widgets.

As you've probably noticed these widgets are live. They will periodically update as long as the page is open and in focus.

To add widgets to a page you have to do add a regular DIV (or any other container). Then you have to pass the container's ID (or any other identifier) to InfoWidgets and it will fill it with links.

Technically speaking InfoWidgets are nothing more than AJAX frontends for Wikia's API. Any information about your wiki that the API can deliver can be fetched with InfoWidgets.

But since tinkering with the API is not for everybody, InfoWidgets includes a number of preconfigured widgets that you can easily build into your wiki!

Installation
Add this line to the JavaScript file of your choice:

importScriptPage('InfoWidgets/code.js', 'dev');

Here's Randomtime's handy guide to JavaScript files:


 * MediaWiki:Monobook.js is for javascript that will load for all users on your wiki that use the monobook skin
 * MediaWiki:Common.js is for javascript that will load on either skin
 * MediaWiki:Wikia.js will load for all users using the default (Wikia) skin
 * User:YOURNAME/Wikia.js (or Monobook.js, Common.js) will load only for you
 * On Central only(!), you can create a global.js - which will load on all sites across Wikia, but only for you.

Quickstart Guide
Let's start with an example right away:

$(document).ready(function {    myWidget = Widgets.newPages;    myWidget.selector = '#test';    Widgets.add(myWidget);    Widgets.start;

});

And here's what you need to know about the above:

myWidget.selector = '#test'; Just place a div whereever you want it on the page, style it however you like and then tell InfoWidgets its ID. InfoWidgets will do the rest and fill the div with a list of links. The  indicates that this is an id by the way. You could also pass the a class name by using a dot:. In fact: You can use any valid jQuery selector. Widgets.add(firstWidget); Widgets.add(secondWidget); // etc.. Widgets.start
 * You will have to embed the Widget calls into a call of the ready function to ensure they load properly. Why that is so is very much beyond the scope of this intro. It's a jQuery thing... Just trust me on this! ;)
 * is one of the preconfigured Widgets. Here's the current list:
 * Next you will have to add the selector of the div you want the widget to fill:
 * Then you add the widget(s) to the queue:
 * And finally you launch all your queued widgets with:

And that's that. Unless - of course - you want more...

Advanced Guide
[soon to follow]