laradb

script pour établir une bdd à partir d'un tsv avec différent format - retour accueil

git clone git://bebou.netlib.re/laradb
Log | Files | Refs | 

commit 3abf458857165edb57e5947c4586e5d2340fec3f
parent ed86a34be22792f8f0b837e46d905cb3402a2e5c
Auteurice: martlem <contact@martinlemaire.fr>
Date:   Tue, 12 Nov 2024 13:19:34 +0100

map style + interactions

Diffstat:

Mmain.sh | 9+++++----


Asrc/about.sh | 15+++++++++++++++


Msrc/index.sh | 4+++-


Msrc/map.sh | 93++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------


Asrc/static/TimesDot-Italic.woff | 0


Asrc/static/TimesDot-Italic.woff2 | 0


Asrc/static/TimesDotBol.woff | 0


Asrc/static/TimesDotBol.woff2 | 0


Asrc/static/TimesDotRom.woff | 0


Asrc/static/TimesDotRom.woff2 | 0


Msrc/static/cssVarFilledCookies.css | 6+++---


Msrc/static/cssVarFilledCookies.js | 11++++++++++-


Msrc/static/script.js | 21++++++++++++---------


Msrc/static/style.css | 138++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------


Msrc/table.sh | 1+


Msrc/templates/foot.html | 2++


Asrc/templates/nav-main.html | 6++++++


Msrc/templates/nav.html | 4+---


Msrc/timeline.sh | 11++++++-----


19 files changed, 249 insertions(+), 72 deletions(-)

diff --git a/main.sh b/main.sh
@@ -12,12 +12,13 @@ echo Converting dates...
 #./src/utils/date_epoch.sh
 
 #./src/index.sh
-
-./src/timeline.sh
-
+#
+#./src/timeline.sh
+#
 #./src/table.sh
 #
-#./src/map.sh
+./src/map.sh
+./src/about.sh
 
 cp src/static/* dist/
 
diff --git a/src/about.sh b/src/about.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+
+echo Building about.html
+
+DIST="dist/"
+
+cat << % > $DIST/about.html
+$(cat src/templates/head.html)
+$(cat src/templates/nav-main.html)
+<section class="large">
+$(curl https://mypads2.framapad.org/p/about-iz6esk9yi/export/txt)
+</section>
+$(cat src/templates/foot.html)
+%
+
diff --git a/src/index.sh b/src/index.sh
@@ -6,8 +6,10 @@ DIST="dist/"
 
 cat << % > $DIST/index.html
 $(cat src/templates/head.html)
-$(cat src/templates/nav.html)
+$(cat src/templates/nav-main.html)
+<section class="large">
 $(curl https://mypads2.framapad.org/p/landing-d46eqk9qp/export/txt)
+</section>
 $(cat src/templates/foot.html)
 %
 
diff --git a/src/map.sh b/src/map.sh
@@ -30,27 +30,47 @@ cat << % > $DIST/$OUT
 		<link rel="stylesheet" href="cssVarFilledCookies.css">
 		<script src="cssVarFilledCookies.js" defer></script>
 		<script src="script.js" defer></script>
-		<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
-		<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css" />
-		<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css" />
+
+        <link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
+        <script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
 	</head>
 	<body>
 
+$(cat src/templates/nav-main.html)
 $(cat src/templates/nav.html)
 
 		<div id="map"></div>
 
-		<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
-		<script src="https://unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
 
 <script>
-let map = L.map('map', {
-	center: [48.8566, 2.3522],
-	zoom: 1,
-	zoomControl: true,
-	attributionControl: false
+
+
+mapboxgl.accessToken = 'pk.eyJ1IjoiYW1mZW1saWIiLCJhIjoiY20zYWNpdGllMDA5czJrcjM1MWR0dGpqdiJ9.f-jxHPeMLzwDmoE3zB41xA';
+
+minZoom = 2;
+maxZoom = 13; 
+pointMinSize = 5
+pointMaxSize = 20
+
+const map = new mapboxgl.Map({
+    container: 'map', 
+    attributionControl: false,
+    style: 'mapbox://styles/amfemlib/cm3e6u0wx003801ph76od1v60',
+    center: [2.5, 46.35], 
+    zoom: window.innerWidth > 699 ? 5 : 4,
+    minZoom: minZoom,
+    maxZoom: maxZoom
 });
+
+let allEvents = Array.from(document.querySelectorAll(".event")).map((element) => {
+    return {
+        lng: element.getAttribute("data-lng"),
+        lat: element.getAttribute("data-lat"),
+        title: element.getAttribute("data-title"),
+        url: element.getAttribute("data-url"),
+    }
+});
+
 const entries = [
 $(while IFS= read -r line; do
         cat <<- ENTRY
@@ -73,21 +93,22 @@ done < $DB_CITIES | sed '$ d' | sed '1,2d'
 )
 ]
 
-const markerHtmlStyles = \`
+const markerHtmlStyles = `
 	background-color: var(--accent);
 	width: var(--marker-size);
 	height: var(--marker-size);
 	display: block;
 	position: relative;
 	border-radius:100%;
-\`
+`
+
 
 const icon = L.divIcon({
 	className: "pin",
 	iconAnchor: [0, 24],
 	labelAnchor: [-6, 0],
 	popupAnchor: [0, -36],
-	html: \`<span style="\${markerHtmlStyles}" />\`
+	html: `<span style="${markerHtmlStyles}" />`
 })
 
 const popupOptions = {
@@ -106,18 +127,42 @@ const coordsWithEntries = coords.map(coord => ({
     relatedEntries: entriesByCity[coord.city] || []
 }));
 
-coordsWithEntries.forEach((data) => {
-	if(data.city != ""){
-		const marker = L.marker([data.lat, data.lon], {icon:icon}).addTo(map);
-		let popupContent = ''
-		data.relatedEntries.forEach((entry) => {
-		popupContent += "<p>" + entry.title + "</p>"
-})
-		marker.bindPopup(popupContent, popupOptions)
+console.log(coordsWithEntries)
+
+const offsetDistance = .3;
+
+function applyOffset(coord, index) {
+    const angle = index + (index * 45) * (Math.PI / 180);
+    const offsetLng = offsetDistance * Math.cos(angle);
+    const offsetLat = offsetDistance * Math.sin(angle);
+    return [coord[0] + offsetLng, coord[1] + offsetLat];
+}
+
+
+let i = 0
+coordsWithEntries.forEach((data, index) => {
+	if(data.city != "" && data.lon != "" && data.lat != ""){
+        data.relatedEntries.forEach((entry) => {
+
+        const dataOffset = applyOffset([parseFloat(data.lon),parseFloat(data.lat)], index);
+
+        console.log(dataOffset)
+        if (Math.abs(dataOffset[0]) <= 180 && Math.abs(dataOffset[1]) <= 90) {
+        const markerPin = document.createElement('div')
+        const markerChild = document.createElement('section')
+        const markerTitle = document.createElement('p')
+        markerPin.appendChild(markerChild)
+        markerChild.appendChild(markerTitle)
+        markerTitle.textContent=entry.title
+        markerPin.classList.add('pin');
+        new mapboxgl.Marker(markerPin)
+            .setLngLat(data.relatedEntries.length == 1 ? [data.lon, data.lat] : dataOffset)
+            .addTo(map);
+        }
 	}
-});
 
-console.log(coordsWithEntries);
+        )}
+});
 
 </script>
 
diff --git a/src/static/TimesDot-Italic.woff b/src/static/TimesDot-Italic.woff
Binary files differ.
diff --git a/src/static/TimesDot-Italic.woff2 b/src/static/TimesDot-Italic.woff2
Binary files differ.
diff --git a/src/static/TimesDotBol.woff b/src/static/TimesDotBol.woff
Binary files differ.
diff --git a/src/static/TimesDotBol.woff2 b/src/static/TimesDotBol.woff2
Binary files differ.
diff --git a/src/static/TimesDotRom.woff b/src/static/TimesDotRom.woff
Binary files differ.
diff --git a/src/static/TimesDotRom.woff2 b/src/static/TimesDotRom.woff2
Binary files differ.
diff --git a/src/static/cssVarFilledCookies.css b/src/static/cssVarFilledCookies.css
@@ -4,8 +4,7 @@
 #cvfc {
     z-index:10000;
     position:fixed;
-    bottom:10px;
-    left:10px;
+    bottom:10px; left:10px;
     background:whitesmoke;
     border:1px solid transparent;
     font-family:monospace;
@@ -25,4 +24,5 @@ border:none;background:none}
 #cvfc:hover table {display:inherit}
 #cvfc tr:hover td:last-of-type {background:lightgray;border-bottom:1px solid black}
 #cvfc:hover {border-color:black; resize:horizontal;}
-
+#cvfc button {display:none}
+#cvfc:hover button{display:inline;position:absolute; right:10px;top:10px}
diff --git a/src/static/cssVarFilledCookies.js b/src/static/cssVarFilledCookies.js
@@ -3,12 +3,22 @@ function filterEntriesWithCSSVariables(obj) {
         return typeof value === 'string' && value.startsWith('--');
     });
 }
+const resetVars = () => {
+	localStorage.clear();
+	location.reload();
+}
+
 const style = getComputedStyle(document.documentElement)
 const cssVars = filterEntriesWithCSSVariables(style).map((v) => v[1]);
 
 const container = document.createElement('section')
+const reset = document.createElement('button');
+reset.textContent = "reset";
+reset.onclick = resetVars
+
 container.innerHTML = '<p></p>'
 container.setAttribute('id','cvfc')
+container.appendChild(reset)
 document.body.appendChild(container)
 const table = document.createElement('table')
 container.appendChild(table)
@@ -40,4 +50,3 @@ cssVars.reverse().forEach((cssVar) => {
     table.appendChild(tr)
 })
 
-
diff --git a/src/static/script.js b/src/static/script.js
@@ -1,3 +1,6 @@
+const filter = () => {
+	// textarea qui filtre les tr qui match la string :not(.match){display:none}
+}
 const body = document.querySelector('body')
 
 
@@ -68,8 +71,8 @@ let years = 20
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+            var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 	
 	numbers
 	const width = window.innerWidth;
@@ -80,8 +83,8 @@ years = 10
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+            var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 	numbers.classList.add("numbers-1-of-2")
 	}
 	else if (width < 770){
@@ -91,8 +94,8 @@ years = 5
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+            var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 
 	}
 	else if (width > 1200) {
@@ -100,8 +103,8 @@ let years = 20
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
-            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+            var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 	numbers.classList.remove("numbers-1-of-2")
 	numbers.classList.remove("numbers-1-of-4")
 
@@ -197,7 +200,7 @@ switch (path) {
 	sortTimeline()
     break;
 
-  case 'map.html':
+  case '/map.html':
     break;
 
 
diff --git a/src/static/style.css b/src/static/style.css
@@ -1,10 +1,11 @@
 :root{
-   	--fond-A:#EEE;
-   	--fond-B:white;
+   	--fond-A:white;
+   	--fond-B:ivory;
    	--fond-C:ivory;
-   	--noir:black;
-   	--accent:yellow;
+   	--noir:olive;
+   	--accent:royalblue;
    	--corps:1rem;
+   	--corps-L:2rem;
    	--indent:2rem;
    	--interligne:1.2rem;
     --marker-size:2rem;
@@ -16,7 +17,25 @@
     --grad-width:1px
 }
 
+/* Type settings */
+@font-face {
+	font-family: "Dot";
+	src: local("Dot"),
+		url("TimesDotRom.woff2") format("woff2"),
+		url("TimesDotRom.woff") format("woff");
+}
+
+@font-face {
+	font-family: "Dot-ita";
+	src: local("Dot-ita"),
+		url("TimesDot-Italic.woff2") format("woff2"),
+		url("TimesDot-Italic.woff") format("woff");
+}
+
+
+
 *{
+font-family:Dot;
 box-sizing:content-box;
 font-size:var(--corps);
 color:var(--noir);
@@ -27,14 +46,14 @@ thead td{text-align:left}
 #TABLEAU tr {
 	cursor:pointer;
 	display:flex;
-	border-bottom:var(--largeur-bordure-cellule) solid var(--noir);
+	border-bottom:0 solid var(--noir);
 	justify-content:flex-start;
 	background:var(--fond-B)
 }
 #TABLEAU tr:nth-of-type(2n+1):not(thead tr){
     background:var(--fond-A);
 }
-#TABLEAU td { border-left:1px solid black;padding-left:0px}
+#TABLEAU td { border-left:0px solid black;padding-left:0px}
 #TABLEAU tr {display:flex;flex-wrap:wrap;height:var(--interligne);overflow:hidden; column-gap:0px}
 #TABLEAU tr.show {height:auto}
 #TABLEAU tr td{width:calc(var(--largeur) * 10)}
@@ -51,9 +70,11 @@ thead td{text-align:left}
     border-left:none;
     border-top:1px solid black
 }
+tr:not(.show) td.number-of-issues {text-align:right}
 
+#TABLEAU tr:not(.show) td:not(:first-of-type) {padding: 0 5px}
 #TABLEAU tr.show td {}
-tr.show td::before {opacity:.3}
+tr.show td::before {opacity:var(--incertitude)}
 tr.show td.title::before {content:""}
 tr.show td.start-date::before {content:"start date : "}
 tr.show td.end-date::before {content:"end date : "}
@@ -72,10 +93,13 @@ tr.show td.sources::before {content:"sources : "}
 tr.show td.related-works::before {content:"related works : "}
 tr.show td.comments::before {content:"comments : "}
 
-body {margin: 0; overflow-x:hidden;}
+body {margin: 0; overflow-x:hidden;min-height:100vh}
 tr{width:100%;padding:0}
-thead {position:sticky;top:0; z-index:1000}
-thead tr {
+thead {position:sticky;top:0; z-index:1000000000000}
+#TIMELINE thead tr td:not(:first-of-type) {
+background:var(--fond-A) !important;
+}
+#TABLEAU thead tr td{
 background:var(--fond-A) !important;
 }
 
@@ -92,12 +116,15 @@ background:var(--fond-A) !important;
 .travaux-lies	{width:calc(var(--largeur) * 2)}
 */
 .rectangle {
+ padding:0 !important;
 }
 .rectangle div {
+border-left:10px solid var(--accent);
 z-index:1000;
 background-color: var(--accent); height:100%; min-height: var(--interligne); position: relative;
-scale:0.27 1;
-transform-origin:left;
+
+scale:0.27 1.05;
+transform-origin:left center;
 }
 
 .legende {position:fixed;bottom:var(--interligne);right:var(--interligne); z-index:10; display:none;
@@ -108,21 +135,48 @@ padding:var(--corps);
 sup{line-height:var(--interligne)}
 sup::before{content:' '}
 .unsure, sup  {opacity:var(--incertitude)}
-nav {display:flex; width:100%; justify-content:space-around;background:var(--fond-C);padding:var(--corps) 0;margin-bottom:var(--corps);z-index:1000}
+nav {width:100%;background:var(--fond-A);
+position:relative;
+padding:0;
+z-index:1000}
 #map {display:block;height:100vh;
     background: var(--fond-A);
     outline: 0;
 }
 .leaflet-popup-content-wrapper {border-radius:0}
-.pin:hover span {background-color:var(--accent) !important}
+.pin:hover {background-color:var(--noir) !important}
+.pin:hover {z-index:1000000}
+.pin {
+    cursor:pointer;
+	background-color: var(--accent);
+	width: var(--marker-size);
+	height: var(--marker-size);
+	display: block;
+	position: relative;
+	border-radius:100%;
+position:relative
+}
+.pin section {
+left:-100px;
+text-align:center;
+background:var(--fond-A);
+    width:200px;
+    position:absolute;
+    display:none;
+top:10px;
+}
+.pin:hover section {
+    border:1px solid var(--noir);
+    display:inline
+}
+.pin p {margin:0;}
 
 #TIMELINE tr td:first-of-type{
-    z-index:1000;
-background:var(--fond-A);
 
 
 }
 #TIMELINE tr {
+	
     display:grid;
     grid-template-columns:1fr 3fr;
 }
@@ -150,7 +204,7 @@ font-size:var(--corps) !important;
 #graduation{
 position:absolute;
 width:100%;
-border-top: 1px solid var(--fond-B);
+border-top: 1px solid var(--accent);
 height:calc(var(--interligne) / 2);
 top:calc(var(--interligne) / 1);
 }
@@ -158,11 +212,51 @@ top:calc(var(--interligne) / 1);
 pointer-events:none;
     position:fixed;
 bottom:0;
-height:calc(100vh - var(--interligne) * 4);
-border-left:1px solid var(--fond-B);
-border-right:1px solid var(--fond-B);
+height:calc(100vh);
+border-left:1px solid var(--noir);
 z-index:0;
 }
-#TIMELINE tr:hover, #TABLEAU tr:hover{background-color:var(--fond-C) !important}
-p {max-width:960px;margin:0;}
+#TIMELINE tbody tr:hover, #TABLEAU tbody tr:hover{border-bottom:1px solid var(--noir);border-top:1px solid var(--noir)}
+section.large * {max-width:960px;margin:0;font-size:var(--corps-L); line-height:calc(var(--corps-L) * 1.2)}
+section.large {margin:var(--interligne)}
+section.large a {color:var(--accent)}
 p:not(:first-of-type){text-indent:var(--indent)};
+a{color:var(--accent) !important}
+.nav-main, .nav-sub {display:grid; grid-template-columns: 3fr 1fr 1fr 1fr; background:var(--fond-A)}
+.nav-main a:first-of-type {grid-column:1}
+.nav-main a:nth-of-type(2), .nav-sub a:nth-of-type(1) {grid-column:2}
+.nav-main a:nth-of-type(3), .nav-sub a:nth-of-type(2) {grid-column:3}
+.nav-main a:nth-of-type(4), .nav-sub a:nth-of-type(3) {grid-column:4}
+.nav-sub a {opacity:var(--incertitude)}
+
+nav a {color:var(--accent); width:fit-content}
+nav a:hover{opacity:1;}
+
+nav:first-of-type{
+	padding-top:calc(var(--interligne) / 2);
+}
+nav:last-of-type {
+	border-bottom:1px solid var(--accent);
+	padding-bottom:calc(var(--interligne) / 2);
+}
+
+table {margin-bottom:var(--interligne);border-collapse:collapse}
+
+footer {  width: 100%;
+display:none;
+  bottom: 0;
+  clear: both;
+position:fixed;
+background:var(--fond-B);width:100%;height:var(--interligne);}
+footer p {margin:0}
+
+::-moz-selection { /* Code for Firefox */
+  color: var(--fond-A);
+  background: var(--noir);
+}
+
+::selection {
+  color: var(--fond-A);
+  background: var(--noir);
+}
+
diff --git a/src/table.sh b/src/table.sh
@@ -27,6 +27,7 @@ OUT=$(basename "$0" | sed "s/sh$/html/g")
 LIGNE=1
 cat << % > $DIST/$OUT
 $(cat src/templates/head.html)
+$(cat src/templates/nav-main.html)
 $(cat src/templates/nav.html)
 <section class="legende">
 <ul>
diff --git a/src/templates/foot.html b/src/templates/foot.html
@@ -1,2 +1,4 @@
+<footer>
+</footer>
 	</body>
 </html>
diff --git a/src/templates/nav-main.html b/src/templates/nav-main.html
@@ -0,0 +1,6 @@
+<nav class="nav-main">
+<a href="index.html">The Amateur Feminist Library</a>
+<a href="table.html">Index</a>
+<a href="ressources.html">Ressources</a>
+<a href="about.html">About</a>
+</nav>
diff --git a/src/templates/nav.html b/src/templates/nav.html
@@ -1,7 +1,5 @@
-<nav>
-<a href="index.html">←</a>
+<nav class="nav-sub">
 <a href="table.html">table</a>
 <a href="map.html">map</a>
 <a href="timeline.html">timeline</a>
-<!--<a href="">à propos</a>-->
 </nav>
diff --git a/src/timeline.sh b/src/timeline.sh
@@ -19,16 +19,16 @@ epoch_end="tmp/end_unixepoch"
 
 #max=$( sort tmp/end | tail -n1 | grep -o "^.\{4\}" | sed 's/$/ + 1/' | bc )
 #min=$( sort tmp/start | head -n1 | grep -o "^.\{4\}")
+
 max=1991
 min=1971
-echo "max = $max : min = $min" 
+
+#echo "max = $max : min = $min" 
 # max = 2012 : min = 1971
-#min_epoch=$( cut -f1 tmp/start_unixepoch | sort -g | head -n1 )
-#max_epoch=$( cut -f1 tmp/end_unixepoch | sort -g | tail -n1)
+
 min_epoch=$(date +%s --date="${min}-01-01" )
 max_epoch=$(date +%s --date="${max}-01-01" ) 
-echo "$min_epoch ; $max_epoch "
-# 41900400 ; 1304200800 
+#echo "$min_epoch ; $max_epoch "
 
 
 entree(){
@@ -55,6 +55,7 @@ annees(){
 LIGNE=1
 cat << % > $DIST/$OUT
 $(cat src/templates/head.html)
+$(cat src/templates/nav-main.html)
 $(cat src/templates/nav.html)
     <table id="TIMELINE">
 $(while IFS= read -r line; do