Page MenuHomec4science
Files F104537618

time-us.html
No OneTemporary
Actions

File Metadata

Created
Mon, Mar 10, 06:56

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="[&#34;person&#34;, &#34;location&#34;, &#34;company&#34;, &#34;organization&#34;, &#34;dimension&#34;, &#34;date&#34;, &#34;number&#34;, &#34;heure&#34;, &#34;currency&#34;]" 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="[&#34;agent&#34;, &#34;organisation&#34;, &#34;build&#34;, &#34;money&#34;, &#34;property&#34;, &#34;document&#34;, &#34;produit&#34;, &#34;act&#34;, &#34;tool&#34;, &#34;material&#34;, &#34;task&#34;, &#34;job&#34;, &#34;time&#34;, &#34;money&#34;, &#34;transfer&#34;]" 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 = "&amp;action=search";
if (window.location.href.search(actionURLPattern) &gt; -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) =&gt; {
ev.preventDefault();
console.log("entitiesSelect.change()")
if (! annotationsHidden) {
showAnnotations();
}
});
conceptsSelect = document.getElementsByName('concepts')[0];
conceptsSelect.addEventListener('change', (ev) =&gt; {
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) =&gt; {
if (ev.detail.key == "transcription") {
actionURLPattern = "action=showAnnot";
if (window.location.href.search(actionURLPattern) &gt; -1) {
document.getElementById("show-hide-annotations").click();
}
}
});
</script>
</body>
</html>

Event Timeline

c4science · Help