@dnncommunity/dnn-elements 0.15.0-beta.8 → 0.15.0-beta.9
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.
- package/dist/cjs/dnn.cjs.js +4 -116
- package/dist/cjs/dnn.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -18
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -130
- package/dist/dnn/dnn.esm.js.map +1 -1
- package/dist/dnn/dnn.js +1 -1
- package/dist/dnn/index.esm.js +1 -46
- package/dist/dnn/index.esm.js.map +1 -1
- package/dist/esm/dnn.js +4 -116
- package/dist/esm/dnn.js.map +1 -1
- package/dist/esm/loader.js +2 -18
- package/dist/esm/loader.js.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/app-globals-3a1e7e63.js +0 -7
- package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
- package/dist/cjs/css-shim-aaf4fec9.js +0 -8
- package/dist/cjs/css-shim-aaf4fec9.js.map +0 -1
- package/dist/cjs/dnn-button.cjs.entry.js +0 -92
- package/dist/cjs/dnn-button.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-checkbox.cjs.entry.js +0 -58
- package/dist/cjs/dnn-checkbox.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-chevron.cjs.entry.js +0 -34
- package/dist/cjs/dnn-chevron.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-collapsible.cjs.entry.js +0 -69
- package/dist/cjs/dnn-collapsible.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-color-picker.cjs.entry.js +0 -508
- package/dist/cjs/dnn-color-picker.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-dropzone.cjs.entry.js +0 -153
- package/dist/cjs/dnn-dropzone.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-image-cropper.cjs.entry.js +0 -408
- package/dist/cjs/dnn-image-cropper.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-modal.cjs.entry.js +0 -65
- package/dist/cjs/dnn-modal.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-permissions-grid.cjs.entry.js +0 -320
- package/dist/cjs/dnn-permissions-grid.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-searchbox.cjs.entry.js +0 -66
- package/dist/cjs/dnn-searchbox.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-sort-icon.cjs.entry.js +0 -43
- package/dist/cjs/dnn-sort-icon.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-tab.cjs.entry.js +0 -31
- package/dist/cjs/dnn-tab.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-tabs.cjs.entry.js +0 -52
- package/dist/cjs/dnn-tabs.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-toggle.cjs.entry.js +0 -37
- package/dist/cjs/dnn-toggle.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-treeview-item.cjs.entry.js +0 -68
- package/dist/cjs/dnn-treeview-item.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +0 -124
- package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map +0 -1
- package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +0 -133
- package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +0 -1
- package/dist/cjs/dom-14886762.js +0 -77
- package/dist/cjs/dom-14886762.js.map +0 -1
- package/dist/cjs/index-d53702a3.js +0 -3095
- package/dist/cjs/index-d53702a3.js.map +0 -1
- package/dist/cjs/mouseUtilities-ecd5ecf7.js +0 -25
- package/dist/cjs/mouseUtilities-ecd5ecf7.js.map +0 -1
- package/dist/cjs/shadow-css-c44ea13a.js +0 -392
- package/dist/cjs/shadow-css-c44ea13a.js.map +0 -1
- package/dist/dnn/app-globals-0f993ce5.js +0 -5
- package/dist/dnn/app-globals-0f993ce5.js.map +0 -1
- package/dist/dnn/app-globals-497eb362.system.js +0 -2
- package/dist/dnn/app-globals-497eb362.system.js.map +0 -1
- package/dist/dnn/css-shim-091f949f.js +0 -6
- package/dist/dnn/css-shim-091f949f.js.map +0 -1
- package/dist/dnn/css-shim-c5bffe6b.system.js +0 -2
- package/dist/dnn/css-shim-c5bffe6b.system.js.map +0 -1
- package/dist/dnn/debounce-6be67abd.js +0 -22
- package/dist/dnn/debounce-6be67abd.js.map +0 -1
- package/dist/dnn/debounce-db438a09.system.js +0 -2
- package/dist/dnn/debounce-db438a09.system.js.map +0 -1
- package/dist/dnn/dnn-button.entry.js +0 -88
- package/dist/dnn/dnn-button.entry.js.map +0 -1
- package/dist/dnn/dnn-button.system.entry.js +0 -2
- package/dist/dnn/dnn-button.system.entry.js.map +0 -1
- package/dist/dnn/dnn-checkbox.entry.js +0 -54
- package/dist/dnn/dnn-checkbox.entry.js.map +0 -1
- package/dist/dnn/dnn-checkbox.system.entry.js +0 -2
- package/dist/dnn/dnn-checkbox.system.entry.js.map +0 -1
- package/dist/dnn/dnn-chevron.entry.js +0 -30
- package/dist/dnn/dnn-chevron.entry.js.map +0 -1
- package/dist/dnn/dnn-chevron.system.entry.js +0 -2
- package/dist/dnn/dnn-chevron.system.entry.js.map +0 -1
- package/dist/dnn/dnn-collapsible.entry.js +0 -65
- package/dist/dnn/dnn-collapsible.entry.js.map +0 -1
- package/dist/dnn/dnn-collapsible.system.entry.js +0 -2
- package/dist/dnn/dnn-collapsible.system.entry.js.map +0 -1
- package/dist/dnn/dnn-color-picker.entry.js +0 -504
- package/dist/dnn/dnn-color-picker.entry.js.map +0 -1
- package/dist/dnn/dnn-color-picker.system.entry.js +0 -12
- package/dist/dnn/dnn-color-picker.system.entry.js.map +0 -1
- package/dist/dnn/dnn-dropzone.entry.js +0 -149
- package/dist/dnn/dnn-dropzone.entry.js.map +0 -1
- package/dist/dnn/dnn-dropzone.system.entry.js +0 -2
- package/dist/dnn/dnn-dropzone.system.entry.js.map +0 -1
- package/dist/dnn/dnn-image-cropper.entry.js +0 -404
- package/dist/dnn/dnn-image-cropper.entry.js.map +0 -1
- package/dist/dnn/dnn-image-cropper.system.entry.js +0 -2
- package/dist/dnn/dnn-image-cropper.system.entry.js.map +0 -1
- package/dist/dnn/dnn-modal.entry.js +0 -61
- package/dist/dnn/dnn-modal.entry.js.map +0 -1
- package/dist/dnn/dnn-modal.system.entry.js +0 -2
- package/dist/dnn/dnn-modal.system.entry.js.map +0 -1
- package/dist/dnn/dnn-permissions-grid.entry.js +0 -316
- package/dist/dnn/dnn-permissions-grid.entry.js.map +0 -1
- package/dist/dnn/dnn-permissions-grid.system.entry.js +0 -2
- package/dist/dnn/dnn-permissions-grid.system.entry.js.map +0 -1
- package/dist/dnn/dnn-searchbox.entry.js +0 -62
- package/dist/dnn/dnn-searchbox.entry.js.map +0 -1
- package/dist/dnn/dnn-searchbox.system.entry.js +0 -2
- package/dist/dnn/dnn-searchbox.system.entry.js.map +0 -1
- package/dist/dnn/dnn-sort-icon.entry.js +0 -39
- package/dist/dnn/dnn-sort-icon.entry.js.map +0 -1
- package/dist/dnn/dnn-sort-icon.system.entry.js +0 -2
- package/dist/dnn/dnn-sort-icon.system.entry.js.map +0 -1
- package/dist/dnn/dnn-tab.entry.js +0 -27
- package/dist/dnn/dnn-tab.entry.js.map +0 -1
- package/dist/dnn/dnn-tab.system.entry.js +0 -2
- package/dist/dnn/dnn-tab.system.entry.js.map +0 -1
- package/dist/dnn/dnn-tabs.entry.js +0 -48
- package/dist/dnn/dnn-tabs.entry.js.map +0 -1
- package/dist/dnn/dnn-tabs.system.entry.js +0 -2
- package/dist/dnn/dnn-tabs.system.entry.js.map +0 -1
- package/dist/dnn/dnn-toggle.entry.js +0 -33
- package/dist/dnn/dnn-toggle.entry.js.map +0 -1
- package/dist/dnn/dnn-toggle.system.entry.js +0 -2
- package/dist/dnn/dnn-toggle.system.entry.js.map +0 -1
- package/dist/dnn/dnn-treeview-item.entry.js +0 -64
- package/dist/dnn/dnn-treeview-item.entry.js.map +0 -1
- package/dist/dnn/dnn-treeview-item.system.entry.js +0 -2
- package/dist/dnn/dnn-treeview-item.system.entry.js.map +0 -1
- package/dist/dnn/dnn-vertical-overflow-menu.entry.js +0 -120
- package/dist/dnn/dnn-vertical-overflow-menu.entry.js.map +0 -1
- package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js +0 -2
- package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js.map +0 -1
- package/dist/dnn/dnn-vertical-splitview.entry.js +0 -129
- package/dist/dnn/dnn-vertical-splitview.entry.js.map +0 -1
- package/dist/dnn/dnn-vertical-splitview.system.entry.js +0 -2
- package/dist/dnn/dnn-vertical-splitview.system.entry.js.map +0 -1
- package/dist/dnn/dnn.system.js +0 -2
- package/dist/dnn/dnn.system.js.map +0 -1
- package/dist/dnn/dom-99eb7b76.system.js +0 -22
- package/dist/dnn/dom-99eb7b76.system.js.map +0 -1
- package/dist/dnn/dom-a385e381.js +0 -75
- package/dist/dnn/dom-a385e381.js.map +0 -1
- package/dist/dnn/index-20e42ad7.js +0 -3059
- package/dist/dnn/index-20e42ad7.js.map +0 -1
- package/dist/dnn/index-c3cc3b5b.system.js +0 -2
- package/dist/dnn/index-c3cc3b5b.system.js.map +0 -1
- package/dist/dnn/index.system.js +0 -2
- package/dist/dnn/index.system.js.map +0 -1
- package/dist/dnn/mouseUtilities-233ad7e3.system.js +0 -2
- package/dist/dnn/mouseUtilities-233ad7e3.system.js.map +0 -1
- package/dist/dnn/mouseUtilities-b261ca4f.js +0 -23
- package/dist/dnn/mouseUtilities-b261ca4f.js.map +0 -1
- package/dist/dnn/shadow-css-27708fdd.system.js +0 -14
- package/dist/dnn/shadow-css-27708fdd.system.js.map +0 -1
- package/dist/dnn/shadow-css-ef431969.js +0 -390
- package/dist/dnn/shadow-css-ef431969.js.map +0 -1
- package/dist/esm/app-globals-0f993ce5.js +0 -5
- package/dist/esm/app-globals-0f993ce5.js.map +0 -1
- package/dist/esm/css-shim-091f949f.js +0 -6
- package/dist/esm/css-shim-091f949f.js.map +0 -1
- package/dist/esm/dnn-button.entry.js +0 -88
- package/dist/esm/dnn-button.entry.js.map +0 -1
- package/dist/esm/dnn-checkbox.entry.js +0 -54
- package/dist/esm/dnn-checkbox.entry.js.map +0 -1
- package/dist/esm/dnn-chevron.entry.js +0 -30
- package/dist/esm/dnn-chevron.entry.js.map +0 -1
- package/dist/esm/dnn-collapsible.entry.js +0 -65
- package/dist/esm/dnn-collapsible.entry.js.map +0 -1
- package/dist/esm/dnn-color-picker.entry.js +0 -504
- package/dist/esm/dnn-color-picker.entry.js.map +0 -1
- package/dist/esm/dnn-dropzone.entry.js +0 -149
- package/dist/esm/dnn-dropzone.entry.js.map +0 -1
- package/dist/esm/dnn-image-cropper.entry.js +0 -404
- package/dist/esm/dnn-image-cropper.entry.js.map +0 -1
- package/dist/esm/dnn-modal.entry.js +0 -61
- package/dist/esm/dnn-modal.entry.js.map +0 -1
- package/dist/esm/dnn-permissions-grid.entry.js +0 -316
- package/dist/esm/dnn-permissions-grid.entry.js.map +0 -1
- package/dist/esm/dnn-searchbox.entry.js +0 -62
- package/dist/esm/dnn-searchbox.entry.js.map +0 -1
- package/dist/esm/dnn-sort-icon.entry.js +0 -39
- package/dist/esm/dnn-sort-icon.entry.js.map +0 -1
- package/dist/esm/dnn-tab.entry.js +0 -27
- package/dist/esm/dnn-tab.entry.js.map +0 -1
- package/dist/esm/dnn-tabs.entry.js +0 -48
- package/dist/esm/dnn-tabs.entry.js.map +0 -1
- package/dist/esm/dnn-toggle.entry.js +0 -33
- package/dist/esm/dnn-toggle.entry.js.map +0 -1
- package/dist/esm/dnn-treeview-item.entry.js +0 -64
- package/dist/esm/dnn-treeview-item.entry.js.map +0 -1
- package/dist/esm/dnn-vertical-overflow-menu.entry.js +0 -120
- package/dist/esm/dnn-vertical-overflow-menu.entry.js.map +0 -1
- package/dist/esm/dnn-vertical-splitview.entry.js +0 -129
- package/dist/esm/dnn-vertical-splitview.entry.js.map +0 -1
- package/dist/esm/dom-a385e381.js +0 -75
- package/dist/esm/dom-a385e381.js.map +0 -1
- package/dist/esm/index-20e42ad7.js +0 -3059
- package/dist/esm/index-20e42ad7.js.map +0 -1
- package/dist/esm/mouseUtilities-b261ca4f.js +0 -23
- package/dist/esm/mouseUtilities-b261ca4f.js.map +0 -1
- package/dist/esm/shadow-css-ef431969.js +0 -390
- package/dist/esm/shadow-css-ef431969.js.map +0 -1
|
@@ -1,408 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-d53702a3.js');
|
|
6
|
-
const mouseUtilities = require('./mouseUtilities-ecd5ecf7.js');
|
|
7
|
-
|
|
8
|
-
var CornerType;
|
|
9
|
-
(function (CornerType) {
|
|
10
|
-
CornerType[CornerType["nw"] = 0] = "nw";
|
|
11
|
-
CornerType[CornerType["ne"] = 1] = "ne";
|
|
12
|
-
CornerType[CornerType["se"] = 2] = "se";
|
|
13
|
-
CornerType[CornerType["sw"] = 3] = "sw";
|
|
14
|
-
})(CornerType || (CornerType = {}));
|
|
15
|
-
;
|
|
16
|
-
|
|
17
|
-
const dnnImageCropperCss = ":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";
|
|
18
|
-
|
|
19
|
-
const DnnImageCropper = class {
|
|
20
|
-
constructor(hostRef) {
|
|
21
|
-
index.registerInstance(this, hostRef);
|
|
22
|
-
this.imageCropChanged = index.createEvent(this, "imageCropChanged", 7);
|
|
23
|
-
/** Sets the desired final image width. */
|
|
24
|
-
this.width = 600;
|
|
25
|
-
/** Sets the desired final image height. */
|
|
26
|
-
this.height = 600;
|
|
27
|
-
/** Can be used to customize controls text.
|
|
28
|
-
* Some values support tokens, see default values for examples.
|
|
29
|
-
*/
|
|
30
|
-
this.resx = {
|
|
31
|
-
capture: "Capture",
|
|
32
|
-
dragAndDropFile: "Drag and drop an image",
|
|
33
|
-
or: "or",
|
|
34
|
-
takePicture: "Take a picture",
|
|
35
|
-
uploadFile: "Upload an image",
|
|
36
|
-
imageTooSmall: "The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",
|
|
37
|
-
modalCloseText: "Close",
|
|
38
|
-
};
|
|
39
|
-
/** Sets the output quality of the corpped image (number between 0 and 1). */
|
|
40
|
-
this.quality = 0.8;
|
|
41
|
-
/** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */
|
|
42
|
-
this.preventUndersized = false;
|
|
43
|
-
this.handleCropMouseDown = (event) => {
|
|
44
|
-
event.stopPropagation();
|
|
45
|
-
event.preventDefault();
|
|
46
|
-
const element = event.target;
|
|
47
|
-
const className = element.classList[0];
|
|
48
|
-
document.addEventListener("mouseup", this.handleImageCropFinished, false);
|
|
49
|
-
document.addEventListener("touchend", this.handleImageCropFinished, false);
|
|
50
|
-
switch (className) {
|
|
51
|
-
case "crop":
|
|
52
|
-
document.addEventListener("mousemove", this.handleCropDrag, false);
|
|
53
|
-
document.addEventListener("touchmove", this.handleCropDrag, false);
|
|
54
|
-
document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleCropDrag));
|
|
55
|
-
document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleCropDrag));
|
|
56
|
-
break;
|
|
57
|
-
case "nw":
|
|
58
|
-
document.addEventListener("mousemove", this.handleNwMouseMove, false);
|
|
59
|
-
document.addEventListener("touchmove", this.handleNwMouseMove, false);
|
|
60
|
-
document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleNwMouseMove));
|
|
61
|
-
document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleNwMouseMove));
|
|
62
|
-
break;
|
|
63
|
-
case "ne":
|
|
64
|
-
document.addEventListener("mousemove", this.handleNeMouseMove, false);
|
|
65
|
-
document.addEventListener("touchmove", this.handleNeMouseMove, false);
|
|
66
|
-
document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleNeMouseMove));
|
|
67
|
-
document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleNeMouseMove));
|
|
68
|
-
break;
|
|
69
|
-
case "se":
|
|
70
|
-
document.addEventListener("mousemove", this.handleSeMouseMove, false);
|
|
71
|
-
document.addEventListener("touchmove", this.handleSeMouseMove, false);
|
|
72
|
-
document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleSeMouseMove));
|
|
73
|
-
document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleSeMouseMove));
|
|
74
|
-
break;
|
|
75
|
-
case "sw":
|
|
76
|
-
document.addEventListener("mousemove", this.handleSwMouseMove, false);
|
|
77
|
-
document.addEventListener("touchmove", this.handleSwMouseMove, false);
|
|
78
|
-
document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleSwMouseMove));
|
|
79
|
-
document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleSwMouseMove));
|
|
80
|
-
break;
|
|
81
|
-
default:
|
|
82
|
-
break;
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
this.handleImageCropFinished = (_ev) => {
|
|
86
|
-
this.emitImage();
|
|
87
|
-
document.removeEventListener("mouseup", this.handleImageCropFinished);
|
|
88
|
-
this.previousTouch = undefined;
|
|
89
|
-
};
|
|
90
|
-
this.handleNwMouseMove = (event) => {
|
|
91
|
-
this.handleCornerDrag(event, CornerType.nw);
|
|
92
|
-
};
|
|
93
|
-
this.handleNeMouseMove = (event) => {
|
|
94
|
-
this.handleCornerDrag(event, CornerType.ne);
|
|
95
|
-
};
|
|
96
|
-
this.handleSeMouseMove = (event) => {
|
|
97
|
-
this.handleCornerDrag(event, CornerType.se);
|
|
98
|
-
};
|
|
99
|
-
this.handleSwMouseMove = (event) => {
|
|
100
|
-
this.handleCornerDrag(event, CornerType.sw);
|
|
101
|
-
};
|
|
102
|
-
this.handleCornerDrag = (event, corner) => {
|
|
103
|
-
if (!this.isMouseStillInTarget(event)) {
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
let { left, top } = this.getCornerLeftTop(corner);
|
|
107
|
-
let newWidth = 0;
|
|
108
|
-
let newHeight = 0;
|
|
109
|
-
let orientation = "horizontal";
|
|
110
|
-
const wantedRatio = this.width / this.height;
|
|
111
|
-
const cropRect = this.crop.getBoundingClientRect();
|
|
112
|
-
const imageRect = this.image.getBoundingClientRect();
|
|
113
|
-
let { movementX, movementY } = mouseUtilities.getMovementFromEvent(event, this.previousTouch);
|
|
114
|
-
if (Math.abs(movementX) < Math.abs(movementY)) {
|
|
115
|
-
orientation = "vertical";
|
|
116
|
-
}
|
|
117
|
-
if (orientation == "horizontal") {
|
|
118
|
-
switch (corner) {
|
|
119
|
-
case CornerType.nw:
|
|
120
|
-
case CornerType.sw:
|
|
121
|
-
newWidth = cropRect.width - movementX;
|
|
122
|
-
newHeight = newWidth / wantedRatio;
|
|
123
|
-
break;
|
|
124
|
-
case CornerType.ne:
|
|
125
|
-
case CornerType.se:
|
|
126
|
-
newWidth = cropRect.width + movementX;
|
|
127
|
-
newHeight = newWidth / wantedRatio;
|
|
128
|
-
break;
|
|
129
|
-
default:
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
else {
|
|
134
|
-
switch (corner) {
|
|
135
|
-
case CornerType.nw:
|
|
136
|
-
case CornerType.ne:
|
|
137
|
-
newHeight = cropRect.height - movementY;
|
|
138
|
-
newWidth = newHeight * wantedRatio;
|
|
139
|
-
break;
|
|
140
|
-
case CornerType.se:
|
|
141
|
-
case CornerType.sw:
|
|
142
|
-
newHeight = cropRect.height + movementY;
|
|
143
|
-
newWidth = newHeight * wantedRatio;
|
|
144
|
-
break;
|
|
145
|
-
default:
|
|
146
|
-
break;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
switch (corner) {
|
|
150
|
-
case CornerType.ne:
|
|
151
|
-
case CornerType.nw:
|
|
152
|
-
const topOffset = cropRect.height - newHeight;
|
|
153
|
-
top = this.crop.offsetTop + topOffset;
|
|
154
|
-
default:
|
|
155
|
-
break;
|
|
156
|
-
}
|
|
157
|
-
switch (corner) {
|
|
158
|
-
case CornerType.nw:
|
|
159
|
-
case CornerType.sw:
|
|
160
|
-
const leftOffset = cropRect.width - newWidth;
|
|
161
|
-
left = this.crop.offsetLeft + leftOffset;
|
|
162
|
-
if (left < 0)
|
|
163
|
-
left = 0;
|
|
164
|
-
if (left > imageRect.width)
|
|
165
|
-
left = imageRect.width;
|
|
166
|
-
if (top < 0)
|
|
167
|
-
top = 0;
|
|
168
|
-
if (top > imageRect.height)
|
|
169
|
-
top = imageRect.height;
|
|
170
|
-
if (left + newWidth > imageRect.width)
|
|
171
|
-
newWidth = imageRect.width - left;
|
|
172
|
-
if (top + newHeight > imageRect.height)
|
|
173
|
-
newHeight = imageRect.height - top;
|
|
174
|
-
break;
|
|
175
|
-
case CornerType.ne:
|
|
176
|
-
case CornerType.se:
|
|
177
|
-
if (top < 0)
|
|
178
|
-
top = 0;
|
|
179
|
-
if (top > imageRect.height)
|
|
180
|
-
top = imageRect.height;
|
|
181
|
-
if (left + newWidth > imageRect.width)
|
|
182
|
-
newWidth = imageRect.width - left;
|
|
183
|
-
if (top + newHeight > imageRect.height)
|
|
184
|
-
newHeight = imageRect.height - top;
|
|
185
|
-
break;
|
|
186
|
-
default:
|
|
187
|
-
break;
|
|
188
|
-
}
|
|
189
|
-
if (newWidth / newHeight != wantedRatio) {
|
|
190
|
-
return;
|
|
191
|
-
}
|
|
192
|
-
if (this.preventUndersized) {
|
|
193
|
-
const zoomRatio = this.image.width / this.image.naturalWidth;
|
|
194
|
-
if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height) {
|
|
195
|
-
return;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
switch (corner) {
|
|
199
|
-
case CornerType.ne:
|
|
200
|
-
this.crop.style.top = `${top}px`;
|
|
201
|
-
this.crop.style.width = `${newWidth}px`;
|
|
202
|
-
this.crop.style.height = `${newHeight}px`;
|
|
203
|
-
break;
|
|
204
|
-
case CornerType.nw:
|
|
205
|
-
this.crop.style.left = `${left}px`;
|
|
206
|
-
this.crop.style.top = `${top}px`;
|
|
207
|
-
this.crop.style.width = `${newWidth}px`;
|
|
208
|
-
this.crop.style.height = `${newHeight}px`;
|
|
209
|
-
break;
|
|
210
|
-
case CornerType.se:
|
|
211
|
-
this.crop.style.width = `${newWidth}px`;
|
|
212
|
-
this.crop.style.height = `${newHeight}px`;
|
|
213
|
-
break;
|
|
214
|
-
case CornerType.sw:
|
|
215
|
-
this.crop.style.left = `${left}px`;
|
|
216
|
-
this.crop.style.width = `${newWidth}px`;
|
|
217
|
-
this.crop.style.height = `${newHeight}px`;
|
|
218
|
-
break;
|
|
219
|
-
default:
|
|
220
|
-
break;
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
this.handleCropDrag = (ev) => {
|
|
224
|
-
if (!this.isMouseStillInTarget(ev)) {
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
let { movementX, movementY } = mouseUtilities.getMovementFromEvent(ev, this.previousTouch);
|
|
228
|
-
let newLeft = this.crop.offsetLeft + movementX;
|
|
229
|
-
let newTop = this.crop.offsetTop + movementY;
|
|
230
|
-
var imageRect = this.image.getBoundingClientRect();
|
|
231
|
-
var cropRect = this.crop.getBoundingClientRect();
|
|
232
|
-
if (newLeft < 0) {
|
|
233
|
-
newLeft = 0;
|
|
234
|
-
}
|
|
235
|
-
if (newTop < 0) {
|
|
236
|
-
newTop = 0;
|
|
237
|
-
}
|
|
238
|
-
if (newLeft + cropRect.width > imageRect.width) {
|
|
239
|
-
newLeft = this.crop.offsetLeft;
|
|
240
|
-
}
|
|
241
|
-
if (newTop + cropRect.height > imageRect.height) {
|
|
242
|
-
newTop = this.crop.offsetTop;
|
|
243
|
-
}
|
|
244
|
-
this.crop.style.left = newLeft + "px";
|
|
245
|
-
this.crop.style.top = newTop + "px";
|
|
246
|
-
};
|
|
247
|
-
}
|
|
248
|
-
componentDidLoad() {
|
|
249
|
-
requestAnimationFrame(() => {
|
|
250
|
-
this.setView("noPictureView");
|
|
251
|
-
});
|
|
252
|
-
}
|
|
253
|
-
setView(newView) {
|
|
254
|
-
const views = this.host.shadowRoot.querySelectorAll(".view");
|
|
255
|
-
views.forEach(v => v.classList.remove("visible"));
|
|
256
|
-
switch (newView) {
|
|
257
|
-
case "noPictureView":
|
|
258
|
-
this.noPictureView.classList.add("visible");
|
|
259
|
-
break;
|
|
260
|
-
case "hasPictureView":
|
|
261
|
-
this.hasPictureView.classList.add("visible");
|
|
262
|
-
break;
|
|
263
|
-
default:
|
|
264
|
-
break;
|
|
265
|
-
}
|
|
266
|
-
this.view = newView;
|
|
267
|
-
}
|
|
268
|
-
initCrop() {
|
|
269
|
-
var wantedRatio = this.width / this.height;
|
|
270
|
-
var imageRect = this.image.getBoundingClientRect();
|
|
271
|
-
var imageRatio = imageRect.width / imageRect.height;
|
|
272
|
-
if (wantedRatio > imageRatio) {
|
|
273
|
-
var wantedHeight = imageRect.width / wantedRatio;
|
|
274
|
-
var diff = imageRect.height - wantedHeight;
|
|
275
|
-
this.crop.style.top = Math.round(diff / 2).toString() + "px";
|
|
276
|
-
this.crop.style.height = Math.round(wantedHeight).toString() + "px";
|
|
277
|
-
}
|
|
278
|
-
else {
|
|
279
|
-
var wantedWidth = imageRect.height * wantedRatio;
|
|
280
|
-
var diff = imageRect.width - wantedWidth;
|
|
281
|
-
this.crop.style.left = Math.round(diff / 2).toString() + "px";
|
|
282
|
-
this.crop.style.width = Math.round(wantedWidth).toString() + "px";
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
setImage() {
|
|
286
|
-
this.image.addEventListener('load', () => {
|
|
287
|
-
this.initCrop();
|
|
288
|
-
this.emitImage();
|
|
289
|
-
});
|
|
290
|
-
this.image.src = this.canvas.toDataURL();
|
|
291
|
-
}
|
|
292
|
-
handleNewFile(file) {
|
|
293
|
-
if (file.type.split('/')[0] != "image") {
|
|
294
|
-
return;
|
|
295
|
-
}
|
|
296
|
-
var reader = new FileReader();
|
|
297
|
-
reader.onload = readerLoadEvent => {
|
|
298
|
-
var img = new Image();
|
|
299
|
-
img.onload = () => {
|
|
300
|
-
this.canvas.width = img.width;
|
|
301
|
-
this.canvas.height = img.height;
|
|
302
|
-
if (this.preventUndersized && (img.width < this.width || img.height < this.height)) {
|
|
303
|
-
this.imageTooSmallModal.show();
|
|
304
|
-
return;
|
|
305
|
-
}
|
|
306
|
-
var ctx = this.canvas.getContext("2d");
|
|
307
|
-
ctx.drawImage(img, 0, 0);
|
|
308
|
-
this.setView("hasPictureView");
|
|
309
|
-
this.setImage();
|
|
310
|
-
};
|
|
311
|
-
img.src = readerLoadEvent.target.result.toString();
|
|
312
|
-
};
|
|
313
|
-
reader.readAsDataURL(file);
|
|
314
|
-
}
|
|
315
|
-
emitImage() {
|
|
316
|
-
var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;
|
|
317
|
-
var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;
|
|
318
|
-
var cropRect = this.crop.getBoundingClientRect();
|
|
319
|
-
var width = cropRect.width / this.image.width * this.image.naturalWidth;
|
|
320
|
-
var height = cropRect.height / this.image.height * this.image.naturalHeight;
|
|
321
|
-
if (x < 0)
|
|
322
|
-
x = 0;
|
|
323
|
-
if (x > this.image.naturalWidth)
|
|
324
|
-
x = this.image.naturalWidth;
|
|
325
|
-
if (y < 0)
|
|
326
|
-
y = 0;
|
|
327
|
-
if (y > this.image.naturalWidth)
|
|
328
|
-
y = this.image.naturalWidth;
|
|
329
|
-
if (width > this.image.naturalWidth)
|
|
330
|
-
width = this.image.naturalWidth;
|
|
331
|
-
if (height > this.image.naturalHeight)
|
|
332
|
-
height = this.image.naturalHeight;
|
|
333
|
-
var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);
|
|
334
|
-
this.imageCropChanged.emit(dataUrl);
|
|
335
|
-
}
|
|
336
|
-
generateCroppedImage(x, y, width, height, desiredWidth, desiredHeight) {
|
|
337
|
-
this.canvas.width = desiredWidth;
|
|
338
|
-
this.canvas.height = desiredHeight;
|
|
339
|
-
const context = this.canvas.getContext("2d");
|
|
340
|
-
context.clearRect(0, 0, desiredWidth, desiredHeight);
|
|
341
|
-
context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);
|
|
342
|
-
return this.canvas.toDataURL("image/jpeg", this.quality);
|
|
343
|
-
}
|
|
344
|
-
getCornerLeftTop(corner) {
|
|
345
|
-
let left = 0;
|
|
346
|
-
let top = 0;
|
|
347
|
-
switch (corner) {
|
|
348
|
-
case CornerType.se:
|
|
349
|
-
left = this.crop.offsetLeft;
|
|
350
|
-
top = this.crop.offsetTop;
|
|
351
|
-
break;
|
|
352
|
-
case CornerType.sw:
|
|
353
|
-
top = this.crop.offsetTop;
|
|
354
|
-
break;
|
|
355
|
-
default:
|
|
356
|
-
break;
|
|
357
|
-
}
|
|
358
|
-
return { top, left };
|
|
359
|
-
}
|
|
360
|
-
isMouseStillInTarget(event) {
|
|
361
|
-
var inside = false;
|
|
362
|
-
let mouseX;
|
|
363
|
-
let mouseY;
|
|
364
|
-
const imageRect = this.image.getBoundingClientRect();
|
|
365
|
-
if (event instanceof MouseEvent) {
|
|
366
|
-
mouseX = event.clientX;
|
|
367
|
-
mouseY = event.clientY;
|
|
368
|
-
}
|
|
369
|
-
if (typeof TouchEvent !== "undefined") {
|
|
370
|
-
if (event instanceof TouchEvent) {
|
|
371
|
-
var touch = event.touches[0];
|
|
372
|
-
mouseX = touch.clientX;
|
|
373
|
-
mouseY = touch.clientY;
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
if (mouseX >= imageRect.x &&
|
|
377
|
-
mouseY >= imageRect.y &&
|
|
378
|
-
mouseX <= imageRect.left + imageRect.width &&
|
|
379
|
-
mouseY <= imageRect.top + imageRect.height) {
|
|
380
|
-
inside = true;
|
|
381
|
-
}
|
|
382
|
-
var corners = this.crop.querySelectorAll("div");
|
|
383
|
-
corners.forEach(corner => {
|
|
384
|
-
var cornerRect = corner.getBoundingClientRect();
|
|
385
|
-
if (mouseX >= cornerRect.x &&
|
|
386
|
-
mouseY >= cornerRect.y &&
|
|
387
|
-
mouseX <= cornerRect.left + cornerRect.width &&
|
|
388
|
-
mouseY <= cornerRect.top + cornerRect.height) {
|
|
389
|
-
inside = true;
|
|
390
|
-
}
|
|
391
|
-
});
|
|
392
|
-
return inside;
|
|
393
|
-
}
|
|
394
|
-
render() {
|
|
395
|
-
return (index.h(index.Host, { ref: el => this.host = el }, index.h("canvas", { ref: el => this.canvas = el }), index.h("div", { class: "view", ref: el => this.hasPictureView = el }, index.h("div", { class: "cropper" }, index.h("img", { ref: el => this.image = el }), index.h("div", { class: "backdrop" }), index.h("div", { class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown }, index.h("div", { class: "nw" }), index.h("div", { class: "ne" }), index.h("div", { class: "se" }), index.h("div", { class: "sw" })))), index.h("div", { class: "view", ref: el => this.noPictureView = el }, index.h("dnn-dropzone", { allowCameraMode: true, onFilesSelected: e => this.handleNewFile(e.detail[0]), resx: {
|
|
396
|
-
capture: this.resx.capture,
|
|
397
|
-
dragAndDropFile: this.resx.dragAndDropFile,
|
|
398
|
-
or: this.resx.or,
|
|
399
|
-
takePicture: this.resx.takePicture,
|
|
400
|
-
uploadFile: this.resx.uploadFile,
|
|
401
|
-
} })), index.h("dnn-modal", { ref: el => this.imageTooSmallModal = el, "close-text": this.resx.modalCloseText }, index.h("p", null, this.resx.imageTooSmall.replace("{width}", this.width.toString()).replace("{height}", this.height.toString())))));
|
|
402
|
-
}
|
|
403
|
-
};
|
|
404
|
-
DnnImageCropper.style = dnnImageCropperCss;
|
|
405
|
-
|
|
406
|
-
exports.dnn_image_cropper = DnnImageCropper;
|
|
407
|
-
|
|
408
|
-
//# sourceMappingURL=dnn-image-cropper.cjs.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"dnn-image-cropper.entry.cjs.js","mappings":"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","names":["getMovementFromEvent","h","Host"],"sources":["./src/components/dnn-image-cropper/CornerType.ts","./src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","./src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"sourcesContent":["export enum CornerType {\r\n \"nw\",\r\n \"ne\",\r\n \"se\",\r\n \"sw\",\r\n};",":host {\n display: block;\n}\ncanvas {\n display: none;\n}\n.view{\n visibility: hidden;\n opacity: 0;\n height: 0;\n overflow: hidden;\n transition: all 300ms ease-in-out;\n &.visible{\n visibility: visible;\n opacity: 1;\n height: initial;\n overflow: visible;\n }\n .cropper{\n position: relative;\n width: 100%;\n img{\n width: 100%;\n display: block;\n margin: 0 auto;\n }\n .backdrop{\n backdrop-filter: saturate(0.5);\n backdrop-filter: brightness(0.5);\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n .crop{\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n outline: 2px dashed white;\n box-shadow: black 0 0 0px 2px;\n backdrop-filter: saturate(2);\n backdrop-filter: brightness(2);\n cursor: move;\n >div{\n width: 20px;\n height: 20px;\n background-color: white;\n border: 2px solid rgba(0,0,0,0.5);\n position: absolute;\n &.nw, &.ne{\n top: -17px;\n }\n &.ne, &.se{\n right: -17px;\n }\n &.se, &.sw{\n bottom: -17px;\n }\n &.sw, &.nw{\n left: -17px;\n }\n &.nw, &.se{\n cursor: nwse-resize;\n }\n &.ne, &.sw{\n cursor: nesw-resize;\n }\n }\n }\n }\n}\ndnn-modal{\n --max-width: 512px;\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\nimport { CornerType } from './CornerType';\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\n\n/**\n * Allows cropping an image in-browser with the option to enforce a specific final size.\n * All computation happens in the browser and the final image is emmited\n * in an event that has a data-url of the image.\n */\n@Component({\n tag: 'dnn-image-cropper',\n styleUrl: 'dnn-image-cropper.scss',\n shadow: true,\n})\nexport class DnnImageCropper {\n /** Sets the desired final image width. */\n @Prop() width: number = 600;\n\n /** Sets the desired final image height. */\n @Prop() height: number = 600;\n\n /** Can be used to customize controls text.\n * Some values support tokens, see default values for examples.\n */\n @Prop() resx: {\n capture: string;\n dragAndDropFile: string;\n or: string;\n takePicture: string;\n uploadFile: string;\n imageTooSmall: string;\n modalCloseText: string;\n } = {\n capture: \"Capture\",\n dragAndDropFile: \"Drag and drop an image\",\n or: \"or\",\n takePicture: \"Take a picture\",\n uploadFile: \"Upload an image\",\n imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\n modalCloseText: \"Close\",\n }\n\n /** Sets the output quality of the corpped image (number between 0 and 1). */\n @Prop() quality: number = 0.8;\n\n /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\n @Prop() preventUndersized: boolean = false;\n\n /** When the image crop changes, emits the dataurl for the new cropped image. */\n @Event() imageCropChanged: EventEmitter<string>;\n\n @State() view: IComponentInterfaces[\"View\"];\n \n private host: HTMLElement;\n private hasPictureView: HTMLDivElement;\n private noPictureView: HTMLDivElement;\n private canvas: HTMLCanvasElement;\n private image: HTMLImageElement;\n private crop: HTMLDivElement;\n private previousTouch: Touch;\n private imageTooSmallModal!: HTMLDnnModalElement;\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.setView(\"noPictureView\");\n })\n }\n\n private setView(newView: IComponentInterfaces[\"View\"]){\n const views = this.host.shadowRoot.querySelectorAll(\".view\");\n views.forEach(v =>\n v.classList.remove(\"visible\"));\n switch (newView) {\n case \"noPictureView\":\n this.noPictureView.classList.add(\"visible\");\n break;\n case \"hasPictureView\":\n this.hasPictureView.classList.add(\"visible\");\n break;\n default:\n break;\n }\n this.view = newView;\n }\n\n private initCrop(){\n var wantedRatio = this.width / this.height;\n var imageRect = this.image.getBoundingClientRect();\n var imageRatio = imageRect.width / imageRect.height;\n \n if (wantedRatio > imageRatio){\n var wantedHeight = imageRect.width / wantedRatio;\n var diff = imageRect.height - wantedHeight;\n this.crop.style.top = Math.round(diff/2).toString() + \"px\";\n this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\n }\n else{\n var wantedWidth = imageRect.height * wantedRatio;\n var diff = imageRect.width - wantedWidth;\n this.crop.style.left = Math.round(diff/2).toString() + \"px\";\n this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\n }\n }\n\n private setImage(){\n this.image.addEventListener('load', () => {\n this.initCrop();\n this.emitImage();\n })\n this.image.src = this.canvas.toDataURL();\n }\n\n private handleNewFile(file: File): void {\n if (file.type.split('/')[0] != \"image\"){\n return;\n }\n \n var reader = new FileReader();\n reader.onload = readerLoadEvent => {\n var img = new Image();\n img.onload = () => {\n this.canvas.width = img.width;\n this.canvas.height = img.height;\n if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\n this.imageTooSmallModal.show();\n return;\n }\n var ctx = this.canvas.getContext(\"2d\");\n ctx.drawImage(img,0,0);\n this.setView(\"hasPictureView\");\n this.setImage();\n }\n img.src = readerLoadEvent.target.result.toString();\n }\n reader.readAsDataURL(file);\n }\n\n private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\n event.stopPropagation();\n event.preventDefault();\n const element = event.target as HTMLElement;\n const className = element.classList[0];\n\n document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\n document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\n switch (className) {\n case \"crop\":\n document.addEventListener(\"mousemove\", this.handleCropDrag, false);\n document.addEventListener(\"touchmove\", this.handleCropDrag, false)\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\n break;\n case \"nw\":\n document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\n document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\n break;\n case \"ne\":\n document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\n document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\n break\n case \"se\":\n document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\n document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\n break;\n case \"sw\":\n document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\n document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\n break;\n default:\n break;\n }\n };\n\n private handleImageCropFinished = (_ev: MouseEvent) => {\n this.emitImage();\n document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\n this.previousTouch = undefined;\n }\n\n private emitImage() {\n var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\n var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\n\n var cropRect = this.crop.getBoundingClientRect();\n var width = cropRect.width / this.image.width * this.image.naturalWidth;\n var height = cropRect.height / this.image.height * this.image.naturalHeight;\n\n if (x < 0)\n x = 0;\n if (x > this.image.naturalWidth)\n x = this.image.naturalWidth;\n if (y < 0)\n y = 0;\n if (y > this.image.naturalWidth)\n y = this.image.naturalWidth;\n if (width > this.image.naturalWidth)\n width = this.image.naturalWidth;\n if (height > this.image.naturalHeight)\n height = this.image.naturalHeight;\n\n var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\n this.imageCropChanged.emit(dataUrl);\n }\n\n private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\n this.canvas.width = desiredWidth;\n this.canvas.height = desiredHeight;\n const context = this.canvas.getContext(\"2d\");\n context.clearRect(0, 0, desiredWidth, desiredHeight);\n context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\n\n return this.canvas.toDataURL(\"image/jpeg\", this.quality);\n }\n\n private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\n this.handleCornerDrag(event, CornerType.nw);\n }\n\n private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\n this.handleCornerDrag(event, CornerType.ne);\n }\n\n private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\n this.handleCornerDrag(event, CornerType.se);\n }\n\n private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\n this.handleCornerDrag(event, CornerType.sw);\n }\n\n private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\n if (!this.isMouseStillInTarget(event)){\n return;\n }\n \n let {left, top} = this.getCornerLeftTop(corner);\n let newWidth = 0;\n let newHeight = 0;\n let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n const wantedRatio = this.width / this.height;\n const cropRect = this.crop.getBoundingClientRect();\n const imageRect = this.image.getBoundingClientRect();\n let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\n if (Math.abs(movementX) < Math.abs(movementY)){\n orientation = \"vertical\";\n }\n\n if (orientation == \"horizontal\"){\n switch (corner) {\n case CornerType.nw:\n case CornerType.sw:\n newWidth = cropRect.width - movementX;\n newHeight = newWidth / wantedRatio;\n break;\n case CornerType.ne:\n case CornerType.se:\n newWidth = cropRect.width + movementX;\n newHeight = newWidth / wantedRatio;\n break;\n default:\n break;\n }\n } else{\n switch (corner) {\n case CornerType.nw:\n case CornerType.ne:\n newHeight = cropRect.height - movementY;\n newWidth = newHeight * wantedRatio;\n break;\n case CornerType.se:\n case CornerType.sw:\n newHeight = cropRect.height + movementY;\n newWidth = newHeight * wantedRatio;\n break;\n default:\n break;\n }\n }\n\n switch (corner) {\n case CornerType.ne:\n case CornerType.nw:\n const topOffset = cropRect.height - newHeight;\n top = this.crop.offsetTop + topOffset;\n default:\n break;\n }\n\n switch (corner) {\n case CornerType.nw:\n case CornerType.sw:\n const leftOffset = cropRect.width - newWidth;\n left = this.crop.offsetLeft + leftOffset;\n if (left < 0) left = 0;\n if (left > imageRect.width) left = imageRect.width;\n if (top < 0) top = 0;\n if (top > imageRect.height) top = imageRect.height;\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\n break;\n case CornerType.ne:\n case CornerType.se:\n if (top < 0) top = 0;\n if (top > imageRect.height) top = imageRect.height;\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\n break;\n default:\n break;\n }\n\n if (newWidth / newHeight != wantedRatio){\n return;\n }\n\n if (this.preventUndersized){\n const zoomRatio = this.image.width / this.image.naturalWidth;\n if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\n return;\n }\n }\n\n switch (corner) {\n case CornerType.ne:\n this.crop.style.top = `${top}px`;\n this.crop.style.width = `${newWidth}px`;\n this.crop.style.height = `${newHeight}px`;\n break;\n case CornerType.nw:\n this.crop.style.left = `${left}px`;\n this.crop.style.top = `${top}px`;\n this.crop.style.width = `${newWidth}px`;\n this.crop.style.height = `${newHeight}px`;\n break;\n case CornerType.se:\n this.crop.style.width = `${newWidth}px`;\n this.crop.style.height = `${newHeight}px`;\n break;\n case CornerType.sw:\n this.crop.style.left = `${left}px`;\n this.crop.style.width = `${newWidth}px`;\n this.crop.style.height = `${newHeight}px`;\n break;\n default:\n break;\n }\n }\n\n private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\n let left = 0;\n let top = 0;\n switch (corner) {\n case CornerType.se:\n left = this.crop.offsetLeft;\n top = this.crop.offsetTop;\n break;\n case CornerType.sw:\n top = this.crop.offsetTop;\n break;\n default:\n break;\n }\n return {top, left};\n }\n\n private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\n if (!this.isMouseStillInTarget(ev)){\n return;\n }\n let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\n let newLeft = this.crop.offsetLeft + movementX;\n let newTop = this.crop.offsetTop + movementY;\n var imageRect = this.image.getBoundingClientRect();\n var cropRect = this.crop.getBoundingClientRect();\n if (newLeft < 0){\n newLeft = 0;\n }\n if (newTop < 0){\n newTop = 0;\n }\n if (newLeft + cropRect.width > imageRect.width){\n newLeft = this.crop.offsetLeft;\n }\n if (newTop + cropRect.height > imageRect.height){\n newTop = this.crop.offsetTop;\n }\n this.crop.style.left = newLeft + \"px\";\n this.crop.style.top = newTop + \"px\";\n };\n\n private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\n var inside = false;\n let mouseX: number;\n let mouseY: number;\n const imageRect = this.image.getBoundingClientRect();\n \n if (event instanceof MouseEvent){\n mouseX = event.clientX;\n mouseY = event.clientY;\n }\n\n if (typeof TouchEvent !== \"undefined\"){\n if (event instanceof TouchEvent){\n var touch = event.touches[0];\n mouseX = touch.clientX;\n mouseY = touch.clientY;\n }\n }\n \n if (\n mouseX >= imageRect.x &&\n mouseY >= imageRect.y &&\n mouseX <= imageRect.left + imageRect.width &&\n mouseY <= imageRect.top + imageRect.height)\n {\n inside = true;\n }\n\n var corners = this.crop.querySelectorAll(\"div\");\n corners.forEach(corner =>{\n var cornerRect = corner.getBoundingClientRect();\n if (\n mouseX >= cornerRect.x &&\n mouseY >= cornerRect.y &&\n mouseX <= cornerRect.left + cornerRect.width &&\n mouseY <= cornerRect.top + cornerRect.height)\n {\n inside = true;\n }\n })\n\n return inside;\n }\n\n render() {\n return (\n <Host ref={el => this.host = el}>\n <canvas ref={el => this.canvas = el} />\n <div\n class=\"view\"\n ref={el => this.hasPictureView = el}\n >\n <div class=\"cropper\">\n <img ref={el => this.image = el} />\n <div class=\"backdrop\" />\n <div\n class=\"crop\"\n ref={e => this.crop = e}\n onMouseDown={this.handleCropMouseDown}\n onTouchStart={this.handleCropMouseDown}\n >\n <div class=\"nw\" />\n <div class=\"ne\" />\n <div class=\"se\" />\n <div class=\"sw\" />\n </div>\n </div>\n </div>\n <div\n class=\"view\"\n ref={el => this.noPictureView = el}>\n <dnn-dropzone\n allowCameraMode\n onFilesSelected={e => this.handleNewFile(e.detail[0])}\n resx={\n {\n capture: this.resx.capture,\n dragAndDropFile: this.resx.dragAndDropFile,\n or: this.resx.or,\n takePicture: this.resx.takePicture,\n uploadFile: this.resx.uploadFile,\n }\n }\n />\n </div>\n <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\n <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\n </dnn-modal>\n </Host>\n );\n }\n}\n\ninterface IComponentInterfaces\n{\n View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\n}"],"version":3}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-d53702a3.js');
|
|
6
|
-
|
|
7
|
-
const dnnModalCss = ":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
|
|
8
|
-
|
|
9
|
-
const DnnModal = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.dismissed = index.createEvent(this, "dismissed", 7);
|
|
13
|
-
/**
|
|
14
|
-
* Pass false to remove the backdrop click auto-dismiss feature.
|
|
15
|
-
*/
|
|
16
|
-
this.backdropDismiss = true;
|
|
17
|
-
/**
|
|
18
|
-
* Optionally pass the aria-label text for the close button.
|
|
19
|
-
* Defaults to "Close modal" if not provided.
|
|
20
|
-
*/
|
|
21
|
-
this.closeText = "Close modal";
|
|
22
|
-
/**
|
|
23
|
-
* Optionally you can pass false to not show the close button.
|
|
24
|
-
* If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
|
|
25
|
-
* or provide your own dismissal logic in the modal content.
|
|
26
|
-
*/
|
|
27
|
-
this.showCloseButton = true;
|
|
28
|
-
/**
|
|
29
|
-
* Reflects the visible state of the modal.
|
|
30
|
-
*/
|
|
31
|
-
this.visible = false;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* Shows the modal
|
|
35
|
-
*/
|
|
36
|
-
async show() {
|
|
37
|
-
this.visible = true;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Hides the modal
|
|
41
|
-
*/
|
|
42
|
-
async hide() {
|
|
43
|
-
this.visible = false;
|
|
44
|
-
}
|
|
45
|
-
handleDismiss() {
|
|
46
|
-
this.visible = false;
|
|
47
|
-
this.dismissed.emit();
|
|
48
|
-
}
|
|
49
|
-
handleBackdropClick(e) {
|
|
50
|
-
const element = e.target;
|
|
51
|
-
if (element.id === "backdrop" && this.backdropDismiss) {
|
|
52
|
-
this.handleDismiss();
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
render() {
|
|
56
|
-
return (index.h(index.Host, null, index.h("div", { id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) }, index.h("div", { class: "modal" }, this.showCloseButton &&
|
|
57
|
-
index.h("button", { class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }))), index.h("slot", null)))));
|
|
58
|
-
}
|
|
59
|
-
get el() { return index.getElement(this); }
|
|
60
|
-
};
|
|
61
|
-
DnnModal.style = dnnModalCss;
|
|
62
|
-
|
|
63
|
-
exports.dnn_modal = DnnModal;
|
|
64
|
-
|
|
65
|
-
//# sourceMappingURL=dnn-modal.cjs.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"dnn-modal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,ulDAAulD;;MCO9lD,QAAQ;EALrB;;;;;;IAYU,oBAAe,GAAY,IAAI,CAAC;;;;;IAMhC,cAAS,GAAY,aAAa,CAAC;;;;;;IAOnC,oBAAe,GAAa,IAAI,CAAC;;;;IAKH,YAAO,GAAY,KAAK,CAAC;GA0DhE;;;;EApDC,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,SAAS,EACnD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAEzCA,iBAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,eAAe;MACnBA,oBACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU,EAEXA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","./src/components/dnn-modal/dnn-modal.tsx"],"sourcesContent":[":host {\n /**\n * @prop --max-width: The maximum width of the module.\n */\n display: block;\n .overlay{\n background-color: rgba(0,0,0,0.5);\n position: fixed;\n top:0;\n left:0;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: blur(2px);\n transition: all 300ms ease-in-out;\n visibility: hidden;\n opacity: 0;\n .modal{\n max-width: var(--max-width, 1200px);\n background-color: white;\n padding: 30px;\n transform: scale(2);\n transition: all 300ms ease-in-out;\n z-index: 2;\n position: relative;\n margin: 10%;\n max-height: 80%;\n border-radius: var(--dnn-controls-radius, 5px);\n box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\n display: block;\n .close{\n position: absolute;\n background-color:white;\n border: 2px solid white;\n border-radius: 50%;\n padding: 0;\n margin: 0;\n top: -12px;\n right: -12px;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus, &:hover{\n box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\n }\n svg{\n width: 24px;\n height: 24px;\n color: grey;\n }\n }\n }\n &.visible{\n visibility: visible;\n opacity: 1;\n .modal{\n transform: scale(1);\n box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\n display: block;\n }\n }\n }\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'dnn-modal',\n styleUrl: 'dnn-modal.scss',\n shadow: true\n})\nexport class DnnModal {\n \n @Element() el!: HTMLDnnModalElement;\n \n /**\n * Pass false to remove the backdrop click auto-dismiss feature.\n */\n @Prop() backdropDismiss: boolean = true;\n\n /**\n * Optionally pass the aria-label text for the close button.\n * Defaults to \"Close modal\" if not provided.\n */\n @Prop() closeText?: string = \"Close modal\";\n\n /**\n * Optionally you can pass false to not show the close button.\n * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\n * or provide your own dismissal logic in the modal content.\n */\n @Prop() showCloseButton?: boolean = true;\n\n /**\n * Reflects the visible state of the modal.\n */\n @Prop({mutable: true, reflect: true}) visible: boolean = false;\n\n /**\n * Shows the modal\n */\n @Method()\n async show() {\n this.visible = true;\n }\n\n /**\n * Hides the modal\n */\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /**\n * Fires when the modal is dismissed.\n */\n @Event() dismissed!: EventEmitter;\n\n private handleDismiss(){\n this.visible = false;\n this.dismissed.emit();\n }\n\n private handleBackdropClick(e: MouseEvent): void {\n const element = (e.target as HTMLElement);\n if (element.id === \"backdrop\" && this.backdropDismiss){\n this.handleDismiss();\n }\n }\n\n render() {\n return (\n <Host>\n <div id=\"backdrop\"\n class={this.visible ? 'overlay visible' : 'overlay'}\n onClick={e => this.handleBackdropClick(e)}\n >\n <div class=\"modal\">\n {this.showCloseButton &&\n <button\n class=\"close\"\n aria-label={this.closeText}\n onClick={() => this.handleDismiss()}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n </button>\n }\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|