Added initialZoom option

When set to 'min', image is zoomed to the smallest when loaded. When set to 'image', image is zoomed to 1 when loaded. Default is 'min'.
Chyren0305 · Jun 20, 2015 · cee44a7 · cee44a7
1 parent 869a63e
commit cee44a7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/dist/jquery.cropit.js b/dist/jquery.cropit.js
@@ -288,7 +288,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	      }
 
-	      this.initialZoom = 0;
+	      if (this.options.initialZoom === 'min') {
+	        this.initialZoom = 0; // Will be fixed when image loads
+	      } else if (this.options.initialZoom === 'image') {
+	        this.initialZoom = 1;
+	      } else {
+	        this.initialZoom = 0;
+	      }
+
 	      this.imageLoaded = false;
 
 	      this.moveContinue = false;
@@ -899,8 +906,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	  imageState: null,
 	  allowDragNDrop: true,
 	  freeMove: false,
-	  minZoom: 'fill',
 	  maxZoom: 1,
+	  minZoom: 'fill',
+	  initialZoom: 'min',
 	  rejectSmallImage: false
 	};
 

diff --git a/src/constants.js b/src/constants.js
@@ -7,8 +7,9 @@ export const DEFAULTS = {
   imageState: null,
   allowDragNDrop: true,
   freeMove: false,
-  minZoom: 'fill',
   maxZoom: 1,
+  minZoom: 'fill',
+  initialZoom: 'min',
   rejectSmallImage: false,
 };
 

diff --git a/src/cropit.js b/src/cropit.js
@@ -75,7 +75,16 @@ class Cropit {
       });
     }
 
-    this.initialZoom = 0;
+    if (this.options.initialZoom === 'min') {
+      this.initialZoom = 0; // Will be fixed when image loads
+    }
+    else if (this.options.initialZoom === 'image') {
+      this.initialZoom = 1;
+    }
+    else {
+      this.initialZoom = 0;
+    }
+
     this.imageLoaded = false;
 
     this.moveContinue = false;

diff --git a/test/cropit.spec.js b/test/cropit.spec.js
@@ -25,7 +25,9 @@ describe('Cropit', () => {
     expect(cropit.options.imageState).toBe(null);
     expect(cropit.options.allowDragNDrop).toBe(true);
     expect(cropit.options.freeMove).toBe(false);
+    expect(cropit.options.maxZoom).toBe(1);
     expect(cropit.options.minZoom).toBe('fill');
+    expect(cropit.options.initialZoom).toBe('min');
     expect(cropit.options.rejectSmallImage).toBe(false);
   });
 
@@ -81,6 +83,16 @@ describe('Cropit', () => {
       expect(cropit.centerImage).toHaveBeenCalled();
     });
 
+    it('sets zoom to 1 if initialZoom is image', () => {
+      cropit = newCropit({ initialZoom: 'image' });
+      expect(cropit.zoom).not.toBe(1);
+
+      cropit.image = { width: 2, height: 2 };
+      cropit.previewSize = { w: 1, h: 1 };
+      cropit.onImageLoaded();
+      expect(cropit.zoom).toBe(1);
+    });
+
     describe('rejectSmallImage set to true', () => {
       beforeEach(() => {
         cropit = newCropit({ rejectSmallImage: true });