From a0b89b4854a8a0fec8cb97d1291a009057d8bb57 Mon Sep 17 00:00:00 2001 From: neSpecc Date: Tue, 29 Mar 2016 19:04:23 +0300 Subject: [PATCH] move toolbar my mouse click, some error fixes --- codex-editor.js | 71 ++++++++++++++++++++++++++++++++++++++++++------- editor.css | 13 ++++++--- 2 files changed, 71 insertions(+), 13 deletions(-) diff --git a/codex-editor.js b/codex-editor.js index 25513842..1ddf74ab 100644 --- a/codex-editor.js +++ b/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); } diff --git a/editor.css b/editor.css index 64224718..24140006 100644 --- a/editor.css +++ b/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);}