2.19.1

Alex-D · Sep 3, 2019 · 01f7213 · 01f7213
1 parent f4b1bb0
commit 01f7213
Show file tree

Hide file tree

Showing 32 changed files with 114 additions and 76 deletions.
diff --git a/dist/plugins/colors/ui/sass/trumbowyg.colors.scss b/dist/plugins/colors/ui/sass/trumbowyg.colors.scss
@@ -1,5 +1,5 @@
 /**
- * Trumbowyg v2.19.0 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.19.1 - A lightweight WYSIWYG editor
  * Default stylesheet for Trumbowyg editor plugin
  * ------------------------
  * @link http://alex-d.github.io/Trumbowyg

diff --git a/dist/plugins/colors/ui/trumbowyg.colors.css b/dist/plugins/colors/ui/trumbowyg.colors.css
@@ -1,5 +1,5 @@
 /**
- * Trumbowyg v2.19.0 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.19.1 - A lightweight WYSIWYG editor
  * Trumbowyg plugin stylesheet
  * ------------------------
  * @link http://alex-d.github.io/Trumbowyg

diff --git a/dist/plugins/colors/ui/trumbowyg.colors.min.css b/dist/plugins/colors/ui/trumbowyg.colors.min.css
diff --git a/dist/plugins/emoji/ui/sass/trumbowyg.emoji.scss b/dist/plugins/emoji/ui/sass/trumbowyg.emoji.scss
@@ -1,5 +1,5 @@
 /**
- * Trumbowyg v2.19.0 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.19.1 - A lightweight WYSIWYG editor
  * Default stylesheet for Trumbowyg editor plugin
  * ------------------------
  * @link http://alex-d.github.io/Trumbowyg

diff --git a/dist/plugins/emoji/ui/trumbowyg.emoji.css b/dist/plugins/emoji/ui/trumbowyg.emoji.css
@@ -1,5 +1,5 @@
 /**
- * Trumbowyg v2.19.0 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.19.1 - A lightweight WYSIWYG editor
  * Trumbowyg plugin stylesheet
  * ------------------------
  * @link http://alex-d.github.io/Trumbowyg

diff --git a/dist/plugins/emoji/ui/trumbowyg.emoji.min.css b/dist/plugins/emoji/ui/trumbowyg.emoji.min.css
diff --git a/dist/plugins/giphy/trumbowyg.giphy.js b/dist/plugins/giphy/trumbowyg.giphy.js
@@ -86,20 +86,23 @@
             trumbowyg.o.plugins.giphy || {}
           );
 
-          if (trumbowyg.o.plugins.giphy.apiKey === null) {
-            throw new Error('You must set a Giphy API Key');
-          }
-
           trumbowyg.addBtnDef('giphy', {
             fn: function() {
-              var BASE_URL = 'https://api.giphy.com/v1/gifs/search?api_key=' + trumbowyg.o.plugins.giphy.apiKey;
-              var DEFAULT_URL = BASE_URL.replace('/search', '/trending');
+              if (trumbowyg.o.plugins.giphy.apiKey === null) {
+                throw new Error('You must set a Giphy API Key');
+              }
+
+              var BASE_URL = 'https://api.giphy.com/v1/gifs/search?api_key=' + trumbowyg.o.plugins.giphy.apiKey + '&rating=' + trumbowyg.o.plugins.giphy.rating,
+                  DEFAULT_URL = BASE_URL.replace('/search', '/trending');
               var previousAjaxCall = {abort: function () {}};
+              var prefix = trumbowyg.o.prefix;
 
               // Create and open the modal
-              var searchInput = '<input name="" class="' + trumbowyg.o.prefix + 'giphy-search" placeholder="Search a GIF" autofocus="autofocus">';
-              var poweredByGiphy = '<div class="' + trumbowyg.o.prefix + 'powered-by-giphy"><span>Powered by</span>' + giphyLogo + '</div>';
-              var giphyModalHtml = searchInput + poweredByGiphy + '<div class="' + trumbowyg.o.prefix + 'giphy-modal-scroll"><div class="' + trumbowyg.o.prefix + 'giphy-modal"></div></div>';
+              var searchInput = '<input name="" class="' + prefix + 'giphy-search" placeholder="Search a GIF" autofocus="autofocus">',
+                  closeButton = '<button class="' + prefix + 'giphy-close" title="' + trumbowyg.lang.close + '"><svg><use xlink:href="' + trumbowyg.svgPath + '#' + prefix + 'close"/></svg></button>',
+                  poweredByGiphy = '<div class="' + prefix + 'powered-by-giphy"><span>Powered by</span>' + giphyLogo + '</div>',
+                  giphyModalHtml = searchInput + closeButton + poweredByGiphy + '<div class="' + prefix + 'giphy-modal-scroll"><div class="' + prefix + 'giphy-modal"></div></div>';
+
               trumbowyg
                 .openModal(null, giphyModalHtml, false)
                 .one(CANCEL_EVENT, function () {
@@ -109,8 +112,10 @@
 
                   trumbowyg.closeModal();
                 });
-              var $giphyInput = $('.' + trumbowyg.o.prefix + 'giphy-search');
-              var $giphyModal = $('.' + trumbowyg.o.prefix + 'giphy-modal');
+
+              var $giphyInput = $('.' + trumbowyg.o.prefix + 'giphy-search'),
+                  $giphyClose = $('.' + trumbowyg.o.prefix + 'giphy-close'),
+                  $giphyModal = $('.' + trumbowyg.o.prefix + 'giphy-modal');
 
               // Load trending gifs as default
               $.ajax({
@@ -139,6 +144,11 @@
               var throttledInputRequest = trumbowygThrottle(searchGifsOnInput, 300);
 
               $giphyInput.on('input', throttledInputRequest);
+              $giphyInput.focus();
+
+              $giphyClose.one('click', function() {
+                $giphyModal.trigger(CANCEL_EVENT);
+              });
             },
           });
         }

diff --git a/dist/plugins/giphy/trumbowyg.giphy.min.js b/dist/plugins/giphy/trumbowyg.giphy.min.js
diff --git a/dist/plugins/giphy/ui/sass/trumbowyg.giphy.scss b/dist/plugins/giphy/ui/sass/trumbowyg.giphy.scss
@@ -1,5 +1,5 @@
 /**
- * Trumbowyg v2.19.0 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.19.1 - A lightweight WYSIWYG editor
  * Default stylesheet for Trumbowyg editor plugin
  * ------------------------
  * @link http://alex-d.github.io/Trumbowyg
@@ -13,10 +13,37 @@
     transform: scale(1.22);
 }
 
+.trumbowyg-giphy-search {
+    display: block;
+    width: 80%;
+    margin: 5%;
+    padding-left: 10px;
+    padding-right: 150px;
+}
+
+.trumbowyg-giphy-close {
+    position: absolute;
+    top: calc(5% + 8px);
+    right: calc(5% - 2px);
+    width: 30px;
+    height: 30px;
+    background: none;
+    border: 1px solid transparent;
+
+    &:hover,
+    &:focus {
+        outline: none;
+        background: #ecf0f1;
+    }
+    &:focus {
+        border-color: rgba(0, 0, 0, 0.3);
+    }
+}
+
 .trumbowyg-powered-by-giphy {
     position: absolute;
     top: calc(5% + 12px);
-    right: calc(5% + 10px);
+    right: calc(15% + 10px);
     pointer-events: none;
     user-select: none;
 
@@ -29,20 +56,13 @@
 
     svg {
         width: 66px;
-        height: auto;
+        height: 15px;
         vertical-align: bottom;
         margin-left: 6px;
         opacity: 0.45;
     }
 }
 
-.trumbowyg-giphy-search {
-    width: 90%;
-    margin: 5%;
-    padding-left: 10px;
-    padding-right: 150px;
-}
-
 .trumbowyg-giphy-modal-scroll {
     overflow: auto;
     overflow-x: hidden;

diff --git a/dist/plugins/giphy/ui/trumbowyg.giphy.css b/dist/plugins/giphy/ui/trumbowyg.giphy.css
@@ -1,5 +1,5 @@
 /**
- * Trumbowyg v2.19.0 - A lightweight WYSIWYG editor
+ * Trumbowyg v2.19.1 - A lightweight WYSIWYG editor
  * Trumbowyg plugin stylesheet
  * ------------------------
  * @link http://alex-d.github.io/Trumbowyg
@@ -12,10 +12,31 @@
 .trumbowyg-giphy-button svg {
   transform: scale(1.22); }
 
+.trumbowyg-giphy-search {
+  display: block;
+  width: 80%;
+  margin: 5%;
+  padding-left: 10px;
+  padding-right: 150px; }
+
+.trumbowyg-giphy-close {
+  position: absolute;
+  top: calc(5% + 8px);
+  right: calc(5% - 2px);
+  width: 30px;
+  height: 30px;
+  background: none;
+  border: 1px solid transparent; }
+  .trumbowyg-giphy-close:hover, .trumbowyg-giphy-close:focus {
+    outline: none;
+    background: #ecf0f1; }
+  .trumbowyg-giphy-close:focus {
+    border-color: rgba(0, 0, 0, 0.3); }
+
 .trumbowyg-powered-by-giphy {
   position: absolute;
   top: calc(5% + 12px);
-  right: calc(5% + 10px);
+  right: calc(15% + 10px);
   pointer-events: none;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -28,17 +49,11 @@
     opacity: 0.6; }
   .trumbowyg-powered-by-giphy svg {
     width: 66px;
-    height: auto;
+    height: 15px;
     vertical-align: bottom;
     margin-left: 6px;
     opacity: 0.45; }
 
-.trumbowyg-giphy-search {
-  width: 90%;
-  margin: 5%;
-  padding-left: 10px;
-  padding-right: 150px; }
-
 .trumbowyg-giphy-modal-scroll {
   overflow: auto;
   overflow-x: hidden;