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');
/** 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)";
}
};

View file

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