cty-mui-core 1.0.34 → 1.0.35
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/components/camera.js +20 -11
- package/components/index.js +8 -7
- package/dist/cjs/cty-camera_2.cjs.entry.js +17 -10
- package/dist/cjs/cty-mui.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +8 -7
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/camera/camera.js +75 -28
- package/dist/collection/utils/native/media-downloader.js +8 -7
- package/dist/cty-mui/cty-mui.esm.js +1 -1
- package/dist/cty-mui/index.esm.js +1 -1
- package/dist/cty-mui/p-58c84307.system.entry.js +1 -0
- package/dist/cty-mui/p-79c7921c.entry.js +1 -0
- package/dist/cty-mui/{p-D03xuiJJ.system.js → p-CULOFO8H.system.js} +1 -1
- package/dist/cty-mui/p-Cegbc1c7.system.js +1 -1
- package/dist/docs.json +49 -1
- package/dist/esm/cty-camera_2.entry.js +17 -10
- package/dist/esm/cty-mui.js +1 -1
- package/dist/esm/index.js +8 -7
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/cty-camera_2.entry.js +1 -1
- package/dist/esm-es5/cty-mui.js +1 -1
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/types/components/camera/camera.d.ts +6 -3
- package/dist/types/components.d.ts +4 -0
- package/dist/types/utils/native/media-downloader.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cty-mui/p-0e4ef989.system.entry.js +0 -1
- package/dist/cty-mui/p-1e47e96a.entry.js +0 -1
package/components/camera.js
CHANGED
|
@@ -43,9 +43,11 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
43
43
|
this.mode = 'both';
|
|
44
44
|
this.singleText = '单拍';
|
|
45
45
|
this.multipleText = '连拍';
|
|
46
|
-
this.touchZoom = true;
|
|
47
46
|
this.ratios = ['9:16', '3:4', '1:1', '16:9', 'full'];
|
|
48
47
|
this.zooms = [1, 2, 5, 10];
|
|
48
|
+
this.zoomSteps = 20; //仅android有效，通过这个算出每一份的的比例: (getMaxZoom() + 1) / allowMaxZoom
|
|
49
|
+
this.touchZoom = true;
|
|
50
|
+
this.touchZoomProp = 0.01;
|
|
49
51
|
this.ratioIndex = 0;
|
|
50
52
|
this.flash = false;
|
|
51
53
|
this.zoomIndex = 0;
|
|
@@ -58,6 +60,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
58
60
|
this.originalBodyBackground = '';
|
|
59
61
|
this.isTakingPhoto = false;
|
|
60
62
|
this.distance = 0;
|
|
63
|
+
this.startZoom = 0;
|
|
61
64
|
}
|
|
62
65
|
connectedCallback() {
|
|
63
66
|
if (this.mode === 'single') {
|
|
@@ -77,7 +80,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
77
80
|
}
|
|
78
81
|
initCamera() {
|
|
79
82
|
const height = this.getCameraHeight();
|
|
80
|
-
|
|
83
|
+
cameraPreview.startCamera(Object.assign(Object.assign({ y: this.safeArea, camera: 'back', backgroundColor: '#000000' }, this.options), { x: 0, height, toBack: true, tapPhoto: false, tapFocus: true, enableAutoSettings: false, storeToFile: this.file }));
|
|
81
84
|
}
|
|
82
85
|
close() {
|
|
83
86
|
this.ctyDismiss.emit();
|
|
@@ -116,7 +119,8 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
116
119
|
const { zooms } = this;
|
|
117
120
|
this.zoomIndex = idx;
|
|
118
121
|
const maxZoom = await cameraPreview.getMaxZoom();
|
|
119
|
-
|
|
122
|
+
const zoomStep = (maxZoom + 1) / this.zoomSteps;
|
|
123
|
+
let zoom = zoomStep * zooms[idx] - 1;
|
|
120
124
|
if (deviceInfo.isIos) {
|
|
121
125
|
zoom = zooms[idx];
|
|
122
126
|
}
|
|
@@ -173,12 +177,13 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
173
177
|
pictures.pop();
|
|
174
178
|
this.pictures = pictures;
|
|
175
179
|
}
|
|
176
|
-
touchstart(e) {
|
|
180
|
+
async touchstart(e) {
|
|
177
181
|
e.stopPropagation();
|
|
178
182
|
if (this.touchZoom && e.touches.length == 2) {
|
|
179
183
|
const xMove = e.touches[1].clientX - e.touches[0].clientX;
|
|
180
184
|
const yMove = e.touches[1].clientY - e.touches[0].clientY;
|
|
181
185
|
this.distance = Math.sqrt(xMove * xMove + yMove * yMove);
|
|
186
|
+
this.startZoom = await cameraPreview.getZoom();
|
|
182
187
|
}
|
|
183
188
|
}
|
|
184
189
|
touchmove(e) {
|
|
@@ -188,7 +193,7 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
188
193
|
const yMove = e.touches[1].clientY - e.touches[0].clientY;
|
|
189
194
|
const distance = Math.sqrt(xMove * xMove + yMove * yMove);
|
|
190
195
|
const distanceDiff = distance - this.distance;
|
|
191
|
-
const zoom =
|
|
196
|
+
const zoom = this.touchZoomProp * distanceDiff;
|
|
192
197
|
this.updateZoom(zoom);
|
|
193
198
|
}
|
|
194
199
|
}
|
|
@@ -196,20 +201,22 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
196
201
|
e.stopPropagation();
|
|
197
202
|
}
|
|
198
203
|
async updateZoom(diff) {
|
|
199
|
-
const
|
|
204
|
+
const { startZoom } = this;
|
|
200
205
|
let maxZoom = await cameraPreview.getMaxZoom();
|
|
201
|
-
const
|
|
206
|
+
const zoomStep = (maxZoom + 1) / this.zoomSteps;
|
|
207
|
+
const lastZoom = this.zooms.slice(-1)[0] || 10;
|
|
202
208
|
if (deviceInfo.isIos) {
|
|
203
209
|
maxZoom = lastZoom;
|
|
204
210
|
}
|
|
205
211
|
else {
|
|
206
|
-
|
|
212
|
+
maxZoom = Math.min(maxZoom, lastZoom * zoomStep);
|
|
213
|
+
diff = zoomStep * diff;
|
|
207
214
|
}
|
|
208
|
-
cameraPreview.setZoom(Math.min(
|
|
215
|
+
cameraPreview.setZoom(Math.min(startZoom + diff, maxZoom));
|
|
209
216
|
}
|
|
210
217
|
render() {
|
|
211
218
|
const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, mode, singleText, multipleText, currentPhotoMode, confirmIcon, confirmText, deleteIcon, pictures, showImageViewer, imageViewerIndex, touchZoom } = this;
|
|
212
|
-
return (h(Host, { key: '
|
|
219
|
+
return (h(Host, { key: '0e1236ed3e7ded3d45a20557720d0a1cb73cacbc', class: "cty-camera", onClick: (e) => e.stopPropagation() }, h("cty-nav-bar", { key: '2138287d88ab3b3e7c479e1e7081e7a84913330c', title: title, type: "clear" }, h("slot", { key: '116f078017c84816398aeaf160a752c37cc04f8e', name: "header-start", slot: "start" }, !!closeIcon && h("ion-button", { key: '865c3e7b3fde6d3f4af25797aa06b9951768ad43', class: "cty-camera__close", onClick: () => this.close() }, h("cty-icon", { key: 'fd6221b44faabef4946c159caf79c6e92ef954a1', class: "cty-camera__close-icon", name: closeIcon })))), h("div", { key: 'e3f231b248e2d3d28d02abc94f756c00e03dfc7c', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, h("div", { key: '7eef3b7f58ed5f9b879ed9d06ea305bf6a2aeded', class: "cty-camera-widgets", part: "widgets" }, !!flipText && h("button", { key: 'd6cec2925a2f8764b012ad1236c2e1604bff0655', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, h("cty-icon", { key: '21d6f991eeb503edd1052e522ba4fdbfd295a390', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && h("span", { key: '170cbbd39f096f131b7eeb35c9bdc56ca13eb660', class: "cty-camera-widget__text" }, flipText)), !!flashText && h("button", { key: '4229d973f0de5cb7a1b32f1c75cc7b490c8914b4', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, h("cty-icon", { key: 'bdb3655ae114f987a8b7b351379e42a9cc6080bf', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && h("span", { key: '16e1c210050d4655dd4efbde5801735114caf0d3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && h("button", { key: '70ab5fad1921117f852f5ddde7b8869f18bee67f', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, h("span", { key: '60400bddd066b601271c5145cd0fc974a74bf251', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && h("span", { key: '0c7dcc67fc1a42f0af3a7a97a95e456d635b21e2', class: "cty-camera-widget__text" }, ratioText)))), h("div", { key: '0ab4ac819601e800f67a738506bd7b598e807793', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && h("div", { key: '5a7a68b29e56ed0fa08efed78b440a33aeb8bba3', class: "cty-camera-controls__mode flex-center", part: "mode" }, h("button", { key: '37f5fd30dd852d12283045ffc97ce62713565379', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'single' }, onClick: () => this.currentPhotoMode = 'single' }, singleText), h("button", { key: '8db9de7660b537b2323ecb8257a29b03a5a1b739', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'multiple' }, onClick: () => this.currentPhotoMode = 'multiple' }, multipleText)), h("slot", { key: '563ba129d45a1654397d1f661e0d4a878a3eb98f', name: "zooms" }, !touchZoom && zooms.length > 0 && h("div", { key: '4141297ceb466b1b048c3dbe615e438754726be0', class: "cty-camera-controls__zooms flex-center" }, zooms.map((item, idx) => (h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X")))))), h("div", { key: '6ad6e1b222de0dd719f3d585d3c6d5142e50ac95', class: "cty-camera-controls__main flex-center" }, h("div", { key: '8e022c6b28fbfb68e3b92bf450fdc0fcb340c4cb', class: "cty-camera-controls__main-left flex-center" }), h("div", { key: 'ec1b6be8a71a7980ebe762a921d525f89a9acf93', class: "cty-camera-controls__take-photo flex-center" }, h("button", { key: '2f70643b5323354d66f1722701baee3c7afa7713', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), h("div", { key: '59a140ade0e6aba2954c4916f2721604cc72bfb8', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && h("button", { key: 'b748cf4b9c14858b75bf45d8583f596afeb6b87d', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, h("cty-icon", { key: '70968ad36c52dc7af04d830342847156ffe44d8b', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && h("button", { key: 'b8fb364fb8a1f71570589ca62262c7b742fa275c', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, h("cty-icon", { key: '0b299878047b1cdeb26a55a310fa237cdca02a56', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && h("span", { key: '7fc9bf60f54ac7b1fa4dd6b9ddce67d0976c159b', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), h("slot", { key: '8e779e2656ca8ac77dc4a8c624aeb5e517352ab5', name: "images" }, h("div", { key: 'ea7893d466cb404d0cae3c506ffb9a16ad7e7766', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, h("img", { class: 'cty-camera-controls__image-img', src: item.url }), h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, h("cty-icon", { class: "cty-camera-controls__image-delete", name: closeOutline })))))))), showImageViewer && h("cty-image-viewer", { key: '6b3983c245ef6f73b848732c8cddbe5239c3356a', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && h("div", { key: '7cfebe0c9321aa7ed268e27842fcd763e2230020', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, h("button", { key: 'a22468122b2923d3556157bb345f781f0c2eceee', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, h("cty-icon", { key: 'e7b6b467b217590b80abf0c64b2fe1818e0a4f96', name: "cty-close2" })), h("button", { key: '8bddc0bb96d9cc2eb1d12baeeaaf8a610f9c0837', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, h("cty-icon", { key: '5f0f94f95f02a1609f5a26994eaba85f7b9c7b5a', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && h("i", { key: '90a85c170d700bb74b0ce919fa99469ebc8605b5', slot: "close" }))));
|
|
213
220
|
}
|
|
214
221
|
get el() { return this; }
|
|
215
222
|
static get style() { return cameraCss; }
|
|
@@ -232,9 +239,11 @@ const Camera = /*@__PURE__*/ proxyCustomElement(class Camera extends HTMLElement
|
|
|
232
239
|
"mode": [1],
|
|
233
240
|
"singleText": [1, "single-text"],
|
|
234
241
|
"multipleText": [1, "multiple-text"],
|
|
235
|
-
"touchZoom": [4, "touch-zoom"],
|
|
236
242
|
"ratios": [16],
|
|
237
243
|
"zooms": [16],
|
|
244
|
+
"zoomSteps": [2, "zoom-steps"],
|
|
245
|
+
"touchZoom": [4, "touch-zoom"],
|
|
246
|
+
"touchZoomProp": [2, "touch-zoom-prop"],
|
|
238
247
|
"ratioIndex": [32],
|
|
239
248
|
"flash": [32],
|
|
240
249
|
"zoomIndex": [32],
|
package/components/index.js
CHANGED
|
@@ -477,9 +477,10 @@ class CTYMediaDownloader {
|
|
|
477
477
|
return new Promise(async (resolve, reject) => {
|
|
478
478
|
if (this.isFileSystemAvailable && this.isFileTransferAvailable) {
|
|
479
479
|
const path = deviceInfo.isIos ? this._filePlugin.documentsDirectory : this._filePlugin.externalRootDirectory;
|
|
480
|
-
const
|
|
480
|
+
const dirName = options.albumName || 'download';
|
|
481
|
+
const fullPath = path + dirName;
|
|
481
482
|
try {
|
|
482
|
-
const hasDir = await this._ensureDirectory(
|
|
483
|
+
const hasDir = await this._ensureDirectory(path, dirName);
|
|
483
484
|
if (!hasDir) {
|
|
484
485
|
throw new Error('Failed to create directory');
|
|
485
486
|
}
|
|
@@ -499,12 +500,12 @@ class CTYMediaDownloader {
|
|
|
499
500
|
}
|
|
500
501
|
});
|
|
501
502
|
}
|
|
502
|
-
async _ensureDirectory(path) {
|
|
503
|
+
async _ensureDirectory(path, dirName) {
|
|
503
504
|
try {
|
|
504
|
-
const exists = await this.checkDirectory(path);
|
|
505
|
+
const exists = await this.checkDirectory(path + dirName);
|
|
505
506
|
if (exists)
|
|
506
507
|
return true;
|
|
507
|
-
await this.createDirectory(path);
|
|
508
|
+
await this.createDirectory(path, dirName);
|
|
508
509
|
return true;
|
|
509
510
|
}
|
|
510
511
|
catch (error) {
|
|
@@ -526,12 +527,12 @@ class CTYMediaDownloader {
|
|
|
526
527
|
}
|
|
527
528
|
});
|
|
528
529
|
}
|
|
529
|
-
createDirectory(path) {
|
|
530
|
+
createDirectory(path, dirName) {
|
|
530
531
|
return new Promise((resolve, reject) => {
|
|
531
532
|
try {
|
|
532
533
|
window.resolveLocalFileSystemURL(path, (entry) => {
|
|
533
534
|
try {
|
|
534
|
-
entry.getDirectory(
|
|
535
|
+
entry.getDirectory(dirName, { create: true }, (de) => {
|
|
535
536
|
resolve(de);
|
|
536
537
|
}, (err) => {
|
|
537
538
|
reject(err);
|
|
@@ -37,9 +37,11 @@ const Camera = class {
|
|
|
37
37
|
this.mode = 'both';
|
|
38
38
|
this.singleText = '单拍';
|
|
39
39
|
this.multipleText = '连拍';
|
|
40
|
-
this.touchZoom = true;
|
|
41
40
|
this.ratios = ['9:16', '3:4', '1:1', '16:9', 'full'];
|
|
42
41
|
this.zooms = [1, 2, 5, 10];
|
|
42
|
+
this.zoomSteps = 20; //仅android有效，通过这个算出每一份的的比例: (getMaxZoom() + 1) / allowMaxZoom
|
|
43
|
+
this.touchZoom = true;
|
|
44
|
+
this.touchZoomProp = 0.01;
|
|
43
45
|
this.ratioIndex = 0;
|
|
44
46
|
this.flash = false;
|
|
45
47
|
this.zoomIndex = 0;
|
|
@@ -52,6 +54,7 @@ const Camera = class {
|
|
|
52
54
|
this.originalBodyBackground = '';
|
|
53
55
|
this.isTakingPhoto = false;
|
|
54
56
|
this.distance = 0;
|
|
57
|
+
this.startZoom = 0;
|
|
55
58
|
}
|
|
56
59
|
connectedCallback() {
|
|
57
60
|
if (this.mode === 'single') {
|
|
@@ -71,7 +74,7 @@ const Camera = class {
|
|
|
71
74
|
}
|
|
72
75
|
initCamera() {
|
|
73
76
|
const height = this.getCameraHeight();
|
|
74
|
-
|
|
77
|
+
cameraPreview.cameraPreview.startCamera(Object.assign(Object.assign({ y: this.safeArea, camera: 'back', backgroundColor: '#000000' }, this.options), { x: 0, height, toBack: true, tapPhoto: false, tapFocus: true, enableAutoSettings: false, storeToFile: this.file }));
|
|
75
78
|
}
|
|
76
79
|
close() {
|
|
77
80
|
this.ctyDismiss.emit();
|
|
@@ -110,7 +113,8 @@ const Camera = class {
|
|
|
110
113
|
const { zooms } = this;
|
|
111
114
|
this.zoomIndex = idx;
|
|
112
115
|
const maxZoom = await cameraPreview.cameraPreview.getMaxZoom();
|
|
113
|
-
|
|
116
|
+
const zoomStep = (maxZoom + 1) / this.zoomSteps;
|
|
117
|
+
let zoom = zoomStep * zooms[idx] - 1;
|
|
114
118
|
if (deviceInfo.deviceInfo.isIos) {
|
|
115
119
|
zoom = zooms[idx];
|
|
116
120
|
}
|
|
@@ -167,12 +171,13 @@ const Camera = class {
|
|
|
167
171
|
pictures.pop();
|
|
168
172
|
this.pictures = pictures;
|
|
169
173
|
}
|
|
170
|
-
touchstart(e) {
|
|
174
|
+
async touchstart(e) {
|
|
171
175
|
e.stopPropagation();
|
|
172
176
|
if (this.touchZoom && e.touches.length == 2) {
|
|
173
177
|
const xMove = e.touches[1].clientX - e.touches[0].clientX;
|
|
174
178
|
const yMove = e.touches[1].clientY - e.touches[0].clientY;
|
|
175
179
|
this.distance = Math.sqrt(xMove * xMove + yMove * yMove);
|
|
180
|
+
this.startZoom = await cameraPreview.cameraPreview.getZoom();
|
|
176
181
|
}
|
|
177
182
|
}
|
|
178
183
|
touchmove(e) {
|
|
@@ -182,7 +187,7 @@ const Camera = class {
|
|
|
182
187
|
const yMove = e.touches[1].clientY - e.touches[0].clientY;
|
|
183
188
|
const distance = Math.sqrt(xMove * xMove + yMove * yMove);
|
|
184
189
|
const distanceDiff = distance - this.distance;
|
|
185
|
-
const zoom =
|
|
190
|
+
const zoom = this.touchZoomProp * distanceDiff;
|
|
186
191
|
this.updateZoom(zoom);
|
|
187
192
|
}
|
|
188
193
|
}
|
|
@@ -190,20 +195,22 @@ const Camera = class {
|
|
|
190
195
|
e.stopPropagation();
|
|
191
196
|
}
|
|
192
197
|
async updateZoom(diff) {
|
|
193
|
-
const
|
|
198
|
+
const { startZoom } = this;
|
|
194
199
|
let maxZoom = await cameraPreview.cameraPreview.getMaxZoom();
|
|
195
|
-
const
|
|
200
|
+
const zoomStep = (maxZoom + 1) / this.zoomSteps;
|
|
201
|
+
const lastZoom = this.zooms.slice(-1)[0] || 10;
|
|
196
202
|
if (deviceInfo.deviceInfo.isIos) {
|
|
197
203
|
maxZoom = lastZoom;
|
|
198
204
|
}
|
|
199
205
|
else {
|
|
200
|
-
|
|
206
|
+
maxZoom = Math.min(maxZoom, lastZoom * zoomStep);
|
|
207
|
+
diff = zoomStep * diff;
|
|
201
208
|
}
|
|
202
|
-
cameraPreview.cameraPreview.setZoom(Math.min(
|
|
209
|
+
cameraPreview.cameraPreview.setZoom(Math.min(startZoom + diff, maxZoom));
|
|
203
210
|
}
|
|
204
211
|
render() {
|
|
205
212
|
const { title, closeIcon, flash, flipText, flashText, ratioText, ratios, ratioIndex, zoomIndex, zooms, mode, singleText, multipleText, currentPhotoMode, confirmIcon, confirmText, deleteIcon, pictures, showImageViewer, imageViewerIndex, touchZoom } = this;
|
|
206
|
-
return (index.h(index.Host, { key: '
|
|
213
|
+
return (index.h(index.Host, { key: '0e1236ed3e7ded3d45a20557720d0a1cb73cacbc', class: "cty-camera", onClick: (e) => e.stopPropagation() }, index.h("cty-nav-bar", { key: '2138287d88ab3b3e7c479e1e7081e7a84913330c', title: title, type: "clear" }, index.h("slot", { key: '116f078017c84816398aeaf160a752c37cc04f8e', name: "header-start", slot: "start" }, !!closeIcon && index.h("ion-button", { key: '865c3e7b3fde6d3f4af25797aa06b9951768ad43', class: "cty-camera__close", onClick: () => this.close() }, index.h("cty-icon", { key: 'fd6221b44faabef4946c159caf79c6e92ef954a1', class: "cty-camera__close-icon", name: closeIcon })))), index.h("div", { key: 'e3f231b248e2d3d28d02abc94f756c00e03dfc7c', class: "cty-camera-main", onTouchStart: (e) => this.touchstart(e), onTouchMove: (e) => this.touchmove(e), onTouchEnd: (e) => this.touchend(e) }, index.h("div", { key: '7eef3b7f58ed5f9b879ed9d06ea305bf6a2aeded', class: "cty-camera-widgets", part: "widgets" }, !!flipText && index.h("button", { key: 'd6cec2925a2f8764b012ad1236c2e1604bff0655', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.flipCamera() }, index.h("cty-icon", { key: '21d6f991eeb503edd1052e522ba4fdbfd295a390', class: "cty-camera-widget__icon", name: "cty-flip" }), !!flipText && index.h("span", { key: '170cbbd39f096f131b7eeb35c9bdc56ca13eb660', class: "cty-camera-widget__text" }, flipText)), !!flashText && index.h("button", { key: '4229d973f0de5cb7a1b32f1c75cc7b490c8914b4', class: "cty-button-native cty-camera-widget", part: "widget", onClick: () => this.toggleFlash() }, index.h("cty-icon", { key: 'bdb3655ae114f987a8b7b351379e42a9cc6080bf', class: "cty-camera-widget__icon", name: flash ? 'cty-flash-on' : 'cty-flash-off' }), !!flashText && index.h("span", { key: '16e1c210050d4655dd4efbde5801735114caf0d3', class: "cty-camera-widget__text" }, flashText)), !!ratioText && index.h("button", { key: '70ab5fad1921117f852f5ddde7b8869f18bee67f', class: "cty-button-native cty-camera-widget", part: "ratio", onClick: () => this.ratioChange() }, index.h("span", { key: '60400bddd066b601271c5145cd0fc974a74bf251', class: "cty-camera-widget__ratio flex-center" }, ratios[ratioIndex]), !!ratioText && index.h("span", { key: '0c7dcc67fc1a42f0af3a7a97a95e456d635b21e2', class: "cty-camera-widget__text" }, ratioText)))), index.h("div", { key: '0ab4ac819601e800f67a738506bd7b598e807793', class: "cty-camera-controls safe-area-bottom-padding" }, mode == 'both' && pictures.length <= 0 && index.h("div", { key: '5a7a68b29e56ed0fa08efed78b440a33aeb8bba3', class: "cty-camera-controls__mode flex-center", part: "mode" }, index.h("button", { key: '37f5fd30dd852d12283045ffc97ce62713565379', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'single' }, onClick: () => this.currentPhotoMode = 'single' }, singleText), index.h("button", { key: '8db9de7660b537b2323ecb8257a29b03a5a1b739', class: { 'cty-button-native cty-camera-controls__mode-button': true, 'cty-camera-controls__mode-button__active': currentPhotoMode === 'multiple' }, onClick: () => this.currentPhotoMode = 'multiple' }, multipleText)), index.h("slot", { key: '563ba129d45a1654397d1f661e0d4a878a3eb98f', name: "zooms" }, !touchZoom && zooms.length > 0 && index.h("div", { key: '4141297ceb466b1b048c3dbe615e438754726be0', class: "cty-camera-controls__zooms flex-center" }, zooms.map((item, idx) => (index.h("div", { class: { 'cty-camera-controls__zoom-item flex-center': true, 'cty-camera-controls__zoom-item__active': zoomIndex === idx }, onClick: () => this.setZoom(idx) }, index.h("span", { class: "cty-camera-controls__zoom-text flex-center" }, item, "X")))))), index.h("div", { key: '6ad6e1b222de0dd719f3d585d3c6d5142e50ac95', class: "cty-camera-controls__main flex-center" }, index.h("div", { key: '8e022c6b28fbfb68e3b92bf450fdc0fcb340c4cb', class: "cty-camera-controls__main-left flex-center" }), index.h("div", { key: 'ec1b6be8a71a7980ebe762a921d525f89a9acf93', class: "cty-camera-controls__take-photo flex-center" }, index.h("button", { key: '2f70643b5323354d66f1722701baee3c7afa7713', class: "cty-button-native cty-camera-controls__take-photo-button", part: "take-photo", onClick: () => this.takePhoto() })), index.h("div", { key: '59a140ade0e6aba2954c4916f2721604cc72bfb8', class: "cty-camera-controls__main-confirm flex-center" }, currentPhotoMode !== 'single' && pictures.length > 0 && !!deleteIcon && index.h("button", { key: 'b748cf4b9c14858b75bf45d8583f596afeb6b87d', class: "cty-camera-controls__main-delete cty-button-native flex-column-center", onClick: () => this.deleteLastPicture() }, index.h("cty-icon", { key: '70968ad36c52dc7af04d830342847156ffe44d8b', class: "cty-camera-controls__main-delete-icon", name: deleteIcon })), currentPhotoMode !== 'single' && pictures.length > 0 && index.h("button", { key: 'b8fb364fb8a1f71570589ca62262c7b742fa275c', class: "cty-button-native flex-column-center", onClick: () => this.confirm() }, index.h("cty-icon", { key: '0b299878047b1cdeb26a55a310fa237cdca02a56', class: "cty-camera-controls__main-confirm-icon", name: confirmIcon }), confirmText && index.h("span", { key: '7fc9bf60f54ac7b1fa4dd6b9ddce67d0976c159b', class: "cty-camera-controls__main-confirm-text" }, confirmText)))), index.h("slot", { key: '8e779e2656ca8ac77dc4a8c624aeb5e517352ab5', name: "images" }, index.h("div", { key: 'ea7893d466cb404d0cae3c506ffb9a16ad7e7766', class: "cty-camera-controls__images flex-align-center" }, currentPhotoMode !== 'single' && pictures.map((item, idx) => (index.h("div", { class: "cty-camera-controls__image", onClick: () => this.toImageViewer(idx) }, index.h("img", { class: 'cty-camera-controls__image-img', src: item.url }), index.h("button", { class: "cty-button-native", onClick: (e) => this.deletePicture(e, idx) }, index.h("cty-icon", { class: "cty-camera-controls__image-delete", name: index$1.closeOutline })))))))), showImageViewer && index.h("cty-image-viewer", { key: '6b3983c245ef6f73b848732c8cddbe5239c3356a', images: pictures.map(item => item.url), initialSlide: imageViewerIndex, overlayIndex: 100, backdropDismiss: false, closeable: false, onCtyDismiss: (e) => this.closeImageViewer(e) }, currentPhotoMode !== 'multiple' && index.h("div", { key: '7cfebe0c9321aa7ed268e27842fcd763e2230020', class: "cty-camera-viewer__single flex-center-between", slot: "pager" }, index.h("button", { key: 'a22468122b2923d3556157bb345f781f0c2eceee', class: "cty-camera-viewer__single-close cty-button-native", onClick: (event) => this.closeSingleImageViewer(event) }, index.h("cty-icon", { key: 'e7b6b467b217590b80abf0c64b2fe1818e0a4f96', name: "cty-close2" })), index.h("button", { key: '8bddc0bb96d9cc2eb1d12baeeaaf8a610f9c0837', class: "cty-camera-viewer__single-confirm cty-button-native", onClick: () => this.confirm() }, index.h("cty-icon", { key: '5f0f94f95f02a1609f5a26994eaba85f7b9c7b5a', name: "cty-tick" }))), currentPhotoMode !== 'multiple' && index.h("i", { key: '90a85c170d700bb74b0ce919fa99469ebc8605b5', slot: "close" }))));
|
|
207
214
|
}
|
|
208
215
|
get el() { return index.getElement(this); }
|
|
209
216
|
};
|