activeadmin_trumbowyg 1.0.0 → 1.2.0

data/app/assets/javascripts/activeadmin/trumbowyg/plugins/giphy/trumbowyg.giphy.js

@@ -1,191 +1,270 @@
+/* global AbortController: true */
 (function ($) {
-  'use strict';
-
-  $.extend(true, $.trumbowyg, {
-    langs: {
-      // jshint camelcase:false
-      en: {
-        giphy: 'Insert GIF',
-      },
-      et: {
-        giphy: 'Sisesta GIF',
-      },
-      fr: {
-        giphy: 'Insérer un GIF',
-      },
-      hu: {
-        giphy: 'GIF beszúrás',
-      },
-      tr: {
-        giphy: 'GIF ekle',
-      },
-      // jshint camelcase:true
-    }
-  });
-
-  var giphyLogo = '<svg viewBox="0 0 231 53" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M48.32 22.386c0-1.388-.252-1.892-1.767-1.85-3.448.126-6.855.042-10.303.042H25.443c-.927 0-1.346.211-1.305 1.22.085 2.86.085 5.72.043 8.58 0 .883.252 1.169 1.169 1.135 2.018-.084 3.995-.042 6.014 0 1.64 0 4.164-.546 4.752.252.841 1.169.421 3.364.337 5.089-.043.547-.547 1.304-1.094 1.598-2.692 1.556-5.678 2.018-8.747 1.892-5.342-.21-9.336-2.439-11.481-7.527-1.388-3.364-1.725-6.855-1.01-10.43 1.01-4.963 3.407-8.747 8.58-10.051 5.215-1.305 10.136-.547 14.467 2.817 1.219.967 1.798.715 2.691-.294 1.514-1.724 3.154-3.322 4.753-4.963 1.892-1.933 1.892-1.892-.169-3.7C38.429.813 31.238-.617 23.5.224 12.818 1.393 5.248 6.658 1.59 17.045-.177 22.008-.428 27.097.623 32.227c1.682 7.914 5.551 14.12 13.289 17.368 6.898 2.901 14.046 3.448 21.321 1.598 4.331-1.093 8.411-2.608 11.354-6.223 1.136-1.388 1.725-2.902 1.682-4.71l.043-17.873.008-.001zm125.153 3.784l.042-23.046c0-1.136-.168-1.598-1.472-1.556a238.02 238.02 0 0 1-11.017 0c-1.136-.042-1.439.337-1.439 1.439v15.645c0 1.345-.421 1.556-1.641 1.556a422.563 422.563 0 0 0-14.593 0c-1.262.042-1.472-.421-1.439-1.556l.043-15.813c0-.926-.169-1.304-1.17-1.262h-11.513c-.927 0-1.304.169-1.304 1.22v46.764c0 .967.252 1.262 1.219 1.262h11.512c1.169.042 1.262-.462 1.262-1.388l-.042-15.644c0-1.053.251-1.346 1.304-1.346h15.14c1.22 0 1.388.421 1.388 1.472l-.042 15.477c0 1.093.21 1.472 1.388 1.439 3.615-.085 7.233-.085 10.807 0 1.304.042 1.598-.337 1.598-1.598l-.042-23.047.011-.018zM106.565 1.654c-8.369-.211-16.728-.126-25.065-.211-1.346 0-1.767.337-1.767 1.724l.043 23.004v23.215c0 1.009.168 1.439 1.304 1.387a271.22 271.22 0 0 1 11.691 0c1.094 0 1.346-.336 1.346-1.345l-.042-10.64c0-1.052.294-1.345 1.345-1.345 3.322.042 6.645.085 9.967-.085 4.407-.21 8.621-1.219 12.111-4.12 5.551-4.584 7.613-12.701 5.131-20.061-2.313-6.561-8.747-11.354-16.064-11.522v-.001zm-3.028 24.013c-2.818.042-5.594-.043-8.411.042-1.169.042-1.439-.378-1.345-1.439.084-1.556 0-3.069 0-4.626v-5.131c-.043-.841.251-1.094 1.052-1.052 2.986.042 5.929-.085 8.915.042 3.616.126 5.887 2.692 5.846 6.266-.126 3.658-2.313 5.846-6.055 5.887l-.002.011zM229.699 1.569c-4.458 0-8.915-.042-13.415.043-.629 0-1.472.503-1.85 1.052a505.695 505.695 0 0 0-8.957 14.214c-.884 1.472-1.22 1.169-1.977-.084l-8.496-14.089c-.503-.841-1.052-1.136-2.018-1.136l-13.078.043c-.462 0-.967.125-1.439.21.21.378.378.799.629 1.169l17.412 27.167c.462.715.715 1.682.757 2.524v16.653c0 1.052.168 1.514 1.388 1.472 3.784-.084 7.57-.084 11.354 0 1.136.043 1.304-.377 1.304-1.387l-.042-8.58c0-2.734-.084-5.51.042-8.243.043-.926.337-1.933.841-2.649l18.167-27.041c.252-.337.337-.758.547-1.17a3.636 3.636 0 0 0-1.169-.168zM70.104 2.661c0-1.009-.294-1.219-1.262-1.219H57.69c-1.262-.043-1.472.377-1.472 1.513l.042 23.004v23.34c0 1.053.126 1.514 1.346 1.473 3.7-.085 7.444-.043 11.152 0 .966 0 1.387-.085 1.387-1.262l-.042-46.857.001.008z" fill="currentColor" fill-rule="nonzero"/></svg>'; // jshint ignore:line
-
-  var CANCEL_EVENT = 'tbwcancel';
-
-  // Throttle helper
-  function trumbowygThrottle(callback, delay) {
-    var last;
-    var timer;
-
-    return function () {
-      var context = this;
-      var now = +new Date();
-      var args = arguments;
-
-      if (last && now < last + delay) {
-        clearTimeout(timer);
-        timer = setTimeout(function () {
-          last = now;
-          callback.apply(context, args);
-        }, delay);
-      } else {
-        last = now;
-        callback.apply(context, args);
-      }
-    };
-  }
-
-  // Fills modal with response gifs
-  function renderGifs(response, $giphyModal, trumbowyg, mustEmpty) {
-    var width = ($giphyModal.width() - 20) / 3;
-
-    var html = response.data
-      .filter(function (gifData) {
-        return gifData.images.downsized.url !== '';
-      })
-      .map(function (gifData) {
-        var image = gifData.images.downsized,
-            imageRatio = image.height / image.width;
-
-        return '<div class="img-container"><img src=' + image.url + ' width="' + width + '" height="' + imageRatio * width + '" loading="lazy" onload="this.classList.add(\'tbw-loaded\')"/></div>';
-      })
-      .join('')
-    ;
-
-    if (mustEmpty === true) {
-      if (html.length === 0) {
-        if ($('.' + trumbowyg.o.prefix + 'giphy-no-result', $giphyModal).length > 0) {
-          return;
+    'use strict';
+
+    $.extend(true, $.trumbowyg, {
+        langs: {
+            // jshint camelcase:false
+            en: {
+                giphy: 'Insert GIF'
+            },
+            az: {
+                giphy: 'GIF yerləşdir'
+            },
+            by: {
+                giphy: 'Уставіць GIF'
+            },
+            de: {
+                giphy: 'GIF einfügen'
+            },
+            et: {
+                giphy: 'Sisesta GIF'
+            },
+            fr: {
+                giphy: 'Insérer un GIF'
+            },
+            hu: {
+                giphy: 'GIF beszúrás'
+            },
+            ru: {
+                giphy: 'Вставить GIF'
+            },
+            sl: {
+                giphy: 'Vstavi GIF'
+            },
+            tr: {
+                giphy: 'GIF ekle'
+            }
+            // jshint camelcase:true
         }
+    });
 
-        html = '<img class="' + trumbowyg.o.prefix + 'giphy-no-result" src="' + trumbowyg.o.plugins.giphy.noResultGifUrl + '"/>';
-      }
+    var giphyLogo = '<svg viewBox="0 0 231 53" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M48.32 22.386c0-1.388-.252-1.892-1.767-1.85-3.448.126-6.855.042-10.303.042H25.443c-.927 0-1.346.211-1.305 1.22.085 2.86.085 5.72.043 8.58 0 .883.252 1.169 1.169 1.135 2.018-.084 3.995-.042 6.014 0 1.64 0 4.164-.546 4.752.252.841 1.169.421 3.364.337 5.089-.043.547-.547 1.304-1.094 1.598-2.692 1.556-5.678 2.018-8.747 1.892-5.342-.21-9.336-2.439-11.481-7.527-1.388-3.364-1.725-6.855-1.01-10.43 1.01-4.963 3.407-8.747 8.58-10.051 5.215-1.305 10.136-.547 14.467 2.817 1.219.967 1.798.715 2.691-.294 1.514-1.724 3.154-3.322 4.753-4.963 1.892-1.933 1.892-1.892-.169-3.7C38.429.813 31.238-.617 23.5.224 12.818 1.393 5.248 6.658 1.59 17.045-.177 22.008-.428 27.097.623 32.227c1.682 7.914 5.551 14.12 13.289 17.368 6.898 2.901 14.046 3.448 21.321 1.598 4.331-1.093 8.411-2.608 11.354-6.223 1.136-1.388 1.725-2.902 1.682-4.71l.043-17.873.008-.001zm125.153 3.784l.042-23.046c0-1.136-.168-1.598-1.472-1.556a238.02 238.02 0 0 1-11.017 0c-1.136-.042-1.439.337-1.439 1.439v15.645c0 1.345-.421 1.556-1.641 1.556a422.563 422.563 0 0 0-14.593 0c-1.262.042-1.472-.421-1.439-1.556l.043-15.813c0-.926-.169-1.304-1.17-1.262h-11.513c-.927 0-1.304.169-1.304 1.22v46.764c0 .967.252 1.262 1.219 1.262h11.512c1.169.042 1.262-.462 1.262-1.388l-.042-15.644c0-1.053.251-1.346 1.304-1.346h15.14c1.22 0 1.388.421 1.388 1.472l-.042 15.477c0 1.093.21 1.472 1.388 1.439 3.615-.085 7.233-.085 10.807 0 1.304.042 1.598-.337 1.598-1.598l-.042-23.047.011-.018zM106.565 1.654c-8.369-.211-16.728-.126-25.065-.211-1.346 0-1.767.337-1.767 1.724l.043 23.004v23.215c0 1.009.168 1.439 1.304 1.387a271.22 271.22 0 0 1 11.691 0c1.094 0 1.346-.336 1.346-1.345l-.042-10.64c0-1.052.294-1.345 1.345-1.345 3.322.042 6.645.085 9.967-.085 4.407-.21 8.621-1.219 12.111-4.12 5.551-4.584 7.613-12.701 5.131-20.061-2.313-6.561-8.747-11.354-16.064-11.522v-.001zm-3.028 24.013c-2.818.042-5.594-.043-8.411.042-1.169.042-1.439-.378-1.345-1.439.084-1.556 0-3.069 0-4.626v-5.131c-.043-.841.251-1.094 1.052-1.052 2.986.042 5.929-.085 8.915.042 3.616.126 5.887 2.692 5.846 6.266-.126 3.658-2.313 5.846-6.055 5.887l-.002.011zM229.699 1.569c-4.458 0-8.915-.042-13.415.043-.629 0-1.472.503-1.85 1.052a505.695 505.695 0 0 0-8.957 14.214c-.884 1.472-1.22 1.169-1.977-.084l-8.496-14.089c-.503-.841-1.052-1.136-2.018-1.136l-13.078.043c-.462 0-.967.125-1.439.21.21.378.378.799.629 1.169l17.412 27.167c.462.715.715 1.682.757 2.524v16.653c0 1.052.168 1.514 1.388 1.472 3.784-.084 7.57-.084 11.354 0 1.136.043 1.304-.377 1.304-1.387l-.042-8.58c0-2.734-.084-5.51.042-8.243.043-.926.337-1.933.841-2.649l18.167-27.041c.252-.337.337-.758.547-1.17a3.636 3.636 0 0 0-1.169-.168zM70.104 2.661c0-1.009-.294-1.219-1.262-1.219H57.69c-1.262-.043-1.472.377-1.472 1.513l.042 23.004v23.34c0 1.053.126 1.514 1.346 1.473 3.7-.085 7.444-.043 11.152 0 .966 0 1.387-.085 1.387-1.262l-.042-46.857.001.008z" fill="currentColor" fill-rule="nonzero"/></svg>'; // jshint ignore:line
 
-      $giphyModal.empty();
-    }
-    $giphyModal.append(html);
-    $('img', $giphyModal).on('click', function () {
-      trumbowyg.restoreRange();
-      trumbowyg.execCmd('insertImage', $(this).attr('src'), false, true);
-      $('img', $giphyModal).off();
-      trumbowyg.closeModal();
-    });
-  }
-
-  var defaultOptions = {
-    rating: 'g',
-    apiKey: null,
-    throttleDelay: 300,
-    noResultGifUrl: 'https://media.giphy.com/media/2Faz9FbRzmwxY0pZS/giphy.gif'
-  };
-
-  // Add dropdown with font sizes
-  $.extend(true, $.trumbowyg, {
-    plugins: {
-      giphy: {
-        init: function (trumbowyg) {
-          trumbowyg.o.plugins.giphy = $.extend({},
-            defaultOptions,
-            trumbowyg.o.plugins.giphy || {}
-          );
-
-          trumbowyg.addBtnDef('giphy', {
-            fn: function() {
-              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="' + 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 () {
-                  try {
-                    previousAjaxCall.abort();
-                  } catch (e) {}
-
-                  trumbowyg.closeModal();
-                });
+    var CANCEL_EVENT = 'tbwcancel';
 
-              var $giphyInput = $('.' + prefix + 'giphy-search'),
-                  $giphyClose = $('.' + prefix + 'giphy-close'),
-                  $giphyModal = $('.' + prefix + 'giphy-modal');
+    // Throttle helper
+    function trumbowygThrottle(callback, delay) {
+        var last;
+        var timer;
 
-              var ajaxError = function () {
-                if (!navigator.onLine && !$('.' + prefix + 'giphy-offline', $giphyModal).length) {
-                  $giphyModal.empty();
-                  $giphyModal.append('<p class="' + prefix + 'giphy-offline">You are offline</p>');
-                }
-              };
+        return function () {
+            var context = this;
+            var now = new Date().getTime();
+            var args = arguments;
 
-              // Load trending gifs as default
-              $.ajax({
-                url: DEFAULT_URL,
-                dataType: 'json',
+            if (last && now < last + delay) {
+                clearTimeout(timer);
+                timer = setTimeout(function () {
+                    last = now;
+                    callback.apply(context, args);
+                }, delay);
+            } else {
+                last = now;
+                callback.apply(context, args);
+            }
+        };
+    }
 
-                success: function(response) {
-                  renderGifs(response, $giphyModal, trumbowyg, true);
-                },
-                error: ajaxError
-              });
+    // Fills modal with response gifs
+    function renderGifs(response, $giphyModal, trumbowyg, mustEmpty) {
+        var width = ($giphyModal.width() - 20) / 3;
 
-              var searchGifsOnInput = function () {
-                var query = $giphyInput.val();
+        var html = response.data
+            .filter(function (gifData) {
+                var image = gifData.images[GIPHY_OPTIONS.pickerRendition];
+                return !!image[GIPHY_OPTIONS.pickerRenditionUrlAttribute];
+            })
+            .map(function (gifData) {
+                var image = gifData.images[GIPHY_OPTIONS.pickerRendition];
+                var selectionImage = gifData.images[GIPHY_OPTIONS.selectionRendition];
+                var imageRatio = image.height / image.width,
+                    altText = gifData.title;
 
-                if (query.length === 0) {
-                  return;
+                var url = image[GIPHY_OPTIONS.pickerRenditionUrlAttribute];
+                var selectionUrl = selectionImage[GIPHY_OPTIONS.selectionRenditionUrlAttribute];
+                var imgHtml = '<img src=' + url + ' width="' + width + '" height="' + imageRatio * width + '" alt="' + altText + '" data-selection-url="' + selectionUrl + '" loading="lazy" />';
+                return '<div class="img-container">' + imgHtml + '</div>';
+            })
+            .join('')
+        ;
+
+        if (mustEmpty === true) {
+            if (html.length === 0) {
+                if ($('.' + trumbowyg.o.prefix + 'giphy-no-result', $giphyModal).length > 0) {
+                    return;
                 }
 
-                try {
-                  previousAjaxCall.abort();
-                } catch (e) {}
+                html = '<img class="' + trumbowyg.o.prefix + 'giphy-no-result" src="' + trumbowyg.o.plugins.giphy.noResultGifUrl + '"/>';
+            }
 
-                previousAjaxCall = $.ajax({
-                  url: BASE_URL + '&q=' + encodeURIComponent(query),
-                  dataType: 'json',
+            $giphyModal.empty();
+        }
+        $giphyModal.append(html);
 
-                  success: function(response) {
-                    renderGifs(response, $giphyModal, trumbowyg, true);
-                  },
-                  error: ajaxError
+        // Remove gray overlay on image load
+        // moved here from inline callback definition due to CSP issue
+        // Note: this is being done post-factum because load event doesn't bubble up and so can't be delegated
+        var addLoadedClass = function (img) {
+            img.classList.add('tbw-loaded');
+        };
+        $('img', $giphyModal).each(function () {
+            var img = this;
+            if (img.complete) { // images load instantly when cached and esp. when loaded in previous modal open
+                addLoadedClass(img);
+            } else {
+                img.addEventListener('load', function () {
+                    addLoadedClass(this);
                 });
-              };
-              var throttledInputRequest = trumbowygThrottle(searchGifsOnInput, trumbowyg.o.plugins.giphy.throttleDelay);
+            }
+        });
 
-              $giphyInput.on('input', throttledInputRequest);
-              $giphyInput.focus();
+        $('img', $giphyModal).on('click', function () {
+            var src = $(this).data('selection-url'),
+                alt = $(this).attr('alt');
+            trumbowyg.restoreRange();
+            trumbowyg.execCmd('insertImage', src, false, true);
 
-              $giphyClose.one('click', function() {
-                $giphyModal.trigger(CANCEL_EVENT);
-              });
-            },
-          });
-        }
-      }
+            // relay alt tag into inserted image
+            if (alt) {
+                var $img = $('img[src="' + src + '"]:not([alt])', trumbowyg.$box);
+                $img.attr('alt', alt);
+                // Note: This seems to fire relatively early and could be wrapped in a setTimeout if needed
+                trumbowyg.syncCode();
+            }
+            $('img', $giphyModal).off();
+            trumbowyg.closeModal();
+        });
     }
-  });
+
+    // see: https://developers.giphy.com/explorer/
+    var defaultOptions = {
+        rating: 'g',
+        apiKey: null,
+        throttleDelay: 300,
+        limit: 50,
+        noResultGifUrl: 'https://media.giphy.com/media/2Faz9FbRzmwxY0pZS/giphy.gif'
+    };
+
+    const GIPHY_OPTIONS = {
+        bundle: 'low_bandwidth',
+        pickerRendition: 'fixed_width_small', // see: https://developers.giphy.com/docs/optional-settings/#renditions-on-demand
+        pickerRenditionUrlAttribute: 'webp', // can be 'url' or 'mp4' or 'webp'
+        selectionRendition: 'original',
+        selectionRenditionUrlAttribute: 'url'
+    };
+
+    // Add dropdown with font sizes
+    $.extend(true, $.trumbowyg, {
+        plugins: {
+            giphy: {
+                init: function (trumbowyg) {
+                    trumbowyg.o.plugins.giphy = $.extend({},
+                        defaultOptions,
+                        trumbowyg.o.plugins.giphy || {}
+                    );
+
+                    trumbowyg.addBtnDef('giphy', {
+                        fn: function () {
+                            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,
+                                '&limit=',
+                                trumbowyg.o.plugins.giphy.limit,
+                                '&bundle=',
+                                GIPHY_OPTIONS.bundle,
+                            ].join('');
+                            const DEFAULT_URL = BASE_URL.replace('/search', '/trending');
+                            var prefix = trumbowyg.o.prefix;
+                            var abortController = new AbortController();
+
+                            // Create and open the modal
+                            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 () {
+                                    try {
+                                        abortController.abort();
+                                        abortController = new AbortController();
+                                    } catch (e) {
+                                    }
+
+                                    trumbowyg.closeModal();
+                                });
+
+                            var $giphyInput = $('.' + prefix + 'giphy-search'),
+                                $giphyClose = $('.' + prefix + 'giphy-close'),
+                                $giphyModal = $('.' + prefix + 'giphy-modal');
+
+                            var onError = function () {
+                                if (navigator.onLine || $('.' + prefix + 'giphy-offline', $giphyModal).length) {
+                                    return;
+                                }
+
+                                $giphyModal.empty();
+                                $giphyModal.append('<p class="' + prefix + 'giphy-offline">You are offline</p>');
+                            };
+
+                            // Load trending gifs as default
+                            fetch(DEFAULT_URL, {
+                                method: 'GET',
+                                cache: 'no-cache',
+                                signal: abortController.signal
+                            }).then((response) => {
+                                response.json().then((responseJson) => {
+                                    renderGifs(responseJson, $giphyModal, trumbowyg, true);
+                                });
+                            }).catch(() => {
+                                onError();
+                            });
+
+                            var searchGifsOnInput = function () {
+                                var query = $giphyInput.val();
+
+                                if (query.length === 0) {
+                                    return;
+                                }
+
+                                try {
+                                    abortController.abort();
+                                    abortController = new AbortController();
+                                } catch (e) {
+                                }
+
+                                fetch(BASE_URL + '&q=' + encodeURIComponent(query), {
+                                    method: 'GET',
+                                    cache: 'no-cache',
+                                    signal: abortController.signal
+                                }).then((response) => {
+                                    response.json().then((responseJson) => {
+                                        renderGifs(responseJson, $giphyModal, trumbowyg, true);
+                                    });
+                                }).catch(() => {
+                                    onError();
+                                });
+                            };
+                            var throttledInputRequest = trumbowygThrottle(searchGifsOnInput, trumbowyg.o.plugins.giphy.throttleDelay);
+
+                            $giphyInput.on('input', throttledInputRequest);
+                            $giphyInput.focus();
+
+                            $giphyClose.one('click', function () {
+                                $giphyModal.trigger(CANCEL_EVENT);
+                            });
+                        }
+                    });
+                }
+            }
+        }
+    });
 })(jQuery);

data/app/assets/javascripts/activeadmin/trumbowyg/plugins/giphy/trumbowyg.giphy.min.js

@@ -1 +1 @@
-!function(i){"use strict";i.extend(!0,i.trumbowyg,{langs:{en:{giphy:"Insert GIF"},et:{giphy:"Sisesta GIF"},fr:{giphy:"Insérer un GIF"},hu:{giphy:"GIF beszúrás"},tr:{giphy:"GIF ekle"}}});var e="tbwcancel";function n(e,n,t,l){var o=(n.width()-20)/3,a=e.data.filter((function(i){return""!==i.images.downsized.url})).map((function(i){var e=i.images.downsized,n=e.height/e.width;return'<div class="img-container"><img src='+e.url+' width="'+o+'" height="'+n*o+'" loading="lazy" onload="this.classList.add(\'tbw-loaded\')"/></div>'})).join("");if(!0===l){if(0===a.length){if(i("."+t.o.prefix+"giphy-no-result",n).length>0)return;a='<img class="'+t.o.prefix+'giphy-no-result" src="'+t.o.plugins.giphy.noResultGifUrl+'"/>'}n.empty()}n.append(a),i("img",n).on("click",(function(){t.restoreRange(),t.execCmd("insertImage",i(this).attr("src"),!1,!0),i("img",n).off(),t.closeModal()}))}var t={rating:"g",apiKey:null,throttleDelay:300,noResultGifUrl:"https://media.giphy.com/media/2Faz9FbRzmwxY0pZS/giphy.gif"};i.extend(!0,i.trumbowyg,{plugins:{giphy:{init:function(l){l.o.plugins.giphy=i.extend({},t,l.o.plugins.giphy||{}),l.addBtnDef("giphy",{fn:function(){if(null===l.o.plugins.giphy.apiKey)throw new Error("You must set a Giphy API Key");var t="https://api.giphy.com/v1/gifs/search?api_key="+l.o.plugins.giphy.apiKey+"&rating="+l.o.plugins.giphy.rating,o=t.replace("/search","/trending"),a={abort:function(){}},c=l.o.prefix,r='<input name="" class="'+c+'giphy-search" placeholder="Search a GIF" autofocus="autofocus">'+('<button class="'+c+'giphy-close" title="'+l.lang.close+'"><svg><use xlink:href="'+l.svgPath+"#"+c+'close"/></svg></button>')+('<div class="'+c+'powered-by-giphy"><span>Powered by</span><svg viewBox="0 0 231 53" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M48.32 22.386c0-1.388-.252-1.892-1.767-1.85-3.448.126-6.855.042-10.303.042H25.443c-.927 0-1.346.211-1.305 1.22.085 2.86.085 5.72.043 8.58 0 .883.252 1.169 1.169 1.135 2.018-.084 3.995-.042 6.014 0 1.64 0 4.164-.546 4.752.252.841 1.169.421 3.364.337 5.089-.043.547-.547 1.304-1.094 1.598-2.692 1.556-5.678 2.018-8.747 1.892-5.342-.21-9.336-2.439-11.481-7.527-1.388-3.364-1.725-6.855-1.01-10.43 1.01-4.963 3.407-8.747 8.58-10.051 5.215-1.305 10.136-.547 14.467 2.817 1.219.967 1.798.715 2.691-.294 1.514-1.724 3.154-3.322 4.753-4.963 1.892-1.933 1.892-1.892-.169-3.7C38.429.813 31.238-.617 23.5.224 12.818 1.393 5.248 6.658 1.59 17.045-.177 22.008-.428 27.097.623 32.227c1.682 7.914 5.551 14.12 13.289 17.368 6.898 2.901 14.046 3.448 21.321 1.598 4.331-1.093 8.411-2.608 11.354-6.223 1.136-1.388 1.725-2.902 1.682-4.71l.043-17.873.008-.001zm125.153 3.784l.042-23.046c0-1.136-.168-1.598-1.472-1.556a238.02 238.02 0 0 1-11.017 0c-1.136-.042-1.439.337-1.439 1.439v15.645c0 1.345-.421 1.556-1.641 1.556a422.563 422.563 0 0 0-14.593 0c-1.262.042-1.472-.421-1.439-1.556l.043-15.813c0-.926-.169-1.304-1.17-1.262h-11.513c-.927 0-1.304.169-1.304 1.22v46.764c0 .967.252 1.262 1.219 1.262h11.512c1.169.042 1.262-.462 1.262-1.388l-.042-15.644c0-1.053.251-1.346 1.304-1.346h15.14c1.22 0 1.388.421 1.388 1.472l-.042 15.477c0 1.093.21 1.472 1.388 1.439 3.615-.085 7.233-.085 10.807 0 1.304.042 1.598-.337 1.598-1.598l-.042-23.047.011-.018zM106.565 1.654c-8.369-.211-16.728-.126-25.065-.211-1.346 0-1.767.337-1.767 1.724l.043 23.004v23.215c0 1.009.168 1.439 1.304 1.387a271.22 271.22 0 0 1 11.691 0c1.094 0 1.346-.336 1.346-1.345l-.042-10.64c0-1.052.294-1.345 1.345-1.345 3.322.042 6.645.085 9.967-.085 4.407-.21 8.621-1.219 12.111-4.12 5.551-4.584 7.613-12.701 5.131-20.061-2.313-6.561-8.747-11.354-16.064-11.522v-.001zm-3.028 24.013c-2.818.042-5.594-.043-8.411.042-1.169.042-1.439-.378-1.345-1.439.084-1.556 0-3.069 0-4.626v-5.131c-.043-.841.251-1.094 1.052-1.052 2.986.042 5.929-.085 8.915.042 3.616.126 5.887 2.692 5.846 6.266-.126 3.658-2.313 5.846-6.055 5.887l-.002.011zM229.699 1.569c-4.458 0-8.915-.042-13.415.043-.629 0-1.472.503-1.85 1.052a505.695 505.695 0 0 0-8.957 14.214c-.884 1.472-1.22 1.169-1.977-.084l-8.496-14.089c-.503-.841-1.052-1.136-2.018-1.136l-13.078.043c-.462 0-.967.125-1.439.21.21.378.378.799.629 1.169l17.412 27.167c.462.715.715 1.682.757 2.524v16.653c0 1.052.168 1.514 1.388 1.472 3.784-.084 7.57-.084 11.354 0 1.136.043 1.304-.377 1.304-1.387l-.042-8.58c0-2.734-.084-5.51.042-8.243.043-.926.337-1.933.841-2.649l18.167-27.041c.252-.337.337-.758.547-1.17a3.636 3.636 0 0 0-1.169-.168zM70.104 2.661c0-1.009-.294-1.219-1.262-1.219H57.69c-1.262-.043-1.472.377-1.472 1.513l.042 23.004v23.34c0 1.053.126 1.514 1.346 1.473 3.7-.085 7.444-.043 11.152 0 .966 0 1.387-.085 1.387-1.262l-.042-46.857.001.008z" fill="currentColor" fill-rule="nonzero"/></svg></div>')+'<div class="'+c+'giphy-modal-scroll"><div class="'+c+'giphy-modal"></div></div>';l.openModal(null,r,!1).one(e,(function(){try{a.abort()}catch(i){}l.closeModal()}));var s=i("."+c+"giphy-search"),p=i("."+c+"giphy-close"),g=i("."+c+"giphy-modal"),u=function(){navigator.onLine||i("."+c+"giphy-offline",g).length||(g.empty(),g.append('<p class="'+c+'giphy-offline">You are offline</p>'))};i.ajax({url:o,dataType:"json",success:function(i){n(i,g,l,!0)},error:u});var h,d,y,f,v=(h=function(){var e=s.val();if(0!==e.length){try{a.abort()}catch(i){}a=i.ajax({url:t+"&q="+encodeURIComponent(e),dataType:"json",success:function(i){n(i,g,l,!0)},error:u})}},d=l.o.plugins.giphy.throttleDelay,function(){var i=this,e=+new Date,n=arguments;y&&e<y+d?(clearTimeout(f),f=setTimeout((function(){y=e,h.apply(i,n)}),d)):(y=e,h.apply(i,n))});s.on("input",v),s.focus(),p.one("click",(function(){g.trigger(e)}))}})}}}})}(jQuery);
+!function(i){"use strict";i.extend(!0,i.trumbowyg,{langs:{en:{giphy:"Insert GIF"},az:{giphy:"GIF yerləşdir"},by:{giphy:"Уставіць GIF"},de:{giphy:"GIF einfügen"},et:{giphy:"Sisesta GIF"},fr:{giphy:"Insérer un GIF"},hu:{giphy:"GIF beszúrás"},ru:{giphy:"Вставить GIF"},sl:{giphy:"Vstavi GIF"},tr:{giphy:"GIF ekle"}}});var e="tbwcancel";function t(e,t,n,o){var c=(t.width()-20)/3,a=e.data.filter((function(i){return!!i.images[l.pickerRendition][l.pickerRenditionUrlAttribute]})).map((function(i){var e=i.images[l.pickerRendition],t=i.images[l.selectionRendition],n=e.height/e.width,o=i.title,a=e[l.pickerRenditionUrlAttribute],r=t[l.selectionRenditionUrlAttribute];return'<div class="img-container">'+("<img src="+a+' width="'+c+'" height="'+n*c+'" alt="'+o+'" data-selection-url="'+r+'" loading="lazy" />')+"</div>"})).join("");if(!0===o){if(0===a.length){if(i("."+n.o.prefix+"giphy-no-result",t).length>0)return;a='<img class="'+n.o.prefix+'giphy-no-result" src="'+n.o.plugins.giphy.noResultGifUrl+'"/>'}t.empty()}t.append(a);var r=function(i){i.classList.add("tbw-loaded")};i("img",t).each((function(){var i=this;i.complete?r(i):i.addEventListener("load",(function(){r(this)}))})),i("img",t).on("click",(function(){var e=i(this).data("selection-url"),l=i(this).attr("alt");(n.restoreRange(),n.execCmd("insertImage",e,!1,!0),l)&&(i('img[src="'+e+'"]:not([alt])',n.$box).attr("alt",l),n.syncCode());i("img",t).off(),n.closeModal()}))}var n={rating:"g",apiKey:null,throttleDelay:300,limit:50,noResultGifUrl:"https://media.giphy.com/media/2Faz9FbRzmwxY0pZS/giphy.gif"};const l={bundle:"low_bandwidth",pickerRendition:"fixed_width_small",pickerRenditionUrlAttribute:"webp",selectionRendition:"original",selectionRenditionUrlAttribute:"url"};i.extend(!0,i.trumbowyg,{plugins:{giphy:{init:function(o){o.o.plugins.giphy=i.extend({},n,o.o.plugins.giphy||{}),o.addBtnDef("giphy",{fn:function(){if(null===o.o.plugins.giphy.apiKey)throw new Error("You must set a Giphy API Key");var n=["https://api.giphy.com/v1/gifs/search?api_key=",o.o.plugins.giphy.apiKey,"&rating=",o.o.plugins.giphy.rating,"&limit=",o.o.plugins.giphy.limit,"&bundle=",l.bundle].join("");const c=n.replace("/search","/trending");var a=o.o.prefix,r=new AbortController,s='<input name="" class="'+a+'giphy-search" placeholder="Search a GIF" autofocus="autofocus">'+('<button class="'+a+'giphy-close" title="'+o.lang.close+'"><svg><use xlink:href="'+o.svgPath+"#"+a+'close"/></svg></button>')+('<div class="'+a+'powered-by-giphy"><span>Powered by</span><svg viewBox="0 0 231 53" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M48.32 22.386c0-1.388-.252-1.892-1.767-1.85-3.448.126-6.855.042-10.303.042H25.443c-.927 0-1.346.211-1.305 1.22.085 2.86.085 5.72.043 8.58 0 .883.252 1.169 1.169 1.135 2.018-.084 3.995-.042 6.014 0 1.64 0 4.164-.546 4.752.252.841 1.169.421 3.364.337 5.089-.043.547-.547 1.304-1.094 1.598-2.692 1.556-5.678 2.018-8.747 1.892-5.342-.21-9.336-2.439-11.481-7.527-1.388-3.364-1.725-6.855-1.01-10.43 1.01-4.963 3.407-8.747 8.58-10.051 5.215-1.305 10.136-.547 14.467 2.817 1.219.967 1.798.715 2.691-.294 1.514-1.724 3.154-3.322 4.753-4.963 1.892-1.933 1.892-1.892-.169-3.7C38.429.813 31.238-.617 23.5.224 12.818 1.393 5.248 6.658 1.59 17.045-.177 22.008-.428 27.097.623 32.227c1.682 7.914 5.551 14.12 13.289 17.368 6.898 2.901 14.046 3.448 21.321 1.598 4.331-1.093 8.411-2.608 11.354-6.223 1.136-1.388 1.725-2.902 1.682-4.71l.043-17.873.008-.001zm125.153 3.784l.042-23.046c0-1.136-.168-1.598-1.472-1.556a238.02 238.02 0 0 1-11.017 0c-1.136-.042-1.439.337-1.439 1.439v15.645c0 1.345-.421 1.556-1.641 1.556a422.563 422.563 0 0 0-14.593 0c-1.262.042-1.472-.421-1.439-1.556l.043-15.813c0-.926-.169-1.304-1.17-1.262h-11.513c-.927 0-1.304.169-1.304 1.22v46.764c0 .967.252 1.262 1.219 1.262h11.512c1.169.042 1.262-.462 1.262-1.388l-.042-15.644c0-1.053.251-1.346 1.304-1.346h15.14c1.22 0 1.388.421 1.388 1.472l-.042 15.477c0 1.093.21 1.472 1.388 1.439 3.615-.085 7.233-.085 10.807 0 1.304.042 1.598-.337 1.598-1.598l-.042-23.047.011-.018zM106.565 1.654c-8.369-.211-16.728-.126-25.065-.211-1.346 0-1.767.337-1.767 1.724l.043 23.004v23.215c0 1.009.168 1.439 1.304 1.387a271.22 271.22 0 0 1 11.691 0c1.094 0 1.346-.336 1.346-1.345l-.042-10.64c0-1.052.294-1.345 1.345-1.345 3.322.042 6.645.085 9.967-.085 4.407-.21 8.621-1.219 12.111-4.12 5.551-4.584 7.613-12.701 5.131-20.061-2.313-6.561-8.747-11.354-16.064-11.522v-.001zm-3.028 24.013c-2.818.042-5.594-.043-8.411.042-1.169.042-1.439-.378-1.345-1.439.084-1.556 0-3.069 0-4.626v-5.131c-.043-.841.251-1.094 1.052-1.052 2.986.042 5.929-.085 8.915.042 3.616.126 5.887 2.692 5.846 6.266-.126 3.658-2.313 5.846-6.055 5.887l-.002.011zM229.699 1.569c-4.458 0-8.915-.042-13.415.043-.629 0-1.472.503-1.85 1.052a505.695 505.695 0 0 0-8.957 14.214c-.884 1.472-1.22 1.169-1.977-.084l-8.496-14.089c-.503-.841-1.052-1.136-2.018-1.136l-13.078.043c-.462 0-.967.125-1.439.21.21.378.378.799.629 1.169l17.412 27.167c.462.715.715 1.682.757 2.524v16.653c0 1.052.168 1.514 1.388 1.472 3.784-.084 7.57-.084 11.354 0 1.136.043 1.304-.377 1.304-1.387l-.042-8.58c0-2.734-.084-5.51.042-8.243.043-.926.337-1.933.841-2.649l18.167-27.041c.252-.337.337-.758.547-1.17a3.636 3.636 0 0 0-1.169-.168zM70.104 2.661c0-1.009-.294-1.219-1.262-1.219H57.69c-1.262-.043-1.472.377-1.472 1.513l.042 23.004v23.34c0 1.053.126 1.514 1.346 1.473 3.7-.085 7.444-.043 11.152 0 .966 0 1.387-.085 1.387-1.262l-.042-46.857.001.008z" fill="currentColor" fill-rule="nonzero"/></svg></div>')+'<div class="'+a+'giphy-modal-scroll"><div class="'+a+'giphy-modal"></div></div>';o.openModal(null,s,!1).one(e,(function(){try{r.abort(),r=new AbortController}catch(i){}o.closeModal()}));var g=i("."+a+"giphy-search"),h=i("."+a+"giphy-close"),p=i("."+a+"giphy-modal"),u=function(){navigator.onLine||i("."+a+"giphy-offline",p).length||(p.empty(),p.append('<p class="'+a+'giphy-offline">You are offline</p>'))};fetch(c,{method:"GET",cache:"no-cache",signal:r.signal}).then((i=>{i.json().then((i=>{t(i,p,o,!0)}))})).catch((()=>{u()}));var d,y,f,m,v=(d=function(){var i=g.val();if(0!==i.length){try{r.abort(),r=new AbortController}catch(i){}fetch(n+"&q="+encodeURIComponent(i),{method:"GET",cache:"no-cache",signal:r.signal}).then((i=>{i.json().then((i=>{t(i,p,o,!0)}))})).catch((()=>{u()}))}},y=o.o.plugins.giphy.throttleDelay,function(){var i=this,e=(new Date).getTime(),t=arguments;f&&e<f+y?(clearTimeout(m),m=setTimeout((function(){f=e,d.apply(i,t)}),y)):(f=e,d.apply(i,t))});g.on("input",v),g.focus(),h.one("click",(function(){p.trigger(e)}))}})}}}})}(jQuery);

data/app/assets/javascripts/activeadmin/trumbowyg/plugins/giphy/ui/sass/trumbowyg.giphy.scss

@@ -1,8 +1,8 @@
 /**
- * Trumbowyg v2.25.1 - A lightweight WYSIWYG editor
- * Default stylesheet for Trumbowyg editor plugin
+ * Trumbowyg v2.31.0 - A lightweight WYSIWYG editor
+ * Trumbowyg plugin stylesheet
  * ------------------------
- * @link http://alex-d.github.io/Trumbowyg
+ * @link https://alex-d.github.io/Trumbowyg/
  * @license MIT
  * @author Alexandre Demode (Alex-D)
  *         Twitter : @AlexandreDemode
@@ -35,6 +35,7 @@
         outline: none;
         background: #ecf0f1;
     }
+
     &:focus {
         border-color: rgba(0, 0, 0, 0.3);
     }
@@ -57,7 +58,7 @@
     svg {
         width: 66px;
         height: 15px;
-        vertical-align: bottom;
+        vertical-align: middle;
         margin-left: 6px;
         opacity: 0.45;
     }
@@ -74,18 +75,18 @@
     columns: 3;
     column-gap: 10px;
 
-  .trumbowyg-giphy-no-result {
-    width: 250%;
-    margin: 13% 0 0 29%;
-  }
-
-  .trumbowyg-giphy-offline {
-    font-size: 18px;
-    width: 305%;
-    height: 600px;
-    margin-top: 95px;
-    text-align: center;
-  }
+    .trumbowyg-giphy-no-result {
+        width: 250%;
+        margin: 13% 0 0 29%;
+    }
+
+    .trumbowyg-giphy-offline {
+        font-size: 18px;
+        width: 305%;
+        height: 600px;
+        margin-top: 95px;
+        text-align: center;
+    }
 }
 
 .trumbowyg-giphy-modal .img-container {