mirror of
https://github.com/codex-team/editor.js
synced 2024-06-17 13:15:20 +02:00
quotes plugin prototype
This commit is contained in:
khaydarov
parent
006ffc1b59
commit
63cc5ac927
189
codex-editor.js
189
codex-editor.js
|
|
@ -2096,6 +2096,8 @@ cEditor.tools.header = {
|
|||
|
||||
var quoteTools = {
|
||||
|
||||
captionPlaceholder : 'Введите имя автора',
|
||||
jobPlacaholder : 'Введите должность',
|
||||
/**
|
||||
* Make Quote from JSON datasets
|
||||
*/
|
||||
|
|
@ -2224,8 +2226,6 @@ var quoteTools = {
|
|||
|
||||
cEditor.content.replaceBlock(cEditor.content.currentNode, newStyledQuote, 'quote');
|
||||
|
||||
cEditor.ui.addBlockHandlers(newStyledQuote);
|
||||
|
||||
/** Close settings after replacing */
|
||||
cEditor.toolbar.settings.close();
|
||||
|
||||
|
|
@ -2233,95 +2233,95 @@ var quoteTools = {
|
|||
|
||||
},
|
||||
|
||||
setBlockHandler : function(block) {
|
||||
|
||||
},
|
||||
|
||||
makeSimpleQuote : function(data) {
|
||||
|
||||
var blockquote = document.createElement('BLOCKQUOTE');
|
||||
var wrapper = quoteTools.ui.blockquote();
|
||||
|
||||
blockquote.innerHTML = data.text || '';
|
||||
wrapper.innerHTML = data.text || '';
|
||||
|
||||
blockquote.classList.add('ce_quote--text');
|
||||
wrapper.classList.add('ce_quote--text');
|
||||
|
||||
blockquote.dataset.quoteStyle = 'simple';
|
||||
wrapper.dataset.quoteStyle = 'simple';
|
||||
|
||||
blockquote.contentEditable = 'true';
|
||||
wrapper.contentEditable = 'true';
|
||||
|
||||
return blockquote;
|
||||
return wrapper;
|
||||
},
|
||||
|
||||
makeQuoteWithCaption : function(data) {
|
||||
|
||||
var block = document.createElement('BLOCKQUOTE'),
|
||||
quote = document.createElement('DIV'),
|
||||
author = document.createElement('DIV');
|
||||
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']);
|
||||
|
||||
/* Creating ContentEditable block for quote */
|
||||
quote.contentEditable = 'true';
|
||||
/* make text block ontentEditable */
|
||||
text.contentEditable = 'true';
|
||||
|
||||
quote.classList.add('quoteStyle-withCaption--blockquote', 'ce_quote--text');
|
||||
text.innerHTML = data.text;
|
||||
|
||||
quote.innerHTML = data.text;
|
||||
|
||||
/* Block for author of quote */
|
||||
/* make Author contentEditable */
|
||||
author.contentEditable = 'true';
|
||||
|
||||
author.classList.add('quoteStyle-withCaption--author', 'ce_quote--author');
|
||||
author.textContent = data.author || quoteTools.captionPlaceholder;
|
||||
|
||||
author.textContent = data.author;
|
||||
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
||||
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
||||
|
||||
/* Appending created tags */
|
||||
block.dataset.quoteStyle = 'withCaption';
|
||||
|
||||
block.appendChild(quote);
|
||||
block.appendChild(author);
|
||||
/* Appending created components */
|
||||
wrapper.dataset.quoteStyle = 'withCaption';
|
||||
|
||||
return block;
|
||||
wrapper.appendChild(text);
|
||||
wrapper.appendChild(author);
|
||||
|
||||
return wrapper;
|
||||
|
||||
},
|
||||
|
||||
makeQuoteWithPhoto : function(data) {
|
||||
|
||||
var block = document.createElement('BLOCKQUOTE'),
|
||||
photo = document.createElement('IMG'),
|
||||
author = document.createElement('DIV'),
|
||||
position = document.createElement('DIV'),
|
||||
quote = document.createElement('DIV');
|
||||
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';
|
||||
|
||||
/* Author of quote — photo */
|
||||
photo.classList.add('quoteStyle-withPhoto--photo')
|
||||
photo.src = "../img/01.jpg";
|
||||
|
||||
/* Author name */
|
||||
/* make author block contentEditable */
|
||||
author.contentEditable = 'true';
|
||||
author.textContent = data.author || quoteTools.captionPlaceholder;
|
||||
|
||||
author.classList.add('quoteStyle-withPhoto--author', 'ce_quote--author');
|
||||
|
||||
author.textContent = data.author;
|
||||
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
|
||||
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
|
||||
|
||||
/* Author's position and job */
|
||||
position.contentEditable = 'true';
|
||||
job.contentEditable = 'true';
|
||||
job.textContent = data.position || quoteTools.jobPlacaholder;
|
||||
|
||||
position.classList.add('quoteStyle-withPhoto--position', 'ce_quote--position');
|
||||
quoteTools.ui.mousedown(job, quoteTools.jobPlacaholder);
|
||||
quoteTools.ui.keyPressed(job, quoteTools.jobPlacaholder);
|
||||
|
||||
position.textContent = data.position;
|
||||
var authorsWrapper = quoteTools.ui.makeBlock('DIV');
|
||||
authorsWrapper.appendChild(author);
|
||||
authorsWrapper.appendChild(job);
|
||||
|
||||
var header = document.createElement('DIV');
|
||||
header.appendChild(author);
|
||||
header.appendChild(position);
|
||||
|
||||
/* Quote */
|
||||
/* make quote text contentEditable */
|
||||
quote.contentEditable = 'true';
|
||||
quote.classList.add('quoteStyle-withPhoto--quote', 'ce_quote--text');
|
||||
|
||||
quote.innerHTML = data.text;
|
||||
|
||||
block.dataset.quoteStyle = 'withPhoto';
|
||||
wrapper.dataset.quoteStyle = 'withPhoto';
|
||||
|
||||
block.appendChild(photo);
|
||||
block.appendChild(header);
|
||||
block.appendChild(quote);
|
||||
wrapper.appendChild(photo);
|
||||
wrapper.appendChild(authorsWrapper);
|
||||
wrapper.appendChild(quote);
|
||||
|
||||
return block;
|
||||
return wrapper;
|
||||
},
|
||||
|
||||
parseBlockQuote : function(block) {
|
||||
|
|
@ -2333,18 +2333,18 @@ var quoteTools = {
|
|||
quote ;
|
||||
|
||||
/** Simple quote text placed in Blockquote tag*/
|
||||
if (currentNode.dataset.quoteStyle == 'simple')
|
||||
if ( currentNode.dataset.quoteStyle == 'simple' )
|
||||
quote = currentNode.textContent;
|
||||
else
|
||||
quote = currentNode.querySelector('.ce_quote--text').textContent;
|
||||
|
||||
if ( position )
|
||||
if (position)
|
||||
position = position.textContent;
|
||||
|
||||
if ( author )
|
||||
if (author)
|
||||
author = author.textContent;
|
||||
|
||||
if ( photo )
|
||||
if (photo)
|
||||
photo = photo.src;
|
||||
|
||||
var data = {
|
||||
|
|
@ -2359,6 +2359,83 @@ var quoteTools = {
|
|||
|
||||
};
|
||||
|
||||
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',
|
||||
|
|
|
|||
40
editor.css
40
editor.css
|
|
@ -170,7 +170,7 @@
|
|||
.ce_redactor blockquote{
|
||||
font-size: 1.3em;
|
||||
line-height: 1.9em;
|
||||
margin: 2.5em 200px !important;
|
||||
margin: 2.5em 162px !important;
|
||||
padding: 2.5em 3.5em !important;
|
||||
}
|
||||
.ce_redactor code{
|
||||
|
|
@ -227,6 +227,7 @@
|
|||
}
|
||||
|
||||
/** Quote - settings */
|
||||
|
||||
.ce_plugin_quote--settings{
|
||||
white-space: nowrap;
|
||||
/*padding-right: 10px; */
|
||||
|
|
@ -246,12 +247,22 @@
|
|||
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: 18px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.5em;
|
||||
|
||||
}
|
||||
|
||||
.quoteStyle-withCaption--blockquote:focus, .quoteStyle-withCaption--author:focus {
|
||||
|
|
@ -259,8 +270,8 @@
|
|||
}
|
||||
|
||||
.quoteStyle-withPhoto--photo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: 1px solid #8E8E8E;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
|
|
@ -268,28 +279,23 @@
|
|||
}
|
||||
|
||||
.quoteStyle-withPhoto--author, .quoteStyle-withPhoto--position {
|
||||
outline: none;
|
||||
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;
|
||||
}
|
||||
|
||||
.quoteStle-withPhoto--author::before {
|
||||
}
|
||||
|
||||
|
||||
.clearfix {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% { opacity: 0; -webkit-transform: scale(.3);}
|
||||
|
|
|
|||
|
|
@ -135,9 +135,9 @@
|
|||
},
|
||||
{
|
||||
quote : {
|
||||
type : 'simple',
|
||||
type : 'withPhoto',
|
||||
text : 'git — распределенная система контроля версий файлов.<br> «Распределенная» значит, что каждый репозиторий содержит всю историю изменений, и из него можно развернуть полноценную рабочую копию проекта.',
|
||||
photo : '',
|
||||
photo : '../img/01.jpg',
|
||||
author : '',
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue