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

Merge pull request #23 from nyc-bookstores/sheetsee-upgrade

Browse Source 
Sheetsee Upgrade
This commit is contained in:
Jessica Lord 2015-03-28 23:03:29 -07:00
commit 567e9ebac8
4 changed files with 16293 additions and 1264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

441
index.html
View File

@ -1,262 +1,223 @@
<html>
<head>
<title>Hack Spots</title>
<meta charset='utf-8'>
<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/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"/>
<head>
<title>Hack Spots</title>
<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="https://raw.github.com/jlord/hack-spots/master/favico.png"/>
<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" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
</head>
<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" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
</head>
<body>
<div id="wrapper">
<h1>Hack Spots</h1>
<div>
<ul class="nav">
<li><strong>The collected favorites of those who hack</strong></li>
<li><a href="#info">INFO</a> -</li>
<li><a href="http://jlord.github.com/sheetsee.js" target="_blank">POWERED BY SHEETSEE.JS</a> -</li>
<li><a href="http://www.github.com/jlord/hack-spots" target="_blank">GITHUB</a> -</li>
<li><a href="http://www.twitter.com/jllord" target="_blank">@JLLORD</a></li>
</ul>
</div>
<div class="container">
<div id="rightSide">
<div id="latestSpot"></div>
<div id="selectedSpot"></div>
</div>
<div id="map"></div>
</div>
<div class="container">
<input id="tableFilter" type="text" placeholder="filter by.."></input>
<span class="clear button">Clear</span> <span class="resetMap button">Reset Map</span>
<span class="noMatches">no matches</span>
<div id="hackSpotsTable"></div>
</div>
<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/spreadsheets/d/1hnfQcggYcBYimuO_UOMvwoOi_I9vUvFpkMt4wjrrpLE/edit?usp=sharing" 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>
<div id="wrapper">
<h1>Hack Spots</h1>
<div>
<ul class="nav">
<li><strong>The collected favorites of those who hack</strong></li>
<li><a href="#info">INFO</a> -</li>
<li><a href="http://jlord.github.com/sheetsee.js" target="_blank">POWERED BY SHEETSEE.JS</a> -</li>
<li><a href="http://www.github.com/jlord/hack-spots" target="_blank">GITHUB</a> -</li>
<li><a href="http://www.twitter.com/jllord" target="_blank">@JLLORD</a></li>
</ul>
</div>
<div class="container">
<div id="rightSide">
<div id="latestSpot"></div>
<div id="selectedSpot"></div>
</div>
<div id="map"></div>
</div>
<div class="container">
<input id="tableFilter" type="text" placeholder="filter by.."></input>
<span class="clear button">Clear</span> <span class="resetMap button">Reset Map</span>
<span class="noMatches">no matches</span>
<div id="hackSpotsTable"></div>
</div>
<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/spreadsheets/d/1hnfQcggYcBYimuO_UOMvwoOi_I9vUvFpkMt4wjrrpLE/edit?usp=sharing" 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>
<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>
<p>Besides being a list I've wanted to have, it's a fantastic (or I think so) way of using <a href="http://jlord.github.io/sheetsee.js" target="_blank">sheetsee.js</a>, which is a little JavaScript library I've been working on. Sheetsee.js helps you hook a Google Spreadsheet (awesome for data and collaboration!) to a website to make data more visual (maps, tables, charts).</p>
<p>Besides being a list I've wanted to have, it's a fantastic (or I think so) way of using <a href="http://jlord.github.io/sheetsee.js" target="_blank">sheetsee.js</a>, which is a little JavaScript library I've been working on. Sheetsee.js helps you hook a Google Spreadsheet (awesome for data and collaboration!) to a website to make data more visual (maps, tables, charts).</p>
<h3>Fork-n-Go</h3>
<p>This is a work-in-progress example of a fork-n-go project - which means, there is just a <a href="https://github.com/jlord/hack-spots" target="_blank">gh-pages branch in GitHub</a> for this project so when you fork it, you've got a live and hosted website instantly. BAM! Just copy the spreadsheet headers and create your own spreadsheet, swap out the spreadsheet key in index.html and commit those changes. BAM! You've got a live and hosted site with a spreadsheet you control. More on the <a href="http://www.github.com/jlord/hack-spots" target="_blank">readme</a>.</p>
</div>
</div><!-- end wrapper -->
<h3>Fork-n-Go</h3>
<p>This is a work-in-progress example of a fork-n-go project - which means, there is just a <a href="https://github.com/jlord/hack-spots" target="_blank">gh-pages branch in GitHub</a> for this project so when you fork it, you've got a live and hosted website instantly. BAM! Just copy the spreadsheet headers and create your own spreadsheet, swap out the spreadsheet key in index.html and commit those changes. BAM! You've got a live and hosted site with a spreadsheet you control. More on the <a href="http://www.github.com/jlord/hack-spots" target="_blank">readme</a>.</p>
</div>
</div><!-- end wrapper -->
<script id="hackSpotsTable" type="text/html">
<table>
<tr><th class="tHeader">Name</th><th class="tHeader">Address</th><th class="tHeader">City</th><th class="tHeader">State</th><th class="tHeader">Country</th><th class="">Elsewhere</th></tr>
{{#rows}}
<tr id="{{rowNumber}}" class="spotRow"><td>{{name}}</td><td>{{address}}</td><td>{{city}}</td><td>{{state}}</td><td>{{country}}</td><td><a class="button" href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">G Map</a> <a class="button" href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Yelp</a></td></tr>
<tr class="hideRow"><td>wifi: {{wifipassword}}</td></tr>
{{/rows}}
</table>
</script>
<script id="hackSpotsTable" type="text/html">
<table>
<tr><th class="tHeader">Name</th><th class="tHeader">Address</th><th class="tHeader">City</th><th class="tHeader">State</th><th class="tHeader">Country</th><th class="">Elsewhere</th></tr>
{{#rows}}
<tr id="{{rowNumber}}" class="spotRow"><td>{{name}}</td><td>{{address}}</td><td>{{city}}</td><td>{{state}}</td><td>{{country}}</td><td><a class="button" href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">G Map</a> <a class="button" href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Yelp</a></td></tr>
{{/rows}}
</table>
</script>
<script id="latestSpot" type="text/html">
{{#rows}}
<h4 class="fauxButton">MOST RECENT SPOT</h4>
<h2>{{name}}</h2>
<p class="colorText">{{address}}<p>
<p class="colorText">{{city}}, {{state}} {{#postcode}}, {{postcode}} {{/postcode}}</p>
<ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li>
<li><span class="category">Contributed By:</span> <a href="http://www.twitter.com/{{contributerstwitter}}" target="_blank">@{{contributerstwitter}}</a></li>
</ul>
<ul>
<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
<li><a href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul>
{{/rows}}
</script>
<script id="latestSpot" type="text/html">
{{#rows}}
<h4 class="fauxButton">MOST RECENT SPOT</h4>
<h2>{{name}}</h2>
<p class="colorText">{{address}}<p>
<p class="colorText">{{city}}, {{state}} {{#postcode}}, {{postcode}} {{/postcode}}</p>
<ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li>
<li><span class="category">Contributed By:</span> <a href="http://www.twitter.com/{{contributerstwitter}}" target="_blank">@{{contributerstwitter}}</a></li>
</ul>
<ul>
<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
<li><a href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul>
{{/rows}}
</script>
<script id="theNumberofSpots" type="text/html">
<p><strong><span class="red-text">{{numberOfSpots}}</span> hack spots strong!</p>
</script>
<script id="theNumberofSpots" type="text/html">
<p><strong><span class="red-text">{{numberOfSpots}}</span> hack spots strong!</p>
</script>
<script id="popUps" type="text/html">
<h2>{{ name }}</h2>
</script>
<script id="selectedSpot" type="text/html">
{{#rows}}
<h4 class="fauxButton">SELECTED SPOT</h4>
<h2>{{name}}</h2>
<p class="colorText">{{address}}<p>
<p class="colorText">{{city}}, {{state}} {{#postcode}}, {{postcode}} {{/postcode}}</p>
<ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li>
</ul>
<ul>
<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
<li><a href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul>
{{/rows}}
</script>
<script id="selectedSpot" type="text/html">
{{#rows}}
<h4 class="fauxButton">SELECTED SPOT</h4>
<h2>{{name}}</h2>
<p class="colorText">{{address}}<p>
<p class="colorText">{{city}}, {{state}} {{#postcode}}, {{postcode}} {{/postcode}}</p>
<ul>
<li><span class="category">Wifi:</span> {{wifipassword}}</li>
<li><span class="category">Outlets:</span> {{outlets}}</li>
<li><span class="category">Couch:</span> {{couch}}</li>
<li><span class="category">Large Table:</span> {{largetable}}</li>
<li><span class="category">Outdoor Seating:</span> {{outdoorseating}}</li>
<li><span class="category">Brewing:</span> {{brewing}}</li>
</ul>
<ul>
<li><a href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a></li>
<li><a href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a></li>
</ul>
{{/rows}}
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var gData
var URL = "1hnfQcggYcBYimuO_UOMvwoOi_I9vUvFpkMt4wjrrpLE"
Tabletop.init({ key: URL, callback: showInfo, simpleSheet: true })
})
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var gData
var URL = "1hnfQcggYcBYimuO_UOMvwoOi_I9vUvFpkMt4wjrrpLE"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
// so long, so messy
function showInfo(gData) {
tableOptions = {
"data": gData,
"tableDiv": "#hackSpotsTable",
"filterDiv": "#tableFilter"
}
// make the table, and the search bar
Sheetsee.makeTable(tableOptions)
Sheetsee.initiateTableFilter(tableOptions)
// so long, so messy
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
// change the color of the most recently added spot's marker
geoJSON[geoJSON.length - 1].properties["marker-color"] = "#FF4646"
function showInfo(gData) {
window.gData = gData
// make the table, and the search bar
Sheetsee.makeTable(gData, "#hackSpotsTable")
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, "<h2>{{ name }}</h2>")
// when someone clicks on a row, highlight it and
// re-center the map
$('.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 = ich.selectedSpot({
rows: dataElement
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
var selectedCoords = [dataElement[0].lat, dataElement[0].long]
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer)
map.panTo(selectedCoords, 13)
})
// 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.panTo([theLatestSpot.lat, theLatestSpot.long])
// 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]
}
// when someone clicks on a row, highlight it and
// re-center the map
$('.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.panTo(selectedCoords)
})
// 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 = ich.latestSpot({
rows: theLatestSpot
})
$('#latestSpot').html(latestSpot)
// 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]
}
function highlightLastMarker(geoJSON, highlightColor) {
geoJSON[0].properties["marker-color"] = highlightColor
return geoJSON
}
// 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")
})
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
// change the color of the most recently added spot's marker
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
// 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)
})
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer)
// design the popups to have the content and
// interactions that we want
function addPopups(map, markerLayer) {
markerLayer.eachLayer(function(marker) {
var popupContent = ich.popUps(marker.feature.opts)
marker.bindPopup(popupContent, {closeButton: false,})
})
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.toString()
// find that row in the table and make consider it selected
$('#' + rowNumber).addClass("selectedRow")
// using row number, find that marker in the geoJSON, give it
// the selected marker color
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
// var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
// addPopups(map, markerLayer)
// using row number, get the data for the selected spot
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
// 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")
})
}
$('.resetMap').click(function() {
$('.spotRow').removeClass("selectedRow")
markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer)
$('#latestSpot').css("display", "inline")
$('#selectedSpot').css("display", "none")
})
// find total number of spots added
var numberOfSpots = gData.length
var theNumberofSpots = ich.theNumberofSpots({
numberOfSpots: numberOfSpots
})
$('#theNumberofSpots').html(theNumberofSpots)
function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
geoJSON.forEach(function (d) {
if (d.properties["marker-color"] === highlightColor) {
var origColor = gData[0].hexcolor
d.properties["marker-color"] = origColor
}
for (var key in d.opts) {
var value = d.opts[key].toString().toLowerCase()
if (key === 'rowNumber' && value.match(rowNumber.toString().toLowerCase())) {
d.properties["marker-color"] = highlightColor
return geoJSON
}
}
})
}
}
</script>
// find total number of spots added
var theNumberofSpots = Sheetsee.ich.theNumberofSpots({
numberOfSpots: gData.length
})
$('#theNumberofSpots').html(theNumberofSpots)
}
</script>
</body>
</html>

542
js/ICanHaz.js
View File

@ -1,542 +0,0 @@
/*!
ICanHaz.js version 0.10 -- by @HenrikJoreteg
More info at: http://icanhazjs.com
*/
(function () {
/*
mustache.js — Logic-less templates in JavaScript
See http://mustache.github.com/ for more info.
*/
var Mustache = function () {
var _toString = Object.prototype.toString;
Array.isArray = Array.isArray || function (obj) {
return _toString.call(obj) == "[object Array]";
}
var _trim = String.prototype.trim, trim;
if (_trim) {
trim = function (text) {
return text == null ? "" : _trim.call(text);
}
} else {
var trimLeft, trimRight;
// IE doesn't match non-breaking spaces with \s.
if ((/\S/).test("\xA0")) {
trimLeft = /^[\s\xA0]+/;
trimRight = /[\s\xA0]+$/;
} else {
trimLeft = /^\s+/;
trimRight = /\s+$/;
}
trim = function (text) {
return text == null ? "" :
text.toString().replace(trimLeft, "").replace(trimRight, "");
}
}
var escapeMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;'
};
function escapeHTML(string) {
return String(string).replace(/&(?!\w+;)|[<>"']/g, function (s) {
return escapeMap[s] || s;
});
}
var regexCache = {};
var Renderer = function () {};
Renderer.prototype = {
otag: "{{",
ctag: "}}",
pragmas: {},
buffer: [],
pragmas_implemented: {
"IMPLICIT-ITERATOR": true
},
context: {},
render: function (template, context, partials, in_recursion) {
// reset buffer & set context
if (!in_recursion) {
this.context = context;
this.buffer = []; // TODO: make this non-lazy
}
// fail fast
if (!this.includes("", template)) {
if (in_recursion) {
return template;
} else {
this.send(template);
return;
}
}
// get the pragmas together
template = this.render_pragmas(template);
// render the template
var html = this.render_section(template, context, partials);
// render_section did not find any sections, we still need to render the tags
if (html === false) {
html = this.render_tags(template, context, partials, in_recursion);
}
if (in_recursion) {
return html;
} else {
this.sendLines(html);
}
},
/*
Sends parsed lines
*/
send: function (line) {
if (line !== "") {
this.buffer.push(line);
}
},
sendLines: function (text) {
if (text) {
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) {
this.send(lines[i]);
}
}
},
/*
Looks for %PRAGMAS
*/
render_pragmas: function (template) {
// no pragmas
if (!this.includes("%", template)) {
return template;
}
var that = this;
var regex = this.getCachedRegex("render_pragmas", function (otag, ctag) {
return new RegExp(otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" + ctag, "g");
});
return template.replace(regex, function (match, pragma, options) {
if (!that.pragmas_implemented[pragma]) {
throw({message:
"This implementation of mustache doesn't understand the '" +
pragma + "' pragma"});
}
that.pragmas[pragma] = {};
if (options) {
var opts = options.split("=");
that.pragmas[pragma][opts[0]] = opts[1];
}
return "";
// ignore unknown pragmas silently
});
},
/*
Tries to find a partial in the curent scope and render it
*/
render_partial: function (name, context, partials) {
name = trim(name);
if (!partials || partials[name] === undefined) {
throw({message: "unknown_partial '" + name + "'"});
}
if (!context || typeof context[name] != "object") {
return this.render(partials[name], context, partials, true);
}
return this.render(partials[name], context[name], partials, true);
},
/*
Renders inverted (^) and normal (#) sections
*/
render_section: function (template, context, partials) {
if (!this.includes("#", template) && !this.includes("^", template)) {
// did not render anything, there were no sections
return false;
}
var that = this;
var regex = this.getCachedRegex("render_section", function (otag, ctag) {
// This regex matches _the first_ section ({{#foo}}{{/foo}}), and captures the remainder
return new RegExp(
"^([\\s\\S]*?)" + // all the crap at the beginning that is not {{*}} ($1)
otag + // {{
"(\\^|\\#)\\s*(.+)\\s*" + // #foo (# == $2, foo == $3)
ctag + // }}
"\n*([\\s\\S]*?)" + // between the tag ($2). leading newlines are dropped
otag + // {{
"\\/\\s*\\3\\s*" + // /foo (backreference to the opening tag).
ctag + // }}
"\\s*([\\s\\S]*)$", // everything else in the string ($4). leading whitespace is dropped.
"g");
});
// for each {{#foo}}{{/foo}} section do...
return template.replace(regex, function (match, before, type, name, content, after) {
// before contains only tags, no sections
var renderedBefore = before ? that.render_tags(before, context, partials, true) : "",
// after may contain both sections and tags, so use full rendering function
renderedAfter = after ? that.render(after, context, partials, true) : "",
// will be computed below
renderedContent,
value = that.find(name, context);
if (type === "^") { // inverted section
if (!value || Array.isArray(value) && value.length === 0) {
// false or empty list, render it
renderedContent = that.render(content, context, partials, true);
} else {
renderedContent = "";
}
} else if (type === "#") { // normal section
if (Array.isArray(value)) { // Enumerable, Let's loop!
renderedContent = that.map(value, function (row) {
return that.render(content, that.create_context(row), partials, true);
}).join("");
} else if (that.is_object(value)) { // Object, Use it as subcontext!
renderedContent = that.render(content, that.create_context(value),
partials, true);
} else if (typeof value == "function") {
// higher order section
renderedContent = value.call(context, content, function (text) {
return that.render(text, context, partials, true);
});
} else if (value) { // boolean section
renderedContent = that.render(content, context, partials, true);
} else {
renderedContent = "";
}
}
return renderedBefore + renderedContent + renderedAfter;
});
},
/*
Replace {{foo}} and friends with values from our view
*/
render_tags: function (template, context, partials, in_recursion) {
// tit for tat
var that = this;
var new_regex = function () {
return that.getCachedRegex("render_tags", function (otag, ctag) {
return new RegExp(otag + "(=|!|>|&|\\{|%)?([^#\\^]+?)\\1?" + ctag + "+", "g");
});
};
var regex = new_regex();
var tag_replace_callback = function (match, operator, name) {
switch(operator) {
case "!": // ignore comments
return "";
case "=": // set new delimiters, rebuild the replace regexp
that.set_delimiters(name);
regex = new_regex();
return "";
case ">": // render partial
return that.render_partial(name, context, partials);
case "{": // the triple mustache is unescaped
case "&": // & operator is an alternative unescape method
return that.find(name, context);
default: // escape the value
return escapeHTML(that.find(name, context));
}
};
var lines = template.split("\n");
for(var i = 0; i < lines.length; i++) {
lines[i] = lines[i].replace(regex, tag_replace_callback, this);
if (!in_recursion) {
this.send(lines[i]);
}
}
if (in_recursion) {
return lines.join("\n");
}
},
set_delimiters: function (delimiters) {
var dels = delimiters.split(" ");
this.otag = this.escape_regex(dels[0]);
this.ctag = this.escape_regex(dels[1]);
},
escape_regex: function (text) {
// thank you Simon Willison
if (!arguments.callee.sRE) {
var specials = [
'/', '.', '*', '+', '?', '|',
'(', ')', '[', ']', '{', '}', '\\'
];
arguments.callee.sRE = new RegExp(
'(\\' + specials.join('|\\') + ')', 'g'
);
}
return text.replace(arguments.callee.sRE, '\\$1');
},
/*
find `name` in current `context`. That is find me a value
from the view object
*/
find: function (name, context) {
name = trim(name);
// Checks whether a value is thruthy or false or 0
function is_kinda_truthy(bool) {
return bool === false || bool === 0 || bool;
}
var value;
// check for dot notation eg. foo.bar
if (name.match(/([a-z_]+)\./ig)) {
var childValue = this.walk_context(name, context);
if (is_kinda_truthy(childValue)) {
value = childValue;
}
} else {
if (is_kinda_truthy(context[name])) {
value = context[name];
} else if (is_kinda_truthy(this.context[name])) {
value = this.context[name];
}
}
if (typeof value == "function") {
return value.apply(context);
}
if (value !== undefined) {
return value;
}
// silently ignore unkown variables
return "";
},
walk_context: function (name, context) {
var path = name.split('.');
// if the var doesn't exist in current context, check the top level context
var value_context = (context[path[0]] != undefined) ? context : this.context;
var value = value_context[path.shift()];
while (value != undefined && path.length > 0) {
value_context = value;
value = value[path.shift()];
}
// if the value is a function, call it, binding the correct context
if (typeof value == "function") {
return value.apply(value_context);
}
return value;
},
// Utility methods
/* includes tag */
includes: function (needle, haystack) {
return haystack.indexOf(this.otag + needle) != -1;
},
// by @langalex, support for arrays of strings
create_context: function (_context) {
if (this.is_object(_context)) {
return _context;
} else {
var iterator = ".";
if (this.pragmas["IMPLICIT-ITERATOR"]) {
iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator;
}
var ctx = {};
ctx[iterator] = _context;
return ctx;
}
},
is_object: function (a) {
return a && typeof a == "object";
},
/*
Why, why, why? Because IE. Cry, cry cry.
*/
map: function (array, fn) {
if (typeof array.map == "function") {
return array.map(fn);
} else {
var r = [];
var l = array.length;
for(var i = 0; i < l; i++) {
r.push(fn(array[i]));
}
return r;
}
},
getCachedRegex: function (name, generator) {
var byOtag = regexCache[this.otag];
if (!byOtag) {
byOtag = regexCache[this.otag] = {};
}
var byCtag = byOtag[this.ctag];
if (!byCtag) {
byCtag = byOtag[this.ctag] = {};
}
var regex = byCtag[name];
if (!regex) {
regex = byCtag[name] = generator(this.otag, this.ctag);
}
return regex;
}
};
return({
name: "mustache.js",
version: "0.4.0",
/*
Turns a template and view into HTML
*/
to_html: function (template, view, partials, send_fun) {
var renderer = new Renderer();
if (send_fun) {
renderer.send = send_fun;
}
renderer.render(template, view || {}, partials);
if (!send_fun) {
return renderer.buffer.join("\n");
}
}
});
}();
/*!
ICanHaz.js -- by @HenrikJoreteg
*/
/*global */
(function () {
function trim(stuff) {
if (''.trim) return stuff.trim();
else return stuff.replace(/^\s+/, '').replace(/\s+$/, '');
}
var ich = {
VERSION: "0.10",
templates: {},
// grab jquery or zepto if it's there
$: (typeof window !== 'undefined') ? window.jQuery || window.Zepto || null : null,
// public function for adding templates
// can take a name and template string arguments
// or can take an object with name/template pairs
// We're enforcing uniqueness to avoid accidental template overwrites.
// If you want a different template, it should have a different name.
addTemplate: function (name, templateString) {
if (typeof name === 'object') {
for (var template in name) {
this.addTemplate(template, name[template]);
}
return;
}
if (ich[name]) {
console.error("Invalid name: " + name + ".");
} else if (ich.templates[name]) {
console.error("Template \"" + name + " \" exists");
} else {
ich.templates[name] = templateString;
ich[name] = function (data, raw) {
data = data || {};
var result = Mustache.to_html(ich.templates[name], data, ich.templates);
return (ich.$ && !raw) ? ich.$(result) : result;
};
}
},
// clears all retrieval functions and empties cache
clearAll: function () {
for (var key in ich.templates) {
delete ich[key];
}
ich.templates = {};
},
// clears/grabs
refresh: function () {
ich.clearAll();
ich.grabTemplates();
},
// grabs templates from the DOM and caches them.
// Loop through and add templates.
// Whitespace at beginning and end of all templates inside <script> tags will
// be trimmed. If you want whitespace around a partial, add it in the parent,
// not the partial. Or do it explicitly using <br/> or &nbsp;
grabTemplates: function () {
var i,
scripts = document.getElementsByTagName('script'),
script,
trash = [];
for (i = 0, l = scripts.length; i < l; i++) {
script = scripts[i];
if (script && script.innerHTML && script.id && (script.type === "text/html" || script.type === "text/x-icanhaz")) {
ich.addTemplate(script.id, trim(script.innerHTML));
trash.unshift(script);
}
}
for (i = 0, l = trash.length; i < l; i++) {
trash[i].parentNode.removeChild(trash[i]);
}
}
};
// Use CommonJS if applicable
if (typeof require !== 'undefined') {
module.exports = ich;
} else {
// else attach it to the window
window.ich = ich;
}
if (typeof document !== 'undefined') {
if (ich.$) {
ich.$(function () {
ich.grabTemplates();
});
} else {
document.addEventListener('DOMContentLoaded', function () {
ich.grabTemplates();
}, true);
}
}
})();
})();

16574
js/sheetsee.js
View File

File diff suppressed because it is too large Load Diff

0
js/site.js
View File