Skip to content
Snippets Groups Projects
Commit fb639ce7 authored by Rachel Gaubil's avatar Rachel Gaubil
Browse files

[func + edit] add timeline annexe + fix annexes layout

parent 464390eb
No related branches found
No related tags found
1 merge request!66[func + edit] add timeline annexe + fix annexes layout
Showing
with 26448 additions and 23949 deletions
This diff is collapsed.
This diff is collapsed.
......@@ -22,8 +22,7 @@
<text>
<body>
<div>
<!-- <head>La carrière ecclésiastique de Cretin : des ressources pour la <title>Chronique française</title></head> -->
<head>Cretin dans les archives</head>
<head>La carrière ecclésiastique de Cretin : des ressources pour la <title>Chronique française</title></head>
<div>
<p>Les études biographiques sur Guillaume Cretin se sont longtemps limitées à la très
riche introduction de Kathleen Chesney à l'édition de ses <title>Œuvres
......
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* XSLT for transformation of TEI to JSON
* @author RachelGaubil@UGA
* @date : 2024
*/
-->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0"
xmlns:text="urn:oasis:names:tc:opendocument:xmlns:text:1.0"
xmlns:table="urn:oasis:names:tc:opendocument:xmlns:table:1.0" exclude-result-prefixes="xs"
version="2.0">
<xsl:output indent="yes"/>
<xsl:strip-space elements="*"/>
<!-- Ignore les éléments ne contenant que des espaces et les tabulations-->
<xsl:output method="text" encoding="UTF-8"/>
<xsl:template match="/">
<xsl:text>[</xsl:text>
<xsl:variable name="totalCell">
<xsl:value-of select="count(//table:table-row/table:table-cell[(not(@table:number-columns-spanned) or 50 != @table:number-columns-spanned) and not(@table:number-columns-repeated) and child::text:p])"/>
</xsl:variable>
<xsl:variable name="firstYear">
<xsl:value-of select="//table:table/table:table-row[2]/table:table-cell[1]"/>
</xsl:variable>
<xsl:for-each select="//table:table-row[position() > 2]">
<xsl:for-each select="./table:table-cell">
<xsl:variable name="cellNum">
<xsl:value-of select="count(preceding::table:table-cell[(not(@table:number-columns-spanned) or 50 != @table:number-columns-spanned) and not(@table:number-columns-repeated) and child::text:p]) + 1"/>
</xsl:variable>
<!-- somme des colonnes vides et fusionnées -->
<xsl:variable name="precedingYears">
<xsl:value-of select="sum(preceding-sibling::table:table-cell[@table:number-columns-spanned]/@table:number-columns-spanned) + sum(preceding-sibling::table:table-cell[51 > @table:number-columns-repeated]/@table:number-columns-repeated)"/>
</xsl:variable>
<xsl:variable name="startYear">
<xsl:value-of select="$firstYear + count(preceding-sibling::table:table-cell[not(count(preceding-sibling::table:table-cell))]) + $precedingYears"/>
</xsl:variable>
<xsl:if test="./text:p and (not(@table:number-columns-spanned) or @table:number-columns-spanned != 50)">
<xsl:text>{"</xsl:text>
<!-- title -->
<xsl:text>id":"</xsl:text>
<!-- 50 = nb d'années et donc de cellules dans la première ligne => permet de démarrer les id à 1 -->
<xsl:value-of select="$cellNum - 50"/>
<xsl:text>","</xsl:text>
<!-- title -->
<xsl:text>title":"</xsl:text>
<xsl:value-of select="preceding::table:table-cell[@table:number-columns-spanned = 50][1]"/>
<xsl:text>","</xsl:text>
<!-- start year -->
<xsl:text>start":"</xsl:text>
<xsl:value-of select="$startYear"/>
<xsl:text>","</xsl:text>
<!-- end year -->
<xsl:text>end":"</xsl:text>
<xsl:choose>
<xsl:when test="@table:number-columns-spanned">
<xsl:value-of select="$startYear + @table:number-columns-spanned"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$startYear + 1"/>
</xsl:otherwise>
</xsl:choose>
<xsl:text>","</xsl:text>
<!-- name -->
<xsl:text>name":"</xsl:text>
<xsl:choose>
<xsl:when test="count(text:p) > 1">
<xsl:for-each select="./text:p">
<xsl:value-of select="text()"/>
<xsl:if test="position() != last()">
<xsl:text>\n</xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="."/>
</xsl:otherwise>
</xsl:choose>
<xsl:text>"}</xsl:text>
<!-- compare le nombre de cellule avec texte précédentes (+1 pour l'actuelle) avec le nombre total pour savoir si on est bien sur la dernière -->
<xsl:if test="$cellNum != $totalCell">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:if>
</xsl:for-each>
</xsl:for-each>
<xsl:text>]</xsl:text>
</xsl:template>
</xsl:stylesheet>
This diff is collapsed.
......@@ -19,15 +19,31 @@ p {
text-align: justify;
}
div:not(.modal-text) > p:not(.quote):not(:has(img)) {
text-indent: 3rem;
}
.quote {
margin-left: 3rem;
margin-right: 3rem;
margin-left: 6rem;
margin-right: 6rem;
}
.smaller {
font-size: 0.9rem;
}
.tab {
padding: 1rem;
}
img {
max-width: 100%;
}
.double-indent{
text-indent: 5rem !important;
}
/****************
tables
****************/
......@@ -40,6 +56,11 @@ tr.present{
background-color: lightgrey;
}
th {
text-align: center;
vertical-align: middle;
}
/****************
notes
****************/
......
......@@ -2,10 +2,8 @@
--main-color-darker: #846054;
/* brick */
--main-color: #B22222;
/* blue */
/* --main-color: #0d6efd; */
--disabled-color: lightgrey;
--test-color: #DEC9BF;
--selection-color: #DEC9BF;
--highlight-color: #E2E2E2;
--layout-btn-color: #F2F2F2;
}
......@@ -49,12 +47,6 @@ h4 {
text style
****************/
.red {
color:red;
}
/* .caps {
text-transform: uppercase;
} */
.small-caps {
font-variant: small-caps;
}
......@@ -122,7 +114,7 @@ h4 {
}
.dropdown-toggle.dropdown-item.show {
background-color: var(--test-color);
background-color: var(--selection-color);
}
.dropdown-toggle.dropdown-item:not(.show):focus {
......@@ -177,7 +169,7 @@ h4 {
.accordion-button:not(.collapsed) {
color: var(--main-color);
background-color: var(--test-color);
background-color: var(--selection-color);
background-image: none;
}
......
#cretinTitlesVisualization .vis-item {
background-color: var(--selection-color);
border-color: darkred;
top: 2.5px !important;
}
#kingsVisualization .vis-item {
border: none !important;
}
.vis-item.king1, .vis-item.king11, .vis-item.king21 {
background-color: #FDF2E9;
/* mistyRose */
background-color: #FFE4E1;
/* border-color: darkred; */
border: none;
}
.vis-item.king2, .vis-item.king12, .vis-item.king22 {
background-color: #FEF9E7;
/* thistle */
background-color: #D8BFD8;
/* border-color: darkred; */
border: none;
}
.vis-item.king3, .vis-item.king13, .vis-item.king23 {
background-color: #EAFAF1;
/* gainsboro */
background-color: #DCDCDC;
/* border-color: darkred; */
border: none;
}
.vis-item.king4, .vis-item.king14, .vis-item.king24 {
background-color: #EBF5FB;
/* lavender */
background-color: #E6E6FA;
/* border-color: darkred; */
border: none;
}
.vis-item.king5, .vis-item.king15, .vis-item.king25 {
background-color: #F4ECF7;
/* seashell */
background-color: #FFF5EE;
/* border-color: darkred; */
border: none;
}
.vis-item.king6, .vis-item.king16, .vis-item.king26 {
background-color: #FDEDEC;
/* light cyan */
background-color: #E0FFFF;
/* border-color: darkred; */
border: none;
}
.vis-item.king7, .vis-item.king17, .vis-item.king27 {
background-color: #EBEDEF;
/* whitesmoke */
background-color: #F5F5F5;
/* border-color: darkred; */
border: none;
}
.vis-item.king8, .vis-item.king18, .vis-item.king28 {
background-color: #F5B7B1;
/* ivory */
background-color: #FFFFF0;
/* border-color: darkred; */
border: none;
}
.vis-item.king9, .vis-item.king19, .vis-item.king29 {
background-color: #AED6F1;
/* bisque */
background-color: #FFE4C4;
/* border-color: darkred; */
border: none;
}
.vis-item.king10, .vis-item.king20, .vis-item.king30 {
background-color: #FCF3CF;
/* honeydew */
background-color: #F0FFF0;
/* border-color: darkred; */
border: none;
}
static/img/annexe.png

529 KiB

let handler = {
window.onload = function() {
// intiate Cretin titles timeline
if(document.getElementById('cretinTitlesVisualization')){
timeline.init("cretinTitlesVisualization", cretinTitlesHandler);
}
// intiate kings timeline
else if(document.getElementById('kingsVisualization')){
timeline.init("kingsVisualization", kingsHandler);
}
}
let timeline = {
// Configuration for the Timeline
options: {
width: '100%',
orientation: {
axis: 'top'
}
},
init: function(containerId, handlerName) {
handlerName.init();
setTimeout(() => {
// DOM element where the Timeline will be attached
var container = document.getElementById(containerId);
// Initiate timeline
var timeline = new vis.Timeline(container, handlerName.items, handlerName.groups, this.options);
}, "1000");
}
}
let kingsHandler = {
listReigns: "../static/json/list_reigns.json",
copyListReigns: Object(),
items: new vis.DataSet(),
......@@ -35,48 +65,48 @@ let handler = {
// initiate titlesId ("reignName": groupId)
titleCnt = 1;
for(var i = 0; i < handler.titlesList.length; i++){
if (handler.titlesGroup.includes(handler.titlesList[i])){
handler.titlesId[handler.titlesList[i]] = 1;
for(var i = 0; i < kingsHandler.titlesList.length; i++){
if (kingsHandler.titlesGroup.includes(kingsHandler.titlesList[i])){
kingsHandler.titlesId[kingsHandler.titlesList[i]] = 1;
}
else {
titleCnt += 1;
handler.titlesId[handler.titlesList[i]] = titleCnt;
kingsHandler.titlesId[kingsHandler.titlesList[i]] = titleCnt;
}
}
// add groups
handler.groups.add({
kingsHandler.groups.add({
id: 1,
content: "Roi de France / Roi des Francs",
subgroupStack: {'severalReigns': true, "oneReign": false}
});
for (var i = 0; i < handler.titlesList.length; i++) {
var id = handler.titlesId[handler.titlesList[i]];
for (var i = 0; i < kingsHandler.titlesList.length; i++) {
var id = kingsHandler.titlesId[kingsHandler.titlesList[i]];
if (id != 1){
handler.groups.add({
kingsHandler.groups.add({
id: id,
content: handler.titlesList[i],
content: kingsHandler.titlesList[i],
subgroupStack: {'severalReigns': true, "oneReign": false}
});
}
}
$.get(handler.listReigns, function(reigns) {
$.get(kingsHandler.listReigns, function(reigns) {
handler.copyListReigns = reigns;
kingsHandler.copyListReigns = reigns;
var kingNb = 0;
for (var i = 0; i < reigns.length; i++) {
// on retire le reigne courant de la copie de la liste
handler.copyListReigns = handler.copyListReigns.slice(1);
kingsHandler.copyListReigns = kingsHandler.copyListReigns.slice(1);
var reignId = reigns[i]["id"];
// ne traiter que les reignes pas déjà traités
if (handler.reignIds.findIndex((element) => element == reignId) == -1) {
if (kingsHandler.reignIds.findIndex((element) => element == reignId) == -1) {
handler.reignIds.push(reignId);
kingsHandler.reignIds.push(reignId);
var start = reigns[i]["start"];
var end = reigns[i]["end"];
......@@ -86,29 +116,29 @@ let handler = {
var id = i + 1;
var content = reigns[i]["name"];
var title = reigns[i]["title"];
var groupId = handler.titlesId[title];
var groupId = kingsHandler.titlesId[title];
// vérifier si pas un doublons de reigne, si oui alors l'indiquer
var severalReigns = false;
for (var copyReign in handler.copyListReigns) {
var copyTitle = handler.copyListReigns[copyReign]["title"];
var copyGroupId = handler.titlesId[copyTitle];
var copyStart = handler.copyListReigns[copyReign]["start"];
var copyEnd = handler.copyListReigns[copyReign]["end"];
for (var copyReign in kingsHandler.copyListReigns) {
var copyTitle = kingsHandler.copyListReigns[copyReign]["title"];
var copyGroupId = kingsHandler.titlesId[copyTitle];
var copyStart = kingsHandler.copyListReigns[copyReign]["start"];
var copyEnd = kingsHandler.copyListReigns[copyReign]["end"];
if (start == copyStart && end == copyEnd && groupId == copyGroupId) {
severalReigns = true;
}
}
// list kings to have one color per king
if (handler.kingsList.findIndex((element) => element == content) == -1) {
handler.kingsList.push(content);
if (kingsHandler.kingsList.findIndex((element) => element == content) == -1) {
kingsHandler.kingsList.push(content);
}
kingNb = handler.kingsList.findIndex((element) => element == content)+1;
kingNb = kingsHandler.kingsList.findIndex((element) => element == content)+1;
// add items
if (severalReigns) {
handler.items.add({
kingsHandler.items.add({
id: id,
content: content,
start: start,
......@@ -118,7 +148,7 @@ let handler = {
className: 'king' + kingNb
});
} else {
handler.items.add({
kingsHandler.items.add({
id: id,
content: content,
start: start,
......@@ -135,20 +165,49 @@ let handler = {
}
}
window.onload = function() {
handler.init();
setTimeout(() => {
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
let cretinTitlesHandler = {
titlesList: "../static/json/list_cretin_titles.json",
titlesGroups: [],
items: new vis.DataSet(),
groups: new vis.DataSet(),
init: function() {
// Configuration for the Timeline
var options = {
width: '100%'
};
// get json content
$.get(cretinTitlesHandler.titlesList, function(titles) {
var timeline = new vis.Timeline(container, handler.items, handler.groups, options);
// list groups
for(var i = 0; i < titles.length; i++){
if (!cretinTitlesHandler.titlesGroups.includes(titles[i]["title"])){
cretinTitlesHandler.titlesGroups.push(titles[i]["title"]);
}
}
// add groups
for(var i = 0; i < cretinTitlesHandler.titlesGroups.length; i++){
cretinTitlesHandler.groups.add({
id: i + 1,
content: cretinTitlesHandler.titlesGroups[i],
subgroupStack: true
});
}
}, "1000");
// add items
for(var i = 0; i < titles.length; i++){
var groupId = cretinTitlesHandler.titlesGroups.indexOf(titles[i]["title"]);
// to display title when hovering items
var item = document.createElement('span');
item.setAttribute("title",titles[i]["name"]);
item.innerHTML = titles[i]["name"];
cretinTitlesHandler.items.add({
id: titles[i]["id"],
content: item,
start: titles[i]["start"] + "-01-01",
end: titles[i]["end"] + "-01-01",
group: groupId
});
}
});
}
}
[{"id":"1","title":"Chapelle Royale","start":"1486","end":"1487","name":"Chantre-chapelain"},{"id":"2","title":"Chapelle Royale","start":"1513","end":"1514","name":"Aumônier du roi"},{"id":"3","title":"Chapelle Royale","start":"1513","end":"1521","name":"Aumônier du roi"},{"id":"4","title":"Chapelle Royale","start":"1521","end":"1522","name":"Aumônier du roi"},{"id":"5","title":"Chapelle Royale","start":"1516","end":"1526","name":"Chantre de la chapelle royale"},{"id":"6","title":"Sainte-Chapelle de Paris","start":"1476","end":"1515","name":"Chapelain de la chapelle Saint-Blaise"},{"id":"7","title":"Sainte-Chapelle de Paris","start":"1522","end":"1526","name":"Chanoine (9e chanoine)\n(1522/09/01-démission 1525/11/05)"},{"id":"8","title":"Sainte-Chapelle de Paris","start":"1523","end":"1526","name":"Chantre\n(1523/06/27- démission 1525/11/05)"},{"id":"9","title":"Sainte-Chapelle de Vincennes","start":"1504","end":"1524","name":"Chanoine\n(1504/12/05--1523/06/27)"},{"id":"10","title":"Sainte-Chapelle de Vincennes","start":"1504","end":"1524","name":"Trésorier\n(1504/11/29-1523/06/27)"},{"id":"11","title":"Diocèse de Troyes","start":"1486","end":"1487","name":"Recteur de l'église Saint-Léger"},{"id":"12","title":"Diocèse de Coutances","start":"1493","end":"1494","name":"Curé de l'église de Campeaux ?\n(1497/06/13)"},{"id":"13","title":"Diocèse de Coutances","start":"1512","end":"1513","name":"Curé de Picauville ?\n(1512/05/12)"},{"id":"14","title":"Diocèse d'Evreux","start":"1486","end":"1503","name":"Chanoine du Chapitre cathédral\n(permutation avec un bénéfice troyen en 1486-permutation en 1502/03/01)"},{"id":"15","title":"Diocèse d'Evreux","start":"1502","end":"1526","name":"Curé du Fidelaire\n(1502/03/01-1525/11/30"},{"id":"16","title":"Diocèse du Mans","start":"1504","end":"1505","name":"Chapelain de l'autel Saint-Nicolas (cathédrale)\n(1504/11/29)"},{"id":"17","title":"Diocèse de Châlons-en-Champagne","start":"1520","end":"1526","name":"Doyen\n(1520/06/10-1525/11/30"},{"id":"18","title":"Diocèse d'Auxerre","start":"1523","end":"1524","name":"Curé de Saint-Pierre-de-Tho\n(1523/06/26)"}]
\ No newline at end of file
{% extends "base.html.j2" %}
{% block css %}
<link href="{{ url_for('static', filename='css/libs/vis-timeline-graph2d.min.css') }}" rel="stylesheet"/>
<link href="{{ url_for('static', filename='css/timelines.css') }}" rel="stylesheet"/>
{% endblock %}
{% block pageTitle %}Carrière ecclésiastique de Guillaume Cretin : ligne du temps{% endblock %}
{% block body %}
<h2 class="title">Carrière ecclésiastique de Guillaume Cretin : ligne du temps</h2>
<div class="row">
<div class="col" id="instructions">
<p>Pour manipuler la frise chronologique :</p>
<ul>
<li>Pour zoomer-dézoomer, utiliser la roulette à l'intérieur du cadre.</li>
<li>Pour se déplacer dans la frise, maintenir appuyé dans le cadre et déplacer la souris.</li>
</ul>
</div>
</div>
<div id="cretinTitlesVisualization"></div>
<div id="hoveredItem"></div>
{% endblock %}
{% block js %}
<script src="{{ url_for('static', filename='js/libs/jquery-3.3.1.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/vis-timeline-graph2d.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/timelines.js') }}"></script>
{% endblock %}
<h2 xmlns="http://www.w3.org/1999/xhtml" class="title">Cretin dans les archives</h2>
<h2 xmlns="http://www.w3.org/1999/xhtml" class="title">La carrière ecclésiastique de Cretin : des ressources pour la <span class="fst-italic">Chronique française</span></h2>
<div xmlns="http://www.w3.org/1999/xhtml">
<p>Les études biographiques sur Guillaume Cretin se sont longtemps limitées à la très
riche introduction de Kathleen Chesney à l'édition de ses <span class="fst-italic">Œuvres
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -4,7 +4,7 @@
{% block css %}
<link href="{{ url_for('static', filename='css/libs/vis-timeline-graph2d.min.css') }}" rel="stylesheet"/>
<link href="{{ url_for('static', filename='css/timeline.css') }}" rel="stylesheet"/>
<link href="{{ url_for('static', filename='css/timelines.css') }}" rel="stylesheet"/>
{% endblock %}
{% block body %}
......@@ -21,12 +21,12 @@
</div>
<div id="visualization"></div>
<div id="kingsVisualization"></div>
{% endblock %}
{% block js %}
<script src="{{ url_for('static', filename='js/libs/jquery-3.3.1.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/vis-timeline-graph2d.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
<script src="{{ url_for('static', filename='js/timelines.js') }}"></script>
{% endblock %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment