@lemonadejs/cropper 1.4.0 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cropper.js +110 -107
- 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
|
*
|
|
@@ -16,30 +16,41 @@
|
|
|
16
16
|
|
|
17
17
|
'use strict';
|
|
18
18
|
|
|
19
|
-
// Load
|
|
19
|
+
// Load lemonadejs
|
|
20
|
+
if (typeof(lemonade) == 'undefined') {
|
|
21
|
+
if (typeof(require) === 'function') {
|
|
22
|
+
var lemonade = require('lemonadejs');
|
|
23
|
+
} else if (window.lemonade) {
|
|
24
|
+
var lemonade = window.lemonade;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Load jsuites
|
|
20
29
|
if (typeof(jSuites) == 'undefined') {
|
|
21
|
-
if (
|
|
22
|
-
var jSuites = window.jSuites;
|
|
23
|
-
} else if (typeof(require) === 'function') {
|
|
30
|
+
if (typeof(require) === 'function') {
|
|
24
31
|
var jSuites = require('jsuites');
|
|
32
|
+
} else if (window.jSuites) {
|
|
33
|
+
var jSuites = window.jSuites;
|
|
25
34
|
}
|
|
26
35
|
}
|
|
27
36
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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
|
+
}
|
|
32
43
|
}
|
|
33
44
|
|
|
34
|
-
return (function(
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
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;
|
|
38
50
|
var modal = null;
|
|
39
51
|
var crop = null;
|
|
40
52
|
var menu = null;
|
|
41
53
|
|
|
42
|
-
var self = {};
|
|
43
54
|
self.cropperArea = null;
|
|
44
55
|
self.brightness = 0;
|
|
45
56
|
self.contrast = 0;
|
|
@@ -65,7 +76,7 @@
|
|
|
65
76
|
var a = [798, 360];
|
|
66
77
|
var c = [width, height];
|
|
67
78
|
}
|
|
68
|
-
crop =
|
|
79
|
+
crop = Cropper(o, {
|
|
69
80
|
area: a,
|
|
70
81
|
crop: c ,
|
|
71
82
|
allowResize: false,
|
|
@@ -87,6 +98,27 @@
|
|
|
87
98
|
});
|
|
88
99
|
}
|
|
89
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
|
+
|
|
90
122
|
self.updateZoom = function(o) {
|
|
91
123
|
crop.zoom(o.value);
|
|
92
124
|
}
|
|
@@ -130,20 +162,20 @@
|
|
|
130
162
|
// Update file to blob
|
|
131
163
|
newImage.src = filename;
|
|
132
164
|
// Integration with jSuites.form
|
|
133
|
-
if (
|
|
134
|
-
photoContainer.content = [data];
|
|
135
|
-
|
|
165
|
+
if (self.name) {
|
|
136
166
|
newImage.classList.remove('jfile');
|
|
137
|
-
} else {
|
|
138
|
-
// Legacy
|
|
139
|
-
newImage.content = data;
|
|
140
167
|
}
|
|
168
|
+
// Value
|
|
169
|
+
self.value = [data];
|
|
170
|
+
// Append new image
|
|
141
171
|
self.image.appendChild(newImage);
|
|
142
172
|
}
|
|
143
173
|
// Create image
|
|
144
174
|
crop.getCroppedAsBlob(createImage);
|
|
145
175
|
// Close the modal
|
|
146
|
-
|
|
176
|
+
setTimeout(function() {
|
|
177
|
+
modal.close();
|
|
178
|
+
});
|
|
147
179
|
}
|
|
148
180
|
}
|
|
149
181
|
|
|
@@ -155,19 +187,17 @@
|
|
|
155
187
|
if (self.image) {
|
|
156
188
|
// Reset photo from crop
|
|
157
189
|
crop.reset();
|
|
158
|
-
// Closes modal
|
|
159
|
-
modal.close();
|
|
160
190
|
// Disable controls
|
|
161
191
|
self.setControls(false);
|
|
162
192
|
// Reset from container
|
|
163
193
|
self.image.innerHTML = '';
|
|
164
194
|
// Reset container
|
|
165
|
-
|
|
195
|
+
self.value = null;
|
|
166
196
|
}
|
|
167
197
|
}
|
|
168
198
|
|
|
169
199
|
self.setControls = function(state) {
|
|
170
|
-
var controls =
|
|
200
|
+
var controls = self.el.querySelectorAll('input.controls');
|
|
171
201
|
if (state == false) {
|
|
172
202
|
for (var i = 0; i < controls.length; i++) {
|
|
173
203
|
controls[i].setAttribute('disabled', 'disabled');
|
|
@@ -177,10 +207,16 @@
|
|
|
177
207
|
controls[i].removeAttribute('disabled');
|
|
178
208
|
}
|
|
179
209
|
}
|
|
210
|
+
|
|
211
|
+
for (var i = 0; i < controls.length; i++) {
|
|
212
|
+
if (controls[i].type === 'range') {
|
|
213
|
+
controls[i].value = 0;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
180
216
|
}
|
|
181
217
|
|
|
182
218
|
self.getValue = function() {
|
|
183
|
-
return
|
|
219
|
+
return self.value;
|
|
184
220
|
}
|
|
185
221
|
|
|
186
222
|
self.setValue = function(data) {
|
|
@@ -193,6 +229,7 @@
|
|
|
193
229
|
file: data
|
|
194
230
|
}
|
|
195
231
|
}
|
|
232
|
+
|
|
196
233
|
if (data.file) {
|
|
197
234
|
var img = document.createElement('img');
|
|
198
235
|
img.setAttribute('src', data.file);
|
|
@@ -205,93 +242,66 @@
|
|
|
205
242
|
crop.addFromFile(data.original);
|
|
206
243
|
}
|
|
207
244
|
|
|
208
|
-
|
|
245
|
+
self.value = [data];
|
|
209
246
|
}
|
|
210
247
|
}
|
|
211
248
|
|
|
212
249
|
self.open = function() {
|
|
213
250
|
if (! modal.isOpen()) {
|
|
214
|
-
// Open modal
|
|
215
251
|
modal.open();
|
|
216
|
-
// Create controls for the first time only
|
|
217
|
-
if (!photoContainer.classList.contains('controls')) {
|
|
218
|
-
// Create controls
|
|
219
|
-
createControls(self.controls);
|
|
220
|
-
// Flag controls are ready
|
|
221
|
-
photoContainer.classList.add('controls');
|
|
222
|
-
}
|
|
223
252
|
}
|
|
224
253
|
}
|
|
225
254
|
|
|
255
|
+
self.onload = function() {
|
|
256
|
+
self.image.style.maxWidth = self.width + 'px';
|
|
257
|
+
self.image.style.maxHeight = self.height + 'px';
|
|
258
|
+
}
|
|
259
|
+
|
|
226
260
|
// Template
|
|
227
261
|
var template = `
|
|
228
|
-
<div
|
|
229
|
-
|
|
230
|
-
<div @ready='self.
|
|
231
|
-
|
|
232
|
-
<div
|
|
233
|
-
<div role='
|
|
234
|
-
<div
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
<div role='content' style='background-color: #ccc;'>
|
|
238
|
-
<div>
|
|
239
|
-
<div class="center row">
|
|
240
|
-
<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>
|
|
241
|
-
<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>
|
|
242
|
-
</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>
|
|
243
271
|
</div>
|
|
244
|
-
<div>
|
|
245
|
-
<div
|
|
246
|
-
<
|
|
247
|
-
|
|
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>
|
|
248
284
|
</div>
|
|
249
285
|
</div>
|
|
250
286
|
</div>
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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>
|
|
259
295
|
</div>
|
|
260
296
|
</div>
|
|
261
297
|
</div>
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
`;
|
|
298
|
+
<div @ready="self.createMenu(this)"></div>
|
|
299
|
+
</div>`;
|
|
265
300
|
|
|
266
|
-
|
|
267
|
-
var createControls = function(o) {
|
|
268
|
-
var tabs = jSuites.tabs(o.children[0], {
|
|
269
|
-
data: [{
|
|
270
|
-
title: 'Crop',
|
|
271
|
-
icon: 'crop',
|
|
272
|
-
width: '100px',
|
|
273
|
-
},
|
|
274
|
-
{
|
|
275
|
-
title:'Adjusts',
|
|
276
|
-
icon: 'image',
|
|
277
|
-
width: '100px',
|
|
278
|
-
}],
|
|
279
|
-
padding:'20px',
|
|
280
|
-
animation: true,
|
|
281
|
-
position: 'bottom',
|
|
282
|
-
});
|
|
283
|
-
|
|
284
|
-
tabs.content.style.backgroundColor = '#eee';
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
photoContainer.onmousedown = function(e) {
|
|
288
|
-
if (e.target.tagName == 'IMG') {
|
|
289
|
-
e.target.focus();
|
|
290
|
-
}
|
|
291
|
-
}
|
|
301
|
+
var root = lemonade.element(template, self);
|
|
292
302
|
|
|
293
303
|
// Onclick event
|
|
294
|
-
|
|
304
|
+
root.addEventListener('click', function(e) {
|
|
295
305
|
e = e || window.event;
|
|
296
306
|
if (e.buttons) {
|
|
297
307
|
var mouseButton = e.buttons;
|
|
@@ -308,9 +318,9 @@
|
|
|
308
318
|
e.target.focus();
|
|
309
319
|
}
|
|
310
320
|
}
|
|
311
|
-
}
|
|
321
|
+
});
|
|
312
322
|
|
|
313
|
-
|
|
323
|
+
root.addEventListener('contextmenu', function(e) {
|
|
314
324
|
if (e.target.tagName == 'IMG') {
|
|
315
325
|
menu.open(e, [
|
|
316
326
|
{
|
|
@@ -331,22 +341,15 @@
|
|
|
331
341
|
]);
|
|
332
342
|
e.preventDefault();
|
|
333
343
|
}
|
|
334
|
-
}
|
|
344
|
+
});
|
|
335
345
|
|
|
336
|
-
|
|
337
|
-
photoContainer.onkeydown = function(e) {
|
|
346
|
+
root.addEventListener('onkeydown', function(e) {
|
|
338
347
|
if (e.key == 'Delete' && e.target.tagName == 'IMG') {
|
|
339
348
|
self.deletePhoto();
|
|
340
349
|
}
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
// Quick reference
|
|
344
|
-
photoContainer.self = self;
|
|
345
|
-
|
|
346
|
-
// Create lemonade component
|
|
347
|
-
lemonade.blender(template, self, photoContainer);
|
|
350
|
+
})
|
|
348
351
|
|
|
349
|
-
|
|
352
|
+
root.val = function(v) {
|
|
350
353
|
if (v === undefined) {
|
|
351
354
|
return self.getValue();
|
|
352
355
|
} else {
|
|
@@ -354,6 +357,6 @@
|
|
|
354
357
|
}
|
|
355
358
|
}
|
|
356
359
|
|
|
357
|
-
return
|
|
360
|
+
return root;
|
|
358
361
|
});
|
|
359
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.5.0",
|
|
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.2"
|
|
23
23
|
}
|