Skip to content
This repository was archived by the owner on Oct 29, 2020. It is now read-only.

Reportback error display #4003

Merged
sbsmith86 merged 2 commits into from
Feb 17, 2015
Merged

Reportback error display #4003

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7dc56f2
moving image loading logic into it's own function
Feb 17, 2015
206c008
Moving error message above preview image
Feb 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 59 additions & 93 deletions lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
Expand Down Expand Up @@ -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);
};
}
});
Expand All @@ -156,7 +81,6 @@ define(function(require) {
});
};


/**
* Validates the caption field in the modal.
* @param {Function} callback If validation passes, then lets rock on!
Expand All @@ -172,7 +96,7 @@ define(function(require) {
callback(_this, image);
}
});
}
};


/**
Expand Down Expand Up @@ -200,7 +124,7 @@ define(function(require) {

// Close the modal.
Modal.close();
}
};


/**
Expand Down Expand Up @@ -235,7 +159,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);

Expand Down Expand Up @@ -332,6 +256,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
Expand Down Expand Up @@ -406,7 +372,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;
};
Expand Down