Update croppie and improve exif

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,21 @@
+## Expected Behavior
+
+
+## Actual Behavior
+
+
+## Steps to Reproduce the Problem
+
+  1.
+  1.
+  1.
+
+## Example Link
+Please recreate your issue using [JSbin](https://www.jsbin.com), [JSFiddle](https://jsfiddle.net), or [Codepen](https://codepen.io).
+* Link:
+
+
+## Specifications
+
+  - Browser:
+  - Version:

README.md

@@ -10,7 +10,7 @@ Download:
 [croppie.js](croppie.js) & [croppie.css](croppie.css)
 
 ## Adding croppie to your site
-```
+```html
 <link rel="stylesheet" href="croppie.css" />
 <script src="croppie.js"></script>
 ```
@@ -27,19 +27,25 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js
 [Documentation](http://foliotek.github.io/Croppie#documentation)
 
 ## Related Libraries
-* https://github.com/wem/croppie-dart
-* https://github.com/allenRoyston/ngCroppie
-* https://github.com/lpsBetty/angular-croppie
-
+* [croppie-dart](https://gitlab.com/michel.werren/croppie-dart)
+* [ngCroppie](https://github.com/allenRoyston/ngCroppie)
+* [angular-croppie](https://github.com/lpsBetty/angular-croppie)
+* [django-croppie](https://github.com/dima-kov/django-croppie)
+* [vue-croppie](https://github.com/jofftiquez/vue-croppie)
 
 ## Contributing
-#### Static Server
-`live-server`
+First, thanks for contributing.  This project is difficult to maintain with one person.  Here's a "checklist" of things to remember when contributing to croppie.
+* Don't forget to update the documentation.
+* If you're adding a new option/event/method, try adding to an example on the documentation.  Or create a new example, if you feel the need.
+* We don't have tests for Croppie :( (if you want to create tests I'd be forever grateful), so please try to test the functionality you're changing on the demo page.  I've tried to add as many use-cases as I can think of on there.  Compare the functionality in your branch to the one on the official page.  If they all still work, then great!
+
+If you're looking for a simple server to load the demo page, I use https://github.com/tapio/live-server.
 
 #### Minifying
 `uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js`
 
 #### Releasing a new version
+For the most part, you shouldn't worry about these steps unless you're the one handling the release.  Please don't bump the release and don't minify/uglify in a PR.  That just creates merge conflicts when merging.  Those steps will be performed when the release is created.
 1. Bump version in croppie.js
 2. Minify/Uglify
 3. Commit

demo/demo.css

@@ -32,11 +32,17 @@ h1 {
     padding-top: 30px;
     margin: 15px 0;
 }
-
+h3 {
+    font-size: 18px;
+    font-weight: 400;
+    border-bottom: 1px solid #0C4648;
+    margin: 15px 0 10px;
+}
 nav {
     position: absolute;
     top: 0;
     right: 0;
+    padding:15px;
 }
 
 nav a {
@@ -171,12 +177,6 @@ h2 {
     margin: 0 0 5px 0;
 }
 
-.documentation h3 {
-    font-size: 18px;
-    font-weight: 400;
-    border-bottom: 1px solid #0C4648;
-    margin: 15px 0 10px;
-}
 .documentation ul {
     list-style: none;
     padding: 0;
@@ -218,6 +218,10 @@ h2 {
     color: #777;
 }
 
+.important-notes article {
+    margin-bottom: 2em;
+}
+
 .upload-demo .upload-demo-wrap,
 .upload-demo .upload-result,
 .upload-demo.ready .upload-msg {

demo/demo.js

@@ -40,23 +40,24 @@ var Demo = (function() {
 			viewport: {
 				width: 150,
 				height: 150,
-				type: 'square'
+				type: 'circle'
 			},
 			boundary: {
 				width: 300,
 				height: 300
 			},
 			// url: 'demo/demo-1.jpg',
-			enforceBoundary: false
+			// enforceBoundary: false
 			// mouseWheelZoom: false
 		});
-		mc.on('update', function (ev, data) {
+		mc.on('update.croppie', function (ev, data) {
 			// console.log('jquery update', ev, data);
 		});
 		$('.js-main-image').on('click', function (ev) {
             mc.croppie('result', {
-            	type: 'rawcanvas',
-            	// size: { width: 300, height: 300 },
+				type: 'rawcanvas',
+				circle: true,
+				// size: { width: 300, height: 300 },
             	format: 'png'
             }).then(function (canvas) {
 				popupResult({
@@ -93,7 +94,11 @@ var Demo = (function() {
 			}
 			basic.croppie('result', {
 				type: 'canvas',
-				size: size
+				size: size,
+				resultSize: {
+					width: 50,
+					height: 50
+				}
 			}).then(function (resp) {
 				popupResult({
 					src: resp
@@ -105,7 +110,7 @@ var Demo = (function() {
 	function demoVanilla() {
 		var vEl = document.getElementById('vanilla-demo'),
 			vanilla = new Croppie(vEl, {
-			viewport: { width: 100, height: 100 },
+			viewport: { width: 200, height: 100 },
 			boundary: { width: 300, height: 300 },
 			showZoomer: false,
             enableOrientation: true
@@ -116,7 +121,7 @@ var Demo = (function() {
             zoom: 0
         });
         vEl.addEventListener('update', function (ev) {
-        	console.log('vanilla update', ev);
+        	// console.log('vanilla update', ev);
         });
 		document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
 			vanilla.result({
@@ -140,7 +145,8 @@ var Demo = (function() {
 			boundary: { width: 300, height: 300 },
 			showZoomer: false,
             enableResize: true,
-            enableOrientation: true
+            enableOrientation: true,
+            mouseWheelZoom: 'ctrl'
 		});
 		resize.bind({
             url: 'demo/demo-2.jpg',
@@ -228,13 +234,13 @@ var Demo = (function() {
 	}
 
 	function bindNavigation () {
-		var $body = $('body');
+		var $html = $('html');
 		$('nav a').on('click', function (ev) {
 			var lnk = $(ev.currentTarget),
 				href = lnk.attr('href'),
 				targetTop = $('a[name=' + href.substring(1) + ']').offset().top;
 
-			$body.animate({ scrollTop: targetTop });
+			$html.animate({ scrollTop: targetTop });
 			ev.preventDefault();
 		});
 	}

index.html

@@ -25,12 +25,10 @@
             <a id="home" name="home"></a>
             <div class="container">
                 <nav>
-                    <ul>
-                        <a href="#options">Usage</a>
-                        <a href="#documentation">Documentation</a>
-                        <a href="#demos">Demos</a>
-                        <a href="#browsers">About</a>
-                    </ul>
+                    <a href="#options">Usage</a>
+                    <a href="#documentation">Documentation</a>
+                    <a href="#demos">Demos</a>
+                    <a href="#browsers">About</a>
                 </nav>
                 <div class="grid">
                     <div class="col-1-2">
@@ -129,6 +127,12 @@ <h3>Options</h3>
                             <span class="default">Default</span>
                             <code class="language-javascript">false</code>
                         </li>
+                        <li id="enableResize">
+                            <strong class="focus">enableResize</strong><em>boolean</em>
+                            <p>Enable or disable support for resizing the viewport area.</p>
+                            <span class="default">Default</span>
+                            <code class="language-javascript">false</code>
+                        </li>
                         <li id="enableZoom">
                             <strong class="focus">enableZoom</strong><em>boolean</em>
                             <p>Enable zooming functionality.  If set to false - scrolling and pinching would not zoom.</p>
@@ -140,8 +144,8 @@ <h3>Options</h3>
                             <span class="default">Default</span><code class="language-javascript">true</code>
                         </li>
                         <li id="mouseWheelZoom">
-                            <strong class="focus">mouseWheelZoom</strong><em>boolean</em>
-                            <p>Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance</p>
+                            <strong class="focus">mouseWheelZoom</strong><em>bool/string</em>
+                            <p>Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. If <code class="language-javascript">'ctrl'</code> is passed mouse wheel will only work while control keyboard is pressed</p>
                             <span class="default">Default</span><code class="language-javascript">true</code>
                         </li>
                         <li id="showZoomer">
@@ -172,13 +176,13 @@ <h3>Methods</h3>
                         </li>
                         <li id="bind">
                             <strong class="focus">bind({ url, points, orientation, zoom })</strong><em>Promise</em>
-                            <p>Bind an image the croppie.  Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
+                            <p>Bind an image to the croppie.  Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
                             <span class="default">Parameters</span>
                             <br />
                             <ul class="parameter-list">
                                 <li><code class="language-javascript">url</code> URL to image</li>
                                 <li><code class="language-javascript">points</code> Array of points that translate into <code class="language-javascript">[topLeftX, topLeftY, bottomRightX, bottomRightY]</code></li>
-                                <code class="language-javascript">zoom</code> Apply zoom after image has been bound 
+                                <li><code class="language-javascript">zoom</code> Apply zoom after image has been bound </li>
                                 <li><code class="language-javascript">orientation</code> Custom orientation, applied after exif orientation (if enabled). Only works with 
                                     <code class="language-javascript">enableOrientation</code> option enabled (see 'Options').
                                     <br />
@@ -192,7 +196,6 @@ <h3>Methods</h3>
                                         <li><code class="language-javascript">6</code> rotated clockwise by 90 degrees</li>
                                         <li><code class="language-javascript">7</code> flipped horizontally, then rotated right by 90 degrees</li>
                                         <li><code class="language-javascript">8</code> rotated counter-clockwise by 90 degrees</li>
-                                    </pre>
                                     </ul>
                                 </li>
                             </ul>
@@ -275,13 +278,19 @@ <h3>Methods</h3>
                                 </li>
                             </ul>
                         </li>
+                    </ul>
                 </section>
                 <section>
                     <h3>Events</h3>
                     <ul>
                         <li id="update">
-                            <strong class="focus">update(croppe)</strong><em>Croppie</em>
+                            <strong class="focus">update(croppie)</strong><em>Croppie</em>
                             <p>Triggered when a drag or zoom occurs</p>
+                            <pre class="language-javascript"><code class="language-javascript">
+$('.my-croppie').on('update.croppie', function(ev, cropData) {});
+// or
+document.getElementById('another-croppie').addEventListener('update', function(ev) { var cropData = ev.detail; });
+                            </code></pre>
                         </li>
                     </ul>
                 </section>
@@ -370,7 +379,8 @@ <h2>Demos</h2>
     boundary: { width: 300, height: 300 },
     showZoomer: false,
     enableResize: true,
-    enableOrientation: true
+    enableOrientation: true,
+    mouseWheelZoom: 'ctrl'
 });
 resize.bind({
     url: 'demo/demo-2.jpg',
@@ -447,6 +457,29 @@ <h2>Demos</h2>
                 </div>
         </section>
 
+        <section class="important-notes">
+            <a id="important-notes" name="important-notes"></a>
+            <div class="section-header"><h2>Important Notes</h2></div>
+            <div class="container">
+                <article>
+                    <a id="cors" name="cors"></a>
+                    <h3>Image Hosting & Cross Origin Errors</h3>
+                    <p>Croppie uses <code class="language-javascript">canvas.drawImage(...)</code> to manipulate images.  Thus, images must obey the CORS policy.  More info can be found <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">here</a>.</p>
+                </article>
+                <article>
+                    <a id="visibility" name="visibility"></a>
+                    <h3>Visibility and Binding</h3>
+                    <p>Croppie is dependent on it's container being visible when the <a href="#bind">bind</a> method is called.  This can be an issue when your croppie component is inside a modal that isn't shown. Let's take the bootstrap modal for example..</p>
+                    <pre class="language-javascript"><code class="language-javascript">
+var myCroppie = $('#my-croppie').croppie(opts);
+$('#my-modal').on('shown.bs.modal', function(){ 
+    myCroppie.croppie('bind', bindOpts);
+});
+                    </code></pre>
+                    <p>If you are having issues getting the correct crop result, and your croppie instance is shown inside of a modal, try taking your croppie out of the modal and see if your issues persist.  If they don't, then make sure that your bind method is called after the modal is done animating.</p>
+                </article>
+            </div>
+        </section>
 
         <section class="browsers">
             <a id="browsers" name="browsers"></a>
@@ -465,7 +498,6 @@ <h2>Browser Support</h2>
                     <li>iOS</li>
                     <li>Android</li>
                 </ul>
-                <p><strong>IE9</strong> may be supported, but it isn't tested.  If you're able to test it and let us know, please do so on Github.</p>
             </div>
         </section>
         <section class="who">