element.");
}
this.element = element;
this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
this.cropped = false;
this.disabled = false;
this.pointers = {};
this.ready = false;
this.reloading = false;
this.replaced = false;
this.sized = false;
this.sizing = false;
this.init();
}
_createClass(
Cropper,
[
{
key: "init",
value: function init() {
var element = this.element;
var tagName = element.tagName.toLowerCase();
var url;
if (element[NAMESPACE]) {
return;
}
element[NAMESPACE] = this;
if (tagName === "img") {
this.isImg = true; // e.g.: "img/picture.jpg"
url = element.getAttribute("src") || "";
this.originalUrl = url; // Stop when it's a blank image
if (!url) {
return;
} // e.g.: "https://example.com/img/picture.jpg"
url = element.src;
} else if (tagName === "canvas" && window.HTMLCanvasElement) {
url = element.toDataURL();
}
this.load(url);
},
},
{
key: "load",
value: function load(url) {
var _this = this;
if (!url) {
return;
}
this.url = url;
this.imageData = {};
var element = this.element,
options = this.options;
if (!options.rotatable && !options.scalable) {
options.checkOrientation = false;
} // Only IE10+ supports Typed Arrays
if (!options.checkOrientation || !window.ArrayBuffer) {
this.clone();
return;
} // Detect the mime type of the image directly if it is a Data URL
if (REGEXP_DATA_URL.test(url)) {
// Read ArrayBuffer from Data URL of JPEG images directly for better performance
if (REGEXP_DATA_URL_JPEG.test(url)) {
this.read(dataURLToArrayBuffer(url));
} else {
// Only a JPEG image may contains Exif Orientation information,
// the rest types of Data URLs are not necessary to check orientation at all.
this.clone();
}
return;
} // 1. Detect the mime type of the image by a XMLHttpRequest.
// 2. Load the image as ArrayBuffer for reading orientation if its a JPEG image.
var xhr = new XMLHttpRequest();
var clone = this.clone.bind(this);
this.reloading = true;
this.xhr = xhr; // 1. Cross origin requests are only supported for protocol schemes:
// http, https, data, chrome, chrome-extension.
// 2. Access to XMLHttpRequest from a Data URL will be blocked by CORS policy
// in some browsers as IE11 and Safari.
xhr.onabort = clone;
xhr.onerror = clone;
xhr.ontimeout = clone;
xhr.onprogress = function () {
// Abort the request directly if it not a JPEG image for better performance
if (xhr.getResponseHeader("content-type") !== MIME_TYPE_JPEG) {
xhr.abort();
}
};
xhr.onload = function () {
_this.read(xhr.response);
};
xhr.onloadend = function () {
_this.reloading = false;
_this.xhr = null;
}; // Bust cache when there is a "crossOrigin" property to avoid browser cache error
if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {
url = addTimestamp(url);
} // The third parameter is required for avoiding side-effect (#682)
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.withCredentials = element.crossOrigin === "use-credentials";
xhr.send();
},
},
{
key: "read",
value: function read(arrayBuffer) {
var options = this.options,
imageData = this.imageData; // Reset the orientation value to its default value 1
// as some iOS browsers will render image with its orientation
var orientation = resetAndGetOrientation(arrayBuffer);
var rotate = 0;
var scaleX = 1;
var scaleY = 1;
if (orientation > 1) {
// Generate a new URL which has the default orientation value
this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
var _parseOrientation = parseOrientation(orientation);
rotate = _parseOrientation.rotate;
scaleX = _parseOrientation.scaleX;
scaleY = _parseOrientation.scaleY;
}
if (options.rotatable) {
imageData.rotate = rotate;
}
if (options.scalable) {
imageData.scaleX = scaleX;
imageData.scaleY = scaleY;
}
this.clone();
},
},
{
key: "clone",
value: function clone() {
var element = this.element,
url = this.url;
var crossOrigin = element.crossOrigin;
var crossOriginUrl = url;
if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
if (!crossOrigin) {
crossOrigin = "anonymous";
} // Bust cache when there is not a "crossOrigin" property (#519)
crossOriginUrl = addTimestamp(url);
}
this.crossOrigin = crossOrigin;
this.crossOriginUrl = crossOriginUrl;
var image = document.createElement("img");
if (crossOrigin) {
image.crossOrigin = crossOrigin;
}
image.src = crossOriginUrl || url;
image.alt = element.alt || "The image to crop";
this.image = image;
image.onload = this.start.bind(this);
image.onerror = this.stop.bind(this);
addClass(image, CLASS_HIDE);
element.parentNode.insertBefore(image, element.nextSibling);
},
},
{
key: "start",
value: function start() {
var _this2 = this;
var image = this.image;
image.onload = null;
image.onerror = null;
this.sizing = true; // Match all browsers that use WebKit as the layout engine in iOS devices,
// such as Safari for iOS, Chrome for iOS, and in-app browsers.
var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent);
var done = function done(naturalWidth, naturalHeight) {
assign(_this2.imageData, {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
aspectRatio: naturalWidth / naturalHeight,
});
_this2.initialImageData = assign({}, _this2.imageData);
_this2.sizing = false;
_this2.sized = true;
_this2.build();
}; // Most modern browsers (excepts iOS WebKit)
if (image.naturalWidth && !isIOSWebKit) {
done(image.naturalWidth, image.naturalHeight);
return;
}
var sizingImage = document.createElement("img");
var body = document.body || document.documentElement;
this.sizingImage = sizingImage;
sizingImage.onload = function () {
done(sizingImage.width, sizingImage.height);
if (!isIOSWebKit) {
body.removeChild(sizingImage);
}
};
sizingImage.src = image.src; // iOS WebKit will convert the image automatically
// with its orientation once append it into DOM (#279)
if (!isIOSWebKit) {
sizingImage.style.cssText =
"left:0;" +
"max-height:none!important;" +
"max-width:none!important;" +
"min-height:0!important;" +
"min-width:0!important;" +
"opacity:0;" +
"position:absolute;" +
"top:0;" +
"z-index:-1;";
body.appendChild(sizingImage);
}
},
},
{
key: "stop",
value: function stop() {
var image = this.image;
image.onload = null;
image.onerror = null;
image.parentNode.removeChild(image);
this.image = null;
},
},
{
key: "build",
value: function build() {
if (!this.sized || this.ready) {
return;
}
var element = this.element,
options = this.options,
image = this.image; // Create cropper elements
var container = element.parentNode;
var template = document.createElement("div");
template.innerHTML = TEMPLATE;
var cropper = template.querySelector(".".concat(NAMESPACE, "-container"));
var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas"));
var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box"));
var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box"));
var face = cropBox.querySelector(".".concat(NAMESPACE, "-face"));
this.container = container;
this.cropper = cropper;
this.canvas = canvas;
this.dragBox = dragBox;
this.cropBox = cropBox;
this.viewBox = cropper.querySelector(".".concat(NAMESPACE, "-view-box"));
this.face = face;
canvas.appendChild(image); // Hide the original image
addClass(element, CLASS_HIDDEN); // Inserts the cropper after to the current image
container.insertBefore(cropper, element.nextSibling); // Show the image if is hidden
if (!this.isImg) {
removeClass(image, CLASS_HIDE);
}
this.initPreview();
this.bind();
options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN;
options.aspectRatio = Math.max(0, options.aspectRatio) || NaN;
options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0;
addClass(cropBox, CLASS_HIDDEN);
if (!options.guides) {
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN);
}
if (!options.center) {
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN);
}
if (options.background) {
addClass(cropper, "".concat(NAMESPACE, "-bg"));
}
if (!options.highlight) {
addClass(face, CLASS_INVISIBLE);
}
if (options.cropBoxMovable) {
addClass(face, CLASS_MOVE);
setData(face, DATA_ACTION, ACTION_ALL);
}
if (!options.cropBoxResizable) {
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-line")), CLASS_HIDDEN);
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-point")), CLASS_HIDDEN);
}
this.render();
this.ready = true;
this.setDragMode(options.dragMode);
if (options.autoCrop) {
this.crop();
}
this.setData(options.data);
if (isFunction(options.ready)) {
addListener(element, EVENT_READY, options.ready, {
once: true,
});
}
dispatchEvent(element, EVENT_READY);
},
},
{
key: "unbuild",
value: function unbuild() {
if (!this.ready) {
return;
}
this.ready = false;
this.unbind();
this.resetPreview();
this.cropper.parentNode.removeChild(this.cropper);
removeClass(this.element, CLASS_HIDDEN);
},
},
{
key: "uncreate",
value: function uncreate() {
if (this.ready) {
this.unbuild();
this.ready = false;
this.cropped = false;
} else if (this.sizing) {
this.sizingImage.onload = null;
this.sizing = false;
this.sized = false;
} else if (this.reloading) {
this.xhr.onabort = null;
this.xhr.abort();
} else if (this.image) {
this.stop();
}
},
/**
* Get the no conflict cropper class.
* @returns {Cropper} The cropper class.
*/
},
],
[
{
key: "noConflict",
value: function noConflict() {
window.Cropper = AnotherCropper;
return Cropper;
},
/**
* Change the default options.
* @param {Object} options - The new default options.
*/
},
{
key: "setDefaults",
value: function setDefaults(options) {
assign(DEFAULTS, isPlainObject(options) && options);
},
},
]
);
return Cropper;
})();
assign(Cropper.prototype, render, preview, events, handlers, change, methods);
return Cropper;
});
},
{},
],
3: [
function (require, module, exports) {
var tabbable = require("tabbable");
var xtend = require("xtend");
var activeFocusDelay;
var activeFocusTraps = (function () {
var trapQueue = [];
return {
activateTrap: function (trap) {
if (trapQueue.length > 0) {
var activeTrap = trapQueue[trapQueue.length - 1];
if (activeTrap !== trap) {
activeTrap.pause();
}
}
var trapIndex = trapQueue.indexOf(trap);
if (trapIndex === -1) {
trapQueue.push(trap);
} else {
// move this existing trap to the front of the queue
trapQueue.splice(trapIndex, 1);
trapQueue.push(trap);
}
},
deactivateTrap: function (trap) {
var trapIndex = trapQueue.indexOf(trap);
if (trapIndex !== -1) {
trapQueue.splice(trapIndex, 1);
}
if (trapQueue.length > 0) {
trapQueue[trapQueue.length - 1].unpause();
}
},
};
})();
function focusTrap(element, userOptions) {
var doc = document;
var container = typeof element === "string" ? doc.querySelector(element) : element;
var config = xtend(
{
returnFocusOnDeactivate: true,
escapeDeactivates: true,
},
userOptions
);
var state = {
firstTabbableNode: null,
lastTabbableNode: null,
nodeFocusedBeforeActivation: null,
mostRecentlyFocusedNode: null,
active: false,
paused: false,
};
var trap = {
activate: activate,
deactivate: deactivate,
pause: pause,
unpause: unpause,
};
return trap;
function activate(activateOptions) {
if (state.active) return;
updateTabbableNodes();
state.active = true;
state.paused = false;
state.nodeFocusedBeforeActivation = doc.activeElement;
var onActivate = activateOptions && activateOptions.onActivate ? activateOptions.onActivate : config.onActivate;
if (onActivate) {
onActivate();
}
addListeners();
return trap;
}
function deactivate(deactivateOptions) {
if (!state.active) return;
clearTimeout(activeFocusDelay);
removeListeners();
state.active = false;
state.paused = false;
activeFocusTraps.deactivateTrap(trap);
var onDeactivate = deactivateOptions && deactivateOptions.onDeactivate !== undefined ? deactivateOptions.onDeactivate : config.onDeactivate;
if (onDeactivate) {
onDeactivate();
}
var returnFocus = deactivateOptions && deactivateOptions.returnFocus !== undefined ? deactivateOptions.returnFocus : config.returnFocusOnDeactivate;
if (returnFocus) {
delay(function () {
tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
});
}
return trap;
}
function pause() {
if (state.paused || !state.active) return;
state.paused = true;
removeListeners();
}
function unpause() {
if (!state.paused || !state.active) return;
state.paused = false;
updateTabbableNodes();
addListeners();
}
function addListeners() {
if (!state.active) return;
// There can be only one listening focus trap at a time
activeFocusTraps.activateTrap(trap);
// Delay ensures that the focused element doesn't capture the event
// that caused the focus trap activation.
activeFocusDelay = delay(function () {
tryFocus(getInitialFocusNode());
});
doc.addEventListener("focusin", checkFocusIn, true);
doc.addEventListener("mousedown", checkPointerDown, {
capture: true,
passive: false,
});
doc.addEventListener("touchstart", checkPointerDown, {
capture: true,
passive: false,
});
doc.addEventListener("click", checkClick, {
capture: true,
passive: false,
});
doc.addEventListener("keydown", checkKey, {
capture: true,
passive: false,
});
return trap;
}
function removeListeners() {
if (!state.active) return;
doc.removeEventListener("focusin", checkFocusIn, true);
doc.removeEventListener("mousedown", checkPointerDown, true);
doc.removeEventListener("touchstart", checkPointerDown, true);
doc.removeEventListener("click", checkClick, true);
doc.removeEventListener("keydown", checkKey, true);
return trap;
}
function getNodeForOption(optionName) {
var optionValue = config[optionName];
var node = optionValue;
if (!optionValue) {
return null;
}
if (typeof optionValue === "string") {
node = doc.querySelector(optionValue);
if (!node) {
throw new Error("`" + optionName + "` refers to no known node");
}
}
if (typeof optionValue === "function") {
node = optionValue();
if (!node) {
throw new Error("`" + optionName + "` did not return a node");
}
}
return node;
}
function getInitialFocusNode() {
var node;
if (getNodeForOption("initialFocus") !== null) {
node = getNodeForOption("initialFocus");
} else if (container.contains(doc.activeElement)) {
node = doc.activeElement;
} else {
node = state.firstTabbableNode || getNodeForOption("fallbackFocus");
}
if (!node) {
throw new Error("Your focus-trap needs to have at least one focusable element");
}
return node;
}
function getReturnFocusNode(previousActiveElement) {
var node = getNodeForOption("setReturnFocus");
return node ? node : previousActiveElement;
}
// This needs to be done on mousedown and touchstart instead of click
// so that it precedes the focus event.
function checkPointerDown(e) {
if (container.contains(e.target)) return;
if (config.clickOutsideDeactivates) {
deactivate({
returnFocus: !tabbable.isFocusable(e.target),
});
return;
}
// This is needed for mobile devices.
// (If we'll only let `click` events through,
// then on mobile they will be blocked anyways if `touchstart` is blocked.)
if (config.allowOutsideClick && config.allowOutsideClick(e)) {
return;
}
e.preventDefault();
}
// In case focus escapes the trap for some strange reason, pull it back in.
function checkFocusIn(e) {
// In Firefox when you Tab out of an iframe the Document is briefly focused.
if (container.contains(e.target) || e.target instanceof Document) {
return;
}
e.stopImmediatePropagation();
tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
}
function checkKey(e) {
if (config.escapeDeactivates !== false && isEscapeEvent(e)) {
e.preventDefault();
deactivate();
return;
}
if (isTabEvent(e)) {
checkTab(e);
return;
}
}
// Hijack Tab events on the first and last focusable nodes of the trap,
// in order to prevent focus from escaping. If it escapes for even a
// moment it can end up scrolling the page and causing confusion so we
// kind of need to capture the action at the keydown phase.
function checkTab(e) {
updateTabbableNodes();
if (e.shiftKey && e.target === state.firstTabbableNode) {
e.preventDefault();
tryFocus(state.lastTabbableNode);
return;
}
if (!e.shiftKey && e.target === state.lastTabbableNode) {
e.preventDefault();
tryFocus(state.firstTabbableNode);
return;
}
}
function checkClick(e) {
if (config.clickOutsideDeactivates) return;
if (container.contains(e.target)) return;
if (config.allowOutsideClick && config.allowOutsideClick(e)) {
return;
}
e.preventDefault();
e.stopImmediatePropagation();
}
function updateTabbableNodes() {
var tabbableNodes = tabbable(container);
state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
state.lastTabbableNode = tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
}
function tryFocus(node) {
if (node === doc.activeElement) return;
if (!node || !node.focus) {
tryFocus(getInitialFocusNode());
return;
}
node.focus();
state.mostRecentlyFocusedNode = node;
if (isSelectableInput(node)) {
node.select();
}
}
}
function isSelectableInput(node) {
return node.tagName && node.tagName.toLowerCase() === "input" && typeof node.select === "function";
}
function isEscapeEvent(e) {
return e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
}
function isTabEvent(e) {
return e.key === "Tab" || e.keyCode === 9;
}
function delay(fn) {
return setTimeout(fn, 0);
}
module.exports = focusTrap;
},
{ tabbable: 5, xtend: 7 },
],
4: [
function (require, module, exports) {
function n(n) {
return (
(n = n || Object.create(null)),
{
on: function (c, e) {
(n[c] || (n[c] = [])).push(e);
},
off: function (c, e) {
n[c] && n[c].splice(n[c].indexOf(e) >>> 0, 1);
},
emit: function (c, e) {
(n[c] || []).slice().map(function (n) {
n(e);
}),
(n["*"] || []).slice().map(function (n) {
n(c, e);
});
},
}
);
}
module.exports = n;
},
{},
],
5: [
function (require, module, exports) {
var candidateSelectors = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'];
var candidateSelector = candidateSelectors.join(",");
var matches = typeof Element === "undefined" ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
function tabbable(el, options) {
options = options || {};
var regularTabbables = [];
var orderedTabbables = [];
var candidates = el.querySelectorAll(candidateSelector);
if (options.includeContainer) {
if (matches.call(el, candidateSelector)) {
candidates = Array.prototype.slice.apply(candidates);
candidates.unshift(el);
}
}
var i, candidate, candidateTabindex;
for (i = 0; i < candidates.length; i++) {
candidate = candidates[i];
if (!isNodeMatchingSelectorTabbable(candidate)) continue;
candidateTabindex = getTabindex(candidate);
if (candidateTabindex === 0) {
regularTabbables.push(candidate);
} else {
orderedTabbables.push({
documentOrder: i,
tabIndex: candidateTabindex,
node: candidate,
});
}
}
var tabbableNodes = orderedTabbables
.sort(sortOrderedTabbables)
.map(function (a) {
return a.node;
})
.concat(regularTabbables);
return tabbableNodes;
}
tabbable.isTabbable = isTabbable;
tabbable.isFocusable = isFocusable;
function isNodeMatchingSelectorTabbable(node) {
if (!isNodeMatchingSelectorFocusable(node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
return false;
}
return true;
}
function isTabbable(node) {
if (!node) throw new Error("No node provided");
if (matches.call(node, candidateSelector) === false) return false;
return isNodeMatchingSelectorTabbable(node);
}
function isNodeMatchingSelectorFocusable(node) {
if (node.disabled || isHiddenInput(node) || isHidden(node)) {
return false;
}
return true;
}
var focusableCandidateSelector = candidateSelectors.concat("iframe").join(",");
function isFocusable(node) {
if (!node) throw new Error("No node provided");
if (matches.call(node, focusableCandidateSelector) === false) return false;
return isNodeMatchingSelectorFocusable(node);
}
function getTabindex(node) {
var tabindexAttr = parseInt(node.getAttribute("tabindex"), 10);
if (!isNaN(tabindexAttr)) return tabindexAttr;
// Browsers do not return `tabIndex` correctly for contentEditable nodes;
// so if they don't have a tabindex attribute specifically set, assume it's 0.
if (isContentEditable(node)) return 0;
return node.tabIndex;
}
function sortOrderedTabbables(a, b) {
return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
}
function isContentEditable(node) {
return node.contentEditable === "true";
}
function isInput(node) {
return node.tagName === "INPUT";
}
function isHiddenInput(node) {
return isInput(node) && node.type === "hidden";
}
function isRadio(node) {
return isInput(node) && node.type === "radio";
}
function isNonTabbableRadio(node) {
return isRadio(node) && !isTabbableRadio(node);
}
function getCheckedRadio(nodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
return nodes[i];
}
}
}
function isTabbableRadio(node) {
if (!node.name) return true;
// This won't account for the edge case where you have radio groups with the same
// in separate forms on the same page.
var radioSet = node.ownerDocument.querySelectorAll('input[type="radio"][name="' + node.name + '"]');
var checked = getCheckedRadio(radioSet);
return !checked || checked === node;
}
function isHidden(node) {
// offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element,
// as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well.
return node.offsetParent === null || getComputedStyle(node).visibility === "hidden";
}
module.exports = tabbable;
},
{},
],
6: [
function (require, module, exports) {
(function (global, factory) {
typeof exports === "object" && typeof module !== "undefined"
? factory(exports, require("focus-trap"), require("mitt"), require("cropperjs"))
: typeof define === "function" && define.amd
? define(["exports", "focus-trap", "mitt", "cropperjs"], factory)
: ((global = global || self), factory((global.uppload = {}), global.createFocusTrap, global.mitt, global.Cropper));
})(this, function (exports, createFocusTrap, mitt, Cropper) {
"use strict";
createFocusTrap = createFocusTrap && Object.prototype.hasOwnProperty.call(createFocusTrap, "default") ? createFocusTrap["default"] : createFocusTrap;
mitt = mitt && Object.prototype.hasOwnProperty.call(mitt, "default") ? mitt["default"] : mitt;
Cropper = Cropper && Object.prototype.hasOwnProperty.call(Cropper, "default") ? Cropper["default"] : Cropper;
class UpploadService {
constructor() {
this.type = "service";
this.name = "";
this.invisible = false;
this.noRecolor = false;
this.icon = "";
this.color = "#333";
this.template = () => "";
this.handlers = () => {};
this.stop = () => {};
this.supports = () => true;
}
}
let i18n = {};
const flattenObject = (ob) => {
const toReturn = {};
for (const i in ob) {
if (!ob.hasOwnProperty(i)) continue;
if (typeof ob[i] == "object") {
const flatObject = flattenObject(ob[i]);
for (const x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue;
toReturn[i + "." + x] = flatObject[x];
}
} else {
toReturn[i] = ob[i];
}
}
return toReturn;
};
/**
*
* @param translations
*/
const setI18N = (translations) => {
i18n = flattenObject(translations);
};
/**
* Get a translation from i18n setting
* @param key - Translation key
* @param params - Single term or array of variables
*/
const translate = (key, params) => {
try {
let term = i18n[key];
if (typeof params === "string") params = [params];
if (params)
params.forEach((param, index) => {
term = term.replace(`$${index + 1}$`, param);
});
if (i18n.helper && typeof i18n.helper === "function") term = i18n.helper(term);
return term;
} catch (error) {
return "";
}
};
/**
* Gets all the DOM elements matching a selector
* @param query - CSS selector string, HTML element, or an array of them
*/
const getElements = (query) => {
if (!query) return [];
const elements = [];
if (typeof query === "string") {
elements.push(...Array.prototype.slice.call(document.querySelectorAll(query)));
} else if (Array.isArray(query)) {
query.forEach((item) => {
if (typeof item === "string") {
elements.push(...Array.prototype.slice.call(document.querySelectorAll(item)));
} else {
elements.push(item);
}
});
} else {
elements.push(query);
}
return elements;
};
const listening = [];
/**
* Safely adds an event listener, preventing duplicates
* @param element - HTML element to add event listener to
* @param type - Type of event listener to add
* @param fn - Callback function to call on event
*/
const safeListen = (element, type, fn) => {
const hasListener = !!listening.find((a) => a.element === element && a.type === type);
if (hasListener) return;
element.addEventListener(type, fn);
listening.push({ element, type });
};
const safeRequestAnimationFrame = (callback) => {
if (window.requestAnimationFrame) return window.requestAnimationFrame(callback);
setTimeout(() => {
callback(0);
}, 100);
};
/**
*
* @param image - An HTML ${translate("services.default.heading")}
`;
}
}
class UploadingService extends UpploadService {
constructor() {
super(...arguments);
this.name = "uploading";
this.invisible = true;
this.template = () => `
${translate("uploading")}
`;
}
}
/**
* Uppload image uploading widget
*/
class Uppload {
/**
* Create a new Uppload instance
* @param settings - Uppload instance settings
*/
constructor(settings) {
this.services = [new DefaultService(), new UploadingService()];
this.effects = [];
this.isOpen = false;
this.activeService = "default";
this.activeEffect = "";
this.file = { blob: new Blob() };
this.lang = {};
this.emitter = mitt();
this.uploadProgress = 0;
this.inline = false;
this.transitionDuration = 300;
this.settings = {};
this.updateSettings(settings || {});
const div = document.createElement("div");
this.renderContainer();
div.classList.add("uppload-container");
const body = document.body;
if (body) {
body.appendChild(div);
}
this.container = div;
this.focusTrap = createFocusTrap(this.container, {
initialFocus: () => this.container.querySelector("button"),
});
requestAnimationFrame(() => this.update());
/**
* Loader during file processing in effects
* https://github.com/elninotech/uppload/issues/111
*/
this.emitter.on("processing", () => {
const loader = this.container.querySelector(".processing-loader");
if (loader) loader.classList.add("visible");
});
this.emitter.on("process", () => {
const loader = this.container.querySelector(".processing-loader");
if (loader) loader.classList.remove("visible");
});
}
/**
* Update widget settings such as i18n
* @param settings - Uppload settings object
*/
updateSettings(settings) {
this.settings = Object.assign(Object.assign({}, this.settings), settings);
this.emitter.emit("settingsUpdated", settings);
if (settings.lang) setI18N(settings.lang);
if (settings.defaultService) this.activeService = settings.defaultService;
if (settings.lang) this.lang = settings.lang;
if (settings.transitionDuration) this.transitionDuration = settings.transitionDuration;
if (settings.uploader) this.uploader = settings.uploader;
this.inline = !!settings.inline;
this.update();
}
ready() {
if (this.settings.value) this.bind(this.settings.value);
this.renderContainer();
this.emitter.emit("ready");
}
/**
* Bind the image URL value to DOM elements
* @param value - URL of the image
*/
bind(value) {
if (this.settings.bind) {
const elements = getElements(this.settings.bind);
elements.forEach((element) => {
if (element.nodeName === "IMG") {
element.setAttribute("src", value);
} else {
element.setAttribute("value", value);
}
});
this.emitter.emit("bind");
}
}
/**
* Use an uploader, service, or effect in your package
* @param plugin - A single uploader, service, or effect or an array of them
*/
use(plugin) {
if (Array.isArray(plugin)) {
plugin.forEach((item) => this.install(item));
} else {
this.install(plugin);
}
}
/**
* Remove a plugin (effect or serve) from this instance
* @param slug - Slug of the plugin to be removed
*/
remove(slug) {
this.services = this.services.filter((service) => service.name !== slug);
this.effects = this.effects.filter((service) => service.name !== slug);
this.update();
this.emitter.emit("remove", slug);
}
/**
* Update the plugins for this instance
* @param pluginUpdateFunction - Function to update this instance's plugins
*/
updatePlugins(pluginUpdateFunction) {
const plugins = pluginUpdateFunction(this.services);
const services = plugins.filter((plugin) => plugin.type === "service");
const hasDefaultService = !!services.filter((service) => service.name === "default").length;
const hasUploadingService = !!services.filter((service) => service.name === "uploading").length;
if (!hasUploadingService) services.unshift(new UploadingService());
if (!hasDefaultService) services.unshift(new DefaultService());
this.services = services;
this.effects = plugins.filter((plugin) => plugin.type === "effect");
this.update();
}
/**
* Install a new uploader, service, or effect to this instance
* @param plugin - A single uploader, service, or effect
*/
install(plugin) {
// Check if the browser supports this plugin
if (!plugin.supports()) return;
if (plugin.type === "service") {
// Install this service if it isn't already installed
const has = !!this.services.filter((service) => service.name === plugin.name).length;
if (!has) this.services.push(plugin);
this.ready();
} else if (plugin.type === "effect") {
const has = !!this.effects.filter((effect) => effect.name === plugin.name).length;
if (!has) this.effects.push(plugin);
this.ready();
}
}
/**
* Returns whether the modal is currently open
*/
modalOpen() {
return this.isOpen;
}
/**
* Open the Uppload widget
*/
open() {
if (this.isOpen) return;
this.isOpen = true;
this.file = { blob: new Blob() };
this.activeService = "default";
this.activeEffect = "";
const serviceRadio = this.container.querySelector(`input[type=radio][value='${this.activeService}']`);
if (serviceRadio) serviceRadio.setAttribute("checked", "checked");
this.container.style.transition = `${this.transitionDuration}ms`;
this.container.style.opacity = "0";
this.update();
let firstService = this.settings.defaultService;
if (this.services.length === 3) this.navigate(this.services[2].name);
if (firstService) this.navigate(firstService);
safeListen(document.body, "keyup", (e) => {
if (e.key === "Escape" && this.open) this.close();
});
setTimeout(() => {
this.container.style.opacity = "1";
}, 1);
this.emitter.emit("open");
}
/**
* Close the Uppload widget
*/
close() {
if (!this.isOpen) return;
this.stopCurrentService();
this.isOpen = false;
this.emitter.emit("close");
this.container.style.opacity = "0";
setTimeout(() => this.update(), this.transitionDuration);
}
/**
* Toggles the Uppload widget
*/
toggle() {
if (this.modalOpen()) this.close();
else this.open();
}
/**
* Re-render the widget
*/
update() {
if (!this.container) return;
this.hideHelp();
if (this.settings.customClass) this.container.classList.add(this.settings.customClass);
if (this.inline) this.container.classList.add("uppload-inline");
const content = this.container.querySelector(".uppload-active-container");
if (content) content.innerHTML = this.render();
const aside = this.container.querySelector("aside");
if (aside && this.activeService !== "default" && !this.activeEffect) aside.style.display = "block";
const footerEffectsNav = this.container.querySelector(".effects-nav");
if (aside && footerEffectsNav && this.activeEffect) {
footerEffectsNav.style.display = "";
aside.style.display = "none";
} else if (aside && footerEffectsNav && this.activeService === "default") {
aside.style.display = "none";
footerEffectsNav.style.display = "none";
} else if (aside && footerEffectsNav) {
aside.style.display = "";
footerEffectsNav.style.display = "none";
}
const effectsContainer = this.container.querySelector(".uppload-effect");
if (effectsContainer) effectsContainer.style.display = this.activeEffect ? "" : "none";
window.requestAnimationFrame(() => this.handlers());
if (!this.isOpen) {
this.container.classList.remove("visible");
this.focusTrap.deactivate();
} else {
this.container.classList.add("visible");
this.focusTrap.activate();
}
const effectsNav = this.container.querySelector("footer.effects-nav .effects-tabs");
if (effectsNav) {
const parent = effectsNav.parentElement;
if (parent) {
let totalButtonsWidth = 0;
const buttons = parent.querySelectorAll(".effects-continue");
buttons.forEach((button) => {
const buttonSize = button.getBoundingClientRect();
totalButtonsWidth += buttonSize.width;
});
const size = parent.getBoundingClientRect();
effectsNav.style.width = `${size.width - totalButtonsWidth}px`;
}
}
const sideNavbar = this.container.querySelector("aside");
if (sideNavbar && this.services.length === 3) sideNavbar.classList.add("uppload-services--single");
const help = this.container.querySelector(".uppload-help");
if (help) {
help.classList.remove("visible");
safeListen(help, "click", () => this.hideHelp());
}
}
/**
* Returns the HTML template for the services navbar
* @param sidebar - Whether this is an input radio (for sidebar) or buttons (for home)
*/
getNavbar(sidebar = false) {
return `<${sidebar ? "nav" : "div"} class="uppload-services">
${this.services
.filter((service) => !service.invisible)
.map(
(service) => `
${sidebar ? `
` : ""}
<${sidebar ? `label for="uppload-service-radio-${service.name}"` : "button"} data-uppload-service="${service.name}">
${service.icon.indexOf("http") === 0 ? `
` : colorSVG(service.icon, service)}
${this.lang.services && this.lang.services[service.name] && this.lang.services[service.name].title ? this.lang.services[service.name].title : service.name}
${translate("cancel")}
${translate("upload")}
`;
}
/**
* Renders the main container for the widget
*/
renderContainer() {
if (this.container)
this.container.innerHTML = `
${this.error ? `${this.error}
` : ""}
${this.getEffectsNavbar()}
${translate("help.loading")}
${translate("help.close")} ×
×
`;
}
/**
* Render the content inside the widget container
*/
render() {
return `
${this.error ? `${this.error}
` : ""}
${
this.activeEffect
? `
${this.activeEffect && this.file ? this.renderActiveEffect(this.file) : ""}
`
: `
${this.activeEffect && this.file ? "" : this.renderActiveService()}
${this.activeService === "default" ? this.getNavbar() : ""}
`
}`;
}
/**
* Render the currently active service
*/
renderActiveService() {
const activeServices = this.services.filter((service) => service.name === this.activeService);
if (activeServices.length) {
const activeService = activeServices[0];
requestAnimationFrame(() => {
if (typeof activeService.handlers === "function")
activeService.handlers({
next: this.next.bind(this),
upload: this.upload.bind(this),
uploadMultiple: this.uploadMultiple.bind(this),
handle: this.handle.bind(this),
showHelp: this.showHelp.bind(this),
uppload: this,
translate,
});
});
return `${typeof activeService.template === "function" ? activeService.template({ translate, uppload: this }) : ""}`;
}
}
/**
* Render the currently active effect
*/
renderActiveEffect(file) {
const activeEffects = this.effects.filter((effect) => effect.name === this.activeEffect);
if (activeEffects.length) {
const activeEffect = activeEffects[0];
requestAnimationFrame(() => {
if (typeof activeEffect.handlers === "function")
activeEffect.handlers({
next: this.next.bind(this),
upload: this.upload.bind(this),
uploadMultiple: this.uploadMultiple.bind(this),
handle: this.handle.bind(this),
showHelp: this.showHelp.bind(this),
uppload: this,
translate,
});
});
return `
${typeof activeEffect.template === "function" ? activeEffect.template({ file, translate }) : ""}
`;
}
}
/**
* Uploads multiple files to the server
* @param file
* @returns JSON response from server
*/
uploadMultiple(file) {
this.emitter.emit("before-upload");
return new Promise((resolve) => {
this.navigate("uploading");
if (this.uploader && typeof this.uploader === "function") {
this.uploader(file, this.updateProgress.bind(this))
.then((response) => {
this.navigate("default");
resolve(response);
this.emitter.emit("upload", response);
this.close();
})
.catch((error) => this.handle(error));
} else {
this.handle(new Error("no-uploader"));
}
});
}
hideHelp() {
const help = this.container.querySelector(".uppload-help");
const helpLoading = this.container.querySelector(".uppload-help-loading");
const sideNavbar = this.container.querySelector("aside");
const section = this.container.querySelector("section");
if (helpLoading) helpLoading.classList.remove("visible");
if (help) help.classList.remove("visible");
if (sideNavbar) sideNavbar.style.display = "";
if (section) section.style.display = "";
this.emitter.emit("hide-help");
}
/**
* Show the help article for this plugin in a frame
* @param url - URL of help webpage
*/
showHelp(url) {
this.emitter.emit("help", url);
const aside = this.container.querySelector("aside");
if (aside) aside.style.display = "none";
const section = this.container.querySelector("section");
if (section) section.style.display = "none";
const helpLoading = this.container.querySelector(".uppload-help-loading");
if (helpLoading) helpLoading.classList.add("visible");
const help = this.container.querySelector(".uppload-help");
if (help) {
const iframe = help.querySelector("iframe");
if (iframe) {
iframe.setAttribute("src", `https://uppload.js.org/help${url}`);
const listener = () => {
help.classList.add("visible");
if (helpLoading) helpLoading.classList.remove("visible");
};
safeListen(iframe, "load", listener);
safeListen(iframe, "error", () => {
this.hideHelp();
});
}
}
}
/**
* Updates the file and goes to the active effect
* @param file - The currently active file Blob
*/
next(file) {
this.emitter.emit("next", file);
this.file = file;
if (this.activeEffect);
else {
// Find the first effect and navigate to that
// Unless the file type is not an image
if (this.effects.length && file.type && file.type.indexOf("image/") === 0) {
this.activeEffect = this.effects[0].name;
this.update();
} else {
return this.upload(safeUpploadFileToFile(file));
}
}
// Set active state to current effect
const activeRadio = this.container.querySelector(`input[name='uppload-effect-radio'][value='${this.activeEffect}']`);
if (activeRadio) activeRadio.setAttribute("checked", "checked");
}
compress(file) {
if (this.settings.compressionFromMimes && this.settings.compressionFromMimes.indexOf(file.type) === -1) return new Promise((resolve) => resolve(file));
if (typeof this.settings.compressor === "function") return this.settings.compressor(file);
return compressImage(file, this.settings);
}
/**
* Upload a file to the server
* @param file - A Blob object containing the file to upload
* @returns The file URL
*/
upload(file) {
this.emitter.emit("before-upload", file);
return new Promise((resolve, reject) => {
this.navigate("uploading");
let upploadFile = blobToUpploadFile(file);
try {
if (typeof file.name === "string") upploadFile = blobToUpploadFile(file, file.name, file.type, new Date(file.lastModified));
} catch (error) {}
if (this.uploader && typeof this.uploader === "function") {
this.compress(file)
.then((file) => {
if (this.settings.compression) this.emitter.emit("compress", file);
return file;
})
.then((blob) => {
upploadFile.blob = blob;
return safeUpploadFileToFile(upploadFile);
})
.then((file) => this.uploader(file, this.updateProgress.bind(this)))
.then((url) => {
this.bind(url);
this.navigate("default");
resolve(url);
this.emitter.emit("upload", url);
this.close();
})
.catch((error) => this.handle(error));
} else {
reject("no-uploader");
}
});
}
/**
* Gracefully display an error message
* @param error - Error to display
*/
handle(error) {
this.error = translate(error.message) || error.message;
this.emitter.emit("error", this.error);
this.update();
if (this.activeService === "uploading") this.navigate("default");
setTimeout(() => {
this.error = undefined;
this.update();
}, 4000);
}
/**
* Adds event handlers for the widget
*/
handlers() {
const openFunction = () => this.open();
const closeFunction = () => this.close();
/**
* Clicking on each sidebar link should open its service
*/
const defaultServiceLinks = this.container.querySelectorAll(".uppload-service--default .uppload-service-name button");
defaultServiceLinks.forEach((link) => {
const linkFunction = (e) => {
const service = link.getAttribute("data-uppload-service");
if (service) {
this.navigate(service);
const serviceDiv = this.container.querySelector(`[data-uppload-service="${service}"]`);
if (serviceDiv && serviceDiv.parentElement) {
let top = 0;
let left = 0;
const serviceDivRect = serviceDiv.getBoundingClientRect();
const serviceNavRect = serviceDiv.parentElement.getBoundingClientRect();
top = serviceDivRect.top - serviceNavRect.top;
left = serviceDivRect.left - serviceNavRect.left;
const aside = serviceDiv.parentElement.parentElement;
try {
// Edge doesn't support scrollTo and throws an error
if (aside) aside.scrollTo(left, top);
} catch (error) {}
}
}
const serviceRadio = this.container.querySelector(`input[type=radio][value='${service}']`);
if (serviceRadio) serviceRadio.setAttribute("checked", "checked");
e.preventDefault();
return false;
};
safeListen(link, "click", linkFunction);
});
/**
* Clicking on each sidebar link should open its service
*/
const inputRadios = this.container.querySelectorAll(".uppload-services input[type='radio']");
inputRadios.forEach((radio) => {
const radioFunction = (e) => {
const inputRadio = this.container.querySelector("[name='uppload-radio']:checked");
if (!inputRadio) return;
const service = inputRadio.value;
this.navigate(service);
};
safeListen(radio, "change", radioFunction);
});
/**
* Clicking on each sidebar link should open its service
*/
const effectInputRadios = this.container.querySelectorAll(".effects-nav input[type='radio']");
effectInputRadios.forEach((radio) => {
const radioFunction = (e) => {
const inputRadio = this.container.querySelector("[name='uppload-effect-radio']:checked");
if (!inputRadio) return;
const effect = inputRadio.value;
this.activeEffect = effect;
this.update();
};
safeListen(radio, "change", radioFunction);
});
/**
* Clicking on the background should close the modal
*/
const background = this.container.querySelector(".uppload-modal-bg");
const closeButton = this.container.querySelector(".uppload-close");
if (background && !this.settings.disableModalClickClose) {
safeListen(background, "click", closeFunction);
} else if (closeButton) {
safeListen(closeButton, "click", closeFunction);
}
/**
* All elements in `call` should open the modal on click
*/
if (this.settings.call) {
const elements = getElements(this.settings.call);
elements.forEach((element) => {
safeListen(element, "click", openFunction);
});
}
/**
* Clicking on the cancel button restarts the process
*/
const cancelButton = this.container.querySelector(".effects-continue--cancel");
if (cancelButton)
safeListen(cancelButton, "click", () => {
this.file = { blob: new Blob() };
this.activeService = "default";
this.activeEffect = "";
this.update();
});
/**
* Clicking on the cancel button restarts the process
*/
const uploadButton = this.container.querySelector(".effects-continue--upload");
if (uploadButton)
safeListen(uploadButton, "click", () => {
if (!this.file) return;
this.activeService = "";
this.activeEffect = "";
this.upload(safeUpploadFileToFile(this.file));
});
}
/**
* Stops any actions being done by the currently active service
* For example, if your webcame is being accessed, kill that process
*/
stopCurrentService() {
const currentService = this.services.filter((item) => item.name === this.activeService);
if (currentService.length) {
const service = currentService[0];
service.stop();
}
}
/**
* Navigate to an Uppload service page
* @param service - Slug name of service (e.g., instagram)
*/
navigate(service) {
if (!this.services.filter((item) => item.name === service).length) throw new Error("invalid-service");
this.stopCurrentService();
this.activeService = service;
this.update();
const focusable = this.container.querySelector(".uppload-active-container input, .uppload-active-container button");
if (focusable) focusable.focus();
}
/**
* Add an event listener
* @param type - Type of event listener (e.g., open)
* @param handler - Event handler function
*/
on(type, handler) {
return this.emitter.on(type, handler);
}
/**
* Remove an event listener
* @param type - Type of event listener (e.g., open)
* @param handler - Event handler function
*/
off(type, handler) {
return this.emitter.off(type, handler);
}
/**
* Updates the upload progress
* @param progressPercent Current progress in percent
*/
updateProgress(progressPercent) {
this.uploadProgress = progressPercent;
const progressText = this.container.querySelector(".uppload-loader-text .progress");
if (progressText) progressText.innerHTML = `${parseInt(progressPercent.toString())}%`;
this.emitter.emit("progress", this.updateProgress);
}
}
class UpploadEffect {
constructor() {
this.type = "effect";
this.name = "";
this.invisible = false;
this.noRecolor = false;
this.color = "#000";
this.icon = "";
this.template = () => "";
this.handlers = () => {};
this.supports = () => true;
}
}
/**
* Make an HTTP request with the Fetch API and cache results
* @param input API endpoint
* @param settings HTTP Fetch configuration
*/
function cachedFetch(input, settings) {
const storage = sessionStorage;
return new Promise((resolve, reject) => {
const key = `uppload_cache_${JSON.stringify(input)}`;
const maxTTL = new Date();
maxTTL.setDate(maxTTL.getDate() + 1);
const cachedResult = storage.getItem(key);
if (cachedResult) {
const cachedResultData = JSON.parse(cachedResult);
if (cachedResultData.ttl && new Date(cachedResultData.ttl).getTime() > new Date().getTime()) return resolve(cachedResultData.result);
}
window
.fetch(input, settings)
.then((response) => {
if (!response.ok) throw new Error("errors.response_not_ok");
return response.json();
})
.then((result) => {
storage.setItem(
key,
JSON.stringify({
ttl: maxTTL,
updatedAt: new Date(),
result,
})
);
resolve(result);
})
.catch((error) => reject(error));
});
}
/**
* Get a file Blob from an image URL
* @param url - URL of an image
*/
const imageUrlToBlob = (url) => {
return new Promise((resolve, reject) => {
window
.fetch(`https://images.weserv.nl/?url=${encodeURIComponent(url)}`)
.then((response) => {
if (!response.ok) throw new Error("errors.response_not_ok");
return response.blob();
})
.then((blob) => resolve(blob))
.catch((error) => reject(error));
});
};
const de = {
upload: "Hochladen",
cancel: "Stornieren",
close: "Schließen",
uploading: "Hochladen ...",
uploaded: "Hochgeladen",
fetching: "Bild abrufen von $1$ ...",
poweredBy: "Ermöglicht durch $1$",
needHelp: "Benötigen Sie Hilfe?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Beim Abrufen dieser Datei ist ein Fehler aufgetreten",
unable_to_search: "Bei der Suche ist ein Fehler aufgetreten",
invalid_service_url: "Dies ist keine $1$ -URL",
invalid_url: "Diese URL ist ungültig",
upload_aborted: "Dein Upload wurde abgebrochen",
upload_error: "Beim Hochladen dieser Datei ist ein Fehler aufgetreten",
file_type_not_allowed: "Dieser Dateityp wird nicht unterstützt",
file_too_large: "Die Datei muss kleiner als $1$ sein",
},
help: {
loading: "Ladehilfe...",
close: "Hilfe schließen",
},
services: {
default: {
heading: "Wählen Sie ein Bild aus",
},
local: {
title: "Wählen Sie eine Datei",
button: "Wählen Sie eine Datei aus",
or: "von",
drop: "Ziehen Sie eine Datei hierher, um sie hochzuladen",
},
camera: {
title: "Kamera",
button: "Webcam Foto",
switch: "Kamera wechseln",
waiting: "Warten auf Kameraerlaubnis ...",
unableToRead:
"Wir können das Video nicht von Ihrer Kamera lesen. Dies kann daran liegen, dass Sie nicht die erforderliche Berechtigung erteilt haben oder dass Ihr Gerät den Kamerazugriff nicht unterstützt.",
},
microlink: {
button: "Import von $1$",
label: "$1$ $2$ URL",
placeholder: "Geben Sie eine URL von 1 bis 2 US-Dollar ein",
type: "Post",
},
url: {
title: "Direkte URL",
label: "Bild-URL",
placeholder: "Geben Sie eine Bild-URL ein",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "ein foto",
},
ninegag: {
title: "9GAG",
type: "ein foto",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "Foto-Tweet",
},
pinterest: {
title: "Pinterest",
type: "Stift",
},
flipboard: {
title: "Flipboard",
type: "artikel",
},
fotki: {
title: "Fotos",
type: "ein foto",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "Wir lieben es",
},
screenshot: {
title: "Bildschirmfoto",
button: "Screenshot machen",
label: "URL der Webseite",
placeholder: "Geben Sie eine URL ein",
loading: "Machen Sie einen Screenshot ...",
},
search: {
button: "Suchen Sie nach $1$",
label: "Suchen Sie nach einem Bild",
placeholder: "Suche nach etwas",
imagesPoweredBy: "Bilder möglich gemacht von $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Aufspritzen",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Beispiel",
},
filters: {
title: "Filter",
},
crop: {
title: "Zuschneiden",
aspectRatios: {
free: "Frei",
square: "voll",
},
},
rotate: {
title: "Wende dich",
},
flip: {
title: "Dreh dich um",
buttons: {
horizontal: "Horizontal",
vertical: "Vertikal",
},
},
sharpen: {
title: "Schärfen",
},
blur: {
title: "Unschärfe",
},
brightness: {
title: "Helligkeit",
},
contrast: {
title: "Kontrast",
},
grayscale: {
title: "Graustufen",
},
"hue-rotate": {
title: "Farbton drehen",
},
invert: {
title: "Umdrehen",
},
saturate: {
title: "Sättigen",
},
sepia: {
title: "Sepia",
},
},
};
const en = {
upload: "Upload",
cancel: "Cancel",
close: "Close",
uploading: "Uploading...",
uploaded: "Uploaded",
fetching: "Getting your image from $1$...",
poweredBy: "Powered by $1$",
needHelp: "Need help?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "We got an error fetching this file",
unable_to_search: "We got an error searching",
invalid_service_url: "This is not $A$ $1$ URL",
invalid_url: "This URL seems to be invalid",
upload_aborted: "Your upload was cancelled",
upload_error: "We got an error uploading this file",
file_type_not_allowed: "This file type is not allowed",
file_too_large: "Your file should be smaller than $1$",
},
help: {
loading: "Loading help...",
close: "Close help",
},
services: {
default: {
heading: "Select an image",
},
local: {
title: "Choose file",
button: "Select a file",
or: "or",
drop: "Drop files here",
},
camera: {
title: "Camera",
button: "Click photo",
switch: "Switch camera",
waiting: "Waiting for permission...",
unableToRead: "We're not able to read your camera's video. This may be because you didn't grant the required permission, or because your device doesn't support camera access.",
},
microlink: {
button: "Import from $1$",
label: "$1$ $2$ URL",
placeholder: "Enter $A$ $1$ $2$ URL",
type: "post",
},
url: {
title: "Direct URL",
label: "Image URL",
placeholder: "Enter an image URL",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "photo",
},
ninegag: {
title: "9GAG",
type: "photo",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "image tweet",
},
pinterest: {
title: "Pinterest",
type: "pin",
},
flipboard: {
title: "Flipboard",
type: "article",
},
fotki: {
title: "Fotki",
type: "photo",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Screenshot",
button: "Take screenshot",
label: "Webpage URL",
placeholder: "Enter a webpage URL",
loading: "Taking a screenshot...",
},
search: {
button: "Search on $1$",
label: "Find an image",
placeholder: "Search for something",
imagesPoweredBy: "Images powered by $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Preview",
},
filters: {
title: "Filters",
},
crop: {
title: "Crop",
aspectRatios: {
free: "Free",
square: "Square",
},
},
rotate: {
title: "Rotate",
},
flip: {
title: "Flip",
buttons: {
horizontal: "Horizontal",
vertical: "Vertical",
},
},
sharpen: {
title: "Sharpen",
},
blur: {
title: "Blur",
},
brightness: {
title: "Brightness",
},
contrast: {
title: "Contrast",
},
grayscale: {
title: "Grayscale",
},
"hue-rotate": {
title: "Hue rotate",
},
invert: {
title: "Invert",
},
saturate: {
title: "Saturate",
},
sepia: {
title: "Sepia",
},
},
/**
* Helpers can transform a string before returning it
* You can define a language-specific helper here
*/
helper: (text) => {
// Replace all instances of $A$ with "a" or "an"
const AAN = "$A$";
while (text.indexOf(AAN) !== -1) {
const index = text.indexOf(AAN);
if (text.length > index + 3) {
if (["a", "e", "i", "o", "u"].indexOf(text[index + 4].toLowerCase()) !== -1) {
text = text.replace(AAN, "an");
} else {
text = text.replace(AAN, "a");
}
}
}
return text;
},
};
const es = {
upload: "Subir",
cancel: "Cancelar",
close: "Cerrar",
uploading: "Subiendo...",
uploaded: "Subido",
fetching: "Obteniendo imagen desde $1$ ...",
poweredBy: "Hecho posible por $1$",
needHelp: "¿Necesitas ayuda?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Se produjo un error al obtener este archivo",
unable_to_search: "Se produjo un error al buscar",
invalid_service_url: "Esta no es una URL de $1$",
invalid_url: "Esta URL no es válida.",
upload_aborted: "Tu carga ha sido cancelada",
upload_error: "Se produjo un error al subir este archivo",
file_type_not_allowed: "Este tipo de archivo no está permitido",
file_too_large: "El archivo debe ser inferior a $1$",
},
help: {
loading: "Cargando ayuda...",
close: "Cerrar ayuda",
},
services: {
default: {
heading: "Selecciona una imagen",
},
local: {
title: "Elige un archivo",
button: "Selecciona un archivo",
or: "o",
drop: "Arrastra un archivo aquí para subir",
},
camera: {
title: "Cámara",
button: "Foto de la webcam",
switch: "Cambiar de cámara",
waiting: "Esperando el permiso de la cámara...",
unableToRead: "No podemos leer el video de su cámara. Esto puede deberse a que no ha otorgado el permiso requerido o porque su dispositivo no admite el acceso a la cámara.",
},
microlink: {
button: "Importar desde $1$",
label: "$1$ $2$ URL",
placeholder: "Ingrese una URL de $1$ $2$",
type: "enviar",
},
url: {
title: "URL directa",
label: "URL de la imagen",
placeholder: "Ingrese la URL de la imagen",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "una foto",
},
ninegag: {
title: "9GAG",
type: "una foto",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "imagen de twitter",
},
pinterest: {
title: "Pinterest",
type: "pin",
},
flipboard: {
title: "Flipboard",
type: "artículo",
},
fotki: {
title: "fotos",
type: "una foto",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Captura de pantalla",
button: "Tomar captura de pantalla",
label: "URL de la página web",
placeholder: "Ingresa una URL",
loading: "Tomando una captura de pantalla ...",
},
search: {
button: "Buscar en $1$",
label: "Busca una imagen",
placeholder: "Buscar algo",
imagesPoweredBy: "Imágenes posibles por $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Vista Previa",
},
filters: {
title: "Filtros",
},
crop: {
title: "Recortar",
aspectRatios: {
free: "Libre",
square: "Cuadrado",
},
},
rotate: {
title: "Rotar",
},
flip: {
title: "Dar vuelta",
buttons: {
horizontal: "Horizontal",
vertical: "Vertical",
},
},
sharpen: {
title: "Agudizar",
},
blur: {
title: "Desenfocar",
},
brightness: {
title: "Brillo",
},
contrast: {
title: "Contraste",
},
grayscale: {
title: "Escala de grises",
},
"hue-rotate": {
title: "Rotar tono",
},
invert: {
title: "Invertir",
},
saturate: {
title: "Saturar",
},
sepia: {
title: "Sepia",
},
},
};
const fr = {
upload: "Télécharger",
cancel: "Annuler",
close: "Fermer",
uploading: "Télécharger...",
uploaded: "Téléchargé",
fetching: "Obtenir une image à partir de $1$ ...",
poweredBy: "Rendu possible par $1$",
needHelp: "Besoin d'aide?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Une erreur s'est produite lors de la récupération de ce fichier.",
unable_to_search: "Une erreur est survenue lors de la recherche",
invalid_service_url: "Ce n'est pas une URL $1$",
invalid_url: "Cette URL est invalide",
upload_aborted: "Votre téléchargement a été annulé",
upload_error: "Une erreur s'est produite lors du téléchargement de ce fichier.",
file_type_not_allowed: "Ce type de fichier n'est pas supporté",
file_too_large: "Le fichier doit être inférieur à $1$",
},
help: {
loading: "Aide au chargement...",
close: "Fermer l'aide",
},
services: {
default: {
heading: "Sélectionnez une image",
},
local: {
title: "Choisissez un fichier",
button: "Sélectionnez un fichier",
or: "de",
drop: "Faites glisser un fichier ici pour le télécharger",
},
camera: {
title: "Caméra",
button: "Photo webcam",
switch: "Changer de caméra",
waiting: "En attente de la permission de la caméra ...",
unableToRead:
"Nous ne pouvons pas lire la vidéo à partir de votre caméra. Cela peut être dû au fait que vous n'avez pas accordé l'autorisation requise ou que votre appareil ne prend pas en charge l'accès à la caméra.",
},
microlink: {
button: "Importation à partir de $1$",
label: "$1$ $2$ URL",
placeholder: "Entrez une URL $1$ $2$",
type: "poster",
},
url: {
title: "Directe URL",
label: "URL de l'image",
placeholder: "Entrez une URL d'image",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "une photo",
},
ninegag: {
title: "9GAG",
type: "une photo",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Gazouillement",
type: "photo tweet",
},
pinterest: {
title: "Pinterest",
type: "épingle",
},
flipboard: {
title: "Flipboard",
type: "article",
},
fotki: {
title: "Photos",
type: "une photo",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "Nous avons le coeur",
},
screenshot: {
title: "Capture d'écran",
button: "Prendre une capture d'écran",
label: "URL de la page Web",
placeholder: "Entrez une URL",
loading: "Prenez une capture d'écran ...",
},
search: {
button: "Recherche de $1$",
label: "Rechercher une image",
placeholder: "Rechercher quelque chose",
imagesPoweredBy: "Images rendues possibles par $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Exemple",
},
filters: {
title: "Les filtres",
},
crop: {
title: "Récolte",
aspectRatios: {
free: "Libre",
square: "Plein",
},
},
rotate: {
title: "Tournant",
},
flip: {
title: "Faire demi-tour",
buttons: {
horizontal: "Horizontal",
vertical: "Vertical",
},
},
sharpen: {
title: "Netteté",
},
blur: {
title: "Flou",
},
brightness: {
title: "La luminosité",
},
contrast: {
title: "Contraste",
},
grayscale: {
title: "Niveaux de gris",
},
"hue-rotate": {
title: "Faire pivoter la teinte",
},
invert: {
title: "Retourner",
},
saturate: {
title: "Saturer",
},
sepia: {
title: "Sépia",
},
},
};
const hi = {
upload: "अपलोड",
cancel: "रद्द करना",
close: "बंद करे",
uploading: "अपलोड हो रहा है...",
uploaded: "अपलोड हो गया",
fetching: "हम आपकी तस्वीर $1$ से ला रहे हैं...",
poweredBy: "$1$ द्वारा संचालित",
needHelp: "मदद चाहिए?",
units: {
px: "पिक्सेल",
"%": "प्रतिशत",
deg: "डिग्री",
},
errors: {
response_not_ok: "आपकी फ़ाइल लाने में एक त्रुटि हुई",
unable_to_search: "ढूंढे में एक त्रुटि हुई",
invalid_service_url: "यह एक $1$ यूआरएल नहीं है",
invalid_url: "यह यूआरएल गलत है",
upload_aborted: "आपका अपलोड रद्द हो गया है",
upload_error: "आपका अपलोड कारसे टूट एक त्रुटि हुई",
file_type_not_allowed: "यह फाइल टाइप अनुमति नहीं हैं",
file_too_large: "आपकी फाइल $1$ से छोटी होनी चाहिए",
},
help: {
loading: "मदद लोड हो रही है...",
close: "मदद बंद करें",
},
services: {
default: {
heading: "एक तस्वीर चुनें",
},
local: {
title: "एक फाइल चुनें",
button: "फाइल चुनें",
or: "या",
drop: "यहां फाइल छोड़ें",
},
camera: {
title: "कैमरा",
button: "तस्वीर खीचें",
switch: "कैमरा बदलें",
waiting: "अनुमति की प्रतीक्षा की जा रही है...",
unableToRead: "हम आपका वीडियो नहीं पढ़ पा रहे हैं I यह इसीलिए हो सकता है क्यूंकि आपने अनुमति नहीं दी, या क्योंकि आपके युक्ति में कैमरा नहीं है I",
},
microlink: {
button: "$1$ से आयात",
label: "$1$ $2$ यूआरएल",
placeholder: "एक $1$ $2$ यूआरएल दर्ज करें",
type: "पद",
},
url: {
title: "यूआरएल",
label: "छवि यूआरएल",
placeholder: "एक छवि यूआरएल दर्ज करें",
},
instagram: {
title: "इंस्टाग्राम",
},
facebook: {
title: "फेसबुक",
},
flickr: {
title: "फ़्लिकर",
type: "तस्वीर",
},
ninegag: {
title: "नाइन गैग",
type: "तस्वीर",
},
deviantart: {
title: "देवीअनत-आर्ट",
},
artstation: {
title: "आर्ट-स्टेशन",
},
twitter: {
title: "ट्विटर",
type: "तस्वीर ट्वीट",
},
pinterest: {
title: "पिनटेरेस्ट",
type: "पिन",
},
flipboard: {
title: "फ्लिपबोर्ड",
type: "लेख",
},
fotki: {
title: "फोटकी",
type: "तस्वीर",
},
linkedin: {
title: "लिंक्ड-इन",
},
reddit: {
title: "रेड्डिट",
},
tumblr: {
title: "तुमब्लर",
},
weheartit: {
title: "वी हार्ट इट",
},
screenshot: {
title: "स्क्रीनशॉट",
button: "स्क्रीनशॉट लें",
label: "वेब पृष्ठ यूआरएल",
placeholder: "एक वेब पृष्ठ यूआरएल दर्ज करें",
loading: "स्क्रीनशॉट लिया जा रहा है...",
},
search: {
button: "$1$ पर ढूंढें",
label: "तस्वीर ढूंढें",
placeholder: "कुछ ढूंढें",
imagesPoweredBy: "तस्वीरें $1$ द्वारा संचालित",
},
giphy: {
title: "गिफी",
},
unsplash: {
title: "उनस्प्लैश",
},
pixabay: {
title: "पिक्साबे",
},
pexels: {
title: "पिक्सेल्स",
},
},
effects: {
preview: {
title: "पूर्वावलोकन",
},
filters: {
title: "फ़िल्टर",
},
crop: {
title: "क्रॉप",
aspectRatios: {
free: "फ़्री",
square: "वर्ग",
},
},
rotate: {
title: "घुमाएँ",
},
flip: {
title: "फ्लिप",
buttons: {
horizontal: "क्षैतिज",
vertical: "खड़ा",
},
},
sharpen: {
title: "पैना",
},
blur: {
title: "कलंक",
},
brightness: {
title: "चमक",
},
contrast: {
title: "कंट्रास्ट",
},
grayscale: {
title: "ग्रेस्केल",
},
"hue-rotate": {
title: "रंग घुमाना",
},
invert: {
title: "रंग पलटना",
},
saturate: {
title: "सैच्युरेट",
},
sepia: {
title: "सीपिया",
},
},
};
const it = {
upload: "Caricare",
cancel: "Annulla",
close: "Vicino",
uploading: "Carica ...",
uploaded: "caricato",
fetching: "Ottieni immagine da $1$ ...",
poweredBy: "Reso possibile da $1$",
needHelp: "Hai bisogno di aiuto?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Si è verificato un errore durante il recupero di questo file",
unable_to_search: "Si è verificato un errore durante la ricerca",
invalid_service_url: "Questo non è un $1$ URL",
invalid_url: "Questo URL non è valido",
upload_aborted: "Il tuo caricamento è stato annullato",
upload_error: "Si è verificato un errore durante il caricamento di questo file",
file_type_not_allowed: "Questo tipo di file non è supportato",
file_too_large: "Il file deve essere inferiore a $1$",
},
help: {
loading: "Caricamento della guida...",
close: "Aiuto vicino",
},
services: {
default: {
heading: "Seleziona un'immagine",
},
local: {
title: "Scegli un file",
button: "Seleziona un file",
or: "di",
drop: "Trascina qui un file per caricarlo",
},
camera: {
title: "telecamera",
button: "Foto della webcam",
switch: "Cambia fotocamera",
waiting: "In attesa di autorizzazione della fotocamera ...",
unableToRead:
"Non possiamo leggere il video dalla tua fotocamera. Ciò può essere dovuto al fatto che non hai concesso l'autorizzazione richiesta o perché il tuo dispositivo non supporta l'accesso alla videocamera.",
},
microlink: {
button: "Importa da $1$",
label: "$1$ $2$ URL",
placeholder: "Inserisci un URL da $1$ $2$",
type: "inviare",
},
url: {
title: "URL diretto",
label: "URL immagine",
placeholder: "Inserisci un URL immagine",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "una foto",
},
ninegag: {
title: "9GAG",
type: "una foto",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "cinguettio",
type: "tweet fotografico",
},
pinterest: {
title: "Pinterest",
type: "perno",
},
flipboard: {
title: "Flipboard",
type: "articolo",
},
fotki: {
title: "foto",
type: "una foto",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Immagine dello schermo",
button: "Fai uno screenshot",
label: "URL della pagina web",
placeholder: "Inserisci un URL",
loading: "Fai uno screenshot ...",
},
search: {
button: "Cerca $1$",
label: "Cerca un'immagine",
placeholder: "Cerca qualcosa",
imagesPoweredBy: "Immagini rese possibili da $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "esempio",
},
filters: {
title: "filtri",
},
crop: {
title: "raccolto",
aspectRatios: {
free: "Gratuito",
square: "pieno",
},
},
rotate: {
title: "torcere",
},
flip: {
title: "Voltati",
buttons: {
horizontal: "orizzontale",
vertical: "verticale",
},
},
sharpen: {
title: "affinare",
},
blur: {
title: "dissolvenza",
},
brightness: {
title: "luminosità",
},
contrast: {
title: "Contrasto",
},
grayscale: {
title: "Scala di grigi",
},
"hue-rotate": {
title: "Ruota tonalità",
},
invert: {
title: "Girare",
},
saturate: {
title: "satiate",
},
sepia: {
title: "nero di seppia",
},
},
};
const nl = {
upload: "Uploaden",
cancel: "Annuleren",
close: "Sluiten",
uploading: "Uploaden...",
uploaded: "Geupload",
fetching: "Bezig met het ophalen van afbeelding vanaf $1$...",
poweredBy: "Mede mogelijk gemaakt door $1$",
needHelp: "Hulp nodig?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Er is een fout opgetreden bij het ophalen van dit bestand",
unable_to_search: "Er is een fout opgetreden bij het zoeken",
invalid_service_url: "Dit is geen $1$-URL",
invalid_url: "Deze URL is ongeldig",
upload_aborted: "Je upload is geannuleerd",
upload_error: "Er is een fout opgetreden bij het uploaden van dit bestand",
file_type_not_allowed: "Dit bestandstype wordt niet ondersteund",
file_too_large: "Het bestand moet kleiner zijn dan $1$",
},
help: {
loading: "Bezig met het laden van hulp...",
close: "Hulp sluiten",
},
services: {
default: {
heading: "Selecteer een afbeelding",
},
local: {
title: "Kies een bestand",
button: "Selecteer een bestand",
or: "of",
drop: "Sleep hier een bestand om te uploaden",
},
camera: {
title: "Camera",
button: "Webcam foto",
switch: "Switch camera",
waiting: "Wachten op camera permissie...",
unableToRead: "We kunnen de video van uw camera niet lezen. Dit kan zijn omdat u niet de vereiste toestemming hebt verleend of omdat uw apparaat geen cameratoegang ondersteunt.",
},
microlink: {
button: "Importeer van $1$",
label: "$1$ $2$ URL",
placeholder: "Voer een $1$-$2$-URL in",
type: "post",
},
url: {
title: "Directe URL",
label: "Afbeeldings-URL",
placeholder: "Voer een afbeeldings-URL in",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "foto",
},
ninegag: {
title: "9GAG",
type: "foto",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "foto tweet",
},
pinterest: {
title: "Pinterest",
type: "pin",
},
flipboard: {
title: "Flipboard",
type: "artikel",
},
fotki: {
title: "Fotki",
type: "foto",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Screenshot",
button: "Screenshot maken",
label: "URL van webpagina",
placeholder: "Voer een URL in",
loading: "Bezig met het maken van een screenshot...",
},
search: {
button: "Zoeken op $1$",
label: "Zoek een afbeelding",
placeholder: "Zoek naar iets",
imagesPoweredBy: "Afbeeldingen mogelijk gemaakt door $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Voorbeeld",
},
filters: {
title: "Filters",
},
crop: {
title: "Bijsnijden",
aspectRatios: {
free: "Free",
square: "Plein",
},
},
rotate: {
title: "Draaien",
},
flip: {
title: "Omdraaien",
buttons: {
horizontal: "Horizontaal",
vertical: "Verticaal",
},
},
sharpen: {
title: "Verscherpen",
},
blur: {
title: "Vervagen",
},
brightness: {
title: "Helderheid",
},
contrast: {
title: "Contrast",
},
grayscale: {
title: "Grijstinten",
},
"hue-rotate": {
title: "Tint roteren",
},
invert: {
title: "Omkeren",
},
saturate: {
title: "Verzadigen",
},
sepia: {
title: "Sepia",
},
},
};
const pt = {
upload: "Enviar",
cancel: "Cancelar",
close: "Fechar",
uploading: "Enviando...",
uploaded: "Enviado",
fetching: "Buscando imagem de $1$...",
poweredBy: "Fornecido por $1$",
needHelp: "Precisa de ajuda?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Ocorreu um erro ao buscar este arquivo",
unable_to_search: "Não foi possível realizar a busca",
invalid_service_url: "Esta URL não pertence a $1$",
invalid_url: "Esta URL parece ser inválida",
upload_aborted: "Seu envio foi cancelado",
upload_error: "Ocorreu um erro durante o envio deste arquivo",
file_type_not_allowed: "Este tipo de arquivo não é permitido",
file_too_large: "Seu arquivo deve ser menor que $1$",
},
help: {
loading: "Carregando ajuda...",
close: "Fechar Ajuda",
},
services: {
default: {
heading: "Selecione uma imagem",
},
local: {
title: "Escolher arquivo",
button: "Selecione um arquivo",
or: "ou",
drop: "Arraste-os para cá",
},
camera: {
title: "Câmera",
button: "Tirar foto",
switch: "Mudar câmera",
waiting: "Esperando a permissão...",
unableToRead: "Não foi possível obter acesso a câmera. Isto pode ter ocorrido se você não tiver permitido ou seu dispositivo suportar acesso a câmera.",
},
microlink: {
button: "Importar $1$",
label: "$2$ do $1$",
placeholder: "Insira a URL do $2$ do $1$",
type: "post",
},
url: {
title: "URL",
label: "URL da imagem",
placeholder: "Insira a URL da imagem",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "foto",
},
ninegag: {
title: "9GAG",
type: "foto",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "tweet",
},
pinterest: {
title: "Pinterest",
type: "pin",
},
flipboard: {
title: "Flipboard",
type: "artigo",
},
fotki: {
title: "Fotki",
type: "foto",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Captura de tela (screenshot)",
button: "Fazer captura da tela",
label: "URL do site",
placeholder: "Insira a URL do site",
loading: "Fazendo captura...",
},
search: {
button: "Pesquisar no $1$",
label: "Procure uma imagem",
placeholder: "Procurar algo",
imagesPoweredBy: "Busca de imagens fornecida por $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Previsualização",
},
filters: {
title: "Filtros",
},
crop: {
title: "Corte",
aspectRatios: {
free: "Livre",
square: "Quadrado",
},
},
rotate: {
title: "Rotacionar",
},
flip: {
title: "Inverter",
buttons: {
horizontal: "Horizontal",
vertical: "Vertical",
},
},
sharpen: {
title: "Aguçar",
},
blur: {
title: "Desfocar",
},
brightness: {
title: "Brilho",
},
contrast: {
title: "Contraste",
},
grayscale: {
title: "Escala de cinza",
},
"hue-rotate": {
title: "Matiz",
},
invert: {
title: "Inverter",
},
saturate: {
title: "Saturar",
},
sepia: {
title: "Sépia",
},
},
};
const ro = {
upload: "Încărcare",
cancel: "Anulare",
close: "Închide",
uploading: "Încărcare...",
uploaded: "Încărcat",
fetching: "Obținere imagine de la $1$...",
poweredBy: "Susținut de $1$",
needHelp: "Ai nevoie de ajutor?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "S-a produs o eroare in timpul obținerii acestui fișier",
unable_to_search: "S-a produs o eroare in timpul căutării",
invalid_service_url: "Acesta nu este un URL de $1$",
invalid_url: "Acest URL nu este valid",
upload_aborted: "Încărcare a fost anulată",
upload_error: "S-a produs o eroare in timpul încărcarii acestui fișier",
file_type_not_allowed: "Acest tip de fișier nu este permis.",
file_too_large: "Fișierul trebuie să fie mai mic de $1$",
},
help: {
loading: "Se obține ajutor...",
close: "Închidere ajutor",
},
services: {
default: {
heading: "Selectează o imagine",
},
local: {
title: "Alege un fișier",
button: "Selectează un fișier",
or: "ori",
drop: "Plasați fișierele aici",
},
camera: {
title: "Cameră",
button: "Capturează o imagine",
switch: "Schimbă camera",
waiting: "Se așteaptă permisiunea...",
unableToRead:
"Nu putem să citim semnalul video al camerei. Acest lucru se poate întâmpla pentru că nu ați acordat permisiunea necesară sau pentru că dispozitivul dvs. nu acceptă accesul camerei.",
},
microlink: {
button: "Importă de pe $1$",
label: "$1$ $2$ URL",
placeholder: "Tastează $1$ $2$ URL",
type: "trimite",
},
url: {
title: "URL direct",
label: "URL imagine",
placeholder: "Tastează URL-ul imaginii",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "fotografie",
},
ninegag: {
title: "9GAG",
type: "fotografie",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "tweet imagine",
},
pinterest: {
title: "Pinterest",
type: "pin",
},
flipboard: {
title: "Flipboard",
type: "articol",
},
fotki: {
title: "Fotki",
type: "fotografie",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Captură de ecran",
button: "Capturează ecran",
label: "URL pagină web",
placeholder: "Tastează URL-ul imaginii",
loading: "Se capturează ecranul...",
},
search: {
button: "Caută pe $1$",
label: "Găsește o imagine",
placeholder: "Caută ceva",
imagesPoweredBy: "Imagini provenite de la $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "Previzualizare",
},
filters: {
title: "Filtre",
},
crop: {
title: "Decupare",
aspectRatios: {
free: "Liber",
square: "Pătrat",
},
},
rotate: {
title: "Rotire",
},
flip: {
title: "Oglindire",
buttons: {
horizontal: "Orizontal",
vertical: "Vertical",
},
},
sharpen: {
title: "Accentuare",
},
blur: {
title: "Estompare",
},
brightness: {
title: "Luminozitate",
},
contrast: {
title: "Contrast",
},
grayscale: {
title: "Scară tonurilor de gri",
},
"hue-rotate": {
title: "Rotire tonuri",
},
invert: {
title: "Inversare",
},
saturate: {
title: "Saturare",
},
sepia: {
title: "Sepia",
},
},
};
const ru = {
upload: "Загрузить",
cancel: "Отмена",
close: "близко",
uploading: "Загрузка... ",
uploaded: "загруженное",
fetching: "Скачиваем изображение с $1$... ",
poweredBy: "Стало возможным благодаря $1$",
needHelp: "Нужна помощь?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Произошла ошибка при получении этого файла",
unable_to_search: "Произошла ошибка при поиске",
invalid_service_url: "Это не URL $1$",
invalid_url: "Этот URL недействителен",
upload_aborted: "Ваша загрузка была отменена",
upload_error: "Произошла ошибка при загрузке этого файла",
file_type_not_allowed: "Этот тип файла не поддерживается",
file_too_large: "Файл должен быть не более $1$",
},
help: {
loading: "Загрузка...",
close: "Закрыть",
},
services: {
default: {
heading: "Выберите изображение",
},
local: {
title: "Выберите файл",
button: "Выберите файл",
or: "или",
drop: "Перетащите файл сюда, чтобы загрузить",
},
camera: {
title: "Камера",
button: "Cделать фото",
switch: "Переключить камеру",
waiting: "Жду разрешения камеры...",
unableToRead: "Мы не можем получить доступ к вашей камере. Это может быть связано с тем, что вы не предоставили разрешение, или ваше устройство не поддерживает доступ к камере.",
},
microlink: {
button: "Скачать из $1$",
label: "Ссылка на $1$ $2$",
placeholder: "Введите ссылку на $1$ $2$",
type: "пост",
},
url: {
title: "Ссылка",
label: "Ссылка на изображение",
placeholder: "Введите ссылку на изображение",
button: "Скачать изображение",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "фото",
},
ninegag: {
title: "9GAG",
type: "фото",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "фото твит",
},
pinterest: {
title: "Pinterest",
type: "pin",
},
flipboard: {
title: "Flipboard",
type: "статья",
},
fotki: {
title: "Fotki",
type: "фото",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "Скриншот",
button: "Сделать скриншот",
label: "Ссылка на сайт",
placeholder: "Введите ссылку",
loading: "Скриншотим...",
},
search: {
button: "Поиск на $1$",
label: "Поиск изображений",
placeholder: "",
imagesPoweredBy: "картинки предоставлены $1$",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "пример",
},
filters: {
title: "Фильтры",
},
crop: {
title: "Обрезать",
aspectRatios: {
free: "Свободный",
square: "Квадрат",
},
},
rotate: {
title: "Поворот",
},
flip: {
title: "Отразить",
buttons: {
horizontal: "Горизонтально",
vertical: "Вертикально",
},
},
sharpen: {
title: "Резкость",
},
blur: {
title: "Размытие",
},
brightness: {
title: "Яркость",
},
contrast: {
title: "Контраст",
},
grayscale: {
title: "Оттенки серого",
},
"hue-rotate": {
title: "Повернуть оттенок",
},
invert: {
title: "Инверсия",
},
saturate: {
title: "Насыщенность",
},
sepia: {
title: "Сепия",
},
},
};
const tr = {
upload: "Yükleme",
cancel: "İptal etmek",
close: "Kapat",
uploading: "Yükle ...",
uploaded: "yüklenen",
fetching: "$1$ 'dan resim al ...",
poweredBy: "$1$ ile mümkün oldu",
needHelp: "Yardıma mı ihtiyacınız var?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "Bu dosya alınırken bir hata oluştu",
unable_to_search: "Aranırken bir hata oluştu",
invalid_service_url: "Bu bir $1$ URL değil",
invalid_url: "Bu URL geçersiz",
upload_aborted: "Yüklemeniz iptal edildi",
upload_error: "Bu dosya yüklenirken bir hata oluştu",
file_type_not_allowed: "Bu dosya türü desteklenmiyor",
file_too_large: "Dosya $1$ 'dan az olmalı",
},
help: {
loading: "Yardım yükleniyor...",
close: "Yardımı kapat",
},
services: {
default: {
heading: "Bir resim seç",
},
local: {
title: "Bir dosya seç",
button: "Bir dosya seç",
or: "arasında",
drop: "Yüklemek için bir dosyayı buraya sürükleyin",
},
camera: {
title: "Kamera",
button: "Webcam fotoğraf",
switch: "Kamera değiştir",
waiting: "Kamera izni bekleniyor ...",
unableToRead: "Videoyu kameranızdan okuyamıyoruz. Bunun nedeni gerekli izni vermediğiniz veya cihazınızın kamera erişimini desteklememesi olabilir.",
},
microlink: {
button: "1 $ 'dan içe aktar",
label: "$1$ $2$ URL",
placeholder: "Bir $1$ $2$ URL girin",
type: "posta",
},
url: {
title: "Doğrudan URL",
label: "Image URL",
placeholder: "Bir resim URL’si girin",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "bir fotoğraf",
},
ninegag: {
title: "9gag",
type: "bir fotoğraf",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "heyecan",
type: "fotoğraf tweet",
},
pinterest: {
title: "pinterest",
type: "toplu iğne",
},
flipboard: {
title: "Flipboard",
type: "makale",
},
fotki: {
title: "Resimler",
type: "bir fotoğraf",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "Biz kalp",
},
screenshot: {
title: "Ekran görüntüsü",
button: "Ekran görüntüsü al",
label: "Web sayfasının URL'si",
placeholder: "Bir URL girin",
loading: "Ekran görüntüsü al ...",
},
search: {
button: "$1$ için ara",
label: "Bir resim arayın",
placeholder: "Bir şey arayın",
imagesPoweredBy: "Görüntüler $1$ 'a kadar mümkün kılındı",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "örnek",
},
filters: {
title: "Filtreler",
},
crop: {
title: "ekin",
aspectRatios: {
free: "Ücretsiz",
square: "tam",
},
},
rotate: {
title: "büküm",
},
flip: {
title: "Arkanı dön",
buttons: {
horizontal: "yatay",
vertical: "dikey",
},
},
sharpen: {
title: "keskinleştirme",
},
blur: {
title: "karartmak",
},
brightness: {
title: "parlaklık",
},
contrast: {
title: "Kontrast",
},
grayscale: {
title: "Gri tonlama",
},
"hue-rotate": {
title: "Tonu döndür",
},
invert: {
title: "Ters çevir",
},
saturate: {
title: "doyurmak",
},
sepia: {
title: "Sepya",
},
},
};
const zhTW = {
upload: "上載",
cancel: "取消",
close: "關",
uploading: "上傳中...",
uploaded: "已上傳",
fetching: "正在取得您的影像從 $1$...",
poweredBy: "由 $1$ 提供",
needHelp: "需要幫助嗎?",
units: {
px: "px",
"%": "%",
deg: "°",
},
errors: {
response_not_ok: "我們在抓取這個檔案時發生錯誤",
unable_to_search: "我們在搜尋時發生錯誤",
invalid_service_url: "這不是一個 $1$ 網址",
invalid_url: "這個網址似乎無效",
upload_aborted: "您的上傳已取消",
upload_error: "我們在上傳這個檔案時發生錯誤",
file_type_not_allowed: "這個檔案類型不被允許",
file_too_large: "您的檔案應該小於 $1$",
},
help: {
loading: "讀取幫助中...",
close: "關閉幫助",
},
services: {
default: {
heading: "選擇一個影像",
},
local: {
title: "選擇檔案",
button: "選擇一個檔案",
or: "或",
drop: "拖曳檔案至此",
},
camera: {
title: "相機",
button: "點擊照片",
switch: "切換照片",
waiting: "等待權限授權中...",
unableToRead: "我們無法從您的相機讀取影像，這可能是因為您拒絕了授予權限或是因為您的裝置不支援存取相機",
},
microlink: {
button: "匯入 $1$",
label: "$1$ $2$ 網址",
placeholder: "請輸入一個 $1$ 的 $2$ 網址",
type: "post",
},
url: {
title: "網址",
label: "影像網址",
placeholder: "請輸入一個影像網址",
},
instagram: {
title: "Instagram",
},
facebook: {
title: "Facebook",
},
flickr: {
title: "Flickr",
type: "圖像",
},
ninegag: {
title: "9GAG",
type: "圖像",
},
deviantart: {
title: "DeviantArt",
},
artstation: {
title: "ArtStation",
},
twitter: {
title: "Twitter",
type: "影像推文",
},
pinterest: {
title: "Pinterest",
type: "釘文",
},
flipboard: {
title: "Flipboard",
type: "文章",
},
fotki: {
title: "Fotki",
type: "影像",
},
linkedin: {
title: "LinkedIn",
},
reddit: {
title: "Reddit",
},
tumblr: {
title: "Tumblr",
},
weheartit: {
title: "We Heart It",
},
screenshot: {
title: "螢幕截圖",
button: "擷取螢幕截圖",
label: "網頁網址",
placeholder: "請輸入一個網頁網址",
loading: "正在擷取螢幕截圖...",
},
search: {
button: "搜尋 $1$",
label: "找一張影像",
placeholder: "請輸入關鍵字",
imagesPoweredBy: "影像由 $1$ 提供",
},
giphy: {
title: "GIPHY",
},
unsplash: {
title: "Unsplash",
},
pixabay: {
title: "Pixabay",
},
pexels: {
title: "Pexels",
},
},
effects: {
preview: {
title: "預覽",
},
filters: {
title: "濾鏡",
},
crop: {
title: "剪裁",
aspectRatios: {
free: "自由",
square: "正方形",
},
},
rotate: {
title: "旋轉",
},
flip: {
title: "翻轉",
buttons: {
horizontal: "水平",
vertical: "垂直",
},
},
sharpen: {
title: "銳化",
},
blur: {
title: "模糊",
},
brightness: {
title: "亮度",
},
contrast: {
title: "對比",
},
grayscale: {
title: "灰階",
},
"hue-rotate": {
title: "色相旋轉",
},
invert: {
title: "負片效果",
},
saturate: {
title: "飽和度",
},
sepia: {
title: "懷舊(黃褐色)",
},
},
};
const xhrUploader = ({ endpoint, fileKeyName = "file", method = "POST", responseKey = "url", responseFunction, settingsFunction }) => {
return (file, updateProgress) =>
new Promise((resolve, reject) => {
const formData = new FormData();
formData.append(fileKeyName, file);
const xmlHttp = new XMLHttpRequest();
xmlHttp.open(method, endpoint, true);
if (typeof settingsFunction === "function") settingsFunction(xmlHttp);
xmlHttp.addEventListener("progress", (event) => {
if (typeof updateProgress === "function") updateProgress(event.loaded / event.total);
});
xmlHttp.addEventListener("load", () => {
const responseText = xmlHttp.responseText;
if (typeof responseFunction === "function") return resolve(responseFunction(responseText));
const json = JSON.parse(responseText);
return resolve(json[responseKey]);
});
xmlHttp.addEventListener("error", () => reject("errors.response_not_ok"));
xmlHttp.addEventListener("abort", () => reject("errors.upload_aborted"));
xmlHttp.send(formData);
});
};
const fetchUploader = ({ endpoint, settingsFunction, method = "POST", fileKeyName = "file", responseKey = "url", responseFunction }) => {
return (file) =>
new Promise((resolve, reject) => {
const formData = new FormData();
formData.append(fileKeyName, file);
window
.fetch(
endpoint,
settingsFunction
? settingsFunction(file)
: {
method,
body: formData,
}
)
.then((response) => {
if (!response.ok) throw new Error("errors.response_not_ok");
return response.json();
})
.then((json) => {
if (typeof responseFunction === "function") return resolve(responseFunction(json));
return resolve(json[responseKey]);
})
.catch(() => reject("errors.response_not_ok"));
});
};
class Camera extends UpploadService {
constructor() {
super(...arguments);
this.name = "camera";
this.icon = `
${translate("services.camera.waiting")}
${translate("needHelp")} ?
${translate("needHelp")} ?
${
translate(`services.${this.name}.loading`) ||
translate("services.microlink.loading", translate(`services.${this.name}.title`) || this.name) ||
translate("fetching", translate(`services.${this.name}.title`))
}
`;
};
this.handlers = (params) => {
const form = params.uppload.container.querySelector(`.microlink-search-form`);
if (form) {
safeListen(form, "submit", (event) => {
event.preventDefault();
const input = params.uppload.container.querySelector(`.microlink-search-input`);
if (input) {
const url = input.value;
if (!this.validator(url)) return params.handle(new Error("errors.invalid_url"));
this.loading = true;
this.update(params);
if (this.name === "screenshot") {
imageUrlToBlob(`https://api.microlink.io?url=${encodeURIComponent(url)}&screenshot=true&meta=false&embed=screenshot.url`)
.then((blob) => params.next(generateFileName(blobToUpploadFile(blob), this.name)))
.catch((error) => params.handle(error))
.then(() => (this.loading = false));
} else if (this.name === "url") {
imageUrlToBlob(url)
.then((blob) => params.next(generateFileName(blobToUpploadFile(blob), this.name)))
.catch((error) => params.handle(error));
} else {
cachedFetch(`https://api.microlink.io/?url=${encodeURIComponent(url)}`)
.then((result) => {
if (!result.data.image || !result.data.image.url) throw new Error("errors.response_not_ok");
return result.data.image.url;
})
.then((url) => imageUrlToBlob(url))
.then((blob) => params.next(generateFileName(blobToUpploadFile(blob), this.name)))
.catch((error) => params.handle(error));
}
}
return false;
});
}
const helpButton = params.uppload.container.querySelector(".need-help-link");
if (helpButton)
safeListen(helpButton, "click", () => params.showHelp(`/services/${["url", "screenshot"].indexOf(this.name) !== -1 ? this.name : `import-from-web-service/${this.name}`}`));
};
}
update(params) {
const loader = params.uppload.container.querySelector(".microlink-loader");
const container = params.uppload.container.querySelector(".microlink-container");
if (container) container.style.display = this.loading ? "none" : "";
if (loader) loader.style.display = this.loading ? "flex" : "none";
}
}
class Instagram extends MicrolinkBaseClass {
constructor() {
super(...arguments);
this.name = "instagram";
this.icon = `
${params.translate("services.local.drop")}
${params.translate("services.local.or")}
${params.translate("services.local.button")}
${translate(
"needHelp"
)} ? ${translate("needHelp")} ?
${translate("fetching", translate(`services.${this.name}.title`))}
`;
};
this.handlers = (params) => {
const form = params.uppload.container.querySelector(`.search-search-form`);
if (form) {
safeListen(form, "submit", (event) => {
const input = params.uppload.container.querySelector(`.search-search-input`);
if (input) {
const query = input.value;
cachedFetch(this.searchEndpoint(this.apiKey, query), this.fetchSettings)
.then((json) => {
this.results = this.getSearchResults(json);
this.update(params);
})
.catch(() => params.handle(new Error("errors.unable_to_search")));
}
event.preventDefault();
return false;
});
}
this.updateImages(params);
const imageButtons = params.uppload.container.querySelectorAll(".search-images button");
imageButtons.forEach((image) => {
safeListen(image, "click", () => {
const url = image.getAttribute("data-full-url");
this.loading = true;
this.update(params);
if (url)
imageUrlToBlob(url)
.then((blob) => params.next(generateFileName$1(blobToUpploadFile(blob), this.name, image.getAttribute("aria-label"))))
.catch((error) => params.handle("errors.response_not_ok"))
.then(() => (this.loading = false));
});
});
const helpButton = params.uppload.container.querySelector(".need-help-link");
if (helpButton) safeListen(helpButton, "click", () => params.showHelp(`/services/search/${this.name}`));
};
this.name = name;
this.icon = icon;
this.color = color;
this.apiKey = apiKey;
this.noRecolor = !!noRecolor;
this.poweredByUrl = poweredByUrl;
this.popularEndpoint = popularEndpoint(this.apiKey);
this.searchEndpoint = searchEndpoint;
this.getButton = getButton;
this.getPopularResults = getPopularResults;
this.getSearchResults = getSearchResults;
if (fetchSettings) this.fetchSettings = fetchSettings(this.apiKey);
if (this.popularEndpoint)
cachedFetch(this.popularEndpoint, this.fetchSettings)
.then((photos) => {
this.results = this.getPopularResults(photos);
})
.catch(() => {});
}
updateImages(params) {
const imagesContainer = params.uppload.container.querySelector(".search-images");
if (imagesContainer) {
imagesContainer.innerHTML = `
${this.results.map((result) => this.getButton(result)).join("\n")}
`;
}
}
update(params) {
this.updateImages(params);
if (params) this.handlers(params);
const loader = params.uppload.container.querySelector(".search-loader");
const container = params.uppload.container.querySelector(".search-container");
if (container) container.style.display = this.loading ? "none" : "";
if (loader) loader.style.display = this.loading ? "flex" : "none";
}
}
class GIPHY extends SearchBaseClass {
constructor(apiKey) {
super({
apiKey,
name: "giphy",
icon: `
`,
getSearchResults: (response) => response.data,
getPopularResults: (response) => response.data,
});
}
}
class Pixabay extends SearchBaseClass {
constructor(apiKey) {
super({
apiKey,
name: "pixabay",
icon: `
${image.user}
`,
getSearchResults: (response) => response.hits,
getPopularResults: (response) => response.hits,
});
}
}
class Unsplash extends SearchBaseClass {
constructor(apiKey) {
super({
apiKey,
name: "unsplash",
icon: `
${image.user.name}
`,
getSearchResults: (response) => response.results,
getPopularResults: (response) => response,
});
}
}
class Pexels extends SearchBaseClass {
constructor(apiKey) {
super({
apiKey,
name: "pexels",
icon: `
${image.photographer}
`,
getSearchResults: (response) => response.photos,
getPopularResults: (response) => response.photos,
fetchSettings: (apiKey) => ({
headers: {
Authorization: apiKey,
},
}),
});
}
}
class URL$1 extends MicrolinkBaseClass {
constructor() {
super(...arguments);
this.name = "url";
this.icon = `
${Object.keys(this.aspectRatioOptions)
.map(
(aspectRatio, index) => `
${translate(`effects.crop.aspectRatios.${aspectRatio}`) || aspectRatio} `
)
.join("")}
`
: ""
}
`;
};
this.handlers = (params) => {
const cropperElement = params.uppload.container.querySelector(".uppload-cropping-element img");
const originalFile = this.originalFile;
const type = originalFile.type && ["image/jpeg", "image/webp"].indexOf(originalFile.type) !== -1 ? originalFile.type : "image/png";
if (cropperElement) {
fitImageToContainer(params, cropperElement).then(() => {
const cropper = new Cropper(cropperElement, {
aspectRatio: this.aspectRatio,
autoCropArea: this.autoCropArea,
viewMode: this.viewMode,
ready() {
canvasToBlob(cropper.getCroppedCanvas(), type).then((blob) => {
originalFile.blob = blob;
params.next(originalFile);
});
},
cropend() {
canvasToBlob(cropper.getCroppedCanvas(), type).then((blob) => {
originalFile.blob = blob;
params.next(originalFile);
});
},
});
const aspectRatios = params.uppload.container.querySelectorAll("input[name='crop-aspect-ratio']");
aspectRatios.forEach((aspectRatio) => {
safeListen(aspectRatio, "change", () => {
const selectedAspectRatio = params.uppload.container.querySelector("input[name='crop-aspect-ratio']:checked");
if (selectedAspectRatio) {
cropper.setAspectRatio(this.aspectRatioOptions[selectedAspectRatio.getAttribute("data-name") || "free"]);
canvasToBlob(cropper.getCroppedCanvas(), type).then((blob) => {
originalFile.blob = blob;
params.next(originalFile);
});
}
});
});
});
}
};
if (aspectRatio) this.aspectRatio = aspectRatio;
if (aspectRatioOptions) this.aspectRatioOptions = aspectRatioOptions;
if (autoCropArea) this.autoCropArea = autoCropArea;
if (viewMode) this.viewMode = viewMode;
if (hideAspectRatioSettings) this.hideAspectRatioSettings = hideAspectRatioSettings;
}
}
class Rotate extends UpploadEffect {
constructor() {
super(...arguments);
this.name = "rotate";
this.icon = `
0 ${translate(`units.${this.unit}`) || this.unit}
`;
};
this.handlers = (params) => {
const rotatorElement = params.uppload.container.querySelector(".uppload-rotating-element img");
const originalFile = this.originalFile;
if (rotatorElement) {
fitImageToContainer(params, rotatorElement).then(() => {
const rotator = new Cropper(rotatorElement, {
autoCropArea: 1,
viewMode: 1,
dragMode: "none",
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
ready() {
params.uppload.emitter.emit("processing");
canvasToBlob(rotator.getCroppedCanvas()).then((blob) => {
originalFile.blob = blob;
params.uppload.emitter.emit("process");
params.next(originalFile);
});
},
});
const range = params.uppload.container.querySelector(".settings input[type='range']");
if (range)
safeListen(range, "change", () => {
let value = 0;
const range = params.uppload.container.querySelector(".settings input[type='range']");
if (range) value = parseInt(range.value);
const displayer = params.uppload.container.querySelector(".settings .value span");
if (displayer) displayer.innerHTML = value.toString();
rotator.rotate(value - this.value);
this.value = value;
params.uppload.emitter.emit("processing");
canvasToBlob(rotator.getCroppedCanvas()).then((blob) => {
originalFile.blob = blob;
params.uppload.emitter.emit("process");
params.next(originalFile);
});
});
});
}
};
}
}
class Flip extends UpploadEffect {
constructor() {
super(...arguments);
this.name = "flip";
this.originalfileURL = "";
this.originalFile = { blob: new Blob() };
this.icon = `
${translate("effects.flip.buttons.horizontal")}
${translate("effects.flip.buttons.vertical")}
`;
};
this.handlers = (params) => {
const img = params.uppload.container.querySelector(".uppload-flip img");
if (img) {
fitImageToContainer(params, img).then(() => {
const horizontal = params.uppload.container.querySelector(".settings button.flip-btn-horizontal");
if (horizontal) safeListen(horizontal, "click", this.update.bind(this, params, true, false));
const vertical = params.uppload.container.querySelector(".settings button.flip-btn-vertical");
if (vertical) safeListen(vertical, "click", this.update.bind(this, params, false, true));
});
}
};
}
imageToCanvasBlob(params, flipH = false, flipV = false) {
return new Promise((resolve) => {
params.uppload.emitter.emit("processing");
const scaleH = flipH ? -1 : 1;
const scaleV = flipV ? -1 : 1;
this.canvas = document.createElement("canvas");
const image = document.createElement("img");
image.src = this.originalfileURL;
image.onload = () => {
this.canvas.width = image.width;
this.canvas.height = image.height;
const posX = flipH ? image.width * -1 : 0;
const posY = flipV ? image.height * -1 : 0;
const context = this.canvas.getContext("2d");
if (!context) return;
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.scale(scaleH, scaleV);
context.drawImage(image, posX, posY);
canvasToBlob(this.canvas).then((blob) => {
const image = URL.createObjectURL(blob);
this.originalfileURL = image;
params.uppload.emitter.emit("process");
return resolve(blob);
});
};
});
}
update(params, x, y) {
const img = params.uppload.container.querySelector(".uppload-flip img");
if (!img) return;
this.imageToCanvasBlob(params, x, y).then((blob) => {
if (!blob) return;
let file = this.originalFile;
file.blob = blob;
params.next(file);
const image = URL.createObjectURL(blob);
img.setAttribute("src", image);
});
}
}
class Preview extends UpploadEffect {
constructor() {
super(...arguments);
this.name = "preview";
this.icon = `
0 ${translate(`units.${this.unit}`) || this.unit}
`;
};
this.handlers = (params) => {
const hueElement = params.uppload.container.querySelector(".uppload-hue-image img");
if (hueElement) {
fitImageToContainer(params, hueElement).then(() => {
const range = params.uppload.container.querySelector(".settings input[type='range']");
if (range) safeListen(range, "change", this.update.bind(this, params));
});
}
};
}
imageToCanvasBlob(params, filters) {
params.uppload.emitter.emit("processing");
return new Promise((resolve) => {
this.canvas = document.createElement("canvas");
const image = document.createElement("img");
image.src = this.originalfileURL;
image.onload = () => {
this.canvas.width = image.width;
this.canvas.height = image.height;
const context = this.canvas.getContext("2d");
if (!context) return;
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.filter = filters;
context.drawImage(image, 0, 0);
canvasToBlob(this.canvas).then((blob) => {
params.uppload.emitter.emit("process");
return resolve(blob);
});
};
});
}
update(params) {
let value = 0;
const range = params.uppload.container.querySelector(".settings input[type='range']");
if (range) value = parseInt(range.value);
const displayer = params.uppload.container.querySelector(".settings .value span");
if (displayer) displayer.innerHTML = value.toString();
const hueElement = params.uppload.container.querySelector(".uppload-hue-image img");
if (!hueElement) return;
this.imageToCanvasBlob(params, `${this.cssFilter}(${range.value}${this.unit})`).then((blob) => {
if (!blob) return;
this.originalFile.blob = blob;
params.next(this.originalFile);
const image = URL.createObjectURL(blob);
hueElement.setAttribute("src", image);
});
}
}
class Brightness extends UpploadFilterBaseClass {
constructor() {
super(...arguments);
this.name = "brightness";
this.icon = `