61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
App.PhotoPreview = {
|
|
init: function(element) {
|
|
var fileInput = $(element).data("file-input");
|
|
|
|
// Listen for changes on the file input field
|
|
$(fileInput).on("change", function(e) {
|
|
var input = e.target;
|
|
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
|
|
// Load a preview of the image and append to the container
|
|
reader.onload = function (e) {
|
|
App.PhotoPreview.set(element, e.target.result);
|
|
}
|
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
});
|
|
},
|
|
set: function(element, imgSrc) {
|
|
var img = $("<img>").attr('src', imgSrc).addClass("img-thumbnail photo-preview");
|
|
$(element).html(img);
|
|
App.PhotoPreview.autoOrient(img.get(0));
|
|
},
|
|
autoOrient: function(image) {
|
|
// Get the EXIF data from the image
|
|
EXIF.getData(image, function() {
|
|
var orientation = EXIF.getTag(this, "Orientation");
|
|
|
|
// Rotate the image to ensure it appears right side up
|
|
switch (orientation) {
|
|
case 6:
|
|
$(image).css('transform', 'rotate(90deg)');
|
|
break;
|
|
case 8:
|
|
$(image).css('transform', 'rotate(270deg)');
|
|
break;
|
|
case 3:
|
|
$(image).css('transform', 'rotate(180deg)');
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$(document).on("turbolinks:load", function() {
|
|
$("[data-behavior=person-photo-preview]").each(function(index, element) {
|
|
App.PhotoPreview.init(element);
|
|
});
|
|
$("[data-behavior=guardian-photo-preview]").each(function(index, element) {
|
|
App.PhotoPreview.init(element);
|
|
});
|
|
$("[data-behavior=take-person-photo]").click(function(e) {
|
|
$("[data-ujs-target=person-photo-input]").trigger("click");
|
|
});
|
|
$("[data-behavior=take-guardian-photo]").click(function(e) {
|
|
$("[data-ujs-target=guardian-photo-input]").trigger("click");
|
|
});
|
|
});
|