Skip to content

Instantly share code, notes, and snippets.

@raffazizzi

raffazizzi/hipsterTEI.xml

Last active August 17, 2021 22:11
Show Gist options
  • Save raffazizzi/21ae2bffb387f71feb1efe9feeccba1f to your computer and use it in GitHub Desktop.
Save raffazizzi/21ae2bffb387f71feb1efe9feeccba1f to your computer and use it in GitHub Desktop.
Download ZIP
Pagination with CETEIcean
Raw
hipsterTEI.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?>
<?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng" type="application/xml"
schematypens="http://purl.oclc.org/dsdl/schematron"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
<teiHeader>
<fileDesc>
<titleStmt>
<title>Hipster TEI (paginated)</title>
</titleStmt>
<publicationStmt>
<p>Publication Information</p>
</publicationStmt>
<sourceDesc>
<p>Information about the source</p>
</sourceDesc>
</fileDesc>
</teiHeader>
<text>
<body>
<pb n="1"/>
<div>
<head>Vegan plaid beard</head>
<p>Lorem ipsum dolor amet succulents cred godard meditation kogi messenger bag.
Single-origin coffee thundercats artisan heirloom tote bag DIY schlitz viral raw
denim vape truffaut meditation. Beard raclette copper mug cornhole before they sold
out taiyaki microdosing yuccie live-edge unicorn street art disrupt paleo fam forage.
Adaptogen migas etsy marfa brooklyn, DIY mixtape cloud bread actually hella
typewriter retro.</p>
<p>Ramps +1 dreamcatcher, fixie authentic fam beard tbh lomo cronut. Sustainable
dreamcatcher stumptown, flexitarian poutine irony heirloom aesthetic bicycle rights
hot chicken. Artisan kale chips before they sold out flannel, vegan plaid beard put a
bird on it neutra paleo air plant craft beer forage master cleanse af. VHS poke
raclette williamsburg, vegan sriracha distillery scenester pickled typewriter tumblr
organic cardigan messenger bag gentrify.</p>
<pb n="2"/>
<p>Cray gochujang cold-pressed microdosing vice williamsburg fixie shoreditch cloud
bread hell of. Vexillologist jianbing snackwave copper mug wolf, four loko ethical
scenester. Kinfolk selfies asymmetrical food truck skateboard, unicorn farm-to-table.
XOXO health goth mustache, beard skateboard copper mug pok pok distillery. Seitan
chia scenester church-key ugh.</p>
<p>PBR&amp;B 3 wolf moon squid letterpress. Semiotics freegan heirloom enamel pin
hexagon brooklyn letterpress ramps. Fam marfa lyft pabst. Readymade paleo four dollar
toast man bun wolf vice subway tile mumblecore whatever, 90's lyft marfa hammock.
Migas mixtape hexagon wolf yr. La croix kale chips taiyaki chambray, lo-fi echo park
hashtag pop-up shabby chic live-edge etsy. XOXO thundercats hell of hot chicken
lumbersexual.</p>
</div>
<pb n="3"/>
<div>
<head>Lo-fi typewriter sriracha</head>
<p>Lo-fi typewriter sriracha, sartorial keffiyeh blue bottle semiotics. Artisan selvage
pork belly food truck occupy vegan deep v live-edge brooklyn hexagon truffaut offal
chicharrones everyday carry gentrify. Gluten-free 3 wolf moon tousled, tilde keffiyeh
raw denim small batch. Street art freegan godard, hammock humblebrag skateboard
hexagon twee ennui poke kale chips taiyaki church-key. Quinoa edison bulb drinking
vinegar hell of beard. Neutra lumbersexual godard, asymmetrical fixie vegan affogato
austin prism typewriter vape pug.</p>
</div>
</body>
</text>
</TEI>
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CETEIcean pagination test</title>
<link rel="stylesheet" href="http://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;
}
</style>
<script src="http://teic.github.io/CETEIcean/js/CETEI.js"></script>
</head>
<body>
<!-- Pagination controls. They start disabled. -->
<div id="controls" style="float:right">
<button id="prev" disabled>&lt;</button>
<button id="next" disabled>&gt;</button>
</div>
<!-- Where the TEI goes -->
<div id="TEI"></div>
<script>
// CODE TO HIDE A PAGE
function showPage(page) {
// Hide all elements that do not belong to the page indicated
var n
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_ELEMENT, null, false)
while (n = walk.nextNode()) {
// If this is a page break, check its @n.
// If @n is lower or higher than the page requested, set 'hide' flag.
// If @n corresponds to the page requested, remove 'hide' flag.
if (n.localName === 'tei-pb' ) {
if (parseInt(n.getAttribute('n')) < page || parseInt(n.getAttribute('n')) > page) {
hide = true
} else {
hide = false
}
}
// Determine whether the current element contains the pb corresponding to the requested page.
// If yes, we cannot hide this element or the page itself will be hidden!
// TODO: this may leave some unwanted text nodes lying around depending where the pb is.
var isPbAncestor = Array.from(n.querySelectorAll('tei-pb')).filter(function(pb) {
return parseInt(pb.getAttribute('n')) === page
}).length > 0
// If the hide flag is set and this is not a pb ancestor, set hiding CSS class.
if (hide && !isPbAncestor) {
n.classList.add('hid_page')
}
}
}
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment