From efd20c1ff0bdb7373410cf0a7014d0b027d54ce8 Mon Sep 17 00:00:00 2001 From: Peter S Date: Fri, 5 Feb 2016 18:29:29 +0300 Subject: [PATCH 1/3] base ui events handlers --- codex-editor.js | 137 ++++++++++++++++++++++++++++++++++++++++++++++-- editor.css | 52 +++++++++++++++++- example.html | 6 ++- 3 files changed, 188 insertions(+), 7 deletions(-) diff --git a/codex-editor.js b/codex-editor.js index e10e2d68..dfacbfb6 100644 --- a/codex-editor.js +++ b/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,135 @@ cEditor.ui = { cEditor.core.log('ui.bindEvents fired', 'info'); + /** All keydowns on Document */ + document.addEventListener('keydown', 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; + } + + + /** temporary */ + event.preventDefault(); + + + }, + + tabKeyPressed : function(event){ + + console.log('TAB pressed: %o', event); + + if ( !cEditor.toolbar.opened ) { + cEditor.toolbar.open(); + } else { + cEditor.toolbar.leaf(); + } + + }, + + enterKeyPressed : function(event){ + + console.log('ENTER pressed'); + cEditor.toolbar.close(); + + }, + + escapeKeyPressed : function(event){ + + console.log('Escape pressed'); + cEditor.toolbar.close(); + + } + + +}; + +cEditor.toolbar = { + + 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; + + + } + + +}; + + /** * Content parsing module diff --git a/editor.css b/editor.css index 9c3836b4..89cde5fc 100644 --- a/editor.css +++ b/editor.css @@ -80,7 +80,7 @@ z-index: 2; margin-left: -45px; - transform: translateY(100px); + /*transform: translateY(100px);*/ overflow: hidden; @@ -89,7 +89,18 @@ border-radius: 2px; box-shadow: 0 2px 11px rgba(27,39,54,.11); color: #2e394b; + + top: 300px; + + display: none; } + .ce_toolbar.opened{ + display: block; + + animation-name: bounceIn; animation-duration: 200ms; animation-iteration-count: 1; + } + + .ce_toolbar .toggler{ color: #3e6dd6 } @@ -113,5 +124,42 @@ .ce_redactor p{ padding: 5px 0; font-size: 1em; + line-height: 1.7em; margin: 0; -} \ No newline at end of file +} +.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; +} diff --git a/example.html b/example.html index 36a8f1e8..e2370b93 100644 --- a/example.html +++ b/example.html @@ -8,7 +8,7 @@ @@ -94,7 +94,9 @@ /** Document is ready */ ready(function() { - cEditor.start({textareaId: 'codex_editor'}); + cEditor.start({ + textareaId: 'codex_editor' + }); }) From 7e15692cd46b5a21d46228b16fd6a0d1908e6b93 Mon Sep 17 00:00:00 2001 From: Andrew S Date: Wed, 2 Mar 2016 15:06:21 +0300 Subject: [PATCH 2/3] Added text-to-h1 transformation using new cEditor.html module --- codex-editor.js | 72 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 63 insertions(+), 9 deletions(-) diff --git a/codex-editor.js b/codex-editor.js index dfacbfb6..731e03b5 100644 --- a/codex-editor.js +++ b/codex-editor.js @@ -214,17 +214,18 @@ 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; } - - /** temporary */ - event.preventDefault(); - - }, tabKeyPressed : function(event){ + event.preventDefault(); + console.log('TAB pressed: %o', event); if ( !cEditor.toolbar.opened ) { @@ -237,18 +238,33 @@ 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'); + if (event.target == cEditor.nodes.redactor) { + console.log(cEditor.html.getNodeFocused()); + }; + } }; @@ -319,13 +335,51 @@ cEditor.toolbar = { this.current = toolToSelect; + }, + + /** + * Transforming selected node type into selected toolbar element type + */ + toolClicked : function() { + + var nodeFocused = cEditor.html.getNodeFocused(); + + switch (cEditor.toolbar.current) { + case 'header' : newTag = 'h1'; + }; + + cEditor.html.switchNode(nodeFocused, newTag); } - }; +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 From 87a53a7086b12909708e7e076df78c3895a7e1f9 Mon Sep 17 00:00:00 2001 From: Andrew S Date: Tue, 8 Mar 2016 23:07:11 +0300 Subject: [PATCH 3/3] Added toolbar movement --- codex-editor.js | 38 ++++++++++++++++++++++++++++---------- editor.css | 8 ++++++-- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/codex-editor.js b/codex-editor.js index 731e03b5..25513842 100644 --- a/codex-editor.js +++ b/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,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)"; + } }; diff --git a/editor.css b/editor.css index 89cde5fc..64224718 100644 --- a/editor.css +++ b/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;