mirror of
https://github.com/codex-team/editor.js
synced 2024-06-26 09:20:07 +02:00
first prototype of quote plugin is ready
This commit is contained in:
commit
19e8fd1e40
|
@ -45,7 +45,7 @@ var ce = function(settings) {
|
||||||
};
|
};
|
||||||
|
|
||||||
// All posible tools
|
// All posible tools
|
||||||
ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
|
ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'link', 'twitter', 'instagram', 'smile'];
|
||||||
|
|
||||||
// Default settings configuration
|
// Default settings configuration
|
||||||
ce.prototype.defaultSettings = {
|
ce.prototype.defaultSettings = {
|
||||||
|
|
383
codex-editor.js
383
codex-editor.js
|
@ -254,6 +254,7 @@ cEditor.renderer = {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Asynchronously returns block data from blocksList by index
|
* Asynchronously returns block data from blocksList by index
|
||||||
* @return Promise to node
|
* @return Promise to node
|
||||||
|
@ -926,18 +927,6 @@ cEditor.content = {
|
||||||
newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
||||||
newBlock.dataset.type = blockType;
|
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) {
|
if (workingNode) {
|
||||||
|
|
||||||
cEditor.core.insertAfter(workingNode, newBlock);
|
cEditor.core.insertAfter(workingNode, newBlock);
|
||||||
|
@ -949,13 +938,12 @@ cEditor.content = {
|
||||||
*/
|
*/
|
||||||
cEditor.nodes.redactor.appendChild(newBlock);
|
cEditor.nodes.redactor.appendChild(newBlock);
|
||||||
|
|
||||||
/**
|
|
||||||
* Set new node as current
|
|
||||||
*/
|
|
||||||
cEditor.content.workingNodeChanged(newBlock);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set new node as current
|
||||||
|
*/
|
||||||
|
cEditor.content.workingNodeChanged(newBlock);
|
||||||
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
@ -1853,7 +1841,7 @@ var paragraphTool = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make initial header block
|
* Make initial header block
|
||||||
* @param {object} JSON to with block data
|
* @param {object} JSON with block data
|
||||||
* @return {Element} element to append
|
* @return {Element} element to append
|
||||||
*/
|
*/
|
||||||
make : function (data) {
|
make : function (data) {
|
||||||
|
@ -1920,7 +1908,7 @@ var headerTool = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make initial header block
|
* Make initial header block
|
||||||
* @param {object} JSON to with block data
|
* @param {object} JSON with block data
|
||||||
* @return {Element} element to append
|
* @return {Element} element to append
|
||||||
*/
|
*/
|
||||||
make : function (data) {
|
make : function (data) {
|
||||||
|
@ -2090,360 +2078,3 @@ cEditor.tools.header = {
|
||||||
save : headerTool.save
|
save : headerTool.save
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/** QUOTE PLUGIN **/
|
|
||||||
|
|
||||||
var quoteTools = {
|
|
||||||
|
|
||||||
captionPlaceholder : 'Введите имя автора',
|
|
||||||
jobPlacaholder : 'Введите должность',
|
|
||||||
/**
|
|
||||||
* 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';
|
|
||||||
tag.dataset.quoteStyle = 'simple';
|
|
||||||
tag.class = 'ce_quote--text';
|
|
||||||
|
|
||||||
}
|
|
||||||
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,
|
|
||||||
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);
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
setBlockHandler : function(block) {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
makeSimpleQuote : function(data) {
|
|
||||||
|
|
||||||
var wrapper = quoteTools.ui.blockquote();
|
|
||||||
|
|
||||||
wrapper.innerHTML = data.text || '';
|
|
||||||
|
|
||||||
wrapper.classList.add('ce_quote--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';
|
|
||||||
|
|
||||||
author.textContent = data.author || quoteTools.captionPlaceholder;
|
|
||||||
|
|
||||||
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
|
||||||
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
|
||||||
|
|
||||||
|
|
||||||
/* Appending created components */
|
|
||||||
wrapper.dataset.quoteStyle = 'withCaption';
|
|
||||||
|
|
||||||
wrapper.appendChild(text);
|
|
||||||
wrapper.appendChild(author);
|
|
||||||
|
|
||||||
return wrapper;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
makeQuoteWithPhoto : function(data) {
|
|
||||||
|
|
||||||
var wrapper = quoteTools.ui.blockquote();
|
|
||||||
photo = quoteTools.ui.makeBlock('IMG', ['quoteStyle-withPhoto--photo']),
|
|
||||||
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
|
|
||||||
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--position', 'ce_quote--position']),
|
|
||||||
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
|
|
||||||
|
|
||||||
/* Default Image src */
|
|
||||||
photo.src = data.photo || '../img/01.jpg';
|
|
||||||
|
|
||||||
/* make author block contentEditable */
|
|
||||||
author.contentEditable = 'true';
|
|
||||||
author.textContent = data.author || quoteTools.captionPlaceholder;
|
|
||||||
|
|
||||||
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
|
||||||
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
|
||||||
|
|
||||||
/* Author's position and job */
|
|
||||||
job.contentEditable = 'true';
|
|
||||||
job.textContent = data.position || quoteTools.jobPlacaholder;
|
|
||||||
|
|
||||||
quoteTools.ui.mousedown(job, quoteTools.jobPlacaholder);
|
|
||||||
quoteTools.ui.keyPressed(job, quoteTools.jobPlacaholder);
|
|
||||||
|
|
||||||
var authorsWrapper = quoteTools.ui.makeBlock('DIV');
|
|
||||||
authorsWrapper.appendChild(author);
|
|
||||||
authorsWrapper.appendChild(job);
|
|
||||||
|
|
||||||
/* make quote text contentEditable */
|
|
||||||
quote.contentEditable = 'true';
|
|
||||||
quote.innerHTML = data.text;
|
|
||||||
|
|
||||||
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'),
|
|
||||||
position = currentNode.querySelector('.ce_quote--position'),
|
|
||||||
quote ;
|
|
||||||
|
|
||||||
/** Simple quote text placed in Blockquote tag*/
|
|
||||||
if ( currentNode.dataset.quoteStyle == 'simple' )
|
|
||||||
quote = currentNode.textContent;
|
|
||||||
else
|
|
||||||
quote = currentNode.querySelector('.ce_quote--text').textContent;
|
|
||||||
|
|
||||||
if (position)
|
|
||||||
position = position.textContent;
|
|
||||||
|
|
||||||
if (author)
|
|
||||||
author = author.textContent;
|
|
||||||
|
|
||||||
if (photo)
|
|
||||||
photo = photo.src;
|
|
||||||
|
|
||||||
var data = {
|
|
||||||
text : quote,
|
|
||||||
author : author,
|
|
||||||
position : position,
|
|
||||||
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;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
mousedown : function(block, placeholder) {
|
|
||||||
|
|
||||||
block.addEventListener('focus', function() {
|
|
||||||
|
|
||||||
quoteTools.ui.clear(block, placeholder);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
keyPressed : function(block, placeholder) {
|
|
||||||
|
|
||||||
block.addEventListener('keydown', function(){
|
|
||||||
|
|
||||||
quoteTools.ui.fillbyPlaceholder(block, placeholder);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
clear : function(block, placeholder) {
|
|
||||||
|
|
||||||
if ( block.textContent == placeholder) {
|
|
||||||
block.innerHTML = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
fillbyPlaceholder : function(block, placeholder) {
|
|
||||||
|
|
||||||
quoteTools.ui.clear(block, placeholder);
|
|
||||||
|
|
||||||
setTimeout( function() {
|
|
||||||
|
|
||||||
if (block.textContent == '') {
|
|
||||||
block.textContent = placeholder;
|
|
||||||
}
|
|
||||||
|
|
||||||
}, 10);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
cEditor.tools.quote = {
|
|
||||||
|
|
||||||
type : 'quote',
|
|
||||||
iconClassname : 'ce-icon-quote',
|
|
||||||
make : quoteTools.makeBlockToAppend,
|
|
||||||
appendCallback : null,
|
|
||||||
settings : quoteTools.makeSettings(),
|
|
||||||
render : quoteTools.render,
|
|
||||||
save : quoteTools.save,
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
70
editor.css
70
editor.css
|
@ -226,76 +226,6 @@
|
||||||
color: #cc7d74;
|
color: #cc7d74;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Quote - settings */
|
|
||||||
|
|
||||||
.ce_plugin_quote--settings{
|
|
||||||
white-space: nowrap;
|
|
||||||
/*padding-right: 10px; */
|
|
||||||
}
|
|
||||||
.ce_plugin_quote--caption{
|
|
||||||
color: #b9c2c2;
|
|
||||||
}
|
|
||||||
.ce_plugin_quote--select_button{
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 40px;
|
|
||||||
border-bottom: 1px solid #c3d5ed;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
color: #5399d4;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.ce_plugin_quote--select_button:hover{
|
|
||||||
border-bottom-color: #f6d8da;
|
|
||||||
color: #cc7d74;
|
|
||||||
}
|
|
||||||
.clearfix_quote:after {
|
|
||||||
visibility: hidden;
|
|
||||||
display: block;
|
|
||||||
font-size: 0;
|
|
||||||
content: " ";
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
.quoteStyle-withCaption--author {
|
|
||||||
margin-top: 25px;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000;
|
|
||||||
line-height: 1.5em;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.quoteStyle-withCaption--blockquote:focus, .quoteStyle-withCaption--author:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quoteStyle-withPhoto--photo {
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
border: 1px solid #8E8E8E;
|
|
||||||
border-radius: 50%;
|
|
||||||
float: left;
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quoteStyle-withPhoto--author, .quoteStyle-withPhoto--position {
|
|
||||||
overflow: hidden;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 1.5em;
|
|
||||||
/*border-bottom: 1px solid black;*/
|
|
||||||
border: 0px;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quoteStyle-withPhoto--quote {
|
|
||||||
margin-top: 15px;
|
|
||||||
outline: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@-webkit-keyframes bounceIn {
|
@-webkit-keyframes bounceIn {
|
||||||
0% { opacity: 0; -webkit-transform: scale(.3);}
|
0% { opacity: 0; -webkit-transform: scale(.3);}
|
||||||
|
|
92
example.html
92
example.html
File diff suppressed because one or more lines are too long
59
plugins/ceditor-tool-link.css
Normal file
59
plugins/ceditor-tool-link.css
Normal file
|
@ -0,0 +1,59 @@
|
||||||
|
.clearfix:after {
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
content: " ";
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link-input {
|
||||||
|
outline: none;
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-link-panel {
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
margin: 25px auto;
|
||||||
|
background: #f8f7ef;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 25px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-image {
|
||||||
|
float:right;
|
||||||
|
width: 75px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-title {
|
||||||
|
display: block;
|
||||||
|
width: 340px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
line-height: 1.2em;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-description {
|
||||||
|
display: block;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-link {
|
||||||
|
display: block;
|
||||||
|
width: 360px;
|
||||||
|
font-size: 10px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgba(165,156,86,.8);
|
||||||
|
}
|
277
plugins/ceditor-tool-link.js
Normal file
277
plugins/ceditor-tool-link.js
Normal file
|
@ -0,0 +1,277 @@
|
||||||
|
/**
|
||||||
|
* Created by nostr on 29.06.16.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Link tool plugin
|
||||||
|
*/
|
||||||
|
var linkTool = {
|
||||||
|
|
||||||
|
defaultText : 'Insert link here ...',
|
||||||
|
currentBlock : null,
|
||||||
|
currentInput : null,
|
||||||
|
elementClasses : {
|
||||||
|
link : "tool-link-link",
|
||||||
|
image : "tool-link-image",
|
||||||
|
title : "tool-link-title",
|
||||||
|
description : "tool-link-description"
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make initial header block
|
||||||
|
* @param {object} JSON with block data
|
||||||
|
* @return {Element} element to append
|
||||||
|
*/
|
||||||
|
makeNewBlock : function (data) {
|
||||||
|
|
||||||
|
var wrapper = linkTool.ui.mainBlock();
|
||||||
|
|
||||||
|
var tag = linkTool.ui.input();
|
||||||
|
|
||||||
|
linkTool.currentInput = tag;
|
||||||
|
|
||||||
|
wrapper.appendChild(tag);
|
||||||
|
|
||||||
|
/* Bind callbacks **/
|
||||||
|
|
||||||
|
tag.addEventListener('paste', linkTool.blockPasteCallback, false);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to render HTML block from JSON
|
||||||
|
*/
|
||||||
|
render : function (json) {
|
||||||
|
|
||||||
|
var block = linkTool.ui.mainBlock();
|
||||||
|
|
||||||
|
var tag = linkTool.ui.make(json);
|
||||||
|
|
||||||
|
block.appendChild(tag);
|
||||||
|
|
||||||
|
return block;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to extract JSON data from HTML block
|
||||||
|
*/
|
||||||
|
save : function (block){
|
||||||
|
|
||||||
|
var linkElement = linkTool.elementClasses.link;
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
fullLink : block.querySelector("." + linkElement).href,
|
||||||
|
shortLink : block.querySelector("." + linkElement).textContent,
|
||||||
|
image : block.querySelector("." + linkTool.elementClasses.image).src,
|
||||||
|
title : block.querySelector("." + linkTool.elementClasses.title).textContent,
|
||||||
|
description : block.querySelector("." + linkTool.elementClasses.description).textContent
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
appendCallback : function () {
|
||||||
|
|
||||||
|
console.log('link callback is appended...');
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
blockPasteCallback : function (event) {
|
||||||
|
|
||||||
|
clipboardData = event.clipboardData || window.clipboardData;
|
||||||
|
|
||||||
|
pastedData = clipboardData.getData('Text');
|
||||||
|
|
||||||
|
var block = event.target.parentNode;
|
||||||
|
|
||||||
|
Promise.resolve()
|
||||||
|
|
||||||
|
.then(function () {
|
||||||
|
return linkTool.urlify(pastedData)
|
||||||
|
})
|
||||||
|
|
||||||
|
.then(fetch('http://ajax.ru/link'))
|
||||||
|
|
||||||
|
.then(function (response) {
|
||||||
|
|
||||||
|
if (response.status == "200"){
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
return {
|
||||||
|
'linkUrl' : 'http://yandex.ru',
|
||||||
|
'linkText' : 'yandex.ru',
|
||||||
|
'image' : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png',
|
||||||
|
'title' : 'Яндекс',
|
||||||
|
'description' : 'Сайт, поисковик, проч.'
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
.then(function (json) {
|
||||||
|
linkTool.composeLinkPreview(json, block)
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch(function(error) {
|
||||||
|
cEditor.core.log('Error while doing things with link paste: %o', 'error', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
urlify : function (text) {
|
||||||
|
|
||||||
|
var urlRegex = /(https?:\/\/\S+)/g;
|
||||||
|
|
||||||
|
var links = text.match(urlRegex);
|
||||||
|
|
||||||
|
if (links) {
|
||||||
|
return links[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
composeLinkPreview : function (json, currentBlock) {
|
||||||
|
|
||||||
|
if (json == {}) {
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var previewBlock = linkTool.ui.make(json);
|
||||||
|
|
||||||
|
linkTool.currentInput.remove();
|
||||||
|
|
||||||
|
currentBlock.appendChild(previewBlock);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
linkTool.ui = {
|
||||||
|
|
||||||
|
make : function (json) {
|
||||||
|
|
||||||
|
var wrapper = this.wrapper(),
|
||||||
|
siteImage = this.image(json.image),
|
||||||
|
siteTitle = this.title(json.title),
|
||||||
|
siteDescription = this.description(json.description),
|
||||||
|
siteLink = this.link(json.linkUrl, json.linkText);
|
||||||
|
|
||||||
|
wrapper.appendChild(siteImage);
|
||||||
|
wrapper.appendChild(siteTitle);
|
||||||
|
wrapper.appendChild(siteLink);
|
||||||
|
wrapper.appendChild(siteDescription);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mainBlock : function () {
|
||||||
|
|
||||||
|
var wrapper = document.createElement('div');
|
||||||
|
|
||||||
|
wrapper.classList += "ceditor-tool-link";
|
||||||
|
|
||||||
|
return wrapper
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
input : function () {
|
||||||
|
|
||||||
|
var inpitTag = document.createElement('input');
|
||||||
|
|
||||||
|
inpitTag.classList += "ceditor-tool-link-input";
|
||||||
|
|
||||||
|
inpitTag.placeholder = linkTool.defaultText;
|
||||||
|
|
||||||
|
inpitTag.contentEditable = false;
|
||||||
|
|
||||||
|
return inpitTag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
wrapper : function () {
|
||||||
|
|
||||||
|
var wrapper = document.createElement('div');
|
||||||
|
|
||||||
|
wrapper.className += 'tool-link-panel clearfix';
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
image : function (imageSrc) {
|
||||||
|
|
||||||
|
var imageTag = document.createElement('img');
|
||||||
|
|
||||||
|
imageTag.classList += linkTool.elementClasses.image;
|
||||||
|
|
||||||
|
imageTag.setAttribute('src', imageSrc);
|
||||||
|
|
||||||
|
return imageTag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
link : function (linkUrl, linkText) {
|
||||||
|
|
||||||
|
var linkTag = document.createElement('a');
|
||||||
|
|
||||||
|
linkTag.classList += linkTool.elementClasses.link;
|
||||||
|
|
||||||
|
linkTag.href = linkUrl;
|
||||||
|
|
||||||
|
linkTag.target = "_blank";
|
||||||
|
|
||||||
|
linkTag.innerText = linkText;
|
||||||
|
|
||||||
|
return linkTag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
title : function (titleText) {
|
||||||
|
|
||||||
|
var titleTag = document.createElement('div');
|
||||||
|
|
||||||
|
titleTag.classList.add("tool-link-content", linkTool.elementClasses.title);
|
||||||
|
|
||||||
|
titleTag.innerHTML = titleText;
|
||||||
|
|
||||||
|
return titleTag;
|
||||||
|
},
|
||||||
|
|
||||||
|
description : function (descriptionText) {
|
||||||
|
|
||||||
|
var descriptionTag = document.createElement('div');
|
||||||
|
|
||||||
|
descriptionTag.classList.add("tool-link-content", linkTool.elementClasses.description);
|
||||||
|
|
||||||
|
descriptionTag.innerHTML = descriptionText;
|
||||||
|
|
||||||
|
return descriptionTag;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
cEditor.tools.link = {
|
||||||
|
|
||||||
|
type : 'link',
|
||||||
|
iconClassname : 'ce-icon-link',
|
||||||
|
make : linkTool.makeNewBlock,
|
||||||
|
appendCallback : linkTool.appendCallback,
|
||||||
|
render : linkTool.render
|
||||||
|
// settings : linkTool.makeSettings(),
|
||||||
|
// save : linkTool.save
|
||||||
|
|
||||||
|
};
|
69
plugins/ceditor-tool-quote.css
Normal file
69
plugins/ceditor-tool-quote.css
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
/** Quote - settings */
|
||||||
|
|
||||||
|
.ce_plugin_quote--settings{
|
||||||
|
white-space: nowrap;
|
||||||
|
/*padding-right: 10px; */
|
||||||
|
}
|
||||||
|
.ce_plugin_quote--caption{
|
||||||
|
color: #b9c2c2;
|
||||||
|
}
|
||||||
|
.ce_plugin_quote--select_button{
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 40px;
|
||||||
|
border-bottom: 1px solid #c3d5ed;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
color: #5399d4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ce_plugin_quote--select_button:hover{
|
||||||
|
border-bottom-color: #f6d8da;
|
||||||
|
color: #cc7d74;
|
||||||
|
}
|
||||||
|
.clearfix_quote:after {
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
content: " ";
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.quoteStyle-withCaption--author {
|
||||||
|
margin-top: 25px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
line-height: 1.5em;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withCaption--blockquote:focus, .quoteStyle-withCaption--author:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--photo {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
border: 1px solid #8E8E8E;
|
||||||
|
border-radius: 50%;
|
||||||
|
float: left;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--author, .quoteStyle-withPhoto--position {
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
/*border-bottom: 1px solid black;*/
|
||||||
|
border: 0px;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quoteStyle-withPhoto--quote {
|
||||||
|
margin-top: 15px;
|
||||||
|
outline: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
358
plugins/ceditor-tool-quote.js
Normal file
358
plugins/ceditor-tool-quote.js
Normal file
|
@ -0,0 +1,358 @@
|
||||||
|
/**
|
||||||
|
* Codex Team
|
||||||
|
* @author Khaydarov Murod
|
||||||
|
*/
|
||||||
|
|
||||||
|
var quoteTools = {
|
||||||
|
|
||||||
|
captionPlaceholder : 'Введите имя автора',
|
||||||
|
jobPlacaholder : 'Введите должность',
|
||||||
|
/**
|
||||||
|
* 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';
|
||||||
|
tag.dataset.quoteStyle = 'simple';
|
||||||
|
tag.class = 'ce_quote--text';
|
||||||
|
|
||||||
|
}
|
||||||
|
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,
|
||||||
|
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);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
setBlockHandler : function(block) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
makeSimpleQuote : function(data) {
|
||||||
|
|
||||||
|
var wrapper = quoteTools.ui.blockquote();
|
||||||
|
|
||||||
|
wrapper.innerHTML = data.text || '';
|
||||||
|
|
||||||
|
wrapper.classList.add('ce_quote--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';
|
||||||
|
|
||||||
|
author.textContent = data.author || quoteTools.captionPlaceholder;
|
||||||
|
|
||||||
|
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
||||||
|
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
||||||
|
|
||||||
|
|
||||||
|
/* Appending created components */
|
||||||
|
wrapper.dataset.quoteStyle = 'withCaption';
|
||||||
|
|
||||||
|
wrapper.appendChild(text);
|
||||||
|
wrapper.appendChild(author);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
makeQuoteWithPhoto : function(data) {
|
||||||
|
|
||||||
|
var wrapper = quoteTools.ui.blockquote();
|
||||||
|
photo = quoteTools.ui.makeBlock('IMG', ['quoteStyle-withPhoto--photo']),
|
||||||
|
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
|
||||||
|
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--position', 'ce_quote--position']),
|
||||||
|
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
|
||||||
|
|
||||||
|
/* Default Image src */
|
||||||
|
photo.src = data.photo || '../img/01.jpg';
|
||||||
|
|
||||||
|
/* make author block contentEditable */
|
||||||
|
author.contentEditable = 'true';
|
||||||
|
author.textContent = data.author || quoteTools.captionPlaceholder;
|
||||||
|
|
||||||
|
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
||||||
|
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
||||||
|
|
||||||
|
/* Author's position and job */
|
||||||
|
job.contentEditable = 'true';
|
||||||
|
job.textContent = data.position || quoteTools.jobPlacaholder;
|
||||||
|
|
||||||
|
quoteTools.ui.mousedown(job, quoteTools.jobPlacaholder);
|
||||||
|
quoteTools.ui.keyPressed(job, quoteTools.jobPlacaholder);
|
||||||
|
|
||||||
|
var authorsWrapper = quoteTools.ui.makeBlock('DIV');
|
||||||
|
authorsWrapper.appendChild(author);
|
||||||
|
authorsWrapper.appendChild(job);
|
||||||
|
|
||||||
|
/* make quote text contentEditable */
|
||||||
|
quote.contentEditable = 'true';
|
||||||
|
quote.innerHTML = data.text;
|
||||||
|
|
||||||
|
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'),
|
||||||
|
position = currentNode.querySelector('.ce_quote--position'),
|
||||||
|
quote ;
|
||||||
|
|
||||||
|
/** Simple quote text placed in Blockquote tag*/
|
||||||
|
if ( currentNode.dataset.quoteStyle == 'simple' )
|
||||||
|
quote = currentNode.textContent;
|
||||||
|
else
|
||||||
|
quote = currentNode.querySelector('.ce_quote--text').textContent;
|
||||||
|
|
||||||
|
if (position)
|
||||||
|
position = position.textContent;
|
||||||
|
|
||||||
|
if (author)
|
||||||
|
author = author.textContent;
|
||||||
|
|
||||||
|
if (photo)
|
||||||
|
photo = photo.src;
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
text : quote,
|
||||||
|
author : author,
|
||||||
|
position : position,
|
||||||
|
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;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mousedown : function(block, placeholder) {
|
||||||
|
|
||||||
|
block.addEventListener('focus', function() {
|
||||||
|
|
||||||
|
quoteTools.ui.clear(block, placeholder);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
keyPressed : function(block, placeholder) {
|
||||||
|
|
||||||
|
block.addEventListener('keydown', function(){
|
||||||
|
|
||||||
|
quoteTools.ui.fillbyPlaceholder(block, placeholder);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
clear : function(block, placeholder) {
|
||||||
|
|
||||||
|
if ( block.textContent == placeholder) {
|
||||||
|
block.innerHTML = '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fillbyPlaceholder : function(block, placeholder) {
|
||||||
|
|
||||||
|
quoteTools.ui.clear(block, placeholder);
|
||||||
|
|
||||||
|
setTimeout( function() {
|
||||||
|
|
||||||
|
if (block.textContent == '') {
|
||||||
|
block.textContent = placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cEditor.tools.quote = {
|
||||||
|
|
||||||
|
type : 'quote',
|
||||||
|
iconClassname : 'ce-icon-quote',
|
||||||
|
make : quoteTools.makeBlockToAppend,
|
||||||
|
appendCallback : null,
|
||||||
|
settings : quoteTools.makeSettings(),
|
||||||
|
render : quoteTools.render,
|
||||||
|
save : quoteTools.save,
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in a new issue