Fix interactive bus stops

They previously only worked if the bus routes were displayed. This commit also
checks for the existance of the route and sidebar classes before attempting to
use them.

1 files changed, 141 insertions, 139 deletions

diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
index 501a620..8dd0759 100644
--- a/resources/leaflet-route/leaflet-route.js
+++ b/resources/leaflet-route/leaflet-route.js
@@ -141,178 +141,180 @@ L.Route = L.FeatureGroup.extend({
     }
 });
 
-L.Control.Route = L.Control.Sidebar.extend({
-    initialize: function (routeLayer, placeholder, options) {
-        L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
-        L.setOptions(this, options);
-
-        this._routeLayer = routeLayer;
-
-        var title = L.DomUtil.create('div', 'ls-routes-title', this._contentContainer);
-        title.textContent = "University Bus Routes";
-
-        var routeMasters = this._routeLayer.getRouteMasters();
-
-        var routeMasterRouteLists = {};
-
-        var ul = L.DomUtil.create('ul', 'ls-route-master-list', this._contentContainer);
-
-        var routeMasterNames = Object.keys(routeMasters);
-        if (this.options.routeMasterSort) {
-            routeMasterNames.sort(this.options.routeMasterSort);
-        }
-
-        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;
+if ("Sidebar" in L.Control) {
+    L.Control.Route = L.Control.Sidebar.extend({
+        initialize: function (routeLayer, placeholder, options) {
+            L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
+            L.setOptions(this, options);
 
-            a.textContent = routeMaster.name;
-            a.onclick = (function(routeMasterName) {
-                return function() {
-                    routeMasterRouteLists[activeRouteMaster].style.display = "none";
-                    routeMasterRouteLists[routeMasterName].style.display = "block";
-                    activeRouteMaster = routeMasterName;
-                };
-            })(routeMasterName);
-
-            // The route lists
+            this._routeLayer = routeLayer;
 
-            var routeList = this._createRouteList(routeMaster);
-            routeMasterRouteLists[routeMasterName] = routeList;
+            var title = L.DomUtil.create('div', 'ls-routes-title', this._contentContainer);
+            title.textContent = "University Bus Routes";
 
-            routeList.style.display = "none";
+            var routeMasters = this._routeLayer.getRouteMasters();
 
-            this._contentContainer.appendChild(routeList);
-        }
+            var routeMasterRouteLists = {};
 
-        var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
+            var ul = L.DomUtil.create('ul', 'ls-route-master-list', this._contentContainer);
 
-        routeMasterRouteLists[activeRouteMaster].style.display = "block";
-    },
-    _createRouteList: function(routeMaster) {
-        var div = L.DomUtil.create('div', null);
+            var routeMasterNames = Object.keys(routeMasters);
+            if (this.options.routeMasterSort) {
+                routeMasterNames.sort(this.options.routeMasterSort);
+            }
 
-        var ul = L.DomUtil.create('ul', 'ls-route-list', div);
+            for (var i in routeMasterNames) {
+                var routeMasterName = routeMasterNames[i];
+                var routeMaster = routeMasters[routeMasterName];
 
-        var routeLayer = this._routeLayer;
+                var li = L.DomUtil.create('li', '', ul);
+                var a = L.DomUtil.create('a', '', li);
 
-        var stopLists = {};
-        for (var i in routeMaster.routes) {
-            var route = routeMaster.routes[i];
+                a.style.background = routeMaster.routes[0].properties.colour;
 
-            var li = L.DomUtil.create('li', '', ul);
-            var a = L.DomUtil.create('a', null, li);
+                a.textContent = routeMaster.name;
+                a.onclick = (function(routeMasterName) {
+                    return function() {
+                        routeMasterRouteLists[activeRouteMaster].style.display = "none";
+                        routeMasterRouteLists[routeMasterName].style.display = "block";
+                        activeRouteMaster = routeMasterName;
+                    };
+                })(routeMasterName);
 
-            //a.style.borderColor = route.properties.colour;
-            a.style.background = route.properties.colour;
+                // The route lists
 
-            a.textContent = route.properties.ref;
-            a.onclick = (function(routeName) {
-                return function() {
-                    routeLayer.resetRoutes();
-                    stopLists[activeStopList].style.display = "none";
-                    stopLists[routeName].style.display = "block";
-                    activeStopList = routeName;
-                    routeLayer.highlightRoute(routeName);
-                };
-            })(route.properties.name);
+                var routeList = this._createRouteList(routeMaster);
+                routeMasterRouteLists[routeMasterName] = routeList;
 
-            // The stops
+                routeList.style.display = "none";
 
-            var stopList = this._createStopList(route);
-            stopLists[route.properties.name] = stopList;
+                this._contentContainer.appendChild(routeList);
+            }
 
-            stopList.style.display = "none";
+            var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
 
-            div.appendChild(stopList);
-        }
+            routeMasterRouteLists[activeRouteMaster].style.display = "block";
+        },
+        _createRouteList: function(routeMaster) {
+            var div = L.DomUtil.create('div', null);
 
-        var activeStopList = routeMaster.routes[0].properties.name;
-        stopLists[activeStopList].style.display = "block";
-        //routeLayer.highlightRoute(activeStopList);
+            var ul = L.DomUtil.create('ul', 'ls-route-list', div);
 
-        return div;
-    },
-    _createStopList: function(route) {
-        var div = L.DomUtil.create('div', null, this._div);
+            var routeLayer = this._routeLayer;
 
-        var description = L.DomUtil.create('div', 'ls-route-description', div);
-        description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
+            var stopLists = {};
+            for (var i in routeMaster.routes) {
+                var route = routeMaster.routes[i];
 
-        var ul = L.DomUtil.create('ul', 'ls-stop-list', div);
+                var li = L.DomUtil.create('li', '', ul);
+                var a = L.DomUtil.create('a', null, li);
 
-        ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
+                //a.style.borderColor = route.properties.colour;
+                a.style.background = route.properties.colour;
 
-        var routeLayer = this._routeLayer;
-        var busStops = routeLayer.getStops();
+                a.textContent = route.properties.ref;
+                a.onclick = (function(routeName) {
+                    return function() {
+                        routeLayer.resetRoutes();
+                        stopLists[activeStopList].style.display = "none";
+                        stopLists[routeName].style.display = "block";
+                        activeStopList = routeName;
+                        routeLayer.highlightRoute(routeName);
+                    };
+                })(route.properties.name);
 
-        for (var i in route.properties.stops) {
-            var stop = route.properties.stops[i];
+                // The stops
 
-            var li = L.DomUtil.create('li', '', ul);
+                var stopList = this._createStopList(route);
+                stopLists[route.properties.name] = stopList;
 
-            var busStop = busStops[stop];
+                stopList.style.display = "none";
 
-            var a = L.DomUtil.create('a', '', li);
+                div.appendChild(stopList);
+            }
 
-            if (typeof(busStop) !== "undefined") {
-                a.textContent = busStop.properties.name;
-                a.onclick = (function(uri) {
-                    return function() {
-                        routeLayer.panToStop(uri, {
-                            animate: true
-                        });
-                    };
-                })(busStop.properties.uri);
-                a.onmouseover = (function(uri) {
-                    return function() {
-                        routeLayer.highlightStop(uri);
-                    };
-                })(busStop.properties.uri);
-                a.onmouseout = (function(uri) {
-                    return function() {
-                        routeLayer.resetStop(uri);
-                    };
-                })(busStop.properties.uri);
-            } else {
-                a.textContent = "Name Unknown";
+            var activeStopList = routeMaster.routes[0].properties.name;
+            stopLists[activeStopList].style.display = "block";
+            //routeLayer.highlightRoute(activeStopList);
+
+            return div;
+        },
+        _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);
+
+            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() {
+                            routeLayer.panToStop(uri, {
+                                animate: true
+                            });
+                        };
+                    })(busStop.properties.uri);
+                    a.onmouseover = (function(uri) {
+                        return function() {
+                            routeLayer.highlightStop(uri);
+                        };
+                    })(busStop.properties.uri);
+                    a.onmouseout = (function(uri) {
+                        return function() {
+                            routeLayer.resetStop(uri);
+                        };
+                    })(busStop.properties.uri);
+                } else {
+                    a.textContent = "Name Unknown";
+                }
             }
-        }
 
-        return div;
-    }
-});
+            return div;
+        }
+    });
 
-L.Control.ShowRouteSidebar = L.Control.extend({
-    options: {
-        position: 'topleft',
-    },
+    L.Control.ShowRouteSidebar = L.Control.extend({
+        options: {
+            position: 'topleft',
+        },
 
-    initialize: function(sidebar, options) {
-        this._sidebar = sidebar;
-    },
+        initialize: function(sidebar, options) {
+            this._sidebar = sidebar;
+        },
 
-    onAdd: function (map) {
-        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+        onAdd: function (map) {
+            var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
 
-        var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
-        link.href = '#';
+            var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
+            link.href = '#';
 
-        var sidebar = this._sidebar;
+            var sidebar = this._sidebar;
 
-        L.DomEvent
-            .on(link, 'click', L.DomEvent.stopPropagation)
-            .on(link, 'click', L.DomEvent.preventDefault)
-            .on(link, 'click', function() {
-                sidebar.toggle();
-            })
-            .on(link, 'dblclick', L.DomEvent.stopPropagation);
+            L.DomEvent
+                .on(link, 'click', L.DomEvent.stopPropagation)
+                .on(link, 'click', L.DomEvent.preventDefault)
+                .on(link, 'click', function() {
+                    sidebar.toggle();
+                })
+                .on(link, 'dblclick', L.DomEvent.stopPropagation);
 
-        return container;
-    }
-});
+            return container;
+        }
+    });
+}