-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
294 lines (274 loc) · 17.4 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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>HealthDataLume</title>
<meta name="author" content="Shelley V. Adams"/>
<!-- Bootstrap -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link href="custom.css" rel="stylesheet" type="text/css"/>
<!-- Styles for modal-dialog with samples from GitHub -->
<link href="gh_samples.css" rel="stylesheet" type="text/css"/>
<!-- Styles for output formatting -->
<link href="cda.css" rel="stylesheet" type="text/css"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="sr-only"><a href="#main">Skip to content</a></nav>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<header class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">HealthDataLume<sub class="status text-primary">αlpha</sub></span>
</header><!--/.navbar-header -->
<section class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info-circle fa-lg"></i> <span>About</span> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="modal" rel="license" href="#license" data-target="#license">HealthDataLume license</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="modal" href="#components" data-target="#components">Third-party components</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">More information</li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="modal" href="#privacy_note" data-target="#privacy_note">User privacy</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" data-toggle="modal" href="#CDA_info" data-target="#CDA_info"><abbr title="Clinical Document Architecture">CDA</abbr> data formats</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="modal" href="#useful" data-target="#useful">Useful tools & documentation</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="List links to the project on GitHub"><i class="fa fa-github fa-lg"></i><span class="sr-only"> GitHub</span> <span>Project</span> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/shelleyvadams/HealthDataLume" target="_blank" title="Project files">Browse source code</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/shelleyvadams/HealthDataLume/issues" target="_blank" title="Bugs, questions, and feature requests">Report an issue</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/shelleyvadams/HealthDataLume/commits/master" target="_blank" title="Chronological list of changes">View history</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/shelleyvadams/HealthDataLume/releases" target="_blank" title="No releases yet">Download a release</a></li>
</ul>
</li>
</ul>
<button type="button" class="navbar-right hidden-xs btn btn-link navbar-btn" id="help_button"><i class="fa fa-question-circle fa-lg"></i><span class="sr-only"> Toggle help</span></button>
</section><!--/.collapse.nav-collapse -->
</div><!--/.container-fluid -->
</nav><!--/.navbar -->
<section class="visible-print-block">
<h1>HealthDataLume<sub class="status">alpha</sub></h1>
</section>
</header>
<main id="main">
<div class="container-fluid">
<article id="health_data_lume" role="application">
<form id="record_form" class="hidden-print">
<input type="file" id="xml_file" class="hidden"/>
<input type="hidden" id="xml_string" value=""/>
<div class="input-group">
<div class="input-group-btn">
<button type="button" id="open_file" class="btn btn-primary"><i class="fa fa-folder-open fa-lg"></i><span class="hidden-xs"> Open file</span></button>
<button type="button" id="samples_button" class="btn btn-info"><i class="fa fa-flask fa-lg"></i><span class="hidden-xs"> Sample records</span></button>
</div>
<input type="text" id="file_path" readonly="readonly" class="form-control"/>
<span class="input-group-btn">
<button type="reset" id="reset_button" class="btn btn-default"><i class="fa fa-times"></i><span class="sr-only"> Clear</span></button>
</span>
</div>
<div id="xml_status">
</div><!-- /#xml_status -->
</form>
<section id="output" class="hidden" role="document">
</section>
</article><!-- /#health_data_lume -->
<!-- Sample Record Browser -->
<div class="modal fade" id="github_samples" tabindex="-1" role="dialog" aria-labelledby="github_samplesHeading" aria-hidden="true">
<div class="modal-dialog">
<article class="modal-content" role="document">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i><span class="sr-only">Close dialog</span></button>
<h2 id="github_samplesHeading" class="modal-title">Sample health records</h2>
</header>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<!-- Repository's full_name and link to html_url go inside #github_repo -->
<h4 class="panel-title" id="github_repo"></h4>
</div>
<div class="panel-body clearfix">
</div>
<table class="table">
<caption>
<button type="button" class="btn btn-sm btn-default pull-right" id="github_backnav"><i class="fa fa-fw fa-lg fa-home"></i><span id="github_back_text" class="sr-only">Go to top level</span></button>
<strong>Path:</strong>
<output id="current_path"></output>
</caption>
<thead>
<tr>
<th scope="col" class="gh-item-type">Type</th>
<th scope="col" class="gh-item-name">Name</th>
<th scope="col" class="gh-item-size">Size</th>
</tr>
</thead>
<!-- Filtered directory listing goes inside #github_dir (XML files & directories only.) -->
<tbody id="github_dir">
</tbody>
</table>
</div>
</div>
<footer class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</footer>
</article>
</div>
</div><!-- /#github_samples -->
<!-- A note on privacy -->
<div class="modal fade" id="privacy_note" tabindex="-1" role="dialog" aria-labelledby="privacy_noteHeading" aria-hidden="true">
<div class="modal-dialog modal-lg">
<article class="modal-content" role="document">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i><span class="sr-only">Close dialog</span></button>
<h1 id="privacy_noteHeading" class="modal-title">Privacy in HealthDataLume</h1>
</header>
<div class="modal-body">
<section>
<header>
<h2>In-the-browser processing</h2>
</header>
<p>All of HealthDataLume's data processing code runs <em>in the browser</em> (often called “client-side scripting”). This means that when a user opens a health record file, HealthDataLume <strong>never</strong> sends data from user health record files over the Internet.</p>
<p>As a result, HealthDataLume is very portable! It's safe to use without an encrypted (https) connection. You can even <a href="https://github.com/shelleyvadams/HealthDataLume" target="_blank">download HealthDataLume</a> and use it to view health record files without an Internet connection.<abbr title="Attempts to use HealthDataLume's “Sample records” feature without an Internet connection will produce an error message.">*</abbr></p>
</section>
<section>
<header>
<h2>Getting “Sample records”</h2>
</header>
<p><a href="https://github.com/k33g/gh3/" target="_blank">Gh3</a>, the library HealthDataLume uses to browse and load sample records, always communicates with GitHub over a secure (https) connection.</p>
</section>
<section>
<header>
<h2>Usage statistics</h2>
</header>
<p>Future versions of HealthDataLume may use Google Analytics to gather usage statistics. In that case, users will have the ability to opt-out.</p>
</section>
<footer>
<hr/>
<p>* Attempts to use HealthDataLume's “Sample records” feature without an Internet connection will produce an error.</p>
</footer>
</div>
</article>
</div>
</div><!-- /#CDA_info -->
<!-- License for HealthDataLume -->
<div class="modal fade" id="license" tabindex="-1" role="dialog" aria-labelledby="licenseHeading" aria-hidden="true">
<div class="modal-dialog modal-lg">
<article class="modal-content" role="document">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i><span class="sr-only">Close dialog</span></button>
<h1 id="licenseHeading" class="modal-title">License</h1>
</header>
<div class="modal-body">
<p><cite>HealthDataLume</cite> is free software, licensed under the <cite>MIT License</cite>.</p>
<p>Copyright © 2017 Shelley V. Adams.</p>
<h2>The MIT License (<abbr title="Massachusetts Institute of Technology">MIT</abbr>)</h2>
<blockquote>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</blockquote>
<h2>Third-party components</h2>
<p><cite>HealthDataLume</cite> depends on the following third-party components, which are included in the <tt>lib/</tt> directory. All third-party components are provided under their own respective licenses. License details from each project are provided in the <tt><a href="lib/licenses/" target="_blank">lib/licenses/</a></tt> directory.</p>
</div>
</article>
</div>
</div><!-- /#CDA_info -->
<!-- Listing of included components in Bootstrap modal dialog -->
<div class="modal fade" id="components" tabindex="-1" role="dialog" aria-labelledby="componentsHeading" aria-hidden="true">
<div class="modal-dialog">
<article class="modal-content" role="document">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i><span class="sr-only">Close dialog</span></button>
<h1 id="componentsHeading" class="modal-title">Third-party components</h1>
</header>
<div class="modal-body">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading"><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> <small>by Mark Otto, Jacob Thornton, et al. Copyright Twitter, Inc. <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT license</a></small></h4>
<p class="list-group-item-text">Provides layout, styles, and widgets.</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading"><a href="http://fontawesome.io/" target="_blank">Font Awesome</a> <small>By Dave Gandy. <a href="http://fontawesome.io/license/" target="_blank"><abbr>SIL</abbr> <abbr title="Open Font License">OFL</abbr> 1.1 and MIT license</a></small></h4>
<p class="list-group-item-text">Icon font containing +400 pictographs.</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading"><a href="https://github.com/k33g/gh3/" target="_blank">gh3</a> <small>By Philippe Charrière. <a href="https://github.com/k33g/gh3/#license" target="_blank">MIT license</a></small></h4>
<p class="list-group-item-text">Provides JavaScript bindings to the <a href="https://developer.github.com/v3/" target="_blank">GitHub <abbr title="Application Programming Interface">API</abbr> v3</a> used for in-application access to sample records.</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading"><a href="http://jquery.com/" target="_blank">jQuery</a> <small>by the jQuery Foundation. <a href="https://github.com/jquery/jquery/blob/master/LICENSE.txt" target="_blank">MIT license</a></small></h4>
<p class="list-group-item-text">Used in HealthDataLume's interface; required for Bootstrap and gh3.</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading"><a href="http://underscorejs.org/" target="_blank">UnderscoreJS</a> <small>By Jeremy Ashkenas, DocumentCloud, et al. <a href="https://github.com/jashkenas/underscore/blob/master/LICENSE" target="_blank">MIT license</a></small></h4>
<p class="list-group-item-text">Required for gh3.</p>
</li>
</ul>
</div>
</article>
</div>
</div><!-- /#components -->
<!-- Useful stuff -->
<div class="modal fade" id="useful" tabindex="-1" role="dialog" aria-labelledby="usefulHeading" aria-hidden="true">
<div class="modal-dialog">
<article class="modal-content" role="document">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i><span class="sr-only">Close dialog</span></button>
<h1 id="usefulHeading" class="modal-title">Useful tools & documentation</h1>
</header>
<div class="modal-body">
<p>The following are helpful for working with the HealthDataLume source, but they are neither required by nor included in the project.</p>
<li class="list-group-item">
<h4 class="list-group-item-heading"><a href="http://usejsdoc.org/" target="_blank">JSDoc</a> <small>by Michael Mathews, et al. Apache license, v2.0</small></h4>
<p class="list-group-item-text">HealthDataLume's JavaScript uses JSDoc comments. Generated documentation is not included, but <tt>etc/jsdoc/conf.json</tt> provides the JSDoc configuration used during development.</p>
</li>
</div>
</article>
</div>
</div><!-- /#CDA_info -->
<!-- Introductory references on CDA and C-CDA -->
<div class="modal fade" id="CDA_info" tabindex="-1" role="dialog" aria-labelledby="CDA_infoHeading" aria-hidden="true">
<div class="modal-dialog">
<article class="modal-content" role="document">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i><span class="sr-only">Close dialog</span></button>
<h1 id="CDA_infoHeading" class="modal-title"><abbr title="Clinical Document Architecture">CDA</abbr> health data formats</h1>
</header>
<div class="modal-body">
</div>
</article>
</div>
</div><!-- /#CDA_info -->
</div><!--/.container-fluid -->
</main>
<footer id="footer">
<p class="pull-left text-muted"><a href="https://github.com/shelleyvadams/HealthDataLume" target="_blank">HealthDataLume</a> is free software available under the <cite>MIT License</cite>.</p>
<p class="pull-right text-muted">Copyright © 2017 <a id="author_link" rel="author" href="https://github.com/shelleyvadams" target="_blank">Shelley V. Adams</a>.</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins and gh3) -->
<script src="lib/jquery-1.11.1.min.js"></script>
<!-- Bootstrap compiled plugins -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/gh3/vendors/underscore-min.js"></script>
<script src="lib/gh3/gh3.js"></script>
<script src="HealthDataLume.js"></script>
</body>
</html>