mirror of
https://github.com/codex-team/editor.js
synced 2024-06-23 16:00:44 +02:00
quote plugin - begiing
This commit is contained in:
khaydarov
parent
3a96e94d5b
commit
ad1b4fd849
231
codex-editor.js
231
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,
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue