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

Reportback modal cropping #3673

Merged
sbsmith86 merged 7 commits into from
Dec 22, 2014
Merged

Reportback modal cropping #3673

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1d2fac4
Initial hookup of image cropping js
sbsmith86 Dec 19, 2014
64855ca
separated preview and crop functionality into their own functions
sbsmith86 Dec 19, 2014
ba048ac
Change crop container to display inline so boundaries are correct
sbsmith86 Dec 22, 2014
9691afb
Add function to destory cropping
sbsmith86 Dec 22, 2014
9efb6a3
Image crop js populate form with crop values
sbsmith86 Dec 22, 2014
888faab
pass the form to populate with cropping info to init function
sbsmith86 Dec 22, 2014
8b3d134
More semantic class names
sbsmith86 Dec 22, 2014
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
1 change: 0 additions & 1 deletion lib/themes/dosomething/paraneue_dosomething/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
67 changes: 33 additions & 34 deletions lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageCrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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($("<div class='image-crop-container'></div>"));
$cropContainer = $(".image-crop-container");
previewImageWidth = $previewImage.width();
previewImageHeight = $previewImage.height();
previewImageWidth = $cropContainer.width();
previewImageHeight = $cropContainer.height();

// Calculate the initial dimensions of the cropbox. Add the cropbox to the page.
$cropBox.width(previewImageHeight / 2);
Expand Down Expand Up @@ -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);
Expand All @@ -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,
};
});
77 changes: 54 additions & 23 deletions lib/themes/dosomething/paraneue_dosomething/js/campaign/ImageUploadBeta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
Expand All @@ -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 = $("<img class='preview' src=''>");
_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);
}
});

Expand All @@ -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 = $("<img class='preview' src=''>");
$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");
Copy link
Contributor

@weerd weerd Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason why this is required here and not up top? Isn't it all getting compiled together anyhoo, so might as well just require it at top with everything else... unless I'm missing something?

Copy link
Contributor Author

@sbsmith86 sbsmith86 Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@weerd I figured we only needed it if cropping was enabled. Since this function only gets called when cropping is enabled, i put it here.

Copy link
Contributor

@weerd weerd Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. I think that makes sense. I saw you removed it from at top of the app.js file. I figured since this all gets combined into a minified file it gets added regardless and probably more readable at top. Although I get the require stuff confused at times, so maybe @DFurnes can shed some light, haha. Fine to merge for now with this cause I don't know what the answer is :)

Copy link
Contributor Author

@sbsmith86 sbsmith86 Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@weerd ok cool. Yea I like require because it allows you to load js when you actually need it instead of all the time. I could even possibly require the js and then assign a callback function that runs the code that uses it only after the file has actually been added to the page. This way you don't add more js then you ever need. Happy to hear other thoughts on this though!

Copy link
Contributor

@weerd weerd Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add it as is and if we need to change later no biggie :) It was more a question than an actual request, haha!

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;
Expand Down
15 changes: 3 additions & 12 deletions lib/themes/dosomething/paraneue_dosomething/js/campaign/Reportback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
});
},

Expand All @@ -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);
},

};


Expand Down
48 changes: 48 additions & 0 deletions lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,52 @@
max-width: 100%;
}
}

// Styles for cropping.
.image-crop-container {
position: relative;
display: inline-block;

.crop-box {
Copy link
Contributor

@weerd weerd Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not 100% sure but could you do the whole .module > .wrapper stuff we discussed on friday here?

Copy link
Contributor Author

@sbsmith86 sbsmith86 Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@weerd sure i will try renaming some stuff. For this one it is interesting because it is actually acting like a container since the main purpose of this div is to create a bounding box for cropping. Maybe I can make it .crop-bounding-box or something.

Copy link
Contributor

@weerd weerd Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.crop-bounding-box makes more sense to me :) Nice name!

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 {
Copy link
Contributor

@weerd weerd Dec 22, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also here with the .resize-handle > .wrapper :)

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;
}
}
}
46 changes: 0 additions & 46 deletions lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down