Add reset action to example pages

peyerluk · peyerluk · commit c53fa44599e6 · 2015-03-18T15:08:15.000+01:00
diff --git a/examples/css/page.css b/examples/css/page.css
@@ -7,17 +7,24 @@ body {
   background-color: #222;
 }
 
-.swap-image {
+.crop-actions {
   position: absolute;
   top: 0;
   right: 0;
 
   margin: 10px;
-  padding: 3px 5px;
-  display: inline-block;
+}
+
+.crop-actions a {
+  display: block;
+  min-width: 120px;
+  padding: 4px 5px;
+  margin-bottom: 2px;
 
   border-radius: 5px;
   text-decoration: none;
   color: #000;
   background: rgba(255, 255, 255, 0.5);
+  text-align: center;
 }
+
diff --git a/examples/fit-to-area.html b/examples/fit-to-area.html
@@ -34,7 +34,10 @@
       </div>
     </div>
 
-    <a class="swap-image" href="">swap image</a>
+    <div class="crop-actions">
+      <a class="swap-image" href="">swap image</a>
+      <a class="reset-image" href="">reset image</a>
+    </div>
 
     <!-- jquery -->
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
@@ -73,6 +76,11 @@
           event.preventDefault();
         });
 
+        $('.reset-image').on('click', function(event) {
+          crop.reset();
+          event.preventDefault();
+        });
+
       });
 
     </script>
diff --git a/examples/index.html b/examples/index.html
@@ -36,7 +36,10 @@
       </div>
     </div>
 
-    <a class="swap-image" href="">swap image</a>
+    <div class="crop-actions">
+      <a class="swap-image" href="">swap image</a>
+      <a class="reset-image" href="">reset image</a>
+    </div>
 
     <!-- jquery -->
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
@@ -82,6 +85,11 @@
           event.preventDefault();
         });
 
+        $('.reset-image').on('click', function(event) {
+          crop.reset();
+          event.preventDefault();
+        });
+
         crop.on('ready', function() {
           console.log('ready event fired');
         });
