@lemonadejs/cropper 1.4.1 → 1.5.3
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/cropper.js +97 -103
- package/package.json +4 -4
package/dist/cropper.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* (c) LemonadeJS components
|
|
3
3
|
*
|
|
4
4
|
* Website: https://lemonadejs.net
|
|
5
|
-
* Description: Image cropper v1.
|
|
5
|
+
* Description: Image cropper v1.5.2
|
|
6
6
|
*
|
|
7
7
|
* MIT License
|
|
8
8
|
*
|
|
@@ -34,21 +34,23 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
if (typeof(jSuites.crop) == 'undefined') {
|
|
38
|
+
if (typeof(require) === 'function') {
|
|
39
|
+
var Cropper = require('@jsuites/cropper');
|
|
40
|
+
} else if (window.jSuites) {
|
|
41
|
+
var Cropper = jSuites.crop;
|
|
42
|
+
}
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
return (function(
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
var
|
|
45
|
+
return (function() {
|
|
46
|
+
var self = this;
|
|
47
|
+
var original = self.original ? 1 : 0;
|
|
48
|
+
var width = self.width || 300;
|
|
49
|
+
var height = self.height || 240;
|
|
47
50
|
var modal = null;
|
|
48
51
|
var crop = null;
|
|
49
52
|
var menu = null;
|
|
50
53
|
|
|
51
|
-
var self = {};
|
|
52
54
|
self.cropperArea = null;
|
|
53
55
|
self.brightness = 0;
|
|
54
56
|
self.contrast = 0;
|
|
@@ -74,7 +76,7 @@
|
|
|
74
76
|
var a = [798, 360];
|
|
75
77
|
var c = [width, height];
|
|
76
78
|
}
|
|
77
|
-
crop =
|
|
79
|
+
crop = Cropper(o, {
|
|
78
80
|
area: a,
|
|
79
81
|
crop: c ,
|
|
80
82
|
allowResize: false,
|
|
@@ -96,6 +98,27 @@
|
|
|
96
98
|
});
|
|
97
99
|
}
|
|
98
100
|
|
|
101
|
+
// Controls
|
|
102
|
+
self.createControls = function(o) {
|
|
103
|
+
var tabs = jSuites.tabs(o.children[0], {
|
|
104
|
+
data: [{
|
|
105
|
+
title: 'Crop',
|
|
106
|
+
icon: 'crop',
|
|
107
|
+
width: '100px',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title:'Adjusts',
|
|
111
|
+
icon: 'image',
|
|
112
|
+
width: '100px',
|
|
113
|
+
}],
|
|
114
|
+
padding:'20px',
|
|
115
|
+
animation: true,
|
|
116
|
+
position: 'bottom',
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
tabs.content.style.backgroundColor = '#eee';
|
|
120
|
+
}
|
|
121
|
+
|
|
99
122
|
self.updateZoom = function(o) {
|
|
100
123
|
crop.zoom(o.value);
|
|
101
124
|
}
|
|
@@ -139,20 +162,20 @@
|
|
|
139
162
|
// Update file to blob
|
|
140
163
|
newImage.src = filename;
|
|
141
164
|
// Integration with jSuites.form
|
|
142
|
-
if (
|
|
143
|
-
photoContainer.content = [data];
|
|
144
|
-
|
|
165
|
+
if (self.name) {
|
|
145
166
|
newImage.classList.remove('jfile');
|
|
146
|
-
} else {
|
|
147
|
-
// Legacy
|
|
148
|
-
newImage.content = data;
|
|
149
167
|
}
|
|
168
|
+
// Value
|
|
169
|
+
self.value = [data];
|
|
170
|
+
// Append new image
|
|
150
171
|
self.image.appendChild(newImage);
|
|
151
172
|
}
|
|
152
173
|
// Create image
|
|
153
174
|
crop.getCroppedAsBlob(createImage);
|
|
154
175
|
// Close the modal
|
|
155
|
-
|
|
176
|
+
setTimeout(function() {
|
|
177
|
+
modal.close();
|
|
178
|
+
});
|
|
156
179
|
}
|
|
157
180
|
}
|
|
158
181
|
|
|
@@ -164,19 +187,17 @@
|
|
|
164
187
|
if (self.image) {
|
|
165
188
|
// Reset photo from crop
|
|
166
189
|
crop.reset();
|
|
167
|
-
// Closes modal
|
|
168
|
-
modal.close();
|
|
169
190
|
// Disable controls
|
|
170
191
|
self.setControls(false);
|
|
171
192
|
// Reset from container
|
|
172
193
|
self.image.innerHTML = '';
|
|
173
194
|
// Reset container
|
|
174
|
-
|
|
195
|
+
self.value = null;
|
|
175
196
|
}
|
|
176
197
|
}
|
|
177
198
|
|
|
178
199
|
self.setControls = function(state) {
|
|
179
|
-
var controls =
|
|
200
|
+
var controls = self.el.querySelectorAll('input.controls');
|
|
180
201
|
if (state == false) {
|
|
181
202
|
for (var i = 0; i < controls.length; i++) {
|
|
182
203
|
controls[i].setAttribute('disabled', 'disabled');
|
|
@@ -186,10 +207,16 @@
|
|
|
186
207
|
controls[i].removeAttribute('disabled');
|
|
187
208
|
}
|
|
188
209
|
}
|
|
210
|
+
|
|
211
|
+
for (var i = 0; i < controls.length; i++) {
|
|
212
|
+
if (controls[i].type === 'range') {
|
|
213
|
+
controls[i].value = 0;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
189
216
|
}
|
|
190
217
|
|
|
191
218
|
self.getValue = function() {
|
|
192
|
-
return
|
|
219
|
+
return self.value;
|
|
193
220
|
}
|
|
194
221
|
|
|
195
222
|
self.setValue = function(data) {
|
|
@@ -202,6 +229,7 @@
|
|
|
202
229
|
file: data
|
|
203
230
|
}
|
|
204
231
|
}
|
|
232
|
+
|
|
205
233
|
if (data.file) {
|
|
206
234
|
var img = document.createElement('img');
|
|
207
235
|
img.setAttribute('src', data.file);
|
|
@@ -214,93 +242,66 @@
|
|
|
214
242
|
crop.addFromFile(data.original);
|
|
215
243
|
}
|
|
216
244
|
|
|
217
|
-
|
|
245
|
+
self.value = [data];
|
|
218
246
|
}
|
|
219
247
|
}
|
|
220
248
|
|
|
221
249
|
self.open = function() {
|
|
222
250
|
if (! modal.isOpen()) {
|
|
223
|
-
// Open modal
|
|
224
251
|
modal.open();
|
|
225
|
-
// Create controls for the first time only
|
|
226
|
-
if (!photoContainer.classList.contains('controls')) {
|
|
227
|
-
// Create controls
|
|
228
|
-
createControls(self.controls);
|
|
229
|
-
// Flag controls are ready
|
|
230
|
-
photoContainer.classList.add('controls');
|
|
231
|
-
}
|
|
232
252
|
}
|
|
233
253
|
}
|
|
234
254
|
|
|
255
|
+
self.onload = function() {
|
|
256
|
+
self.image.style.maxWidth = self.width + 'px';
|
|
257
|
+
self.image.style.maxHeight = self.height + 'px';
|
|
258
|
+
}
|
|
259
|
+
|
|
235
260
|
// Template
|
|
236
261
|
var template = `
|
|
237
|
-
<div
|
|
238
|
-
|
|
239
|
-
<div @ready='self.
|
|
240
|
-
|
|
241
|
-
<div
|
|
242
|
-
<div role='
|
|
243
|
-
<div
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<div role='content' style='background-color: #ccc;'>
|
|
247
|
-
<div>
|
|
248
|
-
<div class="center row">
|
|
249
|
-
<label class="f1 p6" style="padding-top:0px"> Zoom <input type='range' step='.05' min='0.1' max='5.45' value='1' oninput='self.updateZoom(this)' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
|
|
250
|
-
<label class="f1 p6" style="padding-top:0px"> Rotate <input type='range' step='.05' min='-1' max='1' value='0' oninput='self.updateRotate(this)' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
|
|
251
|
-
</div>
|
|
262
|
+
<div name="{{self.name}}" value="{{self.value}}">
|
|
263
|
+
<div @ref='self.image' class="jphoto jcropper"></div>
|
|
264
|
+
<div @ready='self.createModal(this)'>
|
|
265
|
+
<div @ready='self.createCropper(this)' @ref='self.cropperArea'></div>
|
|
266
|
+
<div @ready='self.createControls(this)' class="controls">
|
|
267
|
+
<div role='tabs'>
|
|
268
|
+
<div role='headers'>
|
|
269
|
+
<div style="background-color: white; padding: 15px !important;"></div>
|
|
270
|
+
<div style="background-color: white;"></div>
|
|
252
271
|
</div>
|
|
253
|
-
<div>
|
|
254
|
-
<div
|
|
255
|
-
<
|
|
256
|
-
|
|
272
|
+
<div role='content' style='background-color: #ccc;'>
|
|
273
|
+
<div>
|
|
274
|
+
<div class="center row">
|
|
275
|
+
<label class="f1 p6" style="padding-top:0px"> Zoom <input type='range' step='.05' min='0.1' max='5.45' value='1' oninput='self.updateZoom(this)' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
|
|
276
|
+
<label class="f1 p6" style="padding-top:0px"> Rotate <input type='range' step='.05' min='-1' max='1' value='0' oninput='self.updateRotate(this)' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
<div>
|
|
280
|
+
<div class="center row">
|
|
281
|
+
<label class="f1 p6" style="padding-top:0px"> Brigthness <input type='range' min='-1' max='1' step='.05' value='0' @bind='self.brightness' oninput='self.setBrightness(this)' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
|
|
282
|
+
<label class="f1 p6" style="padding-top:0px"> Contrast <input type='range' min='-1' max='1' step='.05' value='0' @bind='self.contrast' oninput='self.setContrast(this)' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
|
|
283
|
+
</div>
|
|
257
284
|
</div>
|
|
258
285
|
</div>
|
|
259
286
|
</div>
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
287
|
+
<div class='row p20 form-group' style='border-top: 1px solid #aaa'>
|
|
288
|
+
<div class='column p6 f1'>
|
|
289
|
+
<input type='button' value='Save Photo' class='jbutton dark controls w100' style='min-width: 140px;' onclick='self.updatePhoto()' disabled='disabled'>
|
|
290
|
+
</div><div class='column p6'>
|
|
291
|
+
<input type='button' value='Upload Photo' class='jbutton dark w100' style='min-width: 140px;' onclick='self.uploadPhoto()'>
|
|
292
|
+
</div><div class='column p6' style='text-align:right'>
|
|
293
|
+
<input type='button' value='Delete Photo' class='jbutton dark controls w100' style='min-width: 140px;' onclick='self.deletePhoto()' disabled='disabled'>
|
|
294
|
+
</div>
|
|
268
295
|
</div>
|
|
269
296
|
</div>
|
|
270
297
|
</div>
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
`;
|
|
274
|
-
|
|
275
|
-
// Controls
|
|
276
|
-
var createControls = function(o) {
|
|
277
|
-
var tabs = jSuites.tabs(o.children[0], {
|
|
278
|
-
data: [{
|
|
279
|
-
title: 'Crop',
|
|
280
|
-
icon: 'crop',
|
|
281
|
-
width: '100px',
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
title:'Adjusts',
|
|
285
|
-
icon: 'image',
|
|
286
|
-
width: '100px',
|
|
287
|
-
}],
|
|
288
|
-
padding:'20px',
|
|
289
|
-
animation: true,
|
|
290
|
-
position: 'bottom',
|
|
291
|
-
});
|
|
292
|
-
|
|
293
|
-
tabs.content.style.backgroundColor = '#eee';
|
|
294
|
-
}
|
|
298
|
+
<div @ready="self.createMenu(this)"></div>
|
|
299
|
+
</div>`;
|
|
295
300
|
|
|
296
|
-
|
|
297
|
-
if (e.target.tagName == 'IMG') {
|
|
298
|
-
e.target.focus();
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
+
var root = lemonade.element(template, self);
|
|
301
302
|
|
|
302
303
|
// Onclick event
|
|
303
|
-
|
|
304
|
+
root.addEventListener('click', function(e) {
|
|
304
305
|
e = e || window.event;
|
|
305
306
|
if (e.buttons) {
|
|
306
307
|
var mouseButton = e.buttons;
|
|
@@ -317,9 +318,9 @@
|
|
|
317
318
|
e.target.focus();
|
|
318
319
|
}
|
|
319
320
|
}
|
|
320
|
-
}
|
|
321
|
+
});
|
|
321
322
|
|
|
322
|
-
|
|
323
|
+
root.addEventListener('contextmenu', function(e) {
|
|
323
324
|
if (e.target.tagName == 'IMG') {
|
|
324
325
|
menu.open(e, [
|
|
325
326
|
{
|
|
@@ -340,22 +341,15 @@
|
|
|
340
341
|
]);
|
|
341
342
|
e.preventDefault();
|
|
342
343
|
}
|
|
343
|
-
}
|
|
344
|
+
});
|
|
344
345
|
|
|
345
|
-
|
|
346
|
-
photoContainer.onkeydown = function(e) {
|
|
346
|
+
root.addEventListener('onkeydown', function(e) {
|
|
347
347
|
if (e.key == 'Delete' && e.target.tagName == 'IMG') {
|
|
348
348
|
self.deletePhoto();
|
|
349
349
|
}
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
// Quick reference
|
|
353
|
-
photoContainer.self = self;
|
|
354
|
-
|
|
355
|
-
// Create lemonade component
|
|
356
|
-
lemonade.blender(template, self, photoContainer);
|
|
350
|
+
})
|
|
357
351
|
|
|
358
|
-
|
|
352
|
+
root.val = function(v) {
|
|
359
353
|
if (v === undefined) {
|
|
360
354
|
return self.getValue();
|
|
361
355
|
} else {
|
|
@@ -363,6 +357,6 @@
|
|
|
363
357
|
}
|
|
364
358
|
}
|
|
365
359
|
|
|
366
|
-
return
|
|
360
|
+
return root;
|
|
367
361
|
});
|
|
368
362
|
})));
|
package/package.json
CHANGED
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"javascript plugins"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"lemonadejs": "^
|
|
18
|
-
"jsuites": "^4.
|
|
19
|
-
"@jsuites/cropper": "^1.
|
|
17
|
+
"lemonadejs": "^2.2.6",
|
|
18
|
+
"jsuites": "^4.10.1",
|
|
19
|
+
"@jsuites/cropper": "^1.6.0"
|
|
20
20
|
},
|
|
21
21
|
"main": "dist/cropper.js",
|
|
22
|
-
"version": "1.
|
|
22
|
+
"version": "1.5.3"
|
|
23
23
|
}
|