From e710a41e8cb22f77bf8b44801b31f15ccf776f41 Mon Sep 17 00:00:00 2001
From: khaydarov <murod.haydarov@inbox.ru>
Date: Thu, 26 Jan 2017 20:01:22 +0300
Subject: [PATCH] quote photo preview

---
 plugins/quote/quote.css |  7 +++++++
 plugins/quote/quote.js  | 42 +++++++++++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/plugins/quote/quote.css b/plugins/quote/quote.css
index ee3a3d82..e21dfd9b 100644
--- a/plugins/quote/quote.css
+++ b/plugins/quote/quote.css
@@ -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 {
diff --git a/plugins/quote/quote.js b/plugins/quote/quote.js
index 684f6160..370ae3b9 100644
--- a/plugins/quote/quote.js
+++ b/plugins/quote/quote.js
@@ -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;
     };