npm - @lemonadejs/cropper - Versions diffs - 5.0.1 → 6.0.0 - Mend

@lemonadejs/cropper 5.0.1 → 6.0.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.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -1 +1,335 @@
-# lemonadejs
+# JavaScript Image Cropper - LemonadeJS Cropper Plugin
+A lightweight, powerful **JavaScript image cropper** and photo editor component built with [LemonadeJS](https://lemonadejs.com). Crop, resize, rotate, and adjust images directly in your web browser with this modern, reactive image editing solution.
+## Key Features
+- **Image Cropping**: Intuitive drag-and-drop interface for precise image cropping
+- **Image Rotation**: Rotate images with smooth, real-time preview
+- **Zoom Control**: Fine-grained zoom functionality from 0.1x to 5.45x
+- **Image Adjustments**: Brightness and contrast controls for professional results
+- **Responsive Design**: Automatically adapts to mobile and desktop screens
+- **Modal Interface**: Clean, user-friendly modal dialog for editing
+- **Blob Output**: Generates cropped images as blobs for easy upload
+- **Original Image Preservation**: Optionally keep the original image alongside the cropped version
+- **TypeScript Support**: Full TypeScript definitions included
+- **Framework Integration**: Works with vanilla JavaScript, React, Vue, and any modern framework
+## Installation
+### NPM Installation
+```bash
+npm install @lemonadejs/cropper
+```
+### CDN Installation
+```html
+<!-- LemonadeJS Core -->
+<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<!-- jSuites Cropper (dependency) -->
+<script src="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.css" />
+<!-- LemonadeJS Cropper Plugin -->
+<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.js"></script>
+```
+## Quick Start Example
+### Basic Image Cropper
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script>
+    const root = document.getElementById('root');
+    const cropper = Cropper(root, {
+        width: 300,
+        height: 240
+    });
+</script>
+</body>
+</html>
+```
+### Using with LemonadeJS Component
+```javascript
+import lemonade from 'lemonadejs';
+import Cropper from '@lemonadejs/cropper';
+export default function MyApp() {
+    const self = this;
+    return `<div>
+        <h1>Profile Picture Editor</h1>
+        <Cropper
+            width="400"
+            height="300"
+            :ref="self.cropper"
+            original="true" />
+        <button onclick="self.cropper.open()">Edit Photo</button>
+    </div>`;
+}
+```
+### React Integration
+```javascript
+import React, { useRef, useEffect } from 'react';
+import Cropper from '@lemonadejs/cropper';
+function PhotoEditor() {
+    const cropperRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (containerRef.current) {
+            cropperRef.current = Cropper(containerRef.current, {
+                width: 400,
+                height: 300,
+                original: true
+            });
+        }
+        return () => {
+            // Cleanup if needed
+        };
+    }, []);
+    const handleGetImage = () => {
+        if (cropperRef.current) {
+            const imageData = cropperRef.current.getValue();
+            console.log('Image data:', imageData);
+        }
+    };
+    return (
+        <div>
+            <div ref={containerRef}></div>
+            <button onClick={handleGetImage}>Get Image Data</button>
+        </div>
+    );
+}
+export default PhotoEditor;
+```
+### Advanced Configuration
+```javascript
+const cropper = Cropper(document.getElementById('root'), {
+    width: 500,          // Crop area width
+    height: 400,         // Crop area height
+    original: true,      // Preserve original image
+    name: 'profile_pic'  // Form field name
+});
+// Set an image programmatically
+cropper.setValue({
+    file: 'https://example.com/image.jpg'
+});
+// Get cropped image data
+const imageData = cropper.getValue();
+console.log(imageData);
+// Output: [{ file: 'blob:...', content: 'data:image/png;base64,...', extension: 'png' }]
+```
+## Usage Examples
+### Profile Picture Upload
+```javascript
+const profileCropper = Cropper(document.getElementById('profile-editor'), {
+    width: 200,
+    height: 200,
+    original: true
+});
+// After user crops the image
+async function uploadProfilePicture() {
+    const data = profileCropper.getValue();
+    if (data && data[0]) {
+        const formData = new FormData();
+        const response = await fetch(data[0].content);
+        const blob = await response.blob();
+        formData.append('profile_picture', blob, 'profile.png');
+        // Upload to server
+        await fetch('/api/upload', {
+            method: 'POST',
+            body: formData
+        });
+    }
+}
+```
+### E-commerce Product Image Editor
+```javascript
+const productCropper = Cropper(document.getElementById('product-images'), {
+    width: 800,
+    height: 600,
+    original: true,  // Keep original for zoom functionality
+    name: 'product_image'
+});
+// Handle multiple product images
+function addProductImage(imageUrl) {
+    productCropper.setValue({
+        file: imageUrl,
+        original: imageUrl
+    });
+}
+```
+### Responsive Mobile-Friendly Cropper
+```javascript
+// Automatically adjusts for mobile devices
+const responsiveCropper = Cropper(document.getElementById('mobile-editor'), {
+    width: window.innerWidth < 640 ? window.innerWidth - 40 : 600,
+    height: window.innerWidth < 640 ? window.innerWidth - 40 : 450
+});
+// The cropper automatically adapts its interface for screens < 800px
+```
+## API Reference
+### 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                     |
+### Methods
+#### getValue()
+Retrieve the current cropped image data and metadata.
+```javascript
+const data = cropper.getValue();
+// Returns: { file: 'blob:...', content: 'data:image/...', extension: 'png' }
+```
+**Returns:** `ImageData` - Object containing image data with file URL, content, and extension
+#### setValue(data)
+Set or update the image in the cropper.
+```javascript
+// Set image with URL
+cropper.setValue({
+    file: 'path/to/image.jpg',
+    original: 'path/to/original.jpg'
+});
+// Set image with string
+cropper.setValue('https://example.com/image.jpg');
+// Clear the image
+cropper.setValue(null);
+```
+**Parameters:**
+- `data` (string | ImageData | null): Image URL, data object, array of data objects, or null to clear
+#### open()
+Programmatically open the cropper modal interface.
+```javascript
+cropper.open();
+```
+#### uploadPhoto()
+Launch the file picker modal to allow users to select a new photo.
+```javascript
+// Trigger file upload dialog
+document.querySelector('.upload-btn').addEventListener('click', () => {
+    // Note: This is handled internally by the cropper UI
+});
+```
+#### deletePhoto()
+Remove the current image from the cropper container.
+```javascript
+// Note: This method is available through the context menu and UI controls
+// The cropper automatically resets when the image is deleted
+```
+#### setControls(state)
+Enable or disable the editing controls (zoom, rotate, brightness, contrast).
+```javascript
+cropper.setControls(false); // Disable all controls
+cropper.setControls(true);  // Enable all controls
+```
+**Parameters:**
+- `state` (boolean): True to enable, false to disable
+### Properties
+| Property      | Type        | Description                                   |
+|---------------|-------------|-----------------------------------------------|
+| `brightness`  | number      | Current brightness adjustment value (-1 to 1) |
+| `contrast`    | number      | Current contrast adjustment value (-1 to 1)   |
+| `greyscale`   | number      | Current greyscale value (0 to 1)              |
+| `cropperArea` | HTMLElement | Reference to the cropper area DOM element     |
+### ImageData Interface
+```typescript
+interface ImageData {
+    file: string;       // URL or blob URL to the image
+    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
+## License
+MIT License
+## Support & Community
+- **Documentation**: [https://lemonadejs.com/plugins/cropper](https://lemonadejs.com/plugins/cropper)
+- **GitHub Issues**: Report bugs and request features
+- **Community**: Join our community for support and discussions
+- **Website**: [https://lemonadejs.com](https://lemonadejs.com)
+## Contributing
+Contributions are welcome! Please feel free to submit pull requests or open issues.

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,119 @@
+/**
+ * LemonadeJS Cropper Component
+ * Image cropper with crop, zoom, rotate, and adjustment controls
+ */
+declare namespace Cropper {
+    /**
+     * Data structure for cropped image
+     */
+    interface ImageData {
+        /** URL or blob URL to the image file */
+        file: string;
+        /** Base64 or data URL content of the image */
+        content?: string;
+        /** File extension (e.g., 'jpg', 'png') */
+        extension?: string;
+        /** Original image URL (if original option is enabled) */
+        original?: string;
+    }
+    /**
+     * Configuration options for the Cropper component
+     */
+    interface Options {
+        /** Name attribute for the component (useful for forms) */
+        name?: string;
+        /** Initial value - image data */
+        value?: ImageData[] | null;
+        /** Width of the crop area in pixels (default: 300) */
+        width?: number;
+        /** Height of the crop area in pixels (default: 240) */
+        height?: number;
+        /** Whether to keep the original image (default: false) */
+        original?: boolean;
+    }
+    /**
+     * Cropper component instance
+     */
+    interface Instance {
+        /** Get the current cropped image data */
+        getValue(): ImageData[] | null;
+        /** Set or update the image data */
+        setValue(data: ImageData | ImageData[] | string | null): void;
+        /** Open the cropper modal */
+        open(): void;
+        /** Enable or disable cropper controls */
+        setControls(state: boolean): void;
+        /** Current brightness adjustment value */
+        brightness: number;
+        /** Current contrast adjustment value */
+        contrast: number;
+        /** Current greyscale adjustment value */
+        greyscale: number;
+        /** Reference to the cropper area element */
+        cropperArea: HTMLElement | null;
+        /** Name attribute */
+        name?: string;
+        /** Current value */
+        value: ImageData[] | null;
+        /** Width setting */
+        width?: number;
+        /** Height setting */
+        height?: number;
+        /** Original image setting */
+        original?: boolean;
+        /** Reference to the root DOM element */
+        el: HTMLElement;
+        /** Reference to the image container element */
+        image: HTMLElement;
+    }
+}
+/**
+ * Create a Cropper component instance
+ *
+ * @param root - DOM element or container where the cropper will be rendered
+ * @param options - Configuration options for the cropper
+ * @returns Cropper instance
+ *
+ * @example
+ * ```javascript
+ * // Create a cropper with custom dimensions
+ * const cropper = Cropper(document.getElementById('container'), {
+ *     width: 400,
+ *     height: 300,
+ *     original: true
+ * });
+ *
+ * // Set an image
+ * cropper.setValue({
+ *     file: 'path/to/image.jpg'
+ * });
+ *
+ * // Get cropped image data
+ * const data = cropper.getValue();
+ * ```
+ */
+declare function Cropper(root: HTMLElement, options?: Cropper.Options): Cropper.Instance;
+export default Cropper;

package/dist/index.js CHANGED Viewed

@@ -16,16 +16,7 @@ if (!studio && typeof (require) === 'function') {
     var studio = require('@lemonadejs/studio');
 }
-// Load jsuites
-if (typeof(jSuites) == 'undefined') {
-    if (typeof(require) === 'function') {
-        var jSuites = require('jsuites');
-    } else if (window.jSuites) {
-        var jSuites = window.jSuites;
-    }
-}
-if (typeof(cropper) == 'undefined') {
+if (typeof(cropper) === 'undefined') {
     if (typeof(require) === 'function') {
         var Crop = require('@jsuites/cropper');
     } else if (window.cropper) {
@@ -43,34 +34,55 @@ if (typeof(cropper) == 'undefined') {
     'use strict';
-    const Cropper = function() {
-        let self = this;
-        let original = self.original ? 1 : 0;
-        let width = self.width || 300;
-        let height = self.height || 240;
-        let modal = null;
+    const translate = function (t) {
+        if (typeof document !== 'undefined' && document.dictionary) {
+            return document.dictionary[t] || t;
+        } else {
+            return t;
+        }
+    };
+    const getWindowWidth = function() {
+        let w = window,
+            d = document,
+            e = d.documentElement,
+            g = d.getElementsByTagName('body')[0],
+            x = w.innerWidth || e.clientWidth || g.clientWidth;
+        return x;
+    }
+    const Cropper = function(children, { onload, onchange, track }) {
+        const self = this;
+        const original = self.original ? 1 : 0;
+        const width = self.width || 300;
+        const height = self.height || 240;
         let crop = null;
-        let menu = null;
+        const menu = [
+            {
+                title: translate('Change image'),
+                icon: 'edit',
+                onclick: () => {
+                    self.open();
+                }
+            },
+            {
+                title: translate('Delete image'),
+                icon: 'delete',
+                shortcut: 'DELETE',
+                onclick: (e) => {
+                    deletePhoto();
+                }
+            }
+        ]
         self.cropperArea = null;
         self.brightness = 0;
         self.contrast = 0;
         self.greyscale = 0;
-        // Methods
-        self.createModal = function(o) {
-            modal = jSuites.modal(o, {
-                closed: true,
-                width: '800px',
-                height: '680px',
-                title: 'Photo Upload',
-                padding: '0',
-                icon: 'photo'
-            });
-        }
-        self.createCropper = function(o) {
-            let area = jSuites.getWindowWidth();
+        self.createCropper = (o) => {
+            const area = getWindowWidth();
             let a;
             let c;
             if (area < 800) {
@@ -82,9 +94,9 @@ if (typeof(cropper) == 'undefined') {
             }
             crop = Crop(o, {
                 area: a,
-                crop: c ,
+                crop: c,
                 allowResize: false,
-                onchange: function(el, image) {
+                onchange: (el, image) => {
                     if (image) {
                         self.setControls(true);
                     }
@@ -92,37 +104,6 @@ if (typeof(cropper) == 'undefined') {
             });
         }
-        self.createMenu = function(o) {
-            // Start contextmenu component
-            menu = jSuites.contextmenu(o, {
-                onclick: function(a,b) {
-                    a.close();
-                    b.stopPropagation();
-                }
-            });
-        }
-        // Controls
-        self.createControls = function(o) {
-            let tabs = jSuites.tabs(o.children[0], {
-                data: [{
-                        title: 'Crop',
-                        icon: 'crop',
-                        width: '100px',
-                    },
-                    {
-                        title:'Adjusts',
-                        icon: 'image',
-                        width: '100px',
-                    }],
-                padding:'10px',
-                animation: true,
-                position: 'bottom',
-            });
-            tabs.content.style.backgroundColor = '#eee';
-        }
         const updateZoom = (e) => {
             crop.zoom(e.target.value);
         }
@@ -142,63 +123,52 @@ 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
-                let newImage = crop.getCroppedImage();
+                const newImage = crop.getCroppedImage();
                 // Callback for the blob
-                let createImage = function(b) {
+                const createImage = (b) => {
                     // Transform to blob
-                    let filename = window.URL.createObjectURL(b);
+                    const filename = window.URL.createObjectURL(b);
                     // Set upload information
-                    let data = {
+                    const data = {
                         file: filename,
                         content: newImage.src,
                         extension: newImage.content.extension,
                     };
                     // Upload original image
-                    if (original == true) {
+                    if (original === true) {
                         data.original = crop.getImage().src;
                     }
-                    // Update file to blob
-                    newImage.src = filename;
-                    // Integration with jSuites.form
-                    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);
                 // Close the modal
-                setTimeout(function() {
-                    modal.close();
+                setTimeout(() => {
+                    self.modal.close();
                 });
             }
         }
         const uploadPhoto = () => {
-            jSuites.click(crop.getFileInput());
+            crop.getFileInput().click();
         }
-        const deletePhoto = function() {
+        const deletePhoto = () => {
             if (self.image) {
                 // Reset photo from crop
                 crop.reset();
                 // Disable controls
                 self.setControls(false);
-                // Reset from container
-                self.image.innerHTML = '';
                 // Reset container
-                self.value = null;
+                self.value = '';
             }
         }
-        self.setControls = function(state) {
-            let controls = self.el.querySelectorAll('input.controls');
-            if (state == false) {
+        self.setControls = (state) => {
+            const controls = self.el.querySelectorAll('input.controls');
+            if (state === false) {
                 for (let i = 0; i < controls.length; i++) {
                     controls[i].setAttribute('disabled', 'disabled');
                 }
@@ -215,149 +185,142 @@ if (typeof(cropper) == 'undefined') {
             }
         }
-        self.getValue = function() {
+        self.getValue = () => {
             return self.value;
         }
-        self.setValue = function(data) {
-            if (! data) {
+        self.setValue = (data) => {
+            if (!data) {
                 // Reset container
                 deletePhoto();
             } else {
-                if (typeof(data) == 'string') {
+                if (typeof(data) === 'string') {
                     data = {
                         file: data
                     }
                 }
-                if (data.file) {
-                    let 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;
             }
         }
-        self.open = function() {
-            if (! modal.isOpen()) {
-                modal.open();
+        self.open = () => {
+            if (self.modal.isClosed()) {
+                self.modal.open();
             }
         }
-        self.onload = function() {
+        onload(() => {
             self.image.style.maxWidth = self.width + 'px';
             self.image.style.maxHeight = self.height + 'px';
             // Onclick event
-            self.el.addEventListener('mousedown',  function(e) {
+            self.image.addEventListener('mousedown', (e) => {
                 let mouseButton;
-                e = e || window.event;
-                if (e.buttons) {
-                    mouseButton = e.buttons;
-                } else if (e.button) {
-                    mouseButton = e.button;
+                const event = e || window.event;
+                if (event.buttons) {
+                    mouseButton = event.buttons;
+                } else if (event.button) {
+                    mouseButton = event.button;
                 } else {
-                    mouseButton = e.which;
+                    mouseButton = event.which;
                 }
-                if (mouseButton == 1) {
+                if (mouseButton === 1) {
                     self.open();
                 } else {
-                    if (e.target.tagName == 'IMG') {
-                        e.target.focus();
+                    if (event.target.tagName === 'IMG') {
+                        event.target.focus();
                     }
                 }
             });
-            self.el.addEventListener('contextmenu', function(e) {
-                if (e.target.tagName == 'IMG') {
-                    menu.open(e, [
-                        {
-                            title: jSuites.translate('Change image'),
-                            icon: 'edit',
-                            onclick: function() {
-                                self.open();
-                            }
-                        },
-                        {
-                            title: jSuites.translate('Delete image'),
-                            icon: 'delete',
-                            shortcut: 'DELETE',
-                            onclick: function() {
-                                e.target.remove();
-                            }
-                        }
-                    ]);
-                    e.preventDefault();
-                }
-            });
-            self.el.addEventListener('onkeydown', function(e) {
-                if (e.key == 'Delete' && e.target.tagName == 'IMG') {
+            self.el.addEventListener('onkeydown', (e) => {
+                if (e.key === 'Delete' && e.target.tagName === 'IMG') {
                     deletePhoto();
                 }
-            })
+            });
-            self.el.val = function(v) {
+            self.el.val = (v) => {
                 if (v === undefined) {
                     return self.getValue();
                 } else {
                     self.setValue(v);
                 }
             }
+        });
-        }
+        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}}" value="{{self.value}}">
+        return render => render `<div name="{{self.name}}">
             <div :ref='this.image' class="jphoto jcropper"></div>
-            <div :ready='self.createModal'>
+            <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 :ready='self.createControls' class="controls">
-                    <div role='tabs'>
-                        <div role='headers'>
-                            <div style="background-color: white; padding: 15px !important;"></div>
-                            <div style="background-color: white;"></div>
-                        </div>
-                        <div role='content' style='background-color: #ccc;'>
-                            <div>
-                                <div class="lm-center lm-row">
-                                    <label class="lm-f1 lm-p6"> Zoom <input type='range' step='.05' min='0.1' max='5.45' value='1' oninput='${updateZoom}' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
-                                    <label class="lm-f1 lm-p6"> Rotate <input type='range' step='.05' min='-1' max='1' value='0' oninput='${updateRotate}' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
-                                </div>
-                            </div>
-                            <div>
-                                <div class="lm-center lm-row">
-                                    <label class="lm-f1 lm-p6"> Brigthness <input type='range' min='-1' max='1' step='.05' value='0' :bind='self.brightness' oninput='${setBrightness}' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
-                                    <label class="lm-f1 lm-p6"> Contrast <input type='range' min='-1' max='1' step='.05' value='0' :bind='self.contrast' oninput='${setContrast}' style="margin-top:10px;" class='jrange controls' disabled='disabled'></label>
-                                </div>
-                            </div>
-                        </div>
+                <div class="controls">
+                    <div style="display: flex; justify-content: center; gap: 10px; text-align: center; border-top: 1px solid #ddd;">
+                        <label style="padding: 20px;">Zoom<br><input type='range' step='.05' min='0.1' max='5.45' value='1' oninput='${updateZoom}' class='jrange controls' disabled='disabled'></label>
+                        <label style="padding: 20px;">Rotate<br><input type='range' step='.05' min='-1' max='1' value='0' oninput='${updateRotate}'class='jrange controls' disabled='disabled'></label>
+                        <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 om-p20' style='border-top: 1px solid #aaa'>
-                        <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>
-            </div>
-            <div :ready="self.createMenu"></div>
+            </lm-modal>
+            <lm-contextmenu options="${menu}"></lm-contextmenu>
         </div>`;
     }
     lemonade.setComponents({ Cropper: Cropper });
+    // Register the web component
+    lemonade.createWebComponent('cropper', Cropper);
     return function (root, options, template) {
         if (typeof (root) === 'object') {

package/package.json CHANGED Viewed

@@ -1,24 +1,23 @@
-{
-    "name": "@lemonadejs/cropper",
-    "title": "JavaScript image cropper editor.",
-    "description": "LemonadeJS and jSuites cropper editor integration",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript cropper",
-        "online image editor",
-        "js",
-        "library",
-        "javascript plugins"
-    ],
-    "dependencies": {
-        "lemonadejs": "^5.0.6",
-        "@lemonadejs/studio": "^5.0.0",
-        "jsuites": "^5.9.2",
-        "@jsuites/cropper": "^1.6.2"
-    },
-    "main": "dist/index.js",
-    "version": "5.0.1"
-}
+{
+    "name": "@lemonadejs/cropper",
+    "title": "JavaScript image cropper editor.",
+    "description": "LemonadeJS and jSuites cropper editor integration",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript cropper",
+        "online image editor",
+        "js",
+        "library",
+        "javascript plugins"
+    ],
+    "dependencies": {
+        "lemonadejs": "^5.3.3",
+        "@lemonadejs/studio": "^5.7.11",
+        "@jsuites/cropper": "^1.7.0"
+    },
+    "main": "dist/index.js",
+    "version": "6.0.0"
+}