mirror of
https://github.com/codex-team/editor.js
synced 2026-03-16 23:55:49 +01:00
UI base elements (#218)
This commit is contained in:
Peter Savchenko
GitHub
parent
940a81bc22
commit
e57592d919
5 changed files with 307 additions and 167 deletions
|
|
@ -247,7 +247,7 @@ var CodexEditor =
|
|||
return module.prepare();
|
||||
};
|
||||
|
||||
return Promise.resolve().then(prepareDecorator(this.moduleInstances['ui'])).catch(function (error) {
|
||||
return Promise.resolve().then(prepareDecorator(this.moduleInstances.ui)).catch(function (error) {
|
||||
|
||||
console.log('Error occured', error);
|
||||
});
|
||||
|
|
@ -5166,50 +5166,56 @@ var CodexEditor =
|
|||
|
||||
/***/ },
|
||||
/* 22 */
|
||||
/***/ function(module, exports) {
|
||||
/***/ 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; }; }();
|
||||
|
||||
var _dom = __webpack_require__(23);
|
||||
|
||||
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"); } }
|
||||
|
||||
/**
|
||||
* Module UI
|
||||
*
|
||||
* @type {UI}
|
||||
*/
|
||||
var className = {
|
||||
* Module UI
|
||||
*
|
||||
* @type {UI}
|
||||
*/
|
||||
// let className = {
|
||||
|
||||
/**
|
||||
* @const {string} BLOCK_CLASSNAME - redactor blocks name
|
||||
*/
|
||||
BLOCK_CLASSNAME: 'ce-block',
|
||||
/**
|
||||
* @const {string} BLOCK_CLASSNAME - redactor blocks name
|
||||
*/
|
||||
// BLOCK_CLASSNAME : 'ce-block',
|
||||
|
||||
/**
|
||||
* @const {String} wrapper for plugins content
|
||||
*/
|
||||
BLOCK_CONTENT: 'ce-block__content',
|
||||
/**
|
||||
* @const {String} wrapper for plugins content
|
||||
*/
|
||||
// BLOCK_CONTENT : 'ce-block__content',
|
||||
|
||||
/**
|
||||
* @const {String} BLOCK_STRETCHED - makes block stretched
|
||||
*/
|
||||
BLOCK_STRETCHED: 'ce-block--stretched',
|
||||
/**
|
||||
* @const {String} BLOCK_STRETCHED - makes block stretched
|
||||
*/
|
||||
// BLOCK_STRETCHED : 'ce-block--stretched',
|
||||
|
||||
/**
|
||||
* @const {String} BLOCK_HIGHLIGHTED - adds background
|
||||
*/
|
||||
BLOCK_HIGHLIGHTED: 'ce-block--focused',
|
||||
/**
|
||||
* @const {String} BLOCK_HIGHLIGHTED - adds background
|
||||
*/
|
||||
// BLOCK_HIGHLIGHTED : 'ce-block--focused',
|
||||
|
||||
/**
|
||||
* @const {String} - for all default settings
|
||||
*/
|
||||
SETTINGS_ITEM: 'ce-settings__item'
|
||||
};
|
||||
/**
|
||||
* @const {String} - for all default settings
|
||||
*/
|
||||
// SETTINGS_ITEM : 'ce-settings__item'
|
||||
// };
|
||||
|
||||
var CSS_ = {
|
||||
editorWrapper: 'codex-editor',
|
||||
editorZone: 'ce-redactor'
|
||||
var CSS = {
|
||||
editorWrapper: 'codex-editor',
|
||||
editorZone: 'ce-redactor'
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -5224,103 +5230,127 @@ var CodexEditor =
|
|||
*
|
||||
* @property {EditorConfig} config - editor configuration {@link CodexEditor#configuration}
|
||||
* @property {Object} Editor - available editor modules {@link CodexEditor#moduleInstances}
|
||||
* @property {Object} nodes -
|
||||
* @property {Element} nodes.wrapper - element where we need to append redactor
|
||||
* @property {Element} nodes.wrapper - <codex-editor>
|
||||
* @property {Element} nodes.redactor - <ce-redactor>
|
||||
*/
|
||||
module.exports = function () {
|
||||
_createClass(UI, null, [{
|
||||
key: 'name',
|
||||
_createClass(UI, null, [{
|
||||
key: 'name',
|
||||
|
||||
|
||||
/**
|
||||
* Module key name
|
||||
* @returns {string}
|
||||
*/
|
||||
get: function get() {
|
||||
/**
|
||||
* Module key name
|
||||
* @returns {string}
|
||||
*/
|
||||
get: function get() {
|
||||
|
||||
return 'ui';
|
||||
}
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {EditorConfig} config
|
||||
*/
|
||||
|
||||
}]);
|
||||
|
||||
function UI(config) {
|
||||
_classCallCheck(this, UI);
|
||||
|
||||
this.config = config;
|
||||
this.Editor = null;
|
||||
return 'ui';
|
||||
}
|
||||
|
||||
/**
|
||||
* Editor modules setter
|
||||
* @param {object} Editor - available editor modules
|
||||
* @constructor
|
||||
*
|
||||
* @param {EditorConfig} config
|
||||
*/
|
||||
|
||||
}]);
|
||||
|
||||
_createClass(UI, [{
|
||||
key: 'prepare',
|
||||
function UI(_ref) {
|
||||
var config = _ref.config;
|
||||
|
||||
_classCallCheck(this, UI);
|
||||
|
||||
this.config = config;
|
||||
this.Editor = null;
|
||||
|
||||
this.nodes = {
|
||||
holder: null,
|
||||
wrapper: null,
|
||||
redactor: null
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Editor modules setter
|
||||
* @param {object} Editor - available editor modules
|
||||
*/
|
||||
|
||||
|
||||
_createClass(UI, [{
|
||||
key: 'prepare',
|
||||
|
||||
|
||||
/**
|
||||
* @protected
|
||||
*
|
||||
* Making main interface
|
||||
*/
|
||||
value: function prepare() {
|
||||
var _this = this;
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
/**
|
||||
* @protected
|
||||
*
|
||||
* Making main interface
|
||||
* Element where we need to append CodeX Editor
|
||||
* @type {Element}
|
||||
*/
|
||||
value: function prepare() {
|
||||
_this.nodes.holder = document.getElementById(_this.config.holderId);
|
||||
|
||||
console.log('ui prepare fired');
|
||||
if (!_this.nodes.holder) {
|
||||
|
||||
return;
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
var wrapper = this.modules.dom.make('DIV', [CSS_.editorWrapper], {}),
|
||||
redactor = this.modules.dom.make('DIV', [CSS_.editorZone], {}),
|
||||
toolbar = makeToolBar_();
|
||||
|
||||
wrapper.appendChild(toolbar);
|
||||
wrapper.appendChild(redactor);
|
||||
|
||||
/** Save created ui-elements to static nodes state */
|
||||
editor.nodes.wrapper = wrapper;
|
||||
editor.nodes.redactor = redactor;
|
||||
|
||||
/** Append editor wrapper with redactor zone into holder */
|
||||
editor.nodes.holder.appendChild(wrapper);
|
||||
|
||||
resolve();
|
||||
})
|
||||
|
||||
/** Add toolbox tools */
|
||||
.then(addTools_)
|
||||
|
||||
/** Make container for inline toolbar */
|
||||
.then(makeInlineToolbar_)
|
||||
|
||||
/** Add inline toolbar tools */
|
||||
.then(addInlineToolbarTools_)
|
||||
|
||||
/** Draw wrapper for notifications */
|
||||
.then(makeNotificationHolder_)
|
||||
|
||||
/** Add eventlisteners to redactor elements */
|
||||
.then(bindEvents_).catch(function () {
|
||||
|
||||
editor.core.log("Can't draw editor interface");
|
||||
});
|
||||
reject(Error("Holder wasn't found by ID: #" + _this.config.holderId));
|
||||
return;
|
||||
}
|
||||
}, {
|
||||
key: 'state',
|
||||
set: function set(Editor) {
|
||||
|
||||
this.Editor = Editor;
|
||||
}
|
||||
}]);
|
||||
/**
|
||||
* Create and save main UI elements
|
||||
*/
|
||||
_this.nodes.wrapper = _dom2.default.make('div', CSS.editorWrapper);
|
||||
_this.nodes.redactor = _dom2.default.make('div', CSS.editorZone);
|
||||
// toolbar = makeToolBar_();
|
||||
|
||||
return UI;
|
||||
// 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);
|
||||
|
||||
resolve();
|
||||
})
|
||||
|
||||
/** Add toolbox tools */
|
||||
// .then(addTools_)
|
||||
|
||||
/** Make container for inline toolbar */
|
||||
// .then(makeInlineToolbar_)
|
||||
|
||||
/** Add inline toolbar tools */
|
||||
// .then(addInlineToolbarTools_)
|
||||
|
||||
/** Draw wrapper for notifications */
|
||||
// .then(makeNotificationHolder_)
|
||||
|
||||
/** Add eventlisteners to redactor elements */
|
||||
// .then(bindEvents_)
|
||||
|
||||
.catch(function () {
|
||||
|
||||
// editor.core.log("Can't draw editor interface");
|
||||
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'state',
|
||||
set: function set(Editor) {
|
||||
|
||||
this.Editor = Editor;
|
||||
}
|
||||
}]);
|
||||
|
||||
return UI;
|
||||
}();
|
||||
// /**
|
||||
// * Codex Editor UI module
|
||||
|
|
@ -5681,6 +5711,111 @@ var CodexEditor =
|
|||
//
|
||||
// })({});
|
||||
|
||||
/***/ },
|
||||
/* 23 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
/**
|
||||
* DOM manupulations helper
|
||||
*/
|
||||
var Dom = function () {
|
||||
function Dom() {
|
||||
_classCallCheck(this, Dom);
|
||||
}
|
||||
|
||||
_createClass(Dom, null, [{
|
||||
key: "make",
|
||||
|
||||
|
||||
/**
|
||||
* Helper for making Elements with classname and attributes
|
||||
*
|
||||
* @param {string} tagName - new Element tag name
|
||||
* @param {array|string} classNames - list or name of CSS classname(s)
|
||||
* @param {Object} attributes - any attributes
|
||||
* @return {Element}
|
||||
*/
|
||||
value: function make(tagName, classNames, attributes) {
|
||||
|
||||
var el = document.createElement(tagName);
|
||||
|
||||
if (Array.isArray(classNames)) {
|
||||
var _el$classList;
|
||||
|
||||
(_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classNames));
|
||||
} else if (classNames) {
|
||||
|
||||
el.classList.add(classNames);
|
||||
}
|
||||
|
||||
for (var attrName in attributes) {
|
||||
|
||||
el[attrName] = attributes[attrName];
|
||||
}
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector Decorator
|
||||
*
|
||||
* Returns first match
|
||||
*
|
||||
* @param {Element} el - element we searching inside. Default - DOM Document
|
||||
* @param {String} selector - searching string
|
||||
*
|
||||
* @returns {Element}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "find",
|
||||
value: function find() {
|
||||
var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
||||
var selector = arguments[1];
|
||||
|
||||
|
||||
return el.querySelector(selector);
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector Decorator.
|
||||
*
|
||||
* Returns all matches
|
||||
*
|
||||
* @param {Element} el - element we searching inside. Default - DOM Document
|
||||
* @param {String} selector - searching string
|
||||
* @returns {NodeList}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "findAll",
|
||||
value: function findAll() {
|
||||
var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
||||
var selector = arguments[1];
|
||||
|
||||
|
||||
return el.querySelectorAll(selector);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Dom;
|
||||
}();
|
||||
|
||||
exports.default = Dom;
|
||||
;
|
||||
|
||||
/***/ }
|
||||
/******/ ]);
|
||||
//# sourceMappingURL=codex-editor.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -209,7 +209,7 @@ module.exports = class CodexEditor {
|
|||
let prepareDecorator = module => module.prepare();
|
||||
|
||||
return Promise.resolve()
|
||||
.then(prepareDecorator(this.moduleInstances['ui']))
|
||||
.then(prepareDecorator(this.moduleInstances.ui))
|
||||
.catch(function (error) {
|
||||
|
||||
console.log('Error occured', error);
|
||||
|
|
|
|||
|
|
@ -1,54 +1,37 @@
|
|||
module.exports = class Dom {
|
||||
/**
|
||||
* DOM manupulations helper
|
||||
*/
|
||||
export default class Dom {
|
||||
|
||||
/**
|
||||
* Module key name
|
||||
* @returns {string}
|
||||
*/
|
||||
static get name() {
|
||||
|
||||
return 'dom';
|
||||
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param Editor
|
||||
* @param Editor.modules {@link Tools#list}
|
||||
* @param Editor.config {@link CodexEditor#configuration}
|
||||
* @param Editor
|
||||
*/
|
||||
set state(Editor) {
|
||||
|
||||
this.Editor = Editor;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws element with class and properties
|
||||
* Helper for making Elements with classname and attributes
|
||||
*
|
||||
* @param {String} el - Element name
|
||||
* @param {Array} classList - array of CSS classes
|
||||
* @param {Object} properties - list of objects/properties
|
||||
*
|
||||
* @returns {Element}
|
||||
* @param {string} tagName - new Element tag name
|
||||
* @param {array|string} classNames - list or name of CSS classname(s)
|
||||
* @param {Object} attributes - any attributes
|
||||
* @return {Element}
|
||||
*/
|
||||
make(el, classList, properties) {
|
||||
static make(tagName, classNames, attributes) {
|
||||
|
||||
let element = document.createElement(el);
|
||||
var el = document.createElement(tagName);
|
||||
|
||||
classList.forEach(function (className) {
|
||||
if ( Array.isArray(classNames) ) {
|
||||
|
||||
element.classList.add(className);
|
||||
el.classList.add(...classNames);
|
||||
|
||||
});
|
||||
} else if( classNames ) {
|
||||
|
||||
for(property in properties) {
|
||||
|
||||
element.property = properties[property];
|
||||
el.classList.add(classNames);
|
||||
|
||||
}
|
||||
|
||||
return element;
|
||||
for (let attrName in attributes) {
|
||||
|
||||
el[attrName] = attributes[attrName];
|
||||
|
||||
}
|
||||
|
||||
return el;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +45,7 @@ module.exports = class Dom {
|
|||
*
|
||||
* @returns {Element}
|
||||
*/
|
||||
find(el = document, selector) {
|
||||
static find(el = document, selector) {
|
||||
|
||||
return el.querySelector(selector);
|
||||
|
||||
|
|
@ -77,7 +60,7 @@ module.exports = class Dom {
|
|||
* @param {String} selector - searching string
|
||||
* @returns {NodeList}
|
||||
*/
|
||||
findAll(el = document, selector) {
|
||||
static findAll(el = document, selector) {
|
||||
|
||||
return el.querySelectorAll(selector);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
/**
|
||||
/**
|
||||
* Module UI
|
||||
*
|
||||
* @type {UI}
|
||||
*/
|
||||
let className = {
|
||||
// let className = {
|
||||
|
||||
/**
|
||||
* @const {string} BLOCK_CLASSNAME - redactor blocks name
|
||||
*/
|
||||
BLOCK_CLASSNAME : 'ce-block',
|
||||
// BLOCK_CLASSNAME : 'ce-block',
|
||||
|
||||
/**
|
||||
* @const {String} wrapper for plugins content
|
||||
*/
|
||||
BLOCK_CONTENT : 'ce-block__content',
|
||||
// BLOCK_CONTENT : 'ce-block__content',
|
||||
|
||||
/**
|
||||
* @const {String} BLOCK_STRETCHED - makes block stretched
|
||||
*/
|
||||
BLOCK_STRETCHED : 'ce-block--stretched',
|
||||
// BLOCK_STRETCHED : 'ce-block--stretched',
|
||||
|
||||
/**
|
||||
* @const {String} BLOCK_HIGHLIGHTED - adds background
|
||||
*/
|
||||
BLOCK_HIGHLIGHTED : 'ce-block--focused',
|
||||
// BLOCK_HIGHLIGHTED : 'ce-block--focused',
|
||||
|
||||
/**
|
||||
* @const {String} - for all default settings
|
||||
*/
|
||||
SETTINGS_ITEM : 'ce-settings__item'
|
||||
};
|
||||
// SETTINGS_ITEM : 'ce-settings__item'
|
||||
// };
|
||||
|
||||
let CSS_ = {
|
||||
let CSS = {
|
||||
editorWrapper : 'codex-editor',
|
||||
editorZone : 'ce-redactor'
|
||||
};
|
||||
|
||||
|
||||
import $ from '../dom';
|
||||
|
||||
|
||||
/**
|
||||
* @class
|
||||
*
|
||||
|
|
@ -49,6 +52,10 @@ let CSS_ = {
|
|||
*
|
||||
* @property {EditorConfig} config - editor configuration {@link CodexEditor#configuration}
|
||||
* @property {Object} Editor - available editor modules {@link CodexEditor#moduleInstances}
|
||||
* @property {Object} nodes -
|
||||
* @property {Element} nodes.wrapper - element where we need to append redactor
|
||||
* @property {Element} nodes.wrapper - <codex-editor>
|
||||
* @property {Element} nodes.redactor - <ce-redactor>
|
||||
*/
|
||||
module.exports = class UI {
|
||||
|
||||
|
|
@ -67,11 +74,17 @@ module.exports = class UI {
|
|||
*
|
||||
* @param {EditorConfig} config
|
||||
*/
|
||||
constructor( config ) {
|
||||
constructor({ config }) {
|
||||
|
||||
this.config = config;
|
||||
this.Editor = null;
|
||||
|
||||
this.nodes = {
|
||||
holder: null,
|
||||
wrapper: null,
|
||||
redactor: null
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -92,48 +105,57 @@ module.exports = class UI {
|
|||
*/
|
||||
prepare() {
|
||||
|
||||
console.log('ui prepare fired');
|
||||
return new Promise( (resolve, reject) => {
|
||||
|
||||
return;
|
||||
/**
|
||||
* Element where we need to append CodeX Editor
|
||||
* @type {Element}
|
||||
*/
|
||||
this.nodes.holder = document.getElementById(this.config.holderId);
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
if (!this.nodes.holder) {
|
||||
|
||||
let wrapper = this.modules.dom.make('DIV', [ CSS_.editorWrapper ], {}),
|
||||
redactor = this.modules.dom.make('DIV', [ CSS_.editorZone ], {}),
|
||||
toolbar = makeToolBar_();
|
||||
reject(Error("Holder wasn't found by ID: #" + this.config.holderId));
|
||||
return;
|
||||
|
||||
wrapper.appendChild(toolbar);
|
||||
wrapper.appendChild(redactor);
|
||||
}
|
||||
|
||||
/** Save created ui-elements to static nodes state */
|
||||
editor.nodes.wrapper = wrapper;
|
||||
editor.nodes.redactor = redactor;
|
||||
/**
|
||||
* Create and save main UI elements
|
||||
*/
|
||||
this.nodes.wrapper = $.make('div', CSS.editorWrapper);
|
||||
this.nodes.redactor = $.make('div', CSS.editorZone);
|
||||
// toolbar = makeToolBar_();
|
||||
|
||||
/** Append editor wrapper with redactor zone into holder */
|
||||
editor.nodes.holder.appendChild(wrapper);
|
||||
// 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);
|
||||
|
||||
resolve();
|
||||
|
||||
})
|
||||
|
||||
/** Add toolbox tools */
|
||||
.then(addTools_)
|
||||
// .then(addTools_)
|
||||
|
||||
/** Make container for inline toolbar */
|
||||
.then(makeInlineToolbar_)
|
||||
// .then(makeInlineToolbar_)
|
||||
|
||||
/** Add inline toolbar tools */
|
||||
.then(addInlineToolbarTools_)
|
||||
// .then(addInlineToolbarTools_)
|
||||
|
||||
/** Draw wrapper for notifications */
|
||||
.then(makeNotificationHolder_)
|
||||
// .then(makeNotificationHolder_)
|
||||
|
||||
/** Add eventlisteners to redactor elements */
|
||||
.then(bindEvents_)
|
||||
// .then(bindEvents_)
|
||||
|
||||
.catch( function () {
|
||||
|
||||
editor.core.log("Can't draw editor interface");
|
||||
// editor.core.log("Can't draw editor interface");
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue