diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/leaflet-route/leaflet-route.js | 332 |
1 files changed, 181 insertions, 151 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); } }); |