Improve bus routes example

1 files changed, 91 insertions, 42 deletions

diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
index 8dd0759..0cc76ca 100644
--- a/resources/leaflet-route/leaflet-route.js
+++ b/resources/leaflet-route/leaflet-route.js
@@ -144,6 +144,17 @@ L.Route = L.FeatureGroup.extend({
 if ("Sidebar" in L.Control) {
     L.Control.Route = L.Control.Sidebar.extend({
         initialize: function (routeLayer, placeholder, options) {
+            function showStopList(name) {
+                var previousActiveRoute = activeRouteForRouteMaster[activeRouteMaster];
+
+                console.log("hiding " + previousActiveRoute);
+                stopLists[previousActiveRoute].style.display = "none";
+                descriptions[previousActiveRoute].style.display = "none"
+                console.log("showing " + name);
+                stopLists[name].style.display = "block";
+                descriptions[name].style.display = "block"
+            }
+
             L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
             L.setOptions(this, options);
 
@@ -163,44 +174,97 @@ if ("Sidebar" in L.Control) {
                 routeMasterNames.sort(this.options.routeMasterSort);
             }
 
+            var descriptions = {};
+            var stopLists = {};
+
+            var activeRouteMaster = "U1";
+            var activeRouteForRouteMaster = {};
+
             for (var i in routeMasterNames) {
                 var routeMasterName = routeMasterNames[i];
                 var routeMaster = routeMasters[routeMasterName];
 
                 var li = L.DomUtil.create('li', '', ul);
                 var a = L.DomUtil.create('a', '', li);
-
                 a.style.background = routeMaster.routes[0].properties.colour;
+                a.textContent = "U";
+
+                var strong = document.createElement("strong");
+                strong.textContent = routeMasterName.slice(1);
+
+                console.log(routeMaster);
+
+                a.appendChild(strong);
+
+                activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
 
-                a.textContent = routeMaster.name;
                 a.onclick = (function(routeMasterName) {
                     return function() {
                         routeMasterRouteLists[activeRouteMaster].style.display = "none";
                         routeMasterRouteLists[routeMasterName].style.display = "block";
+
+                        var activeRoute = activeRouteForRouteMaster[routeMasterName];
+
+                        showStopList(activeRoute);
+
                         activeRouteMaster = routeMasterName;
+
+                        routeLayer.resetRoutes();
+                        routeLayer.highlightRoute(activeRoute);
                     };
                 })(routeMasterName);
 
                 // The route lists
 
-                var routeList = this._createRouteList(routeMaster);
+                var routeList = this.createRouteList(routeMaster, function(routeName) {
+                    routeLayer.resetRoutes();
+
+                    showStopList(routeName);
+
+                    activeRouteForRouteMaster[activeRouteMaster] = routeName;
+                    routeLayer.highlightRoute(routeName);
+                });
+
                 routeMasterRouteLists[routeMasterName] = routeList;
 
                 routeList.style.display = "none";
-
                 this._contentContainer.appendChild(routeList);
+
+                // The stops
+                for (var i in routeMaster.routes) {
+                    var route = routeMaster.routes[i];
+
+                    // Add the description
+                    var description = L.DomUtil.create('div', 'ls-route-description');
+                    description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
+
+                    descriptions[route.properties.name] = description;
+
+                    // Add the list of stops
+                    var stopList = this.createStopList(route);
+                    stopLists[route.properties.name] = stopList;
+
+                    if (activeRouteMaster === routeMasterName &&
+                        activeRouteForRouteMaster[routeMasterName] === route.properties.name) {
+
+                        stopList.style.display = "block";
+                        description.style.display = "block";
+                    } else {
+                        stopList.style.display = "none";
+                        description.style.display = "none";
+                    }
+
+                    this._contentContainer.appendChild(description);
+                    this._contentContainer.appendChild(stopList);
+                }
             }
 
             var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
 
             routeMasterRouteLists[activeRouteMaster].style.display = "block";
         },
-        _createRouteList: function(routeMaster) {
-            var div = L.DomUtil.create('div', null);
-
-            var ul = L.DomUtil.create('ul', 'ls-route-list', div);
-
-            var routeLayer = this._routeLayer;
+        createRouteList: function(routeMaster, routeSelected) {
+            var ul = L.DomUtil.create('ul', 'ls-route-list');
 
             var stopLists = {};
             for (var i in routeMaster.routes) {
@@ -209,62 +273,47 @@ if ("Sidebar" in L.Control) {
                 var li = L.DomUtil.create('li', '', ul);
                 var a = L.DomUtil.create('a', null, li);
 
-                //a.style.borderColor = route.properties.colour;
                 a.style.background = route.properties.colour;
 
-                a.textContent = route.properties.ref;
+                a.textContent = "U";
+                var strong = document.createElement("strong");
+                strong.textContent = route.properties.ref.slice(1);
+                a.appendChild(strong);
+
                 a.onclick = (function(routeName) {
                     return function() {
-                        routeLayer.resetRoutes();
-                        stopLists[activeStopList].style.display = "none";
-                        stopLists[routeName].style.display = "block";
-                        activeStopList = routeName;
-                        routeLayer.highlightRoute(routeName);
+                        routeSelected(routeName);
                     };
                 })(route.properties.name);
-
-                // The stops
-
-                var stopList = this._createStopList(route);
-                stopLists[route.properties.name] = stopList;
-
-                stopList.style.display = "none";
-
-                div.appendChild(stopList);
             }
 
-            var activeStopList = routeMaster.routes[0].properties.name;
-            stopLists[activeStopList].style.display = "block";
-            //routeLayer.highlightRoute(activeStopList);
-
-            return div;
+            return ul;
         },
-        _createStopList: function(route) {
-            var div = L.DomUtil.create('div', null, this._div);
-
-            var description = L.DomUtil.create('div', 'ls-route-description', div);
-            description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
-
-            var ul = L.DomUtil.create('ul', 'ls-stop-list', div);
+        createStopList: function(route) {
+            var ul = L.DomUtil.create('ul', 'ls-stop-list');
 
             ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
 
             var routeLayer = this._routeLayer;
+
             var busStops = routeLayer.getStops();
 
             for (var i in route.properties.stops) {
                 var stop = route.properties.stops[i];
-
                 var li = L.DomUtil.create('li', '', ul);
-
                 var busStop = busStops[stop];
-
                 var a = L.DomUtil.create('a', '', li);
 
                 if (typeof(busStop) !== "undefined") {
                     a.textContent = busStop.properties.name;
                     a.onclick = (function(uri) {
                         return function() {
+                            if (document.body.clientWidth <= 767) {
+                              hideSidebars();
+
+                              map.invalidateSize();
+                            }
+
                             routeLayer.panToStop(uri, {
                                 animate: true
                             });
@@ -285,7 +334,7 @@ if ("Sidebar" in L.Control) {
                 }
             }
 
-            return div;
+            return ul;
         }
     });