@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/filepond-plugin-image-edit.js

@@ -1,9 +1,494 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{g as i}from"./_commonjsHelpers.js";function n(i,n){return n.forEach((function(n){n&&"string"!=typeof n&&!Array.isArray(n)&&Object.keys(n).forEach((function(t){if("default"!==t&&!(t in i)){var e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:function(){return n[t]}})}}))})),Object.freeze(i)}var t,e,o,E={exports:{}},r=t?E.exports:(t=1,E.exports=(e=function(i){return/^image/.test(i.type)},o=function(i){var n=i.addFilter,t=i.utils,o=t.Type,E=t.createRoute,r=t.createItemAPI,l=void 0===r?function(i){return i}:r,_=i.views.fileActionButton;n("SHOULD_REMOVE_ON_REVERT",(function(i,n){var t=n.item,o=n.query;return new Promise((function(i){var n=t.file;i(!(o("GET_ALLOW_IMAGE_EDIT")&&o("GET_IMAGE_EDIT_ALLOW_EDIT")&&e(n)))}))})),n("DID_LOAD_ITEM",(function(i,n){var t=n.query,o=n.dispatch;return new Promise((function(n,E){if(i.origin>1)n(i);else{var r=i.file;if(t("GET_ALLOW_IMAGE_EDIT")&&t("GET_IMAGE_EDIT_INSTANT_EDIT"))if(e(r)){var l=function(i,n,t){return function(e){a.shift(),e?n(i):t(i),o("KICK"),_()}},_=function(){if(a.length){var i=a[0],n=i.item;o("EDIT_ITEM",{id:n.id,handleEditorResponse:l(n,i.resolve,i.reject)})}};u({item:i,resolve:n,reject:E}),1===a.length&&_()}else n(i);else n(i)}}))})),n("DID_CREATE_ITEM",(function(i,n){var t=n.dispatch;i.extend("edit",(function(){t("EDIT_ITEM",{id:i.id})}))}));var a=[],u=function(i){return a.push(i),i};return n("CREATE_VIEW",(function(i){var n=i.is,t=i.view,o=i.query;if(o("GET_ALLOW_IMAGE_EDIT")){var r=o("GET_ALLOW_IMAGE_PREVIEW");if(n("file-info")&&!r||n("file")&&r){var a=o("GET_IMAGE_EDIT_EDITOR");if(a){a.filepondCallbackBridge||(a.outputData=!0,a.outputFile=!1,a.filepondCallbackBridge={onconfirm:a.onconfirm||function(){},oncancel:a.oncancel||function(){}});t.registerDestroyer((function(i){var n=i.root;n.ref.buttonEditItem&&n.ref.buttonEditItem.off("click",n.ref.handleEdit),n.ref.editButton&&n.ref.editButton.removeEventListener("click",n.ref.handleEdit)}));var u={EDIT_ITEM:function(i){var n=i.root,t=i.props.id,e=i.action.handleEditorResponse;a.cropAspectRatio=n.query("GET_IMAGE_CROP_ASPECT_RATIO")||a.cropAspectRatio,a.outputCanvasBackgroundColor=n.query("GET_IMAGE_TRANSFORM_CANVAS_BACKGROUND_COLOR")||a.outputCanvasBackgroundColor;var o=n.query("GET_ITEM",t);if(o){var E=o.file,r=o.getMetadata("crop"),_=o.getMetadata("resize"),u=o.getMetadata("filter")||null,f=o.getMetadata("filters")||null,I=o.getMetadata("colors")||null,c=o.getMetadata("markup")||null,T={crop:r||{center:{x:.5,y:.5},flip:{horizontal:!1,vertical:!1},zoom:1,rotation:0,aspectRatio:null},size:_?{upscale:_.upscale,mode:_.mode,width:_.size.width,height:_.size.height}:null,filter:f?f.id||f.matrix:n.query("GET_ALLOW_IMAGE_FILTER")&&n.query("GET_IMAGE_FILTER_COLOR_MATRIX")&&!I?u:null,color:I,markup:c};a.onconfirm=function(i){var n=i.data,t=n.crop,E=n.size,r=n.filter,_=n.color,u=n.colorMatrix,f=n.markup,I={};if(t&&(I.crop=t),E){var c=(o.getMetadata("resize")||{}).size,T={width:E.width,height:E.height};T.width&&T.height||!c||(T.width=c.width,T.height=c.height),(T.width||T.height)&&(I.resize={upscale:E.upscale,mode:E.mode,size:T})}f&&(I.markup=f),I.colors=_,I.filters=r,I.filter=u,o.setMetadata(I),a.filepondCallbackBridge.onconfirm(n,l(o)),e&&(a.onclose=function(){e(!0),a.onclose=null})},a.oncancel=function(){a.filepondCallbackBridge.oncancel(l(o)),e&&(a.onclose=function(){e(!1),a.onclose=null})},a.open(E,T)}},DID_LOAD_ITEM:function(i){var n=i.root,E=i.props;if(o("GET_IMAGE_EDIT_ALLOW_EDIT")){var l=E.id,a=o("GET_ITEM",l);if(a&&e(a.file))if(n.ref.handleEdit=function(i){i.stopPropagation(),n.dispatch("EDIT_ITEM",{id:l})},r){var u=t.createChildView(_,{label:"edit",icon:o("GET_IMAGE_EDIT_ICON_EDIT"),opacity:0});u.element.classList.add("filepond--action-edit-item"),u.element.dataset.align=o("GET_STYLE_IMAGE_EDIT_BUTTON_EDIT_ITEM_POSITION"),u.on("click",n.ref.handleEdit),n.ref.buttonEditItem=t.appendChildView(u)}else{var f=t.element.querySelector(".filepond--file-info-main"),I=document.createElement("button");I.className="filepond--action-edit-item-alt",I.innerHTML=o("GET_IMAGE_EDIT_ICON_EDIT")+"<span>edit</span>",I.addEventListener("click",n.ref.handleEdit),f.appendChild(I),n.ref.editButton=I}}}};r&&(u.DID_IMAGE_PREVIEW_SHOW=function(i){var n=i.root;n.ref.buttonEditItem&&(n.ref.buttonEditItem.opacity=1)}),t.registerWriter(E(u))}}}})),{options:{allowImageEdit:[!0,o.BOOLEAN],styleImageEditButtonEditItemPosition:["bottom center",o.STRING],imageEditInstantEdit:[!1,o.BOOLEAN],imageEditAllowEdit:[!0,o.BOOLEAN],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>',o.STRING],imageEditEditor:[null,o.OBJECT]}}},"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:o})),o)),l=n({__proto__:null,default:i(r)},[r]);
+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.
- */export{l as f}
+ */
+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 };