-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
176 lines (163 loc) · 9.36 KB
/
index.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Responsive Table Generator</title>
<link rel="stylesheet" href="webapp/lib/css/style.css">
</head>
<body>
<div class="sticky-nav-wrapper">
<div class="sticky-nav-holder show" data-hide-at-top="true"><div class="sticky-nav-container">
<nav id="sticky-nav" class="sticky-navbar navbar clearfix">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar toggle-nav-bar" title="More">
<div class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</a>
<ul class="nav">
<li class="home-link">
<a href="http://labs.inn.org/">
<img width="50" height="50" src="https://avatars0.githubusercontent.com/u/1553533" class="attachment-home-logo" alt="nerd logo">
</a>
</li>
<li class="divider-vertical"></li>
</ul>
<div class="nav-shelf">
<ul class="nav"><li id="menu-item-106843" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-106843"><a href="http://labs.inn.org/category/announcements/">Announcements</a></li>
<li id="menu-item-106863" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-106863"><a href="http://labs.inn.org/category/tools/">Tools</a></li>
<li id="menu-item-106842" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106842"><a href="http://labs.inn.org/team/">Team</a></li>
<li id="menu-item-106805" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106805"><a href="http://labs.inn.org/contact/">Contact</a></li>
<li class="menu-item-has-childen dropdown"></li>
</ul>
</div>
</div>
</nav>
</div></div>
</div>
<div id="page">
<div id="main" class="row-fluid">
<h1>Responsive Table Generator</h1>
<iframe src="https://ghbtns.com/github-btn.html?user=INN&repo=responsive-tables&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="125" height="30"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=INN&repo=responsive-tables&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe>
<p style="padding: 1em; border: 1px solid red; background-color: rgba(255,0,0,0.2);">🚨 This app is <strong>no longer maintained or supported</strong>. It may not work. 🚨 </p>
<p style="padding: 1em; border: 1px solid yellow; background-color: rgba(255,255,0,0.2);">
If you experience problems using this application, such as <a href="https://github.com/INN/deploy-tools/issues/67">an endless spinner</a>, and you wish to provide a fix for those errors, please <a href="https://github.com/INN/responsive-tables/fork">fork the repository</a> and open a pull request with your fixes.
</p>
<p>Alternatives to this application:</p>
<ul>
<li><a href="https://ianrmedia.unl.edu/responsive-table-generator-tool"><abbr title="University of Nebraska-Lincoln Institute of Agriculture and Natural Resources">UNL IANR</abbr> Responsive table generator tool</a></li>
<li><a href="https://russellgoldenberg.github.io/responsive-table-generator/">Russell Guldenberg's Responsive Table Generator</a></li>
</ul>
<p>If you have used this application before February 17, 2018, please <a href="http://blog.apps.npr.org/2018/02/15/pym-security-vulnerability.html">update your graphics</a> to avoid a high-severity security vulnerability from Pym.js. If you use this product regularly and would like to contribute to its maintenance, please <a href="mailto:support@inn.org">let us know</a>.</p>
<p>This simple app generates a ready-for-deployment, embeddable, responsive version of a Google Spreadsheet from the spreadsheet key and some column formatting information.</p>
<p>It works best with tables that have 5-7 columns. Make sure you <a href="https://support.google.com/docs/answer/37579">publish your spreadsheet to the web</a> before using this generator.</p>
<ul id="tab-nav">
<li class="active" data-tab="generate"><a href="#">Generate</a></li>
<li data-tab="upload-embed"><a href="#">Upload & embed</a></li>
<li data-tab="credits"><a href="#">Credits</a></li>
</ul>
<div id="generate" class="tab">
<div id="basics">
<div id="spreadsheet-key-url">
<h5>Spreadsheet key or URL</h5>
<p>
<input id="basics-keyurl" type="text" placeholder="Google Spreadsheet URL or key" class="span12">
<label>Type or paste your spreadsheet's key or URL here. The "key" is a long sequence of letters, numbers and dashes from the spreadsheet URL.</label>
<button id="start-tabletop" class="btn btn-primary">Get spreadsheet</button>
</p>
</div>
<div id="the-rest">
<h5>Title</h5>
<p>
<input id="basics-title" type="text" placeholder="Title" class="span12">
<label>A title for your responsive table. This will be used in the title tag of the html file for your table.</label>
</p>
<h5>Google Analytics</h5>
<p>
<input id="basics-ga" type="text" placeholder="UA-XXXXXXX-X">
<label>If you want Google Analytics tracking for your table, enter your Google Analytics Tracking ID, of the form UA-XXXXXXX-X</label>
</p>
<p id="showInfo"></p>
<div id="columns">
<h5>Choose columns</h5>
<label>Choose the columns to include in your responsive table and specify column labels for each.</label>
<form id="columns-form">
<table>
<tbody>
<tr>
<th>Column key</th>
<th>Include in table?</th>
<th>Column label</th>
</tr>
</tbody>
</table>
</form>
</div>
<button id="build-zip" class="btn btn-primary btn-large">Download</button>
<span>or</span>
<button id="preview" class="btn btn-small">Preview</button>
<div id="previewTable">
<h5>Preview</h5>
<div id="table-iframe-container"></div>
</div>
</div>
</div>
</div>
<div id="upload-embed" class="tab">
<h3>Uploading</h3>
<p>It's a simple as unzipping the contents of the .zip to a directory on your website.</p>
<h3>Embedding the table</h3>
<p>We're using <a href="http://blog.apps.npr.org/pym.js/">pym.js</a> to make our tables responsive when embedded via <code><iframe></code>.</p>
<p>To embed a table, you can use this snipped to get started:</p>
<pre><code><div id="table-iframe-container"></div>
<script src="https://pym.nprapps.org/pym.v1.min.js"></script>
<script type="text/javascript">
(function() {
var pymParent = new pym.Parent(
'table-iframe-container',
'http://yourdomain.com/path/to/index.html', {});
}());
</script></code></pre>
<p>Be sure to replace <code>http://yourdomain.com/path/to/index.html</code> with the actual URL of your table.</p>
</div>
<div id="credits" class="tab">
<h3>Credits</h3>
<p>This project built and maintained by the <a href="http://labs.inn.org">friendly nerds</a> at the <a href="http://inn.org">Institute for Nonprofit News</a>.</p>
<p><strong>Developers:</strong> <a href="http://labs.inn.org/author/rnagle/">Ryan Nagle</a> and <a href="http://labs.inn.org/author/bkeith/">Ben Keith</a></p>
<p>This little project uses:</p>
<ul>
<li><a href="http://blog.apps.npr.org/pym.js/">NPR's pym.js</a></li>
<li><a href="https://github.com/jsoma/tabletop">Tabletop</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/">Tablesaw</a></li>
<li><a href="https://stuk.github.io/jszip/">JSzip</a> and <a href="https://stuk.github.io/jszip-utils/">JSzip-utils</a></li>
<li><a href="http://eligrey.com/blog/post/saving-generated-files-on-the-client-side">FileSaver.js</a></li>
</ul>
<p>Check them out!</p>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/swig/1.4.1/swig.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js"></script>
<script src="webapp/lib/js/jszip.js"></script><!-- use .min.js when working -->
<script src="webapp/lib/js/jszip-utils.min.js"></script>
<script src="webapp/lib/js/tabletop.js"></script>
<script src="webapp/lib/js/bootstrap-transition.js"></script>
<script src="webapp/lib/js/bootstrap-collapse.js"></script>
<script src="https://pym.nprapps.org/pym.v1.min.js"></script>
<!-- Mandatory in IE 6, 7, 8 and 9. -->
<!--[if IE]>
<script type="text/javascript" src="/webapps/lib/js/jszip-utils-ie.min.js"></script>
<![endif]-->
<script src="webapp/lib/js/FileSaver.js"></script>
<script src="webapp/app.js"></script>
<div class="loading-modal"><div class="spinner"></div></div>
</body>
</html>