)
*/
var newNodeWrapperTagname,
newNodeWrapper;
switch (newBlockTagname){
case 'LI' : newNodeWrapperTagname = 'UL'; break;
default : newNodeWrapperTagname = 'P'; break;
}
newNodeWrapper = cEditor.draw.block(newNodeWrapperTagname);
newNodeWrapper.appendChild(nodeCreated);
cEditor.nodes.redactor.replaceChild(newNodeWrapper, nodeToReplace);
/**
* Set new node as current
*/
cEditor.content.workingNodeChanged(nodeCreated);
cEditor.caret.set(nodeCreated);
},
/**
* Iterates between child noted and looking for #text node on deepest level
* @param {Element} block - node where find
* @param {int} postiton - starting postion
* Example: childNodex.length to find from the end
* or 0 to find from the start
* @return {Text} block
* @uses DFS
*/
getDeepestTextNodeFromPosition : function (block, position) {
/**
* Clear Block from empty and useless spaces with trim.
* Such nodes we should remove
*/
var index,
blockChilds = block.childNodes;
for(index = 0; index < blockChilds.length; index++)
{
var node = blockChilds[index];
if (node.nodeType == cEditor.core.nodeTypes.TEXT) {
text = node.textContent.trim();
/** Text is empty. We should remove this child from node before we start DFS
* decrease the quantity of childs.
*/
if (text == '') {
block.removeChild(node);
position--;
}
}
}
if (block.childNodes.length === 0) {
return document.createTextNode('');
}
/** Setting default position when we deleted all empty nodes */
if ( position < 0 )
position = 1;
var looking_from_start = false;
/** For looking from START */
if (position === 0) {
looking_from_start = true;
position = 1;
}
while ( position ) {
/** initial verticle of node. */
if ( looking_from_start ) {
block = block.childNodes[0];
} else {
block = block.childNodes[position - 1];
}
if ( block.nodeType == cEditor.core.nodeTypes.TAG ){
position = block.childNodes.length;
} else if (block.nodeType == cEditor.core.nodeTypes.TEXT ){
position = 0;
}
}
return block;
}
}
cEditor.caret = {
/**
* @var {int} offset - caret position in a text node.
*/
offset : null,
/**
* @var {int} focusedNodeIndex - we get index of child node from first-level block
*/
focusedNodeIndex: null,
/**
* We need to save caret before we change the block,
* so that we could return it to original position in a new tag.
* We save caret offset in a text and index of child node.
*/
save : function() {
var selection = window.getSelection();
var parentElement = selection.anchorNode,
previousElement = selection.anchorNode.previousSibling,
nodeIndex = 0;
/**
* We get index of node which is child of #BLOCK_CLASSNAME.
* if selected node is not below the block container, we get the closest TAG which is below #BLOCK_CLASSNAME
*/
if ( parentElement.className !== cEditor.ui.BLOCK_CLASSNAME ) {
while (parentElement.parentNode.className !== cEditor.ui.BLOCK_CLASSNAME) {
parentElement = parentElement.parentNode;
}
previousElement = parentElement.previousSibling;
}
/** Counting index of focused node */
while (previousElement != null) {
nodeIndex ++;
previousElement = previousElement.previousSibling;
}
this.offset = selection.anchorOffset;
this.focusedNodeIndex = nodeIndex;
},
/**
* Creates Document Range and sets caret to the element.
* @uses caret.save — if you need to save caret position
* @param {Element} el - Changed Node.
* @todo remove saving positon
* @todo - Check nodeToSet for type: if TAG -> look for nearest TextNode
*/
set : function( el , index, offset) {
offset = offset || this.offset || 0;
index = index || this.focusedNodeIndex || 0;
var childs = el.childNodes,
nodeToSet;
if ( childs.length === 0 ) {
nodeToSet = el;
} else {
nodeToSet = childs[index];
}
var range = document.createRange(),
selection = window.getSelection();
setTimeout(function() {
range.setStart(nodeToSet, offset);
range.setEnd(nodeToSet, offset);
selection.removeAllRanges();
selection.addRange(range);
}, 50);
},
/**
* @param {Element} - block element where we should find caret position
*/
get : function (el) {
},
/**
* @param {Element} block - element from which we take next block
*/
setToNextBlock : function(block) {
if ( !block.nextSibling ) {
return false;
}
cEditor.caret.offset = 0;
cEditor.caret.focusedNodeIndex = 0;
cEditor.caret.set(block.nextSibling, 0, 0);
cEditor.content.workingNodeChanged(block.nextSibling);
},
setToPreviousBlock : function(block) {
if ( !block.previousSibling ) {
return false;
}
var lastChildOfPreiviousBlockIndex = block.previousSibling.childNodes.length,
previousBlock = block.previousSibling,
theEndOfPreviousBlockLastNode = 0;
/** Index in childs Array */
if (block.previousSibling.childNodes.length !== 0) {
previousBlock = cEditor.content.getDeepestTextNodeFromPosition(block.previousSibling, lastChildOfPreiviousBlockIndex);
theEndOfPreviousBlockLastNode = previousBlock.length;
lastChildOfPreiviousBlockIndex = 0;
}
cEditor.caret.offset = theEndOfPreviousBlockLastNode;
cEditor.caret.focusedNodeIndex = lastChildOfPreiviousBlockIndex;
cEditor.caret.set(previousBlock, lastChildOfPreiviousBlockIndex, theEndOfPreviousBlockLastNode);
cEditor.content.workingNodeChanged(block.previousSibling);
},
};
cEditor.toolbar = {
/**
* Margin between focused node and toolbar
*/
defaultToolbarHeight : 43,
defaultOffset : 10,
opened : false,
current : null,
open : function (){
if (this.opened) {
return;
}
cEditor.nodes.toolbar.classList.add('opened');
this.opened = true;
},
close : function(){
cEditor.nodes.toolbar.classList.remove('opened');
this.opened = false;
this.current = null;
for (var 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,
toolToSelect;
if ( !currentTool ) {
/** Get first tool from object*/
for (toolToSelect in barButtons) break;
} else {
nextToolIndex = tools.indexOf(currentTool) + 1;
if ( nextToolIndex == tools.length) nextToolIndex = 0;
toolToSelect = tools[nextToolIndex];
}
for (var 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
* @param {event} event
*/
toolClicked : function() {
var workingNode = cEditor.content.currentNode,
newTag,
appendCallback;
switch (cEditor.toolbar.current) {
case 'paragraph' : newTag = 'P'; break;
case 'header' : newTag = 'H1'; break;
case 'quote' : newTag = 'BLOCKQUOTE'; break;
case 'code' : newTag = 'CODE'; break;
case 'list' : newTag = 'LI'; break;
}
cEditor.content.switchBlock(workingNode, newTag);
/** Fire tool append callback */
appendCallback = cEditor.tools[cEditor.toolbar.current].appendCallback;
if (appendCallback && typeof appendCallback == 'function') {
appendCallback.call();
}
},
/**
* Moving toolbar to the specified node
*/
move : function() {
if (!cEditor.content.currentNode) {
return;
}
var toolbarHeight = cEditor.nodes.toolbar.clientHeight || cEditor.toolbar.defaultToolbarHeight,
newYCoordinate = cEditor.content.currentNode.offsetTop - cEditor.toolbar.defaultOffset - toolbarHeight;
cEditor.nodes.toolbar.style.transform = "translateY(" + newYCoordinate + "px)";
},
};
/**
* Content parsing module
*/
cEditor.parser = {
/**
* Asynchronously parses textarea input string to HTML editor blocks
*/
parseTextareaContent : function () {
var initialContent = cEditor.nodes.textarea.value;
if ( initialContent.trim().length === 0 ) return true;
cEditor.parser
/** Get child nodes async-aware */
.getNodesFromString(initialContent)
/** Then append nodes to the redactor */
.then(cEditor.parser.appendNodesToRedactor)
/** Write log if something goes wrong */
.catch(function(error) {
cEditor.core.log('Error while parsing content: %o', 'warn', error);
});
},
/**
* Parses string to nodeList
* @param string inputString
* @return Primise -> nodeList
*/
getNodesFromString : function (inputString) {
return Promise.resolve().then(function() {
var contentHolder = document.createElement('div');
contentHolder.innerHTML = inputString;
/**
* Returning childNodes will include:
* - Elements (html-tags),
* - Texts (empty-spaces or non-wrapped strings )
* - Comments and other
*/
return contentHolder.childNodes;
});
},
/**
* Appends nodes to the redactor
* @param nodeList nodes - list for nodes to append
*/
appendNodesToRedactor : function(nodes) {
/**
* Sequence of one-by-one nodes appending
* Uses to save blocks order after async-handler
*/
var nodeSequence = Promise.resolve();
for (var index = 0; index < nodes.length ; index++ ) {
/** Add node to sequence at specified index */
cEditor.parser.appendNodeAtIndex(nodeSequence, nodes, index);
}
},
/**
* Append node at specified index
*/
appendNodeAtIndex : function (nodeSequence, nodes, index) {
/** We need to append node to sequence */
nodeSequence
/** first, get node async-aware */
.then(function() {
return cEditor.parser.getNodeAsync(nodes , index);
})
/**
* second, compose editor-block from node
* and append it to redactor
*/
.then(function(node){
var block = cEditor.parser.createBlockByDomNode(node);
if ( cEditor.core.isDomNode(block) ) {
block.contentEditable = "true";
/** Mark node as redactor block*/
block.classList.add('ce_block');
/** Append block to the redactor */
cEditor.nodes.redactor.appendChild(block);
/** Save block to the cEditor.state array */
cEditor.state.blocks.push(block);
return block;
}
return null;
})
.then(cEditor.ui.addBlockHandlers)
/** Log if something wrong with node */
.catch(function(error) {
cEditor.core.log('Node skipped while parsing because %o', 'warn', error);
});
},
/**
* Asynchronously returns node from nodeList by index
* @return Promise to node
*/
getNodeAsync : function (nodeList, index) {
return Promise.resolve().then(function() {
return nodeList.item(index);
});
},
/**
* Creates editor block by DOM node
*
* First-level blocks (see cEditor.settings.blockTags) saves as-is,
* other wrapps with -tag
*
* @param DOMnode node
* @return First-level node (paragraph)
*/
createBlockByDomNode : function (node) {
/** First level nodes already appears as blocks */
if ( cEditor.parser.isFirstLevelBlock(node) ){
return node;
}
/** Other nodes wraps into parent block (paragraph-tag) */
var parentBlock,
nodeContent = node.textContent.trim(),
isPlainTextNode = node.nodeType != cEditor.core.nodeTypes.TAG;
/** Skip empty textNodes with space-symbols */
if (isPlainTextNode && !nodeContent.length) return null;
/** Make
tag */
parentBlock = cEditor.draw.block('P');
if (isPlainTextNode){
parentBlock.textContent = nodeContent.replace(/(\s){2,}/, '$1'); // remove double spaces
} else {
parentBlock.appendChild(node);
}
return parentBlock;
},
/**
* Check DOM node for display style: separated block or child-view
*/
isFirstLevelBlock : function (node) {
return node.nodeType == cEditor.core.nodeTypes.TAG &&
cEditor.settings.blockTags.indexOf(node.tagName) !== -1;
}
};
cEditor.tools = {
paragraph : {
type : 'paragraph',
iconClassname : 'ce_icon-smile',
append : document.createElement('P'),
appendCallback : function () {
console.log('paragraph added');
},
settings : null,
},
header : {
type : 'header',
iconClassname : 'ce_icon-header',
append : document.createElement('H2'),
appendCallback : function () {
console.log('header added');
},
settings : null,
},
quote : {
type : 'quote',
iconClassname : 'ce_icon-quote',
append : document.createElement('BLOCKQUOTE'),
appendCallback : function () {
console.log('quote added');
},
settings : null,
},
code : {
type : 'code',
iconClassname : 'ce_icon-code',
append : document.createElement('CODE'),
appendCallback : function () {
console.log('code added');
},
settings : null,
},
list : {
type : 'code',
iconClassname : 'ce_icon-list',
append : document.createElement('LI'),
appendCallback : function () {
console.log('code added');
},
settings : null,
}
};
/**
* Creates HTML elements
*/
cEditor.draw = {
/**
* Base editor wrapper
*/
wrapper : function () {
var wrapper = document.createElement('div');
wrapper.className += 'ce_wrapper';
return wrapper;
},
/**
* Content-editable holder
*/
redactor : function () {
var redactor = document.createElement('div');
redactor.className += 'ce_redactor';
return redactor;
},
/**
* Empty toolbar with toggler
*/
toolbar : function () {
var bar = document.createElement('div');
bar.className += 'ce_toolbar';
/** Toggler button*/
bar.innerHTML = '' +
''+
'';
return bar;
},
/**
* Toolbar button
*/
toolbarButton : function (type, classname) {
var button = document.createElement("li");
button.dataset.type = type;
button.innerHTML = '';
return button;
},
/**
* Redactor block
*/
block : function (tagName, content) {
var node = document.createElement(tagName);
node.innerHTML = content || '';
return node;
}
}