deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-06-04 15:02:42 +02:00
Code Issues Projects Releases Wiki Activity

quote photo preview

Browse source
This commit is contained in:
khaydarov 2017-01-26 20:01:22 +03:00
parent 6e88738c9b
commit e710a41e8c
2 changed files with 37 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
plugins/quote/quote.css
View file

@ -127,6 +127,13 @@
.authorsPhoto-wrapper {
border: 0 !important;
transition: all 500ms ease-in;
will-change: opacity, filter;
}
.authorsPhotoWrapper_preview {
opacity: .5;
filter: blur(1.7px) grayscale(1);
}
.quoteStyle-withPhoto--photo .ce-icon-picture {

42
plugins/quote/quote.js
View file

@ -18,6 +18,7 @@ var quote = (function(quote) {
authorsJob : 'ce_quote--job',
authorsPhoto : 'authorsPhoto',
authorsPhotoWrapper : 'authorsPhoto-wrapper',
authorsPhotoWrapper_preview : 'authorsPhotoWrapper_preview',
simple : {
text : 'quoteStyle-simple--text'
@ -336,6 +337,30 @@ var quote = (function(quote) {
beforeSend : function() {
var input = codex.transport.input,
files = input.files,
file = files[0],
fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
var uploadImageWrapper = codex.content.currentNode.querySelector('.' + elementClasses_.withPhoto.photo),
authorsPhoto = ui_.img(elementClasses_.authorsPhoto);
authorsPhoto.src = e.target.result;
/** Remove icon from image wrapper */
uploadImageWrapper.innerHTML = '';
/** Appending uploaded image */
uploadImageWrapper.classList.add(elementClasses_.authorsPhotoWrapper);
uploadImageWrapper.classList.add(elementClasses_.authorsPhotoWrapper_preview);
uploadImageWrapper.appendChild(authorsPhoto);
};
},
/**
@ -346,19 +371,12 @@ var quote = (function(quote) {
var parsed = JSON.parse(result),
filename = parsed.filename,
uploadImageWrapper = codex.content.currentNode.querySelector('.' + elementClasses_.withPhoto.photo),
authorsPhoto = ui_.img(elementClasses_.authorsPhoto);
uploadImageWrapper = codex.content.currentNode.querySelector('.' + elementClasses_.withPhoto.photo);
authorsPhoto.src = parsed.data.file.url;
var img = uploadImageWrapper.querySelector('IMG');
img.src = parsed.data.file.bigUrl;
/** Remove icon from image wrapper */
uploadImageWrapper.innerHTML = '';
/** Appending uploaded image */
uploadImageWrapper.classList.add(elementClasses_.authorsPhotoWrapper);
uploadImageWrapper.appendChild(authorsPhoto);
authorsPhoto.dataset.bigUrl = parsed.data.file.bigUrl;
uploadImageWrapper.classList.remove(elementClasses_.authorsPhotoWrapper_preview);
},
/** Error callback. Sends notification to user that something happend or plugin doesn't supports method */
@ -439,7 +457,7 @@ var quote = (function(quote) {
}
data.text = wrapper.innerHTML;
return data;
};