mirror of
https://github.com/codex-team/editor.js
synced 2024-06-10 09:52:36 +02:00
base ui events handlers
This commit is contained in:
parent
f523879cda
commit
efd20c1ff0
137
codex-editor.js
137
codex-editor.js
|
@ -19,7 +19,7 @@ var cEditor = (function (cEditor) {
|
|||
textarea : null,
|
||||
wrapper : null,
|
||||
toolbar : null,
|
||||
toolbarButtons : {}, // {type : DomEl, ... }
|
||||
toolbarButtons : {}, // { type : DomEl, ... }
|
||||
redactor : null
|
||||
}
|
||||
|
||||
|
@ -124,7 +124,7 @@ cEditor.core = {
|
|||
},
|
||||
|
||||
/**
|
||||
* DOM node types map
|
||||
* Readable DOM-node types map
|
||||
*/
|
||||
nodeTypes : {
|
||||
TAG : 1,
|
||||
|
@ -132,6 +132,11 @@ cEditor.core = {
|
|||
COMMENT : 8
|
||||
},
|
||||
|
||||
/**
|
||||
* Readable keys map
|
||||
*/
|
||||
keys : { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18, LEFT: 37, UP: 38, DOWN: 40, RIGHT: 39 },
|
||||
|
||||
/**
|
||||
* Check object for DOM node
|
||||
*/
|
||||
|
@ -192,9 +197,135 @@ cEditor.ui = {
|
|||
|
||||
cEditor.core.log('ui.bindEvents fired', 'info');
|
||||
|
||||
/** All keydowns on Document */
|
||||
document.addEventListener('keydown', function (event) {
|
||||
cEditor.callback.globalKeydown(event);
|
||||
}, false );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
cEditor.callback = {
|
||||
|
||||
globalKeydown : function(event){
|
||||
|
||||
switch (event.keyCode){
|
||||
case cEditor.core.keys.TAB : this.tabKeyPressed(event); break;
|
||||
case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break;
|
||||
case cEditor.core.keys.ESC : this.escapeKeyPressed(event); break;
|
||||
}
|
||||
|
||||
|
||||
/** temporary */
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
},
|
||||
|
||||
tabKeyPressed : function(event){
|
||||
|
||||
console.log('TAB pressed: %o', event);
|
||||
|
||||
if ( !cEditor.toolbar.opened ) {
|
||||
cEditor.toolbar.open();
|
||||
} else {
|
||||
cEditor.toolbar.leaf();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
enterKeyPressed : function(event){
|
||||
|
||||
console.log('ENTER pressed');
|
||||
cEditor.toolbar.close();
|
||||
|
||||
},
|
||||
|
||||
escapeKeyPressed : function(event){
|
||||
|
||||
console.log('Escape pressed');
|
||||
cEditor.toolbar.close();
|
||||
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
cEditor.toolbar = {
|
||||
|
||||
opened : false,
|
||||
|
||||
current : null,
|
||||
|
||||
open : function (){
|
||||
|
||||
cEditor.nodes.toolbar.classList.add('opened');
|
||||
|
||||
this.opened = true;
|
||||
|
||||
},
|
||||
|
||||
close : function(){
|
||||
|
||||
cEditor.nodes.toolbar.classList.remove('opened');
|
||||
|
||||
this.opened = false;
|
||||
this.current = null;
|
||||
for (button in cEditor.nodes.toolbarButtons){
|
||||
cEditor.nodes.toolbarButtons[button].classList.remove('selected');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
toggle : function(){
|
||||
|
||||
if ( !this.opened ){
|
||||
|
||||
this.open();
|
||||
|
||||
} else {
|
||||
|
||||
this.close();
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
leaf : function(){
|
||||
|
||||
var currentTool = this.current,
|
||||
tools = cEditor.settings.tools,
|
||||
barButtons = cEditor.nodes.toolbarButtons,
|
||||
nextToolIndex;
|
||||
|
||||
if ( !currentTool ) {
|
||||
|
||||
for (toolToSelect in barButtons) break;
|
||||
|
||||
} else {
|
||||
|
||||
nextToolIndex = tools.indexOf(currentTool) + 1;
|
||||
|
||||
if ( nextToolIndex == tools.length) nextToolIndex = 0;
|
||||
|
||||
toolToSelect = tools[nextToolIndex];
|
||||
|
||||
}
|
||||
|
||||
for (button in barButtons) barButtons[button].classList.remove('selected')
|
||||
|
||||
barButtons[toolToSelect].classList.add('selected');
|
||||
|
||||
this.current = toolToSelect;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Content parsing module
|
||||
|
|
52
editor.css
52
editor.css
|
@ -80,7 +80,7 @@
|
|||
z-index: 2;
|
||||
|
||||
margin-left: -45px;
|
||||
transform: translateY(100px);
|
||||
/*transform: translateY(100px);*/
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
@ -89,7 +89,18 @@
|
|||
border-radius: 2px;
|
||||
box-shadow: 0 2px 11px rgba(27,39,54,.11);
|
||||
color: #2e394b;
|
||||
|
||||
top: 300px;
|
||||
|
||||
display: none;
|
||||
}
|
||||
.ce_toolbar.opened{
|
||||
display: block;
|
||||
|
||||
animation-name: bounceIn; animation-duration: 200ms; animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
|
||||
.ce_toolbar .toggler{
|
||||
color: #3e6dd6
|
||||
}
|
||||
|
@ -113,5 +124,42 @@
|
|||
.ce_redactor p{
|
||||
padding: 5px 0;
|
||||
font-size: 1em;
|
||||
line-height: 1.7em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ce_redactor li{
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% { opacity: 0; -webkit-transform: scale(.3);}
|
||||
50% {opacity: 1; -webkit-transform: scale(1.05);}
|
||||
70% {-webkit-transform: scale(.9);}
|
||||
100% {-webkit-transform: scale(1);}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceIn {
|
||||
0% {opacity: 0;-moz-transform: scale(.3);}
|
||||
50% {opacity: 1;-moz-transform: scale(1.05);}
|
||||
70% {-moz-transform: scale(.9);}
|
||||
100% {-moz-transform: scale(1);}
|
||||
}
|
||||
@-o-keyframes bounceIn {
|
||||
0% {opacity: 0;-o-transform: scale(.3);}
|
||||
50% {opacity: 1;-o-transform: scale(1.05);}
|
||||
70% {-o-transform: scale(.9);}
|
||||
100% {-o-transform: scale(1);}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
0% {opacity: 0;transform: scale(.3);}
|
||||
50% {opacity: 1;transform: scale(1.07);}
|
||||
70% {transform: scale(.9);}
|
||||
100% {transform: scale(1);}
|
||||
}
|
||||
|
||||
.bounceIn {
|
||||
-webkit-animation-name: bounceIn; -webkit-animation-duration: 600ms; -webkit-animation-iteration-count: 1;
|
||||
-moz-animation-name: bounceIn; -moz-animation-duration: 600ms; -moz-animation-iteration-count: 1;
|
||||
-o-animation-name: bounceIn; -o-animation-duration: 600ms; -o-animation-iteration-count: 1;
|
||||
animation-name: bounceIn; animation-duration: 600ms; animation-iteration-count: 1;
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<style>
|
||||
body{
|
||||
font-family: 'Open Sans';
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
@ -94,7 +94,9 @@
|
|||
/** Document is ready */
|
||||
ready(function() {
|
||||
|
||||
cEditor.start({textareaId: 'codex_editor'});
|
||||
cEditor.start({
|
||||
textareaId: 'codex_editor'
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in a new issue