Converted tabs over to the templating plugin, other rendering to follow

js/tab.js

@@ -2,8 +2,9 @@ define([
     "command",
     "storage/file",
     "util/manos",
-    "settings!ace"
-  ], function(command, File, M, Settings) {
+    "settings!ace",
+    "util/template!templates/tab.html"
+  ], function(command, File, M, Settings, inflate) {
 
   var EditSession = ace.require("ace/edit_session").EditSession;
   
@@ -96,24 +97,13 @@ define([
   };
   
   Tab.prototype.render = function(index) {
-    var element = document.createElement("a");
-    element.setAttribute("draggable", true);
-    element.setAttribute("command", "session:raise-tab");
-    element.setAttribute("argument", index);
-    element.setAttribute("title", this.fileName);
-    element.setAttribute("href", "tabs/" + index);
-    element.className = "tab";
-    if (this.animationClass) {
-      element.addClass(this.animationClass);
-    }
+    var element = inflate.get("templates/tab.html", {
+      index: index,
+      fileName: this.fileName,
+      modified: this.modified,
+      animation: this.animationClass
+    });
     this.animationClass = "";
-    element.innerHTML = this.fileName + (this.modified ? " •" : "");
-    var close = document.createElement("a");
-    close.innerHTML = "×";
-    close.className = "close";
-    close.setAttribute("command", "session:close-tab");
-    close.setAttribute("argument", index);
-    element.append(close);
     return element;
   }
   

js/util/inflate.js

@@ -50,7 +50,7 @@ define([
         }
       } else {
         after = template.substr(found.index + found[0].length);
-        replacement = data[tag];
+        replacement = typeof data[tag] != "undefined" ? data[tag] : "";
       }
       template = before + replacement + after;
     }
@@ -65,6 +65,7 @@ define([
   
   var inflate = function(id, data) {
     var html = inflateHTML(id, data);
+    if (!html) return null;
     return parse(html);
   };
   
@@ -86,6 +87,7 @@ define([
   return {
     get: inflate,
     getHTML: inflateHTML,
+    load: load,
     getAsync: function(id, data) {
       if (cache[id]) {
         return Promise.resolve(inflate(id, data));

js/util/template.js

@@ -0,0 +1,20 @@
+define(["util/inflate"], function(inflate) {
+
+  /*
+
+  A plugin that pre-loads templates into the util/inflate cache, then passes
+  it through (similar to how the settings! plugin works).
+
+  */
+
+  return {
+    load: function(name, parentRequire, onLoad, config) {
+      var files = name.split(",");
+      var pending = files.map(inflate.load);
+      Promise.all(pending).then(function() {
+        onLoad(inflate);
+      });
+    }
+  }
+
+});

templates/tab.html

@@ -0,0 +1,11 @@
+<a
+  draggable
+  href="tabs/{{index}}"
+  command="session:raise-tab"
+  argument={{index}}
+  title="{{fileName}}"
+  class="tab {{animation}}"
+>
+  {{fileName}} {{#modified}}&bull;{{/modified}}
+  <a class="close" command="session:close-tab" argument={{index}}>&times;</a>
+</a>