Making the formatting toolbar easier to build.

available_plugins/ep_formatting/plugin.js

@@ -1,6 +1,102 @@
-var eejs = require('ep_etherpad-lite/node/eejs/');
+var eejs = require('ep_etherpad-lite/node/eejs/')
+  , _ = require('ep_etherpad-lite/static/js/underscore')._
+  , defaultButtons = []
+  , registeredButtons = {}
+  , helpers;
+
+helpers = {
+  mapButtons: function (buttonGroups, registeredButtons) {
+    var self = this;
+    return _.map(buttonGroups, function (group) {
+      return _.map(group, function (buttonName) {
+        return registeredButtons[buttonName];
+      });
+    });
+  },
+  renderToolbar: function (toolbar) {
+    var self = this;
+    return _.map(toolbar, function (buttonGroup, index) {
+      var str = (index == 0)
+        ? ""
+        : self.renderSeparator();
+      return str + self.renderGroup(buttonGroup);
+    }).join("");
+  },
+  renderGroup: function (buttons) {
+    if (buttons.length === 1) {
+      return this.renderSingleButton(buttons[0]);
+    }
+    else {
+      return this.renderFirstButton(buttons[0]) +
+        this.renderMiddleGroup(buttons.slice(1, -1)) +
+        this.renderLastButton(buttons[buttons.length - 1]);
+    }
+  },
+  renderSingleButton: function (button) {
+    return this.renderButton(button);
+  },
+  renderFirstButton: function (button) {
+    return this.renderButton(button, "left");
+  },
+  renderMiddleButton: function (button) {
+    return this.renderButton(button, "middle");
+  },
+  renderMiddleGroup: function (buttons) {
+    var self = this;
+    return _.map(buttons, function (button) {
+      return self.renderMiddleButton(button);
+    }).join("");
+  },
+  renderLastButton: function (button) {
+    return this.renderButton(button, "right");
+  },
+  renderButton: function (button, position) {
+    var template = "ep_formatting/templates/button.ejs"
+    return eejs.require(template, {
+      button: button,
+      groupPosition: position
+    });
+  },
+  renderSeparator: function () {
+    return '<li class="acl-write separator"></li>'
+  }
+};
+
+var registerButtonObject = function (id, key, title, cssClass) {
+  var button = {
+    "id": id,
+    "key": key,
+    "title": title,
+    "cssClass": cssClass
+  };
+  registeredButtons[id] = button;
+  return button;
+};
+
+registerButtonObject("bold", "bold", "Bold (ctrl-B)", "buttonicon-bold");
+registerButtonObject("italic", "italic", "Italics (ctrl-I)", "buttonicon-italic");
+registerButtonObject("underline", "underline", "Underline (ctrl-U)", "buttonicon-underline");
+registerButtonObject("strikethrough", "strikethrough", "Strikethrough", "buttonicon-strikethrough");
+
+registerButtonObject("orderedlist", "insertorderedlist", "Toggle Ordered List", "buttonicon-insertorderedlist");
+registerButtonObject("unorderedlist", "insertunorderedlist", "Toggle Bullet List", "buttonicon-insertunorderedlist");
+registerButtonObject("indent", "indent", "Indent", "buttonicon-indent");
+registerButtonObject("outdent", "outdent", "Unindent", "buttonicon-outdent");
+
+registerButtonObject("undo", "undo", "Undo (ctrl-Z)", "buttonicon-undo");
+registerButtonObject("redo", "redo", "Redo (ctrl-Y)", "buttonicon-redo");
+
+registerButtonObject("clearauthorship", "clearauthorship", "Clear Authorship Colors", "buttonicon-clearauthorship");
+
+defaultButtons = [
+  ["bold", "italic", "underline", "strikethrough"],
+  ["orderedlist", "unorderedlist", "indent", "outdent"],
+  ["undo", "redo"],
+  ["clearauthorship"]
+];
 
 exports.eejsBlock_editbarMenuLeft = function (hook_name, args, cb) {
-  args.content = args.content + eejs.require("ep_formatting/templates/buttons.ejs");
+  var buttons = helpers.mapButtons(defaultButtons, registeredButtons);
+  args.content = args.content + helpers.renderToolbar(buttons);
   return cb();
 }

available_plugins/ep_formatting/templates/button.ejs

@@ -0,0 +1,11 @@
+<%
+  var groupClass = ""
+  if (groupPosition !== undefined) {
+    groupClass = "grouped-" + groupPosition;
+  }
+%>
+<li class="acl-write" id="<%= button.id %>" data-key="<%= button.key %>">
+    <a class="<%= groupClass %>" title="<%= button.title %>">
+      <span class="buttonicon <%= button.cssClass %>"></span>
+    </a>
+</li>

available_plugins/ep_formatting/templates/buttons.ejs

@@ -1,58 +0,0 @@
-<li class="acl-write" id="bold" data-key="bold">
-    <a class="grouped-left" title="Bold (ctrl-B)">
-      <span class="buttonicon buttonicon-bold"></span>
-    </a>
-</li>
-<li class="acl-write" id="italic" data-key="italic">
-    <a class="grouped-middle" title="Italics (ctrl-I)">
-      <span class="buttonicon buttonicon-italic"></span>
-    </a>
-</li>
-<li class="acl-write" id="underline" data-key="underline">
-    <a class="grouped-middle" title="Underline (ctrl-U)">
-      <span class="buttonicon buttonicon-underline"></span>
-    </a>
-</li>
-<li class="acl-write" id="strikethrough" data-key="strikethrough">
-    <a class="grouped-right" title="Strikethrough">
-      <span class="buttonicon buttonicon-strikethrough"></span>
-    </a>
-</li>
-<li class="acl-write separator"></li>
-<li class="acl-write" id="oderedlist" data-key="insertorderedlist">
-    <a class="grouped-left" title="Toggle Ordered List">
-      <span class="buttonicon buttonicon-insertorderedlist"></span>
-    </a>
-</li>
-<li class="acl-write" id="unoderedlist" data-key="insertunorderedlist">
-    <a class="grouped-middle" title="Toggle Bullet List">
-      <span class="buttonicon buttonicon-insertunorderedlist"></span>
-    </a>
-</li>
-<li class="acl-write" id="indent" data-key="indent">
-    <a class="grouped-middle" title="Indent">
-      <span class="buttonicon buttonicon-indent"></span>
-    </a>
-</li>
-<li class="acl-write" id="outdent" data-key="outdent">
-    <a class="grouped-right" title="Unindent">
-      <span class="buttonicon buttonicon-outdent"></span>
-    </a>
-</li>
-<li class="acl-write separator"></li>
-<li class="acl-write" id="undo" data-key="undo">
-    <a class="grouped-left" title="Undo (ctrl-Z)">
-      <span class="buttonicon buttonicon-undo"></span>
-    </a>
-</li>
-<li class="acl-write" id="redo" data-key="redo">
-    <a class="grouped-right" title="Redo (ctrl-Y)">
-      <span class="buttonicon buttonicon-redo"></span>
-    </a>
-</li>
-<li class="acl-write separator"></li>
-<li class="acl-write" id="clearAuthorship" data-key="clearauthorship">
-    <a title="Clear Authorship Colors">
-      <span class="buttonicon buttonicon-clearauthorship"></span>
-    </a>
-</li>