mirror of
https://github.com/codex-team/editor.js
synced 2024-05-18 22:36:47 +02:00
Added toolbar movement
This commit is contained in:
parent
7e15692cd4
commit
87a53a7086
|
@ -198,7 +198,7 @@ cEditor.ui = {
|
|||
cEditor.core.log('ui.bindEvents fired', 'info');
|
||||
|
||||
/** All keydowns on Document */
|
||||
document.addEventListener('keydown', function (event) {
|
||||
document.addEventListener('keyup', function (event) {
|
||||
cEditor.callback.globalKeydown(event);
|
||||
}, false );
|
||||
|
||||
|
@ -214,10 +214,8 @@ cEditor.callback = {
|
|||
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;
|
||||
case cEditor.core.keys.UP : /** | */
|
||||
case cEditor.core.keys.DOWN : /** | */
|
||||
case cEditor.core.keys.LEFT : /** V */
|
||||
case cEditor.core.keys.RIGHT : this.arrowKeyPressed(event); break;
|
||||
case cEditor.core.keys.UP :
|
||||
case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -261,16 +259,20 @@ cEditor.callback = {
|
|||
arrowKeyPressed : function(event){
|
||||
|
||||
console.log('Arrow pressed');
|
||||
if (event.target == cEditor.nodes.redactor) {
|
||||
console.log(cEditor.html.getNodeFocused());
|
||||
};
|
||||
|
||||
cEditor.toolbar.close();
|
||||
|
||||
cEditor.toolbar.move(cEditor.html.getNodeFocused());
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
cEditor.toolbar = {
|
||||
|
||||
opened : false,
|
||||
defaultOffset : 30,
|
||||
|
||||
opened : false,
|
||||
|
||||
current : null,
|
||||
|
||||
|
@ -342,7 +344,8 @@ cEditor.toolbar = {
|
|||
*/
|
||||
toolClicked : function() {
|
||||
|
||||
var nodeFocused = cEditor.html.getNodeFocused();
|
||||
var nodeFocused = cEditor.html.getNodeFocused(),
|
||||
newTag;
|
||||
|
||||
switch (cEditor.toolbar.current) {
|
||||
case 'header' : newTag = 'h1';
|
||||
|
@ -350,6 +353,21 @@ cEditor.toolbar = {
|
|||
|
||||
cEditor.html.switchNode(nodeFocused, newTag);
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Moving toolbar to the specified node
|
||||
*/
|
||||
move : function(destinationBlock) {
|
||||
|
||||
console.log(cEditor.nodes.toolbar);
|
||||
|
||||
var newYCoordinate = destinationBlock.offsetTop - cEditor.toolbar.defaultOffset -
|
||||
cEditor.nodes.toolbar.clientHeight;
|
||||
|
||||
cEditor.nodes.toolbar.style.transform = "translateY(" + newYCoordinate + "px)";
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
@ -70,6 +70,11 @@
|
|||
|
||||
|
||||
/* EDITOR */
|
||||
|
||||
.ce_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ce_redactor {
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
@ -90,9 +95,8 @@
|
|||
box-shadow: 0 2px 11px rgba(27,39,54,.11);
|
||||
color: #2e394b;
|
||||
|
||||
top: 300px;
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
.ce_toolbar.opened{
|
||||
display: block;
|
||||
|
|
Loading…
Reference in a new issue