editorjs-image 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +140 -136
  2. package/dist/image-tool-tune.js +2 -0
  3. package/dist/image-tool-tune.js.LICENSE.txt +9 -0
  4. package/index.html +92 -0
  5. package/package.json +6 -1
  6. package/src/image-tool-tune.js +1 -1
  7. package/src/index.js +2 -2
  8. package/webpack.config.js +20 -0
package/README.md CHANGED
@@ -1,136 +1,140 @@
1
-
2
- ![Logo](https://i.ibb.co/0F1Pfxb/image.png)
3
-
4
-
5
- # Mention Tool Plugin for Editor.js
6
- ## Demo
7
-
8
- https://mention-tool-editorjs.vercel.app/
9
-
10
-
11
- ## Installation
12
-
13
- Install with npm
14
-
15
- ```bash
16
- npm install editorjs-mention-tool
17
- ```
18
-
19
- ## Usage/Examples
20
-
21
- ```javascript
22
- // Here Import react with useEffect
23
- import React, { useEffect } from 'react'
24
-
25
- // Here EditorJS with some plugins
26
- import { createReactEditorJS } from 'react-editor-js'
27
- import Header from "@editorjs/header"
28
- import Paragraph from '@editorjs/paragraph'
29
-
30
- // Here mention module
31
- import MentionTool from 'editorjs-mention-tool'
32
- import "editorjs-mention-tool/src/styles.css"
33
-
34
-
35
-
36
- const CustomEditor = () => {
37
-
38
- const editorCore = React.useRef(null)
39
-
40
- const handleInitialize = React.useCallback((instance) => {
41
- editorCore.current = instance
42
- }, [])
43
-
44
- const ReactEditorJS = createReactEditorJS() // Initialize editor
45
-
46
- const EDITOR_JS_TOOLS = {
47
- paragraph: {
48
- class: Paragraph,
49
- inlineToolbar: true,
50
- },
51
- header: Header,
52
- }
53
-
54
- useEffect(() => {
55
-
56
- // Here create new MentionTool with $ accessor key to use it as variable layout
57
- new MentionTool({
58
- holder: 'editorHolder', // This is the editor Holder ( see below )
59
- accessKey: "$", // Access key ( $ or @ )
60
- allUsers: [ // The array with the data you want to show when the users type $
61
- {
62
- "id": "1234",
63
- "name": "Variable 1",
64
- "slug": "variable1"
65
- },
66
- {
67
- "id": "12345",
68
- "name": "Thing of v1",
69
- "slug": "variable1.something"
70
- },
71
- ],
72
- baseUrl: '',
73
- searchAPIUrl: ''
74
- })
75
-
76
- // Here create new MentionTool with @ accessor key to use it as mention layout
77
- new MentionTool({
78
- holder: 'editorHolder', // This is the editor Holder ( see below )
79
- accessKey: "@", // Access key ( $ or @ )
80
- allUsers: [ // The array with the data you want to show when the users type @
81
- {
82
- "id": "21029",
83
- "name": "Kyle Ockford",
84
- "avatar": "https://i.pravatar.cc/300",
85
- "slug": "kyleockford"
86
- },
87
- {
88
- "id": "21030",
89
- "name": "Paige Cortez",
90
- "avatar": "https://avatars.dicebear.com/api/croodles/your-custom-seed.svg",
91
- "slug": "paigecortez"
92
- },
93
- {
94
- "id": "21031",
95
- "name": "Nyla Warren",
96
- "slug": "nylawarren"
97
- },
98
- {
99
- "id": "21032",
100
- "name": "Hassan Lee",
101
- "slug": "hassanlee"
102
- },
103
- {
104
- "id": "21033",
105
- "name": "Domas Rivas",
106
- "avatar": "https://avatars.dicebear.com/api/pixel-art-neutral/kreudev.svg",
107
- "slug": "domasrivas"
108
- },
109
- {
110
- "id": "21034",
111
- "name": "Arthur Hunt",
112
- "slug": "arthurhunt"
113
- },
114
- ],
115
- baseUrl: '',
116
- searchAPIUrl: ''
117
- })
118
- }, [])
119
-
120
- return (
121
- <ReactEditorJS onInitialize={handleInitialize} tools={EDITOR_JS_TOOLS} placeholder={`Write something here...`} holder="editorHolder">
122
- <div id="editorHolder" />
123
- </ReactEditorJS>
124
- )
125
- }
126
-
127
- // Return the CustomEditor to use by other components.
128
-
129
- export default CustomEditor
130
- ```
131
-
132
-
133
- ## Screenshots
134
-
135
- ![App ddd](https://i.ibb.co/yhFCVH9/image.png)
136
-
1
+ # Image Tool Tune
2
+
3
+ Tunes for the Image Tool Block [Editor.js](https://editorjs.io).
4
+
5
+ ## Features
6
+
7
+ - Float Image Left/Right
8
+ - Resize : 50%, 70%, 100%
9
+ - Manual resizing
10
+ - Image cropping
11
+
12
+ **Notes**
13
+
14
+ The Float functionnality is done in pure CSS. Works seamlessly when creating block, nevertheless, when using it along side Resize or Crop, it might be usefull sometimes to deactivate it while resizing/cropping as it will prevent the next content block from overlapping the current image block, when finished you can reactivate it.
15
+
16
+ ## Installation
17
+
18
+ ### Install via NPM
19
+
20
+ The package is not available on NPM yet.
21
+
22
+
23
+ ### Other methods
24
+
25
+ #### Manual downloading and connecting
26
+
27
+ 1. Download the file `dist/image-tool-tune.js` to you project
28
+ 2. Include the script where you normally import other Editor Js Tools.
29
+ 3. Add new options to the EditorJS Class
30
+
31
+
32
+ ## Import in Simple HTML
33
+
34
+ Include the script where you normally import other Editor Js Tools.
35
+
36
+ ```html
37
+ <!--Editor JS-->
38
+ <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.27.2/dist/editorjs.umd.min.js"></script>
39
+ <!--Editor Tool JS-->
40
+ <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script>
41
+ <!--Editor Tool Tune-->
42
+ <script src="./dist/image-tool-tune.js"></script>
43
+ [...BODY...]
44
+ <script>
45
+ //On DOM LOADED
46
+ document.addEventListener( 'DOMContentLoaded', function () {
47
+ //Get tune class
48
+ const ImageToolTune = window.ImageToolTune;
49
+ //Get tool class
50
+ const ImageTool = window.ImageTool;
51
+
52
+ //Init editor JS
53
+ } );
54
+ </script>
55
+ ```
56
+
57
+
58
+ ## Import in Node (React, Next...)
59
+ ```javascript
60
+ //IMPORT EDITOR JS
61
+ import EditorJS from '@editorjs/editorjs';
62
+
63
+ //IMPORT IMAGE TOOL
64
+ import ImageTool from '@editorjs/image';
65
+
66
+ //IMPORT IMAGE TOOL TUNE (CHANGE PATH ACCORDING TO YOU CONFIG)
67
+ import ImageToolTune from '../lib/image-tool-tune';
68
+
69
+ ```
70
+
71
+ ## Load tool in editor js
72
+ ```javascript
73
+ const editor = new EditorJS( {
74
+ holder: 'editorjs', //Your Editor JS Holder ID
75
+ tools: {
76
+ //LOAD THE TUNE
77
+ imageTune: ImageToolTune,
78
+ image: {
79
+ //APPLY THE TUNE TO THE TOOL
80
+ tunes: [ 'imageTune' ],
81
+ class: ImageTool,
82
+ },
83
+ },
84
+ data: {}, //EditorJS Json for loading pre-saved blocks
85
+ });
86
+ ```
87
+
88
+ ## Output data
89
+
90
+ This Tunes returns `tunes.imageTune` with following format
91
+
92
+ | Field | Type | Description |
93
+ | -------------- | --------- | ------------------------------- |
94
+ | floatLeft | `boolean` | Image is floating to left |
95
+ | floatRight | `boolean` | Image is floating to right |
96
+ | center | `boolean` | Image has a margin:auto |
97
+ | sizeSmall | `boolean` | Image width is 50% of its container |
98
+ | sizeMiddle | `boolean` | Image width is 70% of its container |
99
+ | sizeLarge | `boolean` | Image width is 100% of its container |
100
+ | resize | `boolean` | Manual resize mode activated ? |
101
+ | resizeSize | `integer` | Width (in px) of the resized image |
102
+ | crop | `boolean` | Manual cropping mode activated ? |
103
+ | cropperFrameHeight | `integer` | Height (in px) of the image relative container |
104
+ | cropperFrameWidth | `integer` | Width (in px) of the image relative container |
105
+ | cropperFrameLeft | `integer` | Left position (in px) of the image |
106
+ | cropperFrameTop | `integer` | Top position (in px) of the image |
107
+ | cropperImageHeight | `integer` | Height (in px) of the image |
108
+ | cropperImageWidth | `integer` | Width (in px) of the image |
109
+
110
+
111
+
112
+
113
+ ```json
114
+ {
115
+ "tunes": {
116
+ "imageTune": {
117
+ "floatLeft": true,
118
+ "floatRight": false,
119
+ "center": false,
120
+ "sizeSmall": false,
121
+ "sizeMiddle": false,
122
+ "sizeLarge": false,
123
+ "resize": false,
124
+ "resizeSize": 0,
125
+ "crop": true,
126
+ "cropperFrameHeight": 158.16171875000003,
127
+ "cropperFrameWidth": 180.2658808997665,
128
+ "cropperFrameLeft": -222.4233718312208,
129
+ "cropperFrameTop": -149.29999999999995,
130
+ "cropperImageHeight": 638,
131
+ "cropperImageWidth": 639.7024683122081
132
+ }
133
+ }
134
+ }
135
+ ```
136
+
137
+
138
+ ### About cropping
139
+ The cropping functionnality is implemented using Cropper.js v1.5.13.
140
+ All documentation available here : https://fengyuanchen.github.io/cropperjs
package/dist/image-tool-tune.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see image-tool-tune.js.LICENSE.txt */
2
+ var ImageToolTune;(()=>{var t={472:(t,e,i)=>{"use strict";i.d(e,{Z:()=>d});var a=i(81),n=i.n(a),o=i(645),r=i.n(o),s=i(667),h=i.n(s),c=new URL(i(738),i.b),l=r()(n()),p=h()(c);l.push([t.id,`/*!\n * Cropper.js v1.5.13\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2022-11-20T05:30:43.444Z\n */\n.cropper-container {\n direction: ltr;\n font-size: 0;\n line-height: 0;\n position: relative;\n -ms-touch-action: none;\n touch-action: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none\n}\n\n.cropper-container img {\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n display: block;\n height: 100%;\n image-orientation: 0deg;\n max-height: none !important;\n max-width: none !important;\n min-height: 0 !important;\n min-width: 0 !important;\n width: 100%\n}\n\n.cropper-canvas,\n.cropper-crop-box,\n.cropper-drag-box,\n.cropper-modal,\n.cropper-wrap-box {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0\n}\n\n.cropper-canvas,\n.cropper-wrap-box {\n overflow: hidden\n}\n\n.cropper-drag-box {\n background-color: #fff;\n opacity: 0\n}\n\n.cropper-modal {\n background-color: #000;\n opacity: .5\n}\n\n.cropper-view-box {\n display: block;\n height: 100%;\n outline: 1px solid #39f;\n outline-color: rgba(51, 153, 255, .75);\n overflow: hidden;\n width: 100%\n}\n\n.cropper-dashed {\n border: 0 dashed #eee;\n display: block;\n opacity: .5;\n position: absolute\n}\n\n.cropper-dashed.dashed-h {\n border-bottom-width: 1px;\n border-top-width: 1px;\n height: 33.33333%;\n left: 0;\n top: 33.33333%;\n width: 100%\n}\n\n.cropper-dashed.dashed-v {\n border-left-width: 1px;\n border-right-width: 1px;\n height: 100%;\n left: 33.33333%;\n top: 0;\n width: 33.33333%\n}\n\n.cropper-center {\n display: block;\n height: 0;\n left: 50%;\n opacity: .75;\n position: absolute;\n top: 50%;\n width: 0\n}\n\n.cropper-center:after,\n.cropper-center:before {\n background-color: #eee;\n content: " ";\n display: block;\n position: absolute\n}\n\n.cropper-center:before {\n height: 1px;\n left: -3px;\n top: 0;\n width: 7px\n}\n\n.cropper-center:after {\n height: 7px;\n left: 0;\n top: -3px;\n width: 1px\n}\n\n.cropper-face,\n.cropper-line,\n.cropper-point {\n display: block;\n height: 100%;\n opacity: .1;\n position: absolute;\n width: 100%\n}\n\n.cropper-face {\n background-color: #fff;\n left: 0;\n top: 0\n}\n\n.cropper-line {\n background-color: #39f\n}\n\n.cropper-line.line-e {\n cursor: ew-resize;\n right: -3px;\n top: 0;\n width: 5px\n}\n\n.cropper-line.line-n {\n cursor: ns-resize;\n height: 5px;\n left: 0;\n top: -3px\n}\n\n.cropper-line.line-w {\n cursor: ew-resize;\n left: -3px;\n top: 0;\n width: 5px\n}\n\n.cropper-line.line-s {\n bottom: -3px;\n cursor: ns-resize;\n height: 5px;\n left: 0\n}\n\n.cropper-point {\n background-color: #39f;\n height: 5px;\n opacity: .75;\n width: 5px\n}\n\n.cropper-point.point-e {\n cursor: ew-resize;\n margin-top: -3px;\n right: -3px;\n top: 50%\n}\n\n.cropper-point.point-n {\n cursor: ns-resize;\n left: 50%;\n margin-left: -3px;\n top: -3px\n}\n\n.cropper-point.point-w {\n cursor: ew-resize;\n left: -3px;\n margin-top: -3px;\n top: 50%\n}\n\n.cropper-point.point-s {\n bottom: -3px;\n cursor: s-resize;\n left: 50%;\n margin-left: -3px\n}\n\n.cropper-point.point-ne {\n cursor: nesw-resize;\n right: -3px;\n top: -3px\n}\n\n.cropper-point.point-nw {\n cursor: nwse-resize;\n left: -3px;\n top: -3px\n}\n\n.cropper-point.point-sw {\n bottom: -3px;\n cursor: nesw-resize;\n left: -3px\n}\n\n.cropper-point.point-se {\n bottom: -3px;\n cursor: nwse-resize;\n height: 20px;\n opacity: 1;\n right: -3px;\n width: 20px\n}\n\n@media (min-width:768px) {\n .cropper-point.point-se {\n height: 15px;\n width: 15px\n }\n}\n\n@media (min-width:992px) {\n .cropper-point.point-se {\n height: 10px;\n width: 10px\n }\n}\n\n@media (min-width:1200px) {\n .cropper-point.point-se {\n height: 5px;\n opacity: .75;\n width: 5px\n }\n}\n\n.cropper-point.point-se:before {\n background-color: #39f;\n bottom: -50%;\n content: " ";\n display: block;\n height: 200%;\n opacity: 0;\n position: absolute;\n right: -50%;\n width: 200%\n}\n\n.cropper-invisible {\n opacity: 0\n}\n\n.cropper-bg {\n background-image: url(${p})\n}\n\n.cropper-hide {\n display: block;\n height: 0;\n position: absolute;\n width: 0\n}\n\n.cropper-hidden {\n display: none !important\n}\n\n.cropper-move {\n cursor: move\n}\n\n.cropper-crop {\n cursor: crosshair\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n cursor: not-allowed\n}`,""]);const d=l},59:(t,e,i)=>{"use strict";i.d(e,{Z:()=>s});var a=i(81),n=i.n(a),o=i(645),r=i.n(o)()(n());r.push([t.id,".cdx-image-tool-tune--floatLeft.ce-block__content,\n.cdx-image-tool-tune--floatRight.ce-block__content {\n min-height: 20px;\n padding-top: 20px;\n margin-bottom: -20px;\n margin-top: -20px;\n}\n\n.cdx-image-tool-tune--center .cdx-block {\n margin: auto;\n}\n\n.cdx-image-tool-tune--floatLeft .cdx-block {\n float: left;\n margin-right: 10px;\n}\n\n.cdx-image-tool-tune--floatRight .cdx-block {\n float: right;\n margin-left: 10px;\n}\n\n.cdx-image-tool-tune--sizeSmall .cdx-block {\n max-width: 50%;\n}\n\n.cdx-image-tool-tune--sizeMiddle .cdx-block {\n max-width: 70%;\n}\n\n.cdx-image-tool-tune--sizeLarge .cdx-block {\n max-width: 100%;\n}\n\n\n\n.cdx-image-tool-tune--resize .cdx-block {\n position: relative;\n overflow: visible;\n}\n\n.cdx-image-tool-tune--resize .cdx-block .resizable {\n display: none;\n}\n\n.cdx-image-tool-tune--resize .cdx-block:hover .resizable {\n display: block;\n}\n\n.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: white;\n border: 3px solid #4286f4;\n position: absolute;\n}\n\n.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.top-left {\n left: -5px;\n top: -5px;\n cursor: nwse-resize;\n /*resizer cursor*/\n}\n\n.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.top-right {\n right: -5px;\n top: -5px;\n cursor: nesw-resize;\n}\n\n.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.bottom-left {\n left: -5px;\n bottom: -5px;\n cursor: nesw-resize;\n}\n\n.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.bottom-right {\n right: -5px;\n bottom: -5px;\n cursor: nwse-resize;\n}\n\n\n\n\n.cdx-image-tool-tune--crop:hover,\n.cdx-image-tool-tune--crop.isCropping,\n.cdx-image-tool-tune--resize:hover {\n z-index: 1;\n}\n\n.cdx-image-tool-tune--crop .image-tool__image {\n position: relative;\n}\n\n.cdx-image-tool-tune--crop .isCropping .image-tool__image {\n min-height: 600px;\n min-width: 100%;\n}\n\n\n\n.cdx-image-tool-tune--crop .image-tool__image .crop-btn,\n.cdx-image-tool-tune--crop .image-tool__image .crop-save {\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n background: #4286f4;\n border-radius: 5px;\n color: white;\n text-align: center;\n line-height: 20px;\n cursor: pointer;\n display: none;\n}\n\n.cdx-image-tool-tune--crop .image-tool__image:hover .crop-btn,\n.cdx-image-tool-tune--crop .image-tool__image:hover .crop-save {\n display: block;\n}\n\n.cdx-image-tool-tune--crop .image-tool__image img.isCropped {\n position: absolute;\n min-width: unset;\n max-width: unset;\n min-height: unset;\n max-height: unset;\n}\n\n.cdx-image-tool-tune--crop .cdx-block.image-tool.isCropping {\n min-width: unset !important;\n max-width: unset !important;\n min-height: unset !important;\n max-height: unset !important;\n}",""]);const s=r},645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i="",a=void 0!==e[5];return e[4]&&(i+="@supports (".concat(e[4],") {")),e[2]&&(i+="@media ".concat(e[2]," {")),a&&(i+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),i+=t(e),a&&(i+="}"),e[2]&&(i+="}"),e[4]&&(i+="}"),i})).join("")},e.i=function(t,i,a,n,o){"string"==typeof t&&(t=[[null,t,void 0]]);var r={};if(a)for(var s=0;s<this.length;s++){var h=this[s][0];null!=h&&(r[h]=!0)}for(var c=0;c<t.length;c++){var l=[].concat(t[c]);a&&r[l[0]]||(void 0!==o&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),i&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=i):l[2]=i),n&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=n):l[4]="".concat(n)),e.push(l))}},e}},667:t=>{"use strict";t.exports=function(t,e){return e||(e={}),t?(t=String(t.__esModule?t.default:t),/^['"].*['"]$/.test(t)&&(t=t.slice(1,-1)),e.hash&&(t+=e.hash),/["'() \t\n]|(%20)/.test(t)||e.needQuotes?'"'.concat(t.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):t):t}},81:t=>{"use strict";t.exports=function(t){return t[1]}},379:t=>{"use strict";var e=[];function i(t){for(var i=-1,a=0;a<e.length;a++)if(e[a].identifier===t){i=a;break}return i}function a(t,a){for(var o={},r=[],s=0;s<t.length;s++){var h=t[s],c=a.base?h[0]+a.base:h[0],l=o[c]||0,p="".concat(c," ").concat(l);o[c]=l+1;var d=i(p),m={css:h[1],media:h[2],sourceMap:h[3],supports:h[4],layer:h[5]};if(-1!==d)e[d].references++,e[d].updater(m);else{var g=n(m,a);a.byIndex=s,e.splice(s,0,{identifier:p,updater:g,references:1})}r.push(p)}return r}function n(t,e){var i=e.domAPI(e);return i.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;i.update(t=e)}else i.remove()}}t.exports=function(t,n){var o=a(t=t||[],n=n||{});return function(t){t=t||[];for(var r=0;r<o.length;r++){var s=i(o[r]);e[s].references--}for(var h=a(t,n),c=0;c<o.length;c++){var l=i(o[c]);0===e[l].references&&(e[l].updater(),e.splice(l,1))}o=h}}},569:t=>{"use strict";var e={};t.exports=function(t,i){var a=function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(t){i=null}e[t]=i}return e[t]}(t);if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(i)}},216:t=>{"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},565:(t,e,i)=>{"use strict";t.exports=function(t){var e=i.nc;e&&t.setAttribute("nonce",e)}},795:t=>{"use strict";t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(i){!function(t,e,i){var a="";i.supports&&(a+="@supports (".concat(i.supports,") {")),i.media&&(a+="@media ".concat(i.media," {"));var n=void 0!==i.layer;n&&(a+="@layer".concat(i.layer.length>0?" ".concat(i.layer):""," {")),a+=i.css,n&&(a+="}"),i.media&&(a+="}"),i.supports&&(a+="}");var o=i.sourceMap;o&&"undefined"!=typeof btoa&&(a+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleTagTransform(a,t,e.options)}(e,t,i)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},314:function(t){t.exports=function(){"use strict";function t(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,a)}return i}function e(e){for(var i=1;i<arguments.length;i++){var a=null!=arguments[i]?arguments[i]:{};i%2?t(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):t(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function a(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function n(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function o(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,a=new Array(e);i<e;i++)a[i]=t[i];return a}var s="undefined"!=typeof window&&void 0!==window.document,h=s?window:{},c=!(!s||!h.document.documentElement)&&"ontouchstart"in h.document.documentElement,l=!!s&&"PointerEvent"in h,p="cropper",d="all",m="crop",g="move",u="zoom",f="e",v="w",b="s",w="n",x="ne",y="nw",C="se",z="sw",M="".concat(p,"-crop"),k="".concat(p,"-disabled"),L="".concat(p,"-hidden"),B="".concat(p,"-hide"),E="".concat(p,"-invisible"),S="".concat(p,"-modal"),H="".concat(p,"-move"),D="".concat(p,"Action"),N="".concat(p,"Preview"),T="crop",A="move",W="none",I="crop",R="cropend",_="cropmove",O="cropstart",V="dblclick",F=l?"pointerdown":c?"touchstart":"mousedown",X=l?"pointermove":c?"touchmove":"mousemove",Y=l?"pointerup pointercancel":c?"touchend touchcancel":"mouseup",j="ready",P="resize",Z="wheel",U="zoom",q="image/jpeg",Q=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,$=/^data:/,G=/^data:image\/jpeg;base64,/,K=/^img|canvas$/i,J={viewMode:0,dragMode:T,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},tt=Number.isNaN||h.isNaN;function et(t){return"number"==typeof t&&!tt(t)}var it=function(t){return t>0&&t<1/0};function at(t){return void 0===t}function nt(t){return"object"===i(t)&&null!==t}var ot=Object.prototype.hasOwnProperty;function rt(t){if(!nt(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&ot.call(i,"isPrototypeOf")}catch(t){return!1}}function st(t){return"function"==typeof t}var ht=Array.prototype.slice;function ct(t){return Array.from?Array.from(t):ht.call(t)}function lt(t,e){return t&&st(e)&&(Array.isArray(t)||et(t.length)?ct(t).forEach((function(i,a){e.call(t,i,a,t)})):nt(t)&&Object.keys(t).forEach((function(i){e.call(t,t[i],i,t)}))),t}var pt=Object.assign||function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),a=1;a<e;a++)i[a-1]=arguments[a];return nt(t)&&i.length>0&&i.forEach((function(e){nt(e)&&Object.keys(e).forEach((function(i){t[i]=e[i]}))})),t},dt=/\.\d*(?:0|9){12}\d*$/;function mt(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1e11;return dt.test(t)?Math.round(t*e)/e:t}var gt=/^width|height|left|top|marginLeft|marginTop$/;function ut(t,e){var i=t.style;lt(e,(function(t,e){gt.test(e)&&et(t)&&(t="".concat(t,"px")),i[e]=t}))}function ft(t,e){if(e)if(et(t.length))lt(t,(function(t){ft(t,e)}));else if(t.classList)t.classList.add(e);else{var i=t.className.trim();i?i.indexOf(e)<0&&(t.className="".concat(i," ").concat(e)):t.className=e}}function vt(t,e){e&&(et(t.length)?lt(t,(function(t){vt(t,e)})):t.classList?t.classList.remove(e):t.className.indexOf(e)>=0&&(t.className=t.className.replace(e,"")))}function bt(t,e,i){e&&(et(t.length)?lt(t,(function(t){bt(t,e,i)})):i?ft(t,e):vt(t,e))}var wt=/([a-z\d])([A-Z])/g;function xt(t){return t.replace(wt,"$1-$2").toLowerCase()}function yt(t,e){return nt(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-".concat(xt(e)))}function Ct(t,e,i){nt(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-".concat(xt(e)),i)}var zt=/\s\s*/,Mt=function(){var t=!1;if(s){var e=!1,i=function(){},a=Object.defineProperty({},"once",{get:function(){return t=!0,e},set:function(t){e=t}});h.addEventListener("test",i,a),h.removeEventListener("test",i,a)}return t}();function kt(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=i;e.trim().split(zt).forEach((function(e){if(!Mt){var o=t.listeners;o&&o[e]&&o[e][i]&&(n=o[e][i],delete o[e][i],0===Object.keys(o[e]).length&&delete o[e],0===Object.keys(o).length&&delete t.listeners)}t.removeEventListener(e,n,a)}))}function Lt(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=i;e.trim().split(zt).forEach((function(e){if(a.once&&!Mt){var o=t.listeners,r=void 0===o?{}:o;n=function(){delete r[e][i],t.removeEventListener(e,n,a);for(var o=arguments.length,s=new Array(o),h=0;h<o;h++)s[h]=arguments[h];i.apply(t,s)},r[e]||(r[e]={}),r[e][i]&&t.removeEventListener(e,r[e][i],a),r[e][i]=n,t.listeners=r}t.addEventListener(e,n,a)}))}function Bt(t,e,i){var a;return st(Event)&&st(CustomEvent)?a=new CustomEvent(e,{detail:i,bubbles:!0,cancelable:!0}):(a=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i),t.dispatchEvent(a)}function Et(t){var e=t.getBoundingClientRect();return{left:e.left+(window.pageXOffset-document.documentElement.clientLeft),top:e.top+(window.pageYOffset-document.documentElement.clientTop)}}var St=h.location,Ht=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function Dt(t){var e=t.match(Ht);return null!==e&&(e[1]!==St.protocol||e[2]!==St.hostname||e[3]!==St.port)}function Nt(t){var e="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+e}function Tt(t){var e=t.rotate,i=t.scaleX,a=t.scaleY,n=t.translateX,o=t.translateY,r=[];et(n)&&0!==n&&r.push("translateX(".concat(n,"px)")),et(o)&&0!==o&&r.push("translateY(".concat(o,"px)")),et(e)&&0!==e&&r.push("rotate(".concat(e,"deg)")),et(i)&&1!==i&&r.push("scaleX(".concat(i,")")),et(a)&&1!==a&&r.push("scaleY(".concat(a,")"));var s=r.length?r.join(" "):"none";return{WebkitTransform:s,msTransform:s,transform:s}}function At(t,i){var a=t.pageX,n=t.pageY,o={endX:a,endY:n};return i?o:e({startX:a,startY:n},o)}function Wt(t){var e=t.aspectRatio,i=t.height,a=t.width,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"contain",o=it(a),r=it(i);if(o&&r){var s=i*e;"contain"===n&&s>a||"cover"===n&&s<a?i=a/e:a=i*e}else o?i=a/e:r&&(a=i*e);return{width:a,height:i}}var It=String.fromCharCode;var Rt=/^data:.*,/;function _t(t){var e,i=new DataView(t);try{var a,n,o;if(255===i.getUint8(0)&&216===i.getUint8(1))for(var r=i.byteLength,s=2;s+1<r;){if(255===i.getUint8(s)&&225===i.getUint8(s+1)){n=s;break}s+=1}if(n){var h=n+10;if("Exif"===function(t,e,i){var a="";i+=e;for(var n=e;n<i;n+=1)a+=It(t.getUint8(n));return a}(i,n+4,4)){var c=i.getUint16(h);if(((a=18761===c)||19789===c)&&42===i.getUint16(h+2,a)){var l=i.getUint32(h+4,a);l>=8&&(o=h+l)}}}if(o){var p,d,m=i.getUint16(o,a);for(d=0;d<m;d+=1)if(p=o+12*d+2,274===i.getUint16(p,a)){p+=8,e=i.getUint16(p,a),i.setUint16(p,1,a);break}}}catch(t){e=1}return e}var Ot={render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function(){var t=this.element,e=this.options,i=this.container,a=this.cropper,n=Number(e.minContainerWidth),o=Number(e.minContainerHeight);ft(a,L),vt(t,L);var r={width:Math.max(i.offsetWidth,n>=0?n:200),height:Math.max(i.offsetHeight,o>=0?o:100)};this.containerData=r,ut(a,{width:r.width,height:r.height}),ft(t,L),vt(a,L)},initCanvas:function(){var t=this.containerData,e=this.imageData,i=this.options.viewMode,a=Math.abs(e.rotate)%180==90,n=a?e.naturalHeight:e.naturalWidth,o=a?e.naturalWidth:e.naturalHeight,r=n/o,s=t.width,h=t.height;t.height*r>t.width?3===i?s=t.height*r:h=t.width/r:3===i?h=t.width/r:s=t.height*r;var c={aspectRatio:r,naturalWidth:n,naturalHeight:o,width:s,height:h};this.canvasData=c,this.limited=1===i||2===i,this.limitCanvas(!0,!0),c.width=Math.min(Math.max(c.width,c.minWidth),c.maxWidth),c.height=Math.min(Math.max(c.height,c.minHeight),c.maxHeight),c.left=(t.width-c.width)/2,c.top=(t.height-c.height)/2,c.oldLeft=c.left,c.oldTop=c.top,this.initialCanvasData=pt({},c)},limitCanvas:function(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,r=i.viewMode,s=n.aspectRatio,h=this.cropped&&o;if(t){var c=Number(i.minCanvasWidth)||0,l=Number(i.minCanvasHeight)||0;r>1?(c=Math.max(c,a.width),l=Math.max(l,a.height),3===r&&(l*s>c?c=l*s:l=c/s)):r>0&&(c?c=Math.max(c,h?o.width:0):l?l=Math.max(l,h?o.height:0):h&&(c=o.width,(l=o.height)*s>c?c=l*s:l=c/s));var p=Wt({aspectRatio:s,width:c,height:l});c=p.width,l=p.height,n.minWidth=c,n.minHeight=l,n.maxWidth=1/0,n.maxHeight=1/0}if(e)if(r>(h?0:1)){var d=a.width-n.width,m=a.height-n.height;n.minLeft=Math.min(0,d),n.minTop=Math.min(0,m),n.maxLeft=Math.max(0,d),n.maxTop=Math.max(0,m),h&&this.limited&&(n.minLeft=Math.min(o.left,o.left+(o.width-n.width)),n.minTop=Math.min(o.top,o.top+(o.height-n.height)),n.maxLeft=o.left,n.maxTop=o.top,2===r&&(n.width>=a.width&&(n.minLeft=Math.min(0,d),n.maxLeft=Math.max(0,d)),n.height>=a.height&&(n.minTop=Math.min(0,m),n.maxTop=Math.max(0,m))))}else n.minLeft=-n.width,n.minTop=-n.height,n.maxLeft=a.width,n.maxTop=a.height},renderCanvas:function(t,e){var i=this.canvasData,a=this.imageData;if(e){var n=function(t){var e=t.width,i=t.height,a=t.degree;if(90==(a=Math.abs(a)%180))return{width:i,height:e};var n=a%90*Math.PI/180,o=Math.sin(n),r=Math.cos(n),s=e*r+i*o,h=e*o+i*r;return a>90?{width:h,height:s}:{width:s,height:h}}({width:a.naturalWidth*Math.abs(a.scaleX||1),height:a.naturalHeight*Math.abs(a.scaleY||1),degree:a.rotate||0}),o=n.width,r=n.height,s=i.width*(o/i.naturalWidth),h=i.height*(r/i.naturalHeight);i.left-=(s-i.width)/2,i.top-=(h-i.height)/2,i.width=s,i.height=h,i.aspectRatio=o/r,i.naturalWidth=o,i.naturalHeight=r,this.limitCanvas(!0,!1)}(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCanvas(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,ut(this.canvas,pt({width:i.width,height:i.height},Tt({translateX:i.left,translateY:i.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function(t){var e=this.canvasData,i=this.imageData,a=i.naturalWidth*(e.width/e.naturalWidth),n=i.naturalHeight*(e.height/e.naturalHeight);pt(i,{width:a,height:n,left:(e.width-a)/2,top:(e.height-n)/2}),ut(this.image,pt({width:i.width,height:i.height},Tt(pt({translateX:i.left,translateY:i.top},i)))),t&&this.output()},initCropBox:function(){var t=this.options,e=this.canvasData,i=t.aspectRatio||t.initialAspectRatio,a=Number(t.autoCropArea)||.8,n={width:e.width,height:e.height};i&&(e.height*i>e.width?n.height=n.width/i:n.width=n.height*i),this.cropBoxData=n,this.limitCropBox(!0,!0),n.width=Math.min(Math.max(n.width,n.minWidth),n.maxWidth),n.height=Math.min(Math.max(n.height,n.minHeight),n.maxHeight),n.width=Math.max(n.minWidth,n.width*a),n.height=Math.max(n.minHeight,n.height*a),n.left=e.left+(e.width-n.width)/2,n.top=e.top+(e.height-n.height)/2,n.oldLeft=n.left,n.oldTop=n.top,this.initialCropBoxData=pt({},n)},limitCropBox:function(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,r=this.limited,s=i.aspectRatio;if(t){var h=Number(i.minCropBoxWidth)||0,c=Number(i.minCropBoxHeight)||0,l=r?Math.min(a.width,n.width,n.width+n.left,a.width-n.left):a.width,p=r?Math.min(a.height,n.height,n.height+n.top,a.height-n.top):a.height;h=Math.min(h,a.width),c=Math.min(c,a.height),s&&(h&&c?c*s>h?c=h/s:h=c*s:h?c=h/s:c&&(h=c*s),p*s>l?p=l/s:l=p*s),o.minWidth=Math.min(h,l),o.minHeight=Math.min(c,p),o.maxWidth=l,o.maxHeight=p}e&&(r?(o.minLeft=Math.max(0,n.left),o.minTop=Math.max(0,n.top),o.maxLeft=Math.min(a.width,n.left+n.width)-o.width,o.maxTop=Math.min(a.height,n.top+n.height)-o.height):(o.minLeft=0,o.minTop=0,o.maxLeft=a.width-o.width,o.maxTop=a.height-o.height))},renderCropBox:function(){var t=this.options,e=this.containerData,i=this.cropBoxData;(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCropBox(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,t.movable&&t.cropBoxMovable&&Ct(this.face,D,i.width>=e.width&&i.height>=e.height?g:d),ut(this.cropBox,pt({width:i.width,height:i.height},Tt({translateX:i.left,translateY:i.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function(){this.preview(),Bt(this.element,I,this.getData())}},Vt={initPreview:function(){var t=this.element,e=this.crossOrigin,i=this.options.preview,a=e?this.crossOriginUrl:this.url,n=t.alt||"The image to preview",o=document.createElement("img");if(e&&(o.crossOrigin=e),o.src=a,o.alt=n,this.viewBox.appendChild(o),this.viewBoxImage=o,i){var r=i;"string"==typeof i?r=t.ownerDocument.querySelectorAll(i):i.querySelector&&(r=[i]),this.previews=r,lt(r,(function(t){var i=document.createElement("img");Ct(t,N,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),e&&(i.crossOrigin=e),i.src=a,i.alt=n,i.style.cssText='display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"',t.innerHTML="",t.appendChild(i)}))}},resetPreview:function(){lt(this.previews,(function(t){var e=yt(t,N);ut(t,{width:e.width,height:e.height}),t.innerHTML=e.html,function(t,e){if(nt(t[e]))try{delete t[e]}catch(i){t[e]=void 0}else if(t.dataset)try{delete t.dataset[e]}catch(i){t.dataset[e]=void 0}else t.removeAttribute("data-".concat(xt(e)))}(t,N)}))},preview:function(){var t=this.imageData,e=this.canvasData,i=this.cropBoxData,a=i.width,n=i.height,o=t.width,r=t.height,s=i.left-e.left-t.left,h=i.top-e.top-t.top;this.cropped&&!this.disabled&&(ut(this.viewBoxImage,pt({width:o,height:r},Tt(pt({translateX:-s,translateY:-h},t)))),lt(this.previews,(function(e){var i=yt(e,N),c=i.width,l=i.height,p=c,d=l,m=1;a&&(d=n*(m=c/a)),n&&d>l&&(p=a*(m=l/n),d=l),ut(e,{width:p,height:d}),ut(e.getElementsByTagName("img")[0],pt({width:o*m,height:r*m},Tt(pt({translateX:-s*m,translateY:-h*m},t))))})))}},Ft={bind:function(){var t=this.element,e=this.options,i=this.cropper;st(e.cropstart)&&Lt(t,O,e.cropstart),st(e.cropmove)&&Lt(t,_,e.cropmove),st(e.cropend)&&Lt(t,R,e.cropend),st(e.crop)&&Lt(t,I,e.crop),st(e.zoom)&&Lt(t,U,e.zoom),Lt(i,F,this.onCropStart=this.cropStart.bind(this)),e.zoomable&&e.zoomOnWheel&&Lt(i,Z,this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&Lt(i,V,this.onDblclick=this.dblclick.bind(this)),Lt(t.ownerDocument,X,this.onCropMove=this.cropMove.bind(this)),Lt(t.ownerDocument,Y,this.onCropEnd=this.cropEnd.bind(this)),e.responsive&&Lt(window,P,this.onResize=this.resize.bind(this))},unbind:function(){var t=this.element,e=this.options,i=this.cropper;st(e.cropstart)&&kt(t,O,e.cropstart),st(e.cropmove)&&kt(t,_,e.cropmove),st(e.cropend)&&kt(t,R,e.cropend),st(e.crop)&&kt(t,I,e.crop),st(e.zoom)&&kt(t,U,e.zoom),kt(i,F,this.onCropStart),e.zoomable&&e.zoomOnWheel&&kt(i,Z,this.onWheel,{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&kt(i,V,this.onDblclick),kt(t.ownerDocument,X,this.onCropMove),kt(t.ownerDocument,Y,this.onCropEnd),e.responsive&&kt(window,P,this.onResize)}},Xt={resize:function(){if(!this.disabled){var t,e,i=this.options,a=this.container,n=this.containerData,o=a.offsetWidth/n.width,r=a.offsetHeight/n.height,s=Math.abs(o-1)>Math.abs(r-1)?o:r;1!==s&&(i.restore&&(t=this.getCanvasData(),e=this.getCropBoxData()),this.render(),i.restore&&(this.setCanvasData(lt(t,(function(e,i){t[i]=e*s}))),this.setCropBoxData(lt(e,(function(t,i){e[i]=t*s})))))}},dblclick:function(){var t,e;this.disabled||this.options.dragMode===W||this.setDragMode((t=this.dragBox,e=M,(t.classList?t.classList.contains(e):t.className.indexOf(e)>-1)?A:T))},wheel:function(t){var e=this,i=Number(this.options.wheelZoomRatio)||.1,a=1;this.disabled||(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout((function(){e.wheeling=!1}),50),t.deltaY?a=t.deltaY>0?1:-1:t.wheelDelta?a=-t.wheelDelta/120:t.detail&&(a=t.detail>0?1:-1),this.zoom(-a*i,t)))},cropStart:function(t){var e=t.buttons,i=t.button;if(!(this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(et(e)&&1!==e||et(i)&&0!==i||t.ctrlKey))){var a,n=this.options,o=this.pointers;t.changedTouches?lt(t.changedTouches,(function(t){o[t.identifier]=At(t)})):o[t.pointerId||0]=At(t),a=Object.keys(o).length>1&&n.zoomable&&n.zoomOnTouch?u:yt(t.target,D),Q.test(a)&&!1!==Bt(this.element,O,{originalEvent:t,action:a})&&(t.preventDefault(),this.action=a,this.cropping=!1,a===m&&(this.cropping=!0,ft(this.dragBox,S)))}},cropMove:function(t){var e=this.action;if(!this.disabled&&e){var i=this.pointers;t.preventDefault(),!1!==Bt(this.element,_,{originalEvent:t,action:e})&&(t.changedTouches?lt(t.changedTouches,(function(t){pt(i[t.identifier]||{},At(t,!0))})):pt(i[t.pointerId||0]||{},At(t,!0)),this.change(t))}},cropEnd:function(t){if(!this.disabled){var e=this.action,i=this.pointers;t.changedTouches?lt(t.changedTouches,(function(t){delete i[t.identifier]})):delete i[t.pointerId||0],e&&(t.preventDefault(),Object.keys(i).length||(this.action=""),this.cropping&&(this.cropping=!1,bt(this.dragBox,S,this.cropped&&this.options.modal)),Bt(this.element,R,{originalEvent:t,action:e}))}}},Yt={change:function(t){var i,a=this.options,n=this.canvasData,o=this.containerData,r=this.cropBoxData,s=this.pointers,h=this.action,c=a.aspectRatio,l=r.left,p=r.top,M=r.width,k=r.height,B=l+M,E=p+k,S=0,H=0,D=o.width,N=o.height,T=!0;!c&&t.shiftKey&&(c=M&&k?M/k:1),this.limited&&(S=r.minLeft,H=r.minTop,D=S+Math.min(o.width,n.width,n.left+n.width),N=H+Math.min(o.height,n.height,n.top+n.height));var A=s[Object.keys(s)[0]],W={x:A.endX-A.startX,y:A.endY-A.startY},I=function(t){switch(t){case f:B+W.x>D&&(W.x=D-B);break;case v:l+W.x<S&&(W.x=S-l);break;case w:p+W.y<H&&(W.y=H-p);break;case b:E+W.y>N&&(W.y=N-E)}};switch(h){case d:l+=W.x,p+=W.y;break;case f:if(W.x>=0&&(B>=D||c&&(p<=H||E>=N))){T=!1;break}I(f),(M+=W.x)<0&&(h=v,l-=M=-M),c&&(k=M/c,p+=(r.height-k)/2);break;case w:if(W.y<=0&&(p<=H||c&&(l<=S||B>=D))){T=!1;break}I(w),k-=W.y,p+=W.y,k<0&&(h=b,p-=k=-k),c&&(M=k*c,l+=(r.width-M)/2);break;case v:if(W.x<=0&&(l<=S||c&&(p<=H||E>=N))){T=!1;break}I(v),M-=W.x,l+=W.x,M<0&&(h=f,l-=M=-M),c&&(k=M/c,p+=(r.height-k)/2);break;case b:if(W.y>=0&&(E>=N||c&&(l<=S||B>=D))){T=!1;break}I(b),(k+=W.y)<0&&(h=w,p-=k=-k),c&&(M=k*c,l+=(r.width-M)/2);break;case x:if(c){if(W.y<=0&&(p<=H||B>=D)){T=!1;break}I(w),k-=W.y,p+=W.y,M=k*c}else I(w),I(f),W.x>=0?B<D?M+=W.x:W.y<=0&&p<=H&&(T=!1):M+=W.x,W.y<=0?p>H&&(k-=W.y,p+=W.y):(k-=W.y,p+=W.y);M<0&&k<0?(h=z,p-=k=-k,l-=M=-M):M<0?(h=y,l-=M=-M):k<0&&(h=C,p-=k=-k);break;case y:if(c){if(W.y<=0&&(p<=H||l<=S)){T=!1;break}I(w),k-=W.y,p+=W.y,M=k*c,l+=r.width-M}else I(w),I(v),W.x<=0?l>S?(M-=W.x,l+=W.x):W.y<=0&&p<=H&&(T=!1):(M-=W.x,l+=W.x),W.y<=0?p>H&&(k-=W.y,p+=W.y):(k-=W.y,p+=W.y);M<0&&k<0?(h=C,p-=k=-k,l-=M=-M):M<0?(h=x,l-=M=-M):k<0&&(h=z,p-=k=-k);break;case z:if(c){if(W.x<=0&&(l<=S||E>=N)){T=!1;break}I(v),M-=W.x,l+=W.x,k=M/c}else I(b),I(v),W.x<=0?l>S?(M-=W.x,l+=W.x):W.y>=0&&E>=N&&(T=!1):(M-=W.x,l+=W.x),W.y>=0?E<N&&(k+=W.y):k+=W.y;M<0&&k<0?(h=x,p-=k=-k,l-=M=-M):M<0?(h=C,l-=M=-M):k<0&&(h=y,p-=k=-k);break;case C:if(c){if(W.x>=0&&(B>=D||E>=N)){T=!1;break}I(f),k=(M+=W.x)/c}else I(b),I(f),W.x>=0?B<D?M+=W.x:W.y>=0&&E>=N&&(T=!1):M+=W.x,W.y>=0?E<N&&(k+=W.y):k+=W.y;M<0&&k<0?(h=y,p-=k=-k,l-=M=-M):M<0?(h=z,l-=M=-M):k<0&&(h=x,p-=k=-k);break;case g:this.move(W.x,W.y),T=!1;break;case u:this.zoom(function(t){var i=e({},t),a=0;return lt(t,(function(t,e){delete i[e],lt(i,(function(e){var i=Math.abs(t.startX-e.startX),n=Math.abs(t.startY-e.startY),o=Math.abs(t.endX-e.endX),r=Math.abs(t.endY-e.endY),s=Math.sqrt(i*i+n*n),h=(Math.sqrt(o*o+r*r)-s)/s;Math.abs(h)>Math.abs(a)&&(a=h)}))})),a}(s),t),T=!1;break;case m:if(!W.x||!W.y){T=!1;break}i=Et(this.cropper),l=A.startX-i.left,p=A.startY-i.top,M=r.minWidth,k=r.minHeight,W.x>0?h=W.y>0?C:x:W.x<0&&(l-=M,h=W.y>0?z:y),W.y<0&&(p-=k),this.cropped||(vt(this.cropBox,L),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))}T&&(r.width=M,r.height=k,r.left=l,r.top=p,this.action=h,this.renderCropBox()),lt(s,(function(t){t.startX=t.endX,t.startY=t.endY}))}},jt={crop:function(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&ft(this.dragBox,S),vt(this.cropBox,L),this.setCropBoxData(this.initialCropBoxData)),this},reset:function(){return this.ready&&!this.disabled&&(this.imageData=pt({},this.initialImageData),this.canvasData=pt({},this.initialCanvasData),this.cropBoxData=pt({},this.initialCropBoxData),this.renderCanvas(),this.cropped&&this.renderCropBox()),this},clear:function(){return this.cropped&&!this.disabled&&(pt(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),vt(this.dragBox,S),ft(this.cropBox,L)),this},replace:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!this.disabled&&t&&(this.isImg&&(this.element.src=t),e?(this.url=t,this.image.src=t,this.ready&&(this.viewBoxImage.src=t,lt(this.previews,(function(e){e.getElementsByTagName("img")[0].src=t})))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(t))),this},enable:function(){return this.ready&&this.disabled&&(this.disabled=!1,vt(this.cropper,k)),this},disable:function(){return this.ready&&!this.disabled&&(this.disabled=!0,ft(this.cropper,k)),this},destroy:function(){var t=this.element;return t[p]?(t[p]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate(),this):this},move:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=i.left,n=i.top;return this.moveTo(at(t)?t:a+Number(t),at(e)?e:n+Number(e))},moveTo:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.movable&&(et(t)&&(i.left=t,a=!0),et(e)&&(i.top=e,a=!0),a&&this.renderCanvas(!0)),this},zoom:function(t,e){var i=this.canvasData;return t=(t=Number(t))<0?1/(1-t):1+t,this.zoomTo(i.width*t/i.naturalWidth,null,e)},zoomTo:function(t,e,i){var a=this.options,n=this.canvasData,o=n.width,r=n.height,s=n.naturalWidth,h=n.naturalHeight;if((t=Number(t))>=0&&this.ready&&!this.disabled&&a.zoomable){var c=s*t,l=h*t;if(!1===Bt(this.element,U,{ratio:t,oldRatio:o/s,originalEvent:i}))return this;if(i){var p=this.pointers,d=Et(this.cropper),m=p&&Object.keys(p).length?function(t){var e=0,i=0,a=0;return lt(t,(function(t){var n=t.startX,o=t.startY;e+=n,i+=o,a+=1})),{pageX:e/=a,pageY:i/=a}}(p):{pageX:i.pageX,pageY:i.pageY};n.left-=(c-o)*((m.pageX-d.left-n.left)/o),n.top-=(l-r)*((m.pageY-d.top-n.top)/r)}else rt(e)&&et(e.x)&&et(e.y)?(n.left-=(c-o)*((e.x-n.left)/o),n.top-=(l-r)*((e.y-n.top)/r)):(n.left-=(c-o)/2,n.top-=(l-r)/2);n.width=c,n.height=l,this.renderCanvas(!0)}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function(t){return et(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function(t){var e=this.imageData.scaleY;return this.scale(t,et(e)?e:1)},scaleY:function(t){var e=this.imageData.scaleX;return this.scale(et(e)?e:1,t)},scale:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=this.imageData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.scalable&&(et(t)&&(i.scaleX=t,a=!0),et(e)&&(i.scaleY=e,a=!0),a&&this.renderCanvas(!0,!0)),this},getData:function(){var t,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],i=this.options,a=this.imageData,n=this.canvasData,o=this.cropBoxData;if(this.ready&&this.cropped){t={x:o.left-n.left,y:o.top-n.top,width:o.width,height:o.height};var r=a.width/a.naturalWidth;if(lt(t,(function(e,i){t[i]=e/r})),e){var s=Math.round(t.y+t.height),h=Math.round(t.x+t.width);t.x=Math.round(t.x),t.y=Math.round(t.y),t.width=h-t.x,t.height=s-t.y}}else t={x:0,y:0,width:0,height:0};return i.rotatable&&(t.rotate=a.rotate||0),i.scalable&&(t.scaleX=a.scaleX||1,t.scaleY=a.scaleY||1),t},setData:function(t){var e=this.options,i=this.imageData,a=this.canvasData,n={};if(this.ready&&!this.disabled&&rt(t)){var o=!1;e.rotatable&&et(t.rotate)&&t.rotate!==i.rotate&&(i.rotate=t.rotate,o=!0),e.scalable&&(et(t.scaleX)&&t.scaleX!==i.scaleX&&(i.scaleX=t.scaleX,o=!0),et(t.scaleY)&&t.scaleY!==i.scaleY&&(i.scaleY=t.scaleY,o=!0)),o&&this.renderCanvas(!0,!0);var r=i.width/i.naturalWidth;et(t.x)&&(n.left=t.x*r+a.left),et(t.y)&&(n.top=t.y*r+a.top),et(t.width)&&(n.width=t.width*r),et(t.height)&&(n.height=t.height*r),this.setCropBoxData(n)}return this},getContainerData:function(){return this.ready?pt({},this.containerData):{}},getImageData:function(){return this.sized?pt({},this.imageData):{}},getCanvasData:function(){var t=this.canvasData,e={};return this.ready&&lt(["left","top","width","height","naturalWidth","naturalHeight"],(function(i){e[i]=t[i]})),e},setCanvasData:function(t){var e=this.canvasData,i=e.aspectRatio;return this.ready&&!this.disabled&&rt(t)&&(et(t.left)&&(e.left=t.left),et(t.top)&&(e.top=t.top),et(t.width)?(e.width=t.width,e.height=t.width/i):et(t.height)&&(e.height=t.height,e.width=t.height*i),this.renderCanvas(!0)),this},getCropBoxData:function(){var t,e=this.cropBoxData;return this.ready&&this.cropped&&(t={left:e.left,top:e.top,width:e.width,height:e.height}),t||{}},setCropBoxData:function(t){var e,i,a=this.cropBoxData,n=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&rt(t)&&(et(t.left)&&(a.left=t.left),et(t.top)&&(a.top=t.top),et(t.width)&&t.width!==a.width&&(e=!0,a.width=t.width),et(t.height)&&t.height!==a.height&&(i=!0,a.height=t.height),n&&(e?a.height=a.width/n:i&&(a.width=a.height*n)),this.renderCropBox()),this},getCroppedCanvas:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.ready||!window.HTMLCanvasElement)return null;var e=this.canvasData,i=function(t,e,i,a){var n=e.aspectRatio,r=e.naturalWidth,s=e.naturalHeight,h=e.rotate,c=void 0===h?0:h,l=e.scaleX,p=void 0===l?1:l,d=e.scaleY,m=void 0===d?1:d,g=i.aspectRatio,u=i.naturalWidth,f=i.naturalHeight,v=a.fillColor,b=void 0===v?"transparent":v,w=a.imageSmoothingEnabled,x=void 0===w||w,y=a.imageSmoothingQuality,C=void 0===y?"low":y,z=a.maxWidth,M=void 0===z?1/0:z,k=a.maxHeight,L=void 0===k?1/0:k,B=a.minWidth,E=void 0===B?0:B,S=a.minHeight,H=void 0===S?0:S,D=document.createElement("canvas"),N=D.getContext("2d"),T=Wt({aspectRatio:g,width:M,height:L}),A=Wt({aspectRatio:g,width:E,height:H},"cover"),W=Math.min(T.width,Math.max(A.width,u)),I=Math.min(T.height,Math.max(A.height,f)),R=Wt({aspectRatio:n,width:M,height:L}),_=Wt({aspectRatio:n,width:E,height:H},"cover"),O=Math.min(R.width,Math.max(_.width,r)),V=Math.min(R.height,Math.max(_.height,s)),F=[-O/2,-V/2,O,V];return D.width=mt(W),D.height=mt(I),N.fillStyle=b,N.fillRect(0,0,W,I),N.save(),N.translate(W/2,I/2),N.rotate(c*Math.PI/180),N.scale(p,m),N.imageSmoothingEnabled=x,N.imageSmoothingQuality=C,N.drawImage.apply(N,[t].concat(o(F.map((function(t){return Math.floor(mt(t))}))))),N.restore(),D}(this.image,this.imageData,e,t);if(!this.cropped)return i;var a=this.getData(),n=a.x,r=a.y,s=a.width,h=a.height,c=i.width/Math.floor(e.naturalWidth);1!==c&&(n*=c,r*=c,s*=c,h*=c);var l=s/h,p=Wt({aspectRatio:l,width:t.maxWidth||1/0,height:t.maxHeight||1/0}),d=Wt({aspectRatio:l,width:t.minWidth||0,height:t.minHeight||0},"cover"),m=Wt({aspectRatio:l,width:t.width||(1!==c?i.width:s),height:t.height||(1!==c?i.height:h)}),g=m.width,u=m.height;g=Math.min(p.width,Math.max(d.width,g)),u=Math.min(p.height,Math.max(d.height,u));var f=document.createElement("canvas"),v=f.getContext("2d");f.width=mt(g),f.height=mt(u),v.fillStyle=t.fillColor||"transparent",v.fillRect(0,0,g,u);var b=t.imageSmoothingEnabled,w=void 0===b||b,x=t.imageSmoothingQuality;v.imageSmoothingEnabled=w,x&&(v.imageSmoothingQuality=x);var y,C,z,M,k,L,B=i.width,E=i.height,S=n,H=r;S<=-s||S>B?(S=0,y=0,z=0,k=0):S<=0?(z=-S,S=0,k=y=Math.min(B,s+S)):S<=B&&(z=0,k=y=Math.min(s,B-S)),y<=0||H<=-h||H>E?(H=0,C=0,M=0,L=0):H<=0?(M=-H,H=0,L=C=Math.min(E,h+H)):H<=E&&(M=0,L=C=Math.min(h,E-H));var D=[S,H,y,C];if(k>0&&L>0){var N=g/s;D.push(z*N,M*N,k*N,L*N)}return v.drawImage.apply(v,[i].concat(o(D.map((function(t){return Math.floor(mt(t))}))))),f},setAspectRatio:function(t){var e=this.options;return this.disabled||at(t)||(e.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped&&this.renderCropBox())),this},setDragMode:function(t){var e=this.options,i=this.dragBox,a=this.face;if(this.ready&&!this.disabled){var n=t===T,o=e.movable&&t===A;t=n||o?t:W,e.dragMode=t,Ct(i,D,t),bt(i,M,n),bt(i,H,o),e.cropBoxMovable||(Ct(a,D,t),bt(a,M,n),bt(a,H,o))}return this}},Pt=h.Cropper,Zt=function(){function t(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),!e||!K.test(e.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=e,this.options=pt({},J,rt(i)&&i),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}return e=t,n=[{key:"noConflict",value:function(){return window.Cropper=Pt,t}},{key:"setDefaults",value:function(t){pt(J,rt(t)&&t)}}],(i=[{key:"init",value:function(){var t,e=this.element,i=e.tagName.toLowerCase();if(!e[p]){if(e[p]=this,"img"===i){if(this.isImg=!0,t=e.getAttribute("src")||"",this.originalUrl=t,!t)return;t=e.src}else"canvas"===i&&window.HTMLCanvasElement&&(t=e.toDataURL());this.load(t)}}},{key:"load",value:function(t){var e,i,a,n,o=this;if(t){this.url=t,this.imageData={};var r=this.element,s=this.options;if(s.rotatable||s.scalable||(s.checkOrientation=!1),s.checkOrientation&&window.ArrayBuffer)if($.test(t))G.test(t)?this.read((e=t.replace(Rt,""),i=atob(e),a=new ArrayBuffer(i.length),lt(n=new Uint8Array(a),(function(t,e){n[e]=i.charCodeAt(e)})),a)):this.clone();else{var h=new XMLHttpRequest,c=this.clone.bind(this);this.reloading=!0,this.xhr=h,h.onabort=c,h.onerror=c,h.ontimeout=c,h.onprogress=function(){h.getResponseHeader("content-type")!==q&&h.abort()},h.onload=function(){o.read(h.response)},h.onloadend=function(){o.reloading=!1,o.xhr=null},s.checkCrossOrigin&&Dt(t)&&r.crossOrigin&&(t=Nt(t)),h.open("GET",t,!0),h.responseType="arraybuffer",h.withCredentials="use-credentials"===r.crossOrigin,h.send()}else this.clone()}}},{key:"read",value:function(t){var e=this.options,i=this.imageData,a=_t(t),n=0,o=1,r=1;if(a>1){this.url=function(t,e){for(var i=[],a=new Uint8Array(t);a.length>0;)i.push(It.apply(null,ct(a.subarray(0,8192)))),a=a.subarray(8192);return"data:".concat(e,";base64,").concat(btoa(i.join("")))}(t,q);var s=function(t){var e=0,i=1,a=1;switch(t){case 2:i=-1;break;case 3:e=-180;break;case 4:a=-1;break;case 5:e=90,a=-1;break;case 6:e=90;break;case 7:e=90,i=-1;break;case 8:e=-90}return{rotate:e,scaleX:i,scaleY:a}}(a);n=s.rotate,o=s.scaleX,r=s.scaleY}e.rotatable&&(i.rotate=n),e.scalable&&(i.scaleX=o,i.scaleY=r),this.clone()}},{key:"clone",value:function(){var t=this.element,e=this.url,i=t.crossOrigin,a=e;this.options.checkCrossOrigin&&Dt(e)&&(i||(i="anonymous"),a=Nt(e)),this.crossOrigin=i,this.crossOriginUrl=a;var n=document.createElement("img");i&&(n.crossOrigin=i),n.src=a||e,n.alt=t.alt||"The image to crop",this.image=n,n.onload=this.start.bind(this),n.onerror=this.stop.bind(this),ft(n,B),t.parentNode.insertBefore(n,t.nextSibling)}},{key:"start",value:function(){var t=this,e=this.image;e.onload=null,e.onerror=null,this.sizing=!0;var i=h.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(h.navigator.userAgent),a=function(e,i){pt(t.imageData,{naturalWidth:e,naturalHeight:i,aspectRatio:e/i}),t.initialImageData=pt({},t.imageData),t.sizing=!1,t.sized=!0,t.build()};if(!e.naturalWidth||i){var n=document.createElement("img"),o=document.body||document.documentElement;this.sizingImage=n,n.onload=function(){a(n.width,n.height),i||o.removeChild(n)},n.src=e.src,i||(n.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;",o.appendChild(n))}else a(e.naturalWidth,e.naturalHeight)}},{key:"stop",value:function(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function(){if(this.sized&&!this.ready){var t=this.element,e=this.options,i=this.image,a=t.parentNode,n=document.createElement("div");n.innerHTML='<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>';var o=n.querySelector(".".concat(p,"-container")),r=o.querySelector(".".concat(p,"-canvas")),s=o.querySelector(".".concat(p,"-drag-box")),h=o.querySelector(".".concat(p,"-crop-box")),c=h.querySelector(".".concat(p,"-face"));this.container=a,this.cropper=o,this.canvas=r,this.dragBox=s,this.cropBox=h,this.viewBox=o.querySelector(".".concat(p,"-view-box")),this.face=c,r.appendChild(i),ft(t,L),a.insertBefore(o,t.nextSibling),vt(i,B),this.initPreview(),this.bind(),e.initialAspectRatio=Math.max(0,e.initialAspectRatio)||NaN,e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,ft(h,L),e.guides||ft(h.getElementsByClassName("".concat(p,"-dashed")),L),e.center||ft(h.getElementsByClassName("".concat(p,"-center")),L),e.background&&ft(o,"".concat(p,"-bg")),e.highlight||ft(c,E),e.cropBoxMovable&&(ft(c,H),Ct(c,D,d)),e.cropBoxResizable||(ft(h.getElementsByClassName("".concat(p,"-line")),L),ft(h.getElementsByClassName("".concat(p,"-point")),L)),this.render(),this.ready=!0,this.setDragMode(e.dragMode),e.autoCrop&&this.crop(),this.setData(e.data),st(e.ready)&&Lt(t,j,e.ready,{once:!0}),Bt(t,j)}}},{key:"unbuild",value:function(){if(this.ready){this.ready=!1,this.unbind(),this.resetPreview();var t=this.cropper.parentNode;t&&t.removeChild(this.cropper),vt(this.element,L)}}},{key:"uncreate",value:function(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}])&&a(e.prototype,i),n&&a(e,n),Object.defineProperty(e,"prototype",{writable:!1}),t;var e,i,n}();return pt(Zt.prototype,Ot,Vt,Ft,Xt,Yt,jt),Zt}()},382:(t,e,i)=>{"use strict";i.d(e,{Z:()=>y});var a=i(379),n=i.n(a),o=i(795),r=i.n(o),s=i(569),h=i.n(s),c=i(565),l=i.n(c),p=i(216),d=i.n(p),m=i(589),g=i.n(m),u=i(59),f={};f.styleTagTransform=g(),f.setAttributes=l(),f.insert=h().bind(null,"head"),f.domAPI=r(),f.insertStyleElement=d(),n()(u.Z,f),u.Z&&u.Z.locals&&u.Z.locals;var v=i(314),b=i.n(v),w=i(472),x={};x.styleTagTransform=g(),x.setAttributes=l(),x.insert=h().bind(null,"head"),x.domAPI=r(),x.insertStyleElement=d(),n()(w.Z,x),w.Z&&w.Z.locals&&w.Z.locals;const y=class{constructor({api:t,data:e,config:i,block:a}){this.settings=[{name:"floatLeft",icon:'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM608 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H96c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h512zM152 436h400v152H152V436zm552 210c0 4.4 3.6 8 8 8h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H712c-4.4 0-8 3.6-8 8v56zm8-204h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H712c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"></path></svg>',label:"",group:"align"},{name:"center",icon:'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM848 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H176c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h672zM232 436h560v152H232V436z"></path></svg>',label:"",group:"align"},{name:"floatRight",icon:'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-24 500c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H416c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h512zM472 436h400v152H472V436zM80 646c0 4.4 3.6 8 8 8h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v56zm8-204h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"></path></svg>',label:"",group:"align"},{name:"sizeSmall",icon:'<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',label:"50%",group:"size"},{name:"sizeMiddle",icon:'<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',label:"70%",group:"size"},{name:"sizeLarge",icon:'<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',label:"100%",group:"size"},{name:"resize",icon:'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M29 30l1 90h36V66h26V30H29zm99 0v36h72V30h-72zm108 0v36h72V30h-72zm108 0v36h72V30h-72zm102 0v78h36V30h-36zm-206 80v36h100.543l-118 118H30v218h218V289.457l118-118V272h36V110H240zm206 34v72h36v-72h-36zM30 156v72h36v-72H30zm416 96v72h36v-72h-36zm0 108v72h36v-72h-36zm-166 86v36h72v-36h-72zm108 0v36h72v-36h-72z"></path></svg>',label:"",group:"size"},{name:"crop",icon:'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15h2v2h-2v-2zm0-4h2v2h-2v-2zm2 8h-2v2c1 0 2-1 2-2zM13 3h2v2h-2V3zm8 4h2v2h-2V7zm0-4v2h2c0-1-1-2-2-2zM1 7h2v2H1V7zm16-4h2v2h-2V3zm0 16h2v2h-2v-2zM3 3C2 3 1 4 1 5h2V3zm6 0h2v2H9V3zM5 3h2v2H5V3zm-4 8v8c0 1.1.9 2 2 2h12V11H1zm2 8l2.5-3.21 1.79 2.15 2.5-3.22L13 19H3z"></path></svg>',label:"",group:"size"}],this.api=t,this.block=a,this.config=i,this.data={floatLeft:void 0!==e&&void 0!==e.floatLeft&&e.floatLeft,floatRight:void 0!==e&&void 0!==e.floatRight&&e.floatRight,center:void 0!==e&&void 0!==e.center&&e.center,sizeSmall:void 0!==e&&void 0!==e.sizeSmall&&e.sizeSmall,sizeMiddle:void 0!==e&&void 0!==e.sizeMiddle&&e.sizeMiddle,sizeLarge:void 0!==e&&void 0!==e.sizeLarge&&e.sizeLarge,resize:void 0!==e&&void 0!==e.resize&&e.resize,resizeSize:void 0!==e&&void 0!==e.resizeSize?e.resizeSize:0,crop:void 0!==e&&void 0!==e.crop&&e.crop,cropperFrameHeight:void 0!==e&&void 0!==e.cropperFrameHeight?e.cropperFrameHeight:0,cropperFrameWidth:void 0!==e&&void 0!==e.cropperFrameWidth?e.cropperFrameWidth:0,cropperFrameLeft:void 0!==e&&void 0!==e.cropperFrameLeft?e.cropperFrameLeft:0,cropperFrameTop:void 0!==e&&void 0!==e.cropperFrameTop?e.cropperFrameTop:0,cropperImageHeight:void 0!==e&&void 0!==e.cropperImageHeight?e.cropperImageHeight:0,cropperImageWidth:void 0!==e&&void 0!==e.cropperImageWidth?e.cropperImageWidth:0,cropperInterface:void 0},this.wrapper=void 0,this.buttons=[]}static get isTune(){return!0}static get sanitize(){return{floatLeft:{},floatRight:{},center:{},sizeSmall:{},sizeMiddle:{},sizeLarge:{},resize:{},resizeSize:{},crop:{},cropperFrameHeight:{},cropperFrameWidth:{},cropperFrameLeft:{},cropperFrameTop:{},cropperImageHeight:{},cropperImageWidth:{},cropperInterface:{}}}get CSS(){return{wrapper:"cdx-image-tool-tune",button:this.api.styles.settingsButton,buttonActive:this.api.styles.settingsButtonActive,buttonModifier:this.api.styles.settingsButtonModifier,buttonModifierActive:this.api.styles.settingsButtonModifierActive,isFloatLeft:"cdx-image-tool-tune--floatLeft",isFloatRight:"cdx-image-tool-tune--floatRight",isCenter:"cdx-image-tool-tune--center",isSizeSmall:"cdx-image-tool-tune--sizeSmall",isSizeMiddle:"cdx-image-tool-tune--sizeMiddle",isSizeLarge:"cdx-image-tool-tune--sizeLarge",isResize:"cdx-image-tool-tune--resize",isCrop:"cdx-image-tool-tune--crop"}}get view(){return this.wrapper||(this.wrapper=this.createView()),this.wrapper}tuneClicked(t,e){t.preventDefault(),t.stopPropagation();let i=e.dataset.tune,a=this.settings.find((t=>t.name===i)).group;this.buttons.forEach((t=>{this.settings.find((e=>e.name===t.dataset.tune)).group===a&&t!==e&&t.classList.remove(this.CSS.buttonActive)})),e.classList.toggle(this.CSS.buttonActive),this.setTune(e.dataset.tune)}setTune(t){switch(t){case"floatLeft":this.data.floatLeft=!this.data.floatLeft,this.data.floatRight=!1,this.data.center=!1;break;case"floatRight":this.data.floatLeft=!1,this.data.floatRight=!this.data.floatRight,this.data.center=!1;break;case"center":this.data.center=!this.data.center,this.data.floatLeft=!1,this.data.floatRight=!1;break;case"sizeSmall":this.data.sizeSmall=!this.data.sizeSmall,this.data.sizeMiddle=!1,this.data.sizeLarge=!1,this.data.resize=!1,this.data.crop=!1;break;case"sizeMiddle":this.data.sizeSmall=!1,this.data.sizeMiddle=!this.data.sizeMiddle,this.data.sizeLarge=!1,this.data.resize=!1,this.data.crop=!1;break;case"sizeLarge":this.data.sizeSmall=!1,this.data.sizeMiddle=!1,this.data.sizeLarge=!this.data.sizeLarge,this.data.resize=!1,this.data.crop=!1;break;case"resize":this.data.sizeSmall=!1,this.data.sizeMiddle=!1,this.data.sizeLarge=!1,this.data.resize=!this.data.resize,this.data.crop=!1;break;case"crop":this.data.crop=!this.data.crop,this.data.sizeSmall=!1,this.data.sizeMiddle=!1,this.data.sizeLarge=!1,this.data.resize=!1,this.data.resizeSize=0;break;default:this.data.floatLeft=!1,this.data.floatRight=!1,this.data.sizeSmall=!1,this.data.sizeMiddle=!1,this.data.sizeLarge=!1,this.data.resize=!1,this.data.crop=!1}this.data.resize||(this.data.resizeSize=0),this.data.crop||(this.data.cropperFrameHeight=0,this.data.cropperFrameWidth=0,this.data.cropperFrameLeft=0,this.data.cropperFrameTop=0,this.data.cropperImageHeight=0,this.data.cropperImageWidth=0);const e=this.block.holder.querySelector(".ce-block__content");this.apply(e),this.block.dispatchChange()}apply(t){this.data.floatLeft?t.classList.add(this.CSS.isFloatLeft):t.classList.remove(this.CSS.isFloatLeft),this.data.floatRight?t.classList.add(this.CSS.isFloatRight):t.classList.remove(this.CSS.isFloatRight),this.data.center?t.classList.add(this.CSS.isCenter):t.classList.remove(this.CSS.isCenter),this.data.sizeSmall?t.classList.add(this.CSS.isSizeSmall):t.classList.remove(this.CSS.isSizeSmall),this.data.sizeMiddle?t.classList.add(this.CSS.isSizeMiddle):t.classList.remove(this.CSS.isSizeMiddle),this.data.sizeLarge?t.classList.add(this.CSS.isSizeLarge):t.classList.remove(this.CSS.isSizeLarge),this.data.resize?(t.classList.add(this.CSS.isResize),this.data.resizeSize>0&&(t.getElementsByClassName("cdx-block")[0].style.width=this.data.resizeSize+"px"),this.resize(t)):(t.classList.remove(this.CSS.isResize),this.unresize(t)),this.data.crop?(t.classList.add(this.CSS.isCrop),this.crop(t),this.data.cropperFrameHeight>0&&this.data.cropperFrameWidth>0&&this.applyCrop(t)):(t.classList.remove(this.CSS.isCrop),this.uncrop(t))}crop(t){const e=t.getElementsByClassName("image-tool__image")[0],i=document.createElement("div");i.classList.add("crop-btn","btn-crop-action"),i.innerHTML="Crop",i.addEventListener("click",(a=>{e.removeChild(i),this.appendCrop(t)})),e.appendChild(i)}appendCrop(t){this.uncrop(t);const e=t.getElementsByClassName("cdx-block")[0].getElementsByTagName("img")[0];t.getElementsByClassName("cdx-block")[0].classList.add("isCropping"),this.cropperInterface=new(b())(e,{crop(t){console.log(t.detail.x),console.log(t.detail.y),console.log(t.detail.width),console.log(t.detail.height),console.log(t.detail.scaleX),console.log(t.detail.scaleY)}});const i=document.createElement("div");i.classList.add("crop-save","btn-crop-action"),i.innerHTML="Apply",i.addEventListener("click",(e=>{console.log(this.cropperInterface.getCropBoxData()),console.log(this.cropperInterface.getImageData()),console.log(this.cropperInterface.getCanvasData()),this.data.cropperFrameHeight=this.cropperInterface.getCropBoxData().height,this.data.cropperFrameWidth=this.cropperInterface.getCropBoxData().width,this.data.cropperFrameLeft=this.cropperInterface.getCanvasData().left-this.cropperInterface.getCropBoxData().left,this.data.cropperFrameTop=this.cropperInterface.getCanvasData().top-this.cropperInterface.getCropBoxData().top,this.data.cropperImageHeight=this.cropperInterface.getImageData().height,this.data.cropperImageWidth=this.cropperInterface.getImageData().width,this.applyCrop(t)})),t.getElementsByClassName("image-tool__image")[0].appendChild(i),t.classList.add("isCropping")}applyCrop(t){const e=t.getElementsByClassName("cdx-block")[0].getElementsByTagName("img")[0];t.getElementsByClassName("cdx-block")[0].style.minWidth=this.data.cropperFrameWidth+"px",t.getElementsByClassName("cdx-block")[0].style.maxWidth=this.data.cropperFrameWidth+"px",t.getElementsByClassName("image-tool__image")[0].style.width=this.data.cropperFrameWidth+"px",t.getElementsByClassName("image-tool__image")[0].style.height=this.data.cropperFrameHeight+"px",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.left=this.data.cropperFrameLeft+"px",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.top=this.data.cropperFrameTop+"px",e.style.width=this.data.cropperImageWidth+"px",e.style.height=this.data.cropperImageHeight+"px",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].classList.add("isCropped"),t.getElementsByClassName("cdx-block")[0].classList.remove("isCropping");const i=t.getElementsByClassName("btn-crop-action")[0];i&&t.getElementsByClassName("image-tool__image")[0].removeChild(i),this.cropperInterface&&this.cropperInterface.destroy();const a=document.createElement("div");a.classList.add("crop-btn","btn-crop-action"),a.innerHTML="Crop",a.addEventListener("click",(e=>{t.getElementsByClassName("image-tool__image")[0].removeChild(a),this.appendCrop(t)})),t.getElementsByClassName("image-tool__image")[0].appendChild(a),t.classList.remove("isCropping"),this.block.dispatchChange()}uncrop(t){const e=t.getElementsByClassName("btn-crop-action")[0];e&&t.getElementsByClassName("image-tool__image")[0].removeChild(e);const i=t.getElementsByClassName("btn-crop-action")[0];i&&t.getElementsByClassName("image-tool__image")[0].removeChild(i),t.getElementsByClassName("cdx-block")[0].getElementsByTagName("img")[0].classList.remove("isCropped"),t.getElementsByClassName("cdx-block")[0].classList.remove("isCropping"),t.getElementsByClassName("cdx-block")[0].style.minWidth="",t.getElementsByClassName("cdx-block")[0].style.maxWidth="",t.getElementsByClassName("image-tool__image")[0].style.width="",t.getElementsByClassName("image-tool__image")[0].style.height="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.left="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.top="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.width="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.height="",t.classList.remove("isCropping"),this.cropperInterface&&this.cropperInterface.destroy(),this.data.cropperFrameHeight=0,this.data.cropperFrameWidth=0,this.data.cropperFrameLeft=0,this.data.cropperFrameTop=0,this.data.cropperImageHeight=0,this.data.cropperImageWidth=0,this.block.dispatchChange()}resize(t){const e=document.createElement("div");e.classList.add("resizable"),console.log(e);const i=document.createElement("div");i.classList.add("resizers");const a=document.createElement("div");a.classList.add("resizer","top-left"),a.addEventListener("mousedown",(e=>{this.resizeClick(t.getElementsByClassName("cdx-block")[0],a,e)}));const n=document.createElement("div");n.classList.add("resizer","top-right"),n.addEventListener("mousedown",(e=>{this.resizeClick(t.getElementsByClassName("cdx-block")[0],n,e)}));const o=document.createElement("div");o.classList.add("resizer","bottom-left"),o.addEventListener("mousedown",(e=>{this.resizeClick(t.getElementsByClassName("cdx-block")[0],o,e)}));const r=document.createElement("div");r.classList.add("resizer","bottom-right"),r.addEventListener("mousedown",(e=>{this.resizeClick(t.getElementsByClassName("cdx-block")[0],r,e)})),i.appendChild(a),i.appendChild(n),i.appendChild(o),i.appendChild(r),e.appendChild(i),t.getElementsByClassName("cdx-block")[0].appendChild(e)}resizeClick(t,e,i){let a=0,n=0,o=0,r=0;const s=e=>{const i=e.clientX-a,n=(e.clientY,o+i);n>50&&(t.style.width=n+"px")},h=()=>{let e=parseInt(document.defaultView.getComputedStyle(t).width,10);e>0&&(this.data.resizeSize=e),document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",h),this.block.dispatchChange()};document.addEventListener("mousemove",s),document.addEventListener("mouseup",h),a=i.clientX,n=i.clientY,o=parseInt(document.defaultView.getComputedStyle(t).width,10),r=parseInt(document.defaultView.getComputedStyle(t).height,10)}unresize(t){const e=t.getElementsByClassName("resizable")[0];e&&t.getElementsByClassName("cdx-block")[0].removeChild(e),t.getElementsByClassName("cdx-block")[0].style.width="auto"}unwrap(t){return console.log("unwrap"),this.buttons.forEach((t=>{t.classList.remove(this.CSS.buttonActive)})),t.classList.remove(this.CSS.isFloatLeft),t.classList.remove(this.CSS.isFloatRight),t.classList.remove(this.CSS.isCenter),t.classList.remove(this.CSS.isSizeSmall),t.classList.remove(this.CSS.isSizeMiddle),t.classList.remove(this.CSS.isSizeLarge),t.classList.remove(this.CSS.isResize),t.classList.remove(this.CSS.isCrop),t.getElementsByClassName("cdx-block")[0].getElementsByTagName("img")[0].classList.remove("isCropped"),t.getElementsByClassName("cdx-block")[0].classList.remove("isCropping"),t.getElementsByClassName("cdx-block")[0].style.minWidth="",t.getElementsByClassName("cdx-block")[0].style.maxWidth="",t.getElementsByClassName("image-tool__image")[0].style.width="",t.getElementsByClassName("image-tool__image")[0].style.height="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.left="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.top="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.width="",t.getElementsByClassName("image-tool__image")[0].getElementsByTagName("img")[0].style.height="",this.unresize(t),this.uncrop(t),this.cropperInterface&&this.cropperInterface.destroy(),this.data.cropperFrameHeight=0,this.data.cropperFrameWidth=0,this.data.cropperFrameLeft=0,this.data.cropperFrameTop=0,this.data.cropperImageHeight=0,this.data.cropperImageWidth=0,t}save(){return this.data}wrap(t){return this.wrapper||(this.wrapper=this.createView()),this.apply(t),t}createView(){this.buttons=this.settings.map((t=>{const e=document.createElement("div"),i=document.createElement("span"),a=document.createElement("span");return e.classList.add(this.CSS.button),a.style.fontSize="8px",i.innerHTML=t.icon,a.innerHTML=t.label,e.appendChild(i),e.appendChild(a),e.dataset.tune=t.name,e.title=t.label,e.addEventListener("click",(t=>this.tuneClicked(t,e))),e}));const t=document.createElement("div");return this.buttons.forEach((e=>{t.appendChild(e)})),t.classList.add(this.CSS.wrapper),t}isTuneActive(t){return!!this.data[t]}render(){return this.buttons.forEach((t=>{t.classList.toggle(this.CSS.buttonActive,this.isTuneActive(t.dataset.tune))})),this.view}destroy(){this.wrapper=null,this.buttons=null}}},138:(t,e,i)=>{const a=i(382).Z;t.exports=a},738:t=>{"use strict";t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"}},e={};function i(a){var n=e[a];if(void 0!==n)return n.exports;var o=e[a]={id:a,exports:{}};return t[a].call(o.exports,o,o.exports,i),o.exports}i.m=t,i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var a in e)i.o(e,a)&&!i.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.b=document.baseURI||self.location.href,i.nc=void 0;var a=i(138);ImageToolTune=a})();
package/dist/image-tool-tune.js.LICENSE.txt ADDED
@@ -0,0 +1,9 @@
1
+ /*!
2
+ * Cropper.js v1.5.13
3
+ * https://fengyuanchen.github.io/cropperjs
4
+ *
5
+ * Copyright 2015-present Chen Fengyuan
6
+ * Released under the MIT license
7
+ *
8
+ * Date: 2022-11-20T05:30:46.114Z
9
+ */
package/index.html ADDED
@@ -0,0 +1,92 @@
1
+ <!doctype html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Image tool tune</title>
7
+
8
+ <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.27.2/dist/editorjs.umd.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script>
10
+ <script src="./dist/image-tool-tune.js"></script>
11
+
12
+ </head>
13
+
14
+ <body>
15
+
16
+ <h1 style="width:100%; text-align:center;">Exemple d'utilisation d'image tool tune</h1>
17
+
18
+ <div id="editorjs"></div>
19
+
20
+ <script>
21
+ console.log( window );
22
+
23
+ //On DOM LOADED
24
+ document.addEventListener( 'DOMContentLoaded', function () {
25
+
26
+ //On récupère les données de l'éditeur
27
+ let editorData = { "time": 1689837286273, "blocks": [ { "id": "cH5NmEDCZn", "type": "image", "data": { "file": { "url": "https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&amp;resize=1200:*" }, "caption": "", "withBorder": false, "stretched": false, "withBackground": false }, "tunes": { "imageTune": { "floatLeft": true, "floatRight": false, "center": false, "sizeSmall": false, "sizeMiddle": false, "sizeLarge": false, "resize": false, "resizeSize": 0, "crop": true, "cropperFrameHeight": 128.67734374999998, "cropperFrameWidth": 261.0781543703008, "cropperFrameLeft": -257.219020112782, "cropperFrameTop": -204.97074257812505, "cropperImageHeight": 788.0004000000001, "cropperImageWidth": 789.9753383458648 } } }, { "id": "2IlwBv5XQY", "type": "paragraph", "data": { "text": "Hello world" } } ], "version": "2.27.2" };
28
+
29
+ //On initialise l'éditeur
30
+ initEditorJs( editorData );
31
+
32
+ } );
33
+
34
+ function initEditorJs( editorData ) {
35
+ const ImageToolTune = window.ImageToolTune;
36
+ const ImageTool = window.ImageTool;
37
+
38
+
39
+ const editor = new EditorJS( {
40
+ holder: 'editorjs',
41
+ tools: {
42
+ imageTune: ImageToolTune,
43
+ image: {
44
+ tunes: [ 'imageTune' ],
45
+ class: ImageTool,
46
+ config: {
47
+ uploader: {
48
+ /**
49
+ * Upload file to the server and return an uploaded image data
50
+ * @param {File} file - file selected from the device or pasted by drag-n-drop
51
+ * @return {Promise.<{success, file: {url}}>}
52
+ */
53
+ uploadByFile( file ) {
54
+
55
+ return {
56
+ success: 1,
57
+ file: {
58
+ url: 'https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*',
59
+ // any other image data you want to store, such as width, height, color, extension, etc
60
+ }
61
+ };
62
+
63
+ }
64
+ }
65
+ }
66
+ },
67
+ },
68
+ logLevel: 'VERBOSE',
69
+ data: editorData,
70
+ onChange: ( api, event ) => {
71
+ saveDataEditJs();
72
+ }
73
+
74
+ } );
75
+
76
+ function saveDataEditJs() {
77
+ editor.save().then( ( outputData ) => {
78
+ console.log( JSON.stringify( outputData ) );
79
+ } ).catch( ( error ) => {
80
+ console.log( 'Saving failed: ', error )
81
+ } );
82
+ }
83
+
84
+
85
+
86
+ }
87
+ </script>
88
+
89
+
90
+ </body>
91
+
92
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "editorjs-image",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Image tool plugin for Editor.js",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -14,6 +14,11 @@
14
14
  "tool",
15
15
  "variables"
16
16
  ],
17
+ "devDependencies": {
18
+ "css-loader": "^6.8.1",
19
+ "style-loader": "^3.3.3",
20
+ "webpack-cli": "^5.1.4"
21
+ },
17
22
  "author": "xkzl",
18
23
  "license": "GPL",
19
24
  "repository": {
package/src/image-tool-tune.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // Adds Block Tunes for Image Tool (ImageTool)
3
3
  // Supports : Image Float Left, Image float right
4
4
 
5
- import './image-tool.css';
5
+ import './image-tool-tune.css';
6
6
 
7
7
  import Cropper from './cropper.js';
8
8
  import './cropper.css';
package/src/index.js CHANGED
@@ -1,2 +1,2 @@
1
- const ImageTool = require( "./image-tool-tune" ).default;
2
- module.exports = ImageTool;
1
+ const ImageToolTune = require( "./image-tool-tune" ).default;
2
+ module.exports = ImageToolTune;
package/webpack.config.js ADDED
@@ -0,0 +1,20 @@
1
+ const path = require( 'path' );
2
+
3
+ module.exports = {
4
+ mode: 'production',
5
+ entry: './src/index.js',
6
+ output: {
7
+ path: path.resolve( __dirname, 'dist' ),
8
+ filename: 'image-tool-tune.js',
9
+ library: 'ImageToolTune',
10
+ libraryTarget: 'var',
11
+ },
12
+ module: {
13
+ rules: [
14
+ {
15
+ test: /\.css$/,
16
+ use: [ 'style-loader', 'css-loader' ],
17
+ },
18
+ ],
19
+ },
20
+ };