mirror of
https://github.com/codex-team/editor.js
synced 2026-03-18 00:19:53 +01:00
New toolbar module making (#221)
* New toolbar module making * Update docs
This commit is contained in:
Peter Savchenko
GitHub
parent
0f5aad56b1
commit
e71f8ad8ea
9 changed files with 1030 additions and 746 deletions
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -105,11 +105,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
console.log(editor);
|
||||
|
||||
|
||||
|
||||
// var editor2 = new CodexEditor({
|
||||
// holderId : 'cdx',
|
||||
// initialBlock: 'header'
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ module.exports = class CodexEditor {
|
|||
/**
|
||||
* Skip module with passed name
|
||||
*/
|
||||
if (moduleName == name) {
|
||||
if (moduleName === name) {
|
||||
|
||||
continue;
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,26 @@ export default class Dom {
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Append one or several elements to the parent
|
||||
*
|
||||
* @param {Element} parent - where to append
|
||||
* @param {Element|Element[]} - element ore elements list
|
||||
*/
|
||||
static append(parent, elements) {
|
||||
|
||||
if ( Array.isArray(elements) ) {
|
||||
|
||||
elements.forEach( el => parent.appendChild(el) );
|
||||
|
||||
} else {
|
||||
|
||||
parent.appendChild(elements);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector Decorator
|
||||
*
|
||||
|
|
|
|||
|
|
@ -17,29 +17,6 @@ module.exports = (function (draw) {
|
|||
|
||||
};
|
||||
|
||||
/**
|
||||
* Empty toolbar with toggler
|
||||
*/
|
||||
draw.toolbar = function () {
|
||||
|
||||
var bar = document.createElement('div');
|
||||
|
||||
bar.className += 'ce-toolbar';
|
||||
|
||||
return bar;
|
||||
|
||||
};
|
||||
|
||||
draw.toolbarContent = function () {
|
||||
|
||||
var wrapper = document.createElement('DIV');
|
||||
|
||||
wrapper.classList.add('ce-toolbar__content');
|
||||
|
||||
return wrapper;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Inline toolbar
|
||||
*/
|
||||
|
|
@ -94,93 +71,6 @@ module.exports = (function (draw) {
|
|||
|
||||
};
|
||||
|
||||
/**
|
||||
* @todo Desc
|
||||
*/
|
||||
draw.blockButtons = function () {
|
||||
|
||||
var block = document.createElement('div');
|
||||
|
||||
block.className += 'ce-toolbar__actions';
|
||||
|
||||
return block;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Block settings panel
|
||||
*/
|
||||
draw.blockSettings = function () {
|
||||
|
||||
var settings = document.createElement('div');
|
||||
|
||||
settings.className += 'ce-settings';
|
||||
|
||||
return settings;
|
||||
|
||||
};
|
||||
|
||||
draw.defaultSettings = function () {
|
||||
|
||||
var div = document.createElement('div');
|
||||
|
||||
div.classList.add('ce-settings_default');
|
||||
|
||||
return div;
|
||||
|
||||
};
|
||||
|
||||
draw.pluginsSettings = function () {
|
||||
|
||||
var div = document.createElement('div');
|
||||
|
||||
div.classList.add('ce-settings_plugin');
|
||||
|
||||
return div;
|
||||
|
||||
};
|
||||
|
||||
draw.plusButton = function () {
|
||||
|
||||
var button = document.createElement('span');
|
||||
|
||||
button.className = 'ce-toolbar__plus';
|
||||
// button.innerHTML = '<i class="ce-icon-plus"></i>';
|
||||
|
||||
return button;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Settings button in toolbar
|
||||
*/
|
||||
draw.settingsButton = function () {
|
||||
|
||||
var toggler = document.createElement('span');
|
||||
|
||||
toggler.className = 'ce-toolbar__settings-btn';
|
||||
|
||||
/** Toggler button*/
|
||||
toggler.innerHTML = '<i class="ce-icon-cog"></i>';
|
||||
|
||||
return toggler;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Redactor tools wrapper
|
||||
*/
|
||||
|
||||
draw.toolbox = function () {
|
||||
|
||||
var wrapper = document.createElement('div');
|
||||
|
||||
wrapper.className = 'ce-toolbar__tools';
|
||||
|
||||
return wrapper;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @protected
|
||||
*
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ module.exports = class Events {
|
|||
* @returns {string}
|
||||
*/
|
||||
static get name() {
|
||||
|
||||
return 'Events';
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -80,6 +82,7 @@ module.exports = class Events {
|
|||
|
||||
this.Editor = null;
|
||||
this.subscribers = null;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
207
src/components/modules/toolbar.js
Normal file
207
src/components/modules/toolbar.js
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
/**
|
||||
* DOM manipulations
|
||||
*/
|
||||
import $ from '../dom';
|
||||
|
||||
/**
|
||||
*
|
||||
* «Toolbar» is the node that moves up/down over current block
|
||||
*
|
||||
* ______________________________________ Toolbar ____________________________________________
|
||||
* | |
|
||||
* | ..................... Content .................... ......... Block Actions .......... |
|
||||
* | . . . . |
|
||||
* | . . . [Open Settings] [Remove Block] . |
|
||||
* | . [Plus Button] [Toolbox: {Tool1}, {Tool2}] . . . |
|
||||
* | . . . [Settings Panel] . |
|
||||
* | .................................................. .................................. |
|
||||
* | |
|
||||
* |___________________________________________________________________________________________|
|
||||
*
|
||||
*
|
||||
* Toolbox — its an Element contains tools buttons. Can be shown by Plus Button.
|
||||
*
|
||||
* _______________ Toolbox _______________
|
||||
* | |
|
||||
* | [Header] [Image] [List] [Quote] ... |
|
||||
* |_______________________________________|
|
||||
*
|
||||
*
|
||||
* Settings Panel — is an Element with block settings:
|
||||
*
|
||||
* ____ Settings Panel ____
|
||||
* | ...................... |
|
||||
* | . Tool Settings . |
|
||||
* | ...................... |
|
||||
* | . Default Settings . |
|
||||
* | ...................... |
|
||||
* |________________________|
|
||||
*
|
||||
*
|
||||
* @class
|
||||
* @classdesc Toolbar module
|
||||
*
|
||||
* @property {Object} nodes
|
||||
* @property {Element} nodes.wrapper - Toolbar main element
|
||||
* @property {Element} nodes.content - Zone with Plus button and toolbox.
|
||||
* @property {Element} nodes.actions - Zone with Block Settings and Remove Button
|
||||
* @property {Element} nodes.plusButton - Button that opens or closes Toolbox
|
||||
* @property {Element} nodes.toolbox - Container for tools
|
||||
* @property {Element} nodes.settingsToggler - open/close Settings Panel button
|
||||
* @property {Element} nodes.removeBlockButton - Remove Block button
|
||||
* @property {Element} nodes.settings - Settings Panel
|
||||
* @property {Element} nodes.pluginSettings - Plugin Settings section of Settings Panel
|
||||
* @property {Element} nodes.defaultSettings - Default Settings section of Settings Panel
|
||||
*/
|
||||
class Toolbar {
|
||||
|
||||
static get name() {
|
||||
|
||||
return 'Toolbar';
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
constructor() {
|
||||
|
||||
this.Editor = null;
|
||||
|
||||
this.nodes = {
|
||||
wrapper : null,
|
||||
content : null,
|
||||
actions : null,
|
||||
|
||||
// Content Zone
|
||||
plusButton : null,
|
||||
toolbox : null,
|
||||
|
||||
// Actions Zone
|
||||
settingsToggler : null,
|
||||
removeBlockButton: null,
|
||||
settings: null,
|
||||
|
||||
// Settings Zone: Plugin Settings and Default Settings
|
||||
pluginSettings: null,
|
||||
defaultSettings: null,
|
||||
};
|
||||
|
||||
this.CSS = {
|
||||
toolbar: 'ce-toolbar',
|
||||
content: 'ce-toolbar__content',
|
||||
actions: 'ce-toolbar__actions',
|
||||
|
||||
// Content Zone
|
||||
toolbox: 'ce-toolbar__toolbox',
|
||||
plusButton: 'ce-toolbar__plus',
|
||||
|
||||
// Actions Zone
|
||||
settingsToggler: 'ce-toolbar__settings-btn',
|
||||
removeBlockButton: 'ce-toolbar__remove-btn',
|
||||
|
||||
// Settings Panel
|
||||
settings: 'ce-settings',
|
||||
defaultSettings: 'ce-settings_default',
|
||||
pluginSettings: 'ce-settings_plugin',
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Editor modules setter
|
||||
* @param {object} Editor - available editor modules
|
||||
*/
|
||||
set state(Editor) {
|
||||
|
||||
this.Editor = Editor;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes toolbar
|
||||
*/
|
||||
make() {
|
||||
|
||||
this.nodes.wrapper = $.make('div', this.CSS.toolbar);
|
||||
|
||||
/**
|
||||
* Make Content Zone and Actions Zone
|
||||
*/
|
||||
['content', 'actions'].forEach( el => {
|
||||
|
||||
this.nodes[el] = $.make('div', this.CSS[el]);
|
||||
$.append(this.nodes.wrapper, this.nodes[el]);
|
||||
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Fill Content Zone:
|
||||
* - Plus Button
|
||||
* - Toolbox
|
||||
*/
|
||||
['plusButton', 'toolbox'].forEach( el => {
|
||||
|
||||
this.nodes[el] = $.make('div', this.CSS[el]);
|
||||
$.append(this.nodes.content, this.nodes[el]);
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Fill Actions Zone:
|
||||
* - Settings Toggler
|
||||
* - Remove Block Button
|
||||
* - Settings Panel
|
||||
*/
|
||||
this.nodes.settingsToggler = $.make('span', this.CSS.settingsToggler);
|
||||
this.nodes.removeBlockButton = this.makeRemoveBlockButton();
|
||||
|
||||
$.append(this.nodes.actions, [this.nodes.settingsToggler, this.nodes.removeBlockButton]);
|
||||
|
||||
/**
|
||||
* Make and append Settings Panel
|
||||
*/
|
||||
this.makeBlockSettingsPanel();
|
||||
|
||||
/**
|
||||
* Append toolbar to the Editor
|
||||
*/
|
||||
$.append(this.Editor.ui.nodes.wrapper, this.nodes.wrapper);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Panel with block settings with 2 sections:
|
||||
*
|
||||
* @return {Element}
|
||||
*/
|
||||
makeBlockSettingsPanel() {
|
||||
|
||||
this.nodes.settings = $.make('div', this.CSS.settings);
|
||||
|
||||
this.nodes.pluginSettings = $.make('div', this.CSS.pluginSettings);
|
||||
this.nodes.defaultSettings = $.make('div', this.CSS.defaultSettings);
|
||||
|
||||
$.append(this.nodes.settings, [this.nodes.pluginSettings, this.nodes.defaultSettings]);
|
||||
$.append(this.nodes.actions, this.nodes.settings);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes Remove Block button, and confirmation panel
|
||||
* @return {Element} wrapper with button and panel
|
||||
*/
|
||||
makeRemoveBlockButton() {
|
||||
|
||||
/**
|
||||
* @todo add confirmation panel and handlers
|
||||
* @see {@link settings#makeRemoveBlockButton}
|
||||
*/
|
||||
return $.make('span', this.CSS.removeBlockButton);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = Toolbar;
|
||||
|
|
@ -125,15 +125,15 @@ module.exports = class UI {
|
|||
*/
|
||||
this.nodes.wrapper = $.make('div', CSS.editorWrapper);
|
||||
this.nodes.redactor = $.make('div', CSS.editorZone);
|
||||
// toolbar = makeToolBar_();
|
||||
|
||||
// wrapper.appendChild(toolbar);
|
||||
this.nodes.wrapper.appendChild(this.nodes.redactor);
|
||||
/**
|
||||
* Append editor wrapper with redactor zone into holder
|
||||
*/
|
||||
this.nodes.holder.appendChild(this.nodes.wrapper);
|
||||
|
||||
/**
|
||||
* Make toolbar
|
||||
*/
|
||||
this.Editor.Toolbar.make();
|
||||
|
||||
resolve();
|
||||
|
||||
})
|
||||
|
|
@ -153,7 +153,9 @@ module.exports = class UI {
|
|||
/** Add eventlisteners to redactor elements */
|
||||
// .then(bindEvents_)
|
||||
|
||||
.catch( function () {
|
||||
.catch(e => {
|
||||
|
||||
console.error(e);
|
||||
|
||||
// editor.core.log("Can't draw editor interface");
|
||||
|
||||
|
|
@ -179,102 +181,6 @@ module.exports = class UI {
|
|||
// ui.prepare = function () {
|
||||
//
|
||||
|
||||
//
|
||||
// };
|
||||
//
|
||||
// /**
|
||||
// * @private
|
||||
// * Draws inline toolbar zone
|
||||
// */
|
||||
// var makeInlineToolbar_ = function () {
|
||||
//
|
||||
// var container = editor.draw.inlineToolbar();
|
||||
//
|
||||
// /** Append to redactor new inline block */
|
||||
// editor.nodes.inlineToolbar.wrapper = container;
|
||||
//
|
||||
// /** Draw toolbar buttons */
|
||||
// editor.nodes.inlineToolbar.buttons = editor.draw.inlineToolbarButtons();
|
||||
//
|
||||
// /** Buttons action or settings */
|
||||
// editor.nodes.inlineToolbar.actions = editor.draw.inlineToolbarActions();
|
||||
//
|
||||
// /** Append to inline toolbar buttons as part of it */
|
||||
// editor.nodes.inlineToolbar.wrapper.appendChild(editor.nodes.inlineToolbar.buttons);
|
||||
// editor.nodes.inlineToolbar.wrapper.appendChild(editor.nodes.inlineToolbar.actions);
|
||||
//
|
||||
// editor.nodes.wrapper.appendChild(editor.nodes.inlineToolbar.wrapper);
|
||||
//
|
||||
// };
|
||||
//
|
||||
// var makeToolBar_ = function () {
|
||||
//
|
||||
// let toolbar = editor.draw.toolbar(),
|
||||
// blockButtons = makeToolbarSettings_(),
|
||||
// toolbarContent = makeToolbarContent_();
|
||||
//
|
||||
// /** Appending first-level block buttons */
|
||||
// toolbar.appendChild(blockButtons);
|
||||
//
|
||||
// /** Append toolbarContent to toolbar */
|
||||
// toolbar.appendChild(toolbarContent);
|
||||
//
|
||||
// /** Make toolbar global */
|
||||
// editor.nodes.toolbar = toolbar;
|
||||
//
|
||||
// return toolbar;
|
||||
//
|
||||
// };
|
||||
//
|
||||
// var makeToolbarContent_ = function () {
|
||||
//
|
||||
// let toolbarContent = editor.draw.toolbarContent(),
|
||||
// toolbox = editor.draw.toolbox(),
|
||||
// plusButton = editor.draw.plusButton();
|
||||
//
|
||||
// /** Append plus button */
|
||||
// toolbarContent.appendChild(plusButton);
|
||||
//
|
||||
// /** Appending toolbar tools */
|
||||
// toolbarContent.appendChild(toolbox);
|
||||
//
|
||||
// /** Make Toolbox and plusButton global */
|
||||
// editor.nodes.toolbox = toolbox;
|
||||
// editor.nodes.plusButton = plusButton;
|
||||
//
|
||||
// return toolbarContent;
|
||||
//
|
||||
// };
|
||||
//
|
||||
// var makeToolbarSettings_ = function () {
|
||||
//
|
||||
// let blockSettings = editor.draw.blockSettings(),
|
||||
// blockButtons = editor.draw.blockButtons(),
|
||||
// defaultSettings = editor.draw.defaultSettings(),
|
||||
// showSettingsButton = editor.draw.settingsButton(),
|
||||
// showTrashButton = editor.toolbar.settings.makeRemoveBlockButton(),
|
||||
// pluginSettings = editor.draw.pluginsSettings();
|
||||
//
|
||||
// /** Add default and plugins settings */
|
||||
// blockSettings.appendChild(pluginSettings);
|
||||
// blockSettings.appendChild(defaultSettings);
|
||||
//
|
||||
// /**
|
||||
// * Make blocks buttons
|
||||
// * This block contains settings button and remove block button
|
||||
// */
|
||||
// blockButtons.appendChild(showSettingsButton);
|
||||
// blockButtons.appendChild(showTrashButton);
|
||||
// blockButtons.appendChild(blockSettings);
|
||||
//
|
||||
// /** Make BlockSettings, PluginSettings, DefaultSettings global */
|
||||
// editor.nodes.blockSettings = blockSettings;
|
||||
// editor.nodes.pluginSettings = pluginSettings;
|
||||
// editor.nodes.defaultSettings = defaultSettings;
|
||||
// editor.nodes.showSettingsButton = showSettingsButton;
|
||||
// editor.nodes.showTrashButton = showTrashButton;
|
||||
//
|
||||
// return blockButtons;
|
||||
//
|
||||
// };
|
||||
//
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue