alazyreader/nyc-bookstores
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

remove Tabletop dependency (#2)

Browse Source 
* reformat and remove Tabletop dependency

* add an eslint file

* remove Tabletop from linter file
This commit is contained in:
David
2016-10-02 17:36:28 -04:00
committed by GitHub
parent 6d7fa5b675
commit 90e327b548
5 changed files with 1316 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
index.html
View File

@@ -4,9 +4,7 @@
<meta charset='utf-8'>
<script type="text/javascript" src='js/jquery.js '></script>
<script type="text/javascript" src='js/tabletop1.3.4.js'></script>
<script type="text/javascript" src='js/sheetsee.js'></script>
<script type="text/javascript" src='js/leaflet.markercluster.js'></script>
<link rel="shortcut icon" href="favicon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -95,123 +93,105 @@
{{/rows}}
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var gData
var URL = "0AnhMurQVK5pqdHU0UF9QTFRRNTQwR3hQTFdOV3laRGc"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
// so long, so messy
function showInfo(gData) {
tableData = gData.slice(0).sort(
function(a, b){ return a.name == b.name ? 0 : +(a.name > b.name) || -1; }
);
tableOptions = {
"data": tableData,
"tableDiv": "#hackSpotsTable",
"filterDiv": "#tableFilter"
}
// make the table, and the search bar
Sheetsee.makeTable(tableOptions)
Sheetsee.initiateTableFilter(tableOptions)
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'jllord.n7aml2bc')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, "<h2>{{ name }}</h2>")
// 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 latestSpot = Sheetsee.ich.latestSpot({
rows: theLatestSpot
})
// set it and pan to it
$('#latestSpot').html(latestSpot)
map.setView([theLatestSpot.lat, theLatestSpot.long], 14)
// when someone clicks on a row, highlight it and
// re-center the map
// TODO show popup, change marker color
$('.spotRow').live("click", function(event) {
$('.spotRow').removeClass("selectedRow")
var rowNumber = $(this).closest("tr").attr("id")
$('#' + rowNumber).addClass("selectedRow")
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
var selectedSpot = Sheetsee.ich.selectedSpot({
rows: dataElement
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
var selectedCoords = [dataElement[0].lat, dataElement[0].long]
map.setView(selectedCoords, 14)
})
// so that the first map and info that loads
// is complete and doesn't show rows that are
// actively being edited by folk
function findLatestCompleteSpot(data) {
var latestCompleteSpot = []
var startWithLatestRow = data.reverse()
startWithLatestRow.forEach(function(row){
if (!row.lat || !row.long || !row.name || !row.address || !row.city || !row.state ) return
else latestCompleteSpot.push(row)
})
return latestCompleteSpot[0]
}
// Add click listener to the markerLayer
markerLayer.on('click', function(e) {
// clear any selected rows
$('.spotRow').removeClass("selectedRow")
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber
// find that row in the table and make consider it selected
$('#' + rowNumber).addClass("selectedRow")
// using row number, get the data for the selected spot
var dataElement = Sheetsee.getMatches(gData, rowNumber.toString(), "rowNumber")
// take those details and re-write the selected spot section
var selectedSpot = Sheetsee.ich.selectedSpot({
rows: dataElement
})
// center the map on the selected element
map.panTo([dataElement[0].lat, dataElement[0].long])
// update the spot listing
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
})
// reset the map, zoom out, and recenter on 0,0
$('.resetMap').click(function() {
$('.spotRow').removeClass("selectedRow")
$('#latestSpot').css("display", "inline")
$('#selectedSpot').css("display", "none")
map.setView([0,0], 1)
})
// find total number of spots added
var theNumberofSpots = Sheetsee.ich.theNumberofSpots({
numberOfSpots: gData.length
})
$('#theNumberofSpots').html(theNumberofSpots)
if(window.location.hash) {
$('#tableFilter').val(window.location.hash.substring(1)).keyup()
$('.spotRow').first().click()
}
<script type="text/javascript">
function showInfo(gData) {
var tableData = gData.slice(0).sort(
function(a, b){
var aname = a.name.toLowerCase();
var bname = b.name.toLowerCase();
return aname === bname ? 0 : +(aname > bname) || -1;
}
);
$(document).on('keyup', '#tableFilter', function() {
window.location.hash = $(this).val()
$('.spotRow').first().click()
})
</script>
var tableOptions = {
'data': tableData,
'tableDiv': '#hackSpotsTable',
'filterDiv': '#tableFilter'
};
// make the table, and the search bar
Sheetsee.makeTable(tableOptions);
Sheetsee.initiateTableFilter(tableOptions);
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ['name', 'address', 'city', 'rowNumber'];
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON);
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap('map');
Sheetsee.addTileLayer(map, 'jllord.n7aml2bc');
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, '<h2>{{ name }}</h2>');
var theLatestSpot = gData[gData.length - 1];
var latestSpot = Sheetsee.ich.latestSpot({
rows: theLatestSpot
});
// set it and pan to it
$('#latestSpot').html(latestSpot);
map.setView([theLatestSpot.lat, theLatestSpot.long], 14);
// when someone clicks on a row, highlight it and re-center the map
$('.spotRow').live('click', function() {
$('.spotRow').removeClass('selectedRow');
var rowNumber = $(this).closest('tr').attr('id');
$('#' + rowNumber).addClass('selectedRow');
var dataElement = Sheetsee.getMatches(gData, rowNumber, 'rowNumber');
var selectedSpot = Sheetsee.ich.selectedSpot({ rows: dataElement });
$('#latestSpot').css('display', 'none');
$('#selectedSpot').html(selectedSpot).css('display', 'inline');
var selectedCoords = [dataElement[0].lat, dataElement[0].long];
map.setView(selectedCoords, 14);
});
// Add click listener to the markerLayer
markerLayer.on('click', function(e) {
// clear any selected rows
$('.spotRow').removeClass('selectedRow');
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber;
// find that row in the table and make consider it selected
$('#' + rowNumber).addClass('selectedRow');
// using row number, get the data for the selected spot
var dataElement = Sheetsee.getMatches(gData, rowNumber.toString(), 'rowNumber');
// take those details and re-write the selected spot section
var selectedSpot = Sheetsee.ich.selectedSpot({ rows: dataElement });
// center the map on the selected element
map.panTo([dataElement[0].lat, dataElement[0].long]);
// update the spot listing
$('#latestSpot').css('display', 'none');
$('#selectedSpot').html(selectedSpot).css('display', 'inline');
});
// reset the map, zoom out, and recenter on 0,0
$('.resetMap').click(function() {
$('.spotRow').removeClass('selectedRow');
$('#latestSpot').css('display', 'inline');
$('#selectedSpot').css('display', 'none');
map.setView([0, 0], 1);
});
// find total number of spots added
$('#theNumberofSpots').html(Sheetsee.ich.theNumberofSpots({ numberOfSpots: gData.length }));
if (window.location.hash) {
$('#tableFilter').val(window.location.hash.substring(1)).keyup();
$('.spotRow').first().click();
}
}
document.addEventListener('DOMContentLoaded', function() {
$.getJSON('./stores.json', function(data) {
$.each(data, function(key, value) { value.rowNumber = key; });
showInfo(data);
});
});
$(document).on('keyup', '#tableFilter', function() {
window.location.hash = $(this).val();
$('.spotRow').first().click();
});
</script>
</body>
</html>