-
Notifications
You must be signed in to change notification settings - Fork 26
Expand file tree
/
Copy pathone-page-site-hbs.htm
More file actions
121 lines (110 loc) · 5.09 KB
/
one-page-site-hbs.htm
File metadata and controls
121 lines (110 loc) · 5.09 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
114
115
116
117
118
119
120
121
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One Page Demo | Handlebars</title>
<style>
body { padding:20px 40px; }
nav { padding:1em; }
nav a { padding:10px; }
nav a.active { color:white; background-color:darkblue; }
.align-right { text-align:right; }
p { padding: 1em; }
table { border-collapse:collapse; margin-top:40px; }
thead { background-color:darkgreen; color:white; }
th, td { padding:0.5em 1em; border:1px solid darkgreen; }
tr:nth-child(even) { background-color: lightgreen; }
.error { padding:1em; color:white; background-color:red; }
.top-nav {
position: fixed;
background-color: white;
}
section { width:100%; min-height: 600px; padding:20px; }
#test1 { background-color: red; }
#test2 { background-color: lightblue; }
#test3 { background-color: green; }
.modal-overlay .modal-content {
background-color: black;
padding: 40px 80px;
color: white;
font-size: 1.5em;
}
</style>
</head>
<body>
<nav class="top-nav">
<a href="#test1" data-one-page>Test 1</a>
<a href="#test2" data-one-page>Test 2</a>
<a href="#test3" data-one-page>Test 3</a>
</nav>
<div id="view">
<section id="test1"></section>
<section id="test2">
<json-data
data-url="https://www.dataformsjs.com/data/geonames/countries"
data-template-id="countries-list">
</json-data>
</section>
<section id="test3"></section>
<div class="modal-content"
hidden
data-show-every="10 minutes">
Modal Test from [modalAlert] Plugin.<br>
This message will show once every 10 minutes
</div>
</div>
<nav>
<a href="#test1" data-one-page>Test 1</a>
<a href="#test2" data-one-page>Test 2</a>
<a href="#test3" data-one-page>Test 3</a>
</nav>
<script type="text/x-template" data-engine="handlebars" id="countries-list">
{{#if isLoading}}<div>Loading...</div>{{/if}}
{{#if hasError}}<div class="error">{{errorMessage}}</div>{{/if}}
{{#if isLoaded}}
<div>
<input
data-filter-selector="table"
data-filter-results-text-selector="h1"
data-filter-results-text-all="{totalCount} Countries"
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
placeholder="Enter filter, example 'North America'">
</div>
<p>Click on a column to sort rows based on column values.</p>
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Size (KM)</th>
<th>Population</th>
<th>Continent</th>
</tr>
</thead>
<tbody>
{{#each countries}}
<tr>
<td>{{iso}}</td>
<td><i class="{{lowerCase iso}} flag"></i>{{country}}</td>
<td class="align-right" data-value="{{area_km}}">{{formatNumber area_km}}</td>
<td class="align-right" data-value="{{population}}">{{formatNumber population}}</td>
<td>{{continent}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
</script>
<!-- Handlebars and Helper -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.6/dist/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/handlebars-helpers.min.js"></script>
<!-- DataFormsJS Standard Files -->
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/onePageSite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/modalAlert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/controls/json-data.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>
</body>
</html>