(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 = ''; // 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 '
'; }) .join('') ; if (mustEmpty === true) { if (html.length === 0) { if ($('.' + trumbowyg.o.prefix + 'giphy-no-result', $giphyModal).length > 0) { return; } html = ''; } $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 = '', closeButton = '', poweredByGiphy = '
Powered by' + giphyLogo + '
', giphyModalHtml = searchInput + closeButton + poweredByGiphy + '
'; trumbowyg .openModal(null, giphyModalHtml, false) .one(CANCEL_EVENT, function () { try { previousAjaxCall.abort(); } catch (e) {} trumbowyg.closeModal(); }); var $giphyInput = $('.' + prefix + 'giphy-search'), $giphyClose = $('.' + prefix + 'giphy-close'), $giphyModal = $('.' + prefix + 'giphy-modal'); var ajaxError = function () { if (!navigator.onLine && !$('.' + prefix + 'giphy-offline', $giphyModal).length) { $giphyModal.empty(); $giphyModal.append('

You are offline

'); } }; // Load trending gifs as default $.ajax({ url: DEFAULT_URL, dataType: 'json', success: function(response) { renderGifs(response, $giphyModal, trumbowyg, true); }, error: ajaxError }); var searchGifsOnInput = function () { var query = $giphyInput.val(); if (query.length === 0) { return; } try { previousAjaxCall.abort(); } catch (e) {} previousAjaxCall = $.ajax({ url: BASE_URL + '&q=' + encodeURIComponent(query), dataType: 'json', success: function(response) { renderGifs(response, $giphyModal, trumbowyg, true); }, error: ajaxError }); }; var throttledInputRequest = trumbowygThrottle(searchGifsOnInput, trumbowyg.o.plugins.giphy.throttleDelay); $giphyInput.on('input', throttledInputRequest); $giphyInput.focus(); $giphyClose.one('click', function() { $giphyModal.trigger(CANCEL_EVENT); }); }, }); } } } }); })(jQuery);