Setting up the right toolbar.
This commit is contained in:
cohitre
parent
c57bc444cd
commit
292a3bd7b7
4 changed files with 97 additions and 78 deletions
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue