Route improvements

Work towards making the route parts an independant plugin. Also make several
other improvements in the process.

2 files changed, 205 insertions, 163 deletions

diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
index 0cc76ca..dbce204 100644
--- a/resources/leaflet-route/leaflet-route.js
+++ b/resources/leaflet-route/leaflet-route.js
@@ -141,200 +141,230 @@ 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.Route = {};
 
-            L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
-            L.setOptions(this, options);
+L.Control.Route.createRouteMasterList = function(routeMasters, routeSelected, sortFunction) {
+    var ul = L.DomUtil.create('ul', 'ls-route-list');
 
-            this._routeLayer = routeLayer;
+    var routeMasterNames = Object.keys(routeMasters);
 
-            var title = L.DomUtil.create('div', 'ls-routes-title', this._contentContainer);
-            title.textContent = "University Bus Routes";
+    if (sortFunction) {
+        routeMasterNames.sort(sortFunction);
+    }
 
-            var routeMasters = this._routeLayer.getRouteMasters();
+    for (var i in routeMasterNames) {
+        var name = routeMasterNames[i]
+        var routeMaster = routeMasters[name];
 
-            var routeMasterRouteLists = {};
+        var li = L.DomUtil.create('li', '', ul);
+        var a = L.DomUtil.create('a', null, li);
 
-            var ul = L.DomUtil.create('ul', 'ls-route-master-list', this._contentContainer);
+        a.style.background = routeMaster.routes[0].properties.colour;
 
-            var routeMasterNames = Object.keys(routeMasters);
-            if (this.options.routeMasterSort) {
-                routeMasterNames.sort(this.options.routeMasterSort);
-            }
+        a.textContent = "U";
+        var strong = document.createElement("strong");
+        strong.textContent = routeMaster.name.slice(1);
+        a.appendChild(strong);
 
-            var descriptions = {};
-            var stopLists = {};
+        a.onclick = (function(routeName) {
+            return function() {
+                routeSelected(routeName);
+            };
+        })(routeMaster.name);
+    }
 
-            var activeRouteMaster = "U1";
-            var activeRouteForRouteMaster = {};
+    return ul;
+};
 
-            for (var i in routeMasterNames) {
-                var routeMasterName = routeMasterNames[i];
-                var routeMaster = routeMasters[routeMasterName];
+L.Control.Route.createRouteList = function(routeMaster, routeSelected) {
+    var ul = L.DomUtil.create('ul', 'ls-route-list');
 
-                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";
+    for (var i in routeMaster.routes) {
+        var route = routeMaster.routes[i];
 
-                var strong = document.createElement("strong");
-                strong.textContent = routeMasterName.slice(1);
+        var li = L.DomUtil.create('li', '', ul);
+        var a = L.DomUtil.create('a', null, li);
 
-                console.log(routeMaster);
+        a.style.background = route.properties.colour;
 
-                a.appendChild(strong);
+        a.textContent = "U";
+        var strong = document.createElement("strong");
+        strong.textContent = route.properties.ref.slice(1);
+        a.appendChild(strong);
 
-                activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
+        a.onclick = (function(routeName) {
+            return function() {
+                routeSelected(routeName);
+            };
+        })(route.properties.name);
+    }
 
-                a.onclick = (function(routeMasterName) {
-                    return function() {
-                        routeMasterRouteLists[activeRouteMaster].style.display = "none";
-                        routeMasterRouteLists[routeMasterName].style.display = "block";
+    return ul;
+};
 
-                        var activeRoute = activeRouteForRouteMaster[routeMasterName];
+L.Control.Route.createStopList = function(route, routeLayer) {
+    var ul = L.DomUtil.create('ul', 'ls-stop-list');
 
-                        showStopList(activeRoute);
+    ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
 
-                        activeRouteMaster = routeMasterName;
+    var busStops = routeLayer.getStops();
 
-                        routeLayer.resetRoutes();
-                        routeLayer.highlightRoute(activeRoute);
-                    };
-                })(routeMasterName);
+    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);
 
-                // The route lists
+        if (typeof(busStop) !== "undefined") {
+            a.textContent = busStop.properties.name;
+            li.onclick = (function(uri) {
+                return function() {
+                    if (document.body.clientWidth <= 767) {
+                      hideSidebars();
 
-                var routeList = this.createRouteList(routeMaster, function(routeName) {
-                    routeLayer.resetRoutes();
+                      map.invalidateSize();
+                    }
 
-                    showStopList(routeName);
+                    routeLayer.panToStop(uri, {
+                        animate: true
+                    });
+                };
+            })(busStop.properties.uri);
+            li.onmouseover = (function(uri) {
+                return function() {
+                    routeLayer.highlightStop(uri);
+                };
+            })(busStop.properties.uri);
+            li.onmouseout = (function(uri) {
+                return function() {
+                    routeLayer.resetStop(uri);
+                };
+            })(busStop.properties.uri);
+        } else {
+            a.textContent = "Name Unknown";
+        }
+    }
 
-                    activeRouteForRouteMaster[activeRouteMaster] = routeName;
-                    routeLayer.highlightRoute(routeName);
-                });
+    return ul;
+};
 
-                routeMasterRouteLists[routeMasterName] = routeList;
+L.Control.Route.create = function(routeLayer) {
+    function showStopList(name) {
+        var previousActiveRoute = activeRouteForRouteMaster[activeRouteMaster];
 
-                routeList.style.display = "none";
-                this._contentContainer.appendChild(routeList);
+        stopLists[previousActiveRoute].style.display = "none";
+        descriptions[previousActiveRoute].style.display = "none"
+        stopLists[name].style.display = "block";
+        descriptions[name].style.display = "block"
+    }
 
-                // The stops
-                for (var i in routeMaster.routes) {
-                    var route = routeMaster.routes[i];
+    var busRouteSidebarContent = document.createDocumentFragment();
 
-                    // Add the description
-                    var description = L.DomUtil.create('div', 'ls-route-description');
-                    description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
+    var routeMasters = routeLayer.getRouteMasters();
+    var routeMasterRouteLists = {};
+    var stopLists = {};
+    var descriptions = {};
 
-                    descriptions[route.properties.name] = description;
+    var routeMasterNames = Object.keys(routeMasters);
 
-                    // Add the list of stops
-                    var stopList = this.createStopList(route);
-                    stopLists[route.properties.name] = stopList;
+    var sortFunction = function(a, b) {
+        var refs = {
+            "U1": 1,
+            "U2": 2,
+            "U6": 6,
+            "U9": 9,
+            "U1N": 10
+        };
 
-                    if (activeRouteMaster === routeMasterName &&
-                        activeRouteForRouteMaster[routeMasterName] === route.properties.name) {
+        return refs[a] - refs[b];
+    };
 
-                        stopList.style.display = "block";
-                        description.style.display = "block";
-                    } else {
-                        stopList.style.display = "none";
-                        description.style.display = "none";
-                    }
+    var activeRouteMaster = "U1";
+    var activeRouteForRouteMaster = {};
 
-                    this._contentContainer.appendChild(description);
-                    this._contentContainer.appendChild(stopList);
-                }
-            }
+    var showRouteMaster = function(routeMasterName) {
+        routeMasterRouteLists[activeRouteMaster].style.display = "none";
+        routeMasterRouteLists[routeMasterName].style.display = "block";
 
-            var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
+        var activeRoute = activeRouteForRouteMaster[routeMasterName];
 
-            routeMasterRouteLists[activeRouteMaster].style.display = "block";
-        },
-        createRouteList: function(routeMaster, routeSelected) {
-            var ul = L.DomUtil.create('ul', 'ls-route-list');
+        showStopList(activeRoute);
 
-            var stopLists = {};
-            for (var i in routeMaster.routes) {
-                var route = routeMaster.routes[i];
+        activeRouteMaster = routeMasterName;
 
-                var li = L.DomUtil.create('li', '', ul);
-                var a = L.DomUtil.create('a', null, li);
+        routeLayer.resetRoutes();
+        routeLayer.highlightRoute(activeRoute);
+    };
 
-                a.style.background = route.properties.colour;
+    var routeMasterControl = L.Control.Route.createRouteMasterList(routeMasters, showRouteMaster, sortFunction);
 
-                a.textContent = "U";
-                var strong = document.createElement("strong");
-                strong.textContent = route.properties.ref.slice(1);
-                a.appendChild(strong);
+    busRouteSidebarContent.appendChild(routeMasterControl);
 
-                a.onclick = (function(routeName) {
-                    return function() {
-                        routeSelected(routeName);
-                    };
-                })(route.properties.name);
-            }
+    for (var i in routeMasterNames) {
+        var routeMasterName = routeMasterNames[i];
+        var routeMaster = routeMasters[routeMasterName];
 
-            return ul;
-        },
-        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
-                            });
-                        };
-                    })(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";
-                }
+        activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
+
+        // The route lists
+
+        var routeList = L.Control.Route.createRouteList(routeMaster, function(routeName) {
+            routeLayer.resetRoutes();
+
+            showStopList(routeName);
+
+            activeRouteForRouteMaster[activeRouteMaster] = routeName;
+            routeLayer.highlightRoute(routeName);
+        });
+
+        routeMasterRouteLists[routeMasterName] = routeList;
+
+        routeList.style.display = "none";
+        busRouteSidebarContent.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 = L.Control.Route.createStopList(route, routeLayer);
+            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";
             }
 
-            return ul;
+            busRouteSidebarContent.appendChild(description);
+            busRouteSidebarContent.appendChild(stopList);
+        }
+    }
+
+    routeMasterRouteLists[activeRouteMaster].style.display = "block";
+
+    return busRouteSidebarContent;
+}
+
+if ("Sidebar" in L.Control) {
+    L.Control.RouteSidebar = L.Control.Sidebar.extend({
+        initialize: function (routeLayer, placeholder, options) {
+            L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
+            L.setOptions(this, options);
+
+            var controls = L.Control.Route.create(routeLayer);
+
+            this.getContainer().appendChild(controls);
         }
     });
 
diff --git a/src/leaflet-soton.js b/src/leaflet-soton.js
index 3edb8ba..4488f1a 100644
--- a/src/leaflet-soton.js
+++ b/src/leaflet-soton.js
@@ -548,20 +548,32 @@ SELECT * WHERE {\
                     content.appendChild(table);
                 });
             },
-            busStop: function(properties) {
+            busStop: function(properties, routeLayer) {
                 return getTemplateWrapper(properties, function(content) {
 
-                    var routeList = document.createElement("ul");
-                    routeList.className = "ls-route-list";
+                    var routesList = [];
+                    var routeMasters = routeLayer.getRouteMasters();
 
-                    properties.routes.forEach(function(route) {
-                        var routeLi = document.createElement("li");
-                        routeLi.textContent = route;
+                    for (var routeMasterName in routeMasters) {
+                        var routeMaster = routeMasters[routeMasterName];
 
-                        routeList.appendChild(routeLi);
+                        for (var i in routeMaster.routes) {
+                            var route = routeMaster.routes[i];
+
+                            if (properties.routes.indexOf(route.properties.ref) !== -1) {
+                                routesList.push(route);
+                            }
+                        }
+                    }
+
+                    var routeListControl = L.Control.Route.createRouteList({
+                        routes: routesList
+                    }, function(routeName) {
+                        routeLayer.resetRoutes();
+                        routeLayer.highlightRoute(routeName);
                     });
 
-                    content.appendChild(routeList);
+                    content.appendChild(routeListControl);
 
                     var IFrame = document.createElement('iframe');
                     IFrame.setAttribute('src', 'http://bus.southampton.ac.uk/bus-stop-iframe/' + properties.uri.slice(37)  + ".html")
@@ -885,7 +897,7 @@ SELECT * WHERE {\
                         routeOptions: {
                             onEachFeature: function(feature, layer) {
                                 layer.on('click', function(e) {
-                                    var content = busRouteTemplate(feature.properties);
+                                    var content = LS.infoTemplates.busRoute(feature.properties, routeLayer);
 
                                     map.showInfo(content, e.latlng);
                                 });
@@ -895,7 +907,7 @@ SELECT * WHERE {\
                         stopOptions: {
                             onEachFeature: function(feature, layer) {
                                 layer.on('click', function(e) {
-                                    var content = LS.infoTemplates.busStop(feature.properties);
+                                    var content = LS.infoTemplates.busStop(feature.properties, routeLayer);
 
                                     map.showInfo(content, e.latlng);
                                 });
@@ -905,7 +917,7 @@ SELECT * WHERE {\
                     routeLayer.addTo(map);
 
                     if (options.busRoutes && options.busRouteControl) {
-                        var routeControl = new L.Control.Route(routeLayer, "sidebar", {
+                        var routeControl = new L.Control.RouteSidebar(routeLayer, "sidebar", {
                             routeMasterSort: function(a, b) {
                                 var refs = {
                                     "U1": 1,
@@ -917,7 +929,7 @@ SELECT * WHERE {\
 
                                 return refs[a] - refs[b];
                             },
-                            position: "right"
+                            position: "left"
                         });
                         routeControl.addTo(map);
                         routeControl.show();