Setting up the right toolbar.

src/node/utils/Settings.js

@@ -1,5 +1,5 @@
 /**
- * The Settings Modul reads the settings out of settings.json and provides 
+ * The Settings Modul reads the settings out of settings.json and provides
  * this information to the other modules
  */
 
@@ -46,7 +46,7 @@ exports.faviconTimeslider = "../../" + exports.favicon;
  * The IP ep-lite should listen to
  */
 exports.ip = "0.0.0.0";
-  
+
 /**
  * The Port ep-lite should listen to
  */
@@ -77,6 +77,23 @@ exports.dbSettings = { "filename" : path.join(exports.root, "dirty.db") };
  */
 exports.defaultPadText = "Welcome to Etherpad Lite!\n\nThis pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!\n\nEtherpad Lite on Github: http:\/\/j.mp/ep-lite\n";
 
+/**
+ * The toolbar buttons and order.
+ */
+exports.toolbar = {
+  left: [
+    ["bold", "italic", "underline", "strikethrough"],
+    ["orderedlist", "unorderedlist", "indent", "outdent"],
+    ["undo", "redo"],
+    ["clearauthorship"]
+  ],
+  right: [
+    ["importexport", "timeslider", "savedrevision"],
+    ["settings", "embed"],
+    ["showusers"]
+  ]
+}
+
 /**
  * A flag that requires any user to have a valid session (via the api) before accessing a pad
  */
@@ -179,7 +196,7 @@ exports.reloadSettings = function reloadSettings() {
       console.warn("Unknown Setting: '" + i + "'. This setting doesn't exist or it was removed");
     }
   }
-  
+
   log4js.configure(exports.logconfig);//Configure the logging appenders
   log4js.setGlobalLogLevel(exports.loglevel);//set loglevel
   log4js.replaceConsole();

src/node/utils/toolbar.js

@@ -3,26 +3,47 @@
  */
 
 var _ = require("underscore")
+  , tagAttributes
+  , tag
   , defaultButtons
   , Button
   , ButtonsGroup
   , Separator
-  , defaultButtonAttributes
-  , buttonTemplate;
-
-buttonTemplate = _.template(
-  '<li class="acl-write" id="<%= attributes.id %>" data-key="<%= attributes.key %>"><a class="<%= grouping %>" data-l10n-id="<%= attributes.localizationId %>"><span class="buttonicon <%= attributes.icon %>"></span></a></li>'
-);
+  , defaultButtonAttributes;
 
 defaultButtonAttributes = function (name, overrides) {
   return {
-    id: name,
     key: name,
     localizationId: "pad.toolbar." + name + ".title",
     icon: "buttonicon-" + name
   };
 };
 
+tag = function (name, attributes, contents) {
+  var aStr = tagAttributes(attributes);
+
+  if (contents) {
+    return '<' + name + aStr + '>' + contents + '</' + name + '>';
+  }
+  else {
+    return '<' + name + aStr + '/>';
+  }
+};
+
+tagAttributes = function (attributes) {
+  attributes = attributes || {};
+  attributes = _.reduce(attributes, function (o, val, name) {
+    if (!_.isUndefined(val)) {
+      o[name] = val;
+    }
+    return o;
+  }, {});
+
+  return " " + _.map(attributes, function (val, name) {
+    return "" + name + '="' + _.escape(val) + '"';
+  }, " ");
+};
+
 defaultButtons = {
   bold: defaultButtonAttributes("bold"),
   italic: defaultButtonAttributes("italic"),
@@ -30,14 +51,12 @@ defaultButtons = {
   strikethrough: defaultButtonAttributes("strikethrough"),
 
   orderedlist: {
-    id: "orderedlist",
     key: "insertorderedlist",
     localizationId: "pad.toolbar.ol.title",
     icon: "buttonicon-insertorderedlist"
   },
 
   unorderedlist: {
-    id: "unorderedlist",
     key: "insertunorderedlist",
     localizationId: "pad.toolbar.ul.title",
     icon: "buttonicon-insertunorderedlist"
@@ -45,7 +64,6 @@ defaultButtons = {
 
   indent: defaultButtonAttributes("indent"),
   outdent: {
-    id: "outdent",
     key: "outdent",
     localizationId: "pad.toolbar.unindent.title",
     icon: "buttonicon-outdent"
@@ -55,12 +73,27 @@ defaultButtons = {
   redo: defaultButtonAttributes("redo"),
 
   clearauthorship: {
-    id: "clearAuthorship",
     key: "clearauthorship",
     localizationId: "pad.toolbar.clearAuthorship.title",
     icon: "buttonicon-clearauthorship"
-  }
+  },
 
+  importexport: {
+    key: "import_export",
+    localizationId: "pad.toolbar.import_export.title",
+    icon: "buttonicon-import_export"
+  },
+
+  timeslider: {
+    onclick: "document.location = document.location.pathname + '/timeslider'",
+    localizationId: "pad.toolbar.timeslider.title",
+    icon: "buttonicon-history"
+  },
+
+  savedrevision: defaultButtonAttributes("savedRevision"),
+  settings: defaultButtonAttributes("settings"),
+  embed: defaultButtonAttributes("embed"),
+  showusers: defaultButtonAttributes("showusers")
 };
 
 ButtonsGroup = function () {
@@ -100,23 +133,39 @@ ButtonsGroup.prototype.render = function () {
 
 Button = function (attributes) {
   this.attributes = attributes;
+
+
 };
 
-Button.prototype.grouping = "";
-Button.prototype.render = function () {
-  return buttonTemplate(this);
-};
+_.extend(Button.prototype, {
+  grouping: "",
+
+  render: function () {
+    var liAttributes = {
+      "data-key": this.attributes.key,
+      "onclick": this.attributes.onclick
+    };
+    return tag("li", liAttributes,
+      tag("a", { "class": this.grouping, "data-l10n-id": this.attributes.localizationId },
+        tag("span", { "class": "buttonicon " + this.attributes.icon })
+      )
+    );
+  }
+});
 
 Separator = function () {};
 Separator.prototype.render = function () {
-  return '<li class="acl-write separator"></li>';
+  return tag("li", { "class": "separator"});
 };
 
 module.exports = {
+  separator: function () {
+    return (new Separator).render();
+  },
   menu: function (buttons) {
     var groups = _.map(buttons, function (group) {
       return ButtonsGroup.fromArray(group).render();
     });
-    return groups.join(new Separator().render());
+    return groups.join(this.separator());
   }
 };