mirror of
https://github.com/codex-team/editor.js
synced 2024-05-26 18:42:30 +02:00
review refactoring
This commit is contained in:
Mark Dermanov
parent
09df6ad75b
commit
e0e9eb2649
130
ce_interface.js
130
ce_interface.js
|
|
@ -5,40 +5,22 @@
|
|||
|
||||
var ce = function(settings) {
|
||||
|
||||
this.textareaId = "codex_editor";
|
||||
this.resultTextarea = document.getElementById(this.textareaId);
|
||||
this.resultTextarea = document.getElementById("codex_editor");
|
||||
|
||||
if (typeof this.resultTextarea == undefined || this.resultTextarea == null ){
|
||||
|
||||
console.warn('Textarea not found with ID %o', this.textareaId);
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
// prepare settings
|
||||
this.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
|
||||
|
||||
var defaultSettings = {
|
||||
|
||||
};
|
||||
|
||||
|
||||
if ("undefined" == typeof settings || "object" != typeof settings)
|
||||
settings = defaultSettings;
|
||||
/* Prepare settings */
|
||||
if ("undefined" == typeof settings) settings = this.defaultSettings;
|
||||
else {
|
||||
// todo just merge settings with defaults
|
||||
}
|
||||
|
||||
if ("undefined" == typeof settings.tools || !Array.isArray(settings.tools))
|
||||
settings.tools = this.allTools;
|
||||
settings.tools = settings.tools || this.allTools;
|
||||
this.settings = settings;
|
||||
|
||||
this.settings = settings;
|
||||
|
||||
/** Some configurations */
|
||||
this.toolbarOpened = false;
|
||||
|
||||
this.BUTTONS_TOGGLED_CLASSNANE = 'buttons_toggled';
|
||||
this.key = { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, DOWN: 40, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18 };
|
||||
|
||||
/** Making a wrapper and interface */
|
||||
this.makeInterface();
|
||||
|
|
@ -48,49 +30,47 @@ var ce = function(settings) {
|
|||
|
||||
};
|
||||
|
||||
// All posible tools
|
||||
ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
|
||||
|
||||
// Default settings configuration
|
||||
ce.prototype.defaultSettings = {
|
||||
|
||||
};
|
||||
|
||||
// Add this class when open tool bar for css animation
|
||||
ce.prototype.BUTTONS_TOGGLED_CLASSNANE = 'buttons_toggled';
|
||||
|
||||
// Default tool bar is closed
|
||||
ce.prototype.toolbarOpened = false;
|
||||
|
||||
// Key event constants
|
||||
ce.prototype.key = { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, DOWN: 40, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18 };
|
||||
|
||||
/**
|
||||
* Editor interface drawing
|
||||
* Editor interface drawing
|
||||
* calls one time in editor constructor
|
||||
*/
|
||||
ce.prototype.makeInterface = function () {
|
||||
|
||||
var wrapper = this.make.editorWrapper(),
|
||||
firstNode = this.make.textNode('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quia nihil repellendus aut cupiditate reprehenderit sapiente magnam nobis doloremque eaque! Sint nobis assumenda nisi ducimus minima illo tenetur, cumque facilis.' ),
|
||||
toolbar = this.make.toolbar(),
|
||||
button,
|
||||
tool;
|
||||
toolbar = this.make.toolbar();
|
||||
|
||||
this.wrapper = wrapper;
|
||||
this.toolbar = toolbar;
|
||||
|
||||
this.toolbarButtons = document.createElement("span");
|
||||
this.toolbarButtons.classList.add("buttons");
|
||||
this.toolbarButtons = this.make.toolbarButtons(this.allTools, this.settings.tools);
|
||||
|
||||
// îáõîäèì áàçîâûé ñïèñîê, ÷òîáû ñîõðàíèòü îðèãèíàëüíóþ ïîñëåäîâàòåëüíîñòü êíîïîê
|
||||
for (var i = 0; i < this.allTools.length; i++) {
|
||||
tool = this.allTools[i];
|
||||
|
||||
if (this.settings.tools.indexOf(tool) < 0)
|
||||
continue;
|
||||
|
||||
button = this.make.toolbarButton(tool);
|
||||
this.toolbarButtons.appendChild(button);
|
||||
}
|
||||
|
||||
|
||||
/** Add first node */
|
||||
/** Add first node and tool bar*/
|
||||
wrapper.appendChild(firstNode);
|
||||
|
||||
/** Add toolbar to node */
|
||||
wrapper.appendChild(toolbar);
|
||||
|
||||
/** Insert Editor after initial textarea. Hide textarea */
|
||||
this.resultTextarea.parentNode.insertBefore(wrapper, this.resultTextarea.nextSibling);
|
||||
this.resultTextarea.hidden = true;
|
||||
|
||||
/** Set auto focus */
|
||||
var contentEditable = firstNode.getElementsByClassName('ce_node_content');
|
||||
contentEditable.length && contentEditable[0].focus();
|
||||
|
||||
this.focusNode(firstNode);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -107,6 +87,17 @@ ce.prototype.bindEvents = function () {
|
|||
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets focus to node conteneditable child
|
||||
* todo depending on node type
|
||||
*/
|
||||
ce.prototype.focusNode = function (node) {
|
||||
|
||||
var contentEditable = node.getElementsByClassName('ce_node_content');
|
||||
contentEditable.length && contentEditable[0].focus();
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* All window keydowns handles here
|
||||
*/
|
||||
|
|
@ -125,15 +116,14 @@ ce.prototype.globalKeydownCallback = function (event) {
|
|||
ce.prototype.tabKeyPressed = function(event) {
|
||||
|
||||
// check if currently focused in contenteditable element
|
||||
if ("BODY" == event.target.tagName)
|
||||
return;
|
||||
if ("BODY" == event.target.tagName) return;
|
||||
|
||||
var toolbar = event.target.parentNode.nextSibling,
|
||||
_this = this;
|
||||
|
||||
toolbar.appendChild(this.toolbarButtons);
|
||||
|
||||
// repair buttons animation
|
||||
// repair buttons animation - just add css class async
|
||||
setTimeout(function () {
|
||||
|
||||
if ( !toolbar.className.includes(_this.BUTTONS_TOGGLED_CLASSNANE) ){
|
||||
|
|
@ -144,7 +134,7 @@ ce.prototype.tabKeyPressed = function(event) {
|
|||
_this.toolbarOpened = false
|
||||
}
|
||||
|
||||
}, 10);
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -158,11 +148,9 @@ ce.prototype.enterKeyPressed = function(event) {
|
|||
if (event.shiftKey){
|
||||
document.execCommand('insertHTML', false, '<br><br>');
|
||||
} else {
|
||||
var
|
||||
newNode = this.make.textNode(),
|
||||
var newNode = this.make.textNode(),
|
||||
toolbar = this.make.toolbar();
|
||||
|
||||
|
||||
/** Add node */
|
||||
this.wrapper.insertBefore(newNode, event.target.parentNode.nextSibling);
|
||||
|
||||
|
|
@ -182,6 +170,8 @@ ce.prototype.enterKeyPressed = function(event) {
|
|||
*/
|
||||
ce.prototype.make = function () {
|
||||
|
||||
var _this = this;
|
||||
|
||||
/** Empty toolbar with toggler */
|
||||
function toolbar () {
|
||||
|
||||
|
|
@ -197,6 +187,7 @@ ce.prototype.make = function () {
|
|||
|
||||
}
|
||||
|
||||
// Creates one button with given type
|
||||
function toolbarButton (type) {
|
||||
|
||||
var button = document.createElement('button');
|
||||
|
|
@ -205,6 +196,26 @@ ce.prototype.make = function () {
|
|||
button.innerHTML = '<i class="ce_icon-' + type + '"></i>';
|
||||
|
||||
return button;
|
||||
|
||||
}
|
||||
|
||||
// Creates all tool bar buttons from editor settings
|
||||
// allTools, usedTools - needs becose cant get them from editor object - bad context
|
||||
function toolbarButtons (allTools, usedTools) {
|
||||
|
||||
var toolbarButtons = document.createElement("span");
|
||||
|
||||
toolbarButtons.classList.add("buttons");
|
||||
|
||||
// Walk base buttons list - save buttons origin sorting
|
||||
allTools.forEach(function(item) {
|
||||
|
||||
if (usedTools.indexOf(item) >= 0) toolbarButtons.appendChild( this.toolbarButton(item) );
|
||||
|
||||
}, this);
|
||||
|
||||
return toolbarButtons;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -231,10 +242,11 @@ ce.prototype.make = function () {
|
|||
}
|
||||
|
||||
var ceMake = function () {
|
||||
this.toolbar = toolbar;
|
||||
this.toolbarButton = toolbarButton;
|
||||
this.textNode = textNode;
|
||||
this.editorWrapper = editorWrapper;
|
||||
this.toolbar = toolbar;
|
||||
this.toolbarButtons = toolbarButtons;
|
||||
this.toolbarButton = toolbarButton;
|
||||
this.textNode = textNode;
|
||||
this.editorWrapper = editorWrapper;
|
||||
};
|
||||
|
||||
return new ceMake();
|
||||
|
|
|
|||
141
editor.css
141
editor.css
|
|
@ -84,21 +84,21 @@
|
|||
|
||||
.codex_editor .node{
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.codex_editor .add_buttons{
|
||||
/* position: relative; */
|
||||
/* left: -42px; */
|
||||
/* top: -30px; */
|
||||
color: #3b4352;
|
||||
font-size: 16px;
|
||||
margin-left: -42px;
|
||||
margin-top: -20px;
|
||||
margin-top: -50px;
|
||||
margin-bottom: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add_buttons .buttons {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
}
|
||||
.codex_editor .add_buttons button:hover,
|
||||
.codex_editor .add_buttons .focused{
|
||||
|
|
@ -109,10 +109,10 @@
|
|||
transform: translate3d(-50px, 0 , 0);
|
||||
opacity: 0;
|
||||
font-size: 14px;
|
||||
/*display: none;*/
|
||||
}
|
||||
.codex_editor .buttons_toggled{
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
.codex_editor .buttons_toggled button{
|
||||
opacity: 1;
|
||||
|
|
@ -121,8 +121,6 @@
|
|||
|
||||
|
||||
.codex_editor .toggler{
|
||||
/* position: relative; */
|
||||
/* left: -42px; */
|
||||
display: inline-block;
|
||||
font-size: 23px;
|
||||
color: #387ff5;
|
||||
|
|
@ -133,137 +131,12 @@
|
|||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.codex_editor .buttons_toggled .plus_btn{
|
||||
.codex_editor .buttons_toggled .toggler{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** Typography styles */
|
||||
.codex_editor p{
|
||||
margin: 30px 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
.editor_content {}
|
||||
.editor_content label {display:block;margin-bottom:10px;}
|
||||
.editor_content input[type=file]{}
|
||||
.editor_content textarea{}
|
||||
*/
|
||||
/*
|
||||
.editor_content button#btn_save{
|
||||
padding: 5px 15px;
|
||||
float: right;
|
||||
}
|
||||
.editor_content .cover{
|
||||
border: 1px solid gray;
|
||||
width: 96%;
|
||||
display: block;
|
||||
margin: 5px 0 15px 0;
|
||||
padding: 2%;
|
||||
}
|
||||
.editor_content .cover img{max-width: 100%;margin: auto;display: block;}
|
||||
|
||||
.editor_content .cover .actions {
|
||||
text-align: center;
|
||||
}
|
||||
.editor_content .cover .actions a{
|
||||
margin: 0 10px;
|
||||
border-bottom: 1px dashed;
|
||||
}
|
||||
.editor_content .cover .actions a:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.editor_content .actions span{
|
||||
|
||||
color: #6091c8;
|
||||
|
||||
margin-right: 15px;
|
||||
|
||||
border-bottom: 1px dashed;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.editor_content .add_buttons{
|
||||
width: 300px;
|
||||
margin: 21px auto;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: #F2F2F6;
|
||||
position: relative;
|
||||
}
|
||||
.editor_content .add_buttons:before{
|
||||
content: "";
|
||||
background: no-repeat url(/public/img/editor_buttons.png) -135px 0px;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
left: 140px;
|
||||
top: 17px;
|
||||
}
|
||||
.editor_content .add_buttons:hover:before{background-image: none;}
|
||||
.editor_content .add_buttons:hover button{
|
||||
visibility: visible;
|
||||
z-index: 0;
|
||||
}
|
||||
.editor_content .add_buttons button {
|
||||
float: none;
|
||||
padding: 5px;
|
||||
margin: 0px 0px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: none;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
background: transparent;
|
||||
}
|
||||
.editor_content .add_buttons button:before {
|
||||
content: "";
|
||||
background: no-repeat url(/public/img/editor_buttons.png?) 0;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
.editor_content .add_buttons .paragraph:before{
|
||||
background-position: -156px -1px;
|
||||
}
|
||||
.editor_content .add_buttons .img:before{
|
||||
background-position: -27px 0;
|
||||
width: 22px;
|
||||
left: 7px;
|
||||
}
|
||||
.editor_content .add_buttons .list:before{
|
||||
background-position: -56px 0;
|
||||
width: 21px;
|
||||
}
|
||||
.editor_content .node{
|
||||
border: 1px dashed;
|
||||
padding: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.editor_content .node .content{}
|
||||
.editor_content .node .content p{min-height: 25px;}
|
||||
.editor_content .node .action_buttons{
|
||||
border-top: 1px dashed;
|
||||
text-align: right;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
.editor_content .node .action_buttons button{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.editor_wrapper #html_result {
|
||||
height: 350px;
|
||||
}*/
|
||||
}
|
||||
Loading…
Reference in a new issue