-
Notifications
You must be signed in to change notification settings - Fork 994
Expand file tree
/
Copy pathtips.html
More file actions
113 lines (110 loc) · 6.8 KB
/
tips.html
File metadata and controls
113 lines (110 loc) · 6.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sheetsee.js</title>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='description' content='sheetsee.js, google, spreadsheet, visualize, data, javascript'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" href="../favicon.png">
<script type='text/javascript' src='../assets/highlight.js'></script>
<link rel='stylesheet' href='../assets/highlight.css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='../assets/style.css'>
<link rel="shortcut icon" href=''/>
</head>
<body class="tips">
<div class="container">
<h1 id="tips">Tips</h1>
<p>A few things to think about beyond maps and tables.</p>
<h2 id="mustache">Mustache</h2>
<p>You can use templates for more than just tables. Use them to create lists <code>ol</code>, <code>ul</code>; array of images... You'll need a placeholder <code><div></code> in your HTML, a <code><script></code> for your template. In your Tabletop.js callback use Mustache to pass your data into the template and add it to the DOM.</p>
<p><em>HTML</em></p>
<pre><code class="lang-HTML"><div id="divID"></div>
</code></pre>
<p><em>Template</em></p>
<pre><code class="lang-JavaScript"><script id="divID_template" type="text/html">
{{#rows}}
<div><img class="photo" src="{{some-variable}}"></div>
{{/rows}}
</script>
</code></pre>
<p><em>Script</em></p>
<pre><code class="lang-JavaScript"><script type="text/html">
document.addEventListener('DOMContentLoaded', function() {
var URL = 'YOURSPREADSHEETSKEYHERE'
Tabletop.init({key: URL, callback: showData, simpleSheet: true})
})
function showData (data) {
var template = document.querySelector('divID_template').innerHTML
var html = Sheetsee.Mustache.render(template, {'rows': data})
document.getElementByID('divID').innerHTML = html
}
</script>
</code></pre>
<p><em>non-table example</em></p>
<p><img src="http://jlord.s3.amazonaws.com/wp-content/uploads/lending-ss.png" alt="lib"></p>
<h2 id="query-strings">Query Strings</h2>
<p>If your spreadsheet contains address information, using templates (Sheetsee uses Mustache.js), you can embed those elements into a query string (aka a search URL) like Google Maps URL or Yelp. If you search for a location in Google Maps, you'll notice it creates a URL for that search.</p>
<p>So, if you have information in your spreadsheet that would go inside a query string, make a template for inserting them into a link on your page.</p>
<p>The basic elements are: a spreadsheet with address info + HTML template to create the query string.</p>
<p>The Sheetsee <a href="jlord.github.io/hack-spots">Hack-Spots</a> is an example that does such a thing. Here is the spreadsheet, with address information:</p>
<p><img src="http://jlord.s3.amazonaws.com/wp-content/uploads/Screen-Shot-2013-09-15-at-6.49.19-PM.png" alt="img"></p>
<p>In the HTML template for the table on the <a href="jlord.github.io/hack-spots">Hack-Spots</a> page, the button’s links look like this:</p>
<pre><code class="lang-HTML"><a class="button" href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a>
<a class="button" href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a>
</code></pre>
<p>Above we're inserting the address, city, and state details from the spreadsheet into the structure of a query string for Google maps and Yelp. You can figure out the query string of a service by just using it (type in an address in Google Maps) and looking at the resulting URL.</p>
<p>With a some CSS and such, the resulting website has a table with the hack spots and a button for viewing in Google Maps or Yelp:</p>
<p><img src="http://jlord.s3.amazonaws.com/wp-content/uploads/Screen-Shot-2013-09-15-at-6.43.54-PM.png" alt="img"></p>
<p>When the page builds, it creates the correct link for each row. When someone clicks on the buttons it takes them directly to the Google Map search result for that address. BAM!</p>
<h2 id="ifttt">IFTTT</h2>
<p><a href="http://www.ifttt.com">Ifttt.com</a> offers lots of options sending data from your actions (Twitter, Instagram, GitHub, Pocket...) to Google Spreadsheets.</p>
<h2 id="row-numbers">Row Numbers</h2>
<p>When Tabletop.js returns your spreadsheet data, it adds a key/value of <code>rownumber</code>. This is great to use when you need to uniquely match or find a row in your data.</p>
<h2 id="images">Images</h2>
<p>Your spreadsheet can contain URLs to images which you can use to display the images on the page you build. Your template would look something like this:</p>
<pre><code class="lang-HTML"><img src='{{imgurl}}'/>
</code></pre>
<h2 id="data-as-classes">Data as Classes</h2>
<p>You can use your data as classes to style with CSS. For instance, if you had data about recipes and a column called 'Taste' that contained either 'savory' or 'sweet'. In a table of the recipes you could do something like:</p>
<pre><code class="lang-HTML"><tr><td class="{{taste}}"></tr>
</code></pre>
<p>Then in your CSS:</p>
<pre><code class="lang-CSS">td .savory {}
td .sweet {}
</code></pre>
<footer>
<h4 id="getting-started">Getting Started</h4>
<ul>
<li><a href="./about.html">About Sheetsee</a></li>
<li><a href="./building.html">Building Sheetsee</a></li>
<li><a href="./basics.html">Basics</a></li>
</ul>
<h4 id="ideas">Ideas</h4>
<ul>
<li><a href="./fork-n-go.html">Fork-n-Go</a></li>
<li><a href="./tips.html">Tips!</a></li>
</ul>
<h4>Demos</h4>
<ul>
<li><a href="../demos/demo-table.html">Table Demo</a></li>
<li><a href="../demos/demo-map.html">Map Demo</a></li>
</ul>
<h4 id="use">Use</h4>
<ul>
<li><a href="./sheetsee-core.html">Sheetsee-core</a></li>
<li><a href="./sheetsee-tables.html">Sheetsee-tables</a></li>
<li><a href="./sheetsee-maps.html">Sheetsee-maps</a></li>
</ul>
<h4 id="use">Contact</h4>
<ul>
<li><a href="http://www.twitter.com/jllord">@jllord</a></li>
<li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
</ul>
<h4><a class="home-link" href="../index.html">Home</a></h4>
</footer>
</div>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>