trumbowyg
Version:
A lightweight WYSIWYG editor
271 lines (237 loc) • 14.1 kB
JavaScript
/* global AbortController: true */
(function ($) {
'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
}
});
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().getTime();
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) {
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;
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;
}
html = '<img class="' + trumbowyg.o.prefix + 'giphy-no-result" src="' + trumbowyg.o.plugins.giphy.noResultGifUrl + '"/>';
}
$giphyModal.empty();
}
$giphyModal.append(html);
// 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);
});
}
});
$('img', $giphyModal).on('click', function () {
var src = $(this).data('selection-url'),
alt = $(this).attr('alt');
trumbowyg.restoreRange();
trumbowyg.execCmd('insertImage', src, false, true);
// 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);