Added toolbar movement

This commit is contained in:
Andrew S 2016-03-08 23:07:11 +03:00
parent 7e15692cd4
commit 87a53a7086
2 changed files with 34 additions and 12 deletions

View file

@ -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)";
} }
}; };

View file

@ -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;