Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F104537618
time-us.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Mon, Mar 10, 06:56
Size
12 KB
Mime Type
text/html
Expires
Wed, Mar 12, 06:56 (2 d)
Engine
blob
Format
Raw Data
Handle
24807543
Attached To
rNIETZSCHEDM nietzsche-dm
time-us.html
View Options
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
<link rel="shortcut icon" type="image/x-icon" href="resources/images/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-16.png" sizes="16x16"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-24.png" sizes="24x24"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-32.png" sizes="32x32"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-64.png" sizes="64x64"/>
<title data-template="config:app-title"/>
<meta name="description" content="Default single text layout"/>
<meta name="pb-template" content="view.html"/>
<link rel="stylesheet" href="resources/css/theme.css"/>
<link rel="stylesheet" href="resources/css/time-us.css"/>
<script type="module" src="pb-components-bundle.js" data-template="pages:load-components"/>
<style>
main {
display: grid;
height: calc(100vh - 128px);
grid-template-columns: 420px 1fr;
grid-template-rows: auto 1fr auto;
}
#title-view1 {
font-size: 20px;
margin: 3% 0;
}
#metadata {
font-size: 18px;
margin: 3% 0;
}
#view1 {
grid-column: 2 / 2;
overflow: auto;
padding: 20px;
}
.toc {
grid-column: 1 / 1;
grid-row: 1 / span 3;
overflow: auto;
font-size: 14px;
}
pb-select {
overflow: auto;
}
.annotForms {
position: -webkit-sticky;
position: sticky;
top: 128px;
}
</style>
</head>
<body>
<pb-page data-template="pages:pb-page" locales="resources/i18n/{{ns}}/{{lng}}.json" unresolved="unresolved">
<pb-document id="document1" data-template="pages:pb-document"/>
<app-drawer-layout force-narrow="force-narrow">
<app-drawer data-template="templates:include" data-template-path="templates/drawer.html"/>
<app-header-layout>
<app-header slot="header" reveals="reveals" fixed="fixed" effects="waterfall">
<app-toolbar data-template="templates:include" data-template-path="templates/menu.html"/>
<app-toolbar data-template="templates:include" data-template-path="templates/toolbar.html"/>
</app-header>
<main>
<pb-drawer toggle="tocToggle" class="toc" emit="toc" subscribe="transcription" max-width="1024px">
<div class="drawer-content">
<pb-view id="title-view1" src="document1" xpath="//teiHeader" view="single">
<pb-param name="mode" value="title"/>
</pb-view>
<pb-view id="metadata" src="document1" xpath="//teiHeader" view="single">
<pb-param name="mode" value="metadata"/>
</pb-view>
</div>
<div class="annotForms">
<form id="eform" action="" style="float:left;">
<pb-select label="Entités" name="entites" values="["person", "location", "company", "organization", "dimension", "date", "number", "heure", "currency"]" multi="">
<paper-item value="person">Personne</paper-item>
<paper-item value="location">Lieu</paper-item>
<paper-item value="company">Société</paper-item>
<paper-item value="organization">Organisation</paper-item>
<paper-item value="date">Date</paper-item>
<paper-item value="dimension">Dimension</paper-item>
<paper-item value="heure">Heure</paper-item>
<paper-item value="currency">Devise</paper-item>
<paper-item value="number">Nombre</paper-item>
</pb-select>
<button type="button" id="show-hide-annotations" value="show-hide"><paper-button>Voir / Cacher</paper-button></button>
</form>
<form id="cform" action="" style="float:left;">
<pb-select label="Concepts" name="concepts" values="["agent", "organisation", "build", "money", "property", "document", "produit", "act", "tool", "material", "task", "job", "time", "money", "transfer"]" multi="">
<paper-item value="agent">Agent</paper-item>
<paper-item value="act">Acte</paper-item>
<paper-item value="tool">Outil</paper-item>
<paper-item value="task">Tâche</paper-item>
<paper-item value="job">Travail</paper-item>
<paper-item value="build">Fabrication</paper-item>
<paper-item value="organisation">Organisation</paper-item>
<paper-item value="document">Document</paper-item>
<paper-item value="produit">Produit</paper-item>
<paper-item value="material">Matière</paper-item>
<paper-item value="property">Propriété</paper-item>
<paper-item value="time">Temps</paper-item>
<paper-item value="money">Argent</paper-item>
<paper-item value="transfer">Transfert</paper-item>
</pb-select>
</form>
</div>
</pb-drawer>
<pb-view id="view1" src="document1" column-separator=".tei-cb" append-footnotes="append-footnotes" subscribe="transcription" emit="transcription" style="height: 100vh;"/>
<!-- div><p><span data-template="api:coin-span"/></p></div-->
</main>
</app-header-layout>
</app-drawer-layout>
</pb-page>
<div class="splash"/>
<script>
function resetTokenHighlighting(view) {
const allTokens = view.querySelectorAll('token');
Array.from(allTokens).forEach(function(t) {
t.style.background = ""
t.style.border = ""
t.style.borderColor = ""
});
}
function highlightTokens(view, form, tokenAttr) {
const formData = new FormData(form);
for(var formDataEntry of formData.entries()) {
const tokenType = formDataEntry[1];
var tokens = view.querySelectorAll('token['+tokenAttr+'="'+tokenType+'"]');
Array.from(tokens).forEach(function(t) {
if (tokenAttr == "type") {
t.style.background = tokenColor[tokenType]
} else {
t.style.border = "solid 1px";
t.style.borderWidth = "medium";
t.style.borderColor = tokenColor[tokenType];
}
});
}
}
function showAnnotations() {
const view = document.getElementById('view1').shadowRoot;
// Are we coming from a search?
// Then, have to reload the document, not in search mode,
// thus getting the necessary context for annotations (standOff)
actionURLPattern = "&action=search";
if (window.location.href.search(actionURLPattern) > -1) {
window.location.href = window.location.href.replace(/\?.*$/g, "?action=showAnnot");
}
resetTokenHighlighting(view);
highlightTokens(view, entitiesForm, "type");
highlightTokens(view, conceptsForm, "kind");
}
function hideAnnotations() {
const view = document.getElementById('view1').shadowRoot;
resetTokenHighlighting(view);
}
var style = getComputedStyle(document.body);
var tokenColor = {
person: style.getPropertyValue('--person-background-color'),
location: style.getPropertyValue('--location-background-color'),
company: style.getPropertyValue('--company-background-color'),
organization: style.getPropertyValue('--organization-background-color'),
date: style.getPropertyValue('--date-background-color'),
dimension: style.getPropertyValue('--number-background-color'),
heure: style.getPropertyValue('--date-background-color'),
number: style.getPropertyValue('--number-background-color'),
currency: style.getPropertyValue('--number-background-color'),
agent: style.getPropertyValue('--person-background-color'),
act: style.getPropertyValue('--person-background-color'),
build: style.getPropertyValue('--person-background-color'),
job: style.getPropertyValue('--person-background-color'),
tool: style.getPropertyValue('--person-background-color'),
task: style.getPropertyValue('--person-background-color'),
produit: style.getPropertyValue('--material-background-color'),
property: style.getPropertyValue('--material-background-color'),
material: style.getPropertyValue('--material-background-color'),
document: style.getPropertyValue('--material-background-color'),
organisation: style.getPropertyValue('--organization-background-color'),
transfer: style.getPropertyValue('--transfer-background-color'),
time: style.getPropertyValue('--date-background-color'),
money: style.getPropertyValue('--number-background-color')
};
var annotationsHidden = true;
// const query = document.querySelector('pb-search').shadowRoot.querySelector('paper-input').value;
// console.log(query);
const entitiesForm = document.getElementById('eform');
const conceptsForm = document.getElementById('cform');
entitiesSelect = document.getElementsByName('entites')[0];
entitiesSelect.addEventListener('change', (ev) => {
ev.preventDefault();
console.log("entitiesSelect.change()")
if (! annotationsHidden) {
showAnnotations();
}
});
conceptsSelect = document.getElementsByName('concepts')[0];
conceptsSelect.addEventListener('change', (ev) => {
ev.preventDefault();
console.log("conceptsSelect.change()")
if (! annotationsHidden) {
showAnnotations();
}
});
document.getElementById("show-hide-annotations").onclick = function() {
if (annotationsHidden) {
showAnnotations();
} else {
hideAnnotations();
}
annotationsHidden = ! annotationsHidden;
}
window.addEventListener('pb-update', (ev) => {
if (ev.detail.key == "transcription") {
actionURLPattern = "action=showAnnot";
if (window.location.href.search(actionURLPattern) > -1) {
document.getElementById("show-hide-annotations").click();
}
}
});
</script>
</body>
</html>
Event Timeline
Log In to Comment