Fix localhost development

index.html

@@ -19,12 +19,15 @@
         <div id="map"></div>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
+        <script>
+            document.L || document.write('<script src="/js/leaflet.js"><\/script>')
+        </script>
         <script src="/js/map.js"></script>
         <script type="text/javascript">
             try {
                 "use strict";
 
-                var city = extractLocationFromUrl(window.location.hostname);
+                var city = extractLocationFromUrl(window.location);
 
                 buildMapFor(city);
             } catch (e) {

js/locations.js

@@ -22,19 +22,40 @@ function sortKeys(locations) {
     return keys.sort();
 }
 
-function buildLocations() {
-  var locations = getLocations();
+function buildSubdomainLocation(url, listElement, location, name) {
+    var listItem = document.createElement("li");
+    var topDomain = url.host.split(".").slice(-2).join(".");
+    var locationUrl = location + "." + topDomain;
 
-  var listContainer = document.createElement("div");
+    listItem.innerHTML = "<a href=\"" + locationUrl + "\">" + name + "</a>";
+    listElement.appendChild(listItem);
+}
+
+function buildQueryLocation(url, listElement, location, name) {
+    var listItem = document.createElement("li");
+    var locationUrl = url.href.replace(url.pathname, "/?location=" + location);
+
+    listItem.innerHTML = "<a href=\"" + locationUrl + "\">" + name + "</a>";
+    listElement.appendChild(listItem);
+}
+
+function getLocationBuilderFromUrl(url) {
+    if (url.hostname === 'localhost') return buildQueryLocation;
+    if (url.hostname === '127.0.0.1') return buildQueryLocation;
+    return buildSubdomainLocation;
+}
+
+function buildLocations(url) {
+    var locations = getLocations();
+
+    var listContainer = document.createElement("div");
     document.getElementById("locations").appendChild(listContainer);
     var listElement = document.createElement("ul");
 
     listContainer.appendChild(listElement);
 
-  sortKeys(locations).map(function(location) {
-        var listItem = document.createElement("li");
-
-        listItem.innerHTML = "<a href=\"https://" + location + ".devfriendlyplaces.net\">" + locations[location].name + "</a>";
-        listElement.appendChild(listItem);
+    var buildLocation = getLocationBuilderFromUrl(url);
+    sortKeys(locations).map(function(location) {
+        buildLocation(url, listElement, location, locations[location].name);
     });
 }

js/map.js

@@ -12,8 +12,21 @@ for(var i = 0; i < 4; i++) {
     );
 }
 
-function extractLocationFromUrl(hostname) {
-    var split = hostname.split(".");
+function parseQueryString(queryString ) {
+    var temp, i;
+    var params = {}
+    var queries = queryString.replace('?','').split("&");
+
+    for ( i = 0; i < queries.length; i++ ) {
+        temp = queries[i].split('=');
+        params[temp[0]] = temp[1];
+    }
+
+    return params;
+};
+
+function extractSubdomainLocation(url) {
+    var split = url.hostname.split(".");
     var location = split[0];
 
     if ((split.length < 3) || (location == "www")) {
@@ -23,6 +36,27 @@ function extractLocationFromUrl(hostname) {
     return location;
 }
 
+function extractQueryLocation(url) {
+    var params = parseQueryString(url.search);
+
+    if (!params['location']) {
+        throw "No location in the url";;
+    }
+
+    return params['location'];
+}
+
+function getLocationExtractorFromUrl(url) {
+    if (url.hostname === 'localhost') return extractQueryLocation;
+    if (url.hostname === '127.0.0.1') return extractQueryLocation;
+    return extractSubdomainLocation;
+}
+
+function extractLocationFromUrl(url) {
+    var extractLocation = getLocationExtractorFromUrl(url);
+    return extractLocation(url);
+}
+
 function getLocations() {
     return getJSON("/locations/locations.json");
 }

locations.html

@@ -21,7 +21,7 @@ <h1>DEV FRIENDLY PLACES</h1>
 
             <script src="/js/locations.js"></script>
             <script type="text/javascript">
-                buildLocations();
+                buildLocations(window.location);
             </script>
         </section>
     </body>