@lemonadejs/cropper 1.1.0 → 1.3.0
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 +45 -30
- package/package.json +3 -1
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
|
|
5
|
+
* Description: Image cropper v1.2.1
|
|
6
6
|
*
|
|
7
7
|
* MIT License
|
|
8
8
|
*
|
|
@@ -16,16 +16,16 @@
|
|
|
16
16
|
|
|
17
17
|
'use strict';
|
|
18
18
|
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} else if (typeof(require) === 'function') {
|
|
19
|
+
if (typeof(require) === 'function') {
|
|
20
|
+
// Load jSuites
|
|
21
|
+
if (typeof(jSuites) == 'undefined') {
|
|
23
22
|
var jSuites = require('jsuites');
|
|
24
23
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
// Set the app extensions
|
|
25
|
+
if (typeof(jSuites.crop) == 'undefined') {
|
|
26
|
+
// Loading App Extensions
|
|
27
|
+
jSuites.crop = require('@jsuites/cropper');
|
|
28
|
+
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
return (function(photoContainer) {
|
|
@@ -147,6 +147,8 @@
|
|
|
147
147
|
self.setControls(false);
|
|
148
148
|
// Reset from container
|
|
149
149
|
self.image.innerHTML = '';
|
|
150
|
+
// Reset container
|
|
151
|
+
photoContainer.content = null;
|
|
150
152
|
}
|
|
151
153
|
}
|
|
152
154
|
|
|
@@ -168,29 +170,36 @@
|
|
|
168
170
|
}
|
|
169
171
|
|
|
170
172
|
self.setValue = function(data) {
|
|
171
|
-
if (
|
|
172
|
-
|
|
173
|
-
|
|
173
|
+
if (! data) {
|
|
174
|
+
// Reset container
|
|
175
|
+
self.deletePhoto();
|
|
176
|
+
} else {
|
|
177
|
+
if (typeof(data) == 'string') {
|
|
178
|
+
data = {
|
|
179
|
+
file: data
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
if (data.file) {
|
|
183
|
+
var img = document.createElement('img');
|
|
184
|
+
img.setAttribute('src', data.file);
|
|
185
|
+
img.setAttribute('tabindex', -1);
|
|
186
|
+
self.image.innerHTML = '';
|
|
187
|
+
self.image.appendChild(img);
|
|
174
188
|
}
|
|
175
|
-
}
|
|
176
|
-
if (data.file) {
|
|
177
|
-
var img = document.createElement('img');
|
|
178
|
-
img.setAttribute('src', data.file);
|
|
179
|
-
img.setAttribute('tabindex', -1);
|
|
180
|
-
self.image.innerHTML = '';
|
|
181
|
-
self.image.appendChild(img);
|
|
182
|
-
}
|
|
183
189
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
190
|
+
if (data.original) {
|
|
191
|
+
crop.addFromFile(data.original);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
photoContainer.content = [data];
|
|
187
195
|
|
|
188
|
-
|
|
196
|
+
// Classes
|
|
197
|
+
}
|
|
189
198
|
}
|
|
190
199
|
|
|
191
200
|
// Template
|
|
192
201
|
var template = `
|
|
193
|
-
<div @ref='self.image'></div>
|
|
202
|
+
<div @ref='self.image' class="jphoto"></div>
|
|
194
203
|
<div @ready='self.createModal(this)'>
|
|
195
204
|
<div @ready='self.createCropper(this)' @ref='self.cropperArea'></div>
|
|
196
205
|
<div @ref='self.controls'>
|
|
@@ -202,14 +211,14 @@
|
|
|
202
211
|
<div role='content' style='background-color: #ccc;'>
|
|
203
212
|
<div>
|
|
204
213
|
<div class="center row">
|
|
205
|
-
<label class="f1 p6"> 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>
|
|
206
|
-
<label class="f1 p6"> 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>
|
|
214
|
+
<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>
|
|
215
|
+
<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>
|
|
207
216
|
</div>
|
|
208
217
|
</div>
|
|
209
218
|
<div>
|
|
210
219
|
<div class="center row">
|
|
211
|
-
<label class="f1 p6"> 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>
|
|
212
|
-
<label class="f1 p6"> 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>
|
|
220
|
+
<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>
|
|
221
|
+
<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>
|
|
213
222
|
</div>
|
|
214
223
|
</div>
|
|
215
224
|
</div>
|
|
@@ -248,7 +257,6 @@
|
|
|
248
257
|
}
|
|
249
258
|
|
|
250
259
|
// Onclick event
|
|
251
|
-
photoContainer.classList.add('jupload');
|
|
252
260
|
photoContainer.onmousedown = function(e) {
|
|
253
261
|
if (! modal.isOpen()) {
|
|
254
262
|
// Open modal
|
|
@@ -263,6 +271,13 @@
|
|
|
263
271
|
}
|
|
264
272
|
}
|
|
265
273
|
|
|
274
|
+
// Remove current image
|
|
275
|
+
photoContainer.onkeydown = function(e) {
|
|
276
|
+
if (e.key == 'Delete' && e.target.tagName == 'IMG') {
|
|
277
|
+
self.deletePhoto();
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
266
281
|
// Quick reference
|
|
267
282
|
photoContainer.self = self;
|
|
268
283
|
|