From 1d2fac45b3dac7657f11c900292cba390168f8d8 Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Fri, 19 Dec 2014 10:57:06 -0500
Subject: [PATCH 1/7] Initial hookup of image cropping js

---
 .../paraneue_dosomething/js/app.js            |  1 -
 .../js/campaign/ImageCrop.js                  | 45 ++++++++++--------
 .../js/campaign/ImageUploadBeta.js            | 32 +++++++++++++
 .../scss/content/_modal-crop.scss             | 47 +++++++++++++++++++
 .../scss/content/_modal-reportback.scss       | 46 ------------------
 5 files changed, 105 insertions(+), 66 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/app.js b/lib/themes/dosomething/paraneue_dosomething/js/app.js
index fbf5bde14..ae42730ea 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/app.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/app.js
@@ -20,7 +20,6 @@ define("app", function (require) {
   require("campaign/tips");
   require("campaign/tabs");
   require("campaign/ImageUploader");
-  require("campaign/ImageCrop");
   require("validation/auth");
   require("validation/reportback");
   require("validation/address");
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
index ff2548670..70d591fed 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
@@ -99,7 +99,7 @@ define(function(require) {
     var origImageWidth = origImage.width;
 
     // Get the preview image.
-    var $previewImage = $("#modal-report-back").find(".preview");
+    var $previewImage = $("#modal--crop").find(".preview");
 
     // Make sure there is a preview image on the page before proceeding.
     if (!$previewImage.length) {
@@ -111,6 +111,9 @@ define(function(require) {
     $cropContainer = $(".image-crop-container");
     previewImageWidth = $previewImage.width();
     previewImageHeight = $previewImage.height();
+    console.log($previewImage);
+    console.log("previewImageWidth: " + $previewImage.width());
+    console.log("cropbox width: " + ($previewImage.width() / 2));
 
     // Calculate the initial dimensions of the cropbox. Add the cropbox to the page.
     $cropBox.width(previewImageHeight / 2);
@@ -205,23 +208,27 @@ define(function(require) {
     });
   };
 
-  $(document).ready(function() {
-    // Make sure cropping is enabled.
-    var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
-    if (cropEnabled) {
-      $(".js-image-upload").on("change", function(event) {
-        event.preventDefault();
-
-        var fileReader = new FileReader();
-
-        fileReader.onload = function() {
-          var origImage = new Image();
-          origImage.src = fileReader.result;
-          dsCropperInit(origImage);
-        };
+  return {
+    dsCropperInit: dsCropperInit,
+  };
 
-        fileReader.readAsDataURL(this.files[0]);
-      });
-    }
-  });
+  // $(document).ready(function() {
+  //   // Make sure cropping is enabled.
+  //   var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
+  //   if (cropEnabled) {
+  //     $(".js-image-upload-beta").on("change", function(event) {
+  //       event.preventDefault();
+
+  //       var fileReader = new FileReader();
+
+  //       fileReader.onload = function() {
+  //         var origImage = new Image();
+  //         origImage.src = fileReader.result;
+  //         dsCropperInit(origImage);
+  //       };
+
+  //       fileReader.readAsDataURL(this.files[0]);
+  //     });
+  //   }
+  // });
 });
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
index cead89f72..8a1680c6a 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -5,6 +5,7 @@ define(function(require) {
 
   var $      = require("jquery");
   var Modal  = require("neue/modal");
+  var ImageCrop = require("campaign/ImageCrop");
 
   /**
    * Handles the modal interface for image upload buttons.
@@ -61,6 +62,19 @@ define(function(require) {
           $preview.attr("src", this.result);
         };
       }
+
+      var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
+      if (cropEnabled) {
+        var fileReader = new FileReader();
+
+        fileReader.onload = function() {
+          var origImage = new Image();
+          origImage.src = fileReader.result;
+          ImageCrop.dsCropperInit(origImage);
+        };
+
+        fileReader.readAsDataURL(this.files[0]);
+      }
     });
 
     /**
@@ -97,3 +111,21 @@ define(function(require) {
   return ImageUploadBeta;
 
 });
+
+    // // Make sure cropping is enabled.
+    // var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
+    // if (cropEnabled) {
+    //   $(".js-image-upload-beta").on("change", function(event) {
+    //     event.preventDefault();
+
+    //     var fileReader = new FileReader();
+
+    //     fileReader.onload = function() {
+    //       var origImage = new Image();
+    //       origImage.src = fileReader.result;
+    //       dsCropperInit(origImage);
+    //     };
+
+    //     fileReader.readAsDataURL(this.files[0]);
+    //   });
+    // }
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
index 4c5d97d9b..26723bf09 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
@@ -55,4 +55,51 @@
       max-width: 100%;
     }
   }
+
+  // Styles for cropping.
+  .image-crop-container {
+    position: relative;
+
+    .crop-box {
+      position: absolute;
+      z-index: 1;
+      top: 10px;
+      left: 10px;
+      border: 1px dashed $blue;
+      background-color: rgba(255, 255, 255, 0.3);
+
+      &:hover {
+        cursor: move;
+      }
+    }
+
+    .resize-handle-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .resize-handle {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 40px;
+      height: 40px;
+
+      &:hover {
+        cursor: se-resize;
+      }
+    }
+
+    .resize-triangle {
+      width: 0;
+      height: 0;
+      top: 35px;
+      left: 35px;
+      position: absolute;
+      background: $blue;
+      width: 10px;
+      height: 10px;
+    }
+  }
 }
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
index daadbfb5a..a34efe85a 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
@@ -21,52 +21,6 @@
     }
   }
 
-  .image-crop-container {
-    position: relative;
-
-    .crop-box {
-      position: absolute;
-      z-index: 1;
-      top: 10px;
-      left: 10px;
-      border: 1px dashed $blue;
-      background-color: rgba(255, 255, 255, 0.3);
-
-      &:hover {
-        cursor: move;
-      }
-    }
-
-    .resize-handle-wrapper {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    .resize-handle {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 40px;
-      height: 40px;
-
-      &:hover {
-        cursor: se-resize;
-      }
-    }
-
-    .resize-triangle {
-      width: 0;
-      height: 0;
-      top: 35px;
-      left: 35px;
-      position: absolute;
-      background: $blue;
-      width: 10px;
-      height: 10px;
-    }
-  }
-
   .image-upload-container {
     position: relative;
     width: 300px;

From 64855cae6778006321517b276cb5474508c16027 Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Fri, 19 Dec 2014 11:52:40 -0500
Subject: [PATCH 2/7] separated preview and crop functionality into their own
 functions

---
 .../js/campaign/ImageUploadBeta.js            | 93 ++++++++++---------
 1 file changed, 49 insertions(+), 44 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
index 8a1680c6a..0a459d388 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -5,7 +5,6 @@ define(function(require) {
 
   var $      = require("jquery");
   var Modal  = require("neue/modal");
-  var ImageCrop = require("campaign/ImageCrop");
 
   /**
    * Handles the modal interface for image upload buttons.
@@ -21,6 +20,7 @@ define(function(require) {
     this.$imageForm      = this.$cropModal.find("#dosomething-reportback-image-form");
     this.$imagePreview   = this.$cropModal.find(".image-preview");
     this.imageValues     = {};
+    this.cropEnabled     = (typeof Drupal.settings.dsReportback.cropEnabled !== "undefined") ? Drupal.settings.dsReportback.cropEnabled : false;
 
     this.init();
   };
@@ -42,38 +42,19 @@ define(function(require) {
         return;
       }
 
+      // Open the modal.
       Modal.open(_this.$cropModal,
         {
           animated: false,
         }
       );
 
-      // @TODO - move image preview logic into it's own function
-      // so we can use it other places like showing the previewed crop image in the
-      // reportback form.
-      var $preview = $("<img class='preview' src=''>");
-      _this.$imagePreview.html($preview);
+      // Add the preview image to the modal
+      _this.previewImage(files, _this.$imageWrapper);
 
-      if (/^image/.test(files[0].type)) {
-        var reader = new FileReader();
-        reader.readAsDataURL(files[0]);
-
-        reader.onloadend = function() {
-          $preview.attr("src", this.result);
-        };
-      }
-
-      var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
-      if (cropEnabled) {
-        var fileReader = new FileReader();
-
-        fileReader.onload = function() {
-          var origImage = new Image();
-          origImage.src = fileReader.result;
-          ImageCrop.dsCropperInit(origImage);
-        };
-
-        fileReader.readAsDataURL(this.files[0]);
+      // Check if cropping is enabled, and then intiate.
+      if (_this.cropEnabled) {
+        _this.cropInit(files);
       }
     });
 
@@ -88,6 +69,48 @@ define(function(require) {
     });
   };
 
+  /**
+   * Return an object containing the information gathered in the modal form.
+   * Creates a preview image of a file and adds it to a container.
+   * If cropping is enabled, it initiates the cropping script.
+   *
+   * @param {jQuery} files         An object representing a file.
+   * @param {jQuery} $imageWrapper The DOM element to put the preview image in.
+   */
+  ImageUploadBeta.prototype.previewImage = function(files, $imageWrapper) {
+    var $imgPreview = $("<img class='preview' src=''>");
+    $imageWrapper.html( $imgPreview );
+
+    if (/^image/.test( files[0].type)) {
+      var reader = new FileReader();
+      reader.readAsDataURL(files[0]);
+
+      reader.onloadend = function() {
+        $imgPreview.attr("src", this.result);
+      };
+    }
+  };
+
+  /**
+   * Initiates cropping on a file.
+   *
+   * @param {jQuery} files         An object representing a file.
+   */
+  ImageUploadBeta.prototype.cropInit = function(files) {
+    var ImageCrop = require("campaign/ImageCrop");
+
+    if (/^image/.test( files[0].type)) {
+      var reader = new FileReader();
+      reader.readAsDataURL(files[0]);
+
+      reader.onloadend = function() {
+        var origImage = new Image();
+        origImage.src = this.result;
+        ImageCrop.dsCropperInit(origImage);
+      };
+    }
+  };
+
   /**
    * Return an object containing the information gathered in the modal form.
    * Should only be used after the form has been submitted and the modal has closed.
@@ -111,21 +134,3 @@ define(function(require) {
   return ImageUploadBeta;
 
 });
-
-    // // Make sure cropping is enabled.
-    // var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
-    // if (cropEnabled) {
-    //   $(".js-image-upload-beta").on("change", function(event) {
-    //     event.preventDefault();
-
-    //     var fileReader = new FileReader();
-
-    //     fileReader.onload = function() {
-    //       var origImage = new Image();
-    //       origImage.src = fileReader.result;
-    //       dsCropperInit(origImage);
-    //     };
-
-    //     fileReader.readAsDataURL(this.files[0]);
-    //   });
-    // }

From ba048acd151f7134bcc06252e1d3229afe605174 Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Mon, 22 Dec 2014 10:56:17 -0500
Subject: [PATCH 3/7] Change crop container to display inline so boundaries are
 correct

---
 .../js/campaign/ImageCrop.js                  | 27 ++-----------------
 .../js/campaign/ImageUploadBeta.js            | 14 +++++-----
 .../scss/content/_modal-crop.scss             |  1 +
 3 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
index 70d591fed..7870b1cc9 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
@@ -109,11 +109,8 @@ define(function(require) {
     // Wrap the image in a container and get it's dimensions to use as a boundary.
     $previewImage.wrap($("<div class='image-crop-container'></div>"));
     $cropContainer = $(".image-crop-container");
-    previewImageWidth = $previewImage.width();
-    previewImageHeight = $previewImage.height();
-    console.log($previewImage);
-    console.log("previewImageWidth: " + $previewImage.width());
-    console.log("cropbox width: " + ($previewImage.width() / 2));
+    previewImageWidth = $cropContainer.width();
+    previewImageHeight = $cropContainer.height();
 
     // Calculate the initial dimensions of the cropbox. Add the cropbox to the page.
     $cropBox.width(previewImageHeight / 2);
@@ -211,24 +208,4 @@ define(function(require) {
   return {
     dsCropperInit: dsCropperInit,
   };
-
-  // $(document).ready(function() {
-  //   // Make sure cropping is enabled.
-  //   var cropEnabled = Drupal.settings.dsReportback.cropEnabled;
-  //   if (cropEnabled) {
-  //     $(".js-image-upload-beta").on("change", function(event) {
-  //       event.preventDefault();
-
-  //       var fileReader = new FileReader();
-
-  //       fileReader.onload = function() {
-  //         var origImage = new Image();
-  //         origImage.src = fileReader.result;
-  //         dsCropperInit(origImage);
-  //       };
-
-  //       fileReader.readAsDataURL(this.files[0]);
-  //     });
-  //   }
-  // });
 });
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
index 0a459d388..b3791f0fc 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -50,7 +50,7 @@ define(function(require) {
       );
 
       // Add the preview image to the modal
-      _this.previewImage(files, _this.$imageWrapper);
+      _this.previewImage(files, _this.$imagePreview);
 
       // Check if cropping is enabled, and then intiate.
       if (_this.cropEnabled) {
@@ -74,19 +74,19 @@ define(function(require) {
    * Creates a preview image of a file and adds it to a container.
    * If cropping is enabled, it initiates the cropping script.
    *
-   * @param {jQuery} files         An object representing a file.
-   * @param {jQuery} $imageWrapper The DOM element to put the preview image in.
+   * @param {jQuery} files           An object representing a file.
+   * @param {jQuery} $imageContainer The DOM element to put the preview image in.
    */
-  ImageUploadBeta.prototype.previewImage = function(files, $imageWrapper) {
-    var $imgPreview = $("<img class='preview' src=''>");
-    $imageWrapper.html( $imgPreview );
+  ImageUploadBeta.prototype.previewImage = function(files, $imageContainer) {
+    var $preview = $("<img class='preview' src=''>");
+    $imageContainer.html( $preview );
 
     if (/^image/.test( files[0].type)) {
       var reader = new FileReader();
       reader.readAsDataURL(files[0]);
 
       reader.onloadend = function() {
-        $imgPreview.attr("src", this.result);
+        $preview.attr("src", this.result);
       };
     }
   };
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
index 26723bf09..06eedc46d 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
@@ -59,6 +59,7 @@
   // Styles for cropping.
   .image-crop-container {
     position: relative;
+    display: inline-block;
 
     .crop-box {
       position: absolute;

From 9691afbf9dbf15d3010521eb8e1a3f0afc86df8c Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Mon, 22 Dec 2014 11:22:04 -0500
Subject: [PATCH 4/7] Add function to destory cropping

---
 .../paraneue_dosomething/js/campaign/ImageCrop.js   | 13 ++++++++++++-
 .../js/campaign/ImageUploadBeta.js                  |  4 +++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
index 7870b1cc9..28593fdd3 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
@@ -90,9 +90,19 @@ define(function(require) {
     });
   };
 
+  /**
+  * Destroys the cropbox. Allows for resetting the cropping i.e the original image.
+  */
+  var dsCropperDestroy = function() {
+    if ($cropBox.length) {
+      $cropBox.remove();
+    }
+  };
+
   /**
    * Initiates cropping js.
-   * @params - the original image to crop.
+   *
+   * @param {jQuery} origImage  Image object to crop
    */
   var dsCropperInit = function(origImage) {
     // Get the original width of the image.
@@ -207,5 +217,6 @@ define(function(require) {
 
   return {
     dsCropperInit: dsCropperInit,
+    dsCropperDestroy: dsCropperDestroy,
   };
 });
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
index b3791f0fc..7d63b4d4c 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -94,7 +94,7 @@ define(function(require) {
   /**
    * Initiates cropping on a file.
    *
-   * @param {jQuery} files         An object representing a file.
+   * @param {jQuery} files  An object representing a file.
    */
   ImageUploadBeta.prototype.cropInit = function(files) {
     var ImageCrop = require("campaign/ImageCrop");
@@ -106,6 +106,8 @@ define(function(require) {
       reader.onloadend = function() {
         var origImage = new Image();
         origImage.src = this.result;
+        // Remove any cropping already on the page before initiating.
+        ImageCrop.dsCropperDestroy();
         ImageCrop.dsCropperInit(origImage);
       };
     }

From 9efb6a35cb304b94d414b0de33442d81e4cfc227 Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Mon, 22 Dec 2014 14:35:52 -0500
Subject: [PATCH 5/7] Image crop js populate form with crop values

---
 .../js/campaign/ImageCrop.js                  | 25 +++++++++++--------
 .../js/campaign/ImageUploadBeta.js            | 16 +++---------
 .../js/campaign/Reportback.js                 | 15 +++--------
 .../templates/campaign/node--campaign.tpl.php |  1 -
 4 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
index 28593fdd3..64ff84e47 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
@@ -21,7 +21,6 @@ define(function(require) {
   var resizeClickPositionY = 0;
   var $resizeHandle = $("<div class='resize-handle-wrapper'><div class='resize-handle'><div class='resize-triangle'></div></div></div>");
   var $cropBox = $("<div>").addClass("crop-box").append($resizeHandle);
-  var finalCrop = {};
 
   /**
    * Returns the coordinates of a touch or mouse event.
@@ -91,7 +90,8 @@ define(function(require) {
   };
 
   /**
-  * Destroys the cropbox. Allows for resetting the cropping i.e the original image.
+  * Destroys the cropbox.
+  * Allows for resetting the cropbox position after the image has changed.
   */
   var dsCropperDestroy = function() {
     if ($cropBox.length) {
@@ -190,23 +190,28 @@ define(function(require) {
      *  When the user stops moving the mouse or touching the screen, turn of the drag and resizing events.
      *  Get the final position and size of the crop and populate hidden form elements with them.
      */
-    $cropContainer.on("touchend mouseup", function(){
+    $cropContainer.on("touchend mouseup", function() {
+      dragState = false;
+      resizeState = false;
+
       // Calulate how much the image has been resized.
       var resizeAmount = origImageWidth / $previewImage.width();
+      var $form = $("#dosomething-reportback-form");
+
       // Get the hidden form elements.
-      var $cropX = $("#dosomething-reportback-form").find("input[name='crop_x']");
-      var $cropY = $("#dosomething-reportback-form").find("input[name='crop_y']");
-      var $cropWidth = $("#dosomething-reportback-form").find("input[name='crop_width']");
-      var $cropHeight = $("#dosomething-reportback-form").find("input[name='crop_height']");
-      dragState = false;
-      resizeState = false;
+      var $cropX = $form.find("input[name='crop_x']");
+      var $cropY = $form.find("input[name='crop_y']");
+      var $cropWidth = $form.find("input[name='crop_width']");
+      var $cropHeight = $form.find("input[name='crop_height']");
+
       // Calculate cropping information, taking into account how much the image has been scaled.
-      finalCrop = {
+      var finalCrop = {
         top:    Math.round($cropBox.offset().top - $previewImage.offset().top) * resizeAmount,
         left:   Math.round($cropBox.offset().left - $previewImage.offset().left) * resizeAmount,
         width:  $cropBox.width() * resizeAmount,
         height: $cropBox.height() * resizeAmount,
       };
+
       // populate fields.
       $cropX.val(finalCrop.left);
       $cropY.val(finalCrop.top);
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
index 7d63b4d4c..322dad825 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -114,23 +114,13 @@ define(function(require) {
   };
 
   /**
-   * Return an object containing the information gathered in the modal form.
+   * Returns the value of the caption field.
    * Should only be used after the form has been submitted and the modal has closed.
    *
-   * Includes:
-   * - Caption
-   * - @TODO: x, y, width, height for cropping.
-   *
    * @return {jQuery} An object of form values.
    */
-  ImageUploadBeta.prototype.getImageValues = function() {
-    var caption = this.$imageForm.find("#caption").val();
-
-    this.imageValues = {
-      caption: (caption) ? caption : null,
-    };
-
-    return this.imageValues;
+  ImageUploadBeta.prototype.getImageCaption = function() {
+    return this.$imageForm.find("#caption").val();
   };
 
   return ImageUploadBeta;
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/Reportback.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/Reportback.js
index 5815cb2e6..9a8649c26 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/Reportback.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/Reportback.js
@@ -29,9 +29,10 @@ define(function(require) {
 
       var _this = this;
 
-      // Grab the image caption and crop information from the modal only when the user is done with it.
+      // Grab the image caption from the modal only when the user is done with it.
       Events.subscribe("Modal:Close", function() {
-        _this.setImageOptions(imageUpload.getImageValues());
+        var $captionField = _this.$reportbackForm.find("input[name='caption']");
+        $captionField.val(imageUpload.getImageCaption());
       });
     },
 
@@ -54,16 +55,6 @@ define(function(require) {
       // });
     },
 
-    /**
-    * Populates the main reportback form with values from the image upload modal.
-    *
-    * @param  {jQuery} imageOptions  An object containing vaules from the modal.
-    */
-    setImageOptions: function(imageOptions) {
-      var $captionField = this.$reportbackForm.find("input[name='caption']");
-      $captionField.val(imageOptions.caption);
-    },
-
   };
 
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
index f40b558cb..9b6eeeae1 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
@@ -366,7 +366,6 @@
                   <!-- This is a purely frontend form that will grab crop options and a caption
                   And then when the user submits the form, it will populate the drupal form with these values. -->
                   <form action="#" method="post" id="dosomething-reportback-image-form" accept-charset="UTF-8">
-                    <!-- Hidden form elements to go here -->
                     <label for="caption">Caption</label>
                     <input placeholder="Write something..." type="text" id="caption" name="caption" value="" size="60" maxlength="128">
                     <input type="submit" value="done" class="btn secondary" />

From 888faab448e61f1b46cca0bb28aa179df442030d Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Mon, 22 Dec 2014 15:15:15 -0500
Subject: [PATCH 6/7] pass the form to populate with cropping info to init
 function

---
 .../paraneue_dosomething/js/campaign/ImageCrop.js | 15 +++++++--------
 .../js/campaign/ImageUploadBeta.js                |  4 +++-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
index 64ff84e47..663237ae9 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
@@ -104,7 +104,7 @@ define(function(require) {
    *
    * @param {jQuery} origImage  Image object to crop
    */
-  var dsCropperInit = function(origImage) {
+  var dsCropperInit = function(origImage, $form) {
     // Get the original width of the image.
     var origImageWidth = origImage.width;
 
@@ -116,6 +116,12 @@ define(function(require) {
       return;
     }
 
+    // Get the hidden form elements.
+    var $cropX = $form.find("input[name='crop_x']");
+    var $cropY = $form.find("input[name='crop_y']");
+    var $cropWidth = $form.find("input[name='crop_width']");
+    var $cropHeight = $form.find("input[name='crop_height']");
+
     // Wrap the image in a container and get it's dimensions to use as a boundary.
     $previewImage.wrap($("<div class='image-crop-container'></div>"));
     $cropContainer = $(".image-crop-container");
@@ -196,13 +202,6 @@ define(function(require) {
 
       // Calulate how much the image has been resized.
       var resizeAmount = origImageWidth / $previewImage.width();
-      var $form = $("#dosomething-reportback-form");
-
-      // Get the hidden form elements.
-      var $cropX = $form.find("input[name='crop_x']");
-      var $cropY = $form.find("input[name='crop_y']");
-      var $cropWidth = $form.find("input[name='crop_width']");
-      var $cropHeight = $form.find("input[name='crop_height']");
 
       // Calculate cropping information, taking into account how much the image has been scaled.
       var finalCrop = {
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
index 322dad825..402d79a23 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -17,6 +17,7 @@ define(function(require) {
   var ImageUploadBeta = function($button) {
     this.$uploadButton   = $button;
     this.$cropModal      = $("#modal--crop");
+    this.$reportbackForm = $("#dosomething-reportback-form");
     this.$imageForm      = this.$cropModal.find("#dosomething-reportback-image-form");
     this.$imagePreview   = this.$cropModal.find(".image-preview");
     this.imageValues     = {};
@@ -98,6 +99,7 @@ define(function(require) {
    */
   ImageUploadBeta.prototype.cropInit = function(files) {
     var ImageCrop = require("campaign/ImageCrop");
+    var _this = this;
 
     if (/^image/.test( files[0].type)) {
       var reader = new FileReader();
@@ -108,7 +110,7 @@ define(function(require) {
         origImage.src = this.result;
         // Remove any cropping already on the page before initiating.
         ImageCrop.dsCropperDestroy();
-        ImageCrop.dsCropperInit(origImage);
+        ImageCrop.dsCropperInit(origImage, _this.$reportbackForm);
       };
     }
   };

From 8b3d134c040eda5be1147250ccd4440f66deab29 Mon Sep 17 00:00:00 2001
From: Shae Smith <sbsmith86@gmail.com>
Date: Mon, 22 Dec 2014 16:41:47 -0500
Subject: [PATCH 7/7] More semantic class names

---
 .../js/campaign/ImageCrop.js                  |  8 +++---
 .../scss/content/_modal-crop.scss             | 28 +++++++------------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
index 663237ae9..04ae87a42 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
@@ -19,8 +19,8 @@ define(function(require) {
   var minThreshold;
   var resizeClickPositionX = 0;
   var resizeClickPositionY = 0;
-  var $resizeHandle = $("<div class='resize-handle-wrapper'><div class='resize-handle'><div class='resize-triangle'></div></div></div>");
-  var $cropBox = $("<div>").addClass("crop-box").append($resizeHandle);
+  var $resizeHandle = $("<div class='resize-handle'><div class='square'></div></div>");
+  var $cropBox = $("<div>").addClass("cropbox").append($resizeHandle);
 
   /**
    * Returns the coordinates of a touch or mouse event.
@@ -123,8 +123,8 @@ define(function(require) {
     var $cropHeight = $form.find("input[name='crop_height']");
 
     // Wrap the image in a container and get it's dimensions to use as a boundary.
-    $previewImage.wrap($("<div class='image-crop-container'></div>"));
-    $cropContainer = $(".image-crop-container");
+    $previewImage.wrap($("<div class='crop-bounding-box'></div>"));
+    $cropContainer = $(".crop-bounding-box");
     previewImageWidth = $cropContainer.width();
     previewImageHeight = $cropContainer.height();
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
index 06eedc46d..a5fd9cd64 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
@@ -57,11 +57,11 @@
   }
 
   // Styles for cropping.
-  .image-crop-container {
+  .crop-bounding-box {
     position: relative;
     display: inline-block;
 
-    .crop-box {
+    .cropbox {
       position: absolute;
       z-index: 1;
       top: 10px;
@@ -74,12 +74,6 @@
       }
     }
 
-    .resize-handle-wrapper {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
     .resize-handle {
       position: absolute;
       right: 0;
@@ -90,17 +84,15 @@
       &:hover {
         cursor: se-resize;
       }
-    }
 
-    .resize-triangle {
-      width: 0;
-      height: 0;
-      top: 35px;
-      left: 35px;
-      position: absolute;
-      background: $blue;
-      width: 10px;
-      height: 10px;
+      .square {
+        top: 35px;
+        left: 35px;
+        position: absolute;
+        background: $blue;
+        width: 10px;
+        height: 10px;
+      }
     }
   }
 }