@salla.sa/twilight-components
Version:
Salla Web Component
495 lines (411 loc) • 15.6 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
function _mergeNamespaces(n, m) {
m.forEach(function (e) {
e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
if (k !== 'default' && !(k in n)) {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
});
return Object.freeze(n);
}
var filepondPluginImageEdit$3 = {exports: {}};
/*!
* FilePondPluginImageEdit 1.6.3
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit https://pqina.nl/filepond/ for details.
*/
var filepondPluginImageEdit$2 = filepondPluginImageEdit$3.exports;
var hasRequiredFilepondPluginImageEdit;
function requireFilepondPluginImageEdit () {
if (hasRequiredFilepondPluginImageEdit) return filepondPluginImageEdit$3.exports;
hasRequiredFilepondPluginImageEdit = 1;
(function (module, exports) {
/* eslint-disable */
(function(global, factory) {
(module.exports = factory())
;
})(filepondPluginImageEdit$2, function() {
var isPreviewableImage = function isPreviewableImage(file) {
return /^image/.test(file.type);
};
/**
* Image Edit Proxy Plugin
*/
var plugin = function plugin(_) {
var addFilter = _.addFilter,
utils = _.utils,
views = _.views;
var Type = utils.Type,
createRoute = utils.createRoute,
_utils$createItemAPI = utils.createItemAPI,
createItemAPI =
_utils$createItemAPI === void 0
? function(item) {
return item;
}
: _utils$createItemAPI;
var fileActionButton = views.fileActionButton;
addFilter('SHOULD_REMOVE_ON_REVERT', function(shouldRemove, _ref) {
var item = _ref.item,
query = _ref.query;
return new Promise(function(resolve) {
var file = item.file;
// if this file is editable it shouldn't be removed immidiately even when instant uploading
var canEdit =
query('GET_ALLOW_IMAGE_EDIT') &&
query('GET_IMAGE_EDIT_ALLOW_EDIT') &&
isPreviewableImage(file);
// if the file cannot be edited it should be removed on revert
resolve(!canEdit);
});
});
// open editor when loading a new item
addFilter('DID_LOAD_ITEM', function(item, _ref2) {
var query = _ref2.query,
dispatch = _ref2.dispatch;
return new Promise(function(resolve, reject) {
// if is temp or local file
if (item.origin > 1) {
resolve(item);
return;
}
// get file reference
var file = item.file;
if (
!query('GET_ALLOW_IMAGE_EDIT') ||
!query('GET_IMAGE_EDIT_INSTANT_EDIT')
) {
resolve(item);
return;
}
// exit if this is not an image
if (!isPreviewableImage(file)) {
resolve(item);
return;
}
var createEditorResponseHandler = function createEditorResponseHandler(
item,
resolve,
reject
) {
return function(userDidConfirm) {
// remove item
editRequestQueue.shift();
// handle item
if (userDidConfirm) {
resolve(item);
} else {
reject(item);
}
// TODO: Fix, should not be needed to kick the internal loop in case no processes are running
dispatch('KICK');
// handle next item!
requestEdit();
};
};
var requestEdit = function requestEdit() {
if (!editRequestQueue.length) return;
var _editRequestQueue$ = editRequestQueue[0],
item = _editRequestQueue$.item,
resolve = _editRequestQueue$.resolve,
reject = _editRequestQueue$.reject;
dispatch('EDIT_ITEM', {
id: item.id,
handleEditorResponse: createEditorResponseHandler(
item,
resolve,
reject
)
});
};
queueEditRequest({ item: item, resolve: resolve, reject: reject });
if (editRequestQueue.length === 1) {
requestEdit();
}
});
});
// extend item methods
addFilter('DID_CREATE_ITEM', function(item, _ref3) {
var dispatch = _ref3.dispatch;
item.extend('edit', function() {
dispatch('EDIT_ITEM', { id: item.id });
});
});
var editRequestQueue = [];
var queueEditRequest = function queueEditRequest(editRequest) {
editRequestQueue.push(editRequest);
return editRequest;
};
// called for each view that is created right after the 'create' method
addFilter('CREATE_VIEW', function(viewAPI) {
// get reference to created view
var is = viewAPI.is,
view = viewAPI.view,
query = viewAPI.query;
if (!query('GET_ALLOW_IMAGE_EDIT')) return;
var canShowImagePreview = query('GET_ALLOW_IMAGE_PREVIEW');
// only run for either the file or the file info panel
var shouldExtendView =
(is('file-info') && !canShowImagePreview) ||
(is('file') && canShowImagePreview);
if (!shouldExtendView) return;
// no editor defined, then exit
var editor = query('GET_IMAGE_EDIT_EDITOR');
if (!editor) return;
// set default FilePond options and add bridge once
if (!editor.filepondCallbackBridge) {
editor.outputData = true;
editor.outputFile = false;
editor.filepondCallbackBridge = {
onconfirm: editor.onconfirm || function() {},
oncancel: editor.oncancel || function() {}
};
}
// opens the editor, if it does not already exist, it creates the editor
var openEditor = function openEditor(_ref4) {
var root = _ref4.root,
props = _ref4.props,
action = _ref4.action;
var id = props.id;
var handleEditorResponse = action.handleEditorResponse;
// update editor props that could have changed
editor.cropAspectRatio =
root.query('GET_IMAGE_CROP_ASPECT_RATIO') || editor.cropAspectRatio;
editor.outputCanvasBackgroundColor =
root.query('GET_IMAGE_TRANSFORM_CANVAS_BACKGROUND_COLOR') ||
editor.outputCanvasBackgroundColor;
// get item
var item = root.query('GET_ITEM', id);
if (!item) return;
// file to open
var file = item.file;
// crop data to pass to editor
var crop = item.getMetadata('crop');
var cropDefault = {
center: {
x: 0.5,
y: 0.5
},
flip: {
horizontal: false,
vertical: false
},
zoom: 1,
rotation: 0,
aspectRatio: null
};
// size data to pass to editor
var resize = item.getMetadata('resize');
// filter and color data to pass to editor
var filter = item.getMetadata('filter') || null;
var filters = item.getMetadata('filters') || null;
var colors = item.getMetadata('colors') || null;
var markup = item.getMetadata('markup') || null;
// build parameters object
var imageParameters = {
crop: crop || cropDefault,
size: resize
? {
upscale: resize.upscale,
mode: resize.mode,
width: resize.size.width,
height: resize.size.height
}
: null,
filter: filters
? filters.id || filters.matrix
: root.query('GET_ALLOW_IMAGE_FILTER') &&
root.query('GET_IMAGE_FILTER_COLOR_MATRIX') &&
!colors
? filter
: null,
color: colors,
markup: markup
};
editor.onconfirm = function(_ref5) {
var data = _ref5.data;
var crop = data.crop,
size = data.size,
filter = data.filter,
color = data.color,
colorMatrix = data.colorMatrix,
markup = data.markup;
// create new metadata object
var metadata = {};
// append crop data
if (crop) {
metadata.crop = crop;
}
// append size data
if (size) {
var initialSize = (item.getMetadata('resize') || {}).size;
var targetSize = {
width: size.width,
height: size.height
};
if (!(targetSize.width && targetSize.height) && initialSize) {
targetSize.width = initialSize.width;
targetSize.height = initialSize.height;
}
if (targetSize.width || targetSize.height) {
metadata.resize = {
upscale: size.upscale,
mode: size.mode,
size: targetSize
};
}
}
if (markup) {
metadata.markup = markup;
}
// set filters and colors so we can restore them when re-editing the image
metadata.colors = color;
metadata.filters = filter;
// set merged color matrix to use in preview plugin
metadata.filter = colorMatrix;
// update crop metadata
item.setMetadata(metadata);
// call
editor.filepondCallbackBridge.onconfirm(data, createItemAPI(item));
// used in instant edit mode
if (!handleEditorResponse) return;
editor.onclose = function() {
handleEditorResponse(true);
editor.onclose = null;
};
};
editor.oncancel = function() {
// call
editor.filepondCallbackBridge.oncancel(createItemAPI(item));
// used in instant edit mode
if (!handleEditorResponse) return;
editor.onclose = function() {
handleEditorResponse(false);
editor.onclose = null;
};
};
editor.open(file, imageParameters);
};
/**
* Image Preview related
*/
// create the image edit plugin, but only do so if the item is an image
var didLoadItem = function didLoadItem(_ref6) {
var root = _ref6.root,
props = _ref6.props;
if (!query('GET_IMAGE_EDIT_ALLOW_EDIT')) return;
var id = props.id;
// try to access item
var item = query('GET_ITEM', id);
if (!item) return;
// get the file object
var file = item.file;
// exit if this is not an image
if (!isPreviewableImage(file)) return;
// handle interactions
root.ref.handleEdit = function(e) {
e.stopPropagation();
root.dispatch('EDIT_ITEM', { id: id });
};
if (canShowImagePreview) {
// add edit button to preview
var buttonView = view.createChildView(fileActionButton, {
label: 'edit',
icon: query('GET_IMAGE_EDIT_ICON_EDIT'),
opacity: 0
});
// edit item classname
buttonView.element.classList.add('filepond--action-edit-item');
buttonView.element.dataset.align = query(
'GET_STYLE_IMAGE_EDIT_BUTTON_EDIT_ITEM_POSITION'
);
buttonView.on('click', root.ref.handleEdit);
root.ref.buttonEditItem = view.appendChildView(buttonView);
} else {
// view is file info
var filenameElement = view.element.querySelector(
'.filepond--file-info-main'
);
var editButton = document.createElement('button');
editButton.className = 'filepond--action-edit-item-alt';
editButton.innerHTML =
query('GET_IMAGE_EDIT_ICON_EDIT') + '<span>edit</span>';
editButton.addEventListener('click', root.ref.handleEdit);
filenameElement.appendChild(editButton);
root.ref.editButton = editButton;
}
};
view.registerDestroyer(function(_ref7) {
var root = _ref7.root;
if (root.ref.buttonEditItem) {
root.ref.buttonEditItem.off('click', root.ref.handleEdit);
}
if (root.ref.editButton) {
root.ref.editButton.removeEventListener('click', root.ref.handleEdit);
}
});
var routes = {
EDIT_ITEM: openEditor,
DID_LOAD_ITEM: didLoadItem
};
if (canShowImagePreview) {
// view is file
var didPreviewUpdate = function didPreviewUpdate(_ref8) {
var root = _ref8.root;
if (!root.ref.buttonEditItem) return;
root.ref.buttonEditItem.opacity = 1;
};
routes.DID_IMAGE_PREVIEW_SHOW = didPreviewUpdate;
}
// start writing
view.registerWriter(createRoute(routes));
});
// Expose plugin options
return {
options: {
// enable or disable image editing
allowImageEdit: [true, Type.BOOLEAN],
// location of processing button
styleImageEditButtonEditItemPosition: ['bottom center', Type.STRING],
// open editor when image is dropped
imageEditInstantEdit: [false, Type.BOOLEAN],
// allow editing
imageEditAllowEdit: [true, Type.BOOLEAN],
// the icon to use for the edit button
imageEditIconEdit: [
'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M8.5 17h1.586l7-7L15.5 8.414l-7 7V17zm-1.707-2.707l8-8a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-8 8A1 1 0 0 1 10.5 19h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707z" fill="currentColor" fill-rule="nonzero"/></svg>',
Type.STRING
],
// editor object
imageEditEditor: [null, Type.OBJECT]
}
};
};
// fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
var isBrowser =
typeof window !== 'undefined' && typeof window.document !== 'undefined';
if (isBrowser) {
document.dispatchEvent(
new CustomEvent('FilePond:pluginloaded', { detail: plugin })
);
}
return plugin;
});
} (filepondPluginImageEdit$3));
return filepondPluginImageEdit$3.exports;
}
var filepondPluginImageEditExports = requireFilepondPluginImageEdit();
var filepondPluginImageEdit = /*@__PURE__*/getDefaultExportFromCjs(filepondPluginImageEditExports);
var filepondPluginImageEdit$1 = /*#__PURE__*/_mergeNamespaces({
__proto__: null,
default: filepondPluginImageEdit
}, [filepondPluginImageEditExports]);
export { filepondPluginImageEdit$1 as f };