/** * uploadcareTabEffects 1.7.2 * Effects Tab for Uploadcare Widget. Edit images in desktop and mobile browsers. * https://github.com/uploadcare/uploadcare-widget-tab-effects#readme * Date: 2023-06-02 */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uploadcare-widget')) : typeof define === 'function' && define.amd ? define(['uploadcare-widget'], factory) : (global.uploadcareTabEffects = factory(global.uploadcare)); }(this, (function (uploadcare) { 'use strict'; function __$styleInject(css, ref) { if ( ref === void 0 ) ref = {}; var insertAt = ref.insertAt; if (!css || typeof document === 'undefined') { return; } var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; if (insertAt === 'top') { if (head.firstChild) { head.insertBefore(style, head.firstChild); } else { head.appendChild(style); } } else { head.appendChild(style); } if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } __$styleInject("\n.uploadcare-tab-effects--crops{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;max-width:100%}\n.uploadcare-tab-effects--effect-button{-ms-flex-negative:1;flex-shrink:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;padding:0;width:45px;height:45px;border-color:transparent;background:transparent;color:#212121;fill:#212121}.uploadcare-tab-effects--effect-button:active,.uploadcare-tab-effects--effect-button:focus,.uploadcare-tab-effects--effect-button:hover{fill:#0969ee;color:#0969ee}.uploadcare-tab-effects--effect-button:focus,.uploadcare-tab-effects--effect-button:hover{border-color:transparent;background:transparent}.uploadcare-tab-effects--effect-button[aria-disabled=true]{border-color:transparent!important;background:transparent!important;color:#d4d2d2!important;fill:#d4d2d2!important}.uploadcare-tab-effects--effect-button:before{content:\"\";display:block;-ms-flex-order:1;order:1;margin:1px 0;width:6px;height:6px;background:transparent;border-radius:50%}.uploadcare-tab-effects--effect-button_applied:before{background:#157cfc}@media (min-width:760px){.uploadcare-tab-effects--effect-button:focus,.uploadcare-tab-effects--effect-button:hover{position:relative;overflow:visible}.uploadcare-tab-effects--effect-button:focus:after,.uploadcare-tab-effects--effect-button:hover:after{content:attr(aria-label);display:block;position:absolute;top:0;left:50%;width:auto;height:auto;background:#e3e1e1;color:#212121;transform:translateX(-50%) translateY(-100%);padding:12px;border-radius:6px;line-height:1;min-width:100%}}\n.uploadcare-tab-effects--icon{height:32px}\n.uploadcare-tab-effects--effects{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;max-width:100%}\n.uploadcare-tab-effects--additions{-ms-flex-positive:1;flex-grow:1}\n\n\n.uploadcare-tab-effects--range{-ms-flex-positive:1;flex-grow:1}input[type=range].uploadcare-tab-effects--range__input{box-sizing:border-box;margin:0;padding:0;width:100%;height:40px;line-height:1}input[type=range].uploadcare-tab-effects--range__input:focus{outline:2px solid rgba(21,124,252,.5);outline-offset:1px}input[type=range].uploadcare-tab-effects--range__input::-moz-range-track{background:#d4d2d2}input[type=range].uploadcare-tab-effects--range__input::-moz-range-progress{background:#157cfc}input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb{border:none;background:#212121;box-shadow:none}input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb:focus,input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb:hover{background:#000}input[type=range].uploadcare-tab-effects--range__input::-moz-range-thumb:active{background:#000}input[type=range].uploadcare-tab-effects--range__input::-ms-track{background:#d4d2d2}input[type=range].uploadcare-tab-effects--range__input::-ms-fill-lower{background:#157cfc}input[type=range].uploadcare-tab-effects--range__input::-ms-thumb{background:#212121}input[type=range].uploadcare-tab-effects--range__input::-ms-thumb:active,input[type=range].uploadcare-tab-effects--range__input:focus::-ms-thumb{background:#000}", {}); uploadcare = uploadcare && 'default' in uploadcare ? uploadcare['default'] : uploadcare; var be = { effects: { captions: { blur: 'Размыццё', crop: 'Абрэзка', enhance: 'Паляпшэнне', flip: 'Адлюстраваць па вертыкалі', grayscale: 'Адценні шэрага', invert: 'Інвертаваць', mirror: 'Адлюстраваць па гарызанталі', rotate: 'Павярнуць', sharp: 'Выразнасць' }, apply: 'Ужыць' } }; var en = { effects: { captions: { blur: 'Blur', crop: 'Crop', enhance: 'Enhance', flip: 'Flip', grayscale: 'Grayscale', invert: 'Invert', mirror: 'Mirror', rotate: 'Rotate', sharp: 'Sharpen' }, apply: 'Apply' } }; var fr = { effects: { captions: { blur: 'Flouter', crop: 'Recadrer', enhance: 'Effets', flip: 'Retourner', grayscale: 'Noir et blanc', invert: 'Inverser', mirror: 'Mirroir', rotate: 'Tourner', sharp: 'Netteté' }, apply: 'Appliquer' } }; var it = { effects: { captions: { blur: 'Sfoca', crop: 'Ritaglia', enhance: 'Accentua', flip: 'Capovolgi', grayscale: 'Bianconero', invert: 'Inverti', mirror: 'Specchia', rotate: 'Ruota', sharp: 'Nitidezza' }, apply: 'Applica' } }; var ja = { effects: { captions: { blur: 'ぼかし', crop: 'トリミング', enhance: '補正', flip: '反転', grayscale: 'グレースケール', invert: '階調反転', mirror: 'ミラー', rotate: '回転', sharp: 'シャープ' }, apply: '適用' } }; var nl = { effects: { captions: { blur: 'Vervagen', crop: 'Bijknippen', enhance: 'Verbeteren', flip: 'Omkeren', grayscale: 'Zwart-wit', invert: 'Inverteren', mirror: 'Spiegelen', rotate: 'Roteren', sharp: 'Verscherpen' }, apply: 'Toepassen' } }; var ru = { effects: { captions: { blur: 'Размытие', crop: 'Обрезка', enhance: 'Улучшение', flip: 'Отразить по вертикали', grayscale: 'Оттенки серого', invert: 'Инвертировать', mirror: 'Отразить по горизонтали', rotate: 'Повернуть', sharp: 'Резкость' }, apply: 'Применить' } }; var vi = { effects: { captions: { blur: 'Mờ', crop: 'Cắt', enhance: 'Tinh chỉnh', flip: 'Lật', grayscale: 'Xám', invert: 'Âm bản', mirror: 'Gương', rotate: 'Xoay', sharp: 'Làm nét' }, apply: 'Áp dụng' } }; var es = { effects: { captions: { blur: 'Desenfocar', crop: 'Recortar', enhance: 'Mejorar', flip: 'Voltear', grayscale: 'Escala de grises', invert: 'Invertir', mirror: 'Reflejar', rotate: 'Rotar', sharp: 'Nitidez' }, apply: 'Aplicar' } }; var sv = { effects: { captions: { blur: 'Suddig', crop: 'Beskära', enhance: 'Öka', flip: 'Flip', grayscale: 'Grayscale', invert: 'Invertera', mirror: 'Återspegla', rotate: 'Rotera', sharp: 'Skärpa' }, apply: 'Använda' } }; var locales = Object.freeze({ be: be, en: en, fr: fr, it: it, ja: ja, nl: nl, ru: ru, vi: vi, es: es, sv: sv }); var initialSettings = { effects: ['crop', 'rotate', 'enhance', 'sharp', 'grayscale'], locale: 'en' }; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var defineProperty = function (obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); var toConsumableArray = function (arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }; /** * Check if locale available in list of locales for Tab. * @param locale * @return {boolean} */ var isLocaleAvailable = function isLocaleAvailable(locale) { var availableLocales = Object.keys(locales); return availableLocales.indexOf(locale) > -1; }; /** * Configure translations for Tab. * @param translations * @param currentLocale * @return {*} */ var configureTranslations = function configureTranslations(translations, currentLocale) { var extendedTranslations = _extends({}, translations); var isCurrentLocaleAvailable = isLocaleAvailable(currentLocale); var defaultTranslations = locales[initialSettings.locale]; var isLocaleAvailableInTranslations = function isLocaleAvailableInTranslations(locale) { return extendedTranslations.hasOwnProperty(locale); }; for (var locale in extendedTranslations) { if (isLocaleAvailableInTranslations(locale)) { if (!isLocaleAvailableInTranslations(currentLocale)) { var currentLocaleTranslations = extendedTranslations[currentLocale]; extendedTranslations[currentLocale] = _extends({}, currentLocaleTranslations, defaultTranslations); /* eslint-disable no-continue */ continue; } if (isCurrentLocaleAvailable || isLocaleAvailable(locale)) { extendedTranslations[locale] = _extends({}, extendedTranslations[locale], locales[locale]); } else { extendedTranslations[locale] = _extends({}, extendedTranslations[locale], defaultTranslations); } } } return extendedTranslations; }; var createNode = function createNode(html) { return new DOMParser().parseFromString(html, 'text/html').body.firstChild; }; function customExtends(child, parent) { for (var key in parent) { if (Object.prototype.hasOwnProperty.call(parent, key)) { child[key] = parent[key]; } } function Ctor() { this.constructor = child; } Ctor.prototype = parent.prototype; child.prototype = new Ctor(); child.__super__ = parent.prototype; return child; } var effectsDefaults = { blur: ['number', 10], enhance: ['number', 50], flip: ['boolean'], grayscale: ['boolean'], invert: ['boolean'], mirror: ['boolean'], rotate: ['number'], sharp: ['number', 5] }; var modifierRegExp = { blur: /-\/blur\/(([0-9]+)\/|)/i, crop: /-\/crop\/([0-9]+)x([0-9]+)(\/(center|([0-9]+),([0-9]+)))?\/(-\/resize\/([0-9]+)x([0-9]+)\/)?/i, enhance: /-\/enhance\/(([0-9]+)\/|)/i, flip: /-\/flip\//i, grayscale: /-\/grayscale\//i, invert: /-\/invert\//i, mirror: /-\/mirror\//i, rotate: /-\/rotate\/(([0-9]+)\/)/i, sharp: /-\/sharp\/(([0-9]+)\/|)/i }; function effectsFromModifiers(cdnUrlModifiers, settingsEffects, settingsCrop) { if (!cdnUrlModifiers) { return { effects: {}, otherModifiers: '' }; } var effects = {}; var otherModifiers = cdnUrlModifiers.replace(/-\/preview\//g, ''); settingsEffects.forEach(function (settingsEffect) { if (modifierRegExp[settingsEffect]) { var foundModifier = cdnUrlModifiers.match(modifierRegExp[settingsEffect]); if (foundModifier) { var effectValue = void 0; if (settingsEffect === 'crop') { var resizeTo = foundModifier[7] && [foundModifier[8], foundModifier[9]]; var cropWidth = parseInt(foundModifier[1]); var cropHeight = parseInt(foundModifier[2]); var cropIndex = settingsCrop.findIndex(function (settings) { if (typeof settings.preferedSize === 'undefined') { return true; } var _settings$preferedSiz = slicedToArray(settings.preferedSize, 2), w = _settings$preferedSiz[0], h = _settings$preferedSiz[1]; var sameSize = cropWidth === w && cropHeight === h; var sameRatio = (w / h).toPrecision(2) === (cropWidth / cropHeight).toPrecision(2); return sameSize || sameRatio; }); effectValue = { resizeTo: resizeTo, index: cropIndex >= 0 ? cropIndex : null, coords: { width: cropWidth, height: cropHeight, center: foundModifier[4] === 'center', left: foundModifier[5] === undefined ? undefined : parseInt(foundModifier[5]), top: foundModifier[6] === undefined ? undefined : parseInt(foundModifier[6]) } }; } else { if (effectsDefaults[settingsEffect][0] === 'boolean') { effectValue = true; } if (effectsDefaults[settingsEffect][0] === 'number') { effectValue = foundModifier[2] === undefined ? effectsDefaults[settingsEffect][1] : parseInt(foundModifier[2]); } } effects[settingsEffect] = effectValue; otherModifiers = otherModifiers.replace(foundModifier[0], ''); } } }); return { effects: effects, otherModifiers: otherModifiers }; } var initialState = { view: 'preview', image: {}, appliedEffects: { blur: 0, crop: null, enhance: 0, flip: false, grayscale: false, invert: false, mirror: false, rotate: 0, sharp: 0 }, otherModifiers: '' }; var getAppliedEffects = function getAppliedEffects(settingsEffects) { var initialAppliedEffects = initialState.appliedEffects; var appliedEffects = {}; settingsEffects.forEach(function (settingsEffect) { if (initialAppliedEffects[settingsEffect] !== undefined) { appliedEffects[settingsEffect] = initialAppliedEffects[settingsEffect]; } }); return appliedEffects; }; var getModifiersByCrop = function getModifiersByCrop(crop) { var size = crop.originalSize; var _crop$coords = crop.coords, width = _crop$coords.width, height = _crop$coords.height, center = _crop$coords.center, left = _crop$coords.left, top = _crop$coords.top; var modifiers = ''; if (size) { var wholeImage = width === size[0] && height === size[1]; if (!wholeImage) { modifiers += '-/crop/' + width + 'x' + height + '/' + left + ',' + top + '/'; } } else { modifiers += '-/crop/' + width + 'x' + height + '/'; if (center) { modifiers += 'center/'; } else if (left !== undefined && top !== undefined) { modifiers += left + ',' + top + '/'; } } if (crop.resizeTo) { modifiers += '-/resize/' + crop.resizeTo.join('x') + '/'; } else { modifiers += '-/preview/'; } return modifiers; }; var getModifiersByEffects = function getModifiersByEffects(effects) { var withCrop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var withRFM = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; var cdnUrlModifiers = ''; for (var effect in effects) { if (effects[effect]) { switch (_typeof(effects[effect])) { case 'boolean': if (!withRFM && !!~['flip', 'mirror'].indexOf(effect)) { break; } cdnUrlModifiers += '-/' + effect + '/'; break; case 'number': if (!withRFM && effect === 'rotate') { break; } cdnUrlModifiers += '-/' + effect + '/' + effects[effect] + '/'; break; case 'object': if (effect === 'crop' && withCrop) { cdnUrlModifiers += getModifiersByCrop(effects[effect]); } break; } } } if (cdnUrlModifiers) { cdnUrlModifiers = effects['crop'] && withCrop ? cdnUrlModifiers : '-/preview/' + cdnUrlModifiers; } else { cdnUrlModifiers = ''; } return cdnUrlModifiers; }; var rotateValues = [0, 270, 180, 90]; var getNextRotateValue = function getNextRotateValue(currentValue) { var currentIndex = rotateValues.indexOf(currentValue); if (!~currentIndex || currentIndex === rotateValues.length - 1) { return rotateValues[0]; } return rotateValues[currentIndex + 1]; }; var getSettingsCrop = function getSettingsCrop(crop, effects) { if (crop || !~effects.indexOf('crop')) { return crop; } return [{ downscale: false, notLess: false, preferedSize: undefined, upscale: false }]; }; var ALL_EFFECTS = ['crop', 'rotate', 'mirror', 'flip', 'blur', 'sharp', 'enhance', 'grayscale', 'invert']; var getSettingsEffects = function getSettingsEffects(value) { var settingsEffects = []; if (typeof value === 'string' && value === 'all') { return ALL_EFFECTS; } if (typeof value === 'string') { settingsEffects = value.replace(/\s/g, '').split(','); } else if (Array.isArray(value)) { settingsEffects = value; } else { settingsEffects = initialSettings.effects; } var cropIndex = settingsEffects.indexOf('crop'); if (!!~cropIndex && cropIndex !== 0) { settingsEffects = ['crop'].concat(toConsumableArray(settingsEffects.slice(0, cropIndex)), toConsumableArray(settingsEffects.slice(cropIndex + 1))); } return settingsEffects; }; var getGlobalSettingsByKey = function getGlobalSettingsByKey(key) { var value = window['UPLOADCARE_' + key.toUpperCase()]; return typeof value === 'undefined' ? null : value; }; var getCropResize = function getCropResize(cropSettings, size) { var _size = slicedToArray(size, 2), width = _size[0], height = _size[1]; var downscale = cropSettings.downscale && (width > cropSettings.preferedSize[0] || height > cropSettings.preferedSize[1]); var upscale = cropSettings.upscale && (width < cropSettings.preferedSize[0] || height < cropSettings.preferedSize[1]); if (downscale || upscale) { return cropSettings.preferedSize; } else { return null; } }; var autoCrop = function autoCrop(store, settings, uc) { var crop = settings.crop; var _store$getState = store.getState(), image = _store$getState.image; if (!crop) { return; } // if even one of crop option sets allow free crop, // we don't need to crop automatically if (crop.some(function (c) { return !c.preferedSize; })) { return; } if (!image.isImage || image.cdnUrlModifiers || image.crop) { return; } var info = image.originalImageInfo; var size = uc.utils.fitSize(crop[0].preferedSize, [info.width, info.height], true); var cropEffect = { originalSize: [info.width, info.height], settings: crop[0], resizeTo: getCropResize(crop[0], size), coords: { left: Math.round((info.width - size[0]) / 2), top: Math.round((info.height - size[1]) / 2), width: size[0], height: size[1] } }; store.setAppliedEffect({ crop: cropEffect }); store.rebuildImage(); }; var buildFileInfoCrop = function buildFileInfoCrop(crop) { if (crop) { var coords = crop.coords, resizeTo = crop.resizeTo; var cropInfo = { width: coords.width, height: coords.height, left: coords.left, top: coords.top }; if (resizeTo) { cropInfo.sw = resizeTo[0]; cropInfo.sh = resizeTo[1]; } return cropInfo; } else { return null; } }; var configureSettings = function configureSettings(settings) { var effects = getSettingsEffects(settings.effects); var crop = getSettingsCrop(settings.crop, effects); return _extends({}, settings, { crop: crop }, { effects: effects }, { locale: settings.locale ? settings.locale : initialSettings.locale }); }; var createStore = function createStore(initialState) { var state = initialState; var listeners = { view: [], imageLoad: [], appliedEffects: [], image: [] }; var getState = function getState() { return state; }; var setAppliedEffect = function setAppliedEffect(appliedEffect) { var appliedEffects = _extends({}, state.appliedEffects, appliedEffect); state = _extends({}, state, { appliedEffects: appliedEffects }); listeners['appliedEffects'].forEach(function (listener) { return listener(); }); }; var setView = function setView(view) { state = _extends({}, state, { view: view }); listeners['view'].forEach(function (listener) { return listener(); }); }; var setImageLoad = function setImageLoad(imageLoad) { state = _extends({}, state, { imageLoad: imageLoad }); listeners['imageLoad'].forEach(function (listener) { return listener(); }); }; var rebuildImage = function rebuildImage() { var _state = state, appliedEffects = _state.appliedEffects, image = _state.image; var cdnUrlModifiers = getModifiersByEffects(appliedEffects) + state.otherModifiers; var crop = buildFileInfoCrop(appliedEffects.crop); state.image = _extends({}, image, { cdnUrl: image.originalUrl + (cdnUrlModifiers || ''), cdnUrlModifiers: cdnUrlModifiers, crop: crop }); listeners['image'].forEach(function (listener) { return listener(); }); }; var subscribe = function subscribe(listener, source) { listeners[source].push(listener); return function () { listeners[source] = listeners[source].filter(function (l) { return l !== listener; }); }; }; var subscribeToAppliedEffects = function subscribeToAppliedEffects(listener) { return subscribe(listener, 'appliedEffects'); }; var subscribeToView = function subscribeToView(listener) { return subscribe(listener, 'view'); }; var subscribeToImageLoad = function subscribeToImageLoad(listener) { return subscribe(listener, 'imageLoad'); }; var subscribeToImage = function subscribeToImage(listener) { return subscribe(listener, 'image'); }; return { getState: getState, setView: setView, setImageLoad: setImageLoad, setAppliedEffect: setAppliedEffect, rebuildImage: rebuildImage, subscribeToView: subscribeToView, subscribeToImageLoad: subscribeToImageLoad, subscribeToImage: subscribeToImage, subscribeToAppliedEffects: subscribeToAppliedEffects }; }; var configureStore = function configureStore(image, settings) { var effects = settings.effects, crop = settings.crop; var appliedEffects = getAppliedEffects(effects); var appliedEffectsFromModifiers = effectsFromModifiers(image.cdnUrlModifiers, effects, crop); return createStore(_extends({}, initialState, { image: image }, { appliedEffects: _extends({}, appliedEffects, appliedEffectsFromModifiers.effects) }, { otherModifiers: appliedEffectsFromModifiers.otherModifiers })); }; var template = (function (_) { return "
\n"; }); var Content = function Content() { var $element = void 0; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var render = function render() { $element = createNode(template()); }; var appendChild = function appendChild($child) { if (!$element) return; $element.appendChild($child); }; return { getElement: getElement, appendChild: appendChild }; }; var cn = { "crop-button": "uploadcare-tab-effects--crop-button", "crop-button__icon": "uploadcare-tab-effects--crop-button__icon" }; var template$1 = (function (_) { return ' \n'; }); var APPLIED_CLASS_NAME = 'uploadcare--crop-sizes__item_current'; var ICON_FREE_CLASS_NAME = 'uploadcare--crop-sizes__icon_free'; var CropButton = function CropButton(props) { var $element = void 0; var size = props.size, title = props.title, onClick = props.onClick; var state = { applied: props.applied || false, disabled: props.disabled || false }; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var render = function render() { $element = createNode(template$1({ title: title, cn: cn })); setupIcon(); if (state.applied) { $element.classList.add(APPLIED_CLASS_NAME); } $element.addEventListener('click', handleClick); }; var setupIcon = function setupIcon() { var $icon = $element.querySelector('.' + cn['crop-button__icon']); var width = size.width, height = size.height; if (width && height) { $icon.style.width = width; $icon.style.height = height; } else { $icon.innerHTML = '\n\n '; $icon.classList.add(ICON_FREE_CLASS_NAME); } }; var handleClick = function handleClick() { if (state.disabled || !onClick) return; onClick(); }; var toggleApplied = function toggleApplied(applied) { if (!$element || state.applied === applied) return; state.applied = applied; $element.classList[applied ? 'add' : 'remove'](APPLIED_CLASS_NAME); }; var toggleDisabled = function toggleDisabled(disabled) { if (!$element || state.disabled === disabled) return; state.disabled = disabled; $element.setAttribute('aria-disabled', disabled); $element.setAttribute('tabindex', disabled ? '-1' : '0'); }; return { getElement: getElement, toggleApplied: toggleApplied, toggleDisabled: toggleDisabled }; }; var cn$1 = { "crops": "uploadcare-tab-effects--crops" }; var template$2 = (function (_) { return "\n"; }); var Crops = function Crops(props) { var $element = void 0; var buttons = []; var crops = props.crops, onCropClick = props.onCropClick; var state = { currentCrop: props.currentCrop || 0 }; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var render = function render() { $element = createNode(template$2({ cn: cn$1 })); crops.forEach(function (crop) { var index = crop.index, size = crop.size, title = crop.title; buttons[index] = new CropButton({ size: size, title: title, applied: state.currentCrop === index, onClick: function onClick() { if (state.currentCrop === index) return; updateApplied(index); onCropClick(crop); } }); }); buttons.forEach(function (button) { return $element.appendChild(button.getElement()); }); }; var toggleDisabled = function toggleDisabled(isDisabled) { if (!buttons) return; buttons.forEach(function (button) { return button.toggleDisabled(isDisabled); }); }; var updateApplied = function updateApplied(currentCrop) { if (!buttons) return; state.currentCrop = currentCrop; buttons.forEach(function (button, index) { return button.toggleApplied(index === currentCrop); }); }; return { getElement: getElement, toggleDisabled: toggleDisabled, updateApplied: updateApplied }; }; var cn$2 = { "effect-button": "uploadcare-tab-effects--effect-button", "effect-button_applied": "uploadcare-tab-effects--effect-button_applied" }; var template$3 = (function (_) { return '\n'; }); var cn$3 = { "icon": "uploadcare-tab-effects--icon" }; var blur = (function (_) { return "\n"; }); var crop = (function (_) { return "\n"; }); var enhance = (function (_) { return "\n"; }); var flip = (function (_) { return "\n"; }); var grayscale = (function (_) { return "\n"; }); var invert = (function (_) { return "\n"; }); var mirror = (function (_) { return "\n"; }); var rotate = (function (_) { return "\n"; }); var sharp = (function (_) { return "\n"; }); var icons = Object.freeze({ blur: blur, crop: crop, enhance: enhance, flip: flip, grayscale: grayscale, invert: invert, mirror: mirror, rotate: rotate, sharp: sharp }); var Icon = function Icon(props) { var name = props.name; if (!icons[name]) { throw new Error('Icon with name "' + name + '" doesn\'t exist.'); } var $element = void 0; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var render = function render() { $element = createNode(icons[name]()); $element.setAttribute('class', $element.getAttribute('class') + ' ' + cn$3['icon']); }; return { getElement: getElement }; }; var EffectButton = function EffectButton(props) { var $element = void 0; var effect = props.effect, title = props.title, onClick = props.onClick; var state = { applied: props.applied || false, disabled: props.disabled || false }; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var getEffect = function getEffect() { return effect; }; var render = function render() { var _icon = new Icon({ name: effect }); $element = createNode(template$3({ title: title, cn: cn$2 })); $element.appendChild(_icon.getElement()); if (state.applied) { $element.classList.add(cn$2['effect-button_applied']); } $element.addEventListener('click', handleClick); $element.addEventListener('keypress', function (e) { if (e.code === 'Enter') { $element.dispatchEvent(new Event('click')); e.preventDefault(); e.stopPropagation(); } }); }; var handleClick = function handleClick() { if (state.disabled || !onClick) return; onClick(); }; var toggleApplied = function toggleApplied(applied) { if (!$element || state.applied === applied) return; state.applied = applied; $element.classList[applied ? 'add' : 'remove'](cn$2['effect-button_applied']); }; var toggleDisabled = function toggleDisabled(disabled) { if (!$element || state.disabled === disabled) return; state.disabled = disabled; $element.setAttribute('aria-disabled', disabled); $element.setAttribute('tabindex', disabled ? -1 : 0); }; return { getElement: getElement, getEffect: getEffect, toggleApplied: toggleApplied, toggleDisabled: toggleDisabled }; }; var cn$4 = { "effects": "uploadcare-tab-effects--effects" }; var template$4 = (function (_) { return "\n"; }); var Effects = function Effects(props) { var $element = void 0; var buttons = []; var effects = props.effects, titles = props.titles, onEffectClick = props.onEffectClick; var state = { appliedEffects: props.appliedEffects }; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var render = function render() { $element = createNode(template$4({ cn: cn$4 })); effects.forEach(function (effect) { var title = titles[effect]; buttons.push(new EffectButton({ effect: effect, title: title, applied: !!state.appliedEffects[effect], onClick: function onClick() { return onEffectClick(effect); } })); }); buttons.forEach(function (button) { return $element.appendChild(button.getElement()); }); }; var toggleDisabled = function toggleDisabled(isDisabled) { if (!buttons) return; buttons.forEach(function (button) { return button.toggleDisabled(isDisabled); }); }; var updateApplied = function updateApplied(appliedEffects) { if (!buttons) return; state.appliedEffects = appliedEffects; buttons.forEach(function (button) { return button.toggleApplied(!!appliedEffects[button.getEffect()]); }); }; return { getElement: getElement, toggleDisabled: toggleDisabled, updateApplied: updateApplied }; }; var cn$5 = { "additions": "uploadcare-tab-effects--additions", "done": "uploadcare-tab-effects--done", "cancel": "uploadcare-tab-effects--cancel" }; var template$5 = (function (_) { return " \n"; }); var Footer = function Footer(props) { var $element = void 0; var $additionsElement = void 0; var $doneElement = void 0; var $cancelElement = void 0; var locale = props.locale, onDone = props.onDone, onCancel = props.onCancel; var getElement = function getElement() { if (!$element) { render(); } return $element; }; var render = function render() { $element = createNode(template$5({ cn: cn$5, locale: locale })); $additionsElement = $element.querySelector('.' + cn$5.additions); $doneElement = $element.querySelector('.' + cn$5.done); $cancelElement = $element.querySelector('.' + cn$5.cancel); $doneElement.addEventListener('click', onDone); $cancelElement.addEventListener('click', onCancel); }; var empty = function empty() { if (!$element) return; while ($additionsElement.firstChild) { $additionsElement.removeChild($additionsElement.firstChild); } }; var appendChild = function appendChild(child) { if (!$element) return; $additionsElement.appendChild(child); }; var toggleDisabled = function toggleDisabled(isDisabled) { if (!$doneElement) return; $doneElement.disabled = isDisabled; }; var updateDoneTitle = function updateDoneTitle() { var newTitle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; $doneElement.innerText = newTitle ? newTitle : locale.done; }; return { getElement: getElement, empty: empty, appendChild: appendChild, toggleDisabled: toggleDisabled, updateDoneTitle: updateDoneTitle }; }; var cn$6 = { "title": "uploadcare-tab-effects--title" }; var template$6 = (function (_) { return "