easyappointments/assets/ext/trumbowyg/plugins/giphy/trumbowyg.giphy.js

183 lines
8.8 KiB
JavaScript
Raw Normal View History

2020-05-12 21:47:37 +03:00
(function ($) {
'use strict';
$.extend(true, $.trumbowyg, {
langs: {
// jshint camelcase:false
en: {
giphy: 'Insert GIF',
},
fr: {
giphy: 'Insérer un GIF',
},
// 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>';
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;
}
html = '<img class="' + trumbowyg.o.prefix + 'giphy-no-result" src="' + trumbowyg.o.plugins.giphy.noResultGifUrl + '"/>';
}
$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 $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('<p class="' + prefix + 'giphy-offline">You are offline</p>');
}
};
// 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);