#blueimp

Today was all about making the app look better and putting Google Maps everywhere. First, I figured out how to add a small Google Maps image to the blueimp gallery slideshow.

Then I reorganized my user's page to mirror the AirBnB view, with Google Maps on one side and albums on the other side. I even added some small (slightly excessive) animations for when hovering over images.

Finally, I redid my sign-in page using Bootstrap (which was much more painful than I imaged it would be).

Overall, I'm pretty happy with the progress today. 1 more day of feature-adding and then Thursday will be all about making the app look presentable!

Today’s issues (where do I begin?)

Adding a small Google Map to blueimp was not as hard as I thought it would be. I basically used the buit-in "description" option to force Google Maps into the image.

//app/assets/templates/albums/show.jst.ejs <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"&gt <div class="slides"> </div> <h3 class="title"> </h3> <a class="prev">‹ </a> <a class="next"> › < /a> <a class="close"> × < /a> <a class="play-pause"> < /a> <ol class="indicator"> < /ol> //THIS IS THE IMPORTANT LINE <div class="description google-map"> < /div> </div&gt // Then render the map in the album show view app/assets/javascripts/views/albums/album_show.js //This is copied from bluimp docs openGallery: function (event) { event = event || window.event; var that = this; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event, stretchImages: true, onslide: function (index, slide) { //this function generates the description that.displayDescription.call(this, index, slide, that); }}, links = this.$('.link'); blueimp.Gallery(links, options); }, // Generates description for the gallery displayDescription: function (index, slide, albumView) { var text = this.list[index].getAttribute('data-description'), node = this.container.find('.description'); node.empty(); if (text) { node[0].appendChild(document.createTextNode(text)); } //gets photo and map element var photoId = $(this.list[index]).attr('id'), photo = albumView.model.photos().get(photoId), map = this.container.find('.google-map')[0]; //Sees if the photo has a picture, if so, render map. Otherwise, hide google map div if (photo.escape('location_id')) { $(map).removeClass("hidden"); albumView.renderMap.call(albumView, map, photo); } else { $(map).addClass("hidden"); } ... //Additional code simply renders Google Map according to Google's documentation },

I felt like today, I added a bunch of css through sheer trial-and-error. When something didn't work, I kept on adding and changing properties until they did. Some things that I learned: jQuery's sortable function does not work when the body does not have a height. To make map view on one side and every thing else on the other side, I had to keep changing properties of every single element on the page.

You can trigger an event on a model within any view. This was useful for detecting when hovering over an image. The event was then used to find the Google Map marker and move it.

// In my album item view app/assets/javascripts/views/albums/album_item.js events: { 'mouseover .image': 'triggerMarker', 'mouseout .image': 'closeMarker', }, triggerMarker: function () { if (this.model.get('location_id')) { this.model.trigger('selectImage', this.model); } }, closeMarker: function () { if (this.model.get('location_id')) { this.model.trigger('unselectImage', this.model); } }, // Then in the album show view, listen for this event from the model initialize: function (options) { this.listenTo(this.model.photos(), 'add', this.render); this.listenTo(this.model.photos(), 'remove', this.removePhotoItem); },

Goals for Tomorrow

Fix location column so city is not required. Reconsider what fields are required.... Sometimes you just want to tag a region or a country.

Add dates column to albums (and photos?) and allow searching by date.

Create index view for different locations.

Set default location of photos as location of album.

Consider adding search option for finding albums/photos.

Add pagination.

Continue making pages prettier.

Today was very productive. I've completed Phase 3 essentially-- all albums and photos can have location tags, these location tags can be edited or removed, and the location tags can be displayed for photos. Now I just need to figure out a good way of displaying this information in a pretty fashion. Originally, I was thinking that perhaps locations for albums can be mapped on the user's main page. Then, locations of photos can be mapped on the albums show page. Selecting markers in Google Maps will select the album or photo show page. # Today’s issues * Today's main issue was fidgeting with the Google Maps/Places API. I got location to save AND update. Updating was tricky since I needed to keep the current location if a new location isn't selected (in other words, NOT save the location name that I automatically fill the update form with) AND I need to delete the location tag if the location name is erased. Saving the location was a bit easier. I just saved

// app/assets/javascripts/views/albums/album_form.js render: function(){ // If updating the album, and if there is a location for that album, get the name of the location if(this.albumView && this.albumView.model.locations().first()) { var location = this.albumView.model.locations().first().escape('name'); } // Put the location into the album form template var content = this.template({albumView: this.albumView, location: location}); this.$el.html(content); // Store the input for the location as a variable and pass this into a new Google Autocomplete object var input = this.$('.location-picker')[0]; this.autocomplete = new google.maps.places.Autocomplete(input); // Add a listener for the autocomplete object, which will call the "setLocationChanged" method when a new location is selected from the autocomplete field google.maps.event.addListener(this.autocomplete, 'place_changed', this.setLocationChanged.bind(this)); return this; }, // This setLocationChanged method is just responsible for toggling a switch that says yes, the location has been changed, please update the location association setLocationChanged: function (event) { this.locationChanged = true; }, // When the album is saved, this saveLocation method is called saveLocation: function (callback) { // This will grab the details for the location entered from Google var place = this.autocomplete.getPlace(); ... //The rest of this method is very long, but you essentially just save the location the "place" variable. } });

Adding a google image to the photo show page was a pretty fun exercise, mainly because Google provides a pretty good demo of their mapping and autocompeleting as part of their documentation.

Originally, I was saving location associations for albums and photos as the location ID. Turns out this is horribly convoluted, so I just decided to save the "location_id" as the Google places_id. This makes my fetchOrGet method much simpler for my collection of locations (in app/assets/javascripts/collections/locations.js)

I think I'm fairly decided on the fact that there will be no user/album following as I originally intended. Eventually, I would like people to be able to share albums with others through a url and password, so I leave the option of having comments enabled for albums and photos. However, that will be a bonus feature that I might or might not implement.

I discovered a plugin called Blueimp, which helps make beautiful image galleries. The only trouble is that it's difficult to display information like Google Map location on the slideshow overlay. I'm playing with the add-on now and hoping to find a way to integrate my location information into this slideshow. Otherwise, I might have to try creating slideshow from scratch or stick some more navigation bars in my current photo show page.

Blueimp My Current View

Making the Blueimp plugin work was a production onto itself. Originally, it broke my cloudinary widget (unacceptable), but turns out this was because I needlessly required jquery as instructed in the readme. I ended up following the readme almost-exactly. 1) Require the blueimp-gallery css file and js file. 2) On the page that the slideshow will appear, add a blueimp gallery view. 3) Put all images inside a ".list" element. 4) Create an event listener for when the ".links" element is clicked.

// 1) Require blueimp in app/views/layouts/application.html.erb <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> // 2) On app/assets/templates/albums/show.jst.ejs, add div for blueimp gallery <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> // 3) Put all images inside a ".list" element in app/assets/templates/albums/show.jst.ejs <div class='photos' id='links'> <!-- Images will be inserted here --> <!-- using format: --> <!-- <a href="full_photo_url" title="caption" data-gallery> --> <!-- <img src="thumbnail_url" alt="text to display if thumbnail doesn't show up" /> --> <!-- </a> --> </div> // 4) On app/assets/javascripts/views/albums/album_show.js, create an event listener that will open the gallery when an image is clicked events: { 'click .links': 'openPhotoView', }, openPhotoView: function (event) { event.preventDefault(); event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); },

I've been using branches to make changes to my app without worrying about breaking key functionalities. Then I test everything out rigorously before merging the new branch with my master branch. However, sometimes I decide that there are key changes that I want no matter what. These changes I make on my master, and then merge over to the new branch. While this is great, it sometimes causes merge conflicts, but thankfully, turns out that Atom has a built in merge conflict resolver. Just press shift + command + P and search for "Merge Conflicts: Detect". Technically, there is a hotkey for this, but I haven't gotten it to work. Then, just go through each of the files, and accpet merges, commit them, and merge with master!

I thought that I had the photo uploading figured out, but turns out there was a bug that would redirect users to the home page if they physically clicked on the "Click or Drag Photos Here" button when creating a new Album or Photo. Turns out I forgot to "preventDefault" on the event handler for that button.

Goals for Tomorrow

Create index view for locations. Then display albums and locations on Google Maps layout. Also, just realized that photos without specific location should inherit the location of their albums.

Figure out way to display location in blueimp Gallery. Then switch over to using the much cooler gallery-view for albums.

Consider adding search option for finding albums/photos. Some plugins people have suggested: HideSeek, Sunspot, Fuzzily