mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-20 23:46:14 -04:00
basic toolbar setup
This commit is contained in:
cohitre
parent
7a0ad3235a
commit
c57bc444cd
2 changed files with 145 additions and 63 deletions
122
src/node/utils/toolbar.js
Normal file
122
src/node/utils/toolbar.js
Normal file
|
|
@ -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());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -1,6 +1,22 @@
|
||||||
<%
|
<%
|
||||||
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")
|
||||||
|
, 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>
|
<!doctype html>
|
||||||
<% e.begin_block("htmlHead"); %>
|
<% e.begin_block("htmlHead"); %>
|
||||||
|
|
@ -54,66 +70,10 @@
|
||||||
<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(leftToolbar) %>
|
||||||
<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">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue