From 3e5ad12f70c5188564003be730eed6648464b3bf Mon Sep 17 00:00:00 2001 From: Cesare Date: Tue, 1 Jun 2021 11:22:12 +0200 Subject: [PATCH] files added --- css/style.css | 69 +++++++ index.html | 516 ++++++++++++++++++++++++++++++++++++++++++++++++ js/obsmodule.js | 2 + js/utils.js | 117 +++++++++++ script.js | 19 ++ style.css | 62 ++++++ 6 files changed, 785 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/obsmodule.js create mode 100644 js/utils.js create mode 100644 script.js create mode 100644 style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..06892a6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,69 @@ +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap'); + +body { + text-align: center; + font-family: 'Jost', sans-serif; + background-color: #f0f5ff; +} + +h1 { + font-size: 48px; + color: #232c3d; +} + +.wrapper { + width: 800px; + margin: auto; + background-color: white; + border-radius: 10px; + box-shadow: 0px 5px 15px rgba(0, 0, 0, .1); +} + +.buttonWrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +button { + letter-spacing: 3px; + border: none; + padding: 10px; + background-color: #bccbe9; + color: #232c3d; + font-size: 18px; + cursor: pointer; + transition: 0.5s; +} + +button:hover { + background-color: #d5e3ff; +} + +button.active { + background-color: white; +} + +.active { + background-color: white; +} + +p { + text-align: left; + padding: 10px; +} + +.content { + display: none; + padding: 10px 20px; +} + +.content.active { + display: block; +} +tspan.formaf { font-weight:700;} +table.queryform { + min-width: 80%; +} +td { vertical-align: top; } +th:not(:first-child):not(:last-child), td:not(:first-child):not(:last-child) { padding: 0 10px; } +th { vertical-align: bottom; } diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae36f5d --- /dev/null +++ b/index.html @@ -0,0 +1,516 @@ + + + + + LiDaDashboard + + + + + + + + +

Linking Dante Search

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +Categoria + + + + +
+ + + + + + + + +Categoria + + + + +
+ + + + + + + + +Categoria + + + + +
+ + + + + + + + +Categoria + + + + +
+ + + + + + + + +Categoria + + + + +
+
+
+ + + + + + +
+
+ + + +
+ + + + +
+
+ + + + +
+
+

+ La query è: + + + +

+

+ + +

+ +

+ + + + +

+

+ La query SPARQL è: +
+ + + + +

+
+
+ + + + + + + diff --git a/js/obsmodule.js b/js/obsmodule.js new file mode 100644 index 0000000..fe0d4e0 --- /dev/null +++ b/js/obsmodule.js @@ -0,0 +1,2 @@ +import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"; +import define from "https://api.observablehq.com/@cesare/dsearchcompare.js?v=3"; diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000..a8ffbdf --- /dev/null +++ b/js/utils.js @@ -0,0 +1,117 @@ +//query +sparqlquery=`PREFIX rdfs: +PREFIX ecrm: +PREFIX hdn: +PREFIX lemon: +PREFIX orl: +PREFIX xsd: + +SELECT ?pos ?sc ?ver ?canto ?cantica ?form +WHERE { + ?occ ecrm:P148_is_component_of ?ver . + ?occ hdn:isInPosition ?pos . + ?canto ecrm:P148_has_component ?ver . + ?ver ecrm:P190_has_symbolic_content ?sc . + ?cantica ecrm:P148_has_component ?canto . + ?occ hdn:occurrenceOf ?form . + ?form a orl:FormaVerboVolgare . + ?form orl:TipoTransitivitàVerboVolgare orl:VerboVolgareTransitivo . + ?form orl:TipoDiatesiVerboVolgare orl:VerboVolgareAttivo . + ?form orl:TipoConiugazioneVerboVolgare orl:VerboVolgarePrimaConiugazione . + ?form orl:TipoTempoVerboVolgare orl:FuturoSempliceIndicativoVerboVolgare . + ?form orl:TipoPersonaVerboVolgare orl:PrimaPersonaSingolareVerboVolgare . + ?form lemon:writtenRep ?Rappresentazione . + FILTER regex(?Rappresentazione,"^farò$","i") . + }` + + function writesparqlquery(query) { + return (query); +} +// write the query in natural language + +function writesearchValue(form) { + var strq='il lemma'; + var strcategoria='in tutte le categorie' + + if (form.oggetto.value=='forma') + strq='la forma'; + if (form.categoria.value!='all') + strcategoria='nella categoria '+ form.categoria.value; + + return `Cerco: ${strq} ${form.query.value}, ${form.tipo.value}, ${strcategoria}` +} + +// the basic initial query is parsed + +function gimmespq(){ + var SparqlParser = sparqljs.Parser; + var parser = new SparqlParser(); + //const sparqlParser = sp_js.Parser; + return parser.parse( + `PREFIX rdfs: + PREFIX ecrm: + PREFIX hdn: + PREFIX lemon: + PREFIX orl: + PREFIX xsd: + PREFIX rdf: + + SELECT ?pos ?sc ?ver ?canto ?cantica ?form ?categ + WHERE { + ?occ ecrm:P148_is_component_of ?ver . + ?occ hdn:isInPosition ?pos . + ?canto ecrm:P148_has_component ?ver . + ?ver ecrm:P190_has_symbolic_content ?sc . + ?cantica ecrm:P148_has_component ?canto . + ?occ hdn:occurrenceOf ?form . + ?form a ?categ . + ?form lemon:writtenRep ?Rappresentazione . + FILTER regex(?Rappresentazione,"^farò$","i") . + }`); + } + +// the query is transformed according the form values + +function gimmespqfromjson(form){ + const sparqlgen = sparqljs.Generator; + const generator = new sparqlgen({orl: "http://www.w3.org/2000/01/rdf-schema#" }) + const parsedquery=gimmespq() + if (form.categoria.value!='all') + parsedquery.where[0].triples.push(JSON.parse(data21)[form.categoria.value]); + if (form.query.value!="") + switch(form.tipo.value) { + case 'parola': + parsedquery.where[1].expression.args[1].value="^"+form.query.value+"$"; + break; + case 'sottostringa': + parsedquery.where[1].expression.args[1].value=form.query.value; + break; + case 'prefisso': + parsedquery.where[1].expression.args[1].value=form.query.value; + break; + case 'suffisso': + parsedquery.where[1].expression.args[1].value=form.query.value+"$"; + break; + default: + parsedquery.where[1].expression.args[1].value="^"+form.query.value+"$"; + }; + return generator.stringify(parsedquery); + +} + + + +data21 = `{"verbovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaVerboVolgare"}}, + "sostantivovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaSostantivoVolgare"}}, + "aggettivovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaAggettivoVolgare"}}, + "avverbiovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaAvverbioVolgare"}}, + "pronomevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaPronomeVolgare"}}, + "congiunzionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaCongiunzioneVolgare"}}, + "articolovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaArticoloVolgare"}}, + "preposizionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaPreposizioneVolgare"}}, + "interiezionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaInteriezioneVolgare"}}, + "onomasticavolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaOnomasticaVolgare"}}, + "citazionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaCitazioneVolgare"}}, + "locuzionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaLocuzioneVolgare"}} + } + ` \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..94c7046 --- /dev/null +++ b/script.js @@ -0,0 +1,19 @@ +const tabs = document.querySelector(".wrapper"); +const tabButton = document.querySelectorAll(".tab-button"); +const contents = document.querySelectorAll(".content"); + +tabs.onclick = e => { + const id = e.target.dataset.id; + if (id) { + tabButton.forEach(btn => { + btn.classList.remove("active"); + }); + e.target.classList.add("active"); + + contents.forEach(content => { + content.classList.remove("active"); + }); + const element = document.getElementById(id); + element.classList.add("active"); + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bf2c5dc --- /dev/null +++ b/style.css @@ -0,0 +1,62 @@ +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap'); + +body { + text-align: center; + font-family: 'Jost', sans-serif; + background-color: #f0f5ff; +} + +h1 { + font-size: 48px; + color: #232c3d; +} + +.wrapper { + width: 800px; + margin: auto; + background-color: white; + border-radius: 10px; + box-shadow: 0px 5px 15px rgba(0, 0, 0, .1); +} + +.buttonWrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +button { + letter-spacing: 3px; + border: none; + padding: 10px; + background-color: #bccbe9; + color: #232c3d; + font-size: 18px; + cursor: pointer; + transition: 0.5s; +} + +button:hover { + background-color: #d5e3ff; +} + +button.active { + background-color: white; +} + +.active { + background-color: white; +} + +p { + text-align: left; + padding: 10px; +} + +.content { + display: none; + padding: 10px 20px; +} + +.content.active { + display: block; +} \ No newline at end of file