diff --git a/codex-editor.js b/codex-editor.js index d6080737..060d8ee7 100644 --- a/codex-editor.js +++ b/codex-editor.js @@ -922,6 +922,17 @@ cEditor.content = { newBlock.dataset.type = blockType; + /** Content-editable blocks. We can set focus to such blocks and hang listeners */ + switch (blockType) { + case 'header' : + case 'paragraph': + case 'quote' : + case 'list' : + cEditor.ui.addBlockHandlers(newBlock); + break; + + } + if (workingNode) { cEditor.core.insertAfter(workingNode, newBlock); @@ -2076,3 +2087,223 @@ cEditor.tools.header = { save : headerTool.save }; + + +/** QUOTE PLUGIN **/ + +var quoteTools = { + + /** + * Make Quote from JSON datasets + */ + makeBlockToAppend : function(data) { + + var tag; + + if (data && data.text) { + + switch (data.type) { + case 'simple': + tag = quoteTools.makeSimpleQuote(data); + break; + case 'withCaption': + tag = quoteTools.makeQuoteWithCaption(data); + break; + case 'withPhoto': + tag = quoteTools.makeQuoteWithPhoto(data); + break; + } + } else { + + tag = document.createElement('BLOCKQUOTE'); + tag.contentEditable = 'true'; + + } + + return tag; + }, + + render : function(data) { + return quoteTools.makeBlockToAppend(data); + }, + + save : function(block) { + + /** + * Parses to JSON quote block and get from there: + * @param {Text} text, {Text} author, {Object} photo + */ + parsedblock = quoteTools.parseBlockQuote(block); + + var data = { + type : 'quote', + text : parsedblock.text, + author : parsedblock.author, + photo : parsedblock.photo, + }; + + return data; + }, + + makeSettings : function(data) { + + var holder = document.createElement('DIV'), + caption = document.createElement('SPAN'), + types = { + simple : 'Простая цитата', + withCaption : 'Цитата с подписью', + withPhoto : 'Цитата с фото и ФИО' + }, + selectTypeButton; + + /** Add holder classname */ + holder.className = 'ce_plugin_quote--settings' + + /** Add settings helper caption */ + caption.textContent = 'Настройки цитат'; + caption.className = 'ce_plugin_quote--caption'; + + holder.appendChild(caption); + + /** Now add type selectors */ + for (var type in types){ + + selectTypeButton = document.createElement('SPAN'); + + selectTypeButton.textContent = types[type]; + + selectTypeButton.className = 'ce_plugin_quote--select_button'; + + this.addSelectTypeClickListener(selectTypeButton, type, data); + + holder.appendChild(selectTypeButton); + + } + + return holder; + + }, + + addSelectTypeClickListener : function(el, type, data) { + + var quoteStyleFunction; + + /** + * Choose Quote style to replace + */ + switch (type) { + case 'simple': + quoteStyleFunction = quoteTools.makeSimpleQuote; + break; + case 'withCaption': + quoteStyleFunction = quoteTools.makeQuoteWithCaption; + break; + case 'withPhoto': + quoteStyleFunction = quoteTools.makeQuoteWithPhoto; + break; + } + + el.addEventListener('click', function () { + + /** + * Parsing currentNode to JSON. + */ + var parsedOldQuote = quoteTools.parseBlockQuote(), + newStyledQuote = quoteStyleFunction(parsedOldQuote); + + cEditor.content.replaceBlock(cEditor.content.currentNode, newStyledQuote, 'quote'); + + cEditor.ui.addBlockHandlers(newStyledQuote); + + }, false); + + }, + + makeSimpleQuote : function(data) { + + + var blockquote = document.createElement('BLOCKQUOTE'); + + blockquote.innerHTML = data.text; + blockquote.setAttribute('id', 'text'); + blockquote.contentEditable = 'true'; + + return blockquote; + }, + + makeQuoteWithCaption : function(data) { + + var block = document.createElement('BLOCKQUOTE'); + + var quote = document.createElement('DIV'); + quote.contentEditable = 'true'; + quote.setAttribute('id', 'text'); + quote.innerHTML = data.text; + + var author = document.createElement('DIV'); + author.contentEditable = 'true'; + author.setAttribute('id', 'author'); + author.textContent = data.author; + + block.appendChild(quote); + block.appendChild(author); + + return block; + + }, + + makeQuoteWithPhoto : function(data) { + + var block = document.createElement('BLOCKQUOTE'); + + var photo = document.createElement('DIV'); + + var author = document.createElement('DIV'); + author.contentEditable = 'true'; + author.setAttribute('id', 'author'); + author.textContent = data.author; + + var quote = document.createElement('DIV'); + quote.contentEditable = 'true'; + quote.setAttribute('id', 'text'); + quote.innerHTML = data.text; + + block.appendChild(photo); + block.appendChild(author); + block.appendChild(quote); + + + return block; + }, + + parseBlockQuote : function(block) { + + var currentNode = block || cEditor.content.currentNode; + + var quote = currentNode.querySelector('#text') ? currentNode.querySelector('#text').textContent : currentNode.textContent, + caption = currentNode.querySelector('#author') ? currentNode.querySelector('#author').textContent : '', + avatar = currentNode.querySelector('#photo') || ''; + + + var data = { + text : quote, + author : caption, + photo : avatar, + }; + + return data; + }, + +}; + +cEditor.tools.quote = { + + type : 'quote', + iconClassname : 'ce-icon-quote', + append : quoteTools.makeBlockToAppend(), + appendCallback : null, + settings : quoteTools.makeSettings(), + render : quoteTools.render, + save : quoteTools.save, + +};