move toolbar my mouse click, some error fixes

This commit is contained in:
neSpecc 2016-03-29 19:04:23 +03:00
parent 577bf6752c
commit a0b89b4854
2 changed files with 71 additions and 13 deletions

View file

@ -198,10 +198,20 @@ 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('keyup', function (event) { document.addEventListener('keydown', function (event) {
cEditor.callback.globalKeydown(event); cEditor.callback.globalKeydown(event);
}, false ); }, false );
/** All keydowns on Document */
document.addEventListener('keyup', function (event) {
cEditor.callback.globalKeyup(event);
}, false );
/** Mouse click to radactor */
cEditor.nodes.redactor.addEventListener('click', function (event) {
cEditor.callback.redactorClicked(event);
}, false );
} }
}; };
@ -214,15 +224,23 @@ 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 : }
},
globalKeyup : function(event){
switch (event.keyCode){
case cEditor.core.keys.UP :
case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break; case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break;
} }
}, },
tabKeyPressed : function(event){ tabKeyPressed : function(event){
event.preventDefault();
console.log('TAB pressed: %o', event); console.log('TAB pressed: %o', event);
@ -232,11 +250,15 @@ cEditor.callback = {
cEditor.toolbar.leaf(); cEditor.toolbar.leaf();
} }
event.preventDefault();
// return false;
}, },
enterKeyPressed : function(event){ enterKeyPressed : function(event){
console.log('Enter pressed'); console.log('Enter pressed, event.target: %o', event.target);
if (cEditor.toolbar.opened && event.target == cEditor.nodes.redactor) { if (cEditor.toolbar.opened && event.target == cEditor.nodes.redactor) {
@ -262,7 +284,26 @@ cEditor.callback = {
cEditor.toolbar.close(); cEditor.toolbar.close();
cEditor.toolbar.move(cEditor.html.getNodeFocused()); var nodeFocused = cEditor.html.getNodeFocused();
if (!nodeFocused) {
return;
}
cEditor.toolbar.move(nodeFocused);
},
redactorClicked : function (event) {
var nodeFocused = cEditor.html.getNodeFocused();
if (!nodeFocused) {
return;
}
cEditor.toolbar.move(nodeFocused);
} }
@ -270,7 +311,7 @@ cEditor.callback = {
cEditor.toolbar = { cEditor.toolbar = {
defaultOffset : 30, defaultOffset : 10,
opened : false, opened : false,
@ -278,6 +319,10 @@ cEditor.toolbar = {
open : function (){ open : function (){
if (this.opened) {
return;
}
cEditor.nodes.toolbar.classList.add('opened'); cEditor.nodes.toolbar.classList.add('opened');
this.opened = true; this.opened = true;
@ -286,6 +331,8 @@ cEditor.toolbar = {
close : function(){ close : function(){
console.log('close!');
cEditor.nodes.toolbar.classList.remove('opened'); cEditor.nodes.toolbar.classList.remove('opened');
this.opened = false; this.opened = false;
@ -347,8 +394,12 @@ cEditor.toolbar = {
var nodeFocused = cEditor.html.getNodeFocused(), var nodeFocused = cEditor.html.getNodeFocused(),
newTag; newTag;
console.log(cEditor.toolbar.current);
switch (cEditor.toolbar.current) { switch (cEditor.toolbar.current) {
case 'header' : newTag = 'h1'; case 'header' : newTag = 'H1'; break;
case 'quote' : newTag = 'BLOCKQUOTE'; break;
case 'code' : newTag = 'CODE'; break;
}; };
cEditor.html.switchNode(nodeFocused, newTag); cEditor.html.switchNode(nodeFocused, newTag);
@ -363,7 +414,7 @@ cEditor.toolbar = {
console.log(cEditor.nodes.toolbar); console.log(cEditor.nodes.toolbar);
var newYCoordinate = destinationBlock.offsetTop - cEditor.toolbar.defaultOffset - var newYCoordinate = destinationBlock.offsetTop - cEditor.toolbar.defaultOffset -
cEditor.nodes.toolbar.clientHeight; cEditor.nodes.toolbar.clientHeight;
cEditor.nodes.toolbar.style.transform = "translateY(" + newYCoordinate + "px)"; cEditor.nodes.toolbar.style.transform = "translateY(" + newYCoordinate + "px)";
@ -377,7 +428,7 @@ cEditor.html = {
getNodeFocused : function() { getNodeFocused : function() {
var selection = window.getSelection(); var selection = window.getSelection();
if (selection.anchorNode != null) { if (selection.anchorNode != null) {
return selection.anchorNode.tagName ? selection.anchorNode : selection.focusNode.parentElement; return selection.anchorNode.tagName ? selection.anchorNode : selection.focusNode.parentElement;
} else { } else {
@ -392,7 +443,7 @@ cEditor.html = {
if (!targetNode && !tagName) return; if (!targetNode && !tagName) return;
var newNode = cEditor.draw.block(tagName, targetNode.innerHTML); var newNode = cEditor.draw.block(tagName, targetNode.innerHTML);
cEditor.nodes.redactor.replaceChild(newNode, targetNode); cEditor.nodes.redactor.replaceChild(newNode, targetNode);
} }

View file

@ -85,7 +85,6 @@
z-index: 2; z-index: 2;
margin-left: -45px; margin-left: -45px;
/*transform: translateY(100px);*/
overflow: hidden; overflow: hidden;
@ -96,12 +95,12 @@
color: #2e394b; color: #2e394b;
display: none; display: none;
} }
.ce_toolbar.opened{ .ce_toolbar.opened{
display: block; display: block;
animation-name: bounceIn; animation-duration: 200ms; animation-iteration-count: 1; /*animation-name: bounceIn; animation-duration: 200ms; animation-iteration-count: 1;*/
} }
@ -134,6 +133,14 @@
.ce_redactor li{ .ce_redactor li{
margin: 5px 0; margin: 5px 0;
} }
.ce_redactor blockquote{
font-size: 1.1em;
line-height: 1.9em;
margin: 2em 0;
padding: 2em 3.5em;
border-top: 2px solid #EAECF3;
border-bottom: 2px solid #EAECF3;
}
@-webkit-keyframes bounceIn { @-webkit-keyframes bounceIn {
0% { opacity: 0; -webkit-transform: scale(.3);} 0% { opacity: 0; -webkit-transform: scale(.3);}