Document refresh method and require bind to be passed an object

onstuimig · Nov 5, 2023 · 5dd84a0 · 5dd84a0
1 parent 70eb385
commit 5dd84a0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 26 deletions.
diff --git a/croppie.js b/croppie.js
@@ -958,32 +958,13 @@
     }
 
     function _bind(options) {
-        var self = this,
-            url,
-            points = [],
-            zoom = null;
-
-        if (typeof (options) === 'string') {
-            url = options;
-            options = {};
-        }
-        else if (Array.isArray(options)) {
-            points = options.slice();
-        }
-        else if (typeof (options) === 'undefined' && self.data.url) { //refreshing
-            _updatePropertiesFromImage.call(self);
-            _triggerUpdate.call(self);
-            return null;
-        }
-        else {
-            url = options.url;
-            points = options.points || [];
-            zoom = typeof(options.zoom) === 'undefined' ? null : options.zoom;
-        }
+        var self = this;
+        var url = options.url;
+        var points = options.points || [];
 
         self.data.bound = false;
         self.data.url = url || self.data.url;
-        self.data.boundZoom = zoom;
+        self.data.boundZoom = typeof(options.zoom) === 'undefined' ? null : options.zoom;
 
         return loadImage(url).then(function (img) {
             _replaceImage.call(self, img);
@@ -1109,6 +1090,7 @@
 
     function _refresh() {
         _updatePropertiesFromImage.call(this);
+        _triggerUpdate.call(this);
     }
 
     function _destroy() {

diff --git a/demo/demo.js b/demo/demo.js
@@ -165,7 +165,7 @@ var Demo = (function() {
 
 		document.querySelector('.toggle-hidden').addEventListener('click', function () {
 			toggle(hidEl);
-			hiddenCrop.bind(); // refresh
+			hiddenCrop.refresh();
 		});
 	}
 

diff --git a/index.html b/index.html
@@ -158,6 +158,10 @@ <h3>Methods</h3>
                             <strong class="focus">destroy()</strong><em></em>
                             <p>Destroy a croppie instance and remove it from the DOM</p>
                         </li>
+                        <li id="refresh">
+                            <strong class="focus">refresh()</strong><em></em>
+                            <p>Recalculate points for the croppie image. Necessary if croppie instance was bound to a hidden element.</p>
+                        </li>
                         <li id="result">
                             <strong class="focus">result({ type, size, format, quality })</strong><em>Promise</em>
                             <p>Get the resulting crop of the image.</p>
@@ -342,9 +346,9 @@ <h2>Demos</h2>
                     <div class="grid">
                         <div class="col-1-2">
                             <strong>Hidden Example</strong>
-                            <p>When binding a croppie element that isn't visible, i.e., in a modal - you'll need to call bind again on your croppie instance, to indicate to croppie that the position has changed and it needs to recalculate its points.</p>
+                            <p>When binding a croppie element that isn't visible, i.e., in a modal - you'll need to call refresh on your croppie instance, to indicate to croppie that the position has changed and it needs to recalculate its points.</p>
 
-                            <pre class="language-javascript"><code class="language-javascript">hiddenCrop.bind();</code></pre>
+                            <pre class="language-javascript"><code class="language-javascript">hiddenCrop.refresh();</code></pre>
                             <div class="actions">
                                 <button class="toggle-hidden">Toggle Croppie</button>
                             </div>