This commit is contained in:
cohitre 2013-03-09 14:57:58 -08:00
commit 304e43f2a1
4 changed files with 207 additions and 106 deletions

View file

@ -79,6 +79,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"; 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 * A flag that requires any user to have a valid session (via the api) before accessing a pad
*/ */

171
src/node/utils/toolbar.js Normal file
View file

@ -0,0 +1,171 @@
/**
* The Toolbar Module creates and renders the toolbars and buttons
*/
var _ = require("underscore")
, tagAttributes
, tag
, defaultButtons
, Button
, ButtonsGroup
, Separator
, defaultButtonAttributes;
defaultButtonAttributes = function (name, overrides) {
return {
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"),
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: {
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 () {
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;
};
_.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 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(this.separator());
}
};

View file

@ -1,6 +1,7 @@
<% <%
var settings = require("ep_etherpad-lite/node/utils/Settings") var settings = require("ep_etherpad-lite/node/utils/Settings")
, langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs , langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs
, toolbar = require("ep_etherpad-lite/node/utils/toolbar");
%> %>
<!doctype html> <!doctype html>
<% e.begin_block("htmlHead"); %> <% e.begin_block("htmlHead"); %>
@ -54,103 +55,15 @@
<div id="overlay"> <div id="overlay">
<div id="overlay-inner"></div> <div id="overlay-inner"></div>
</div> </div>
<ul class="menu_left"> <ul class="menu_left">
<% e.begin_block("editbarMenuLeft"); %> <% e.begin_block("editbarMenuLeft"); %>
<li class="acl-write" id="bold" data-key="bold"> <%- toolbar.menu(settings.toolbar.left) %>
<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>
<% e.end_block(); %> <% e.end_block(); %>
</ul> </ul>
<ul class="menu_right"> <ul class="menu_right">
<% e.begin_block("editbarMenuRight"); %> <% e.begin_block("editbarMenuRight"); %>
<li data-key="import_export"> <%- toolbar.menu(settings.toolbar.right) %>
<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>
<% e.end_block(); %> <% e.end_block(); %>
</ul> </ul>
</div> </div>