tweet and quote plugins updated

- [x] В цитате слишком мелкий шрифт в имени и должности. Нужно сделать
обычный, как у текста
- [x] Цитата - должность должна быть черным шрифтом
- [x] Цитата - сделать квадратное фото
- [x] Цитата у ce-quote 	— margin: 0;  padding: 15px 0;
- [x] В плагине твиттера лоадер пропадает слишком рано, до рендеринга
твита
- [x] Твиттер — у подписи добавить белый фон
- [x] Твиттер — добавить width 100% к iframe, убрать max-width у подписи
- [x] Твиттер — разрешить добавлять ссылки/жирность в подписи

codex-editor.css

@@ -399,10 +399,10 @@
 /**
 * Loading bar class
 */
-.ce-redactor__loader{
+.ce-redactor__loader {
     background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, #f5f9ff 4px, #eaedef 8px) !important;
     background-size: 56px 56px;
-    animation: loading-bar 1.3s infinite linear;
+    animation: loading-bar 600ms infinite linear;
 }
 
 @keyframes loading-bar {

example.html

@@ -10,10 +10,9 @@
 
 </body>
 
-<script src="./codex-editor.js?v=108"></script>
-<link rel="stylesheet" href="./codex-editor.css?v=11000">
+<script src="codex-editor.js?v=108"></script>
+<link rel="stylesheet" href="codex-editor.css?v=11000">
 
-<link rel="stylesheet" href="codex-editor.css">
 
 <script src="plugins/paragraph/paragraph.js"></script>
 <link rel="stylesheet" href="plugins/paragraph/paragraph.css">
@@ -155,13 +154,14 @@
                 validate: instagram.validate,
                 save: instagram.save
             },
-            twitter: {
-                type: 'twitter',
+            tweet: {
+                type: 'tweet',
                 iconClassname: 'ce-icon-twitter',
                 prepare: twitter.prepare,
                 render: twitter.render,
                 validate: twitter.validate,
                 save: twitter.save,
+                showInlineToolbar : true,
                 config : {
                     fetchUrl : ''
                 }

plugins/instagram/instagram.js

@@ -9,7 +9,7 @@ var instagram = (function(instagram) {
         render : function(content) {
 
             codex.content.switchBlock(codex.content.currentNode, content, 'instagram');
-            
+
             setTimeout(function() {
                 window.instgrm.Embeds.process();
             }, 200);
@@ -46,7 +46,7 @@ var instagram = (function(instagram) {
      */
     instagram.prepare = function() {
 
-        var script = "//platform.instagram.com/en_US/embeds.js";
+        var script = "https://platform.instagram.com/en_US/embeds.js";
 
         /**
          * Load widget

plugins/quote/quote.css

@@ -100,11 +100,11 @@
 }
 
 .quoteStyle-withPhoto--photo {
-    width: 92px;
-    height: 92px;
+    width: 87px;
+    height: 87px;
     overflow: hidden;
     text-align: center;
-    line-height: 92px;
+    line-height: 87px;
     border-radius: 3px;
     float: left;
     margin-right: 10px;
@@ -157,7 +157,6 @@
     color: #000;
 }
 .quoteStyle-withPhoto--job {
-    color: #818BA1;
     outline: none;
     overflow: hidden;
 }
@@ -184,7 +183,8 @@
 * New styles
 */
 .ce-quote{
-    padding: 1em 0;
+    margin: 0 !important;
+    padding: 15px 0;
 }
 .quoteStyle-withPhoto--author,
 .quoteStyle-withPhoto--job,

plugins/twitter/twitter.css

@@ -1,18 +1,17 @@
 .ce-redactor .twitter-tweet {
-    margin: 0 auto;
-}
-
-.twitter__loader {
-    background: url("loading.gif") !important;
-    opacity: 0.1;
+    margin: 15px auto !important;
+    width: 100% !important;
 }
 
 .ce-twitter__caption {
-    max-width : 500px;
+    max-width: 520px;
+    margin-bottom: 15px;
+    background: #fff;
     border: 1px solid #ebeef3;
-    margin: 0 auto;
+    border-radius: 3px;
     padding: .6em .8em;
     box-sizing: border-box;
+
 }
 
 .ce-twitter__caption:empty::before {

plugins/twitter/twitter.js

@@ -5,6 +5,13 @@
 
 var twitter = (function(twitter) {
 
+    /**
+    * CSS classes
+    */
+    var css_ = {
+        pluginWrapper : 'cdx-tweet'
+    };
+
     var methods = {
 
         /**
@@ -25,11 +32,11 @@ var twitter = (function(twitter) {
              */
             tweet.appendChild(twitterBlock);
 
-            setTimeout(function() {
-                window.twttr.widgets.createTweet(data.id_str, twitterBlock);
-            }, 1000);
+            // setTimeout(function() {
+                window.twttr.widgets.createTweet(data.id_str, twitterBlock).then(tweetInsertedCallback_);
+            // }, 1000);
 
-            tweet.classList.add('twitter__loader');
+            tweet.classList.add('ce-redactor__loader');
 
             if (codex.content.currentNode) {
                 tweet.dataset.statusUrl = data.status_url;
@@ -62,21 +69,28 @@ var twitter = (function(twitter) {
                 tweet.dataset.statusUrl = data.status_url;
                 tweet.dataset.media = data.media;
 
-                tweet.classList.remove('twitter__loader');
+                tweet.classList.remove('ce-redactor__loader');
             }
 
             /**
              * add caption to tweet
              */
-            tweet.appendChild(twittersCaption);
+            setTimeout(function() {
+                tweet.appendChild(twittersCaption);
+            }, 1000);
 
             return tweet;
 
         },
 
         drawTwitterHolder : function() {
-            var block = codex.draw.node('DIV', '', {});
+
+            var block = document.createElement('DIV');
+
+            block.classList.add(css_.pluginWrapper);
+
             return block;
+
         },
 
         drawTwitterBlock : function() {
@@ -109,19 +123,38 @@ var twitter = (function(twitter) {
                 twitterContent.dataset.createdAt = data.created_at;
                 twitterContent.dataset.media = data.entities.urls.length > 0 ? "false" : "true";
 
-                twitterContent.classList.remove('twitter__loader');
-
             }, 50);
 
         }
     };
 
+    /**
+    * @private
+    * Fires after tweet widget rendered
+    */
+    function tweetInsertedCallback_(widget) {
+
+        var pluginWrapper = findParent_( widget , css_.pluginWrapper );
+
+        pluginWrapper.classList.remove('ce-redactor__loader');
+
+    }
+
+    /**
+    * @private
+    * Find closiest parent Element with CSS class
+    */
+    function findParent_ (el, cls) {
+        while ((el = el.parentElement) && !el.classList.contains(cls));
+        return el;
+    }
+
     /**
      * Prepare twitter scripts
      */
     twitter.prepare = function(config) {
 
-        var script = "//platform.twitter.com/widgets.js";
+        var script = "https://platform.twitter.com/widgets.js";
 
         /**
          * Save configs