Merge pull request #20 from codex-team/ui-events

Ui events

codex-editor.js

@@ -19,7 +19,7 @@ var cEditor = (function (cEditor) {
         textarea : null,
         wrapper  : null,
         toolbar  : null,
-        toolbarButtons : {}, // {type : DomEl, ... }
+        toolbarButtons : {}, // { type : DomEl, ... }
         redactor : null
     }
 
@@ -124,7 +124,7 @@ cEditor.core = {
     },
 
     /**
-    * DOM node types map
+    * Readable DOM-node types map
     */
     nodeTypes : {
         TAG     : 1,
@@ -132,6 +132,11 @@ cEditor.core = {
         COMMENT : 8
     },
 
+    /**
+    * Readable keys map
+    */
+    keys : { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18, LEFT: 37, UP: 38, DOWN: 40, RIGHT: 39 },
+
     /**
     * Check object for DOM node
     */
@@ -192,9 +197,207 @@ cEditor.ui = {
 
         cEditor.core.log('ui.bindEvents fired', 'info');
 
+        /** All keydowns on Document */
+        document.addEventListener('keyup', function (event) {
+            cEditor.callback.globalKeydown(event);
+        }, false );
+
     }
 
-}
+};
+
+cEditor.callback = {
+
+    globalKeydown : function(event){
+
+        switch (event.keyCode){
+            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;
+        }
+
+    },
+
+    tabKeyPressed : function(event){
+
+        event.preventDefault();
+
+        console.log('TAB pressed: %o', event);
+
+        if ( !cEditor.toolbar.opened ) {
+            cEditor.toolbar.open();
+        } else {
+            cEditor.toolbar.leaf();
+        }
+
+    },
+
+    enterKeyPressed : function(event){
+
+        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 = {
+
+    defaultOffset : 30,
+
+    opened : false,
+
+    current : null,
+
+    open : function (){
+
+        cEditor.nodes.toolbar.classList.add('opened');
+
+        this.opened = true;
+
+    },
+
+    close : function(){
+
+        cEditor.nodes.toolbar.classList.remove('opened');
+
+        this.opened  = false;
+        this.current = null;
+        for (button in cEditor.nodes.toolbarButtons){
+            cEditor.nodes.toolbarButtons[button].classList.remove('selected');
+        }
+
+    },
+
+    toggle : function(){
+
+        if ( !this.opened ){
+
+            this.open();
+
+        } else {
+
+            this.close();
+
+        }
+
+    },
+
+    leaf : function(){
+
+        var currentTool = this.current,
+            tools       = cEditor.settings.tools,
+            barButtons  = cEditor.nodes.toolbarButtons,
+            nextToolIndex;
+
+        if ( !currentTool ) {
+
+            for (toolToSelect in barButtons) break;
+
+        } else {
+
+            nextToolIndex = tools.indexOf(currentTool) + 1;
+
+            if ( nextToolIndex == tools.length) nextToolIndex = 0;
+
+            toolToSelect = tools[nextToolIndex];
+
+        }
+
+        for (button in barButtons) barButtons[button].classList.remove('selected')
+
+        barButtons[toolToSelect].classList.add('selected');
+
+        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;
@@ -80,7 +85,7 @@
     z-index: 2;
 
     margin-left: -45px;
-    transform: translateY(100px);
+    /*transform: translateY(100px);*/
 
     overflow: hidden;
 
@@ -89,7 +94,17 @@
     border-radius: 2px;
     box-shadow: 0 2px 11px rgba(27,39,54,.11);
     color: #2e394b;
+
+    display: none;
+    
 }
+    .ce_toolbar.opened{
+        display: block;
+
+        animation-name: bounceIn; animation-duration: 200ms; animation-iteration-count: 1;
+    }
+
+
     .ce_toolbar .toggler{
         color: #3e6dd6
     }
@@ -113,5 +128,42 @@
 .ce_redactor p{
     padding: 5px 0;
     font-size: 1em;
+    line-height: 1.7em;
     margin: 0;
-}
+}
+.ce_redactor li{
+    margin: 5px 0;
+}
+
+@-webkit-keyframes bounceIn {
+    0% { opacity: 0; -webkit-transform: scale(.3);}
+    50% {opacity: 1; -webkit-transform: scale(1.05);}
+    70% {-webkit-transform: scale(.9);}
+    100% {-webkit-transform: scale(1);}
+}
+
+@-moz-keyframes bounceIn {
+    0% {opacity: 0;-moz-transform: scale(.3);}
+    50% {opacity: 1;-moz-transform: scale(1.05);}
+    70% {-moz-transform: scale(.9);}
+    100% {-moz-transform: scale(1);}
+}
+@-o-keyframes bounceIn {
+    0% {opacity: 0;-o-transform: scale(.3);}
+    50% {opacity: 1;-o-transform: scale(1.05);}
+    70% {-o-transform: scale(.9);}
+    100% {-o-transform: scale(1);}
+}
+@keyframes bounceIn {
+    0% {opacity: 0;transform: scale(.3);}
+    50% {opacity: 1;transform: scale(1.07);}
+    70% {transform: scale(.9);}
+    100% {transform: scale(1);}
+}
+
+.bounceIn {
+    -webkit-animation-name: bounceIn; -webkit-animation-duration: 600ms; -webkit-animation-iteration-count: 1;
+    -moz-animation-name: bounceIn; -moz-animation-duration: 600ms; -moz-animation-iteration-count: 1;
+    -o-animation-name: bounceIn; -o-animation-duration: 600ms; -o-animation-iteration-count: 1;
+    animation-name: bounceIn; animation-duration: 600ms; animation-iteration-count: 1;
+}

example.html

@@ -8,7 +8,7 @@
     <style>
         body{
             font-family: 'Open Sans';
-            font-size: 13px;
+            font-size: 14px;
         }
     </style>
 </head>
@@ -94,7 +94,9 @@
     /** Document is ready */
     ready(function() {
 
-        cEditor.start({textareaId: 'codex_editor'});
+        cEditor.start({
+            textareaId: 'codex_editor'
+        });
 
     })