2016-07-02 13:03:08 +02:00
|
|
|
|
/**
|
|
|
|
|
* Codex Team
|
|
|
|
|
* @author Khaydarov Murod
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
var quoteTools = {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Make Quote from JSON datasets
|
|
|
|
|
*/
|
|
|
|
|
makeBlockToAppend : function(data) {
|
|
|
|
|
|
|
|
|
|
var tag;
|
|
|
|
|
|
|
|
|
|
if (data && data.type) {
|
|
|
|
|
|
|
|
|
|
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';
|
2016-07-02 17:33:16 +02:00
|
|
|
|
|
2016-07-02 13:03:08 +02:00
|
|
|
|
tag.dataset.quoteStyle = 'simple';
|
2016-07-02 17:33:16 +02:00
|
|
|
|
|
|
|
|
|
tag.classList.add('ce_quote--text');
|
|
|
|
|
tag.classList.add('quoteStyle-simple--text');
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
|
|
|
|
}
|
2016-07-02 17:33:16 +02:00
|
|
|
|
|
2016-07-02 13:03:08 +02:00
|
|
|
|
return tag;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render : function(data) {
|
|
|
|
|
return quoteTools.makeBlockToAppend(data);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
save : function(block) {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Extracts JSON quote data from HTML block
|
|
|
|
|
* @param {Text} text, {Text} author, {Object} photo
|
|
|
|
|
*/
|
|
|
|
|
parsedblock = quoteTools.parseBlockQuote(block);
|
|
|
|
|
|
|
|
|
|
var data = {
|
|
|
|
|
type : 'quote',
|
|
|
|
|
style : parsedblock.style,
|
|
|
|
|
text : parsedblock.quote,
|
|
|
|
|
author : parsedblock.author,
|
2016-07-02 14:08:30 +02:00
|
|
|
|
job : parsedblock.job,
|
2016-07-02 13:03:08 +02:00
|
|
|
|
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';
|
|
|
|
|
|
|
|
|
|
var quoteStyle = quoteTools.selectTypeQuoteStyle(type);
|
|
|
|
|
quoteTools.addSelectTypeClickListener(selectTypeButton, quoteStyle);
|
|
|
|
|
|
|
|
|
|
holder.appendChild(selectTypeButton);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return holder;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
selectTypeQuoteStyle : function(type) {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return quoteStyleFunction;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
addSelectTypeClickListener : function(el, quoteStyle) {
|
|
|
|
|
|
|
|
|
|
el.addEventListener('click', function () {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Parsing currentNode to JSON.
|
|
|
|
|
*/
|
|
|
|
|
var parsedOldQuote = quoteTools.parseBlockQuote(),
|
|
|
|
|
newStyledQuote = quoteStyle(parsedOldQuote);
|
|
|
|
|
|
|
|
|
|
cEditor.content.replaceBlock(cEditor.content.currentNode, newStyledQuote, 'quote');
|
|
|
|
|
|
|
|
|
|
/** Close settings after replacing */
|
|
|
|
|
cEditor.toolbar.settings.close();
|
|
|
|
|
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
makeSimpleQuote : function(data) {
|
|
|
|
|
|
2016-07-02 17:33:16 +02:00
|
|
|
|
var wrapper = quoteTools.ui.makeBlock('BLOCKQUOTE', ['quoteStyle-simple--text', 'ce_quote--text']);
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
|
|
|
|
wrapper.innerHTML = data.text || '';
|
|
|
|
|
|
|
|
|
|
wrapper.dataset.quoteStyle = 'simple';
|
|
|
|
|
|
|
|
|
|
wrapper.contentEditable = 'true';
|
|
|
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
makeQuoteWithCaption : function(data) {
|
|
|
|
|
|
|
|
|
|
var wrapper = quoteTools.ui.blockquote(),
|
|
|
|
|
text = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withCaption--blockquote', 'ce_quote--text']),
|
|
|
|
|
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withCaption--author', 'ce_quote--author']);
|
|
|
|
|
|
|
|
|
|
/* make text block ontentEditable */
|
|
|
|
|
text.contentEditable = 'true';
|
|
|
|
|
|
|
|
|
|
text.innerHTML = data.text;
|
|
|
|
|
|
|
|
|
|
/* make Author contentEditable */
|
|
|
|
|
author.contentEditable = 'true';
|
|
|
|
|
|
2016-07-02 17:33:16 +02:00
|
|
|
|
author.textContent = data.author;
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
|
|
|
|
/* Appending created components */
|
|
|
|
|
wrapper.dataset.quoteStyle = 'withCaption';
|
|
|
|
|
|
|
|
|
|
wrapper.appendChild(text);
|
|
|
|
|
wrapper.appendChild(author);
|
|
|
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
makeQuoteWithPhoto : function(data) {
|
|
|
|
|
|
|
|
|
|
var wrapper = quoteTools.ui.blockquote();
|
2016-07-02 17:33:16 +02:00
|
|
|
|
photo = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--photo']),
|
2016-07-02 13:03:08 +02:00
|
|
|
|
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
|
2016-07-02 14:08:30 +02:00
|
|
|
|
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--job', 'ce_quote--job']),
|
2016-07-02 13:03:08 +02:00
|
|
|
|
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
|
|
|
|
|
|
|
|
|
|
/* Default Image src */
|
2016-07-02 17:33:16 +02:00
|
|
|
|
var icon = quoteTools.ui.makeBlock('SPAN', ['ce-icon-picture']);
|
|
|
|
|
photo.appendChild(icon);
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
|
|
|
|
/* make author block contentEditable */
|
|
|
|
|
author.contentEditable = 'true';
|
2016-07-02 17:33:16 +02:00
|
|
|
|
author.textContent = data.author;
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
|
|
|
|
/* Author's position and job */
|
|
|
|
|
job.contentEditable = 'true';
|
2016-07-02 17:33:16 +02:00
|
|
|
|
job.textContent = data.job;
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
2016-07-02 14:08:30 +02:00
|
|
|
|
var authorsWrapper = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--authorWrapper']);
|
2016-07-02 13:03:08 +02:00
|
|
|
|
authorsWrapper.appendChild(author);
|
|
|
|
|
authorsWrapper.appendChild(job);
|
|
|
|
|
|
|
|
|
|
/* make quote text contentEditable */
|
|
|
|
|
quote.contentEditable = 'true';
|
|
|
|
|
quote.innerHTML = data.text;
|
|
|
|
|
|
2016-07-02 14:08:30 +02:00
|
|
|
|
wrapper.classList.add('quoteStyle-withPhoto--wrapper');
|
2016-07-02 13:03:08 +02:00
|
|
|
|
wrapper.dataset.quoteStyle = 'withPhoto';
|
|
|
|
|
|
|
|
|
|
wrapper.appendChild(photo);
|
|
|
|
|
wrapper.appendChild(authorsWrapper);
|
|
|
|
|
wrapper.appendChild(quote);
|
|
|
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
parseBlockQuote : function(block) {
|
|
|
|
|
|
|
|
|
|
var currentNode = block || cEditor.content.currentNode,
|
|
|
|
|
photo = currentNode.getElementsByTagName('img')[0],
|
|
|
|
|
author = currentNode.querySelector('.ce_quote--author'),
|
2016-07-02 14:08:30 +02:00
|
|
|
|
job = currentNode.querySelector('.ce_quote--job'),
|
2016-07-02 13:03:08 +02:00
|
|
|
|
quote ;
|
|
|
|
|
|
|
|
|
|
/** Simple quote text placed in Blockquote tag*/
|
|
|
|
|
if ( currentNode.dataset.quoteStyle == 'simple' )
|
|
|
|
|
quote = currentNode.textContent;
|
|
|
|
|
else
|
|
|
|
|
quote = currentNode.querySelector('.ce_quote--text').textContent;
|
|
|
|
|
|
2016-07-02 14:08:30 +02:00
|
|
|
|
if (job)
|
|
|
|
|
job = job.textContent;
|
2016-07-02 13:03:08 +02:00
|
|
|
|
|
|
|
|
|
if (author)
|
|
|
|
|
author = author.textContent;
|
|
|
|
|
|
|
|
|
|
if (photo)
|
|
|
|
|
photo = photo.src;
|
|
|
|
|
|
|
|
|
|
var data = {
|
2016-07-02 14:08:30 +02:00
|
|
|
|
style : currentNode.dataset.quoteStyle,
|
2016-07-02 13:03:08 +02:00
|
|
|
|
text : quote,
|
|
|
|
|
author : author,
|
2016-07-02 14:08:30 +02:00
|
|
|
|
job : job,
|
2016-07-02 13:03:08 +02:00
|
|
|
|
photo : photo,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return data;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
quoteTools.ui = {
|
|
|
|
|
|
|
|
|
|
wrapper : function($classList) {
|
|
|
|
|
|
|
|
|
|
var el = document.createElement('DIV');
|
|
|
|
|
|
|
|
|
|
el.classList.add($classList);
|
|
|
|
|
|
|
|
|
|
return el;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
blockquote : function() {
|
|
|
|
|
|
|
|
|
|
var el = document.createElement('BLOCKQUOTE');
|
|
|
|
|
|
|
|
|
|
return el;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
makeBlock : function(tag, classList) {
|
|
|
|
|
|
|
|
|
|
var el = document.createElement(tag);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( classList ) {
|
|
|
|
|
|
|
|
|
|
for( var i = 0; i < classList.length; i++)
|
|
|
|
|
el.className += ' ' + classList[i];
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
return el;
|
|
|
|
|
|
|
|
|
|
}
|
2016-07-02 17:33:16 +02:00
|
|
|
|
|
2016-07-02 13:03:08 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
cEditor.tools.quote = {
|
|
|
|
|
|
|
|
|
|
type : 'quote',
|
|
|
|
|
iconClassname : 'ce-icon-quote',
|
|
|
|
|
make : quoteTools.makeBlockToAppend,
|
|
|
|
|
appendCallback : null,
|
|
|
|
|
settings : quoteTools.makeSettings(),
|
|
|
|
|
render : quoteTools.render,
|
|
|
|
|
save : quoteTools.save,
|
|
|
|
|
|
|
|
|
|
};
|