Rewrite site with Bootstrap and dynamic options

.gitignore

@@ -1,2 +1,3 @@
 .idea/
 node_modules/
+demo/build/

Gruntfile.cjs

@@ -0,0 +1,36 @@
+module.exports = function (grunt) {
+    grunt.initConfig({
+        copy: {
+            dist: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: "node_modules/bootstrap/dist/js",
+                        src: "bootstrap.bundle.min.*",
+                        dest: "demo/build",
+                    },
+                    {
+                        expand: true,
+                        cwd: "",
+                        src: ["cropt.js", "cropt.css"],
+                        dest: "demo/build",
+                    },
+                ],
+            },
+        },
+        sass: {
+            dist: {
+                options: {
+                    style: "expanded",
+                },
+                files: {
+                    "demo/build/bs-custom.css": "demo/styles.scss",
+                },
+            },
+        },
+    });
+
+    grunt.loadNpmTasks("grunt-contrib-copy");
+    grunt.loadNpmTasks("grunt-contrib-sass");
+    grunt.registerTask("default", ["copy", "sass"]);
+};

README.md

@@ -1,4 +1,4 @@
-# Cropt - a JavaScript image cropper
+# Cropt - lightweight JavaScript image cropper
 
 Originally based on [Foliotek/Croppie](https://github.com/Foliotek/Croppie), but rewritten as a modern ES module with a simpler API, higher quality image scaling, and numerous other improvements.
 
@@ -44,6 +44,13 @@ Default value: `{ width: 200, height: 200, type: "square" }`
 
 Defines the size and shape of the crop box.
 
+### `zoomerInputClass`
+
+Type: `string`  
+Default value: `"cr-slider"`
+
+Optionally set a different class on the zoom range input to customize styling.
+
 ## Methods
 
 ### `bind(src: string, zoom: number | null = null): Promise<void>`

cropt.js

@@ -165,7 +165,6 @@ export class Cropt {
             throw new Error('src cannot be empty');
         }
 
-        this.data.bound = false;
         this.data.boundZoom = zoom;
 
         return loadImage(src).then((img) => {
@@ -243,6 +242,7 @@ export class Cropt {
     }
 
     refresh() {
+        this.#setViewport();
         this.#updatePropertiesFromImage();
     }
 
@@ -264,8 +264,6 @@ export class Cropt {
     }
 
     #create() {
-        var customViewportClass = this.options.viewport.type ? 'cr-vp-' + this.options.viewport.type : null;
-
         // Properties on class
         this.data = {};
         this.elements = {};
@@ -281,14 +279,7 @@ export class Cropt {
         viewport.setAttribute('tabindex', 0);
         viewport.classList.add('cr-viewport');
 
-        if (customViewportClass) {
-            viewport.classList.add(customViewportClass);
-        }
-
-        css(viewport, {
-            width: this.options.viewport.width + 'px',
-            height: this.options.viewport.height + 'px'
-        });
+        this.#setViewport();
 
         this.elements.preview.classList.add('cr-image');
         this.elements.preview.setAttribute('alt', 'preview');
@@ -309,6 +300,22 @@ export class Cropt {
         this.#initializeZoom();
     }
 
+    #setViewport() {
+        const circleClass = "cr-vp-circle";
+        const viewport = this.elements.viewport;
+
+        if (this.options.viewport.type === "circle") {
+            viewport.classList.add(circleClass);
+        } else {
+            viewport.classList.remove(circleClass)
+        }
+
+        css(viewport, {
+            width: this.options.viewport.width + 'px',
+            height: this.options.viewport.height + 'px'
+        });
+    }
+
     #getUnscaledCanvas(p) {
         var sWidth = p.right - p.left;
         var sHeight = p.bottom - p.top;
@@ -688,12 +695,11 @@ export class Cropt {
     }
 
     #updatePropertiesFromImage() {
-        if (!this.#isVisible() || this.data.bound) {
+        if (!this.#isVisible()) {
             return;
         }
 
         var transformReset = new Transform(0, 0, 1);
-        this.data.bound = true;
 
         var cssReset = {
             transform: transformReset.toString(),