move toolbar my mouse click, some error fixes

codex-editor.js

@@ -198,10 +198,20 @@ cEditor.ui = {
         cEditor.core.log('ui.bindEvents fired', 'info');
 
         /** All keydowns on Document */
-        document.addEventListener('keyup', function (event) {
+        document.addEventListener('keydown', function (event) {
             cEditor.callback.globalKeydown(event);
         }, 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.ENTER : this.enterKeyPressed(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;
         }
 
     },
 
+
     tabKeyPressed : function(event){
 
-        event.preventDefault();
+
 
         console.log('TAB pressed: %o', event);
 
@@ -232,11 +250,15 @@ cEditor.callback = {
             cEditor.toolbar.leaf();
         }
 
+        event.preventDefault();
+
+        // return false;
+
     },
 
     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) {
 
@@ -262,7 +284,26 @@ cEditor.callback = {
 
         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 = {
 
-    defaultOffset : 30,
+    defaultOffset : 10,
 
     opened : false,
 
@@ -278,6 +319,10 @@ cEditor.toolbar = {
 
     open : function (){
 
+        if (this.opened) {
+            return;
+        }
+
         cEditor.nodes.toolbar.classList.add('opened');
 
         this.opened = true;
@@ -286,6 +331,8 @@ cEditor.toolbar = {
 
     close : function(){
 
+        console.log('close!');
+
         cEditor.nodes.toolbar.classList.remove('opened');
 
         this.opened  = false;
@@ -347,8 +394,12 @@ cEditor.toolbar = {
         var nodeFocused = cEditor.html.getNodeFocused(),
             newTag;
 
+        console.log(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);
@@ -363,7 +414,7 @@ cEditor.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.style.transform = "translateY(" + newYCoordinate + "px)";
@@ -377,7 +428,7 @@ cEditor.html = {
     getNodeFocused : function() {
 
         var selection = window.getSelection();
-      
+
         if (selection.anchorNode != null) {
             return selection.anchorNode.tagName ? selection.anchorNode : selection.focusNode.parentElement;
         } else {
@@ -392,7 +443,7 @@ cEditor.html = {
         if (!targetNode && !tagName) return;
 
         var newNode = cEditor.draw.block(tagName, targetNode.innerHTML);
-          
+
         cEditor.nodes.redactor.replaceChild(newNode, targetNode);
 
     }

editor.css

@@ -85,7 +85,6 @@
     z-index: 2;
 
     margin-left: -45px;
-    /*transform: translateY(100px);*/
 
     overflow: hidden;
 
@@ -96,12 +95,12 @@
     color: #2e394b;
 
     display: none;
-    
+
 }
     .ce_toolbar.opened{
         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{
     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 {
     0% { opacity: 0; -webkit-transform: scale(.3);}