Merge pull request udacity#17 from mejarc/12-dupe-functions

12 dupe functions

.gitignore

@@ -72,6 +72,7 @@ bower_components
 
 
 
+
 ################################################
 # Sails.js / Waterline / Grunt
 #
@@ -116,3 +117,4 @@ npm-debug.log
 nbproject
 .idea
 .node_history
+dist/*

src/css/styles.css

@@ -253,10 +253,6 @@ nav h1 a {
   z-index: 1000;
 }
 
-.inside #map-container {
-  background: blue none repeat scroll 0 0;
-}
-
 .inside #footer {
   bottom: 0;
   position: absolute;

src/index.html

@@ -40,6 +40,7 @@ <h3>Filter Results</h3>
     </section>
   </main>
 <!-- build:js js/all.min.js -->
+<script src="js/common.js"></script>
   <script src="js/dbhelper.js"></script>
   <script src="js/main.js"></script>
 <!-- endbuild -->

src/js/common.js

@@ -0,0 +1,85 @@
+/** 
+ * Register service worker(s)
+ */
+const registerServiceWorker = () => {
+  if (!navigator.serviceWorker) return;
+  navigator.serviceWorker.register('/js/sw.js')
+    .then(() => {
+      console.log('Service worker registered.');
+    })
+    .catch(() => {
+      console.log('Service worker did NOT register.');
+    });
+};
+
+/** 
+ * Create restaurant image(s).
+ */
+const createRestaurantImages = (restaurant, format) => {
+  /* default image; the largest */
+  const image = document.createElement('img');
+  const picture = document.createElement('picture');
+  image.className = 'restaurant-img';
+  image.src = DBHelper.imageUrlForRestaurant(restaurant);
+  image.setAttribute('alt', restaurant.name);
+  if (format === 'home') {
+    /* When the viewport permits a grid of several items 
+      placed horizontally, use the *smaller* image
+    */
+    picture.innerHTML = `
+   <source media="(min-width: 585px)" srcset="img/${restaurant.id}-thumb.jpg">
+   <source media="(max-width: 584px") srcset="img/${restaurant.id}-small.jpg">
+ `;
+  } else {
+    picture.innerHTML = `
+    <source media="(max-width: 500px)" srcset="img/${restaurant.id}-thumb.jpg">
+    <source media="(min-width: 501px) and (max-width: 600px") srcset="img/${restaurant.id}-small.jpg">
+  `;
+  }
+  picture.append(image);
+  return picture;
+};
+
+/**
+ * Initialize Google map, called from HTML.
+ */
+const initMaps = (format) => {
+  // On the home page, return a map
+  // showing all restaurant locations
+  if (format === 'home') {
+    return (
+      window.initMap = () => {
+        let loc = {
+          lat: 40.722216,
+          lng: -73.987501
+        };
+        let zoom = 12;
+        self.map = new google.maps.Map(document.getElementById('map'), {
+          zoom: zoom,
+          center: loc,
+          scrollwheel: false
+        });
+        updateRestaurants();
+      }
+    );
+  }
+// If not the home page, return a map
+// marking the location of a single restaurant
+  return (
+    window.initMap = () => {
+      fetchRestaurantFromURL((error, restaurant) => {
+        if (error) { // Got an error!
+          console.error(error);
+        } else {
+          self.map = new google.maps.Map(document.getElementById('map'), {
+            zoom: 16,
+            center: restaurant.latlng,
+            scrollwheel: false
+          });
+          fillBreadcrumb();
+          DBHelper.mapMarkerForRestaurant(self.restaurant, self.map);
+        }
+      });
+    }
+  );
+}

src/js/main.js

@@ -4,20 +4,6 @@ let restaurants,
 var map;
 var markers = [];
 
-/** 
- * Register service worker(s)
- */
-registerServiceWorker = () => {
-  if (!navigator.serviceWorker) return;
-    navigator.serviceWorker.register('/js/sw.js')
-    .then(() => {
-      console.log('Service worker registered.');
-    })
-    .catch(() => {
-      console.log('Service worker did NOT register.');
-    });
-};
-
 
 /**
  * Fetch neighborhoods and cuisines as soon as the page is loaded.
@@ -32,7 +18,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
 /**
  * Fetch all neighborhoods and set their HTML.
  */
-fetchNeighborhoods = () => {
+const fetchNeighborhoods = () => {
   DBHelper.fetchNeighborhoods((error, neighborhoods) => {
     if (error) { // Got an error
       console.error(error);
@@ -46,7 +32,7 @@ fetchNeighborhoods = () => {
 /**
  * Set neighborhoods HTML.
  */
-fillNeighborhoodsHTML = (neighborhoods = self.neighborhoods) => {
+const fillNeighborhoodsHTML = (neighborhoods = self.neighborhoods) => {
   const select = document.getElementById('neighborhoods-select');
   neighborhoods.forEach(neighborhood => {
     const option = document.createElement('option');
@@ -59,7 +45,7 @@ fillNeighborhoodsHTML = (neighborhoods = self.neighborhoods) => {
 /**
  * Fetch all cuisines and set their HTML.
  */
-fetchCuisines = () => {
+const fetchCuisines = () => {
   DBHelper.fetchCuisines((error, cuisines) => {
     if (error) { // Got an error!
       console.error(error);
@@ -73,7 +59,7 @@ fetchCuisines = () => {
 /**
  * Set cuisines HTML.
  */
-fillCuisinesHTML = (cuisines = self.cuisines) => {
+const fillCuisinesHTML = (cuisines = self.cuisines) => {
   const select = document.getElementById('cuisines-select');
 
   cuisines.forEach(cuisine => {
@@ -87,23 +73,11 @@ fillCuisinesHTML = (cuisines = self.cuisines) => {
 /**
  * Initialize Google map, called from HTML.
  */
-window.initMap = () => {
-  let loc = {
-    lat: 40.722216,
-    lng: -73.987501
-  };
-  self.map = new google.maps.Map(document.getElementById('map'), {
-    zoom: 12,
-    center: loc,
-    scrollwheel: false
-  });
-  updateRestaurants();
-};
-
+initMaps('home');
 /**
  * Update page and map for current restaurants.
  */
-updateRestaurants = () => {
+const updateRestaurants = () => {
   const cSelect = document.getElementById('cuisines-select');
   const nSelect = document.getElementById('neighborhoods-select');
 
@@ -126,7 +100,7 @@ updateRestaurants = () => {
 /**
  * Clear current restaurants, their HTML and remove their map markers.
  */
-resetRestaurants = (restaurants) => {
+const resetRestaurants = (restaurants) => {
   // Remove all restaurants
   self.restaurants = [];
   const ul = document.getElementById('restaurants-list');
@@ -141,7 +115,7 @@ resetRestaurants = (restaurants) => {
 /**
  * Create all restaurants HTML and add them to the webpage.
  */
-fillRestaurantsHTML = (restaurants = self.restaurants) => {
+const fillRestaurantsHTML = (restaurants = self.restaurants) => {
   const ul = document.getElementById('restaurants-list');
   restaurants.forEach(restaurant => {
     ul.append(createRestaurantHTML(restaurant));
@@ -152,10 +126,10 @@ fillRestaurantsHTML = (restaurants = self.restaurants) => {
 /**
  * Create restaurant HTML.
  */
-createRestaurantHTML = (restaurant) => {
+const createRestaurantHTML = (restaurant) => {
   const href = DBHelper.urlForRestaurant(restaurant);
   const li = document.createElement('li');
-  const picture = createRestaurantImages(restaurant);
+  const picture = createRestaurantImages(restaurant, 'home');
   li.append(picture);
 
   const name = document.createElement('h2');
@@ -180,30 +154,11 @@ createRestaurantHTML = (restaurant) => {
 
   return li;
 };
-/** 
- * Create restaurant image(s).
- */
-createRestaurantImages = (restaurant) => {
-   /* default image; the largest */
-   const image = document.createElement('img');
-   image.className = 'restaurant-img';
-   image.src = DBHelper.imageUrlForRestaurant(restaurant);
-   image.setAttribute('alt', restaurant.name);
-  /* When the viewport permits a grid of several items 
-    placed horizontally, use the *smaller* image
-  */
-  const picture = document.createElement('picture');
-  picture.innerHTML = `
-    <source media="(min-width: 585px)" srcset="img/${restaurant.id}-thumb.jpg">
-    <source media="(max-width: 584px") srcset="img/${restaurant.id}-small.jpg">
-  `;
-  picture.append(image);
-  return picture;
-};
+
 /**
  * Add markers for current restaurants to the map.
  */
-addMarkersToMap = (restaurants = self.restaurants) => {
+const addMarkersToMap = (restaurants = self.restaurants) => {
   restaurants.forEach(restaurant => {
     // Add marker to the map
     const marker = DBHelper.mapMarkerForRestaurant(restaurant, self.map);