epickiwi/infokiosque-archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout de la section "Plus d'infos" et du résumé

Browse Source
This commit is contained in:
EpicKiwi 2025-01-23 11:47:05 +01:00
parent 7d9922b994
commit a7d22faf18
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
5 changed files with 161 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/archived-brochure.css Normal file
View File

@ -0,0 +1,18 @@
body {
width: 100%;
max-width: 800px;
padding: 15px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-top: 75px;
}
h2 {
margin-top: 75px;
}
h1 {
margin-bottom: 75px;
}

3
src/brochure.template.html
View File

@ -3,13 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/archived-brochure.css">
<title>— Archive Infokiosque</title>
</head>
<body>
<h1 property="name"></h1>
<p property="author"></p>
<p>Archivée le <time datetime="" content="" property="uploadDate"></time></p>
<h2>Télécharger</h2>
<ul>
<li property="encoding" typeof="MediaObject">
<a property="contentUrl" href="original.pdf">

78
src/data.js
View File

@ -3,13 +3,61 @@ const PARSER = new DOMParser()
const SERIALIZER = new XMLSerializer()
const DATE_FORMATTER = new Intl.DateTimeFormat("fr", {dateStyle: "short"})
export async function uploadDocument(documentFile, documentDetails = {}){
const FEATURES = [
function titleFeature(doc, data){
doc.title = data.get("title") + " " + doc.title
},
function nameFeature(doc, data) {
doc.querySelector('[property="name"]').textContent = data.get("title")
},
function hrefFeature(doc, data) {
doc.querySelector('a[href="original.pdf"]').href = "./"+data.get("original-filename")
},
function uploadDateFeature(doc, data) {
let el = doc.querySelector('[property="uploadDate"]')
el.textContent = DATE_FORMATTER.format(new Date(data.get("upload-date")))
el.setAttribute("datetime", data.get("upload-date"));
el.setAttribute("content", data.get("upload-date"));
},
function authorFeature(doc, data){
if(!data.has("author"))
return
let el = doc.createElement("p")
el.append(doc.createTextNode("Par "))
let authorEl = doc.createElement("span")
authorEl.textContent = data.get("author")
authorEl.setAttribute("property", "author")
el.append(authorEl)
doc.querySelector("h1").insertAdjacentElement("afterend", el)
},
function abstractFeature(doc, data){
if(!data.has("abstract"))
return
let el = doc.createElement("p")
el.textContent = data.get("abstract")
el.setAttribute("property", "abstract")
doc.querySelector("h2").insertAdjacentElement("beforebegin", el)
}
]
export async function uploadDocument(documentFile, documentDetails = new FormData()){
let uniqueName = await getUniqueName(documentDetails)
let baseURI = new URL(`./${uniqueName}/`, DATA_URL)
let originalFileName = `${slugify(documentDetails.title)}-original.pdf`
let originalFileName = `${slugify(documentDetails.get("title"))}-original.pdf`
documentDetails.set("original-filename", originalFileName)
let uploadProgress = fetch(new URL(`./${originalFileName}`, baseURI), {
method: "PUT",
@ -21,22 +69,8 @@ export async function uploadDocument(documentFile, documentDetails = {}){
let page = PARSER.parseFromString(await (await fetch("/brochure.template.html")).text(), "text/html")
page.title = documentDetails.title + " " + page.title
page.querySelector('[property="name"]').textContent = documentDetails.title
page.querySelector('a[href="original.pdf"]').href = "./"+originalFileName
{
let el = page.querySelector('[property="uploadDate"]')
el.textContent = DATE_FORMATTER.format(new Date(documentDetails.uploadDate))
el.setAttribute("datetime", documentDetails.uploadDate);
el.setAttribute("content", documentDetails.uploadDate);
}
if(documentDetails.author){
page.querySelector('[property="author"]').textContent = documentDetails.author
} else {
page.querySelector('[property="author"]').remove()
for(let feature of FEATURES){
feature(page, documentDetails)
}
let responses = await Promise.all([
@ -86,12 +120,12 @@ function getRandomName(documentDetails){
crypto.getRandomValues(source)
let parts = [toHex(source)]
if(documentDetails.author){
parts.push(slugify(documentDetails.author))
if(documentDetails.get("author")){
parts.push(slugify(documentDetails.get("author")))
}
if(documentDetails.title){
parts.push(slugify(documentDetails.title))
if(documentDetails.get("title")){
parts.push(slugify(documentDetails.get("title")))
}
return parts.join("-")

71
src/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Archive Infokiosque</title>
<script type="module" src="/index.js"></script>
<style>
body {
width: 100%;
@ -33,6 +34,52 @@
width: 100%;
box-sizing: border-box;
}
fieldset {
border: none;
padding: 0;
margin-top: 1em;
margin-bottom: 1em;
}
fieldset[disabled] {
display: none;
}
nav {
font-size: 0.8em;
color: rgba(0, 0, 0, 0.8)
}
nav button {
border: none;
background: none;
display: inline;
color: inherit;
font-size: inherit;
cursor: pointer;
}
nav button:hover {
text-decoration: underline;
}
nav button:disabled {
display: none;
}
#submit-button {
margin-top: 2em;
width: fit-content;
margin-left: auto;
margin-right: auto;
display: block;
}
textarea {
width: 100%;
resize: vertical;
}
</style>
</head>
<body>
@ -47,10 +94,15 @@
<input type="text" name="title" id="brochure-title" required />
</p>
<p class="form-control">
<fieldset class="form-control" disabled id="author-field">
<label for="brochure-author">Auteur / Autrice</label>
<input type="text" name="author" id="brochure-author" />
</p>
</fieldset>
<fieldset class="form-control" disabled id="abstract-field">
<label for="brochure-abstract">Résumé</label>
<textarea name="abstract" id="brochure-abstract" rows="10"></textarea>
</fieldset>
<p class="form-control">
<label for="brochure-upload-date">Date d'archivage</label>
@ -62,12 +114,21 @@
<input type="file" id="brochure-file" accept="application/pdf" name="file" required />
</p>
<button id="submit-button">Archivez moi ca !</button>
<nav>
Ajouter plus d'infos :
<button id="set-author-button" type="button">Auteur / Autrice</button>
<button id="set-abstract-button" type="button">Résumé</button>
<script type="module">
document.getElementById("set-author-button").addEventListener("click", enableField('#author-field'))
document.getElementById("set-abstract-button").addEventListener("click", enableField('#abstract-field'))
</script>
</nav>
<button id="submit-button">Archivez moi ça !</button>
</form>
<p id="error-container" hidden><output id="error"></output></p>
<script type="module" src="/index.js"></script>
</body>
</html>

34
src/index.js
View File

@ -21,19 +21,7 @@ form.addEventListener("submit", async e => {
throw new Error("Aucun fichier selectionne")
}
let details = {
title: data.get("title")
}
if(data.get("author")){
details.author = data.get("author")
}
if(data.get("upload-date")){
details.uploadDate = data.get("upload-date")
}
document.location = await db.uploadDocument(data.get("file"), details)
document.location = await db.uploadDocument(data.get("file"), data)
} catch(e){
errorEl.textContent = `Erreur : ${e.message}`
@ -44,9 +32,25 @@ form.addEventListener("submit", async e => {
submitButton.disabled = false
})
// INIT
// API
console.log()
window.enableField = (selector) => function enableFieldHandler(e){
let el = document.querySelector(selector)
if(!el){
throw new Error(`Element ${selector} not found`)
}
if(e.target.tagName == "BUTTON"){
e.target.disabled = true
}
el.disabled = false
el.querySelector("input,textarea,select")
?.focus()
}
// INIT
let now = new Date();
form.elements["upload-date"].value = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, "0")}-${(now.getDate()).toString().padStart(2, "0")}`