Bundle and transpile all javascript with webpacker

Now we can write es6 code in any .js file! All the coffeescript
has been converted into js.

Changes:
- Use es6 modules instead of globals. This is better encapsulation.
This results in the removal of `window.Refuge`. Instead, to use a
module, like Geocoder, just import it like this:
`import { Geocoder } from 'path/to/geocoder';`

app/javascript/packs/application.js

@@ -1,10 +1,9 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
+// Vendor
+import { } from 'jquery-ujs'
+import 'bootstrap/dist/js/bootstrap'
 
-console.log('Hello World from Webpacker')
+// Views
+import './views/restrooms/index'
+import './views/restrooms/new'
+import './views/restrooms/restrooms'
+import './views/restrooms/search'

app/assets/javascripts/lib/geocoder.es6 → app/javascript/packs/lib/geocoder.js

@@ -1,6 +1,6 @@
 // TODO: Update API To NOT USE GOOGLE and use Open Source
 
-Refuge.Library.Geocoder = class Geocoder {
+export class Geocoder {
   constructor() {
     this.geocodeSearchString = this.geocodeSearchString.bind(this);
     this.getAddress = this.getAddress.bind(this);

app/assets/javascripts/maps.js → app/javascript/packs/lib/maps.js.erb

@@ -1,8 +1,14 @@
-var map;
-
 // Constants
 const MARKER_WIDTH = 37;
 
+// Load image paths with erb templating
+<% helpers = ActionController::Base.helpers %>
+const currentLocationImage = "<%= helpers.image_path('marker-icon.png') %>";
+const circleMarkerImage = "<%= helpers.image_path('marker-circle.png') %>";
+const showMarkerImage = "<%= helpers.image_path('show-icon.png') %>";
+
+let map;
+
 function initMap(x, y, image, draggable, callback){
   image = typeof image !== 'undefined' ? image : currentLocationImage;
 
@@ -176,18 +182,25 @@ function guessPosition (coords, callback) {
   });
 }
 
-$(function(){
-  var $map = $('#mapArea');
-  if($map.length > 0) {
-    initMap($map.data('latitude'), $map.data('longitude'), showMarkerImage);
+export const Maps = {
+  reloadMap: (map) => {
+    initMap(map.dataset.latitude, map.dataset.longitude, showMarkerImage);
+  },
+  reloadDraggable: (map, callback) => {
+    initMap(map.dataset.latitude, map.dataset.longitude, showMarkerImage, true, callback);
+  },
+  loadMapWithPoints: (lat, long, points) => {
+    initMap(lat, long);
+
+    for (const [i, point] of points.entries()) {
+      setPoint(point, i + 1);
+    }
   }
+}
 
-  window.Maps = {
-    reloadMap: function(map) {
-      initMap(map.dataset.latitude, map.dataset.longitude, showMarkerImage);
-    },
-    reloadDraggable: function(map, callback) {
-      initMap(map.dataset.latitude, map.dataset.longitude, showMarkerImage, true, callback);
-    }
+$(function(){
+  let mapArea = $('#mapArea');
+  if(mapArea.length > 0) {
+    initMap(mapArea.data('latitude'), mapArea.data('longitude'), showMarkerImage);
   }
 });

app/assets/javascripts/views/restrooms/index.js → app/javascript/packs/views/restrooms/index.js

@@ -1,3 +1,5 @@
+import { Maps } from '../../lib/maps';
+
 $(function(){
   var headerHidden = false;
   var mapInitialized = false;
@@ -23,14 +25,10 @@ $(function(){
   function initPoints(){
     // initialize the map if it wasn't already on
     if (!mapInitialized && mapContainer.data('latitude') && mapContainer.data('longitude')) {
-      initMap(mapContainer.data('latitude'), mapContainer.data('longitude'));
-
       // get a list of points from the server based on the searched location
-      $.get( '/restrooms' + window.location.search , {}, function( data ) {
-        for(var i = 0; i < data.length; i++){
-        // for each point in the data, put a point on the map
-        setPoint(data[i], i + 1);
-        }
+      $.get( '/restrooms' + window.location.search , {}, (points) => {
+        Maps.loadMapWithPoints(mapContainer.data('latitude'), mapContainer.data('longitude'),
+                               points);
       }, 'json');
       mapInitialized = true;
     }
@@ -42,9 +40,6 @@ $(function(){
       // catch bad URL
       searchLocation(search.val());
     }
-    // get default height for animation later
-    mapHeight = mapContainer.height();
-    listHeight = list.height();
 
     // hide the map
     mapContainer.fadeOut(0);

app/assets/javascripts/views/restrooms/new.es6 → app/javascript/packs/views/restrooms/new.js

@@ -1,6 +1,7 @@
-//= require lib/geocoder
+import { Geocoder } from '../../lib/geocoder';
+import { Maps } from '../../lib/maps';
 
-Refuge.Restrooms.NewRestroomForm = class NewRestroomForm {
+class NewRestroomForm {
   constructor(form) {
     this._bindEvents = this._bindEvents.bind(this);
     this._bindGuessButton = this._bindGuessButton.bind(this);
@@ -10,7 +11,7 @@ Refuge.Restrooms.NewRestroomForm = class NewRestroomForm {
     this._onDrag = this._onDrag.bind(this);
     this._getNewForm = this._getNewForm.bind(this);
     this._updateForm = this._updateForm.bind(this);
-    this._geocoder = new Refuge.Library.Geocoder;
+    this._geocoder = new Geocoder;
     this._form = form;
     this._guessButton = this._form.find('.guess-btn');
     this._nearbyContainer = $('.nearby-container');
@@ -137,6 +138,6 @@ Refuge.Restrooms.NewRestroomForm = class NewRestroomForm {
 };
 
 $(() => {
-  $.fn.initializeNewRestroomForm = function() { return new Refuge.Restrooms.NewRestroomForm($(this)); };
+  $.fn.initializeNewRestroomForm = function() { return new NewRestroomForm($(this)); };
   $('.submit-new-bathroom-form').initializeNewRestroomForm();
 });

app/assets/javascripts/views/restrooms/search.es6 → app/javascript/packs/views/restrooms/search.js

@@ -1,9 +1,9 @@
-//= require lib/geocoder
+import { Geocoder } from '../../lib/geocoder';
 
-// This Coffeescript file contains the class for the search bar and functionality.
+// This file contains the class for the search bar and functionality.
 // It requires the RefugeRestrooms lib geocoder.
 
-Refuge.Restrooms.Search = class Search {
+class Search {
   constructor(form) {
     this.searchDefaultText = "1 Embarcadero Center, San Francisco, CA";
 
@@ -14,7 +14,7 @@ Refuge.Restrooms.Search = class Search {
     this._searchCurrentLocation = this._searchCurrentLocation.bind(this);
     this._updateForm = this._updateForm.bind(this);
     this._setDefaultText = this._setDefaultText.bind(this);
-    this._geocoder = new Refuge.Library.Geocoder;
+    this._geocoder = new Geocoder;
     this._form = form;
     this._searchBar = this._form.find('input.search-bar');
 
@@ -120,6 +120,6 @@ Refuge.Restrooms.Search = class Search {
 }
 
 $(() => {
-  $.fn.initializeSearch = function() { return new Refuge.Restrooms.Search($(this)); };
+  $.fn.initializeSearch = function() { return new Search($(this)); };
   $('.search-restrooms-form').initializeSearch();
 });