Merge pull request #2120 from ether/fix/timeslider-editbar

Add a customizable toolbar for timeslider

doc/api/toolbar.md

@@ -14,7 +14,17 @@ Example:
 var orderedlist = toolbar.button({
   command: "insertorderedlist",
   localizationId: "pad.toolbar.ol.title",
-  class: "buttonicon-insertorderedlist"
+  class: "buttonicon buttonicon-insertorderedlist"
+})
+```
+
+You can also create buttons with text:
+
+```
+var myButton = toolbar.button({
+  command: "myButton",
+  localizationId: "myPlugin.toolbar.myButton",
+  class: "buttontext"
 })
 ```
 

settings.json.template

@@ -115,6 +115,9 @@
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
       ["showusers"]
+    ],
+    "timeslider": [
+      ["timeslider_export", "timeslider_returnToPad"]
     ]
   },
   */

src/node/hooks/express/specialpages.js

@@ -46,7 +46,14 @@ exports.expressCreateServer = function (hook_name, args, cb) {
   //serve timeslider.html under /p/$padname/timeslider
   args.app.get('/p/:pad/timeslider', function(req, res, next)
   {
-    res.send(eejs.require("ep_etherpad-lite/templates/timeslider.html", {req: req}));
+    hooks.callAll("padInitToolbar", {
+      toolbar: toolbar
+    });
+    
+    res.send(eejs.require("ep_etherpad-lite/templates/timeslider.html", {
+      req: req,
+      toolbar: toolbar
+    }));
   });
 
   //serve favicon.ico from all path levels except as a pad name

src/node/utils/Settings.js

@@ -93,6 +93,9 @@ exports.toolbar = {
     ["importexport", "timeslider", "savedrevision"],
     ["settings", "embed"],
     ["showusers"]
+  ],
+  timeslider: [
+    ["timeslider_export", "timeslider_returnToPad"]
   ]
 }
 

src/node/utils/toolbar.js

@@ -14,7 +14,7 @@ defaultButtonAttributes = function (name, overrides) {
   return {
     command: name,
     localizationId: "pad.toolbar." + name + ".title",
-    class: "buttonicon-" + name
+    class: "buttonicon buttonicon-" + name
   };
 };
 
@@ -99,8 +99,8 @@ _.extend(Button.prototype, {
       "data-key": this.attributes.command,
     };
     return tag("li", liAttributes,
-      tag("a", { "class": this.grouping, "data-l10n-id": this.attributes.localizationId },
+      tag("a", { "class": this.grouping },
-        tag("span", { "class": "buttonicon " + this.attributes.class })
+        tag("span", { "class": " "+ this.attributes.class, "data-l10n-id": this.attributes.localizationId })
       )
     );
   }
@@ -162,20 +162,20 @@ module.exports = {
     orderedlist: {
       command: "insertorderedlist",
       localizationId: "pad.toolbar.ol.title",
-      class: "buttonicon-insertorderedlist"
+      class: "buttonicon buttonicon-insertorderedlist"
     },
 
     unorderedlist: {
       command: "insertunorderedlist",
       localizationId: "pad.toolbar.ul.title",
-      class: "buttonicon-insertunorderedlist"
+      class: "buttonicon buttonicon-insertunorderedlist"
     },
 
     indent: defaultButtonAttributes("indent"),
     outdent: {
       command: "outdent",
       localizationId: "pad.toolbar.unindent.title",
-      class: "buttonicon-outdent"
+      class: "buttonicon buttonicon-outdent"
     },
 
     undo: defaultButtonAttributes("undo"),
@@ -184,25 +184,37 @@ module.exports = {
     clearauthorship: {
       command: "clearauthorship",
       localizationId: "pad.toolbar.clearAuthorship.title",
-      class: "buttonicon-clearauthorship"
+      class: "buttonicon buttonicon-clearauthorship"
     },
 
     importexport: {
       command: "import_export",
       localizationId: "pad.toolbar.import_export.title",
-      class: "buttonicon-import_export"
+      class: "buttonicon buttonicon-import_export"
     },
 
     timeslider: {
       command: "showTimeSlider",
       localizationId: "pad.toolbar.timeslider.title",
-      class: "buttonicon-history"
+      class: "buttonicon buttonicon-history"
     },
 
     savedrevision: defaultButtonAttributes("savedRevision"),
     settings: defaultButtonAttributes("settings"),
     embed: defaultButtonAttributes("embed"),
-    showusers: defaultButtonAttributes("showusers")
+    showusers: defaultButtonAttributes("showusers"),
+    
+    timeslider_export: {
+      command: "import_export",
+      localizationId: "timeslider.toolbar.exportlink.title",
+      class: "buttonicon buttonicon-import_export"
+    },
+    
+    timeslider_returnToPad: {
+      command: "timeslider_returnToPad",
+      localizationId: "timeslider.toolbar.returnbutton",
+      class: "buttontext"
+    }
   },
 
   registerButton: function (buttonName, buttonInfo) {

src/static/css/pad.css

@@ -126,6 +126,10 @@ a img {
   position: relative;
   top: 1px;
 }
+.toolbar ul li a .buttontext {
+  color: #222;
+  font-size: 14px;
+}
 .toolbar ul li a.grouped-left {
   border-radius: 3px 0 0 3px;
 }

src/static/css/timeslider.css

@@ -157,13 +157,6 @@
 #editbarright {
   float: right
 }
-#returnbutton {
-  color: #222;
-  font-size: 16px;
-  line-height: 29px;
-  margin-top: 0;
-  padding-right: 6px;
-}
 #settings,
 #importexport,
 #embed,

src/static/js/pad_editbar.js

@@ -206,7 +206,7 @@ var padeditbar = (function()
 
           if(module.css('display') != "none")
           {
-            $("#" + module[i] + "link").removeClass("selected");
+            $("#" + self.dropdowns[i] + "link").removeClass("selected");
             module.slideUp("fast", cb);
             returned = true;
           }
@@ -331,6 +331,14 @@ var padeditbar = (function()
         ace.ace_setAttributeOnSelection('author', '');
       }
     });
+
+    toolbar.registerCommand('timeslider_returnToPad', function(cmd) {
+      if( document.referrer.length > 0 && document.referrer.substring(document.referrer.lastIndexOf("/")-1, document.referrer.lastIndexOf("/")) === "p") {
+        document.location = document.referrer;
+      } else {
+        document.location = document.location.href.substring(0,document.location.href.lastIndexOf("/"));
+      }
+    });
   }
 
   return self;

src/static/js/timeslider.js

@@ -95,12 +95,6 @@ function init() {
     //get all the export links
     export_links = $('#export > .exportlink')
 
-    if(document.referrer.length > 0 && document.referrer.substring(document.referrer.lastIndexOf("/")-1,document.referrer.lastIndexOf("/")) === "p") {
-      $("#returnbutton").attr("href", document.referrer);
-    } else {
-      $("#returnbutton").attr("href", document.location.href.substring(0,document.location.href.lastIndexOf("/")));
-    }
-
     $('button#forcereconnect').click(function()
     {
       window.location.reload();

src/templates/timeslider.html

@@ -80,13 +80,8 @@
           <div class="editbarright toolbar" id="editbar">
             <% e.begin_block("timesliderEditbarRight"); %>
             <ul>
-              <li onClick="window.padeditbar.toolbarClick('import_export');return false;">
+              <%- toolbar.menu(settings.toolbar.timeslider) %>
-                <a id="exportlink" data-l10n-id="timeslider.toolbar.exportlink.title">
-                  <div class="buttonicon buttonicon-import_export"></div>
-                </a>
-              </li>
             </ul>
-            <a id="returnbutton" data-l10n-id="timeslider.toolbar.returnbutton"></a>
             <% e.end_block(); %>
           </div>
 
@@ -241,6 +236,8 @@
       /* TODO: These globals shouldn't exist. */
       padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
       padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
+
+      padeditbar.init()
     });
   })();
 </script>