diff options
Diffstat (limited to 'scripts.js')
| -rw-r--r-- | scripts.js | 296 |
1 files changed, 296 insertions, 0 deletions
diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..982e2d7 --- /dev/null +++ b/scripts.js @@ -0,0 +1,296 @@ +(function() { + "use strict"; + + LS.imagePath = 'images/'; + LS.dataPath = 'data.json'; + + var $buildingsSidebar = $('#buildingsSidebar'); + var $sitesSidebar = $('#sitesSidebar'); + + var $navBuildingsLi = $('#navBuildingsLi'); + var $navSitesLi = $('#navSitesLi'); + + function hideSitesSidebar() { + $sitesSidebar.hide(); + $navSitesLi.removeClass("active"); + } + + function hideBuildingsSidebar() { + $buildingsSidebar.hide(); + $navBuildingsLi.removeClass("active"); + } + + var buildingsSidebarLink = document.getElementById("buildingsSidebarLink") + buildingsSidebarLink.onclick = function() { + hideSitesSidebar(); + + $navBuildingsLi.toggleClass("active"); + $buildingsSidebar.toggle(); + + map.invalidateSize(); + + return false; + }; + + var sitesSidebarLink = document.getElementById("sitesSidebarLink") + sitesSidebarLink.onclick = function() { + hideBuildingsSidebar(); + + $navSitesLi.toggleClass("active"); + $sitesSidebar.toggle(); + + map.invalidateSize(); + + return false; + }; + + var buildingsSidebarHideButton = document.getElementById("buildingsSidebarHideButton"); + buildingsSidebarHideButton.onclick = function() { + hideBuildingsSidebar(); + + map.invalidateSize(); + return false; + }; + + var sitesSidebarHideButton = document.getElementById("sitesSidebarHideButton"); + sitesSidebarHideButton.onclick = function() { + hideSitesSidebar(); + + map.invalidateSize(); + + return false; + }; + + var map = LS.map('map', { + workstations: true, + indoor: true, + popupWidth: 550, + popupHeight: 550, + zoomControl: false, + levelControlPosition: 'bottomleft' + }); + + map.showInfo = function(content, latlng, options) { + var $content = $(content); + + var contentTitle = $content.children('h2'); + var titleText = contentTitle.text(); + contentTitle.remove(); + + $("#feature-title").html(titleText); + $("#feature-info").html(content); + $("#featureModal").modal("show"); + }; + + map.closeInfo = function() { + $("#featureModal").modal("hide"); + }; + + var zoomControl = L.control.zoom({ + position: "bottomright" + }).addTo(map); + + /* GPS enabled geolocation control set to follow the user's location */ + var locateControl = L.control.locate({ + position: "bottomright", + drawCircle: true, + follow: true, + setView: true, + keepCurrentZoomLevel: true, + markerStyle: { + weight: 1, + opacity: 0.8, + fillOpacity: 0.8 + }, + circleStyle: { + weight: 1, + clickable: false + }, + icon: "icon-direction", + metric: false, + strings: { + title: "My location", + popup: "You are within {distance} {unit} from this point", + outsideMapBoundsMsg: "You seem located outside the boundaries of the map" + }, + locateOptions: { + maxZoom: 18, + watch: true, + enableHighAccuracy: true, + maximumAge: 10000, + timeout: 10000 + } + }).addTo(map); + + /* Larger screens get expanded layer control and visible sidebar */ + if (document.body.clientWidth <= 767) { + var isCollapsed = true; + } else { + var isCollapsed = false; + } + + /* Highlight search box text on click */ + $("#searchbox").click(function () { + $(this).select(); + }); + + /* Typeahead search functionality */ + LS.getData(function(data) { + + function buildRow(first, second) { + var tr = document.createElement("tr"); + tr.style = "cursor: pointer;" + + var reftd = document.createElement("td"); + reftd.className = "feature-ref"; + reftd.style.verticalAlign = "middle"; + reftd.appendChild(first); + tr.appendChild(reftd); + + var featuretd = document.createElement("td"); + featuretd.className = "feature-name"; + featuretd.appendChild(second); + tr.appendChild(featuretd); + + var arrowtd = document.createElement("td"); + arrowtd.style.verticalAlign = "middle"; + var i = document.createElement("i"); + i.className = "glyphicon glyphicon-chevron-right pull-right"; + arrowtd.appendChild(i); + tr.appendChild(arrowtd); + + return tr; + } + + function show(uri) { + return function() { + map.panByURI(uri); + + /* Hide sidebars and go to the map on small screens */ + if (document.body.clientWidth <= 767) { + hideSitesSidebar(); + hideBuildingsSidebar(); + + map.invalidateSize(); + } + }; + } + + var buildingstbody = $("#buildingsList tbody"); + + data.buildings.features.forEach(function(building) { + if (!("loc_ref" in building.properties) || + building.properties.name.length === 0) { + return; + } + + var loc_ref = document.createTextNode(building.properties.loc_ref); + var name = document.createTextNode(building.properties.name); + var tr = buildRow(loc_ref, name); + + tr.onclick = show(building.properties.uri); + + buildingstbody.append(tr); + }); + + var buildingsList = new List("buildings", { + valueNames: [ + "feature-ref", + "feature-name" + ] + }); + buildingsList.sort("feature-name", { + order:"asc" + }); + + buildingsList.on("filterStart", function() { + console.log("filterComplete"); + + console.log(buildingsList.matchingItems); + }); + + var sitestbody = $("#sitesList tbody"); + + data.sites.features.forEach(function(site) { + if (!("name" in site.properties)) { + return; + } + + var loc_ref = document.createTextNode(site.properties.loc_ref); + var name = document.createTextNode(site.properties.name); + var tr = buildRow(loc_ref, name); + + tr.onclick = show(site.properties.uri); + + sitestbody.append(tr); + }); + + var sitesList = new List("sites", {valueNames: ["feature-ref", "feature-name"]}); + sitesList.sort("feature-name", {order:"asc"}); + + var buildingsBH = new Bloodhound({ + name: "Buildings", + datumTokenizer: function (d) { + return Bloodhound.tokenizers.whitespace(d.properties.loc_ref + " " + d.properties.name); + }, + queryTokenizer: Bloodhound.tokenizers.whitespace, + local: data.buildings.features, + limit: 10 + }); + + buildingsBH.initialize(); + + var sitesBH = new Bloodhound({ + name: "Buildings", + datumTokenizer: function (d) { + return Bloodhound.tokenizers.whitespace(d.properties.loc_ref + " " +d.properties.name); + }, + queryTokenizer: Bloodhound.tokenizers.whitespace, + local: data.sites.features, + limit: 10 + }); + + sitesBH.initialize(); + + /* instantiate the typeahead UI */ + $("#searchbox").typeahead({ + minLength: 1, + highlight: true, + hint: false + }, { + name: "Buildings", + displayKey: "name", + source: buildingsBH.ttAdapter(), + templates: { + header: "<h4 class='typeahead-header'>Buildings</h4>", + suggestion: function(feature) { + return feature.properties.name + "<br> <small>" + feature.properties.loc_ref + "</small>"; + } + } + }, { + name: "Sites", + displayKey: "name", + source: sitesBH.ttAdapter(), + templates: { + header: "<h4 class='typeahead-header'>Sites</h4>", + suggestion: function(feature) { + return feature.properties.name + "<br> <small>" + feature.properties.loc_ref + "</small>"; + } + } + }).on("typeahead:selected", function (obj, feature) { + map.panByURI(feature.properties.uri); + + if ($(".navbar-collapse").height() > 50) { + $(".navbar-collapse").collapse("hide"); + } + }).on("typeahead:opened", function () { + $(".navbar-collapse.in").css("max-height", $(document).height() - $(".navbar-header").height()); + $(".navbar-collapse.in").css("height", $(document).height() - $(".navbar-header").height()); + }).on("typeahead:closed", function () { + $(".navbar-collapse.in").css("max-height", ""); + $(".navbar-collapse.in").css("height", ""); + }); + $(".twitter-typeahead").css("position", "static"); + $(".twitter-typeahead").css("display", "block"); + }); +})(); |