Last active
August 17, 2021 22:11
-
-
Save raffazizzi/21ae2bffb387f71feb1efe9feeccba1f to your computer and use it in GitHub Desktop.
Pagination with CETEIcean
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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&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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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><</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 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