mirror of
https://github.com/codex-team/editor.js
synced 2024-06-17 13:15:20 +02:00
move toolbar my mouse click, some error fixes
This commit is contained in:
parent
577bf6752c
commit
a0b89b4854
|
@ -198,10 +198,20 @@ cEditor.ui = {
|
||||||
cEditor.core.log('ui.bindEvents fired', 'info');
|
cEditor.core.log('ui.bindEvents fired', 'info');
|
||||||
|
|
||||||
/** All keydowns on Document */
|
/** All keydowns on Document */
|
||||||
document.addEventListener('keyup', function (event) {
|
document.addEventListener('keydown', function (event) {
|
||||||
cEditor.callback.globalKeydown(event);
|
cEditor.callback.globalKeydown(event);
|
||||||
}, false );
|
}, 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.TAB : this.tabKeyPressed(event); break;
|
||||||
case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break;
|
case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break;
|
||||||
case cEditor.core.keys.ESC : this.escapeKeyPressed(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;
|
case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
tabKeyPressed : function(event){
|
tabKeyPressed : function(event){
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
console.log('TAB pressed: %o', event);
|
console.log('TAB pressed: %o', event);
|
||||||
|
|
||||||
|
@ -232,11 +250,15 @@ cEditor.callback = {
|
||||||
cEditor.toolbar.leaf();
|
cEditor.toolbar.leaf();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// return false;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
enterKeyPressed : function(event){
|
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) {
|
if (cEditor.toolbar.opened && event.target == cEditor.nodes.redactor) {
|
||||||
|
|
||||||
|
@ -262,7 +284,26 @@ cEditor.callback = {
|
||||||
|
|
||||||
cEditor.toolbar.close();
|
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 = {
|
cEditor.toolbar = {
|
||||||
|
|
||||||
defaultOffset : 30,
|
defaultOffset : 10,
|
||||||
|
|
||||||
opened : false,
|
opened : false,
|
||||||
|
|
||||||
|
@ -278,6 +319,10 @@ cEditor.toolbar = {
|
||||||
|
|
||||||
open : function (){
|
open : function (){
|
||||||
|
|
||||||
|
if (this.opened) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
cEditor.nodes.toolbar.classList.add('opened');
|
cEditor.nodes.toolbar.classList.add('opened');
|
||||||
|
|
||||||
this.opened = true;
|
this.opened = true;
|
||||||
|
@ -286,6 +331,8 @@ cEditor.toolbar = {
|
||||||
|
|
||||||
close : function(){
|
close : function(){
|
||||||
|
|
||||||
|
console.log('close!');
|
||||||
|
|
||||||
cEditor.nodes.toolbar.classList.remove('opened');
|
cEditor.nodes.toolbar.classList.remove('opened');
|
||||||
|
|
||||||
this.opened = false;
|
this.opened = false;
|
||||||
|
@ -347,8 +394,12 @@ cEditor.toolbar = {
|
||||||
var nodeFocused = cEditor.html.getNodeFocused(),
|
var nodeFocused = cEditor.html.getNodeFocused(),
|
||||||
newTag;
|
newTag;
|
||||||
|
|
||||||
|
console.log(cEditor.toolbar.current);
|
||||||
|
|
||||||
switch (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);
|
cEditor.html.switchNode(nodeFocused, newTag);
|
||||||
|
@ -363,7 +414,7 @@ cEditor.toolbar = {
|
||||||
|
|
||||||
console.log(cEditor.nodes.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.clientHeight;
|
||||||
|
|
||||||
cEditor.nodes.toolbar.style.transform = "translateY(" + newYCoordinate + "px)";
|
cEditor.nodes.toolbar.style.transform = "translateY(" + newYCoordinate + "px)";
|
||||||
|
@ -377,7 +428,7 @@ cEditor.html = {
|
||||||
getNodeFocused : function() {
|
getNodeFocused : function() {
|
||||||
|
|
||||||
var selection = window.getSelection();
|
var selection = window.getSelection();
|
||||||
|
|
||||||
if (selection.anchorNode != null) {
|
if (selection.anchorNode != null) {
|
||||||
return selection.anchorNode.tagName ? selection.anchorNode : selection.focusNode.parentElement;
|
return selection.anchorNode.tagName ? selection.anchorNode : selection.focusNode.parentElement;
|
||||||
} else {
|
} else {
|
||||||
|
@ -392,7 +443,7 @@ cEditor.html = {
|
||||||
if (!targetNode && !tagName) return;
|
if (!targetNode && !tagName) return;
|
||||||
|
|
||||||
var newNode = cEditor.draw.block(tagName, targetNode.innerHTML);
|
var newNode = cEditor.draw.block(tagName, targetNode.innerHTML);
|
||||||
|
|
||||||
cEditor.nodes.redactor.replaceChild(newNode, targetNode);
|
cEditor.nodes.redactor.replaceChild(newNode, targetNode);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
13
editor.css
13
editor.css
|
@ -85,7 +85,6 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
margin-left: -45px;
|
margin-left: -45px;
|
||||||
/*transform: translateY(100px);*/
|
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@ -96,12 +95,12 @@
|
||||||
color: #2e394b;
|
color: #2e394b;
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
.ce_toolbar.opened{
|
.ce_toolbar.opened{
|
||||||
display: block;
|
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{
|
.ce_redactor li{
|
||||||
margin: 5px 0;
|
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 {
|
@-webkit-keyframes bounceIn {
|
||||||
0% { opacity: 0; -webkit-transform: scale(.3);}
|
0% { opacity: 0; -webkit-transform: scale(.3);}
|
||||||
|
|
Loading…
Reference in a new issue