Merge pull request #19 from codex-team/spanic_work

Added text-to-h1 transformation using new cEditor.html module

codex-editor.js

@@ -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,17 +214,16 @@ 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  : this.arrowKeyPressed(event); break;
         }
 
-
-        /** temporary */
-        event.preventDefault();
-
-
     },
 
     tabKeyPressed : function(event){
 
+        event.preventDefault();
+
         console.log('TAB pressed: %o', event);
 
         if ( !cEditor.toolbar.opened ) {
@@ -237,24 +236,43 @@ cEditor.callback = {
 
     enterKeyPressed : function(event){
 
-        console.log('ENTER pressed');
-        cEditor.toolbar.close();
+        console.log('Enter pressed');
+
+        if (cEditor.toolbar.opened && event.target == cEditor.nodes.redactor) {
+
+            event.preventDefault();
+            cEditor.toolbar.toolClicked();
+            cEditor.toolbar.close();
+
+        };
 
     },
 
     escapeKeyPressed : function(event){
 
+        event.preventDefault();
         console.log('Escape pressed');
         cEditor.toolbar.close();
 
-    }
+    },
 
+    arrowKeyPressed : function(event){
+
+        console.log('Arrow pressed');
+
+        cEditor.toolbar.close();
+
+        cEditor.toolbar.move(cEditor.html.getNodeFocused());
+
+    }
 
 };
 
 cEditor.toolbar = {
 
-    opened  : false,
+    defaultOffset : 30,
+
+    opened : false,
 
     current : null,
 
@@ -319,13 +337,67 @@ cEditor.toolbar = {
 
         this.current = toolToSelect;
 
+    },
+
+    /**
+    * Transforming selected node type into selected toolbar element type
+    */
+    toolClicked : function() {
+
+        var nodeFocused = cEditor.html.getNodeFocused(),
+            newTag;
+
+        switch (cEditor.toolbar.current) {
+            case 'header' : newTag = 'h1';
+        };
+
+        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)";
 
     }
 
-
 };
 
+cEditor.html = {
 
+    getNodeFocused : function() {
+
+        var selection = window.getSelection();
+      
+        if (selection.anchorNode != null) {
+            return selection.anchorNode.tagName ? selection.anchorNode : selection.focusNode.parentElement;
+        } else {
+            return null;
+        }
+
+    },
+
+    switchNode : function (targetNode, tagName) {
+
+        /**  */
+        if (!targetNode && !tagName) return;
+
+        var newNode = cEditor.draw.block(tagName, targetNode.innerHTML);
+          
+        cEditor.nodes.redactor.replaceChild(newNode, targetNode);
+
+    }
+
+};
 
 /**
 * Content parsing module

editor.css

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