Merge pull request #4003 from sbsmith86/reportback-error-display

Reportback error display

Author: sbsmith86

lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js

@@ -17,16 +17,17 @@ define(function(require) {
    * @param {jQuery} $button  The file upload button
    */
   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.$imageCaption   = this.$imageForm.find("#modal-caption");
-    this.$cropButton     = this.$imageForm.find(".button");
-    this.$imagePreview   = this.$cropModal.find(".image-preview");
-    this.imageValues     = {};
-    this.cropEnabled     = (typeof Drupal.settings.dsReportback.cropEnabled !== "undefined") ? Drupal.settings.dsReportback.cropEnabled : false;
-    this.readyToSave     = false;
+    this.$uploadButton          = $button;
+    this.$cropModal             = $("#modal--crop");
+    this.$reportbackForm        = $("#dosomething-reportback-form");
+    this.$imageForm             = this.$cropModal.find("#dosomething-reportback-image-form");
+    this.$imageCaption          = this.$imageForm.find("#modal-caption");
+    this.$cropButton            = this.$imageForm.find(".button");
+    this.$imagePreview          = this.$cropModal.find(".image-preview");
+    this.$reportbackSubmissions = $(".reportback__submissions");
+    this.imageValues            = {};
+    this.cropEnabled            = (typeof Drupal.settings.dsReportback.cropEnabled !== "undefined") ? Drupal.settings.dsReportback.cropEnabled : false;
+    this.readyToSave            = false;
 
     this.init();
   };
@@ -56,91 +57,15 @@ define(function(require) {
           var blob = _this.getStrippedBlob(this.result);
           var urlCreator = window.URL || window.webkitURL;
           var imageUrl = urlCreator.createObjectURL(blob);
-          var image = new Image();
-
-          image.src = imageUrl;
-          image.onload = function() {
-            var image = this;
-            var isValid = _this.validImage(this);
-            var $errorMsg = _this.$uploadButton.parent().siblings(".error");
-
-            if(isValid) {
-              // Remove any previously added error message.
-              if ($errorMsg.length) {
-                $errorMsg.remove();
-              }
-
-              // Open the modal.
-              _this.openModal();
-              
-              // Add the preview image to the modal
-              _this.previewImage(image, _this.$imagePreview);
-
-              //Unbind before rebind so it doesnt fire twice.
-              _this.$cropButton.off("click");
-
-              // When the user submits the modal form, send crop values to the form.
-              _this.$cropButton.on('click', function(event) {
-                event.preventDefault();
-
-                // Validate the caption field and make sure we are good to proceed.
-                _this.validateCaption(_this.engageImageCrop, image);
-              });
-            }
-            // Show user an error if they upload an image that is too small.
-            else {
-              if (!$errorMsg.length) {
-                var $error = $("<div class='messages error'>Please upload a larger photo. Min. size is 480px by 480px.</div>");
-                $error.insertAfter(_this.$uploadButton.parent());
-              }
-            }
-          };
+          _this.loadImage(imageUrl);
         };
       }
       else {
         fr.readAsDataURL(files[0]);
 
         fr.onloadend = function() {
           var result = this.result;
-          var image = new Image();
-          image.src = result;
-
-          image.onload = function() {
-            var image = this;
-            var isValid = _this.validImage(this);
-            var $errorMsg = _this.$uploadButton.parent().siblings(".error");
-
-            if(isValid) {
-              // Remove any previously added error message.
-              if ($errorMsg.length) {
-                $errorMsg.remove();
-              }
-
-              // Open the modal.
-              _this.openModal();
-
-              // Add the preview image to the modal
-              _this.previewImage(image, _this.$imagePreview);
-
-              //Unbind before rebind so it doesnt fire twice.
-              _this.$cropButton.off("click");
-
-              // When the user submits the modal form, send crop values to the form.
-              _this.$cropButton.on('click', function(event) {
-                event.preventDefault();
-
-                // Validate the caption field and make sure we are good to proceed.
-                _this.validateCaption(_this.engageImageCrop, image);
-              });
-            }
-            // Show user an error if they upload an image that is too small.
-            else {
-              if (!$errorMsg.length) {
-                var $error = $("<div class='messages error'>Please upload a larger photo. Min. size is 480px by 480px.</div>");
-                $error.insertAfter(_this.$uploadButton.parent());
-              }
-            }
-          };
+          _this.loadImage(result);
         };
       }
     });
@@ -156,7 +81,6 @@ define(function(require) {
     });
   };
 
-
   /**
    * Validates the caption field in the modal.
    * @param  {Function} callback  If validation passes, then lets rock on!
@@ -172,7 +96,7 @@ define(function(require) {
         callback(_this, image);
       }
     });
-  }
+  };
 
 
   /**
@@ -200,7 +124,7 @@ define(function(require) {
 
     // Close the modal.
     Modal.close();
-  }
+  };
 
 
   /**
@@ -236,7 +160,7 @@ define(function(require) {
   ImageUploadBeta.prototype.createEditButton = function() {
     var _this = this;
 
-    if (!$(".reportback__submissions").find(".button--edit").length) {
+    if (!this.$reportbackSubmissions.find(".button--edit").length) {
       var $editButton = $("<span class='button button--edit -tertiary'>edit photo</span>");
       this.$uploadButton.parent().hide().before($editButton);
 
@@ -333,6 +257,48 @@ define(function(require) {
     });
   };
 
+  ImageUploadBeta.prototype.loadImage = function(imageUrl) {
+    var _this = this;
+    var image = new Image();
+    image.src = imageUrl;
+
+    image.onload = function() {
+      var isValid = _this.validImage(this);
+      var $errorMsg = _this.$uploadButton.parent().siblings(".error");
+
+      if(isValid) {
+        // Remove any previously added error message.
+        if ($errorMsg.length) {
+          $errorMsg.remove();
+        }
+
+        // Open the modal.
+        _this.openModal();
+
+        // Add the preview image to the modal
+        _this.previewImage(image, _this.$imagePreview);
+
+        //Unbind before rebind so it doesnt fire twice.
+        _this.$cropButton.off("click");
+
+        // When the user submits the modal form, send crop values to the form.
+        _this.$cropButton.on("click", function(event) {
+          event.preventDefault();
+
+          // Validate the caption field and make sure we are good to proceed.
+          _this.validateCaption(_this.engageImageCrop, image);
+        });
+      }
+      // Show user an error if they upload an image that is too small.
+      else {
+        if (!$errorMsg.length) {
+          var $error = $("<div class='messages error'>Please upload a larger photo. Min. size is 480px by 480px.</div>");
+          _this.$reportbackSubmissions.prepend($error);
+        }
+      }
+    }
+  };
+
   /**
    * This function strips out EXIF data from a file and recreates a
    * FileReader Blob that we use to create the image object that is used
@@ -407,7 +373,7 @@ define(function(require) {
     // robust fix for this that maybe only runs through the EXIF 
     // stuff if it is a jpeg in the first place.
     else {
-      generatedBlob = new Blob([dataView], {type: 'image/png'});
+      generatedBlob = new Blob([dataView], {type: "image/png"});
     }
     return generatedBlob;
   };