@lemonadejs/cropper 1.3.2 → 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 +159 -93
- 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.4.1
|
|
6
6
|
*
|
|
7
7
|
* MIT License
|
|
8
8
|
*
|
|
@@ -16,29 +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 = {};
|
|
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;
|
|
52
|
+
var menu = null;
|
|
40
53
|
|
|
41
|
-
var self = {};
|
|
42
54
|
self.cropperArea = null;
|
|
43
55
|
self.brightness = 0;
|
|
44
56
|
self.contrast = 0;
|
|
@@ -64,7 +76,7 @@
|
|
|
64
76
|
var a = [798, 360];
|
|
65
77
|
var c = [width, height];
|
|
66
78
|
}
|
|
67
|
-
crop =
|
|
79
|
+
crop = Cropper(o, {
|
|
68
80
|
area: a,
|
|
69
81
|
crop: c ,
|
|
70
82
|
allowResize: false,
|
|
@@ -76,6 +88,37 @@
|
|
|
76
88
|
});
|
|
77
89
|
}
|
|
78
90
|
|
|
91
|
+
self.createMenu = function(o) {
|
|
92
|
+
// Start contextmenu component
|
|
93
|
+
menu = jSuites.contextmenu(o, {
|
|
94
|
+
onclick: function(a,b) {
|
|
95
|
+
a.close();
|
|
96
|
+
b.stopPropagation();
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
}
|
|
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
|
+
|
|
79
122
|
self.updateZoom = function(o) {
|
|
80
123
|
crop.zoom(o.value);
|
|
81
124
|
}
|
|
@@ -119,8 +162,8 @@
|
|
|
119
162
|
// Update file to blob
|
|
120
163
|
newImage.src = filename;
|
|
121
164
|
// Integration with jSuites.form
|
|
122
|
-
if (
|
|
123
|
-
|
|
165
|
+
if (self.name) {
|
|
166
|
+
//self.el.content = [data];
|
|
124
167
|
|
|
125
168
|
newImage.classList.remove('jfile');
|
|
126
169
|
} else {
|
|
@@ -132,7 +175,9 @@
|
|
|
132
175
|
// Create image
|
|
133
176
|
crop.getCroppedAsBlob(createImage);
|
|
134
177
|
// Close the modal
|
|
135
|
-
|
|
178
|
+
setTimeout(function() {
|
|
179
|
+
modal.close();
|
|
180
|
+
});
|
|
136
181
|
}
|
|
137
182
|
}
|
|
138
183
|
|
|
@@ -144,19 +189,17 @@
|
|
|
144
189
|
if (self.image) {
|
|
145
190
|
// Reset photo from crop
|
|
146
191
|
crop.reset();
|
|
147
|
-
// Closes modal
|
|
148
|
-
modal.close();
|
|
149
192
|
// Disable controls
|
|
150
193
|
self.setControls(false);
|
|
151
194
|
// Reset from container
|
|
152
195
|
self.image.innerHTML = '';
|
|
153
196
|
// Reset container
|
|
154
|
-
|
|
197
|
+
self.value = null;
|
|
155
198
|
}
|
|
156
199
|
}
|
|
157
200
|
|
|
158
201
|
self.setControls = function(state) {
|
|
159
|
-
var controls =
|
|
202
|
+
var controls = self.el.querySelectorAll('input.controls');
|
|
160
203
|
if (state == false) {
|
|
161
204
|
for (var i = 0; i < controls.length; i++) {
|
|
162
205
|
controls[i].setAttribute('disabled', 'disabled');
|
|
@@ -166,10 +209,16 @@
|
|
|
166
209
|
controls[i].removeAttribute('disabled');
|
|
167
210
|
}
|
|
168
211
|
}
|
|
212
|
+
|
|
213
|
+
for (var i = 0; i < controls.length; i++) {
|
|
214
|
+
if (controls[i].type === 'range') {
|
|
215
|
+
controls[i].value = 0;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
169
218
|
}
|
|
170
219
|
|
|
171
220
|
self.getValue = function() {
|
|
172
|
-
return
|
|
221
|
+
return self.value;
|
|
173
222
|
}
|
|
174
223
|
|
|
175
224
|
self.setValue = function(data) {
|
|
@@ -182,6 +231,7 @@
|
|
|
182
231
|
file: data
|
|
183
232
|
}
|
|
184
233
|
}
|
|
234
|
+
|
|
185
235
|
if (data.file) {
|
|
186
236
|
var img = document.createElement('img');
|
|
187
237
|
img.setAttribute('src', data.file);
|
|
@@ -194,98 +244,114 @@
|
|
|
194
244
|
crop.addFromFile(data.original);
|
|
195
245
|
}
|
|
196
246
|
|
|
197
|
-
|
|
247
|
+
self.value = [data];
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
self.open = function() {
|
|
252
|
+
if (! modal.isOpen()) {
|
|
253
|
+
modal.open();
|
|
198
254
|
}
|
|
199
255
|
}
|
|
200
256
|
|
|
257
|
+
self.onload = function() {
|
|
258
|
+
self.image.style.width = self.width + 'px';
|
|
259
|
+
self.image.style.height = self.height + 'px';
|
|
260
|
+
}
|
|
261
|
+
|
|
201
262
|
// Template
|
|
202
263
|
var template = `
|
|
203
|
-
<div
|
|
204
|
-
|
|
205
|
-
<div @ready='self.
|
|
206
|
-
|
|
207
|
-
<div
|
|
208
|
-
<div role='
|
|
209
|
-
<div
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<div role='content' style='background-color: #ccc;'>
|
|
213
|
-
<div>
|
|
214
|
-
<div class="center row">
|
|
215
|
-
<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>
|
|
216
|
-
<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>
|
|
217
|
-
</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>
|
|
218
273
|
</div>
|
|
219
|
-
<div>
|
|
220
|
-
<div
|
|
221
|
-
<
|
|
222
|
-
|
|
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>
|
|
223
286
|
</div>
|
|
224
287
|
</div>
|
|
225
288
|
</div>
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
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>
|
|
234
297
|
</div>
|
|
235
298
|
</div>
|
|
236
299
|
</div>
|
|
300
|
+
<div @ready="self.createMenu(this)"></div>
|
|
237
301
|
</div>`;
|
|
238
302
|
|
|
239
|
-
|
|
240
|
-
var createControls = function(o) {
|
|
241
|
-
var tabs = jSuites.tabs(o.children[0], {
|
|
242
|
-
data: [{
|
|
243
|
-
title: 'Crop',
|
|
244
|
-
icon: 'crop',
|
|
245
|
-
width: '100px',
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
title:'Adjusts',
|
|
249
|
-
icon: 'image',
|
|
250
|
-
width: '100px',
|
|
251
|
-
}],
|
|
252
|
-
padding:'20px',
|
|
253
|
-
animation: true,
|
|
254
|
-
position: 'bottom',
|
|
255
|
-
});
|
|
256
|
-
|
|
257
|
-
tabs.content.style.backgroundColor = '#eee';
|
|
258
|
-
}
|
|
303
|
+
var root = lemonade.element(template, self);
|
|
259
304
|
|
|
260
305
|
// Onclick event
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
306
|
+
root.addEventListener('click', function(e) {
|
|
307
|
+
e = e || window.event;
|
|
308
|
+
if (e.buttons) {
|
|
309
|
+
var mouseButton = e.buttons;
|
|
310
|
+
} else if (e.button) {
|
|
311
|
+
var mouseButton = e.button;
|
|
312
|
+
} else {
|
|
313
|
+
var mouseButton = e.which;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
if (mouseButton == 1) {
|
|
317
|
+
self.open();
|
|
318
|
+
} else {
|
|
319
|
+
if (e.target.tagName == 'IMG') {
|
|
320
|
+
e.target.focus();
|
|
271
321
|
}
|
|
272
322
|
}
|
|
273
|
-
}
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
root.addEventListener('contextmenu', function(e) {
|
|
326
|
+
if (e.target.tagName == 'IMG') {
|
|
327
|
+
menu.open(e, [
|
|
328
|
+
{
|
|
329
|
+
title: jSuites.translate('Change image'),
|
|
330
|
+
icon: 'edit',
|
|
331
|
+
onclick: function() {
|
|
332
|
+
self.open();
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
title: jSuites.translate('Delete image'),
|
|
337
|
+
icon: 'delete',
|
|
338
|
+
shortcut: 'DELETE',
|
|
339
|
+
onclick: function() {
|
|
340
|
+
e.target.remove();
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
]);
|
|
344
|
+
e.preventDefault();
|
|
345
|
+
}
|
|
346
|
+
});
|
|
274
347
|
|
|
275
|
-
|
|
276
|
-
photoContainer.onkeydown = function(e) {
|
|
348
|
+
root.addEventListener('onkeydown', function(e) {
|
|
277
349
|
if (e.key == 'Delete' && e.target.tagName == 'IMG') {
|
|
278
350
|
self.deletePhoto();
|
|
279
351
|
}
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
// Quick reference
|
|
283
|
-
photoContainer.self = self;
|
|
284
|
-
|
|
285
|
-
// Create lemonade component
|
|
286
|
-
lemonade.blender(template, self, photoContainer);
|
|
352
|
+
})
|
|
287
353
|
|
|
288
|
-
|
|
354
|
+
root.val = function(v) {
|
|
289
355
|
if (v === undefined) {
|
|
290
356
|
return self.getValue();
|
|
291
357
|
} else {
|
|
@@ -293,6 +359,6 @@
|
|
|
293
359
|
}
|
|
294
360
|
}
|
|
295
361
|
|
|
296
|
-
return
|
|
362
|
+
return root;
|
|
297
363
|
});
|
|
298
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
|
}
|