@lemonadejs/cropper 5.1.0 → 6.0.0

package/README.md

@@ -214,13 +214,13 @@ const responsiveCropper = Cropper(document.getElementById('mobile-editor'), {
 
 ### Options
 
-| Property   | Type        | Default   | Description                            |
-|------------|-------------|-----------|----------------------------------------|
-| `width`    | number      | 300       | Width of the crop area in pixels       |
-| `height`   | number      | 240       | Height of the crop area in pixels      |
-| `original` | boolean     | false     | Whether to preserve the original image |
-| `name`     | string      | undefined | Name attribute for form integration    |
-| `value`    | ImageData[] | null      | Initial image data                     |
+| Property   | Type      | Default   | Description                            |
+|------------|-----------|-----------|----------------------------------------|
+| `width`    | number    | 300       | Width of the crop area in pixels       |
+| `height`   | number    | 240       | Height of the crop area in pixels      |
+| `original` | boolean   | false     | Whether to preserve the original image |
+| `name`     | string    | undefined | Name attribute for form integration    |
+| `value`    | ImageData | null      | Initial image data                     |
 
 ### Methods
 
@@ -229,10 +229,10 @@ Retrieve the current cropped image data and metadata.
 
 ```javascript
 const data = cropper.getValue();
-// Returns: [{ file: 'blob:...', content: 'data:image/...', extension: 'png' }]
+// Returns: { file: 'blob:...', content: 'data:image/...', extension: 'png' }
 ```
 
-**Returns:** `ImageData[]` - Array containing image data with file URL, content, and extension
+**Returns:** `ImageData` - Object containing image data with file URL, content, and extension
 
 #### setValue(data)
 Set or update the image in the cropper.
@@ -252,7 +252,7 @@ cropper.setValue(null);
 ```
 
 **Parameters:**
-- `data` (string | ImageData | ImageData[] | null): Image URL, data object, array of data objects, or null to clear
+- `data` (string | ImageData | null): Image URL, data object, array of data objects, or null to clear
 
 #### open()
 Programmatically open the cropper modal interface.
@@ -307,15 +307,16 @@ interface ImageData {
     content?: string;   // Base64 or data URL content
     extension?: string; // File extension (e.g., 'jpg', 'png')
     original?: string;  // Original image URL (if preserved)
+    guid?: string;
 }
 ```
 
 ## Related Projects
 
 - **[LemonadeJS](https://lemonadejs.com)** - Reactive micro JavaScript library
+- **[Jspreadsheet](https://jspreadsheet.com)** - JavaScript data grid and spreadsheet component
+- **[CalendarJS](https://calendarjs.com)** - JavaScript calendar, schedule and timeline components
 - **[jSuites](https://jsuites.net)** - JavaScript plugins and web components collection
-- **[jSpreadsheet](https://jspreadsheet.com)** - JavaScript data grid and spreadsheet component
-
 
 ## License
 

package/dist/index.js

@@ -123,7 +123,6 @@ if (typeof(cropper) === 'undefined') {
         const updatePhoto = () => {
             // Checks if cropper container is editable
             if (self.cropperArea.classList.contains('jcrop_edition')) {
-                self.image.innerHTML = '';
                 // Create image with metadata
                 const newImage = crop.getCroppedImage();
                 // Callback for the blob
@@ -140,16 +139,8 @@ if (typeof(cropper) === 'undefined') {
                     if (original === true) {
                         data.original = crop.getImage().src;
                     }
-                    // Update file to blob
-                    newImage.src = filename;
-                    // Integration with
-                    if (self.name) {
-                        newImage.classList.remove('jfile');
-                    }
                     // Value
-                    self.value = [data];
-                    // Append new image
-                    self.image.appendChild(newImage);
+                    self.value = data;
                 }
                 // Create image
                 crop.getCroppedAsBlob(createImage);
@@ -170,8 +161,6 @@ if (typeof(cropper) === 'undefined') {
                 crop.reset();
                 // Disable controls
                 self.setControls(false);
-                // Reset from container
-                self.image.innerHTML = '';
                 // Reset container
                 self.value = '';
             }
@@ -211,19 +200,11 @@ if (typeof(cropper) === 'undefined') {
                     }
                 }
 
-                if (data.file) {
-                    const img = document.createElement('img');
-                    img.setAttribute('src', data.file);
-                    img.setAttribute('tabindex', -1);
-                    self.image.innerHTML = '';
-                    self.image.appendChild(img);
-                }
-
                 if (data.original) {
                     crop.addFromFile(data.original);
                 }
 
-                self.value = [data];
+                self.value = data;
             }
         }
 
@@ -273,12 +254,47 @@ if (typeof(cropper) === 'undefined') {
             }
         });
 
+        onchange((prop) => {
+            let image = self.value;
+            let filename = null;
+
+            if (Array.isArray(self.value)) {
+                image = self.value[0];
+            }
+            const img = document.createElement('img');
+            img.setAttribute('tabindex', -1);
+            self.image.textContent = '';
+            // Integration with
+            if (self.name) {
+                img.classList.remove('jfile');
+            }
+
+            if (image) {
+                if (typeof image === 'string') {
+                    filename = image;
+                } else if (typeof image === 'object') {
+                    filename = image.file;
+                }
+            }
+
+            if (filename) {
+                if (typeof self.onbeforeloadimage === 'function') {
+                    let ret = self.onbeforeloadimage(self, filename, img);
+                    if (ret) {
+                        filename = ret;
+                    }
+                }
+                img.setAttribute('src', filename);
+                self.image.appendChild(img);
+            }
+        })
+
         track('value');
 
         // Template
         return render => render `<div name="{{self.name}}">
             <div :ref='this.image' class="jphoto jcropper"></div>
-            <lm-modal draggable="true" closable="true" closed="true" width="800" height="570" title="Photo Upload" icon="photo" :ref="self.modal">
+            <lm-modal draggable="true" closable="true" closed="true" width="800" height="580" title="Photo Upload" icon="photo" :ref="self.modal">
                 <div :ready='self.createCropper' :ref='self.cropperArea'></div>
                 <div class="controls">
                     <div style="display: flex; justify-content: center; gap: 10px; text-align: center; border-top: 1px solid #ddd;">
@@ -287,13 +303,13 @@ if (typeof(cropper) === 'undefined') {
                         <label style="padding: 20px;">Brigthness<br><input type='range' min='-1' max='1' step='.05' value='0' :bind='self.brightness' oninput='${setBrightness}' class='jrange controls' disabled='disabled'></label>
                         <label style="padding: 20px;">Contrast<br><input type='range' min='-1' max='1' step='.05' value='0' :bind='self.contrast' oninput='${setContrast}' class='jrange controls' disabled='disabled'></label>
                     </div>
-                    <div class='lm-row lm-p20' style='border-top: 1px solid #ddd'>
-                        <div class='lm-column lm-p6 lm-f1'>
-                            <input type='button' value='Save Photo' class='lm-button controls' style='min-width: 140px;' onclick='${updatePhoto}' disabled='disabled'>
-                        </div><div class='lm-column lm-p6'>
-                            <input type='button' value='Upload Photo' class='lm-button' style='min-width: 140px;' onclick='${uploadPhoto}'>
-                        </div><div class='lm-column lm-p6' style='text-align:right'>
-                            <input type='button' value='Delete Photo' class='lm-button controls' style='min-width: 140px;' onclick='${deletePhoto}' disabled='disabled'>
+                    <div class='lm-row lm-p15' style='border-top: 1px solid #ddd'>
+                        <div class='lm-column lm-f1'>
+                            <input type='button' value='Save Photo' class='lm-button controls' style='width: 100%' onclick='${updatePhoto}' disabled='disabled'>
+                        </div><div class='lm-column'>
+                            <input type='button' value='Upload Photo' class='lm-button' style='width: 100%' onclick='${uploadPhoto}'>
+                        </div><div class='lm-column' style='text-align:right'>
+                            <input type='button' value='Delete Photo' class='lm-button controls' style='width: 100%' onclick='${deletePhoto}' disabled='disabled'>
                         </div>
                     </div>
                 </div>

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^5.3.2",
-        "@lemonadejs/studio": "^5.7.0",
+        "lemonadejs": "^5.3.3",
+        "@lemonadejs/studio": "^5.7.11",
         "@jsuites/cropper": "^1.7.0"
     },
     "main": "dist/index.js",
-    "version": "5.1.0"
+    "version": "6.0.0"
 }