");
+ var $cropBox = $("
").addClass("cropbox").append($resizeHandle);
/**
* Returns the coordinates of a touch or mouse event.
@@ -90,27 +89,44 @@ define(function(require) {
});
};
+ /**
+ * Destroys the cropbox.
+ * Allows for resetting the cropbox position after the image has changed.
+ */
+ 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) {
+ var dsCropperInit = function(origImage, $form) {
// Get the original width of the image.
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) {
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($(""));
- $cropContainer = $(".image-crop-container");
- previewImageWidth = $previewImage.width();
- previewImageHeight = $previewImage.height();
+ $previewImage.wrap($(""));
+ $cropContainer = $(".crop-bounding-box");
+ previewImageWidth = $cropContainer.width();
+ previewImageHeight = $cropContainer.height();
// Calculate the initial dimensions of the cropbox. Add the cropbox to the page.
$cropBox.width(previewImageHeight / 2);
@@ -180,23 +196,21 @@ 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(){
- // Calulate how much the image has been resized.
- var resizeAmount = origImageWidth / $previewImage.width();
- // 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']");
+ $cropContainer.on("touchend mouseup", function() {
dragState = false;
resizeState = false;
+
+ // Calulate how much the image has been resized.
+ var resizeAmount = origImageWidth / $previewImage.width();
+
// 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);
@@ -205,23 +219,8 @@ 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);
- };
-
- fileReader.readAsDataURL(this.files[0]);
- });
- }
- });
+ 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 cead89f72..402d79a23 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
@@ -17,9 +17,11 @@ 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 = {};
+ this.cropEnabled = (typeof Drupal.settings.dsReportback.cropEnabled !== "undefined") ? Drupal.settings.dsReportback.cropEnabled : false;
this.init();
};
@@ -41,25 +43,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 = $("![]()
");
- _this.$imagePreview.html($preview);
+ // Add the preview image to the modal
+ _this.previewImage(files, _this.$imagePreview);
- if (/^image/.test(files[0].type)) {
- var reader = new FileReader();
- reader.readAsDataURL(files[0]);
-
- reader.onloadend = function() {
- $preview.attr("src", this.result);
- };
+ // Check if cropping is enabled, and then intiate.
+ if (_this.cropEnabled) {
+ _this.cropInit(files);
}
});
@@ -76,22 +72,57 @@ define(function(require) {
/**
* 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.
+ * Creates a preview image of a file and adds it to a container.
+ * If cropping is enabled, it initiates the cropping script.
*
- * Includes:
- * - Caption
- * - @TODO: x, y, width, height for cropping.
+ * @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, $imageContainer) {
+ var $preview = $("![]()
");
+ $imageContainer.html( $preview );
+
+ if (/^image/.test( files[0].type)) {
+ var reader = new FileReader();
+ reader.readAsDataURL(files[0]);
+
+ reader.onloadend = function() {
+ $preview.attr("src", this.result);
+ };
+ }
+ };
+
+ /**
+ * Initiates cropping on a file.
*
- * @return {jQuery} An object of form values.
+ * @param {jQuery} files An object representing a file.
*/
- ImageUploadBeta.prototype.getImageValues = function() {
- var caption = this.$imageForm.find("#caption").val();
+ ImageUploadBeta.prototype.cropInit = function(files) {
+ var ImageCrop = require("campaign/ImageCrop");
+ var _this = this;
- this.imageValues = {
- caption: (caption) ? caption : null,
- };
+ 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;
+ // Remove any cropping already on the page before initiating.
+ ImageCrop.dsCropperDestroy();
+ ImageCrop.dsCropperInit(origImage, _this.$reportbackForm);
+ };
+ }
+ };
- return this.imageValues;
+ /**
+ * Returns the value of the caption field.
+ * Should only be used after the form has been submitted and the modal has closed.
+ *
+ * @return {jQuery} An object of form values.
+ */
+ 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/scss/content/_modal-crop.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
index 4c5d97d9b..a5fd9cd64 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,44 @@
max-width: 100%;
}
}
+
+ // Styles for cropping.
+ .crop-bounding-box {
+ position: relative;
+ display: inline-block;
+
+ .cropbox {
+ 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 {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+
+ &:hover {
+ cursor: se-resize;
+ }
+
+ .square {
+ 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;
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 @@