-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (145 loc) · 4.63 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CETEIcean pagination test</title>
<link rel="stylesheet" href="https://teic.github.io/CETEIcean/css/CETEIcean.css" media="screen" charset="utf-8">
<style>
tei-pb {
display: block;
width: 100%;
text-align: right;
color: gray;
margin: 2em 0 2em 0;
font-size: 11pt;
}
tei-pb:before {
content: "[page:\a0" attr(n) "]";
}
.hid_page {
display: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-right: 20px;
height: 50px;
line-height: 50px;
display: inline-block;
}
</style>
<script src="https://teic.github.io/CETEIcean/js/CETEI.js"></script>
</head>
<body>
<div>
<ul>
<li><a href="https://github.com/raffazizzi/ceteicean-pagination">Code on GitHub</a></li>
<li><a href="https://github.com/raffazizzi/ceteicean-pagination/blob/master/hipsterTEI.xml">TEI source</a></li>
</ul>
</div>
<!-- Pagination controls. They start disabled. -->
<div id="controls" style="float:right">
<button id="prev" disabled><</button>
<button id="next" disabled>></button>
</div>
<!-- Where the TEI goes -->
<div id="TEI"></div>
<script>
// CODE TO HIDE A PAGE
function showPage(page) {
// Hide all text that does not belong to the page indicated
var n
var pbs = 0
var hide = false
// First, remove all hiding CSS classes, if present.
Array.from(document.querySelectorAll('.hid_page')).map(function (el) {
el.classList.remove('hid_page')
})
// Walk trough all descendants of tei-text
var walk = document.createTreeWalker(document.querySelector('tei-text'), NodeFilter.SHOW_ALL, null, false)
while (n = walk.nextNode()) {
if (n.nodeType === Node.ELEMENT_NODE) {
// If this is a page beginning, update page count.
// If page count is lower or higher than the page requested, set 'hide' flag.
// If page count corresponds to the page requested, remove 'hide' flag.
if (n.localName === 'tei-pb' ) {
pbs++
if (pbs < page || pbs > page) {
hide = true
} else {
hide = false
}
}
// If the hide flag is set and this is an empty element, hide it just in case the
// CETEIcean CSS (or other) does something with it.
if (hide && n.childNodes.length === 0) {
n.classList.add('hid_page')
}
} else if (n.nodeType === Node.TEXT_NODE) {
// We mostly operate at text node level by storing and restoring text data.
// Start by always restoring text data is previously removed.
if (n.storedContent) {
n.textContent = n.storedContent
}
// If the 'hide' flag is set, store text content and remove it.
if (hide) {
n.storedContent = n.textContent
n.textContent = ''
}
}
}
}
// CODE TO RUN CETEICEAN
var CETEIcean = new CETEI()
CETEIcean.getHTML5('hipsterTEI.xml', function(data) {
document.getElementById("TEI").innerHTML = ""
document.getElementById("TEI").appendChild(data)
CETEIcean.addStyle(document, data)
// Determine number of pages
var pages = document.querySelectorAll('tei-text tei-pb').length
// Only proceed if there's more than one page.
if (pages > 1) {
// Show first page only
var curPage = 1
showPage(curPage)
// Set up pagination buttons
var nextBtn = document.querySelector('#next')
var prevBtn = document.querySelector('#prev')
// Enable 'next' button
nextBtn.disabled = false
// Routine for updating button's availability
function updateBtns() {
if (curPage === pages) {
nextBtn.disabled = true
} else {
nextBtn.disabled = false
}
if (curPage === 1) {
prevBtn.disabled = true
} else {
prevBtn.disabled = false
}
}
// Add click events to pagination buttons
nextBtn.addEventListener('click', function(e) {
if (curPage + 1 <= pages) {
curPage++
showPage(curPage)
}
updateBtns()
})
prevBtn.addEventListener('click', function(e) {
if (curPage - 1 > 0) {
curPage--
showPage(curPage)
}
updateBtns()
})
}
})
</script>
</body>
</html>