Skip to content

Commit

Permalink
Delete photos
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmyangel
jimmyangel committed Dec 5, 2015
1 parent 43f1941 commit b99144a
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 42 deletions.
10 changes: 10 additions & 0 deletions js/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,5 +145,15 @@ var tmData = {
success: successCallback,
error: errorCallback
});
},
deleteTrackPic: function (tId, picIndex, token) {
return $.ajax({
url: API_BASE_URL + '/v1/tracks/' + tId + '/' + 'picture/' + picIndex,
type: 'DELETE',
headers: {
'Authorization': 'JWT ' + token
},
success: function() {}
});
}
};
138 changes: 101 additions & 37 deletions js/forms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -640,26 +640,6 @@ var tmForms = {
makeTrackPhotos: function(callback) {
var trackPhotos = [];
var images = $('#track-photos-container img');

// Set up tasks to grab lat, lon from exif
function grabLatLon (i) {
var d = $.Deferred();
EXIF.getData(images[i], function () {
var lat = EXIF.getTag(this, 'GPSLatitude');
var lon = EXIF.getTag(this, 'GPSLongitude');
if (lat) {
var latRef = EXIF.getTag(this, 'GPSLatitudeRef') || 'N';
lat = (lat[0] + lat[1]/60 + lat[2]/3600) * (latRef === 'N' ? 1 : -1);
if (lon) {
var lonRef = EXIF.getTag(this, 'GPSLongitudeRef') || 'W';
lon = (lon[0] + lon[1]/60 + lon[2]/3600) * (lonRef === 'W' ? -1 : 1);
trackPhotos[i].picLatLng = [lat, lon];
}
}
d.resolve();
});
return d.promise();
}
var grabLatLonTasks = [];

// Loop through images to set up trackPhotos object
Expand All @@ -672,7 +652,7 @@ var tmForms = {
});

// Extract geotags
grabLatLonTasks.push(grabLatLon(i));
grabLatLonTasks.push(this.grabLatLon(images[i], trackPhotos[i]));
// Keep things clean by releasing the object URLs
URL.revokeObjectURL(images[i].src);
}
Expand All @@ -682,6 +662,24 @@ var tmForms = {
callback(trackPhotos);
});
},
grabLatLon: function (img, trackPhotos) {
var d = $.Deferred();
EXIF.getData(img, function () {
var lat = EXIF.getTag(this, 'GPSLatitude');
var lon = EXIF.getTag(this, 'GPSLongitude');
if (lat) {
var latRef = EXIF.getTag(this, 'GPSLatitudeRef') || 'N';
lat = (lat[0] + lat[1]/60 + lat[2]/3600) * (latRef === 'N' ? 1 : -1);
if (lon) {
var lonRef = EXIF.getTag(this, 'GPSLongitudeRef') || 'W';
lon = (lon[0] + lon[1]/60 + lon[2]/3600) * (lonRef === 'W' ? -1 : 1);
trackPhotos.picLatLng = [lat, lon];
}
}
d.resolve();
});
return d.promise();
},
resizeImage: function (img, width) {
var height;
if ((width <= 0) || (img.naturalWidth <= width)) {
Expand Down Expand Up @@ -729,16 +727,13 @@ var tmForms = {
}

$('#edit-track-photos-container').empty();
// Grab the thumbnails and captions that are already sitting in the info panel
for (var i=0; i<$('.infoThumbs').length; i++) {
$('#edit-track-photos-container').append
(
'<div style="float: left;" orig-photo-index="' + i + '">' +
'<div><input type="text" maxLength="200" value="' + $('.slideShowContainer').children('a')[i].getAttribute('data-title') +
'"' + ' class="trackUploadThumbCaption form-control"></div><div><img class="img-responsive trackUploadThumbs" src="' +
$('.infoThumbs')[i].getAttribute('src') +
'"></div></div>'
);
for (var i=0; i<track.trackPhotos.length; i++) {
$('#edit-track-photos-container').append (
'<div style="float: left;" orig-photo-index="' + i + '">' +
'<div><input type="text" maxLength="200" value="' + track.trackPhotos[i].picCaption +
'"' + ' class="trackUploadThumbCaption form-control"></div><div><img class="img-responsive trackUploadThumbs" ' +
'src="data:image/jpeg;base64,' + track.trackPhotos[i].picThumbBlob + '"></div></div>'
);
}
if ($('.infoThumbs').length < MAX_NUM_IMAGES) {
$('#edit-track-file-selector').show();
Expand All @@ -748,6 +743,7 @@ var tmForms = {
$('#edit-track-photos-container').sortable({
group: 'edit-photos'
});
// Enable drag to delete drop zone
$('#edit-track-photos-delete-drop-zone').sortable({
group: 'edit-photos',
onAdd: function(evt) {evt.item.remove(); $('#edit-track-file-selector').show();}
Expand All @@ -763,13 +759,14 @@ var tmForms = {
$('#edit-track-photo-files').click();
});

// Add new photos to the container upon file selection change (always replace -- later: add instead)
$('#edit-track-photo-files').change(function () {
var files = $('#edit-track-photo-files')[0].files;
$('.newImage').remove();
var n = $('#edit-track-photos-container').children().length;
for (var i=0; i<Math.min(files.length, MAX_NUM_IMAGES - n); i++) {
$('#edit-track-photos-container').append (
'<div class="newImage" style="float: left;" orig-photo-index="' + (i+n) + '">' +
'<div class="newImage" style="float: left;" file-index="' + i + '">' +
'<div><input type="text" maxLength="200" value="' +
files[i].name.replace(/\.[^/.]+$/, '') +
'"' + ' class="trackUploadThumbCaption form-control"></div><div><img class="img-responsive trackUploadThumbs" src="' +
Expand Down Expand Up @@ -829,19 +826,70 @@ var tmForms = {

// Just keep the fields that have changed
for (var i=0; i<fields.length; i++) {
if (t[fields[i]].toString() !== ((track[fields[i]]) ? track[fields[i]].toString() : '')) {
if (t[fields[i]].toString() !== ((track[fields[i]]) !== undefined ? track[fields[i]].toString() : '')) {
trackChanged = true;
} else {
delete t[fields[i]]; // If not changed, remove from API request
}
}

// Look at the photos part
for (i=0; i<$('#edit-track-photos-container').children().length; i++) {
console.log($('#edit-track-photos-container').children()[i].getAttribute('orig-photo-index'));
var photosChanged = false;
t.trackPhotos = [];
var photosToDelete = [];
if (track.trackPhotos) {
photosToDelete = track.trackPhotos.map(function() {return true});
}
$('#edit-track-photos-container').children().each(function(index) {
t.trackPhotos.push({
picName: index.toString(),
picThumb: index.toString(),
picCaption: $(this).find('input').val()
});
if ($(this).hasClass('newImage')) {
console.log(index, 'new image');
photosChanged = true;
trackChanged = true;
t.trackPhotos[index].picIndex = Date.now() + index;
console.log($(this).find('img')[0]);
t.trackPhotos[index].picThumbDataUrl = self.resizeImage($(this).find('img')[0], THUMBNAIL_WIDTH).toDataURL('image/jpeg', THUMB_RESIZE_QUALITY);
} else {
console.log(index, 'old image');
var oI = parseInt($(this).attr('orig-photo-index'));
photosToDelete[oI] = false; // Photo is a keeper
t.trackPhotos[index].picLatLng = track.trackPhotos[oI].picLatLng;
t.trackPhotos[index].picThumbDataUrl = 'data:image/jpeg;base64,' + track.trackPhotos[oI].picThumbBlob;
if (index !== oI) {
// If pics is reordered, make sure we replace implied picIndex with explicit one
if (track.trackPhotos[oI].picIndex === undefined) {
t.trackPhotos[index].picIndex = oI;
}
}
if ((index !== oI) || (t.trackPhotos[index].picCaption !== track.trackPhotos[oI].picCaption)) {
photosChanged = true;
trackChanged = true;
console.log('photos changed');
}
}
});

// Schedule delete photos task
var deletePictureTasks = [];
function deletePicture (picIndex) {
return tmData.deleteTrackPic(track.trackId, picIndex, localStorage.getItem('rikitraki-token'));
}
if ($.inArray(true, photosToDelete) >= 0) {
photosChanged = true;
trackChanged = true;
for (i=0; i<photosToDelete.length; i++) {
if (photosToDelete[i]) {
deletePictureTasks.push(deletePicture((track.trackPhotos[i].picIndex === undefined ? i : track.trackPhotos[i].picIndex)));
}
}
}

if (trackChanged) {
// Make this a function since we have to call it from different places
function updateTrack(t) {
tmData.updateTrack(t, localStorage.getItem('rikitraki-token'), function(data) {
$('#editMessage').fadeIn('slow');
setTimeout(function () {
Expand All @@ -851,7 +899,23 @@ var tmForms = {
$('#editErrorText').text('Save error, status ' + jqxhr.status + ' - ' + jqxhr.responseText);
$('#editError').fadeIn('slow');
console.log(jqxhr);
});
});
}
if (!photosChanged) {
delete t.trackPhotos;
}
console.log('photos to delete? ', $.inArray(true, photosToDelete));
if (trackChanged) {
console.log(t);
if (deletePictureTasks.length > 0) {
$.when.apply(this, deletePictureTasks).then(function () {
updateTrack(t);
});
} else {
updateTrack(t);
}
} else {
console.log('no changes detected');
}
}
},
Expand Down
12 changes: 7 additions & 5 deletions js/mapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -563,25 +563,27 @@ var tmMap = {
lightbox.option({'wrapAround': true, 'alwaysShowNavOnTouchDevices': true});
// Go get the geo tags and then put the pics on the map
tmData.getGeoTags(track.trackId, function(data) {
track.trackPhotos = data.geoTags.trackPhotos; // Add trackPhotos structure to track to allow editing
var haveGeoTags = false;
var photoLayerGroup = L.layerGroup();
slideShowContainer.innerHTML = '<hr>';

for (var k=0; k<data.geoTags.trackPhotos.length; k++) {
// Tell lightbox that this is a slideshow
slideShowContainer.innerHTML += '<a href="'+ API_BASE_URL + '/v1/tracks/' + track.trackId + '/picture/' + k +
slideShowContainer.innerHTML += '<a href="'+ API_BASE_URL + '/v1/tracks/' + track.trackId + '/picture/' +
(data.geoTags.trackPhotos[k].picIndex === undefined ? k : data.geoTags.trackPhotos[k].picIndex) +
'" data-lightbox="slideshow" data-title="' + data.geoTags.trackPhotos[k].picCaption + '"' +
'><img nopin="nopin" class="infoThumbs" geoTagXRef="' + k +
'" src="' + API_BASE_URL + '/v1/tracks/' + track.trackId + '/thumbnail/' + k + '" /></a>';
'" src="data:image/jpeg;base64,' + data.geoTags.trackPhotos[k].picThumbBlob + '" /></a>';

// If we have geotags, go ahead and place them on thumbnail photo markers and don't do a slideshow, just single image
if (data.geoTags.trackPhotos[k].picLatLng) {
haveGeoTags = true;
var img ='<a href="' + API_BASE_URL + '/v1/tracks/' + track.trackId + '/picture/' + k +
var img ='<a href="' + API_BASE_URL + '/v1/tracks/' + track.trackId + '/picture/' +
(data.geoTags.trackPhotos[k].picIndex === undefined ? k : data.geoTags.trackPhotos[k].picIndex) +
'" data-lightbox="picture' + '" data-title="' + data.geoTags.trackPhotos[k].picCaption +
'" ><img geoTagRef="' + k + '"picLatLng="' + data.geoTags.trackPhotos[k].picLatLng.toString() +
'" src="'+ API_BASE_URL + '/v1/tracks/' + track.trackId +
'/thumbnail/' + k + '" width="40" height="40"/></a>';
'" src="data:image/jpeg;base64,' + data.geoTags.trackPhotos[k].picThumbBlob + '" width="40" height="40"/></a>';
var photoMarker = L.marker(data.geoTags.trackPhotos[k].picLatLng, {
clickable: false, // This is necessary to prevent leaflet from hijacking the click from lightbox
icon: L.divIcon({html: img, className: 'leaflet-marker-photo', iconSize: [44, 44]})
Expand Down

0 comments on commit b99144a

Please sign in to comment.