some js cleaning and comment adding

This commit is contained in:
jlord 2013-07-31 16:41:47 -07:00
parent f6d6f14ed2
commit 264f731adc

View File

@ -119,18 +119,18 @@
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } ) Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
}) })
// so long, so messy
function showInfo(data) { function showInfo(data) {
gData = data gData = data
// make the table, and the search bar
Sheetsee.makeTable(gData, "#hackSpotsTable") Sheetsee.makeTable(gData, "#hackSpotsTable")
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable") Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
// SO MESSY, I KNOW // when someone clicks on a row, highlight it and
// re-center the map
$('.spotRow').live("click", function(event) { $('.spotRow').live("click", function(event) {
$('.spotRow').removeClass("selectedRow") $('.spotRow').removeClass("selectedRow")
console.log("clicked!")
var rowNumber = $(this).closest("tr").attr("id") var rowNumber = $(this).closest("tr").attr("id")
$('#' + rowNumber).addClass("selectedRow") $('#' + rowNumber).addClass("selectedRow")
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber") var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
@ -140,7 +140,6 @@
$('#latestSpot').css("display", "none") $('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline") $('#selectedSpot').html(selectedSpot).css("display", "inline")
var selectedCoords = [dataElement[0].lat, dataElement[0].long] var selectedCoords = [dataElement[0].lat, dataElement[0].long]
console.log(dataElement[0].name, dataElement[0].lat, dataElement[0].long, selectedCoords)
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646") matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13) var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer) addPopups(map, markerLayer)
@ -160,46 +159,50 @@
return latestCompleteSpot[0] return latestCompleteSpot[0]
} }
// find the latest spot with the most important
// info filled in (to prevent map breaking if
// someone is currently editing spreadsheet)
var theLatestSpot = findLatestCompleteSpot(gData) var theLatestSpot = findLatestCompleteSpot(gData)
var latestSpot = ich.latestSpot({ var latestSpot = ich.latestSpot({
rows: theLatestSpot rows: theLatestSpot
}) })
$('#latestSpot').html(latestSpot) $('#latestSpot').html(latestSpot)
function refocusMap(){
var searchTerm = $('#tableFilter').val()
var searchData = Sheetsee.getKeyword(gData, searchTerm)
var searchCoords = ""
// map.setView(viewCoords, zoomLevel)
}
//})
function highlightLastMarker(geoJSON, highlightColor) { function highlightLastMarker(geoJSON, highlightColor) {
geoJSON[0].properties["marker-color"] = highlightColor geoJSON[0].properties["marker-color"] = highlightColor
return geoJSON return geoJSON
} }
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ["name", "address", "city", "rowNumber"] var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON) var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
// change the color of the most recently added spot's marker
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646") var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
// geoJSON[0].properties["maker-color"] = "#E5FF1D" // create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map") var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k') Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13) var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer) addPopups(map, markerLayer)
// design the popups to have the content and
// interactions that we want
function addPopups(map, markerLayer) { function addPopups(map, markerLayer) {
markerLayer.on('click', function(e) { markerLayer.on('click', function(e) {
// e.layer.feature["marker-color"] = "#ff00ff" // clear any selected rows
// map.marker(geoJSON, map, 11).addTo(map)
$('.spotRow').removeClass("selectedRow") $('.spotRow').removeClass("selectedRow")
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber.toString() var rowNumber = e.layer.feature.opts.rowNumber.toString()
// find that row in the table and make consider it selected
$('#' + rowNumber).addClass("selectedRow") $('#' + rowNumber).addClass("selectedRow")
// using row number, find that marker in the geoJSON, give it
// the selected marker color
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646") matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11) // var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer) // addPopups(map, markerLayer)
// using row number, get the data for the selected spot
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber") var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
console.log("rowNumber", rowNumber, "dataElement", dataElement) // take those details and re-write the selected spot section
var selectedSpot = ich.selectedSpot({ var selectedSpot = ich.selectedSpot({
rows: dataElement rows: dataElement
}) })
@ -210,15 +213,16 @@
e.layer.bindPopup(popupContent, {closeButton: false,}) e.layer.bindPopup(popupContent, {closeButton: false,})
}) })
} }
// .addControl(L.mapbox.geocoderControl('examples.map-vyofok3q'));
$('.resetMap').click(function() { $('.resetMap').click(function() {
$('.spotRow').removeClass("selectedRow") $('.spotRow').removeClass("selectedRow")
markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11) markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer)
$('#latestSpot').css("display", "inline") $('#latestSpot').css("display", "inline")
$('#selectedSpot').css("display", "none") $('#selectedSpot').css("display", "none")
}) })
// find total number of spots added
var numberOfSpots = gData.length var numberOfSpots = gData.length
var theNumberofSpots = ich.theNumberofSpots({ var theNumberofSpots = ich.theNumberofSpots({
numberOfSpots: numberOfSpots numberOfSpots: numberOfSpots
@ -231,7 +235,6 @@
var origColor = gData[0].hexcolor var origColor = gData[0].hexcolor
d.properties["marker-color"] = origColor d.properties["marker-color"] = origColor
} }
for (var key in d.opts) { for (var key in d.opts) {
var value = d.opts[key].toString().toLowerCase() var value = d.opts[key].toString().toLowerCase()
if (key === 'rowNumber' && value.match(rowNumber.toString().toLowerCase())) { if (key === 'rowNumber' && value.match(rowNumber.toString().toLowerCase())) {
@ -241,6 +244,7 @@
} }
}) })
} }
} }
</script> </script>