eeditiones / tei-publisher-faq Goto Github PK
View Code? Open in Web Editor NEWContent of the TEI Publisher FAQ static website
Home Page: https://faq.teipublisher.com/
Content of the TEI Publisher FAQ static website
Home Page: https://faq.teipublisher.com/
Functionality enhancements with JavaScript
Maybe under Webcomponents?
Sometimes a webcomponent lacks a behavior or there is a need to change standard functionality. the documentation for webcomponents lists events they emit and it is possible to hook into those events to change or enhance the application.
<script type="text/javascript" src="resources/scripts/events.js"/>
- it is usually a good idea to have this statement last in the HTML header.document.addEventListener("event-name", (event)=> {
// specific code
});
document.addEventListener("event-name", (event)=> {
if (event.detail && event.detail.id)
{
// specific code
}
});
let shadow=document.getElementById("facsimile").shadowRoot;
let images=shadow.querySelectorAll('img');
The following example includes several of these techniques. It can be seen in action in the TraveLab application.
The Benjamin of Tudela page has three versions of this traveler's log in English, Hebrew and Arabic. In the TEI-XML file, each narrative is built from tei:seg elements, grouped in tei:ab elements. The three versions are presented in three pb-view components, each showing one tei:ab element at a time. The segments of the different versions are modeled as pb-highlight webcomponents, and these are synchronized any time the mouse hovers over any pb-highlight, using the following method.
Concurrent pb-highlight components in all three versions have identical key values. This is used to synchronize them with the following listener to the pb-highlight-on event fired by the pb-highlight component when activated (through a hover action by default). See comments in the code.
document.addEventListener("pb-highlight-on", (event)=> {
if (event.detail && event.detail.id && event.detail.source){
//the key is actually returned by id...
let key=event.detail.id;
//Select the pb-views with the three versions
let pbViews=document.querySelectorAll('pb-view[append-footnotes="append-footnotes"]');
//loop through those pb-views
pbViews.forEach(view => {
//in each version, find the corresponding pb-highlight
let element=view.shadowRoot.querySelector('pb-highlight[key=' + key + ']');
//only progress if corresponding element is found and only bring into view if not the element firing this event
if (element && event.detail.source.id != element.id)
// bring corresponding elements to center of pb-view
element.scrollIntoView({block: 'center' });
});
}
});
How can I include elements located elsewhere (in the same or another document)?
How do I navigate to the root of the document in XPath?
Why does my added model not have an effect?
Page view doesn't work
Why does my document show 'server did not return any content' error message?
Some of my Word formatting is not preserved upon import
How do I log in?
Displaying TEI document metadata
ODD
Numerous institutions require formally structured impressum section
Example with an HTML template showing Impressum
How to add secondary pages to the edition?
Web
Document how secondary pages like 'about the project', 'contact' etc. can be added.
How to replace the default table of content?
propose new FAQ entries based on e-editiones Slack conversations
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.