mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-05-09 08:25:00 -04:00
Moving the formatting buttons to a plugin.
This commit is contained in:
parent
e4ff4021ab
commit
103dc68e4d
7 changed files with 176 additions and 106 deletions
13
available_plugins/ep_formatting/ep.json
Normal file
13
available_plugins/ep_formatting/ep.json
Normal file
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"parts": [
|
||||
{
|
||||
"name": "basic-formatting",
|
||||
"client_hooks": {
|
||||
"postAceInit": "ep_formatting/static/js/toolbarButtons:postAceInit"
|
||||
},
|
||||
"hooks": {
|
||||
"eejsBlock_editbarMenuLeft": "ep_formatting/plugin:eejsBlock_editbarMenuLeft"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
10
available_plugins/ep_formatting/package.json
Normal file
10
available_plugins/ep_formatting/package.json
Normal file
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"author": "cohitre <smiles@cohitre.com> (http://cohitre.com)",
|
||||
"name": "ep_formatting",
|
||||
"description": "Show basic formatting options in the etherpad-lite toolbar.",
|
||||
"version": "0.0.1",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Pita/etherpad-lite"
|
||||
}
|
||||
}
|
6
available_plugins/ep_formatting/plugin.js
Normal file
6
available_plugins/ep_formatting/plugin.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
var eejs = require('ep_etherpad-lite/node/eejs/');
|
||||
|
||||
exports.eejsBlock_editbarMenuLeft = function (hook_name, args, cb) {
|
||||
args.content = args.content + eejs.require("ep_formatting/templates/buttons.ejs");
|
||||
return cb();
|
||||
}
|
58
available_plugins/ep_formatting/static/js/toolbarButtons.js
Normal file
58
available_plugins/ep_formatting/static/js/toolbarButtons.js
Normal file
|
@ -0,0 +1,58 @@
|
|||
var _ = require('ep_etherpad-lite/static/js/underscore')
|
||||
, padeditor = require('ep_etherpad-lite/static/js/pad_editor').padeditor
|
||||
, padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar
|
||||
, simpleCommands = ["bold", "italic", "underline", "strikethrough"];
|
||||
|
||||
function registerCallWithAceCommand(commandName, callback) {
|
||||
padeditbar.registerToolbarCommand(commandName, function () {
|
||||
padeditor.ace.callWithAce(callback, commandName, true);
|
||||
});
|
||||
}
|
||||
|
||||
exports.postAceInit = function () {
|
||||
_.each(simpleCommands, function (commandName) {
|
||||
registerCallWithAceCommand(commandName, function (ace) {
|
||||
ace.ace_toggleAttributeOnSelection(commandName)
|
||||
});
|
||||
});
|
||||
|
||||
_.each(["undo", "redo"], function (commandName) {
|
||||
registerCallWithAceCommand(commandName, function (ace) {
|
||||
ace.ace_doUndoRedo(commandName);
|
||||
});
|
||||
});
|
||||
|
||||
registerCallWithAceCommand('insertunorderedlist', function (ace) {
|
||||
ace.ace_doInsertUnorderedList();
|
||||
});
|
||||
|
||||
registerCallWithAceCommand("insertorderedlist", function (ace) {
|
||||
ace.ace_doInsertOrderedList();
|
||||
});
|
||||
|
||||
registerCallWithAceCommand("indent", function (ace) {
|
||||
if (!ace.ace_doIndentOutdent(false)) {
|
||||
ace.ace_doInsertUnorderedList();
|
||||
}
|
||||
});
|
||||
|
||||
registerCallWithAceCommand("outdent", function (ace) {
|
||||
ace.ace_doIndentOutdent(true);
|
||||
});
|
||||
|
||||
registerCallWithAceCommand("clearauthorship", function (ace) {
|
||||
if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret())
|
||||
{
|
||||
if (window.confirm("Clear authorship colors on entire document?"))
|
||||
{
|
||||
ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
|
||||
['author', '']
|
||||
]);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ace.ace_setAttributeOnSelection('author', '');
|
||||
}
|
||||
});
|
||||
};
|
58
available_plugins/ep_formatting/templates/buttons.ejs
Normal file
58
available_plugins/ep_formatting/templates/buttons.ejs
Normal file
|
@ -0,0 +1,58 @@
|
|||
<li class="acl-write" id="bold" data-key="bold">
|
||||
<a class="grouped-left" title="Bold (ctrl-B)">
|
||||
<span class="buttonicon buttonicon-bold"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="italic" data-key="italic">
|
||||
<a class="grouped-middle" title="Italics (ctrl-I)">
|
||||
<span class="buttonicon buttonicon-italic"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="underline" data-key="underline">
|
||||
<a class="grouped-middle" title="Underline (ctrl-U)">
|
||||
<span class="buttonicon buttonicon-underline"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="strikethrough" data-key="strikethrough">
|
||||
<a class="grouped-right" title="Strikethrough">
|
||||
<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" title="Toggle Ordered List">
|
||||
<span class="buttonicon buttonicon-insertorderedlist"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="unoderedlist" data-key="insertunorderedlist">
|
||||
<a class="grouped-middle" title="Toggle Bullet List">
|
||||
<span class="buttonicon buttonicon-insertunorderedlist"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="indent" data-key="indent">
|
||||
<a class="grouped-middle" title="Indent">
|
||||
<span class="buttonicon buttonicon-indent"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="outdent" data-key="outdent">
|
||||
<a class="grouped-right" title="Unindent">
|
||||
<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" title="Undo (ctrl-Z)">
|
||||
<span class="buttonicon buttonicon-undo"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="redo" data-key="redo">
|
||||
<a class="grouped-right" title="Redo (ctrl-Y)">
|
||||
<span class="buttonicon buttonicon-redo"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write separator"></li>
|
||||
<li class="acl-write" id="clearAuthorship" data-key="clearauthorship">
|
||||
<a title="Clear Authorship Colors">
|
||||
<span class="buttonicon buttonicon-clearauthorship"></span>
|
||||
</a>
|
||||
</li>
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* This code is mostly from the old Etherpad. Please help us to comment this code.
|
||||
* This code is mostly from the old Etherpad. Please help us to comment this code.
|
||||
* This helps other people to understand this code better and helps them to improve it.
|
||||
* TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED
|
||||
*/
|
||||
|
@ -116,8 +116,25 @@ var padeditbar = (function()
|
|||
{
|
||||
$("#editbar").addClass('disabledtoolbar').removeClass("enabledtoolbar");
|
||||
},
|
||||
hasToolbarCommand: function (commandName) {
|
||||
return this.toolbarCommands && this.toolbarCommands[commandName] !== undefined;
|
||||
},
|
||||
registerToolbarCommand: function (commandName, method) {
|
||||
this.toolbarCommands = this.toolbarCommands || {};
|
||||
this.toolbarCommands[commandName] = method;
|
||||
return this;
|
||||
},
|
||||
executeToolbarCommand: function (commandName) {
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
|
||||
if (this.hasToolbarCommand(commandName)) {
|
||||
this.toolbarCommands[commandName].apply(this, args);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
toolbarClick: function(cmd)
|
||||
{
|
||||
{
|
||||
if (self.isEnabled())
|
||||
{
|
||||
if(cmd == "showusers")
|
||||
|
@ -136,48 +153,14 @@ var padeditbar = (function()
|
|||
}
|
||||
else if (cmd == 'import_export')
|
||||
{
|
||||
self.toogleDropDown("importexport");
|
||||
self.toogleDropDown("importexport");
|
||||
}
|
||||
else if (cmd == 'savedRevision')
|
||||
{
|
||||
padsavedrevs.saveNow();
|
||||
}
|
||||
else
|
||||
{
|
||||
padeditor.ace.callWithAce(function(ace)
|
||||
{
|
||||
if (cmd == 'bold' || cmd == 'italic' || cmd == 'underline' || cmd == 'strikethrough') ace.ace_toggleAttributeOnSelection(cmd);
|
||||
else if (cmd == 'undo' || cmd == 'redo') ace.ace_doUndoRedo(cmd);
|
||||
else if (cmd == 'insertunorderedlist') ace.ace_doInsertUnorderedList();
|
||||
else if (cmd == 'insertorderedlist') ace.ace_doInsertOrderedList();
|
||||
else if (cmd == 'indent')
|
||||
{
|
||||
if (!ace.ace_doIndentOutdent(false))
|
||||
{
|
||||
ace.ace_doInsertUnorderedList();
|
||||
}
|
||||
}
|
||||
else if (cmd == 'outdent')
|
||||
{
|
||||
ace.ace_doIndentOutdent(true);
|
||||
}
|
||||
else if (cmd == 'clearauthorship')
|
||||
{
|
||||
if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret())
|
||||
{
|
||||
if (window.confirm("Clear authorship colors on entire document?"))
|
||||
{
|
||||
ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
|
||||
['author', '']
|
||||
]);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ace.ace_setAttributeOnSelection('author', '');
|
||||
}
|
||||
}
|
||||
}, cmd, true);
|
||||
else if (self.hasToolbarCommand(cmd)) {
|
||||
self.executeToolbarCommand(cmd);
|
||||
}
|
||||
}
|
||||
if(padeditor.ace) padeditor.ace.focus();
|
||||
|
@ -185,7 +168,7 @@ var padeditbar = (function()
|
|||
toogleDropDown: function(moduleName)
|
||||
{
|
||||
var modules = ["settings", "importexport", "embed", "users"];
|
||||
|
||||
|
||||
// hide all modules and remove highlighting of all buttons
|
||||
if(moduleName == "none")
|
||||
{
|
||||
|
@ -194,9 +177,9 @@ var padeditbar = (function()
|
|||
//skip the userlist
|
||||
if(modules[i] == "users")
|
||||
continue;
|
||||
|
||||
|
||||
var module = $("#" + modules[i]);
|
||||
|
||||
|
||||
if(module.css('display') != "none")
|
||||
{
|
||||
$("#" + modules[i] + "link").removeClass("selected");
|
||||
|
@ -204,14 +187,14 @@ var padeditbar = (function()
|
|||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
else
|
||||
{
|
||||
// hide all modules that are not selected and remove highlighting
|
||||
// respectively add highlighting to the corresponding button
|
||||
for(var i=0;i<modules.length;i++)
|
||||
{
|
||||
var module = $("#" + modules[i]);
|
||||
|
||||
|
||||
if(module.css('display') != "none")
|
||||
{
|
||||
$("#" + modules[i] + "link").removeClass("selected");
|
||||
|
|
|
@ -24,64 +24,6 @@
|
|||
<div id="editbar" class="toolbar">
|
||||
<ul class="menu_left">
|
||||
<% e.begin_block("editbarMenuLeft"); %>
|
||||
<li class="acl-write" id="bold" data-key="bold">
|
||||
<a class="grouped-left" title="Bold (ctrl-B)">
|
||||
<span class="buttonicon buttonicon-bold"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="italic" data-key="italic">
|
||||
<a class="grouped-middle" title="Italics (ctrl-I)">
|
||||
<span class="buttonicon buttonicon-italic"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="underline" data-key="underline">
|
||||
<a class="grouped-middle" title="Underline (ctrl-U)">
|
||||
<span class="buttonicon buttonicon-underline"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="strikethrough" data-key="strikethrough">
|
||||
<a class="grouped-right" title="Strikethrough">
|
||||
<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" title="Toggle Ordered List">
|
||||
<span class="buttonicon buttonicon-insertorderedlist"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="unoderedlist" data-key="insertunorderedlist">
|
||||
<a class="grouped-middle" title="Toggle Bullet List">
|
||||
<span class="buttonicon buttonicon-insertunorderedlist"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="indent" data-key="indent">
|
||||
<a class="grouped-middle" title="Indent">
|
||||
<span class="buttonicon buttonicon-indent"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="outdent" data-key="outdent">
|
||||
<a class="grouped-right" title="Unindent">
|
||||
<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" title="Undo (ctrl-Z)">
|
||||
<span class="buttonicon buttonicon-undo"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write" id="redo" data-key="redo">
|
||||
<a class="grouped-right" title="Redo (ctrl-Y)">
|
||||
<span class="buttonicon buttonicon-redo"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="acl-write separator"></li>
|
||||
<li class="acl-write" id="clearAuthorship" data-key="clearauthorship">
|
||||
<a title="Clear Authorship Colors">
|
||||
<span class="buttonicon buttonicon-clearauthorship"></span>
|
||||
</a>
|
||||
</li>
|
||||
<% e.end_block(); %>
|
||||
</ul>
|
||||
<ul class="menu_right">
|
||||
|
@ -326,13 +268,13 @@
|
|||
<script type="text/javascript">
|
||||
var clientVars = {};
|
||||
(function () {
|
||||
|
||||
|
||||
|
||||
|
||||
var pathComponents = location.pathname.split('/');
|
||||
|
||||
|
||||
// Strip 'p' and the padname from the pathname and set as baseURL
|
||||
var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/';
|
||||
|
||||
|
||||
require.setRootURI(baseURL + "javascripts/src");
|
||||
require.setLibraryURI(baseURL + "javascripts/lib");
|
||||
require.setGlobalKeyPath("require");
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue