merge into the master branch too
This commit is contained in:
commit
360aa60b9d
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
table {text-align: left; width: 100%}
|
table {text-align: left; width: 100%}
|
||||||
th {padding: 10px 0px;}
|
th {padding: 10px 0px;}
|
||||||
td, text {padding: 3px 20px 3px 0px; font-size: 14px;}
|
td, text {padding: 3px 18px 3px 0px; font-size: 14px;}
|
||||||
#tableFilter {margin: 12px 0px; border: none; border-bottom: 1px solid #333; background-color: transparent; padding: 0px; font-family: Merriweather; color: #fff; font-size: 13px; height: 22px;}
|
#tableFilter {margin: 12px 0px; border: none; border-bottom: 1px solid #333; background-color: transparent; padding: 0px; font-family: Merriweather; color: #fff; font-size: 13px; height: 22px;}
|
||||||
.noMatches {margin-left: 20px; font-size: 11px; font-style: italic; visibility: hidden;}
|
.noMatches {margin-left: 20px; font-size: 11px; font-style: italic; visibility: hidden;}
|
||||||
|
|
||||||
@ -50,4 +50,4 @@
|
|||||||
.leaflet-popup-content {font-family: Merriweather;}
|
.leaflet-popup-content {font-family: Merriweather;}
|
||||||
.leaflet-popup-content h2 {margin-bottom: 4px;}
|
.leaflet-popup-content h2 {margin-bottom: 4px;}
|
||||||
|
|
||||||
img.petThumbs {height: 80px; width: 80px; border-radius: 1000px;}
|
img.petThumbs {height: 80px; width: 80px; border-radius: 1000px;}
|
||||||
|
|||||||
254
index.html
254
index.html
@ -1,23 +1,23 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>NYC Bookstores</title>
|
<title>NYC Bookstores</title>
|
||||||
<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="favicon.png"/>
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta charset='utf-8'>
|
||||||
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
|
<script type="text/javascript" src='js/jquery.js '></script>
|
||||||
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic'>
|
<script type="text/javascript" src='js/tabletop1.3.4.js'></script>
|
||||||
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700'>
|
<script type="text/javascript" src='js/sheetsee.js'></script>
|
||||||
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
|
<script type="text/javascript" src='js/leaflet.markercluster.js'></script>
|
||||||
<link media="screen" rel="stylesheet" type="text/css" href="css/site.css">
|
<link rel="shortcut icon" href="favicon.png"/>
|
||||||
<link rel="stylesheet" href="css/MarkerCluster.css" />
|
|
||||||
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
</head>
|
<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>
|
<body>
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
<h1>NYC Bookstores</h1>
|
<h1>NYC Bookstores</h1>
|
||||||
@ -79,10 +79,6 @@
|
|||||||
<p><strong><span class="red-text">{{numberOfSpots}}</span> bookstores mapped!</p>
|
<p><strong><span class="red-text">{{numberOfSpots}}</span> bookstores mapped!</p>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="popUps" type="text/html">
|
|
||||||
<h2>{{ name }}</h2>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script id="selectedSpot" type="text/html">
|
<script id="selectedSpot" type="text/html">
|
||||||
{{#rows}}
|
{{#rows}}
|
||||||
<h4 class="fauxButton">SELECTED BOOKSTORE</h4>
|
<h4 class="fauxButton">SELECTED BOOKSTORE</h4>
|
||||||
@ -103,142 +99,108 @@
|
|||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// var URL = "10z-2P8l88hLF35EodIjigs5cyCD7BtmfZS631JMtIUU" // test new spreadsheets
|
var gData
|
||||||
var URL = "0AnhMurQVK5pqdHU0UF9QTFRRNTQwR3hQTFdOV3laRGc"
|
var URL = "0AnhMurQVK5pqdHU0UF9QTFRRNTQwR3hQTFdOV3laRGc"
|
||||||
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
|
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) {
|
// create map, tilelayer (map background), markers and popups
|
||||||
// hoisting this so that other functions can find it
|
var map = Sheetsee.loadMap("map")
|
||||||
window.gData = gData;
|
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
|
||||||
// make the table, and the search bar
|
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, "<h2>{{ name }}</h2>")
|
||||||
Sheetsee.makeTable(gData, "#hackSpotsTable")
|
|
||||||
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
|
|
||||||
|
|
||||||
// when someone clicks on a row, highlight it and
|
// find the latest spot with the most important
|
||||||
// re-center the map
|
// info filled in (to prevent map breaking if
|
||||||
$('.spotRow').live("click", function(event) {
|
// someone is currently editing spreadsheet)
|
||||||
$('.spotRow').removeClass("selectedRow")
|
var theLatestSpot = findLatestCompleteSpot(gData)
|
||||||
var rowNumber = $(this).closest("tr").attr("id")
|
var latestSpot = Sheetsee.ich.latestSpot({
|
||||||
$('#' + rowNumber).addClass("selectedRow")
|
rows: theLatestSpot
|
||||||
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
|
})
|
||||||
var selectedSpot = ich.selectedSpot({
|
// set it and pan to it
|
||||||
rows: dataElement
|
$('#latestSpot').html(latestSpot)
|
||||||
})
|
map.panTo([theLatestSpot.lat, theLatestSpot.long])
|
||||||
$('#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)
|
|
||||||
})
|
|
||||||
|
|
||||||
// so that the first map and info that loads
|
// when someone clicks on a row, highlight it and
|
||||||
// is complete and doesn't show rows that are
|
// re-center the map
|
||||||
// actively being edited by folk
|
$('.spotRow').live("click", function(event) {
|
||||||
function findLatestCompleteSpot(data) {
|
$('.spotRow').removeClass("selectedRow")
|
||||||
var latestCompleteSpot = []
|
var rowNumber = $(this).closest("tr").attr("id")
|
||||||
var startWithLatestRow = data.reverse()
|
$('#' + rowNumber).addClass("selectedRow")
|
||||||
startWithLatestRow.forEach(function(row){
|
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
|
||||||
if (!row.lat || !row.long || !row.name || !row.address || !row.city) return
|
var selectedSpot = Sheetsee.ich.selectedSpot({
|
||||||
else latestCompleteSpot.push(row)
|
rows: dataElement
|
||||||
})
|
})
|
||||||
return latestCompleteSpot[0]
|
$('#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
|
// so that the first map and info that loads
|
||||||
// info filled in (to prevent map breaking if
|
// is complete and doesn't show rows that are
|
||||||
// someone is currently editing spreadsheet)
|
// actively being edited by folk
|
||||||
var theLatestSpot = findLatestCompleteSpot(gData)
|
function findLatestCompleteSpot(data) {
|
||||||
var latestSpot = ich.latestSpot({
|
var latestCompleteSpot = []
|
||||||
rows: theLatestSpot
|
var startWithLatestRow = data.reverse()
|
||||||
})
|
startWithLatestRow.forEach(function(row){
|
||||||
$('#latestSpot').html(latestSpot)
|
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) {
|
// Add click listener to the markerLayer
|
||||||
geoJSON[0].properties["marker-color"] = highlightColor
|
markerLayer.on('click', function(e) {
|
||||||
return geoJSON
|
// 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
|
// reset the map, zoom out, and recenter on 0,0
|
||||||
// useful bits from the original data
|
$('.resetMap').click(function() {
|
||||||
var optionsJSON = ["name", "address", "city", "rowNumber"]
|
$('.spotRow').removeClass("selectedRow")
|
||||||
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
|
$('#latestSpot').css("display", "inline")
|
||||||
// change the color of the most recently added spot's marker
|
$('#selectedSpot').css("display", "none")
|
||||||
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
|
map.setView([0,0], 1)
|
||||||
|
})
|
||||||
|
|
||||||
// create map, tilelayer (map background), markers and popups
|
// find total number of spots added
|
||||||
var map = Sheetsee.loadMap("map")
|
var theNumberofSpots = Sheetsee.ich.theNumberofSpots({
|
||||||
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
|
numberOfSpots: gData.length
|
||||||
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
|
})
|
||||||
addPopups(map, markerLayer)
|
$('#theNumberofSpots').html(theNumberofSpots)
|
||||||
|
}
|
||||||
// design the popups to have the content and
|
</script>
|
||||||
// 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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
542
js/ICanHaz.js
542
js/ICanHaz.js
@ -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 = {
|
|
||||||
"&": "&",
|
|
||||||
"<": "<",
|
|
||||||
">": ">",
|
|
||||||
'"': '"',
|
|
||||||
"'": '''
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
|
||||||
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
16574
js/sheetsee.js
File diff suppressed because it is too large
Load Diff
@ -6,11 +6,13 @@ This is the code for a website that lists bookstores in New York City!
|
|||||||
|
|
||||||
### Fork -n- Go!
|
### Fork -n- Go!
|
||||||
|
|
||||||
In a bit I'll do some more refining (and documentation) - but here's a fun fact:
|
Here's a fun fact:
|
||||||
|
|
||||||
This repo only has a **gh-pages** branch, which means as soon as you **fork** it, you have a hosted and live version of it yourself!
|
GitHub gives free hosting for every repository (see [GitHub Pages](http://pages.github.com)).
|
||||||
|
|
||||||
Next, create a spreadsheet with the same column headers as [the original](https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c#gid=0).
|
This repo only has a **gh-pages** branch, the branch GitHub hosts, which means as soon as you **fork** it, you have a hosted and live version of it yourself! Read more about [fork-n-go](http://jlord.github.io/forkngo) type of projects.
|
||||||
|
|
||||||
|
Next, create a spreadsheet with the same column headers as [the original](https://docs.google.com/a/github.com/spreadsheets/d/1hnfQcggYcBYimuO_UOMvwoOi_I9vUvFpkMt4wjrrpLE/edit#gid=0).
|
||||||
|
|
||||||
Click on the `index.html` file, click edit and change **line 118** (or thereabouts) it looks like:
|
Click on the `index.html` file, click edit and change **line 118** (or thereabouts) it looks like:
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user