mirror of
https://github.com/codex-team/editor.js
synced 2024-05-23 16:52:38 +02:00
a9a0992217
* new feature method validate must be appended to codex.tools. * beta-redactor * before merge * validate is not important setting
457 lines
13 KiB
JavaScript
457 lines
13 KiB
JavaScript
/**
|
||
* Codex Team
|
||
* @author Khaydarov Murod
|
||
*/
|
||
|
||
var quote = (function(quote) {
|
||
|
||
/** Default path to redactors images */
|
||
var path = '/upload/redactor_images/';
|
||
|
||
/**
|
||
* Default quote style
|
||
*/
|
||
var defaultStyle = 'withPhoto';
|
||
|
||
var styles = {
|
||
|
||
ce_quote : 'ce-quote',
|
||
quoteText : 'ce_quote--text',
|
||
quoteAuthor : 'ce_quote--author',
|
||
authorsJob : 'ce_quote--job',
|
||
authorsPhoto : 'authorsPhoto',
|
||
authorsPhotoWrapper : 'authorsPhoto-wrapper',
|
||
|
||
simple : {
|
||
text : 'quoteStyle-simple--text'
|
||
},
|
||
|
||
withCaption : {
|
||
blockquote : 'quoteStyle-withCaption--blockquote',
|
||
author : 'quoteStyle-withCaption--author'
|
||
},
|
||
|
||
withPhoto : {
|
||
photo : 'quoteStyle-withPhoto--photo',
|
||
author : 'quoteStyle-withPhoto--author',
|
||
job : 'quoteStyle-withPhoto--job',
|
||
quote : 'quoteStyle-withPhoto--quote',
|
||
wrapper : 'quoteStyle-withPhoto--wrapper',
|
||
authorHolder : 'quoteStyle-withPhoto--authorWrapper'
|
||
},
|
||
|
||
settings : {
|
||
holder : 'ce_plugin_quote--settings',
|
||
caption : 'ce_plugin_quote--caption',
|
||
buttons : 'ce_plugin_quote--select_button',
|
||
selectedType : 'ce-quote-settings--selected'
|
||
}
|
||
};
|
||
|
||
var photoUploadingCallbacks = {
|
||
|
||
/**
|
||
* Success callbacks for uploaded photo.
|
||
* Replace upload icon with uploaded photo
|
||
*/
|
||
success : function(result) {
|
||
|
||
var parsed = JSON.parse(result),
|
||
filename = parsed.filename,
|
||
uploadImageWrapper = codex.content.currentNode.querySelector('.' + styles.withPhoto.photo),
|
||
authorsPhoto = ui.img(styles.authorsPhoto);
|
||
|
||
authorsPhoto.src = path + 'b_' + filename;
|
||
|
||
/** Remove icon from image wrapper */
|
||
uploadImageWrapper.innerHTML = '';
|
||
|
||
/** Appending uploaded image */
|
||
uploadImageWrapper.classList.add(styles.authorsPhotoWrapper);
|
||
uploadImageWrapper.appendChild(authorsPhoto);
|
||
},
|
||
|
||
/** Error callback. Sends notification to user that something happend or plugin doesn't supports method */
|
||
error : function(result) {
|
||
|
||
console.log('Can\'t upload an image');
|
||
codex.notifications.errorThrown();
|
||
|
||
}
|
||
|
||
};
|
||
|
||
var ui = {
|
||
|
||
wrapper : function($classList) {
|
||
|
||
var el = document.createElement('DIV');
|
||
|
||
el.classList.add($classList);
|
||
|
||
return el;
|
||
|
||
},
|
||
|
||
blockquote : function() {
|
||
|
||
var el = document.createElement('BLOCKQUOTE');
|
||
|
||
return el;
|
||
|
||
},
|
||
|
||
img : function(attribute) {
|
||
var imageTag = document.createElement('IMG');
|
||
imageTag.classList.add(attribute);
|
||
|
||
return imageTag;
|
||
},
|
||
|
||
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;
|
||
|
||
}
|
||
|
||
};
|
||
|
||
var methods = {
|
||
|
||
changeStyleClicked : function() {
|
||
|
||
var changeStyleButton = this,
|
||
quote = codex.content.currentNode.querySelector('.' + styles.ce_quote),
|
||
newStyle = changeStyleButton.dataset.style,
|
||
styleSelectors = this.parentNode.childNodes;
|
||
|
||
quote.dataset.quoteStyle = newStyle;
|
||
|
||
/**
|
||
* Mark selected style button
|
||
*/
|
||
for (var i = styleSelectors.length - 1; i >= 0; i--) {
|
||
styleSelectors[i].classList.remove(styles.settings.selectedType);
|
||
}
|
||
|
||
this.classList.add(styles.settings.selectedType);
|
||
|
||
},
|
||
|
||
/**
|
||
* @deprecated
|
||
*/
|
||
selectTypeQuoteStyle : function(type) {
|
||
|
||
/**
|
||
* Choose Quote style to replace
|
||
*/
|
||
switch (type) {
|
||
case 'simple':
|
||
quoteStyleFunction = makeSimpleQuote;
|
||
break;
|
||
case 'withCaption':
|
||
quoteStyleFunction = makeQuoteWithCaption;
|
||
break;
|
||
case 'withPhoto':
|
||
quoteStyleFunction = makeQuoteWithPhoto;
|
||
break;
|
||
}
|
||
return quoteStyleFunction;
|
||
},
|
||
|
||
/**
|
||
* @deprecated
|
||
*/
|
||
addSelectTypeClickListener : function(el, quoteStyle) {
|
||
|
||
el.addEventListener('click', function () {
|
||
|
||
/**
|
||
* Parsing currentNode to JSON.
|
||
*/
|
||
var parsedOldQuote = methods.parseBlockQuote(),
|
||
newStyledQuote = quoteStyle(parsedOldQuote);
|
||
|
||
var wrapper = codex.content.composeNewBlock(newStyledQuote, 'quote');
|
||
wrapper.appendChild(newStyledQuote);
|
||
|
||
codex.content.switchBlock(codex.content.currentNode, newStyledQuote, 'quote');
|
||
|
||
/** Close settings after replacing */
|
||
codex.toolbar.settings.close();
|
||
|
||
}, false);
|
||
|
||
},
|
||
|
||
/**
|
||
* @deprecated
|
||
*/
|
||
makeSimpleQuote : function(data) {
|
||
|
||
var wrapper = ui.makeBlock('BLOCKQUOTE', [styles.simple.text, styles.quoteText]);
|
||
|
||
wrapper.innerHTML = data.text || '';
|
||
|
||
wrapper.dataset.quoteStyle = 'simple';
|
||
wrapper.classList.add(styles.ce_quote);
|
||
wrapper.contentEditable = 'true';
|
||
|
||
return wrapper;
|
||
},
|
||
|
||
/**
|
||
* @deprecated
|
||
*/
|
||
makeQuoteWithCaption : function(data) {
|
||
|
||
var wrapper = ui.blockquote(),
|
||
text = ui.makeBlock('DIV', [styles.withCaption.blockquote, styles.quoteText]),
|
||
author = ui.makeBlock('DIV', [styles.withCaption.author, styles.quoteAuthor]);
|
||
|
||
/* make text block ontentEditable */
|
||
text.contentEditable = 'true';
|
||
|
||
text.innerHTML = data.text;
|
||
|
||
/* make Author contentEditable */
|
||
author.contentEditable = 'true';
|
||
|
||
author.textContent = data.cite;
|
||
|
||
/* Appending created components */
|
||
wrapper.dataset.quoteStyle = 'withCaption';
|
||
wrapper.classList.add(styles.ce_quote);
|
||
|
||
wrapper.appendChild(text);
|
||
wrapper.appendChild(author);
|
||
|
||
return wrapper;
|
||
|
||
},
|
||
|
||
makeQuoteWithPhoto : function(data) {
|
||
|
||
var wrapper = ui.blockquote(),
|
||
photo = ui.makeBlock('DIV', [styles.withPhoto.photo]),
|
||
author = ui.makeBlock('DIV', [styles.withPhoto.author, styles.quoteAuthor]),
|
||
job = ui.makeBlock('DIV', [styles.withPhoto.job, styles.authorsJob]),
|
||
quote = ui.makeBlock('DIV', [styles.withPhoto.quote, styles.quoteText]);
|
||
|
||
/* Default Image src */
|
||
if (!data.photo) {
|
||
|
||
var icon = ui.makeBlock('SPAN', ['ce-icon-picture']);
|
||
photo.appendChild(icon);
|
||
|
||
} else {
|
||
|
||
var authorsPhoto = ui.img(styles.authorsPhoto);
|
||
authorsPhoto.src = data.photo;
|
||
|
||
photo.classList.add(styles.authorsPhotoWrapper);
|
||
photo.appendChild(authorsPhoto);
|
||
}
|
||
|
||
|
||
photo.addEventListener('click', methods.fileUploadClicked, false);
|
||
|
||
/* make author block contentEditable */
|
||
author.contentEditable = 'true';
|
||
author.textContent = data.cite;
|
||
|
||
/* Author's position and job */
|
||
job.contentEditable = 'true';
|
||
job.textContent = data.job;
|
||
|
||
var authorsWrapper = ui.makeBlock('DIV', [styles.withPhoto.authorHolder]);
|
||
authorsWrapper.appendChild(author);
|
||
authorsWrapper.appendChild(job);
|
||
|
||
/* make quote text contentEditable */
|
||
quote.contentEditable = 'true';
|
||
quote.innerHTML = data.text;
|
||
|
||
wrapper.classList.add(styles.ce_quote);
|
||
wrapper.classList.add(styles.withPhoto.wrapper);
|
||
wrapper.dataset.quoteStyle = 'withPhoto';
|
||
|
||
wrapper.appendChild(quote);
|
||
wrapper.appendChild(photo);
|
||
wrapper.appendChild(authorsWrapper);
|
||
|
||
return wrapper;
|
||
},
|
||
|
||
parseBlockQuote : function(block) {
|
||
|
||
var currentNode = block || codex.content.currentNode,
|
||
photo = currentNode.getElementsByTagName('img')[0],
|
||
author = currentNode.querySelector('.' + styles.quoteAuthor),
|
||
job = currentNode.querySelector('.' + styles.authorsJob),
|
||
quote ;
|
||
|
||
/** Simple quote text placed in Blockquote tag*/
|
||
if ( currentNode.dataset.quoteStyle == 'simple' )
|
||
quote = currentNode.innerHTML;
|
||
else
|
||
quote = currentNode.querySelector('.' + styles.quoteText).innerHTML;
|
||
|
||
if (job)
|
||
job = job.textContent;
|
||
|
||
if (author)
|
||
author = author.textContent;
|
||
|
||
if (photo)
|
||
photo = photo.src;
|
||
|
||
var data = {
|
||
style : currentNode.dataset.quoteStyle,
|
||
text : quote,
|
||
author : author,
|
||
job : job,
|
||
photo : photo
|
||
};
|
||
|
||
return data;
|
||
},
|
||
|
||
fileUploadClicked : function() {
|
||
|
||
codex.transport.selectAndUpload({
|
||
sucess: photoUploadingCallbacks.success,
|
||
error: photoUploadingCallbacks.error
|
||
});
|
||
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Make Quote from JSON datasets
|
||
*/
|
||
quote.makeBlockToAppend = function(data) {
|
||
|
||
var tag;
|
||
|
||
if (data && data.size) {
|
||
|
||
data.style = 'withPhoto';
|
||
|
||
switch (data.style) {
|
||
case 'simple':
|
||
tag = methods.makeSimpleQuote(data);
|
||
break;
|
||
case 'withCaption':
|
||
tag = methods.makeQuoteWithCaption(data);
|
||
break;
|
||
case 'withPhoto':
|
||
tag = methods.makeQuoteWithPhoto(data);
|
||
break;
|
||
}
|
||
} else {
|
||
|
||
var settings = {
|
||
style : 'withPhoto',
|
||
text : '',
|
||
author : '',
|
||
job : '',
|
||
photo : ''
|
||
};
|
||
|
||
tag = methods.makeQuoteWithPhoto(settings);
|
||
}
|
||
|
||
return tag;
|
||
};
|
||
|
||
quote.validate = function(data) {
|
||
|
||
console.log(data);
|
||
if (data.style.trim() == '' || data.text.trim() == '' || data.cite.trim() == ''
|
||
|| data.size.trim() == '')
|
||
return;
|
||
|
||
return true;
|
||
};
|
||
|
||
quote.render = function(data) {
|
||
return quote.makeBlockToAppend(data);
|
||
};
|
||
|
||
quote.save = function(blockContent) {
|
||
|
||
/**
|
||
* Extracts JSON quote data from HTML block
|
||
* @param {Text} text, {Text} author, {Object} photo
|
||
*/
|
||
var parsedblock = methods.parseBlockQuote(blockContent);
|
||
|
||
if (parsedblock.style == 'withPhoto') {
|
||
parsedblock.style = 'small';
|
||
}
|
||
var data = {
|
||
"text" : parsedblock.text,
|
||
"format" : "html",
|
||
"cite" : parsedblock.author,
|
||
"size" : parsedblock.style
|
||
};
|
||
|
||
return data;
|
||
};
|
||
|
||
quote.makeSettings = function(data) {
|
||
|
||
var holder = document.createElement('DIV'),
|
||
types = {
|
||
big : 'По центру',
|
||
small : 'Врезка'
|
||
// simple : 'Простая цитата',
|
||
// withCaption : 'Цитата с подписью',
|
||
// withPhoto : 'Цитата с фото и ФИО'
|
||
},
|
||
selectTypeButton;
|
||
|
||
/** Add holder classname */
|
||
holder.className = styles.settings.holder;
|
||
|
||
/** Now add type selectors */
|
||
for (var type in types){
|
||
|
||
selectTypeButton = document.createElement('SPAN');
|
||
|
||
selectTypeButton.textContent = types[type];
|
||
selectTypeButton.className = styles.settings.buttons;
|
||
|
||
selectTypeButton.dataset.style = type;
|
||
|
||
if ( type == defaultStyle ){
|
||
selectTypeButton.classList.add(styles.settings.selectedType);
|
||
}
|
||
|
||
// var quoteStyle = quoteTools.selectTypeQuoteStyle(type);
|
||
|
||
selectTypeButton.addEventListener('click', methods.changeStyleClicked, false);
|
||
// quoteTools.addSelectTypeClickListener(selectTypeButton, quoteStyle);
|
||
|
||
holder.appendChild(selectTypeButton);
|
||
|
||
}
|
||
|
||
return holder;
|
||
|
||
};
|
||
|
||
return quote;
|
||
|
||
})({}); |