@lemonadejs/cropper 1.4.1 → 1.5.1
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 +95 -99
- 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.4.
|
|
5
|
+
* Description: Image cropper v1.4.1
|
|
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 = {};
|
|
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,8 +162,8 @@
|
|
|
139
162
|
// Update file to blob
|
|
140
163
|
newImage.src = filename;
|
|
141
164
|
// Integration with jSuites.form
|
|
142
|
-
if (
|
|
143
|
-
|
|
165
|
+
if (self.name) {
|
|
166
|
+
//self.el.content = [data];
|
|
144
167
|
|
|
145
168
|
newImage.classList.remove('jfile');
|
|
146
169
|
} else {
|
|
@@ -152,7 +175,9 @@
|
|
|
152
175
|
// Create image
|
|
153
176
|
crop.getCroppedAsBlob(createImage);
|
|
154
177
|
// Close the modal
|
|
155
|
-
|
|
178
|
+
setTimeout(function() {
|
|
179
|
+
modal.close();
|
|
180
|
+
});
|
|
156
181
|
}
|
|
157
182
|
}
|
|
158
183
|
|
|
@@ -164,19 +189,17 @@
|
|
|
164
189
|
if (self.image) {
|
|
165
190
|
// Reset photo from crop
|
|
166
191
|
crop.reset();
|
|
167
|
-
// Closes modal
|
|
168
|
-
modal.close();
|
|
169
192
|
// Disable controls
|
|
170
193
|
self.setControls(false);
|
|
171
194
|
// Reset from container
|
|
172
195
|
self.image.innerHTML = '';
|
|
173
196
|
// Reset container
|
|
174
|
-
|
|
197
|
+
self.value = null;
|
|
175
198
|
}
|
|
176
199
|
}
|
|
177
200
|
|
|
178
201
|
self.setControls = function(state) {
|
|
179
|
-
var controls =
|
|
202
|
+
var controls = self.el.querySelectorAll('input.controls');
|
|
180
203
|
if (state == false) {
|
|
181
204
|
for (var i = 0; i < controls.length; i++) {
|
|
182
205
|
controls[i].setAttribute('disabled', 'disabled');
|
|
@@ -186,10 +209,16 @@
|
|
|
186
209
|
controls[i].removeAttribute('disabled');
|
|
187
210
|
}
|
|
188
211
|
}
|
|
212
|
+
|
|
213
|
+
for (var i = 0; i < controls.length; i++) {
|
|
214
|
+
if (controls[i].type === 'range') {
|
|
215
|
+
controls[i].value = 0;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
189
218
|
}
|
|
190
219
|
|
|
191
220
|
self.getValue = function() {
|
|
192
|
-
return
|
|
221
|
+
return self.value;
|
|
193
222
|
}
|
|
194
223
|
|
|
195
224
|
self.setValue = function(data) {
|
|
@@ -202,6 +231,7 @@
|
|
|
202
231
|
file: data
|
|
203
232
|
}
|
|
204
233
|
}
|
|
234
|
+
|
|
205
235
|
if (data.file) {
|
|
206
236
|
var img = document.createElement('img');
|
|
207
237
|
img.setAttribute('src', data.file);
|
|
@@ -214,93 +244,66 @@
|
|
|
214
244
|
crop.addFromFile(data.original);
|
|
215
245
|
}
|
|
216
246
|
|
|
217
|
-
|
|
247
|
+
self.value = [data];
|
|
218
248
|
}
|
|
219
249
|
}
|
|
220
250
|
|
|
221
251
|
self.open = function() {
|
|
222
252
|
if (! modal.isOpen()) {
|
|
223
|
-
// Open modal
|
|
224
253
|
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
254
|
}
|
|
233
255
|
}
|
|
234
256
|
|
|
257
|
+
self.onload = function() {
|
|
258
|
+
self.image.style.width = self.width + 'px';
|
|
259
|
+
self.image.style.height = self.height + 'px';
|
|
260
|
+
}
|
|
261
|
+
|
|
235
262
|
// Template
|
|
236
263
|
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>
|
|
264
|
+
<div name="{{self.name}}" value="{{self.value}}">
|
|
265
|
+
<div @ref='self.image' class="jphoto"></div>
|
|
266
|
+
<div @ready='self.createModal(this)'>
|
|
267
|
+
<div @ready='self.createCropper(this)' @ref='self.cropperArea'></div>
|
|
268
|
+
<div @ready='self.createControls(this)' class="controls">
|
|
269
|
+
<div role='tabs'>
|
|
270
|
+
<div role='headers'>
|
|
271
|
+
<div style="background-color: white; padding: 15px !important;"></div>
|
|
272
|
+
<div style="background-color: white;"></div>
|
|
252
273
|
</div>
|
|
253
|
-
<div>
|
|
254
|
-
<div
|
|
255
|
-
<
|
|
256
|
-
|
|
274
|
+
<div role='content' style='background-color: #ccc;'>
|
|
275
|
+
<div>
|
|
276
|
+
<div class="center row">
|
|
277
|
+
<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>
|
|
278
|
+
<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>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div>
|
|
282
|
+
<div class="center row">
|
|
283
|
+
<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>
|
|
284
|
+
<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>
|
|
285
|
+
</div>
|
|
257
286
|
</div>
|
|
258
287
|
</div>
|
|
259
288
|
</div>
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
289
|
+
<div class='row p20 form-group' style='border-top: 1px solid #aaa'>
|
|
290
|
+
<div class='column p6 f1'>
|
|
291
|
+
<input type='button' value='Save Photo' class='jbutton dark controls w100' style='min-width: 140px;' onclick='self.updatePhoto()' disabled='disabled'>
|
|
292
|
+
</div><div class='column p6'>
|
|
293
|
+
<input type='button' value='Upload Photo' class='jbutton dark w100' style='min-width: 140px;' onclick='self.uploadPhoto()'>
|
|
294
|
+
</div><div class='column p6' style='text-align:right'>
|
|
295
|
+
<input type='button' value='Delete Photo' class='jbutton dark controls w100' style='min-width: 140px;' onclick='self.deletePhoto()' disabled='disabled'>
|
|
296
|
+
</div>
|
|
268
297
|
</div>
|
|
269
298
|
</div>
|
|
270
299
|
</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
|
-
}
|
|
300
|
+
<div @ready="self.createMenu(this)"></div>
|
|
301
|
+
</div>`;
|
|
295
302
|
|
|
296
|
-
|
|
297
|
-
if (e.target.tagName == 'IMG') {
|
|
298
|
-
e.target.focus();
|
|
299
|
-
}
|
|
300
|
-
}
|
|
303
|
+
var root = lemonade.element(template, self);
|
|
301
304
|
|
|
302
305
|
// Onclick event
|
|
303
|
-
|
|
306
|
+
root.addEventListener('click', function(e) {
|
|
304
307
|
e = e || window.event;
|
|
305
308
|
if (e.buttons) {
|
|
306
309
|
var mouseButton = e.buttons;
|
|
@@ -317,9 +320,9 @@
|
|
|
317
320
|
e.target.focus();
|
|
318
321
|
}
|
|
319
322
|
}
|
|
320
|
-
}
|
|
323
|
+
});
|
|
321
324
|
|
|
322
|
-
|
|
325
|
+
root.addEventListener('contextmenu', function(e) {
|
|
323
326
|
if (e.target.tagName == 'IMG') {
|
|
324
327
|
menu.open(e, [
|
|
325
328
|
{
|
|
@@ -340,22 +343,15 @@
|
|
|
340
343
|
]);
|
|
341
344
|
e.preventDefault();
|
|
342
345
|
}
|
|
343
|
-
}
|
|
346
|
+
});
|
|
344
347
|
|
|
345
|
-
|
|
346
|
-
photoContainer.onkeydown = function(e) {
|
|
348
|
+
root.addEventListener('onkeydown', function(e) {
|
|
347
349
|
if (e.key == 'Delete' && e.target.tagName == 'IMG') {
|
|
348
350
|
self.deletePhoto();
|
|
349
351
|
}
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
// Quick reference
|
|
353
|
-
photoContainer.self = self;
|
|
354
|
-
|
|
355
|
-
// Create lemonade component
|
|
356
|
-
lemonade.blender(template, self, photoContainer);
|
|
352
|
+
})
|
|
357
353
|
|
|
358
|
-
|
|
354
|
+
root.val = function(v) {
|
|
359
355
|
if (v === undefined) {
|
|
360
356
|
return self.getValue();
|
|
361
357
|
} else {
|
|
@@ -363,6 +359,6 @@
|
|
|
363
359
|
}
|
|
364
360
|
}
|
|
365
361
|
|
|
366
|
-
return
|
|
362
|
+
return root;
|
|
367
363
|
});
|
|
368
364
|
})));
|
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.1"
|
|
23
23
|
}
|