2013-03-04 00:53:17 +01:00
|
|
|
/**
|
|
|
|
* The Toolbar Module creates and renders the toolbars and buttons
|
|
|
|
*/
|
|
|
|
|
|
|
|
var _ = require("underscore")
|
2013-03-09 23:57:42 +01:00
|
|
|
, tagAttributes
|
|
|
|
, tag
|
2013-03-04 00:53:17 +01:00
|
|
|
, defaultButtons
|
|
|
|
, Button
|
|
|
|
, ButtonsGroup
|
|
|
|
, Separator
|
2013-03-09 23:57:42 +01:00
|
|
|
, defaultButtonAttributes;
|
2013-03-04 00:53:17 +01:00
|
|
|
|
|
|
|
defaultButtonAttributes = function (name, overrides) {
|
|
|
|
return {
|
|
|
|
key: name,
|
|
|
|
localizationId: "pad.toolbar." + name + ".title",
|
|
|
|
icon: "buttonicon-" + name
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2013-03-09 23:57:42 +01:00
|
|
|
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) + '"';
|
|
|
|
}, " ");
|
|
|
|
};
|
|
|
|
|
2013-03-04 00:53:17 +01:00
|
|
|
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"
|
2013-03-09 23:57:42 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
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"
|
|
|
|
},
|
2013-03-04 00:53:17 +01:00
|
|
|
|
2013-03-09 23:57:42 +01:00
|
|
|
savedrevision: defaultButtonAttributes("savedRevision"),
|
|
|
|
settings: defaultButtonAttributes("settings"),
|
|
|
|
embed: defaultButtonAttributes("embed"),
|
|
|
|
showusers: defaultButtonAttributes("showusers")
|
2013-03-04 00:53:17 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
2013-03-09 23:57:42 +01:00
|
|
|
|
2013-03-04 00:53:17 +01:00
|
|
|
};
|
|
|
|
|
2013-03-09 23:57:42 +01:00
|
|
|
_.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 })
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-03-04 00:53:17 +01:00
|
|
|
Separator = function () {};
|
|
|
|
Separator.prototype.render = function () {
|
2013-03-09 23:57:42 +01:00
|
|
|
return tag("li", { "class": "separator"});
|
2013-03-04 00:53:17 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = {
|
2013-03-09 23:57:42 +01:00
|
|
|
separator: function () {
|
|
|
|
return (new Separator).render();
|
|
|
|
},
|
2013-03-04 00:53:17 +01:00
|
|
|
menu: function (buttons) {
|
|
|
|
var groups = _.map(buttons, function (group) {
|
|
|
|
return ButtonsGroup.fromArray(group).render();
|
|
|
|
});
|
2013-03-09 23:57:42 +01:00
|
|
|
return groups.join(this.separator());
|
2013-03-04 00:53:17 +01:00
|
|
|
}
|
|
|
|
};
|