update tabletop

This commit is contained in:
Jessica Lord 2014-06-28 15:26:30 -07:00
parent ceff5429ff
commit a78b4f9213
2 changed files with 39 additions and 38 deletions

View File

@ -1,10 +1,10 @@
<html>
<head>
<title>Hack Spots</title>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
<script type="text/javascript" src='js/jquery.js '></script>
<script type="text/javascript" src='js/tabletop.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="https://raw.github.com/jlord/hack-spots/master/favico.png"/>
@ -12,9 +12,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic'>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700'>
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/site.css">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700'>
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
</head>
@ -46,7 +46,7 @@
<div id="info" class="container">
<h3>Contribute!</h3>
<div id="theNumberofSpots"></div>
<p>This website is hooked up to <a href="https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0" target="_blank">this Google Spreadsheet</a>, which I've shared, so click and add your favorite hack spots to the bottom of the list! For the map you'll need to <strong>get the lat and long</strong> of the spot, you can get that <a href="http://www.latlong.net/" target="_blank">here</a>. The locating of these places is helpful, so please try to fill out all the columns.</p>
<p>This website is hooked up to <a href="https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0" target="_blank">this Google Spreadsheet</a>, which I've shared, so click and add your favorite hack spots to the bottom of the list! For the map you'll need to <strong>get the lat and long</strong> of the spot, you can get that <a href="http://www.latlong.net/" target="_blank">here</a>. The locating of these places is helpful, so please try to fill out all the columns.</p>
<h3>Info</h3>
<p>When I'm visiting a new city I'd like to know which coffee shops have the best vibes, great coffee and are good for hunkering down and having a good hack. Yelp will tell you where the Starbucks is and Foursquare will tell you where your friend's have <em>been</em> - but did they like it and was it a grab in go place or a hack place? Plus, what about the people I don't follow on Foursquare or who can't check-in when in other countries?</p>
@ -124,13 +124,13 @@
var gData
// var URL = "10z-2P8l88hLF35EodIjigs5cyCD7BtmfZS631JMtIUU" // test new spreadsheets
var URL = "0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
// so long, so messy
function showInfo(data) {
gData = data
function showInfo(gData) {
gData
// make the table, and the search bar
Sheetsee.makeTable(gData, "#hackSpotsTable")
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
@ -162,7 +162,7 @@
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)
else latestCompleteSpot.push(row)
})
return latestCompleteSpot[0]
}
@ -187,6 +187,7 @@
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
// change the color of the most recently added spot's marker
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
@ -201,7 +202,7 @@
marker.bindPopup(popupContent, {closeButton: false,})
})
markerLayer.on('click', function(e) {
// clear any selected rows
// clear any selected rows
$('.spotRow').removeClass("selectedRow")
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber.toString()
@ -217,7 +218,7 @@
// take those details and re-write the selected spot section
var selectedSpot = ich.selectedSpot({
rows: dataElement
})
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
})

View File

@ -22,7 +22,7 @@
} catch (e) { }
// Create a simple indexOf function for support
// of older browsers. Uses native indexOf if
// of older browsers. Uses native indexOf if
// available. Code similar to underscores.
// By making a separate function, instead of adding
// to the prototype, we will not break bad for loops
@ -30,12 +30,12 @@
var indexOfProto = Array.prototype.indexOf;
var ttIndexOf = function(array, item) {
var i = 0, l = array.length;
if (indexOfProto && array.indexOf === indexOfProto) return array.indexOf(item);
for (; i < l; i++) if (array[i] === item) return i;
return -1;
};
/*
Initialize with Tabletop.init( { key: '0AjAPaAU9MeLFdHUxTlJiVVRYNGRJQnRmSnQwTlpoUXc' } )
OR!
@ -49,7 +49,7 @@
if(!this || !(this instanceof Tabletop)) {
return new Tabletop(options);
}
if(typeof(options) === 'string') {
options = { key : options };
}
@ -69,7 +69,7 @@
this.singleton = !!options.singleton;
this.simple_url = !!options.simple_url;
this.callbackContext = options.callbackContext;
if(typeof(options.proxy) !== 'undefined') {
// Remove trailing slash, it will break the app
this.endpoint = options.proxy.replace(/\/$/,'');
@ -79,16 +79,16 @@
// fetching straight from Google
supportsCORS = false
}
this.parameterize = options.parameterize || false;
if(this.singleton) {
if(typeof(Tabletop.singleton) !== 'undefined') {
this.log("WARNING! Tabletop singleton already defined");
}
Tabletop.singleton = this;
}
/* Be friendly about what you accept */
if(/key=/.test(this.key)) {
this.log("You passed an old Google Docs url as the key! Attempting to parse.");
@ -117,7 +117,7 @@
} else {
this.base_json_path += 'json-in-script';
}
if(!this.wait) {
this.fetch();
}
@ -143,10 +143,10 @@
}
this.requestData(this.base_json_path, this.loadSheets);
},
/*
This will call the environment appropriate request method.
In browser it will use JSON-P, in node it will use request()
*/
requestData: function(path, callback) {
@ -182,7 +182,7 @@
};
xhr.send();
},
/*
Insert the URL into the page as a script tag. Once it's loaded the spreadsheet data
it triggers the callback. This helps you avoid cross-domain errors
@ -193,7 +193,7 @@
injectScript: function(path, callback) {
var script = document.createElement('script');
var callbackName;
if(this.singleton) {
if(callback === this.loadSheets) {
callbackName = 'Tabletop.singleton.loadSheets';
@ -213,9 +213,9 @@
};
callbackName = 'Tabletop.callbacks.' + callbackName;
}
var url = path + "&callback=" + callbackName;
if(this.simple_url) {
// We've gone down a rabbit hole of passing injectScript the path, so let's
// just pull the sheet_id out of the path like the least efficient worker bees
@ -227,15 +227,15 @@
} else {
script.src = this.endpoint + url;
}
if (this.parameterize) {
script.src = this.parameterize + encodeURIComponent(script.src);
}
document.getElementsByTagName('script')[0].parentNode.appendChild(script);
},
/*
/*
This will only run if tabletop is being run in node.js
*/
serverSideFetch: function(path, callback) {
@ -248,7 +248,7 @@
});
},
/*
/*
Is this a sheet you want to pull?
If { wanted: ["Sheet1"] } has been specified, only Sheet1 is imported
Pulls all sheets if none are specified
@ -260,7 +260,7 @@
return (ttIndexOf(this.wanted, sheetName) !== -1);
}
},
/*
What gets send to the callback
if simpleSheet === true, then don't return an array of Tabletop.this.models,
@ -290,7 +290,7 @@
this.wanted.push(sheet);
}
},
/*
Load all worksheets of the spreadsheet, turning each into a Tabletop Model.
Need to use injectScript because the worksheet view that you're working from
@ -309,7 +309,7 @@
// Only pull in desired sheets to reduce loading
if( this.isWanted(data.feed.entry[i].content.$t) ) {
var linkIdx = data.feed.entry[i].link.length-1;
var sheet_id = data.feed.entry[i].link[linkIdx].href.substr( data.feed.entry[i].link[linkIdx].href.length - 3, 3);
var sheet_id = data.feed.entry[i].link[linkIdx].href.split('/').pop();
var json_path = "/feeds/list/" + this.key + "/" + sheet_id + "/public/values?alt="
if (inNodeJS || supportsCORS) {
json_path += 'json';
@ -359,7 +359,7 @@
Used as a callback for the list-based JSON
*/
loadSheet: function(data) {
var model = new Tabletop.Model( { data: data,
var model = new Tabletop.Model( { data: data,
parseNumbers: this.parseNumbers,
postProcess: this.postProcess,
tabletop: this } );
@ -411,7 +411,7 @@
this.elements = [];
return;
}
for(var key in options.data.feed.entry[0]){
if(/^gsx/.test(key))
this.column_names.push( key.replace("gsx$","") );