mirror of
https://github.com/codex-team/editor.js
synced 2024-06-10 01:42:29 +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');
|
cEditor.core.log('ui.bindEvents fired', 'info');
|
||||||
|
|
||||||
/** All keydowns on Document */
|
/** All keydowns on Document */
|
||||||
document.addEventListener('keydown', function (event) {
|
document.addEventListener('keyup', function (event) {
|
||||||
cEditor.callback.globalKeydown(event);
|
cEditor.callback.globalKeydown(event);
|
||||||
}, false );
|
}, false );
|
||||||
|
|
||||||
|
@ -214,10 +214,8 @@ cEditor.callback = {
|
||||||
case cEditor.core.keys.TAB : this.tabKeyPressed(event); break;
|
case cEditor.core.keys.TAB : this.tabKeyPressed(event); break;
|
||||||
case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break;
|
case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break;
|
||||||
case cEditor.core.keys.ESC : this.escapeKeyPressed(event); break;
|
case cEditor.core.keys.ESC : this.escapeKeyPressed(event); break;
|
||||||
case cEditor.core.keys.UP : /** | */
|
case cEditor.core.keys.UP :
|
||||||
case cEditor.core.keys.DOWN : /** | */
|
case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break;
|
||||||
case cEditor.core.keys.LEFT : /** V */
|
|
||||||
case cEditor.core.keys.RIGHT : this.arrowKeyPressed(event); break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -261,16 +259,20 @@ cEditor.callback = {
|
||||||
arrowKeyPressed : function(event){
|
arrowKeyPressed : function(event){
|
||||||
|
|
||||||
console.log('Arrow pressed');
|
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 = {
|
cEditor.toolbar = {
|
||||||
|
|
||||||
opened : false,
|
defaultOffset : 30,
|
||||||
|
|
||||||
|
opened : false,
|
||||||
|
|
||||||
current : null,
|
current : null,
|
||||||
|
|
||||||
|
@ -342,7 +344,8 @@ cEditor.toolbar = {
|
||||||
*/
|
*/
|
||||||
toolClicked : function() {
|
toolClicked : function() {
|
||||||
|
|
||||||
var nodeFocused = cEditor.html.getNodeFocused();
|
var nodeFocused = cEditor.html.getNodeFocused(),
|
||||||
|
newTag;
|
||||||
|
|
||||||
switch (cEditor.toolbar.current) {
|
switch (cEditor.toolbar.current) {
|
||||||
case 'header' : newTag = 'h1';
|
case 'header' : newTag = 'h1';
|
||||||
|
@ -350,6 +353,21 @@ cEditor.toolbar = {
|
||||||
|
|
||||||
cEditor.html.switchNode(nodeFocused, newTag);
|
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 */
|
/* EDITOR */
|
||||||
|
|
||||||
|
.ce_wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.ce_redactor {
|
.ce_redactor {
|
||||||
position: relative;
|
position: relative;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -90,9 +95,8 @@
|
||||||
box-shadow: 0 2px 11px rgba(27,39,54,.11);
|
box-shadow: 0 2px 11px rgba(27,39,54,.11);
|
||||||
color: #2e394b;
|
color: #2e394b;
|
||||||
|
|
||||||
top: 300px;
|
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
.ce_toolbar.opened{
|
.ce_toolbar.opened{
|
||||||
display: block;
|
display: block;
|
||||||
|
|
Loading…
Reference in a new issue