Enabled loading widgets without the widgeting framework
authorveltr
Thu, 16 May 2013 13:34:02 +0200
changeset 1001 3210bf928a11
parent 1000 91023037f841
child 1002 a86208b60c91
Enabled loading widgets without the widgeting framework
sbin/build/client.xml
src/js/html-player.js
src/js/libs/mustache.js
src/js/utils.js
src/js/widgets-container/defaults.js
src/js/widgets-container/widget.js
test/external-widget.htm
test/index.htm
--- a/sbin/build/client.xml	Wed May 15 16:22:37 2013 +0200
+++ b/sbin/build/client.xml	Thu May 16 13:34:02 2013 +0200
@@ -21,10 +21,6 @@
             <filelist dir="../../src/js/" files="header.js" />
             <!-- core files -->
             <filelist dir="../../src/js" files="init.js utils.js model.js html-player.js" />
-            <!-- serializers -->
-            <fileset dir="../../src/js/serializers" casesensitive="yes">
-                <include name="**/*.js"/>
-            </fileset>
             <filterchain>
                 <deletecharacters chars="&#xFEFF;" />
             </filterchain>
@@ -36,6 +32,10 @@
             <filelist dir="../../src/js/libs" files="LAB.min.js" />
             <!-- core files -->
             <filelist dir="../../build" files="metadataplayer-core.js" />
+            <!-- serializers -->
+            <fileset dir="../../src/js/serializers" casesensitive="yes">
+                <include name="**/*.js"/>
+            </fileset>
             <fileset dir="../../src/js/widgets-container" casesensitive="yes">
                 <include name="**/*.js"/>
             </fileset>
--- a/src/js/html-player.js	Wed May 15 16:22:37 2013 +0200
+++ b/src/js/html-player.js	Thu May 16 13:34:02 2013 +0200
@@ -13,7 +13,9 @@
     
     videoEl.attr({
         width : opts.width || undefined,
-        height : opts.height || undefined
+        height : opts.height || undefined,
+        controls : opts.controls || undefined,
+        autoplay : opts.autostart || opts.autoplay || undefined
     });
     
     if(typeof videoURL === "string"){
@@ -31,10 +33,6 @@
     
     jqselector.html(videoEl);
     
-    if (opts.autostart || opts.autoplay) {
-        videoEl.attr("autoplay", true);
-    }
-    
     var mediaEl = videoEl[0];
     
     // Binding HTML video functions to media events
--- a/src/js/libs/mustache.js	Wed May 15 16:22:37 2013 +0200
+++ b/src/js/libs/mustache.js	Thu May 16 13:34:02 2013 +0200
@@ -1,436 +1,536 @@
-/*
-  mustache.js — Logic-less templates in JavaScript
+/*!
+ * mustache.js - Logic-less {{mustache}} templates with JavaScript
+ * http://github.com/janl/mustache.js
+ */
 
-  See http://mustache.github.com/ for more info.
-*/
+/*global define: false*/
 
-var Mustache = function () {
-  var _toString = Object.prototype.toString;
+(function (root, factory) {
+  if (typeof exports === "object" && exports) {
+    factory(exports); // CommonJS
+  } else {
+    var mustache = {};
+    factory(mustache);
+    if (typeof define === "function" && define.amd) {
+      define(mustache); // AMD
+    } else {
+      root.Mustache = mustache; // <script>
+    }
+  }
+}(this, function (mustache) {
 
-  Array.isArray = Array.isArray || function (obj) {
-    return _toString.call(obj) == "[object Array]";
+  var whiteRe = /\s*/;
+  var spaceRe = /\s+/;
+  var nonSpaceRe = /\S/;
+  var eqRe = /\s*=/;
+  var curlyRe = /\s*\}/;
+  var tagRe = /#|\^|\/|>|\{|&|=|!/;
+
+  // Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
+  // See https://github.com/janl/mustache.js/issues/189
+  var RegExp_test = RegExp.prototype.test;
+  function testRegExp(re, string) {
+    return RegExp_test.call(re, string);
   }
 
-  var _trim = String.prototype.trim, trim;
-
-  if (_trim) {
-    trim = function (text) {
-      return text == null ? "" : _trim.call(text);
-    }
-  } else {
-    var trimLeft, trimRight;
-
-    // IE doesn't match non-breaking spaces with \s.
-    if ((/\S/).test("\xA0")) {
-      trimLeft = /^[\s\xA0]+/;
-      trimRight = /[\s\xA0]+$/;
-    } else {
-      trimLeft = /^\s+/;
-      trimRight = /\s+$/;
-    }
-
-    trim = function (text) {
-      return text == null ? "" :
-        text.toString().replace(trimLeft, "").replace(trimRight, "");
-    }
+  function isWhitespace(string) {
+    return !testRegExp(nonSpaceRe, string);
   }
 
-  var escapeMap = {
+  var Object_toString = Object.prototype.toString;
+  var isArray = Array.isArray || function (obj) {
+    return Object_toString.call(obj) === '[object Array]';
+  };
+
+  function escapeRegExp(string) {
+    return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
+  }
+
+  var entityMap = {
     "&": "&amp;",
     "<": "&lt;",
     ">": "&gt;",
     '"': '&quot;',
-    "'": '&#39;'
+    "'": '&#39;',
+    "/": '&#x2F;'
   };
 
-  function escapeHTML(string) {
-    return String(string).replace(/&(?!\w+;)|[<>"']/g, function (s) {
-      return escapeMap[s] || s;
+  function escapeHtml(string) {
+    return String(string).replace(/[&<>"'\/]/g, function (s) {
+      return entityMap[s];
     });
   }
 
-  var regexCache = {};
-  var Renderer = function () {};
+  function Scanner(string) {
+    this.string = string;
+    this.tail = string;
+    this.pos = 0;
+  }
+
+  /**
+   * Returns `true` if the tail is empty (end of string).
+   */
+  Scanner.prototype.eos = function () {
+    return this.tail === "";
+  };
+
+  /**
+   * Tries to match the given regular expression at the current position.
+   * Returns the matched text if it can match, the empty string otherwise.
+   */
+  Scanner.prototype.scan = function (re) {
+    var match = this.tail.match(re);
+
+    if (match && match.index === 0) {
+      this.tail = this.tail.substring(match[0].length);
+      this.pos += match[0].length;
+      return match[0];
+    }
+
+    return "";
+  };
+
+  /**
+   * Skips all text until the given regular expression can be matched. Returns
+   * the skipped string, which is the entire tail if no match can be made.
+   */
+  Scanner.prototype.scanUntil = function (re) {
+    var match, pos = this.tail.search(re);
 
-  Renderer.prototype = {
-    otag: "{{",
-    ctag: "}}",
-    pragmas: {},
-    buffer: [],
-    pragmas_implemented: {
-      "IMPLICIT-ITERATOR": true
-    },
-    context: {},
+    switch (pos) {
+    case -1:
+      match = this.tail;
+      this.pos += this.tail.length;
+      this.tail = "";
+      break;
+    case 0:
+      match = "";
+      break;
+    default:
+      match = this.tail.substring(0, pos);
+      this.tail = this.tail.substring(pos);
+      this.pos += pos;
+    }
+
+    return match;
+  };
+
+  function Context(view, parent) {
+    this.view = view || {};
+    this.parent = parent;
+    this._cache = {};
+  }
+
+  Context.make = function (view) {
+    return (view instanceof Context) ? view : new Context(view);
+  };
 
-    render: function (template, context, partials, in_recursion) {
-      // reset buffer & set context
-      if (!in_recursion) {
-        this.context = context;
-        this.buffer = []; // TODO: make this non-lazy
+  Context.prototype.push = function (view) {
+    return new Context(view, this);
+  };
+
+  Context.prototype.lookup = function (name) {
+    var value = this._cache[name];
+
+    if (!value) {
+      if (name == '.') {
+        value = this.view;
+      } else {
+        var context = this;
+
+        while (context) {
+          if (name.indexOf('.') > 0) {
+            value = context.view;
+            var names = name.split('.'), i = 0;
+            while (value && i < names.length) {
+              value = value[names[i++]];
+            }
+          } else {
+            value = context.view[name];
+          }
+
+          if (value != null) break;
+
+          context = context.parent;
+        }
       }
 
-      // fail fast
-      if (!this.includes("", template)) {
-        if (in_recursion) {
-          return template;
+      this._cache[name] = value;
+    }
+
+    if (typeof value === 'function') value = value.call(this.view);
+
+    return value;
+  };
+
+  function Writer() {
+    this.clearCache();
+  }
+
+  Writer.prototype.clearCache = function () {
+    this._cache = {};
+    this._partialCache = {};
+  };
+
+  Writer.prototype.compile = function (template, tags) {
+    var fn = this._cache[template];
+
+    if (!fn) {
+      var tokens = mustache.parse(template, tags);
+      fn = this._cache[template] = this.compileTokens(tokens, template);
+    }
+
+    return fn;
+  };
+
+  Writer.prototype.compilePartial = function (name, template, tags) {
+    var fn = this.compile(template, tags);
+    this._partialCache[name] = fn;
+    return fn;
+  };
+
+  Writer.prototype.getPartial = function (name) {
+    if (!(name in this._partialCache) && this._loadPartial) {
+      this.compilePartial(name, this._loadPartial(name));
+    }
+
+    return this._partialCache[name];
+  };
+
+  Writer.prototype.compileTokens = function (tokens, template) {
+    var self = this;
+    return function (view, partials) {
+      if (partials) {
+        if (typeof partials === 'function') {
+          self._loadPartial = partials;
         } else {
-          this.send(template);
-          return;
+          for (var name in partials) {
+            self.compilePartial(name, partials[name]);
+          }
         }
       }
 
-      // get the pragmas together
-      template = this.render_pragmas(template);
+      return renderTokens(tokens, self, Context.make(view), template);
+    };
+  };
+
+  Writer.prototype.render = function (template, view, partials) {
+    return this.compile(template)(view, partials);
+  };
 
-      // render the template
-      var html = this.render_section(template, context, partials);
+  /**
+   * Low-level function that renders the given `tokens` using the given `writer`
+   * and `context`. The `template` string is only needed for templates that use
+   * higher-order sections to extract the portion of the original template that
+   * was contained in that section.
+   */
+  function renderTokens(tokens, writer, context, template) {
+    var buffer = '';
+
+    var token, tokenValue, value;
+    for (var i = 0, len = tokens.length; i < len; ++i) {
+      token = tokens[i];
+      tokenValue = token[1];
+
+      switch (token[0]) {
+      case '#':
+        value = context.lookup(tokenValue);
 
-      // render_section did not find any sections, we still need to render the tags
-      if (html === false) {
-        html = this.render_tags(template, context, partials, in_recursion);
-      }
+        if (typeof value === 'object') {
+          if (isArray(value)) {
+            for (var j = 0, jlen = value.length; j < jlen; ++j) {
+              buffer += renderTokens(token[4], writer, context.push(value[j]), template);
+            }
+          } else if (value) {
+            buffer += renderTokens(token[4], writer, context.push(value), template);
+          }
+        } else if (typeof value === 'function') {
+          var text = template == null ? null : template.slice(token[3], token[5]);
+          value = value.call(context.view, text, function (template) {
+            return writer.render(template, context);
+          });
+          if (value != null) buffer += value;
+        } else if (value) {
+          buffer += renderTokens(token[4], writer, context, template);
+        }
+
+        break;
+      case '^':
+        value = context.lookup(tokenValue);
 
-      if (in_recursion) {
-        return html;
-      } else {
-        this.sendLines(html);
+        // Use JavaScript's definition of falsy. Include empty arrays.
+        // See https://github.com/janl/mustache.js/issues/186
+        if (!value || (isArray(value) && value.length === 0)) {
+          buffer += renderTokens(token[4], writer, context, template);
+        }
+
+        break;
+      case '>':
+        value = writer.getPartial(tokenValue);
+        if (typeof value === 'function') buffer += value(context);
+        break;
+      case '&':
+        value = context.lookup(tokenValue);
+        if (value != null) buffer += value;
+        break;
+      case 'name':
+        value = context.lookup(tokenValue);
+        if (value != null) buffer += mustache.escape(value);
+        break;
+      case 'text':
+        buffer += tokenValue;
+        break;
       }
-    },
+    }
+
+    return buffer;
+  }
+
+  /**
+   * Forms the given array of `tokens` into a nested tree structure where
+   * tokens that represent a section have two additional items: 1) an array of
+   * all tokens that appear in that section and 2) the index in the original
+   * template that represents the end of that section.
+   */
+  function nestTokens(tokens) {
+    var tree = [];
+    var collector = tree;
+    var sections = [];
 
-    /*
-      Sends parsed lines
-    */
-    send: function (line) {
-      if (line !== "") {
-        this.buffer.push(line);
+    var token;
+    for (var i = 0, len = tokens.length; i < len; ++i) {
+      token = tokens[i];
+      switch (token[0]) {
+      case '#':
+      case '^':
+        sections.push(token);
+        collector.push(token);
+        collector = token[4] = [];
+        break;
+      case '/':
+        var section = sections.pop();
+        section[5] = token[2];
+        collector = sections.length > 0 ? sections[sections.length - 1][4] : tree;
+        break;
+      default:
+        collector.push(token);
       }
-    },
+    }
+
+    return tree;
+  }
 
-    sendLines: function (text) {
-      if (text) {
-        var lines = text.split("\n");
-        for (var i = 0; i < lines.length; i++) {
-          this.send(lines[i]);
+  /**
+   * Combines the values of consecutive text tokens in the given `tokens` array
+   * to a single token.
+   */
+  function squashTokens(tokens) {
+    var squashedTokens = [];
+
+    var token, lastToken;
+    for (var i = 0, len = tokens.length; i < len; ++i) {
+      token = tokens[i];
+      if (token) {
+        if (token[0] === 'text' && lastToken && lastToken[0] === 'text') {
+          lastToken[1] += token[1];
+          lastToken[3] = token[3];
+        } else {
+          lastToken = token;
+          squashedTokens.push(token);
         }
       }
-    },
+    }
+
+    return squashedTokens;
+  }
 
-    /*
-      Looks for %PRAGMAS
-    */
-    render_pragmas: function (template) {
-      // no pragmas
-      if (!this.includes("%", template)) {
-        return template;
-      }
+  function escapeTags(tags) {
+    return [
+      new RegExp(escapeRegExp(tags[0]) + "\\s*"),
+      new RegExp("\\s*" + escapeRegExp(tags[1]))
+    ];
+  }
 
-      var that = this;
-      var regex = this.getCachedRegex("render_pragmas", function (otag, ctag) {
-        return new RegExp(otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" + ctag, "g");
-      });
+  /**
+   * Breaks up the given `template` string into a tree of token objects. If
+   * `tags` is given here it must be an array with two string values: the
+   * opening and closing tags used in the template (e.g. ["<%", "%>"]). Of
+   * course, the default is to use mustaches (i.e. Mustache.tags).
+   */
+  function parseTemplate(template, tags) {
+    template = template || '';
+    tags = tags || mustache.tags;
+
+    if (typeof tags === 'string') tags = tags.split(spaceRe);
+    if (tags.length !== 2) throw new Error('Invalid tags: ' + tags.join(', '));
 
-      return template.replace(regex, function (match, pragma, options) {
-        if (!that.pragmas_implemented[pragma]) {
-          throw({message:
-            "This implementation of mustache doesn't understand the '" +
-            pragma + "' pragma"});
-        }
-        that.pragmas[pragma] = {};
-        if (options) {
-          var opts = options.split("=");
-          that.pragmas[pragma][opts[0]] = opts[1];
+    var tagRes = escapeTags(tags);
+    var scanner = new Scanner(template);
+
+    var sections = [];     // Stack to hold section tokens
+    var tokens = [];       // Buffer to hold the tokens
+    var spaces = [];       // Indices of whitespace tokens on the current line
+    var hasTag = false;    // Is there a {{tag}} on the current line?
+    var nonSpace = false;  // Is there a non-space char on the current line?
+
+    // Strips all whitespace tokens array for the current line
+    // if there was a {{#tag}} on it and otherwise only space.
+    function stripSpace() {
+      if (hasTag && !nonSpace) {
+        while (spaces.length) {
+          delete tokens[spaces.pop()];
         }
-        return "";
-        // ignore unknown pragmas silently
-      });
-    },
-
-    /*
-      Tries to find a partial in the curent scope and render it
-    */
-    render_partial: function (name, context, partials) {
-      name = trim(name);
-      if (!partials || partials[name] === undefined) {
-        throw({message: "unknown_partial '" + name + "'"});
-      }
-      if (!context || typeof context[name] != "object") {
-        return this.render(partials[name], context, partials, true);
-      }
-      return this.render(partials[name], context[name], partials, true);
-    },
-
-    /*
-      Renders inverted (^) and normal (#) sections
-    */
-    render_section: function (template, context, partials) {
-      if (!this.includes("#", template) && !this.includes("^", template)) {
-        // did not render anything, there were no sections
-        return false;
+      } else {
+        spaces = [];
       }
 
-      var that = this;
-
-      var regex = this.getCachedRegex("render_section", function (otag, ctag) {
-        // This regex matches _the first_ section ({{#foo}}{{/foo}}), and captures the remainder
-        return new RegExp(
-          "^([\\s\\S]*?)" +         // all the crap at the beginning that is not {{*}} ($1)
+      hasTag = false;
+      nonSpace = false;
+    }
 
-          otag +                    // {{
-          "(\\^|\\#)\\s*(.+)\\s*" + //  #foo (# == $2, foo == $3)
-          ctag +                    // }}
-
-          "\n*([\\s\\S]*?)" +       // between the tag ($2). leading newlines are dropped
-
-          otag +                    // {{
-          "\\/\\s*\\3\\s*" +        //  /foo (backreference to the opening tag).
-          ctag +                    // }}
-
-          "\\s*([\\s\\S]*)$",       // everything else in the string ($4). leading whitespace is dropped.
+    var start, type, value, chr, token;
+    while (!scanner.eos()) {
+      start = scanner.pos;
 
-        "g");
-      });
-
-
-      // for each {{#foo}}{{/foo}} section do...
-      return template.replace(regex, function (match, before, type, name, content, after) {
-        // before contains only tags, no sections
-        var renderedBefore = before ? that.render_tags(before, context, partials, true) : "",
-
-        // after may contain both sections and tags, so use full rendering function
-            renderedAfter = after ? that.render(after, context, partials, true) : "",
+      // Match any text between tags.
+      value = scanner.scanUntil(tagRes[0]);
+      if (value) {
+        for (var i = 0, len = value.length; i < len; ++i) {
+          chr = value.charAt(i);
 
-        // will be computed below
-            renderedContent,
-
-            value = that.find(name, context);
-
-        if (type === "^") { // inverted section
-          if (!value || Array.isArray(value) && value.length === 0) {
-            // false or empty list, render it
-            renderedContent = that.render(content, context, partials, true);
+          if (isWhitespace(chr)) {
+            spaces.push(tokens.length);
           } else {
-            renderedContent = "";
+            nonSpace = true;
           }
-        } else if (type === "#") { // normal section
-          if (Array.isArray(value)) { // Enumerable, Let's loop!
-            renderedContent = that.map(value, function (row) {
-              return that.render(content, that.create_context(row), partials, true);
-            }).join("");
-          } else if (that.is_object(value)) { // Object, Use it as subcontext!
-            renderedContent = that.render(content, that.create_context(value),
-              partials, true);
-          } else if (typeof value == "function") {
-            // higher order section
-            renderedContent = value.call(context, content, function (text) {
-              return that.render(text, context, partials, true);
-            });
-          } else if (value) { // boolean section
-            renderedContent = that.render(content, context, partials, true);
-          } else {
-            renderedContent = "";
-          }
-        }
-
-        return renderedBefore + renderedContent + renderedAfter;
-      });
-    },
 
-    /*
-      Replace {{foo}} and friends with values from our view
-    */
-    render_tags: function (template, context, partials, in_recursion) {
-      // tit for tat
-      var that = this;
-
-      var new_regex = function () {
-        return that.getCachedRegex("render_tags", function (otag, ctag) {
-          return new RegExp(otag + "(=|!|>|&|\\{|%)?([^#\\^]+?)\\1?" + ctag + "+", "g");
-        });
-      };
+          tokens.push(['text', chr, start, start + 1]);
+          start += 1;
 
-      var regex = new_regex();
-      var tag_replace_callback = function (match, operator, name) {
-        switch(operator) {
-        case "!": // ignore comments
-          return "";
-        case "=": // set new delimiters, rebuild the replace regexp
-          that.set_delimiters(name);
-          regex = new_regex();
-          return "";
-        case ">": // render partial
-          return that.render_partial(name, context, partials);
-        case "{": // the triple mustache is unescaped
-        case "&": // & operator is an alternative unescape method
-          return that.find(name, context);
-        default: // escape the value
-          return escapeHTML(that.find(name, context));
-        }
-      };
-      var lines = template.split("\n");
-      for(var i = 0; i < lines.length; i++) {
-        lines[i] = lines[i].replace(regex, tag_replace_callback, this);
-        if (!in_recursion) {
-          this.send(lines[i]);
+          // Check for whitespace on the current line.
+          if (chr == '\n') stripSpace();
         }
       }
 
-      if (in_recursion) {
-        return lines.join("\n");
-      }
-    },
-
-    set_delimiters: function (delimiters) {
-      var dels = delimiters.split(" ");
-      this.otag = this.escape_regex(dels[0]);
-      this.ctag = this.escape_regex(dels[1]);
-    },
+      // Match the opening tag.
+      if (!scanner.scan(tagRes[0])) break;
+      hasTag = true;
 
-    escape_regex: function (text) {
-      // thank you Simon Willison
-      if (!arguments.callee.sRE) {
-        var specials = [
-          '/', '.', '*', '+', '?', '|',
-          '(', ')', '[', ']', '{', '}', '\\'
-        ];
-        arguments.callee.sRE = new RegExp(
-          '(\\' + specials.join('|\\') + ')', 'g'
-        );
-      }
-      return text.replace(arguments.callee.sRE, '\\$1');
-    },
+      // Get the tag type.
+      type = scanner.scan(tagRe) || 'name';
+      scanner.scan(whiteRe);
 
-    /*
-      find `name` in current `context`. That is find me a value
-      from the view object
-    */
-    find: function (name, context) {
-      name = trim(name);
-
-      // Checks whether a value is thruthy or false or 0
-      function is_kinda_truthy(bool) {
-        return bool === false || bool === 0 || bool;
-      }
-
-      var value;
-
-      // check for dot notation eg. foo.bar
-      if (name.match(/([a-z_]+)\./ig)) {
-        var childValue = this.walk_context(name, context);
-        if (is_kinda_truthy(childValue)) {
-          value = childValue;
-        }
+      // Get the tag value.
+      if (type === '=') {
+        value = scanner.scanUntil(eqRe);
+        scanner.scan(eqRe);
+        scanner.scanUntil(tagRes[1]);
+      } else if (type === '{') {
+        value = scanner.scanUntil(new RegExp('\\s*' + escapeRegExp('}' + tags[1])));
+        scanner.scan(curlyRe);
+        scanner.scanUntil(tagRes[1]);
+        type = '&';
       } else {
-        if (is_kinda_truthy(context[name])) {
-          value = context[name];
-        } else if (is_kinda_truthy(this.context[name])) {
-          value = this.context[name];
-        }
+        value = scanner.scanUntil(tagRes[1]);
       }
 
-      if (typeof value == "function") {
-        return value.apply(context);
+      // Match the closing tag.
+      if (!scanner.scan(tagRes[1])) throw new Error('Unclosed tag at ' + scanner.pos);
+
+      token = [type, value, start, scanner.pos];
+      tokens.push(token);
+
+      if (type === '#' || type === '^') {
+        sections.push(token);
+      } else if (type === '/') {
+        // Check section nesting.
+        if (sections.length === 0) throw new Error('Unopened section "' + value + '" at ' + start);
+        var openSection = sections.pop();
+        if (openSection[1] !== value) throw new Error('Unclosed section "' + openSection[1] + '" at ' + start);
+      } else if (type === 'name' || type === '{' || type === '&') {
+        nonSpace = true;
+      } else if (type === '=') {
+        // Set the tags for the next time around.
+        tags = value.split(spaceRe);
+        if (tags.length !== 2) throw new Error('Invalid tags at ' + start + ': ' + tags.join(', '));
+        tagRes = escapeTags(tags);
       }
-      if (value !== undefined) {
-        return value;
-      }
-      // silently ignore unkown variables
-      return "";
-    },
+    }
 
-    walk_context: function (name, context) {
-      var path = name.split('.');
-      // if the var doesn't exist in current context, check the top level context
-      var value_context = (context[path[0]] != undefined) ? context : this.context;
-      var value = value_context[path.shift()];
-      while (value != undefined && path.length > 0) {
-        value_context = value;
-        value = value[path.shift()];
-      }
-      // if the value is a function, call it, binding the correct context
-      if (typeof value == "function") {
-        return value.apply(value_context);
-      }
-      return value;
-    },
+    // Make sure there are no open sections when we're done.
+    var openSection = sections.pop();
+    if (openSection) throw new Error('Unclosed section "' + openSection[1] + '" at ' + scanner.pos);
+
+    tokens = squashTokens(tokens);
+
+    return nestTokens(tokens);
+  }
 
-    // Utility methods
+  mustache.name = "mustache.js";
+  mustache.version = "0.7.2";
+  mustache.tags = ["{{", "}}"];
 
-    /* includes tag */
-    includes: function (needle, haystack) {
-      return haystack.indexOf(this.otag + needle) != -1;
-    },
+  mustache.Scanner = Scanner;
+  mustache.Context = Context;
+  mustache.Writer = Writer;
+
+  mustache.parse = parseTemplate;
+
+  // Export the escaping function so that the user may override it.
+  // See https://github.com/janl/mustache.js/issues/244
+  mustache.escape = escapeHtml;
 
-    // by @langalex, support for arrays of strings
-    create_context: function (_context) {
-      if (this.is_object(_context)) {
-        return _context;
-      } else {
-        var iterator = ".";
-        if (this.pragmas["IMPLICIT-ITERATOR"]) {
-          iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator;
-        }
-        var ctx = {};
-        ctx[iterator] = _context;
-        return ctx;
-      }
-    },
+  // All Mustache.* functions use this writer.
+  var defaultWriter = new Writer();
 
-    is_object: function (a) {
-      return a && typeof a == "object";
-    },
+  /**
+   * Clears all cached templates and partials in the default writer.
+   */
+  mustache.clearCache = function () {
+    return defaultWriter.clearCache();
+  };
+
+  /**
+   * Compiles the given `template` to a reusable function using the default
+   * writer.
+   */
+  mustache.compile = function (template, tags) {
+    return defaultWriter.compile(template, tags);
+  };
 
-    /*
-      Why, why, why? Because IE. Cry, cry cry.
-    */
-    map: function (array, fn) {
-      if (typeof array.map == "function") {
-        return array.map(fn);
-      } else {
-        var r = [];
-        var l = array.length;
-        for(var i = 0; i < l; i++) {
-          r.push(fn(array[i]));
-        }
-        return r;
-      }
-    },
+  /**
+   * Compiles the partial with the given `name` and `template` to a reusable
+   * function using the default writer.
+   */
+  mustache.compilePartial = function (name, template, tags) {
+    return defaultWriter.compilePartial(name, template, tags);
+  };
+
+  /**
+   * Compiles the given array of tokens (the output of a parse) to a reusable
+   * function using the default writer.
+   */
+  mustache.compileTokens = function (tokens, template) {
+    return defaultWriter.compileTokens(tokens, template);
+  };
 
-    getCachedRegex: function (name, generator) {
-      var byOtag = regexCache[this.otag];
-      if (!byOtag) {
-        byOtag = regexCache[this.otag] = {};
-      }
+  /**
+   * Renders the `template` with the given `view` and `partials` using the
+   * default writer.
+   */
+  mustache.render = function (template, view, partials) {
+    return defaultWriter.render(template, view, partials);
+  };
 
-      var byCtag = byOtag[this.ctag];
-      if (!byCtag) {
-        byCtag = byOtag[this.ctag] = {};
-      }
+  // This is here for backwards compatibility with 0.4.x.
+  mustache.to_html = function (template, view, partials, send) {
+    var result = mustache.render(template, view, partials);
 
-      var regex = byCtag[name];
-      if (!regex) {
-        regex = byCtag[name] = generator(this.otag, this.ctag);
-      }
-
-      return regex;
+    if (typeof send === "function") {
+      send(result);
+    } else {
+      return result;
     }
   };
 
-  return({
-    name: "mustache.js",
-    version: "0.5.0-dev",
-
-    /*
-      Turns a template and view into HTML
-    */
-    to_html: function (template, view, partials, send_fun) {
-      var renderer = new Renderer();
-      if (send_fun) {
-        renderer.send = send_fun;
-      }
-      renderer.render(template, view || {}, partials);
-      if (!send_fun) {
-        return renderer.buffer.join("\n");
-      }
-    }
-  });
-}();
+}));
--- a/src/js/utils.js	Wed May 15 16:22:37 2013 +0200
+++ b/src/js/utils.js	Thu May 16 13:34:02 2013 +0200
@@ -122,3 +122,11 @@
 		}
 	});
 };
+
+IriSP.FakeClass = function(properties) {
+    var _this = this,
+        noop = (function() {});
+    IriSP._(properties).each(function(p) {
+        _this[p] = noop
+    });
+}
--- a/src/js/widgets-container/defaults.js	Wed May 15 16:22:37 2013 +0200
+++ b/src/js/widgets-container/defaults.js	Thu May 16 13:34:02 2013 +0200
@@ -106,7 +106,8 @@
 IriSP.guiDefaults = {
     width : 640,            
     container : 'LdtPlayer',
-    spacer_div_height : 0
+    spacer_div_height : 0,
+    widgets: []
 };
 
 /* End of defaults.js */
--- a/src/js/widgets-container/widget.js	Wed May 15 16:22:37 2013 +0200
+++ b/src/js/widgets-container/widget.js	Thu May 16 13:34:02 2013 +0200
@@ -27,8 +27,8 @@
     this.__subwidgets = [];
     
     /* Setting all the configuration options */
-    var _type = config.type,
-        _config = IriSP._.defaults({}, config, player.config.default_options, this.defaults),
+    var _type = config.type || "(unknown)",
+        _config = IriSP._.defaults({}, config, (player && player.config ? player.config.default_options : {}), this.defaults),
         _this = this;
     
     IriSP._(_config).forEach(function(_value, _key) {
@@ -50,7 +50,7 @@
     /* Setting this.player at the end in case it's been overriden
      * by a configuration option of the same name :-(
      */
-    this.player = player;
+    this.player = player || new IriSP.FakeClass(["on","trigger","off","loadWidget","loadMetadata"]);
     
     /* Adding classes and html attributes */
     this.$.addClass("Ldt-TraceMe Ldt-Widget").attr("widget-type", _type);
@@ -66,27 +66,31 @@
     );
     
     /* Loading Metadata if required */
+   
+    function onsourceloaded() {
+        if (_this.media_id) {
+                _this.media = this.getElement(_this.media_id);
+            } else {
+                var _mediaopts = {
+                    is_mashup: _this.is_mashup || false
+                }
+                _this.media = _this.source.getCurrentMedia(_mediaopts);
+            }
+            
+        _this.draw();
+        _this.player.trigger("widget-loaded");
+    }
     
     if (this.metadata) {
         /* Getting metadata */
         this.source = player.loadMetadata(this.metadata);
         
         /* Call draw when loaded */
-        this.source.onLoad(function() {
-            if (_this.media_id) {
-                _this.media = this.getElement(_this.media_id);
-            } else {
-                var _mediaopts = {
-                    is_mashup: _this.is_mashup || false
-                }
-                _this.media = this.getCurrentMedia(_mediaopts);
-            }
-            
-            _this.draw();
-            player.trigger("widget-loaded");
-        });
+        this.source.onLoad(onsourceloaded);
     } else {
-        this.draw();
+        if (this.source) {
+            onsourceloaded();
+        }
     }
     
     
@@ -98,6 +102,10 @@
 
 IriSP.Widgets.Widget.prototype.messages = {"en":{}};
 
+IriSP.Widgets.Widget.prototype.toString = function() {
+    return "Widget " + this.type;
+};
+
 IriSP.Widgets.Widget.prototype.templateToHtml = function(_template) {
     return Mustache.to_html(_template, this);
 };
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/external-widget.htm	Thu May 16 13:34:02 2013 +0200
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <title>Loading a Widget without the Metadataplayer widgeting framework</title>
+        <link href='libs/jquery-ui.css' rel='stylesheet' type='text/css'>
+<!--        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+-->        <link href='test.css' rel='stylesheet' type='text/css'>
+        <link href='metadataplayer/Controller.css' rel='stylesheet' type='text/css'>
+        <script type="text/javascript" src="libs/jquery.min.js" type="text/javascript"></script>
+        <script type="text/javascript" src="libs/jquery-ui.min.js" type="text/javascript"></script>
+        <script type="text/javascript" src="libs/underscore-min.js" type="text/javascript"></script>
+        <script type="text/javascript" src="libs/mustache.js" type="text/javascript"></script>
+        <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
+        <script type="text/javascript" src="metadataplayer/Controller.js" type="text/javascript"></script>
+        <style type="text/css">
+            #LdtPlayer {
+                width: 640px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <h1>Loading a Widget without the Metadataplayer widgeting framework</h1>
+        <div id="LdtPlayer">
+            <div id="Ldt-Video"></div>
+            <div id="Ldt-Controller"></div>
+        </div>
+        <script>
+            var myDir = new IriSP.Model.Directory(),
+                myProject = myDir.remoteSource({
+                    url: "json/ldt-ogv.json",
+                    serializer: IriSP.serializers.ldt
+                });
+            myProject.onLoad(function() {
+                IriSP.htmlPlayer(
+                    myProject.getCurrentMedia(),
+                    $("#Ldt-Video"),
+                    {
+                        width: 640,
+                        controls: true,
+                        autostart: true
+                    }
+                );
+                var controller = new IriSP.Widgets.Controller(null, {
+                    container: "Ldt-Controller",
+                    source: myProject
+                });
+            });
+        </script>
+    </body>
+</html>
--- a/test/index.htm	Wed May 15 16:22:37 2013 +0200
+++ b/test/index.htm	Thu May 16 13:34:02 2013 +0200
@@ -18,6 +18,7 @@
             <li><h2><a href="youtube.htm">with Youtube (uses Popcorn.js and the Popcorn Youtube plugin/player)</a></h2></li>
             <li><h2><a href="vimeo.htm">with Vimeo (uses Popcorn.js and the Popcorn Vimeo plugin/player)</a></h2></li>
             <li><h2><a href="dailymotion.htm">with Dailymotion (uses custom player functions)</a></h2></li>
+            <li><h2><a href="external-widget.htm">Loading a Widget without the Metadataplayer widgeting framework</a></h2></li>
         </ul>
     </body>
 </html>