mirror of
https://github.com/codex-team/editor.js
synced 2026-03-18 00:19:53 +01:00
Merge branch 'rewriting-version2.0' into renderer-initial
# Conflicts: # build/codex-editor.js # build/codex-editor.js.map # src/codex.js
This commit is contained in:
Murod Khaydarov
commit
b83bd752f9
9 changed files with 631 additions and 344 deletions
|
|
@ -48,10 +48,42 @@ var CodexEditor =
|
|||
/**
|
||||
* Codex Editor
|
||||
*
|
||||
* Short Description (눈_눈;)
|
||||
* @version 2.0.0
|
||||
*
|
||||
* How to start?
|
||||
* Example:
|
||||
* new CodexEditor({
|
||||
* holderId : 'codex-editor',
|
||||
* initialBlock : 'paragraph',
|
||||
* placeholder : 'Write your story....',
|
||||
* tools: {
|
||||
* quote: Quote,
|
||||
* anotherTool : AnotherTool
|
||||
* },
|
||||
* toolsConfig: {
|
||||
* quote: {
|
||||
* iconClassname : 'quote-icon',
|
||||
* displayInToolbox : true,
|
||||
* enableLineBreaks : true
|
||||
* },
|
||||
* anotherTool: {
|
||||
* iconClassname : 'tool-icon'
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* - tools is an object: {
|
||||
* pluginName: PluginClass,
|
||||
* .....
|
||||
* }
|
||||
* - toolsConfig is an additional configuration that uses Codex Editor API
|
||||
* iconClassname - CSS classname of toolbox icon
|
||||
* displayInToolbox - if you want to see your Tool in toolbox hided in "plus" button, than set "True". By default : "False"
|
||||
* enableLineBreaks - by default enter creates new block that set as initialblock, but if you set this property "True", enter will break the lines in current block
|
||||
*
|
||||
* @author CodeX-Team <https://ifmo.su>
|
||||
*
|
||||
* @author CodeX Team
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -74,7 +106,7 @@ var CodexEditor =
|
|||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var modules = (["content.js","eventDispatcher.js","renderer.js","tools.js","ui.js"]).map(function (module) {
|
||||
var modules = (["content.js","eventDispatcher.js","renderer.js","toolbar.js","tools.js","ui.js"]).map(function (module) {
|
||||
|
||||
return __webpack_require__(1)("./" + module);
|
||||
});
|
||||
|
|
@ -140,7 +172,7 @@ var CodexEditor =
|
|||
|
||||
/**
|
||||
* Setting for configuration
|
||||
* @param {object} config
|
||||
* @param {Object} config
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -223,7 +255,7 @@ var CodexEditor =
|
|||
/**
|
||||
* Skip module with passed name
|
||||
*/
|
||||
if (moduleName == name) {
|
||||
if (moduleName === name) {
|
||||
|
||||
continue;
|
||||
}
|
||||
|
|
@ -428,18 +460,20 @@ var CodexEditor =
|
|||
"./eventDispatcher.js": 16,
|
||||
"./renderer": 17,
|
||||
"./renderer.js": 17,
|
||||
"./toolbar/inline": 19,
|
||||
"./toolbar/inline.js": 19,
|
||||
"./toolbar/settings": 20,
|
||||
"./toolbar/settings.js": 20,
|
||||
"./toolbar/toolbar": 21,
|
||||
"./toolbar/toolbar.js": 21,
|
||||
"./toolbar/toolbox": 22,
|
||||
"./toolbar/toolbox.js": 22,
|
||||
"./tools": 23,
|
||||
"./tools.js": 23,
|
||||
"./ui": 24,
|
||||
"./ui.js": 24
|
||||
"./toolbar": 19,
|
||||
"./toolbar.js": 19,
|
||||
"./toolbar/inline": 20,
|
||||
"./toolbar/inline.js": 20,
|
||||
"./toolbar/settings": 21,
|
||||
"./toolbar/settings.js": 21,
|
||||
"./toolbar/toolbar": 22,
|
||||
"./toolbar/toolbar.js": 22,
|
||||
"./toolbar/toolbox": 23,
|
||||
"./toolbar/toolbox.js": 23,
|
||||
"./tools": 24,
|
||||
"./tools.js": 24,
|
||||
"./ui": 25,
|
||||
"./ui.js": 25
|
||||
};
|
||||
function webpackContext(req) {
|
||||
return __webpack_require__(webpackContextResolve(req));
|
||||
|
|
@ -4039,6 +4073,28 @@ var CodexEditor =
|
|||
return el;
|
||||
}
|
||||
|
||||
/**
|
||||
* Append one or several elements to the parent
|
||||
*
|
||||
* @param {Element} parent - where to append
|
||||
* @param {Element|Element[]} - element ore elements list
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'append',
|
||||
value: function append(parent, elements) {
|
||||
|
||||
if (Array.isArray(elements)) {
|
||||
|
||||
elements.forEach(function (el) {
|
||||
return parent.appendChild(el);
|
||||
});
|
||||
} else {
|
||||
|
||||
parent.appendChild(elements);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector Decorator
|
||||
*
|
||||
|
|
@ -4097,21 +4153,71 @@ var CodexEditor =
|
|||
/* 16 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
/**
|
||||
* @module eventDispatcher
|
||||
*
|
||||
* Has two important methods:
|
||||
* - {Function} on - appends subscriber to the event. If event doesn't exist - creates new one
|
||||
* - {Function} emit - fires all subscribers with data
|
||||
*
|
||||
* @version 1.0.0
|
||||
*/
|
||||
module.exports = function () {
|
||||
_createClass(Events, [{
|
||||
key: 'state',
|
||||
|
||||
|
||||
/**
|
||||
* @param Editor
|
||||
* @param Editor.modules {@link CodexEditor#moduleInstances}
|
||||
* @param Editor.config {@link CodexEditor#configuration}
|
||||
*/
|
||||
set: function set(Editor) {
|
||||
|
||||
this.Editor = Editor;
|
||||
}
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @property {Object} subscribers - all subscribers grouped by event name
|
||||
*/
|
||||
|
||||
}], [{
|
||||
key: 'name',
|
||||
|
||||
|
||||
/**
|
||||
* Module key name
|
||||
* @returns {string}
|
||||
*/
|
||||
get: function get() {
|
||||
|
||||
return 'Events';
|
||||
}
|
||||
}]);
|
||||
|
||||
function Events() {
|
||||
_classCallCheck(this, Events);
|
||||
|
||||
this.subscribers = {};
|
||||
this.Editor = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} eventName - event name
|
||||
* @param {Function} callback - subscriber
|
||||
*/
|
||||
|
||||
|
||||
_createClass(Events, [{
|
||||
key: "on",
|
||||
key: 'on',
|
||||
value: function on(eventName, callback) {
|
||||
|
||||
if (!(eventName in this.subscribers)) {
|
||||
|
|
@ -4122,8 +4228,14 @@ var CodexEditor =
|
|||
// group by events
|
||||
this.subscribers[eventName].push(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} eventName - event name
|
||||
* @param {Object} data - subscribers get this data when they were fired
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "emit",
|
||||
key: 'emit',
|
||||
value: function emit(eventName, data) {
|
||||
|
||||
this.subscribers[eventName].reduce(function (previousData, currentHandler) {
|
||||
|
|
@ -4133,6 +4245,18 @@ var CodexEditor =
|
|||
return newData ? newData : previousData;
|
||||
}, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroyer
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'destroy',
|
||||
value: function destroy() {
|
||||
|
||||
this.Editor = null;
|
||||
this.subscribers = null;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Events;
|
||||
|
|
@ -4534,6 +4658,240 @@ var CodexEditor =
|
|||
|
||||
/***/ }),
|
||||
/* 19 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
|
||||
* DOM manipulations
|
||||
*/
|
||||
|
||||
|
||||
var _dom = __webpack_require__(15);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
/**
|
||||
*
|
||||
* «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
|
||||
*/
|
||||
var Toolbar = function () {
|
||||
_createClass(Toolbar, null, [{
|
||||
key: 'name',
|
||||
get: function get() {
|
||||
|
||||
return 'Toolbar';
|
||||
}
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
}]);
|
||||
|
||||
function Toolbar() {
|
||||
_classCallCheck(this, Toolbar);
|
||||
|
||||
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
|
||||
*/
|
||||
|
||||
|
||||
_createClass(Toolbar, [{
|
||||
key: 'make',
|
||||
|
||||
|
||||
/**
|
||||
* Makes toolbar
|
||||
*/
|
||||
value: function make() {
|
||||
var _this = this;
|
||||
|
||||
this.nodes.wrapper = _dom2.default.make('div', this.CSS.toolbar);
|
||||
|
||||
/**
|
||||
* Make Content Zone and Actions Zone
|
||||
*/
|
||||
['content', 'actions'].forEach(function (el) {
|
||||
|
||||
_this.nodes[el] = _dom2.default.make('div', _this.CSS[el]);
|
||||
_dom2.default.append(_this.nodes.wrapper, _this.nodes[el]);
|
||||
});
|
||||
|
||||
/**
|
||||
* Fill Content Zone:
|
||||
* - Plus Button
|
||||
* - Toolbox
|
||||
*/
|
||||
['plusButton', 'toolbox'].forEach(function (el) {
|
||||
|
||||
_this.nodes[el] = _dom2.default.make('div', _this.CSS[el]);
|
||||
_dom2.default.append(_this.nodes.content, _this.nodes[el]);
|
||||
});
|
||||
|
||||
/**
|
||||
* Fill Actions Zone:
|
||||
* - Settings Toggler
|
||||
* - Remove Block Button
|
||||
* - Settings Panel
|
||||
*/
|
||||
this.nodes.settingsToggler = _dom2.default.make('span', this.CSS.settingsToggler);
|
||||
this.nodes.removeBlockButton = this.makeRemoveBlockButton();
|
||||
|
||||
_dom2.default.append(this.nodes.actions, [this.nodes.settingsToggler, this.nodes.removeBlockButton]);
|
||||
|
||||
/**
|
||||
* Make and append Settings Panel
|
||||
*/
|
||||
this.makeBlockSettingsPanel();
|
||||
|
||||
/**
|
||||
* Append toolbar to the Editor
|
||||
*/
|
||||
_dom2.default.append(this.Editor.ui.nodes.wrapper, this.nodes.wrapper);
|
||||
}
|
||||
|
||||
/**
|
||||
* Panel with block settings with 2 sections:
|
||||
*
|
||||
* @return {Element}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'makeBlockSettingsPanel',
|
||||
value: function makeBlockSettingsPanel() {
|
||||
|
||||
this.nodes.settings = _dom2.default.make('div', this.CSS.settings);
|
||||
|
||||
this.nodes.pluginSettings = _dom2.default.make('div', this.CSS.pluginSettings);
|
||||
this.nodes.defaultSettings = _dom2.default.make('div', this.CSS.defaultSettings);
|
||||
|
||||
_dom2.default.append(this.nodes.settings, [this.nodes.pluginSettings, this.nodes.defaultSettings]);
|
||||
_dom2.default.append(this.nodes.actions, this.nodes.settings);
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes Remove Block button, and confirmation panel
|
||||
* @return {Element} wrapper with button and panel
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'makeRemoveBlockButton',
|
||||
value: function makeRemoveBlockButton() {
|
||||
|
||||
/**
|
||||
* @todo add confirmation panel and handlers
|
||||
* @see {@link settings#makeRemoveBlockButton}
|
||||
*/
|
||||
return _dom2.default.make('span', this.CSS.removeBlockButton);
|
||||
}
|
||||
}, {
|
||||
key: 'state',
|
||||
set: function set(Editor) {
|
||||
|
||||
this.Editor = Editor;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Toolbar;
|
||||
}();
|
||||
|
||||
module.exports = Toolbar;
|
||||
|
||||
/***/ }),
|
||||
/* 20 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -5082,7 +5440,7 @@ var CodexEditor =
|
|||
}({});
|
||||
|
||||
/***/ }),
|
||||
/* 20 */
|
||||
/* 21 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -5244,7 +5602,7 @@ var CodexEditor =
|
|||
}({});
|
||||
|
||||
/***/ }),
|
||||
/* 21 */
|
||||
/* 22 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -5265,9 +5623,9 @@ var CodexEditor =
|
|||
|
||||
var editor = codex.editor;
|
||||
|
||||
toolbar.settings = __webpack_require__(20);
|
||||
toolbar.inline = __webpack_require__(19);
|
||||
toolbar.toolbox = __webpack_require__(22);
|
||||
toolbar.settings = __webpack_require__(21);
|
||||
toolbar.inline = __webpack_require__(20);
|
||||
toolbar.toolbox = __webpack_require__(23);
|
||||
|
||||
/**
|
||||
* Margin between focused node and toolbar
|
||||
|
|
@ -5370,7 +5728,7 @@ var CodexEditor =
|
|||
}({});
|
||||
|
||||
/***/ }),
|
||||
/* 22 */
|
||||
/* 23 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -5547,7 +5905,7 @@ var CodexEditor =
|
|||
}({});
|
||||
|
||||
/***/ }),
|
||||
/* 23 */
|
||||
/* 24 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -5842,7 +6200,7 @@ var CodexEditor =
|
|||
}();
|
||||
|
||||
/***/ }),
|
||||
/* 24 */
|
||||
/* 25 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -5986,15 +6344,15 @@ var CodexEditor =
|
|||
*/
|
||||
_this.nodes.wrapper = _dom2.default.make('div', CSS.editorWrapper);
|
||||
_this.nodes.redactor = _dom2.default.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();
|
||||
})
|
||||
|
||||
|
|
@ -6013,10 +6371,11 @@ var CodexEditor =
|
|||
/** Add eventlisteners to redactor elements */
|
||||
// .then(bindEvents_)
|
||||
|
||||
.catch(function () {
|
||||
.catch(function (e) {
|
||||
|
||||
console.error(e);
|
||||
|
||||
// editor.core.log("Can't draw editor interface");
|
||||
|
||||
});
|
||||
}
|
||||
}, {
|
||||
|
|
@ -6046,102 +6405,6 @@ var CodexEditor =
|
|||
// 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;
|
||||
//
|
||||
// };
|
||||
//
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -74,7 +74,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
console.log(editor);
|
||||
|
||||
var items = [
|
||||
|
|
@ -92,7 +91,6 @@
|
|||
},
|
||||
];
|
||||
|
||||
|
||||
// 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