-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·103 lines (93 loc) · 4.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Local Buildings Field Guide">
<meta name="author" content="Local Preservation School">
<title>Local Buildings Field Guide</title>
<!-- Favicons
<link rel="apple-touch-icon" sizes="180x180" href="https://localpreservation.github.io/fieldguide/apple-touch-icon.png">
<link rel="icon" type="image/png" href="https://localpreservation.github.io/fieldguide/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://localpreservation.github.io/fieldguide/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="https://localpreservation.github.io/fieldguide/manifest.json">
<link rel="mask-icon" href="https://localpreservation.github.io/fieldguide/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff"> -->
<!-- CSS/JS -->
<link rel="stylesheet" href="style.css">
<script src="https://use.fontawesome.com/805c1c57ab.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tabletop.js"></script>
<script type="text/javascript" src="js/sheetsee.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<h1>Local Buildings Field Guide</h1>
<h3>A Resource on Architectural Style, Type, and Construction</h3> <!-- TODO: Create a Google Form for submitting activities. -->
<p>This website is a collection of information on architectural styles, construction methods, buildings types and other information based on this <a href="https://docs.google.com/spreadsheets/d/1Jgkuyb9hyamhUe3-l51MIzi6o8Ki41kRitoD_flTBRg/edit?usp=sharing">Google Sheet</a>.</p><p>This website was created by Eli Pousson for the <a href="https://localpreservation.github.io/">Local Preservation School</a> and is based on the <a href="https://github.com/jlord/federal-gov" target="_blank">Federal Government 2017 project</a> by Jessica Lord.</i></p>
<h4>Select to filter by category</h4>
<ul class="categories-list">
<li class="item-type style" role="button" tabindex="0">Style</li>
<li class="item-type type" role="button" tabindex="0">Type</li>
<li class="item-type construction" role="button" tabindex="0">Construction</li>
<li class="item-type all hidden" role="button" tabindex="0">View All</li>
</div>
</header>
<div id="acts" class="wrapper">Loading...</div>
<script id="acts_template" type="text/html">
{{#rows}}
<div class="item {{featured}}">
<div class="item-header">
<span class="item-type {{type}}">{{type}}</span>
</div>
<h2 class="item-title">{{title}}</h2>
<p><span class="meta item-wikipedia"><i class="fa fa-wikipedia-w"></i> <a href="{{url_wikipedia}}">Learn more on Wikipedia</a>.</span></p>
<small>
<span class="meta item-instagram"><i class="fa fa-instagram"></i> Instagram: <a href="{{url_instagram}}">#{{hashtag}}</a></span><br/>
<span class="meta item-instagram"><i class="fa fa-twitter"></i> Twitter: <a href="{{url_twitter}}">#{{hashtag}}</a></span><br/>
<span class="meta item-instagram"><i class="fa fa-flickr"></i> Flickr: <a href="{{url_flickr}}">{{hashtag}}</a></span><br/>
<span class="meta item-dates"><i class="fa fa-calendar-o"></i> Dates: {{date_start}} – {{date_end}}</span><br/>
</small>
<p>{{description}}</p>
</div>
{{/rows}}
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var URL = '1Jgkuyb9hyamhUe3-l51MIzi6o8Ki41kRitoD_flTBRg'
Tabletop.init({ key: URL, callback: showInfo, simpleSheet: true })
})
function showInfo(data) {
// TODO Parse article URL to generate source for link
// TODO Add filtering and sorting
var options = {'data': data.reverse(), 'tableDiv': '#acts'}
Sheetsee.makeTable(options)
}
$('li.item-type').click(function(event) {
filter(event.target.classList[1])
})
function filter(type) {
// If you're switching filters, first reset the applied filter.
if (type !== 'all') {
filter('all')
$('.item-type.all')[0].classList.remove('hidden')
} else {
$('.item-type.all')[0].classList.add('hidden')
}
var items = acts.querySelectorAll('.item')
for (var i = 0; i < items.length; i++) {
if (type === 'all') {
items[i].classList.remove('hidden')
} else {
var category = items[i].querySelector('.item-type').textContent.trim();
if (category !== type) {
items[i].classList.add('hidden')
}
}
}
}
</script>
</body>
</html>