Avatar Wiki


Creating interactive templates with JavaScript

MateyY October 19, 2012 User blog:MateyY

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

How many of you have noticed the {{USERNAME}} template before? Here is what it does:
Hello, user!

After the page loads, the default text, user, changes to your username. If you are an anonymous user, the code will not render like that, but it is written safely, so that it doesn't break the rest of the page.

However, it can be hard to design your own template with JavaScript if you aren't very familiar with the language. That is why I have written a little framework to help you along. It relies on jQuery and has been tested to work on Wikia.

The source code is as follows:

/* Template.js
 * Creates interactive templates
 * Version v.1.1
 * Name the class name and, if any, other specific selectors
 * By [[User:MateyY|MateyY]]
(function($,window) {
     var Template = function(info) {
          if (info && typeof info !== "object" || !info) throw new Error("Template invoked without object holding information.");
          if (!info["class"]) throw new Error("No template class name specified.");
          if (!info.value) throw new Error("No template value specified.");
          var elements = info.selectors ? $("." + info["class"]).filter(info.selectors) : $("." + info["class"]);
          this.defaultValues = [];
          for (var i = 0; i < elements.length; i++) {
               this.defaultValues.push({element: elements[i], value: elements.eq(i).html()});
          elements.html(typeof info.value === "function" ? info.value() : info.value);
               this.elements = elements.toArray();
               this.length = elements.length;
     Template.prototype = {
          toDefault: function(elm) {
               for (var i = 0; i < this.defaultValues.length; i++) {
                    if ((elm ? elm === this.defaultValues[i].element : elm)) $(this.defaultValues[i].element).html(this.defaultValues[i].value);
               return this;
     window.Template = Template;

After importing this small code (which can also be found here), you can write the following code to compose a simpler username template user:

$(function() {
     new Template({
          "class": "username",
          value: function() {
               if (wgUserName) return wgUserName;
               return "anon";

That is just the basic way to make every tag with a class of username have the text of a user's name, or "anon" for anonymous users. However, Templateis much more powerful. It can even restore the previous content, as well as further filter elements! Here is the code rewritten with more capabilities:

$(function() {
     var usernames = new Template({
          "class": "username",
          value: function() {
               if (wgUserName) return wgUserName;
               return "anon";
          selectors: "span"
     $(usernames.elements).click(function() {

This will make only span tags with the class of username change their content, and when their clicked, the content will be restored.

For concerns, problems, or questions, please contact me.

Also on Fandom

Random Wiki