From c57bc444cde7d634dd17e6d83c492f05f890ef10 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sun, 3 Mar 2013 15:53:17 -0800
Subject: [PATCH 01/11] basic toolbar setup

---
 src/node/utils/toolbar.js | 122 ++++++++++++++++++++++++++++++++++++++
 src/templates/pad.html    |  86 +++++++--------------------
 2 files changed, 145 insertions(+), 63 deletions(-)
 create mode 100644 src/node/utils/toolbar.js

diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
new file mode 100644
index 00000000..1bfcda01
--- /dev/null
+++ b/src/node/utils/toolbar.js
@@ -0,0 +1,122 @@
+/**
+ * The Toolbar Module creates and renders the toolbars and buttons
+ */
+
+var _ = require("underscore")
+  , 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 = function (name, overrides) {
+  return {
+    id: name,
+    key: name,
+    localizationId: "pad.toolbar." + name + ".title",
+    icon: "buttonicon-" + name
+  };
+};
+
+defaultButtons = {
+  bold: defaultButtonAttributes("bold"),
+  italic: defaultButtonAttributes("italic"),
+  underline: defaultButtonAttributes("underline"),
+  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"
+  },
+
+  indent: defaultButtonAttributes("indent"),
+  outdent: {
+    id: "outdent",
+    key: "outdent",
+    localizationId: "pad.toolbar.unindent.title",
+    icon: "buttonicon-outdent"
+  },
+
+  undo: defaultButtonAttributes("undo"),
+  redo: defaultButtonAttributes("redo"),
+
+  clearauthorship: {
+    id: "clearAuthorship",
+    key: "clearauthorship",
+    localizationId: "pad.toolbar.clearAuthorship.title",
+    icon: "buttonicon-clearauthorship"
+  }
+
+};
+
+ButtonsGroup = function () {
+  this.buttons = [];
+};
+
+ButtonsGroup.fromArray = function (array) {
+  var btnGroup = new ButtonsGroup();
+  _.each(array, function (btnName) {
+    var b = new Button(defaultButtons[btnName]);
+    btnGroup.addButton(b);
+  });
+  return btnGroup;
+};
+
+ButtonsGroup.prototype.addButton = function (button) {
+  this.buttons.push(button);
+  return this;
+};
+
+ButtonsGroup.prototype.render = function () {
+  if (this.buttons.length == 1) {
+    this.buttons[0].grouping = "";
+  }
+  else {
+    _.first(this.buttons).grouping = "grouped-left";
+    _.last(this.buttons).grouping = "grouped-right";
+    _.each(this.buttons.slice(1, -1), function (btn) {
+      btn.grouping = "grouped-middle"
+    });
+  }
+
+  return _.map(this.buttons, function (btn) {
+    return btn.render();
+  }).join("\n");
+};
+
+Button = function (attributes) {
+  this.attributes = attributes;
+};
+
+Button.prototype.grouping = "";
+Button.prototype.render = function () {
+  return buttonTemplate(this);
+};
+
+Separator = function () {};
+Separator.prototype.render = function () {
+  return '<li class="acl-write separator"></li>';
+};
+
+module.exports = {
+  menu: function (buttons) {
+    var groups = _.map(buttons, function (group) {
+      return ButtonsGroup.fromArray(group).render();
+    });
+    return groups.join(new Separator().render());
+  }
+};
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 76df5133..bde1c7ee 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -1,6 +1,22 @@
 <%
   var settings = require("ep_etherpad-lite/node/utils/Settings")
     , langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs
+    , toolbar = require("ep_etherpad-lite/node/utils/toolbar")
+    , leftToolbar
+    , rightToolbar;
+
+
+  if (settings.ep_toolbar && settings.ep_toolbar.left) {
+      leftToolbar = settings.ep_toolbar.left;
+  }
+  else {
+      leftToolbar = [
+          ["bold", "italic", "underline", "strikethrough"],
+          ["orderedlist", "unorderedlist", "indent", "outdent"],
+          ["undo", "redo"],
+          ["clearauthorship"]
+      ];
+  }
 %>
 <!doctype html>
 <% e.begin_block("htmlHead"); %>
@@ -54,66 +70,10 @@
             <div id="overlay">
                 <div id="overlay-inner"></div>
             </div>
+
             <ul class="menu_left">
                 <% e.begin_block("editbarMenuLeft"); %>
-                <li class="acl-write" id="bold" data-key="bold">
-                    <a class="grouped-left" data-l10n-id="pad.toolbar.bold.title">
-                      <span class="buttonicon buttonicon-bold"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="italic" data-key="italic">
-                    <a class="grouped-middle" data-l10n-id="pad.toolbar.italic.title">
-                      <span class="buttonicon buttonicon-italic"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="underline" data-key="underline">
-                    <a class="grouped-middle" data-l10n-id="pad.toolbar.underline.title">
-                      <span class="buttonicon buttonicon-underline"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="strikethrough" data-key="strikethrough">
-                    <a class="grouped-right" data-l10n-id="pad.toolbar.strikethrough.title">
-                      <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" data-l10n-id="pad.toolbar.ol.title">
-                      <span class="buttonicon buttonicon-insertorderedlist"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="unoderedlist" data-key="insertunorderedlist">
-                    <a class="grouped-middle" data-l10n-id="pad.toolbar.ul.title">
-                      <span class="buttonicon buttonicon-insertunorderedlist"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="indent" data-key="indent">
-                    <a class="grouped-middle" data-l10n-id="pad.toolbar.indent.title">
-                      <span class="buttonicon buttonicon-indent"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="outdent" data-key="outdent">
-                    <a class="grouped-right" data-l10n-id="pad.toolbar.unindent.title">
-                      <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" data-l10n-id="pad.toolbar.undo.title">
-                      <span class="buttonicon buttonicon-undo"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="redo" data-key="redo">
-                    <a class="grouped-right" data-l10n-id="pad.toolbar.redo.title">
-                      <span class="buttonicon buttonicon-redo"></span>
-                    </a>
-                </li>
-                <li class="acl-write separator"></li>
-                <li class="acl-write" id="clearAuthorship" data-key="clearauthorship">
-                    <a data-l10n-id="pad.toolbar.clearAuthorship.title">
-                      <span class="buttonicon buttonicon-clearauthorship"></span>
-                    </a>
-                </li>
+                <%- toolbar.menu(leftToolbar) %>
                 <% e.end_block(); %>
             </ul>
             <ul class="menu_right">
@@ -289,7 +249,7 @@
                 <% e.end_block(); %>
             </div>
         </div>
-        
+
         <div id="connectivity" class="popup">
             <% e.begin_block("modals"); %>
                 <div class="connected visible">
@@ -391,7 +351,7 @@
         <% e.begin_block("scripts"); %>
         <script type="text/javascript">
             (function() {
-              // Display errors on page load to the user 
+              // Display errors on page load to the user
               // (Gets overridden by padutils.setupGlobalExceptionHandler)
               var originalHandler = window.onerror;
               window.onerror = function(msg, url, line) {
@@ -404,7 +364,7 @@
               };
             })();
         </script>
-        
+
         <script type="text/javascript" src="../static/js/require-kernel.js"></script>
         <script type="text/javascript" src="../socket.io/socket.io.js"></script>
 
@@ -419,10 +379,10 @@
             var clientVars = {};
             (function () {
               var pathComponents = location.pathname.split('/');
-              
+
               // Strip 'p' and the padname from the pathname and set as baseURL
               var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/';
-                            
+
               require.setRootURI(baseURL + "javascripts/src");
               require.setLibraryURI(baseURL + "javascripts/lib");
               require.setGlobalKeyPath("require");

From 292a3bd7b73fe99e6024e91ff734b2a01218e62e Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sat, 9 Mar 2013 14:57:42 -0800
Subject: [PATCH 02/11] Setting up the right toolbar.

---
 src/node/utils/Settings.js   | 23 ++++++++--
 src/node/utils/toolbar.js    | 85 ++++++++++++++++++++++++++++--------
 src/static/js/pad_editbar.js | 14 +++---
 src/templates/pad.html       | 53 ++--------------------
 4 files changed, 97 insertions(+), 78 deletions(-)

diff --git a/src/node/utils/Settings.js b/src/node/utils/Settings.js
index 8435ab2c..67803324 100644
--- a/src/node/utils/Settings.js
+++ b/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();
diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index 1bfcda01..5bff6bb8 100644
--- a/src/node/utils/toolbar.js
+++ b/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());
   }
 };
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index 91a07bf9..7346ce78 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -1,5 +1,5 @@
 /**
- * This code is mostly from the old Etherpad. Please help us to comment this code. 
+ * This code is mostly from the old Etherpad. Please help us to comment this code.
  * This helps other people to understand this code better and helps them to improve it.
  * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED
  */
@@ -117,7 +117,7 @@ var padeditbar = (function()
       $("#editbar").addClass('disabledtoolbar').removeClass("enabledtoolbar");
     },
     toolbarClick: function(cmd)
-    {  
+    {
       if (self.isEnabled())
       {
         if(cmd == "showusers")
@@ -189,7 +189,7 @@ var padeditbar = (function()
     toggleDropDown: function(moduleName, cb)
     {
       var modules = ["settings", "connectivity", "importexport", "embed", "users"];
-      
+
       // hide all modules and remove highlighting of all buttons
       if(moduleName == "none")
       {
@@ -199,9 +199,9 @@ var padeditbar = (function()
           //skip the userlist
           if(modules[i] == "users")
             continue;
-          
+
           var module = $("#" + modules[i]);
-        
+
           if(module.css('display') != "none")
           {
             $("#" + modules[i] + "link").removeClass("selected");
@@ -211,14 +211,14 @@ var padeditbar = (function()
         }
         if(!returned && cb) return cb();
       }
-      else 
+      else
       {
         // hide all modules that are not selected and remove highlighting
         // respectively add highlighting to the corresponding button
         for(var i=0;i<modules.length;i++)
         {
           var module = $("#" + modules[i]);
-        
+
           if(module.css('display') != "none")
           {
             $("#" + modules[i] + "link").removeClass("selected");
diff --git a/src/templates/pad.html b/src/templates/pad.html
index bde1c7ee..c76746ad 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -1,22 +1,7 @@
 <%
   var settings = require("ep_etherpad-lite/node/utils/Settings")
     , langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs
-    , toolbar = require("ep_etherpad-lite/node/utils/toolbar")
-    , leftToolbar
-    , rightToolbar;
-
-
-  if (settings.ep_toolbar && settings.ep_toolbar.left) {
-      leftToolbar = settings.ep_toolbar.left;
-  }
-  else {
-      leftToolbar = [
-          ["bold", "italic", "underline", "strikethrough"],
-          ["orderedlist", "unorderedlist", "indent", "outdent"],
-          ["undo", "redo"],
-          ["clearauthorship"]
-      ];
-  }
+    , toolbar = require("ep_etherpad-lite/node/utils/toolbar");
 %>
 <!doctype html>
 <% e.begin_block("htmlHead"); %>
@@ -73,44 +58,12 @@
 
             <ul class="menu_left">
                 <% e.begin_block("editbarMenuLeft"); %>
-                <%- toolbar.menu(leftToolbar) %>
+                <%- toolbar.menu(settings.toolbar.left) %>
                 <% e.end_block(); %>
             </ul>
             <ul class="menu_right">
                 <% e.begin_block("editbarMenuRight"); %>
-                <li data-key="import_export">
-                    <a class="grouped-left" id="importexportlink" data-l10n-id="pad.toolbar.import_export.title">
-                        <span class="buttonicon buttonicon-import_export"></span>
-                    </a>
-                </li>
-                <li onClick="document.location = document.location.pathname+ '/timeslider'">
-                    <a id="timesliderlink" class="grouped-middle" data-l10n-id="pad.toolbar.timeslider.title">
-                        <span class="buttonicon buttonicon-history"></span>
-                    </a>
-                </li>
-                <li class="acl-write" data-key="savedRevision">
-                    <a class="grouped-right" id="revisionlink" data-l10n-id="pad.toolbar.savedRevision.title">
-                        <span class="buttonicon buttonicon-savedRevision"></span>
-                    </a>
-                </li>
-                <li class="acl-write separator"></li>
-                <li class="acl-write" data-key="settings">
-                    <a class="grouped-left" id="settingslink" data-l10n-id="pad.toolbar.settings.title">
-                        <span class="buttonicon buttonicon-settings"></span>
-                    </a>
-                </li>
-                <li data-key="embed">
-                    <a class="grouped-right" id="embedlink" data-l10n-id="pad.toolbar.embed.title">
-                        <span class="grouped-right buttonicon buttonicon-embed"></span>
-                    </a>
-                </li>
-                <li class="separator"></li>
-                <li id="usericon" data-key="showusers">
-                    <a data-l10n-id="pad.toolbar.showusers.title">
-                        <span class="buttonicon buttonicon-showusers"></span>
-                        <span id="online_count">1</span>
-                    </a>
-                </li>
+                <%- toolbar.menu(settings.toolbar.right) %>
                 <% e.end_block(); %>
             </ul>
         </div>

From 52aa7d3997880d2dc2bb1777fb90811fa7f669e6 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sun, 10 Mar 2013 15:42:12 -0700
Subject: [PATCH 03/11] Registering commands on the ace toolbar

---
 src/node/utils/toolbar.js    |  74 ++++++++++++----
 src/static/js/pad_editbar.js | 162 +++++++++++++++++++----------------
 2 files changed, 147 insertions(+), 89 deletions(-)

diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index 5bff6bb8..3a073ff3 100644
--- a/src/node/utils/toolbar.js
+++ b/src/node/utils/toolbar.js
@@ -22,17 +22,16 @@ defaultButtonAttributes = function (name, overrides) {
 tag = function (name, attributes, contents) {
   var aStr = tagAttributes(attributes);
 
-  if (contents) {
+  if (_.isString(contents) && contents.length > 0) {
     return '<' + name + aStr + '>' + contents + '</' + name + '>';
   }
   else {
-    return '<' + name + aStr + '/>';
+    return '<' + name + aStr + '></' + name + '>';
   }
 };
 
 tagAttributes = function (attributes) {
-  attributes = attributes || {};
-  attributes = _.reduce(attributes, function (o, val, name) {
+  attributes = _.reduce(attributes || {}, function (o, val, name) {
     if (!_.isUndefined(val)) {
       o[name] = val;
     }
@@ -41,7 +40,7 @@ tagAttributes = function (attributes) {
 
   return " " + _.map(attributes, function (val, name) {
     return "" + name + '="' + _.escape(val) + '"';
-  }, " ");
+  }).join(" ");
 };
 
 defaultButtons = {
@@ -85,7 +84,7 @@ defaultButtons = {
   },
 
   timeslider: {
-    onclick: "document.location = document.location.pathname + '/timeslider'",
+    key: "showTimeSlider",
     localizationId: "pad.toolbar.timeslider.title",
     icon: "buttonicon-history"
   },
@@ -101,10 +100,9 @@ ButtonsGroup = function () {
 };
 
 ButtonsGroup.fromArray = function (array) {
-  var btnGroup = new ButtonsGroup();
+  var btnGroup = new this;
   _.each(array, function (btnName) {
-    var b = new Button(defaultButtons[btnName]);
-    btnGroup.addButton(b);
+    btnGroup.addButton(Button.load(btnName));
   });
   return btnGroup;
 };
@@ -133,19 +131,24 @@ ButtonsGroup.prototype.render = function () {
 
 Button = function (attributes) {
   this.attributes = attributes;
+};
 
-
+Button.load = function (btnName) {
+  return new Button(defaultButtons[btnName]);
 };
 
 _.extend(Button.prototype, {
   grouping: "",
 
-  render: function () {
-    var liAttributes = {
+  li: function (attributes, contents) {
+    attributes = _.extend({
       "data-key": this.attributes.key,
-      "onclick": this.attributes.onclick
-    };
-    return tag("li", liAttributes,
+    }, attributes);
+    return tag("li", attributes, contents);
+  },
+
+  render: function () {
+    return this.li({},
       tag("a", { "class": this.grouping, "data-l10n-id": this.attributes.localizationId },
         tag("span", { "class": "buttonicon " + this.attributes.icon })
       )
@@ -153,15 +156,54 @@ _.extend(Button.prototype, {
   }
 });
 
+SelectButton = function (attributes) {
+  this.attributes = attributes;
+  this.options = [];
+};
+
+_.extend(SelectButton.prototype, Button.prototype, {
+  addOption: function (value, text, attributes) {
+    this.options.push({
+      value: value,
+      text: text,
+      attributes: attributes
+    });
+    return this;
+  },
+
+  select: function (attributes) {
+    var self = this
+      , options = [];
+
+    _.each(this.options, function (opt) {
+      var a = _.extend({
+        value: opt.value
+      }, opt.attributes);
+
+      options.push( tag("option", a, opt.text) );
+    });
+    return tag("select", attributes, options.join(""));
+  },
+  render: function () {
+    return this.li({ id: this.attributes.id },
+      this.select({ id: this.attributes.selectId })
+    );
+  }
+});
+
 Separator = function () {};
 Separator.prototype.render = function () {
-  return tag("li", { "class": "separator"});
+  return tag("li", { "class": "separator" });
 };
 
 module.exports = {
+  availableButtons: {},
   separator: function () {
     return (new Separator).render();
   },
+  selectButton: function (attributes) {
+    return new SelectButton(attributes);
+  },
   menu: function (buttons) {
     var groups = _.map(buttons, function (group) {
       return ButtonsGroup.fromArray(group).render();
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index 7346ce78..31273d71 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -24,15 +24,6 @@ var padutils = require('./pad_utils').padutils;
 var padeditor = require('./pad_editor').padeditor;
 var padsavedrevs = require('./pad_savedrevs');
 
-function indexOf(array, value) {
-  for (var i = 0, ii = array.length; i < ii; i++) {
-    if (array[i] == value) {
-      return i;
-    }
-  }
-  return -1;
-}
-
 var padeditbar = (function()
 {
 
@@ -95,8 +86,7 @@ var padeditbar = (function()
   }());
 
   var self = {
-    init: function()
-    {
+    init: function() {
       var self = this;
       $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
       $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
@@ -116,72 +106,30 @@ var padeditbar = (function()
     {
       $("#editbar").addClass('disabledtoolbar').removeClass("enabledtoolbar");
     },
+    commands: {},
+    registerCommand: function (cmd, callback) {
+      this.commands[cmd] = callback;
+      return this;
+    },
+    registerDropdownCommand: function (cmd, dropdown) {
+      dropdown = dropdown || cmd;
+      this.registerCommand(cmd, function () {
+        self.toggleDropDown(dropdown);
+      });
+    },
+    registerAceCommand: function (cmd, callback) {
+      this.registerCommand(cmd, function (cmd, ace) {
+        ace.callWithAce(function (ace) {
+          callback(cmd, ace);
+        }, cmd, true);
+      });
+    },
     toolbarClick: function(cmd)
     {
       if (self.isEnabled())
       {
-        if(cmd == "showusers")
-        {
-          self.toggleDropDown("users");
-        }
-        else if (cmd == 'settings')
-        {
-              self.toggleDropDown("settings");
-        }
-        else if (cmd == 'connectivity')
-        {
-              self.toggleDropDown("connectivity");
-        }
-        else if (cmd == 'embed')
-        {
-          self.setEmbedLinks();
-          $('#linkinput').focus().select();
-          self.toggleDropDown("embed");
-        }
-        else if (cmd == 'import_export')
-        {
-	      self.toggleDropDown("importexport");
-        }
-        else if (cmd == 'savedRevision')
-        {
-          padsavedrevs.saveNow();
-        }
-        else
-        {
-          padeditor.ace.callWithAce(function(ace)
-          {
-            if (cmd == 'bold' || cmd == 'italic' || cmd == 'underline' || cmd == 'strikethrough') ace.ace_toggleAttributeOnSelection(cmd);
-            else if (cmd == 'undo' || cmd == 'redo') ace.ace_doUndoRedo(cmd);
-            else if (cmd == 'insertunorderedlist') ace.ace_doInsertUnorderedList();
-            else if (cmd == 'insertorderedlist') ace.ace_doInsertOrderedList();
-            else if (cmd == 'indent')
-            {
-              if (!ace.ace_doIndentOutdent(false))
-              {
-                ace.ace_doInsertUnorderedList();
-              }
-            }
-            else if (cmd == 'outdent')
-            {
-              ace.ace_doIndentOutdent(true);
-            }
-            else if (cmd == 'clearauthorship')
-            {
-              if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret())
-              {
-                if (window.confirm(html10n.get("pad.editbar.clearcolors")))
-                {
-                  ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
-                    ['author', '']
-                  ]);
-                }
-              }
-              else
-              {
-                ace.ace_setAttributeOnSelection('author', '');
-              }
-            }
-          }, cmd, true);
+        if (this.commands[cmd]) {
+          this.commands[cmd](cmd, padeditor.ace);
         }
       }
       if(padeditor.ace) padeditor.ace.focus();
@@ -260,6 +208,74 @@ var padeditbar = (function()
       }
     }
   };
+
+  self.registerDropdownCommand("showusers", "users");
+  self.registerDropdownCommand("settings");
+  self.registerDropdownCommand("connectivity");
+  self.registerDropdownCommand("import_export", "importexport");
+
+  self.registerCommand("embed", function () {
+    self.setEmbedLinks();
+    $('#linkinput').focus().select();
+    self.toggleDropDown("embed");
+  });
+
+  self.registerCommand("savedRevision", function () {
+    padsavedrevs.saveNow();
+  });
+
+  self.registerCommand("showTimeSlider", function () {
+    document.location = document.location + "/timeslider";
+  });
+
+  function aceAttributeCommand (cmd, ace) {
+    ace.ace_toggleAttributeOnSelection(cmd);
+  }
+
+  self.registerAceCommand("bold", aceAttributeCommand);
+  self.registerAceCommand("italic", aceAttributeCommand);
+  self.registerAceCommand("underline", aceAttributeCommand);
+  self.registerAceCommand("strikethrough", aceAttributeCommand);
+
+  self.registerAceCommand("undo", function (cmd, ace) {
+    ace.ace_doUndoRedo(cmd);
+  });
+
+  self.registerAceCommand("redo", function (cmd) {
+    ace.ace_doUndoRedo(cmd);
+  });
+
+  self.registerAceCommand("insertunorderedlist", function (cmd, ace) {
+    ace.ace_doInsertUnorderedList();
+  });
+
+  self.registerAceCommand("insertorderedlist", function (cmd, ace) {
+    ace.ace_doInsertOrderedList();
+  });
+
+  self.registerAceCommand("indent", function (cmd, ace) {
+    if (!ace.ace_doIndentOutdent(false)) {
+      ace.ace_doInsertUnorderedList();
+    }
+  });
+
+  self.registerAceCommand("outdent", function (cmd, ace) {
+    ace.ace_doIndentOutdent(true);
+  });
+
+  self.registerAceCommand("clearauthorship", function (cmd, ace) {
+    if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret()) {
+      if (window.confirm(html10n.get("pad.editbar.clearcolors"))) {
+        ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
+          ['author', '']
+        ]);
+      }
+    }
+    else {
+      ace.ace_setAttributeOnSelection('author', '');
+    }
+  });
+
   return self;
 }());
 

From 988653b8cec8d733b09e70ffb69d8b66fbfa9874 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Tue, 12 Mar 2013 19:36:04 -0700
Subject: [PATCH 04/11] Toolbar hooks

---
 src/node/utils/toolbar.js | 120 +++++++++++++++++++++-----------------
 src/templates/pad.html    |   5 ++
 2 files changed, 71 insertions(+), 54 deletions(-)

diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index 3a073ff3..270c4aac 100644
--- a/src/node/utils/toolbar.js
+++ b/src/node/utils/toolbar.js
@@ -43,58 +43,6 @@ tagAttributes = function (attributes) {
   }).join(" ");
 };
 
-defaultButtons = {
-  bold: defaultButtonAttributes("bold"),
-  italic: defaultButtonAttributes("italic"),
-  underline: defaultButtonAttributes("underline"),
-  strikethrough: defaultButtonAttributes("strikethrough"),
-
-  orderedlist: {
-    key: "insertorderedlist",
-    localizationId: "pad.toolbar.ol.title",
-    icon: "buttonicon-insertorderedlist"
-  },
-
-  unorderedlist: {
-    key: "insertunorderedlist",
-    localizationId: "pad.toolbar.ul.title",
-    icon: "buttonicon-insertunorderedlist"
-  },
-
-  indent: defaultButtonAttributes("indent"),
-  outdent: {
-    key: "outdent",
-    localizationId: "pad.toolbar.unindent.title",
-    icon: "buttonicon-outdent"
-  },
-
-  undo: defaultButtonAttributes("undo"),
-  redo: defaultButtonAttributes("redo"),
-
-  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: {
-    key: "showTimeSlider",
-    localizationId: "pad.toolbar.timeslider.title",
-    icon: "buttonicon-history"
-  },
-
-  savedrevision: defaultButtonAttributes("savedRevision"),
-  settings: defaultButtonAttributes("settings"),
-  embed: defaultButtonAttributes("embed"),
-  showusers: defaultButtonAttributes("showusers")
-};
-
 ButtonsGroup = function () {
   this.buttons = [];
 };
@@ -134,7 +82,13 @@ Button = function (attributes) {
 };
 
 Button.load = function (btnName) {
-  return new Button(defaultButtons[btnName]);
+  var button = module.exports.availableButtons[btnName];
+  if (button.constructor === Button || button.constructor === SelectButton) {
+    return button;
+  }
+  else {
+    return new Button(button);
+  }
 };
 
 _.extend(Button.prototype, {
@@ -197,7 +151,65 @@ Separator.prototype.render = function () {
 };
 
 module.exports = {
-  availableButtons: {},
+  availableButtons: {
+    bold: defaultButtonAttributes("bold"),
+    italic: defaultButtonAttributes("italic"),
+    underline: defaultButtonAttributes("underline"),
+    strikethrough: defaultButtonAttributes("strikethrough"),
+
+    orderedlist: {
+      key: "insertorderedlist",
+      localizationId: "pad.toolbar.ol.title",
+      icon: "buttonicon-insertorderedlist"
+    },
+
+    unorderedlist: {
+      key: "insertunorderedlist",
+      localizationId: "pad.toolbar.ul.title",
+      icon: "buttonicon-insertunorderedlist"
+    },
+
+    indent: defaultButtonAttributes("indent"),
+    outdent: {
+      key: "outdent",
+      localizationId: "pad.toolbar.unindent.title",
+      icon: "buttonicon-outdent"
+    },
+
+    undo: defaultButtonAttributes("undo"),
+    redo: defaultButtonAttributes("redo"),
+
+    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: {
+      key: "showTimeSlider",
+      localizationId: "pad.toolbar.timeslider.title",
+      icon: "buttonicon-history"
+    },
+
+    savedrevision: defaultButtonAttributes("savedRevision"),
+    settings: defaultButtonAttributes("settings"),
+    embed: defaultButtonAttributes("embed"),
+    showusers: defaultButtonAttributes("showusers")
+  },
+
+  registerButton: function (buttonName, buttonInfo) {
+    this.availableButtons[buttonName] = buttonInfo;
+  },
+
+  button: function (attributes) {
+    return new Button(attributes);
+  },
   separator: function () {
     return (new Separator).render();
   },
diff --git a/src/templates/pad.html b/src/templates/pad.html
index c76746ad..6afc1be1 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -1,7 +1,12 @@
 <%
   var settings = require("ep_etherpad-lite/node/utils/Settings")
+    , hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks')
     , langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs
     , toolbar = require("ep_etherpad-lite/node/utils/toolbar");
+
+  hooks.callAll("padInitToolbar", {
+    toolbar: toolbar
+  });
 %>
 <!doctype html>
 <% e.begin_block("htmlHead"); %>

From 90837437c58f3510a17ef4807d84ead267f81a25 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sat, 13 Apr 2013 12:06:51 -0700
Subject: [PATCH 05/11] Moving the toolbar plugin calls.

---
 src/node/hooks/express/specialpages.js | 15 ++++++++++++---
 src/node/utils/toolbar.js              |  1 -
 src/static/js/pad_editbar.js           |  3 +++
 src/templates/pad.html                 |  6 +-----
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/node/hooks/express/specialpages.js b/src/node/hooks/express/specialpages.js
index 44002461..0295e87b 100644
--- a/src/node/hooks/express/specialpages.js
+++ b/src/node/hooks/express/specialpages.js
@@ -1,5 +1,7 @@
 var path = require('path');
 var eejs = require('ep_etherpad-lite/node/eejs');
+var toolbar = require("ep_etherpad-lite/node/utils/toolbar");
+var hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks');
 
 exports.expressCreateServer = function (hook_name, args, cb) {
 
@@ -26,8 +28,15 @@ exports.expressCreateServer = function (hook_name, args, cb) {
 
   //serve pad.html under /p
   args.app.get('/p/:pad', function(req, res, next)
-  {    
-    res.send(eejs.require("ep_etherpad-lite/templates/pad.html", {req: req}));
+  {
+    hooks.callAll("padInitToolbar", {
+      toolbar: toolbar
+    });
+
+    res.send(eejs.require("ep_etherpad-lite/templates/pad.html", {
+      req: req,
+      toolbar: toolbar
+    }));
   });
 
   //serve timeslider.html under /p/$padname/timeslider
@@ -52,4 +61,4 @@ exports.expressCreateServer = function (hook_name, args, cb) {
   });
 
 
-}
\ No newline at end of file
+}
diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index 270c4aac..aa3c85f1 100644
--- a/src/node/utils/toolbar.js
+++ b/src/node/utils/toolbar.js
@@ -1,7 +1,6 @@
 /**
  * The Toolbar Module creates and renders the toolbars and buttons
  */
-
 var _ = require("underscore")
   , tagAttributes
   , tag
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index 31273d71..9fea7233 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -131,6 +131,9 @@ var padeditbar = (function()
         if (this.commands[cmd]) {
           this.commands[cmd](cmd, padeditor.ace);
         }
+        else {
+          console.log("Command doesn't exist", cmd);
+        }
       }
       if(padeditor.ace) padeditor.ace.focus();
     },
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 6afc1be1..99a275f7 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -2,11 +2,7 @@
   var settings = require("ep_etherpad-lite/node/utils/Settings")
     , hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks')
     , langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs
-    , toolbar = require("ep_etherpad-lite/node/utils/toolbar");
-
-  hooks.callAll("padInitToolbar", {
-    toolbar: toolbar
-  });
+    ;
 %>
 <!doctype html>
 <% e.begin_block("htmlHead"); %>

From e1961d43537c216dcad4771ad5c81129d75e66fa Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Sat, 13 Apr 2013 12:25:53 -0700
Subject: [PATCH 06/11] Adding settings.json.template example for the toolbar.

---
 settings.json.template | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/settings.json.template b/settings.json.template
index 4b18d780..418a3ddc 100644
--- a/settings.json.template
+++ b/settings.json.template
@@ -97,6 +97,22 @@
   },
   */
 
+  /* The toolbar buttons configuration.
+  "toolbar": {
+    "left": [
+      ["bold", "italic", "underline", "strikethrough"],
+      ["orderedlist", "unorderedlist", "indent", "outdent"],
+      ["undo", "redo"],
+      ["clearauthorship"]
+    ],
+    "right": [
+      ["importexport", "timeslider", "savedrevision"],
+      ["settings", "embed"],
+      ["showusers"]
+    ]
+  },
+  */
+
   /* The log level we are using, can be: DEBUG, INFO, WARN, ERROR */
   "loglevel": "INFO",
 

From 0c52fb5e30c139cd42ab4a8b6703bf47941a7394 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Mon, 15 Apr 2013 11:32:59 -0700
Subject: [PATCH 07/11] Normalizing how select and button commands are
 triggered.

---
 src/node/utils/toolbar.js    |  21 ++--
 src/static/js/pad_editbar.js | 180 ++++++++++++++++++++++-------------
 2 files changed, 124 insertions(+), 77 deletions(-)

diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index aa3c85f1..966e81a0 100644
--- a/src/node/utils/toolbar.js
+++ b/src/node/utils/toolbar.js
@@ -93,15 +93,12 @@ Button.load = function (btnName) {
 _.extend(Button.prototype, {
   grouping: "",
 
-  li: function (attributes, contents) {
-    attributes = _.extend({
-      "data-key": this.attributes.key,
-    }, attributes);
-    return tag("li", attributes, contents);
-  },
-
   render: function () {
-    return this.li({},
+    var liAttributes = {
+      "data-type": "button",
+      "data-key": this.attributes.key,
+    };
+    return tag("li", liAttributes,
       tag("a", { "class": this.grouping, "data-l10n-id": this.attributes.localizationId },
         tag("span", { "class": "buttonicon " + this.attributes.icon })
       )
@@ -137,8 +134,14 @@ _.extend(SelectButton.prototype, Button.prototype, {
     });
     return tag("select", attributes, options.join(""));
   },
+
   render: function () {
-    return this.li({ id: this.attributes.id },
+    var attributes = {
+      id: this.attributes.id,
+      "data-key": "",
+      "data-type": "select"
+    };
+    return this.li(attributes,
       this.select({ id: this.attributes.selectId })
     );
   }
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index 9fea7233..afd0ad06 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -20,10 +20,53 @@
  * limitations under the License.
  */
 
+var hooks = require('./pluginfw/hooks');
 var padutils = require('./pad_utils').padutils;
 var padeditor = require('./pad_editor').padeditor;
 var padsavedrevs = require('./pad_savedrevs');
 
+var ToolbarItem = function (element) {
+  this.$el = element;
+};
+
+ToolbarItem.prototype.getCommand = function () {
+  return this.$el.attr("data-key");
+};
+
+ToolbarItem.prototype.getValue = function () {
+  if (this.isSelect()) {
+    return this.$el.find("select").val();
+  }
+};
+
+ToolbarItem.prototype.getType = function () {
+  return this.$el.attr("data-type");
+};
+
+ToolbarItem.prototype.isSelect = function () {
+  return this.getType() == "select";
+};
+
+ToolbarItem.prototype.isButton = function () {
+  return this.getType() == "button";
+};
+
+ToolbarItem.prototype.bind = function (callback) {
+  var self = this;
+  if (self.isButton()) {
+    self.$el.click(function (event) {
+      callback(self.getCommand());
+      event.preventDefault();
+    });
+  }
+  else if (self.isSelect()) {
+    self.$el.find("select").change(function () {
+      callback(self.getCommand(), self.getValue());
+    });
+  }
+};
+
+
 var padeditbar = (function()
 {
 
@@ -90,12 +133,18 @@ var padeditbar = (function()
       var self = this;
       $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
       $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
-      $("#editbar [data-key]").each(function (i, e) {
-        $(e).click(function (event) {
-          self.toolbarClick($(e).attr('data-key'));
-          event.preventDefault();
+      $("#editbar [data-key]").each(function () {
+        (new ToolbarItem($(this))).bind(function (command, value) {
+          self.triggerCommand(command, value);
         });
       });
+
+      registerDefaultCommands(self);
+
+      hooks.callAll("postToolbarInit", {
+        toolbar: self,
+        ace: padeditor.ace
+      });
     },
     isEnabled: function()
     {
@@ -124,16 +173,9 @@ var padeditbar = (function()
         }, cmd, true);
       });
     },
-    toolbarClick: function(cmd)
-    {
-      if (self.isEnabled())
-      {
-        if (this.commands[cmd]) {
-          this.commands[cmd](cmd, padeditor.ace);
-        }
-        else {
-          console.log("Command doesn't exist", cmd);
-        }
+    triggerCommand: function (cmd, value) {
+      if (self.isEnabled() && this.commands[cmd]) {
+        this.commands[cmd](cmd, padeditor.ace, value);
       }
       if(padeditor.ace) padeditor.ace.focus();
     },
@@ -212,72 +254,74 @@ var padeditbar = (function()
     }
   };
 
-  self.registerDropdownCommand("showusers", "users");
-  self.registerDropdownCommand("settings");
-  self.registerDropdownCommand("connectivity");
-  self.registerDropdownCommand("import_export", "importexport");
-
-  self.registerCommand("embed", function () {
-    self.setEmbedLinks();
-    $('#linkinput').focus().select();
-    self.toggleDropDown("embed");
-  });
-
-  self.registerCommand("savedRevision", function () {
-    padsavedrevs.saveNow();
-  });
-
-  self.registerCommand("showTimeSlider", function () {
-    document.location = document.location + "/timeslider";
-  });
-
-  function aceAttributeCommand (cmd, ace) {
+  function aceAttributeCommand(cmd, ace) {
     ace.ace_toggleAttributeOnSelection(cmd);
   }
 
-  self.registerAceCommand("bold", aceAttributeCommand);
-  self.registerAceCommand("italic", aceAttributeCommand);
-  self.registerAceCommand("underline", aceAttributeCommand);
-  self.registerAceCommand("strikethrough", aceAttributeCommand);
+  function registerDefaultCommands(toolbar) {
+    toolbar.registerDropdownCommand("showusers", "users");
+    toolbar.registerDropdownCommand("settings");
+    toolbar.registerDropdownCommand("connectivity");
+    toolbar.registerDropdownCommand("import_export", "importexport");
 
-  self.registerAceCommand("undo", function (cmd, ace) {
-    ace.ace_doUndoRedo(cmd);
-  });
+    toolbar.registerCommand("embed", function () {
+      toolbar.setEmbedLinks();
+      $('#linkinput').focus().select();
+      toolbar.toggleDropDown("embed");
+    });
 
-  self.registerAceCommand("redo", function (cmd) {
-    ace.ace_doUndoRedo(cmd);
-  });
+    toolbar.registerCommand("savedRevision", function () {
+      padsavedrevs.saveNow();
+    });
 
-  self.registerAceCommand("insertunorderedlist", function (cmd, ace) {
-    ace.ace_doInsertUnorderedList();
-  });
+    toolbar.registerCommand("showTimeSlider", function () {
+      document.location = document.location + "/timeslider";
+    });
 
-  self.registerAceCommand("insertorderedlist", function (cmd, ace) {
-    ace.ace_doInsertOrderedList();
-  });
+    toolbar.registerAceCommand("bold", aceAttributeCommand);
+    toolbar.registerAceCommand("italic", aceAttributeCommand);
+    toolbar.registerAceCommand("underline", aceAttributeCommand);
+    toolbar.registerAceCommand("strikethrough", aceAttributeCommand);
 
-  self.registerAceCommand("indent", function (cmd, ace) {
-    if (!ace.ace_doIndentOutdent(false)) {
+    toolbar.registerAceCommand("undo", function (cmd, ace) {
+      ace.ace_doUndoRedo(cmd);
+    });
+
+    toolbar.registerAceCommand("redo", function (cmd) {
+      ace.ace_doUndoRedo(cmd);
+    });
+
+    toolbar.registerAceCommand("insertunorderedlist", function (cmd, ace) {
       ace.ace_doInsertUnorderedList();
-    }
-  });
+    });
 
-  self.registerAceCommand("outdent", function (cmd, ace) {
-    ace.ace_doIndentOutdent(true);
-  });
+    toolbar.registerAceCommand("insertorderedlist", function (cmd, ace) {
+      ace.ace_doInsertOrderedList();
+    });
 
-  self.registerAceCommand("clearauthorship", function (cmd, ace) {
-    if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret()) {
-      if (window.confirm(html10n.get("pad.editbar.clearcolors"))) {
-        ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
-          ['author', '']
-        ]);
+    toolbar.registerAceCommand("indent", function (cmd, ace) {
+      if (!ace.ace_doIndentOutdent(false)) {
+        ace.ace_doInsertUnorderedList();
       }
-    }
-    else {
-      ace.ace_setAttributeOnSelection('author', '');
-    }
-  });
+    });
+
+    toolbar.registerAceCommand("outdent", function (cmd, ace) {
+      ace.ace_doIndentOutdent(true);
+    });
+
+    toolbar.registerAceCommand("clearauthorship", function (cmd, ace) {
+      if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret()) {
+        if (window.confirm(html10n.get("pad.editbar.clearcolors"))) {
+          ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
+            ['author', '']
+          ]);
+        }
+      }
+      else {
+        ace.ace_setAttributeOnSelection('author', '');
+      }
+    });
+  }
 
   return self;
 }());

From 602380abb7e99febfaf9f574da32ae3cc5064458 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Mon, 15 Apr 2013 16:06:32 -0700
Subject: [PATCH 08/11] passing the ToolbarItem to the callback

---
 src/node/utils/toolbar.js    |  4 ++--
 src/static/js/pad_editbar.js | 20 ++++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index 966e81a0..a0a4fe01 100644
--- a/src/node/utils/toolbar.js
+++ b/src/node/utils/toolbar.js
@@ -138,10 +138,10 @@ _.extend(SelectButton.prototype, Button.prototype, {
   render: function () {
     var attributes = {
       id: this.attributes.id,
-      "data-key": "",
+      "data-key": this.attributes.command,
       "data-type": "select"
     };
-    return this.li(attributes,
+    return tag("li", attributes,
       this.select({ id: this.attributes.selectId })
     );
   }
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index afd0ad06..f4fda27c 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -39,6 +39,13 @@ ToolbarItem.prototype.getValue = function () {
   }
 };
 
+ToolbarItem.prototype.setValue = function (val) {
+  if (this.isSelect()) {
+    return this.$el.find("select").val(val);
+  }
+};
+
+
 ToolbarItem.prototype.getType = function () {
   return this.$el.attr("data-type");
 };
@@ -53,15 +60,16 @@ ToolbarItem.prototype.isButton = function () {
 
 ToolbarItem.prototype.bind = function (callback) {
   var self = this;
+
   if (self.isButton()) {
     self.$el.click(function (event) {
-      callback(self.getCommand());
+      callback(self.getCommand(), self);
       event.preventDefault();
     });
   }
   else if (self.isSelect()) {
     self.$el.find("select").change(function () {
-      callback(self.getCommand(), self.getValue());
+      callback(self.getCommand(), self);
     });
   }
 };
@@ -134,8 +142,8 @@ var padeditbar = (function()
       $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
       $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
       $("#editbar [data-key]").each(function () {
-        (new ToolbarItem($(this))).bind(function (command, value) {
-          self.triggerCommand(command, value);
+        (new ToolbarItem($(this))).bind(function (command, item) {
+          self.triggerCommand(command, item);
         });
       });
 
@@ -173,9 +181,9 @@ var padeditbar = (function()
         }, cmd, true);
       });
     },
-    triggerCommand: function (cmd, value) {
+    triggerCommand: function (cmd, item) {
       if (self.isEnabled() && this.commands[cmd]) {
-        this.commands[cmd](cmd, padeditor.ace, value);
+        this.commands[cmd](cmd, padeditor.ace, item);
       }
       if(padeditor.ace) padeditor.ace.focus();
     },

From 51900cbf67d2db6e73e8e72768c9f31bfa23eab4 Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Sun, 16 Mar 2014 14:04:12 +0100
Subject: [PATCH 09/11] Toolbar: Allow custom dropdowns for plugins

---
 src/static/js/pad_editbar.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index f4fda27c..7892a085 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -139,6 +139,8 @@ var padeditbar = (function()
   var self = {
     init: function() {
       var self = this;
+      self.dropdowns = [];
+      
       $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
       $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
       $("#editbar [data-key]").each(function () {
@@ -170,6 +172,7 @@ var padeditbar = (function()
     },
     registerDropdownCommand: function (cmd, dropdown) {
       dropdown = dropdown || cmd;
+      self.dropdowns.push(dropdown)
       this.registerCommand(cmd, function () {
         self.toggleDropDown(dropdown);
       });
@@ -189,19 +192,17 @@ var padeditbar = (function()
     },
     toggleDropDown: function(moduleName, cb)
     {
-      var modules = ["settings", "connectivity", "importexport", "embed", "users"];
-
       // hide all modules and remove highlighting of all buttons
       if(moduleName == "none")
       {
         var returned = false
-        for(var i=0;i<modules.length;i++)
+        for(var i=0;i<self.dropdowns.length;i++)
         {
           //skip the userlist
-          if(modules[i] == "users")
+          if(self.dropdowns[i] == "users")
             continue;
 
-          var module = $("#" + modules[i]);
+          var module = $("#" + self.dropdowns[i]);
 
           if(module.css('display') != "none")
           {
@@ -216,18 +217,18 @@ var padeditbar = (function()
       {
         // hide all modules that are not selected and remove highlighting
         // respectively add highlighting to the corresponding button
-        for(var i=0;i<modules.length;i++)
+        for(var i=0;i<self.dropdowns.length;i++)
         {
-          var module = $("#" + modules[i]);
+          var module = $("#" + self.dropdowns[i]);
 
           if(module.css('display') != "none")
           {
-            $("#" + modules[i] + "link").removeClass("selected");
+            $("#" + self.dropdowns[i] + "link").removeClass("selected");
             module.slideUp("fast");
           }
-          else if(modules[i]==moduleName)
+          else if(self.dropdowns[i]==moduleName)
           {
-            $("#" + modules[i] + "link").addClass("selected");
+            $("#" + self.dropdowns[i] + "link").addClass("selected");
             module.slideDown("fast", cb);
           }
         }
@@ -271,6 +272,7 @@ var padeditbar = (function()
     toolbar.registerDropdownCommand("settings");
     toolbar.registerDropdownCommand("connectivity");
     toolbar.registerDropdownCommand("import_export", "importexport");
+    toolbar.registerDropdownCommand("embed");
 
     toolbar.registerCommand("embed", function () {
       toolbar.setEmbedLinks();

From da5970dda3aa9244a300968d5112eb6a016beb83 Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Sun, 16 Mar 2014 15:14:21 +0100
Subject: [PATCH 10/11] Refactor toolbar.js to use consistent naming

---
 src/node/utils/toolbar.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/node/utils/toolbar.js b/src/node/utils/toolbar.js
index a0a4fe01..fbd1a5da 100644
--- a/src/node/utils/toolbar.js
+++ b/src/node/utils/toolbar.js
@@ -12,9 +12,9 @@ var _ = require("underscore")
 
 defaultButtonAttributes = function (name, overrides) {
   return {
-    key: name,
+    command: name,
     localizationId: "pad.toolbar." + name + ".title",
-    icon: "buttonicon-" + name
+    class: "buttonicon-" + name
   };
 };
 
@@ -96,11 +96,11 @@ _.extend(Button.prototype, {
   render: function () {
     var liAttributes = {
       "data-type": "button",
-      "data-key": this.attributes.key,
+      "data-key": this.attributes.command,
     };
     return tag("li", liAttributes,
       tag("a", { "class": this.grouping, "data-l10n-id": this.attributes.localizationId },
-        tag("span", { "class": "buttonicon " + this.attributes.icon })
+        tag("span", { "class": "buttonicon " + this.attributes.class })
       )
     );
   }
@@ -160,43 +160,43 @@ module.exports = {
     strikethrough: defaultButtonAttributes("strikethrough"),
 
     orderedlist: {
-      key: "insertorderedlist",
+      command: "insertorderedlist",
       localizationId: "pad.toolbar.ol.title",
-      icon: "buttonicon-insertorderedlist"
+      class: "buttonicon-insertorderedlist"
     },
 
     unorderedlist: {
-      key: "insertunorderedlist",
+      command: "insertunorderedlist",
       localizationId: "pad.toolbar.ul.title",
-      icon: "buttonicon-insertunorderedlist"
+      class: "buttonicon-insertunorderedlist"
     },
 
     indent: defaultButtonAttributes("indent"),
     outdent: {
-      key: "outdent",
+      command: "outdent",
       localizationId: "pad.toolbar.unindent.title",
-      icon: "buttonicon-outdent"
+      class: "buttonicon-outdent"
     },
 
     undo: defaultButtonAttributes("undo"),
     redo: defaultButtonAttributes("redo"),
 
     clearauthorship: {
-      key: "clearauthorship",
+      command: "clearauthorship",
       localizationId: "pad.toolbar.clearAuthorship.title",
-      icon: "buttonicon-clearauthorship"
+      class: "buttonicon-clearauthorship"
     },
 
     importexport: {
-      key: "import_export",
+      command: "import_export",
       localizationId: "pad.toolbar.import_export.title",
-      icon: "buttonicon-import_export"
+      class: "buttonicon-import_export"
     },
 
     timeslider: {
-      key: "showTimeSlider",
+      command: "showTimeSlider",
       localizationId: "pad.toolbar.timeslider.title",
-      icon: "buttonicon-history"
+      class: "buttonicon-history"
     },
 
     savedrevision: defaultButtonAttributes("savedRevision"),

From a69793a2035e50a788822bc8bae9ca3c22320419 Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Sun, 16 Mar 2014 15:43:38 +0100
Subject: [PATCH 11/11] Add docs for toolbar controller and pad_editbar

---
 doc/api/api.md               |  4 +++-
 doc/api/editbar.md           | 28 ++++++++++++++++++++++++
 doc/api/hooks_server-side.md | 41 +++++++++++++++++++++++++++++++++++-
 doc/api/toolbar.md           | 36 +++++++++++++++++++++++++++++++
 4 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 doc/api/editbar.md
 create mode 100644 doc/api/toolbar.md

diff --git a/doc/api/api.md b/doc/api/api.md
index eb5bb9c9..d124e4c3 100644
--- a/doc/api/api.md
+++ b/doc/api/api.md
@@ -5,4 +5,6 @@
 @include hooks_server-side
 @include editorInfo
 @include changeset_library
-@include pluginfw
\ No newline at end of file
+@include pluginfw
+@include toolbar
+@include editbar
\ No newline at end of file
diff --git a/doc/api/editbar.md b/doc/api/editbar.md
new file mode 100644
index 00000000..ce89c0b7
--- /dev/null
+++ b/doc/api/editbar.md
@@ -0,0 +1,28 @@
+# Editbar
+srf/static/js/pad_editbar.js
+
+## isEnabled()
+
+## disable()
+
+## toggleDropDown(dropdown, callback)
+Shows the dropdown `div.popup` whose `id` equals `dropdown`.
+
+## registerCommand(cmd, callback)
+Register a handler for a specific command. Commands are fired if the corresponding button is clicked or the corresponding select is changed.
+
+## registerAceCommand(cmd, callback)
+Creates an ace callstack and calls the callback with an ace instance: `callback(cmd, ace)`.
+
+Example:
+```
+toolbar.registerAceCommand("insertorderedlist", function (cmd, ace) {
+  ace.ace_doInsertOrderedList();
+});
+```
+
+## registerDropdownCommand(cmd, dropdown)
+Ties a `div.popup` where `id` equals `dropdown` to a `command` fired by clicking a button.
+
+## triggerCommand(cmd[, item])
+Triggers a command (optionally with some internal representation of the toolbar item that triggered it).
\ No newline at end of file
diff --git a/doc/api/hooks_server-side.md b/doc/api/hooks_server-side.md
index 0486f7d3..0bde2aad 100644
--- a/doc/api/hooks_server-side.md
+++ b/doc/api/hooks_server-side.md
@@ -63,7 +63,46 @@ Things in context:
 
 This hook gets called upon the rendering of an ejs template block. For any specific kind of block, you can change how that block gets rendered by modifying the content object passed in.
 
-Have a look at `src/templates/pad.html` and `src/templates/timeslider.html` to see which blocks are available.
+Available blocks in `pad.html` are:
+
+ * `htmlHead` - after `<html>` and immediately before the title tag
+ * `styles` - the style `<link>`s
+ * `body` - the contents of the body tag
+ * `editbarMenuLeft` - the left tool bar (consider using the toolbar controller instead of manually adding html here)
+ * `editbarMenuRight` - right tool bar
+ * `afterEditbar` - allows you to add stuff immediately after the toolbar
+ * `userlist` - the contents of the userlist dropdown
+ * `loading` - the intial loading message
+ * `mySettings` - the left column of the settings dropdown ("My view"); intended for adding checkboxes only
+ * `mySettings.dropdowns` - add your dropdown settings here
+ * `globalSettings` - the right column of the settings dropdown ("Global view")
+ * `importColumn` - import form
+ * `exportColumn` - export form
+ * `modals` - Contains all connectivity messages
+ * `embedPopup` - the embed dropdown
+ * `scripts` - Add your script tags here, if you really have to (consider use client-side hooks instead)
+ 
+`timeslider.html` blocks:
+
+ * `timesliderStyles`
+ * `timesliderScripts`
+ * `timesliderBody`
+ * `timesliderTop`
+ * `timesliderEditbarRight`
+ * `modals`
+ 
+ `index.html` blocks:
+ 
+ * `indexWrapper` - contains the form for creating new pads
+
+## padInitToolbar
+Called from: src/node/hooks/express/specialpages.js
+
+Things in context:
+
+1. toolbar - the toolbar controller that will render the toolbar eventually
+
+Here you can add custom toolbar items that will be available in the toolbar config in `settings.json`. For more about the toolbar controller see the API section.
 
 ## padCreate
 Called from: src/node/db/Pad.js
diff --git a/doc/api/toolbar.md b/doc/api/toolbar.md
new file mode 100644
index 00000000..1ca61ced
--- /dev/null
+++ b/doc/api/toolbar.md
@@ -0,0 +1,36 @@
+# Toolbar controller
+src/node/utils/toolbar.js
+
+## button(opts)
+ * {Object} `opts`
+   * `command` - this command fill be fired on the editbar on click
+   * `localizationId` - will be set as `data-l10-id`
+   * `class` - here you can add additional classes to the button
+
+Returns: {Button}
+
+Example:
+```
+var orderedlist = toolbar.button({
+  command: "insertorderedlist",
+  localizationId: "pad.toolbar.ol.title",
+  class: "buttonicon-insertorderedlist"
+})
+```
+
+## selectButton(opts)
+ * {Object} `opts`
+   * `id` - id of the menu item
+   * `selectId` - id of the select element
+   * `command` - this command fill be fired on the editbar on change
+
+Returns: {SelectButton}
+
+## SelectButton.addOption(value, text, attributes)
+ * {String} value - The value of this option
+ * {String} text - the label text used for this option
+ * {Object} attributes - any additional html attributes go here (e.g. `data-l10n-id`)
+   
+## registerButton(name, item)
+  * {String} name - used to reference the item in the toolbar config in settings.json
+  * {Button|SelectButton} item - the button to add
\ No newline at end of file