LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

CCM NG: Renamed actions to commands in ccm-editor 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5205 8810af33-2d31-482b-a856-94f89814c4df

Former-commit-id: efd3439702
pull/2/head
jensp 2018-01-19 07:27:35 +00:00
parent dc26e3ad61
commit bf9a12cf9e
4 changed files with 139 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ccm-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js
View File

@ -3,40 +3,40 @@ requirejs(["./ccm-editor",
function(editor, doc) { function(editor, doc) {
editor.addEditor(".editor-textarea", { editor.addEditor(".editor-textarea", {
"actionGroups": [ "commandGroups": [
{ {
"name": "blocks", "name": "blocks",
"title": "Format blocks", "title": "Format blocks",
"actions": [ "commands": [
editor.FormatBlockAction editor.FormatBlockCommand
] ]
}, },
{ {
"name": "format-text", "name": "format-text",
"title": "Format text", "title": "Format text",
"actions": [ "commands": [
editor.MakeBoldAction, editor.MakeBoldCommand,
editor.MakeItalicAction, editor.MakeItalicCommand,
editor.MakeUnderlineAction, editor.MakeUnderlineCommand,
editor.StrikeThroughAction, editor.StrikeThroughCommand,
editor.SubscriptAction, editor.SubscriptCommand,
editor.SuperscriptAction, editor.SuperscriptCommand,
editor.RemoveFormatAction, editor.RemoveFormatCommand,
editor.InsertExternalLinkAction editor.InsertExternalLinkCommand
] ]
}, },
{ {
"name": "insert-list", "name": "insert-list",
"title": "Insert list", "title": "Insert list",
"actions": [ "commands": [
editor.InsertUnorderedListAction, editor.InsertUnorderedListCommand,
editor.InsertOrderedListAction editor.InsertOrderedListCommand
] ]
}, },
{ {
"name": "html", "name": "html",
"title": "HTML", "title": "HTML",
"actions": [editor.ToggleHtmlAction] "commands": [editor.ToggleHtmlCommand]
} }
], ],
"settings": { "settings": {

2
ccm-editor/src/main/resources/ccm-editor/ccm-editor.css
View File

@ -92,7 +92,7 @@
padding: 0.2em 0.33em; padding: 0.2em 0.33em;
} }
.ccm-editor-toolbar-actiongroup { .ccm-editor-toolbar-commandgroup {
box-sizing: inherit; box-sizing: inherit;
display: inline-block; display: inline-block;

206
ccm-editor/src/main/typescript/ccm-editor/ccm-editor.ts
View File

@ -1,5 +1,5 @@
/** /**
* Them main class for the editor. * The main class for the editor.
*/ */
export class CCMEditor { export class CCMEditor {
@ -8,7 +8,7 @@ export class CCMEditor {
private editorDiv: Element; private editorDiv: Element;
private editorToolbar: Element; private editorToolbar: Element;
private htmlSourceToolbar: Element; private htmlSourceToolbar: Element;
private actions: CCMEditorAction[] = []; private commands: CCMEditorCommand[] = [];
constructor(textarea: HTMLTextAreaElement, constructor(textarea: HTMLTextAreaElement,
configuration?: CCMEditorConfiguration) { configuration?: CCMEditorConfiguration) {
@ -22,11 +22,11 @@ export class CCMEditor {
console.log("No configuration provided, using default configuration."); console.log("No configuration provided, using default configuration.");
this.configuration = { this.configuration = {
"actionGroups": [ "commandGroups": [
{ {
"name": "mark-text", "name": "mark-text",
"title": "Mark text", "title": "Mark text",
"actions": [MakeBoldAction, MakeItalicAction] "commands": [MakeBoldCommand, MakeItalicCommand]
} }
], ],
"settings": "settings":
@ -69,19 +69,19 @@ export class CCMEditor {
this.textarea = textarea; this.textarea = textarea;
console.log("Adding actions...") console.log("Adding commands...")
for(const actionGroupKey in this.configuration.actionGroups) { for(const commandGroupKey in this.configuration.commandGroups) {
const actionGroup: CCMEditorActionGroup = this const commandGroup: CCMEditorCommandGroup = this
.configuration .configuration
.actionGroups[actionGroupKey]; .commandGroups[commandGroupKey];
for(const actionKey in actionGroup.actions) { for(const commandKey in commandGroup.commands) {
console.log("Adding action " + actionKey); console.log("Adding command " + commandKey);
const actionClass = actionGroup.actions[actionKey]; const commandClass = commandGroup.commands[commandKey];
const actionObj: CCMEditorAction const commandObj: CCMEditorCommand
= new actionClass(this, configuration.settings); = new commandClass(this, configuration.settings);
this.actions[actionGroup.actions[actionKey]] = actionObj; this.commands[commandGroup.commands[commandKey]] = commandObj;
} }
} }
@ -91,20 +91,20 @@ export class CCMEditor {
this.editorToolbar = editor.appendChild(document.createElement("div")); this.editorToolbar = editor.appendChild(document.createElement("div"));
this.editorToolbar.classList.add("ccm-editor-toolbar"); this.editorToolbar.classList.add("ccm-editor-toolbar");
for(const actionGroupKey in this.configuration.actionGroups) { for(const commandGroupKey in this.configuration.commandGroups) {
const actionGroup: CCMEditorActionGroup = this const commandGroup: CCMEditorCommandGroup = this
.configuration .configuration
.actionGroups[actionGroupKey]; .commandGroups[commandGroupKey];
const actionGroupElem: Element = this.editorToolbar const commandGroupElem: Element = this.editorToolbar
.appendChild(document.createElement("div")); .appendChild(document.createElement("div"));
actionGroupElem.classList.add("ccm-editor-toolbar-actiongroup"); commandGroupElem.classList.add("ccm-editor-toolbar-commandgroup");
for(const actionKey in actionGroup.actions) { for(const commandKey in commandGroup.commands) {
const actionObj: CCMEditorAction = this const commandObj: CCMEditorCommand = this
.actions[actionGroup.actions[actionKey]]; .commands[commandGroup.commands[commandKey]];
actionGroupElem.appendChild(actionObj.getDocumentFragment()); commandGroupElem.appendChild(commandObj.getDocumentFragment());
} }
} }
@ -199,9 +199,9 @@ export class CCMEditor {
private selectionChanged() { private selectionChanged() {
console.log("Selection changed."); console.log("Selection changed.");
const selection: Selection = document.getSelection(); const selection: Selection = document.getSelection();
for(const key in this.actions) { for(const key in this.commands) {
this.actions[key].selectionChanged(selection); this.commands[key].selectionChanged(selection);
} }
} }
@ -240,23 +240,23 @@ export function addEditor(selector: string,
interface CCMEditorConfiguration { interface CCMEditorConfiguration {
actionGroups: CCMEditorActionGroup[] commandGroups: CCMEditorCommandGroup[]
settings: {} settings: {}
} }
interface CCMEditorActionGroup { interface CCMEditorCommandGroup {
name: string; name: string;
title: string; title: string;
actions: any[]; commands: any[];
} }
/** /**
* Possible types for actions. * Possible types for commands.
*/ */
export enum CCMEditorActionType { export enum CCMEditorCommandType {
INSERT_BLOCK, INSERT_BLOCK,
INSERT_INLINE, INSERT_INLINE,
@ -264,9 +264,9 @@ export enum CCMEditorActionType {
} }
/** /**
* Base class for all editor actions. * Base class for all editor commands.
*/ */
export abstract class CCMEditorAction { export abstract class CCMEditorCommand {
protected editor: CCMEditor; protected editor: CCMEditor;
protected settings: string[]; protected settings: string[];
@ -281,7 +281,7 @@ export abstract class CCMEditorAction {
} }
/** /**
* Generate the HTML for the control(s) for the action. The Element * Generate the HTML for the control(s) for the command. The Element
* returned by this method is added to the toolbar of the editor if * returned by this method is added to the toolbar of the editor if
* the plugin is added to the editor. * the plugin is added to the editor.
*/ */
@ -290,12 +290,12 @@ export abstract class CCMEditorAction {
} }
/** /**
* Return the type of the action. * Return the type of the command.
*/ */
abstract getActionType(): CCMEditorActionType; abstract getCommandType(): CCMEditorCommandType;
/** /**
* Verify is the action is applicable for the current element. * Verify is the command is applicable for the current element.
* This will be a future extension. * This will be a future extension.
* *
* @param element The element. * @param element The element.
@ -307,17 +307,17 @@ export abstract class CCMEditorAction {
public abstract selectionChanged(selection: Selection): void; public abstract selectionChanged(selection: Selection): void;
/** /**
* Enables the controls for the action. * Enables the controls for the command.
*/ */
abstract enableAction(): void; abstract enableCommand(): void;
/** /**
* Disables the controls for the action. * Disables the controls for the command.
*/ */
abstract disableAction(): void; abstract disableCommand(): void;
} }
export class FormatBlockAction extends CCMEditorAction { export class FormatBlockCommand extends CCMEditorCommand {
private blockSelect: HTMLSelectElement; private blockSelect: HTMLSelectElement;
private values: string[]; private values: string[];
@ -361,8 +361,8 @@ export class FormatBlockAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_BLOCK; return CCMEditorCommandType.INSERT_BLOCK;
} }
selectionChanged(selection: Selection) { selectionChanged(selection: Selection) {
@ -408,20 +408,20 @@ export class FormatBlockAction extends CCMEditorAction {
} }
} }
enableAction(): void { enableCommand(): void {
this.blockSelect.removeAttribute("disabled"); this.blockSelect.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.blockSelect.setAttribute("disabled", "true"); this.blockSelect.setAttribute("disabled", "true");
} }
} }
/** /**
* Action for making the selected text bold (strongly emphasised). Wraps the * Command for making the selected text bold (strongly emphasised). Wraps the
* selected text in a <code>b</code> element. * selected text in a <code>b</code> element.
*/ */
export class MakeBoldAction extends CCMEditorAction { export class MakeBoldCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -452,29 +452,29 @@ export class MakeBoldAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
selectionChanged(selection: Selection) { selectionChanged(selection: Selection) {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
/** /**
* Action for making the selected text italic (emphasised). Wraps the * Command for making the selected text italic (emphasised). Wraps the
* selected text in a <code>i</code> element. * selected text in a <code>i</code> element.
*/ */
export class MakeItalicAction extends CCMEditorAction { export class MakeItalicCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -504,8 +504,8 @@ export class MakeItalicAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -516,20 +516,20 @@ export class MakeItalicAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
/** /**
* Action for making the selected text underlined. Wraps the selected text * Command for making the selected text underlined. Wraps the selected text
* in an <code>u</code> element * in an <code>u</code> element
*/ */
export class MakeUnderlineAction extends CCMEditorAction { export class MakeUnderlineCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -562,8 +562,8 @@ export class MakeUnderlineAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -574,16 +574,16 @@ export class MakeUnderlineAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class StrikeThroughAction extends CCMEditorAction { export class StrikeThroughCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -613,8 +613,8 @@ export class StrikeThroughAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -625,16 +625,16 @@ export class StrikeThroughAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class ToggleHtmlAction extends CCMEditorAction { export class ToggleHtmlCommand extends CCMEditorCommand {
private showHtmlButton: HTMLButtonElement; private showHtmlButton: HTMLButtonElement;
@ -662,24 +662,24 @@ export class ToggleHtmlAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.OTHER; return CCMEditorCommandType.OTHER;
} }
selectionChanged(selection: Selection) { selectionChanged(selection: Selection) {
} }
enableAction(): void { enableCommand(): void {
this.showHtmlButton.removeAttribute("disabled"); this.showHtmlButton.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.showHtmlButton.setAttribute("disabled", "true"); this.showHtmlButton.setAttribute("disabled", "true");
} }
} }
export class SubscriptAction extends CCMEditorAction { export class SubscriptCommand extends CCMEditorCommand {
private button: HTMLButtonElement; private button: HTMLButtonElement;
@ -708,8 +708,8 @@ export class SubscriptAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -720,16 +720,16 @@ export class SubscriptAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class SuperscriptAction extends CCMEditorAction { export class SuperscriptCommand extends CCMEditorCommand {
private button: HTMLButtonElement; private button: HTMLButtonElement;
@ -758,8 +758,8 @@ export class SuperscriptAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -770,16 +770,16 @@ export class SuperscriptAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class RemoveFormatAction extends CCMEditorAction { export class RemoveFormatCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -809,8 +809,8 @@ export class RemoveFormatAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.OTHER; return CCMEditorCommandType.OTHER;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -821,16 +821,16 @@ export class RemoveFormatAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class InsertOrderedListAction extends CCMEditorAction { export class InsertOrderedListCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -860,8 +860,8 @@ export class InsertOrderedListAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_BLOCK; return CCMEditorCommandType.INSERT_BLOCK;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -872,16 +872,16 @@ export class InsertOrderedListAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class InsertUnorderedListAction extends CCMEditorAction { export class InsertUnorderedListCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -911,8 +911,8 @@ export class InsertUnorderedListAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_BLOCK; return CCMEditorCommandType.INSERT_BLOCK;
} }
isApplicableFor(element: Element): Boolean { isApplicableFor(element: Element): Boolean {
@ -923,16 +923,16 @@ export class InsertUnorderedListAction extends CCMEditorAction {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }
export class InsertExternalLinkAction extends CCMEditorAction { export class InsertExternalLinkCommand extends CCMEditorCommand {
private button: Element; private button: Element;
@ -1025,19 +1025,19 @@ export class InsertExternalLinkAction extends CCMEditorAction {
}); });
} }
getActionType(): CCMEditorActionType { getCommandType(): CCMEditorCommandType {
return CCMEditorActionType.INSERT_INLINE; return CCMEditorCommandType.INSERT_INLINE;
} }
selectionChanged(selection: Selection) { selectionChanged(selection: Selection) {
} }
enableAction(): void { enableCommand(): void {
this.button.removeAttribute("disabled"); this.button.removeAttribute("disabled");
} }
disableAction(): void { disableCommand(): void {
this.button.setAttribute("disabled", "true"); this.button.setAttribute("disabled", "true");
} }
} }

38
ccm-editor/src/site/markdown/index.md
View File

@ -103,40 +103,40 @@ and create a file similar to the following one:
function(editor, doc) { function(editor, doc) {
editor.addEditor(".editor", { editor.addEditor(".editor", {
"actionGroups": [ "commandGroups": [
{ {
"name": "blocks", "name": "blocks",
"title": "Format blocks", "title": "Format blocks",
"actions": [ "commands": [
editor.FormatBlockAction editor.FormatBlockCommand
] ]
}, },
{ {
"name": "format-text", "name": "format-text",
"title": "Format text", "title": "Format text",
"actions": [ "commands": [
editor.MakeBoldAction, editor.MakeBoldCommand,
editor.MakeItalicAction, editor.MakeItalicCommand,
editor.MakeUnderlineAction, editor.MakeUnderlineCommand,
editor.StrikeThroughAction, editor.StrikeThroughCommand,
editor.SubscriptAction, editor.SubscriptCommand,
editor.SuperscriptAction, editor.SuperscriptCommand,
editor.RemoveFormatAction, editor.RemoveFormatCommand,
editor.InsertExternalLinkAction editor.InsertExternalLinkCommand
] ]
}, },
{ {
"name": "insert-list", "name": "insert-list",
"title": "Insert list", "title": "Insert list",
"actions": [ "commands": [
editor.InsertUnorderedListAction, editor.InsertUnorderedListCommand,
editor.InsertOrderedListAction editor.InsertOrderedListCommand
] ]
}, },
{ {
"name": "html", "name": "html",
"title": "HTML", "title": "HTML",
"actions": [editor.ToggleHtmlAction] "commands": [editor.ToggleHtmlCommand]
} }
], ],
"settings": { "settings": {
@ -176,6 +176,6 @@ The editor is initialised with a configuration. The configuration is described
at the [configuration](configuration.html) page. The editor itself has no at the [configuration](configuration.html) page. The editor itself has no
hardcoded functions. Instead all controls in its toolbar are provided as hardcoded functions. Instead all controls in its toolbar are provided as
(TypeScript) classes which can be added by the configuration. The editor (TypeScript) classes which can be added by the configuration. The editor
module provides several standard actions like formated block elements. Please module provides several standard commands like formated block elements. Please
refer to the [Standard Actions](actions.html) for more information about these refer to the [Standard Commands](commands.html) for more information about these
actions. commands.