aggiunta vista 'frasi'
This commit is contained in:
parent
ee243a427e
commit
195aee9f6d
|
@ -8,13 +8,12 @@ var lsid;
|
|||
var lsentid;
|
||||
//var getDimDiv;
|
||||
const formaClass='frm'
|
||||
|
||||
var selectedVista;
|
||||
|
||||
$(document).ready(function() {
|
||||
lsid='';
|
||||
removeGraph=false;
|
||||
|
||||
|
||||
const cantobadgeclass = 'badge badge-outline-info badge-pill'
|
||||
|
||||
const sparqlGenerator = sparqljs.Generator;
|
||||
|
@ -31,6 +30,8 @@ $(document).ready(function() {
|
|||
var displayId = 'displaycanto'
|
||||
var cantiche=["Inferno", "Purgatorio","Paradiso"]
|
||||
var loadedCanti=new Set();
|
||||
const openSTag="{"
|
||||
const closeSTag="}"
|
||||
|
||||
var cantoDisplayed = "#InfernoCanto_1";
|
||||
|
||||
|
@ -63,46 +64,70 @@ $(document).ready(function() {
|
|||
console.log(`Load cantiche time: ${end - start} ms`);
|
||||
|
||||
$("#valoreVista").on('change', function() {
|
||||
var selectedVista = $(this).val();
|
||||
selectedVista = $(this).val();
|
||||
switch (selectedVista){
|
||||
case "forme":
|
||||
$("#vistaFrasi").css("display", "none");
|
||||
$("#vistaDialoghi").css("display", "none");
|
||||
$("#vistaMetafore").css("display", "none");
|
||||
resetFrasi()
|
||||
$(cantoDisplayed).attr('style', 'display: d-flex;')
|
||||
break;
|
||||
case "frasi":
|
||||
loadFrasi();
|
||||
$("#vistaDialoghi").css("display", "none");
|
||||
$("#vistaMetafore").css("display", "none");
|
||||
$(cantoDisplayed).css("display", "none");
|
||||
$("#vistaFrasi").attr('style', 'display: d-flex;');
|
||||
//$(cantoDisplayed).css("display", "none");
|
||||
//$("#vistaFrasi").attr('style', 'display: d-flex;');
|
||||
break;
|
||||
case "metafore":
|
||||
loadMetafore();
|
||||
$("#vistaDialoghi").css("display", "none");
|
||||
$("#vistaFrasi").css("display", "none");
|
||||
$(cantoDisplayed).css("display", "none");
|
||||
$("#vistaMetafore").attr('style', 'display: d-flex;');
|
||||
//loadMetafore();
|
||||
//$("#vistaDialoghi").css("display", "none");
|
||||
//$("#vistaFrasi").css("display", "none");
|
||||
//resetFrasi()
|
||||
//$(cantoDisplayed).css("display", "none");
|
||||
//$("#vistaMetafore").attr('style', 'display: d-flex;');
|
||||
break;
|
||||
case "dialoghi":
|
||||
loadDialoghi();
|
||||
$("#vistaMetafore").css("display", "none");
|
||||
$("#vistaFrasi").css("display", "none");
|
||||
$(cantoDisplayed).css("display", "none");
|
||||
$("#vistaDialoghi").attr('style', 'display: d-flex;');
|
||||
//loadDialoghi();
|
||||
//$("#vistaMetafore").css("display", "none");
|
||||
//$("#vistaFrasi").css("display", "none");
|
||||
//resetFrasi()
|
||||
//$(cantoDisplayed).css("display", "none");
|
||||
//$("#vistaDialoghi").attr('style', 'display: d-flex;');
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function loadFrasi() {
|
||||
var spanFrase = $('<span />')
|
||||
//var spanFrase = $('<span />')
|
||||
|
||||
for (pos=0;pos<20;pos++){
|
||||
/*for (pos=0;pos<20;pos++){
|
||||
spanFrase.attr('id', pos)
|
||||
spanFrase.append("La mia più bella frase numero "+" "+pos+"<br>");
|
||||
$("#vistaFrasi").append(spanFrase);
|
||||
}
|
||||
}*/
|
||||
|
||||
$(cantoDisplayed).find(' .sentencetag').each(function() {
|
||||
$(this).attr('style', 'display: d-flex;');
|
||||
})
|
||||
$(cantoDisplayed).find(' .'+formaClass).each(function() {
|
||||
stp=$(this).attr('class').split(" ")[1]
|
||||
|
||||
$(this).css('color', colorssp(mapsynttypestopalette[stp]));
|
||||
})
|
||||
drawMinimap(cantoDisplayed.replace('#',''))
|
||||
}
|
||||
function resetFrasi(){
|
||||
|
||||
$(cantoDisplayed).find(' .sentencetag').each(function() {
|
||||
$(this).css('display', 'none');
|
||||
})
|
||||
$(cantoDisplayed).find(' .'+formaClass).each(function() {
|
||||
//console.log(colorssp(mapsynttypestopalette[stp]))
|
||||
$(this).css('color', '');
|
||||
})
|
||||
drawMinimap(cantoDisplayed.replace('#',''))
|
||||
}
|
||||
function loadDialoghi() {
|
||||
var spanFrase = $('<span />')
|
||||
|
@ -128,7 +153,7 @@ $(" ."+formaClass).each(function(idx, element) {
|
|||
// We cycle through the elements using each() so that we can choose the element specifically that we wish to clean up afterward
|
||||
var ele = $(element);
|
||||
ele.tooltip({
|
||||
content: (function() {return formatTTContent(ele.attr('title'));}),
|
||||
content: (function() {return formatTTContent(ele.attr('title'), ele.attr('class').split(' ')[1]);}),
|
||||
classes:{"ui-tooltip":'Nik_dropdown-content'},
|
||||
close: function (event, ui) {$(".ui-helper-hidden-accessible").remove();},
|
||||
create: function(ev, ui) {$(this).data("ui-tooltip").liveRegion.remove();},
|
||||
|
@ -206,6 +231,7 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
|
||||
|
||||
jQuery(document).delegate('.navig-canto', 'click', function(e) {
|
||||
resetFrasi()
|
||||
$('.canto').each(function() {
|
||||
$(this).css("display", "none");
|
||||
});
|
||||
|
@ -231,7 +257,7 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
$(" ."+formaClass).each(function(idx, element) {
|
||||
var ele = $(element);
|
||||
ele.tooltip({
|
||||
content: (function() {return formatTTContent(ele.attr('title'));}),
|
||||
content: (function() {return formatTTContent(ele.attr('title'), ele.attr('class').split(' ')[1]);}),
|
||||
classes:{"ui-tooltip":'Nik_dropdown-content'},
|
||||
close: function (event, ui) {$(".ui-helper-hidden-accessible").remove();},
|
||||
create: function(ev, ui) {$(this).data("ui-tooltip").liveRegion.remove();},
|
||||
|
@ -278,7 +304,7 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
|
||||
//Utility functions
|
||||
|
||||
function formatTTContent(categ){
|
||||
function formatTTContent(categ, syntType){
|
||||
var details=[];
|
||||
|
||||
details = getHoverContent(categ);
|
||||
|
@ -287,11 +313,14 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
var catgramm;
|
||||
var subcatgramm = '';
|
||||
var popoverText = '';
|
||||
if (selectedVista=='frasi'){
|
||||
return '<div style="color: #00008B; padding: 5px 5px 0px 5px; "><b>'+maptypes[syntType]+'</b></div>';
|
||||
}
|
||||
|
||||
for (detail of details){
|
||||
myitems= detail.split(',');
|
||||
|
||||
catgramm='<div style="color: #00008B; padding: 5px 5px 0px 5px; "';
|
||||
catgramm='<div style="color: #00008B; padding: 5px 5px 0px 5px; ">';
|
||||
subcatgramm='<p> <b>'+myitems[0]+'</b><i>'+myitems.slice(1,-1)+'</i></p></div>';
|
||||
popoverText = popoverText + catgramm + subcatgramm;
|
||||
}
|
||||
|
@ -300,6 +329,7 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
}
|
||||
|
||||
function getHoverContent(categ){
|
||||
|
||||
//console.log('Categoria '+categ)
|
||||
var mycat=[];
|
||||
if(categ.includes('^')){
|
||||
|
@ -347,31 +377,7 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
}
|
||||
return categoriegrammaticali[categ[0]]
|
||||
}
|
||||
/*
|
||||
function drawMinimap(name){
|
||||
|
||||
showMinimap(name)
|
||||
//$('iframe').contents().find('body').css('backgroundColor', '#eaeae6;');
|
||||
currentMinimap = name;
|
||||
|
||||
//mmviewer diventa draggable
|
||||
var minimapTopPos = $('#minimapviewer').offset().top
|
||||
console.log("top viewer init " + minimapTopPos)
|
||||
|
||||
$('#minimapviewer').draggable({
|
||||
axis: "y",
|
||||
containment: $('#displayminimap'),
|
||||
scroll: false,
|
||||
start: function(event, ui) { minimapScrolling = true; },
|
||||
stop: function(event, ui) { minimapScrolling = false; },
|
||||
drag: function(event, ui) {
|
||||
|
||||
minimapScrolling = true;
|
||||
trackScrollViewer(ui.offset.top - minimapTopPos);
|
||||
}
|
||||
});
|
||||
}
|
||||
*/
|
||||
function cleanSearchResult() {
|
||||
|
||||
for (msid of listaPeriodiRisultato){
|
||||
|
@ -458,127 +464,33 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
$(" ." + sentence).removeClass('text-info font-italic')
|
||||
}
|
||||
|
||||
//minimap management
|
||||
|
||||
/*
|
||||
function showMinimap(element) {
|
||||
mmplace = document.getElementById('displayminimap')
|
||||
minimap.className = 'minimap__container'
|
||||
minimapSize.className = 'minimap__size'
|
||||
viewer.className = 'minimap__viewer'
|
||||
viewer.id = 'minimapviewer'
|
||||
minimapContent.className = 'minimap__content'
|
||||
minimap.append(minimapSize, viewer, minimapContent);
|
||||
|
||||
mmplace.appendChild(minimap)
|
||||
|
||||
let html = document.getElementById(element).outerHTML//innerHTML
|
||||
if (html == null | html == '')
|
||||
return;
|
||||
|
||||
let iFrameDoc = minimapContent.contentWindow.document;
|
||||
|
||||
var cssLinkb = document.createElement("link");
|
||||
cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css";
|
||||
cssLinkb.rel = "stylesheet";
|
||||
cssLinkb.type = "text/css";
|
||||
|
||||
var cssLinkscroll = document.createElement("link");
|
||||
cssLinkscroll.href = "./css/browsingldc.css";
|
||||
cssLinkscroll.rel = "stylesheet";
|
||||
cssLinkscroll.type = "text/css";
|
||||
|
||||
iFrameDoc.open();
|
||||
iFrameDoc.write(html);
|
||||
iFrameDoc.close();
|
||||
|
||||
iFrameDoc.head.appendChild(cssLinkb);
|
||||
iFrameDoc.head.appendChild(cssLinkscroll);
|
||||
$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
|
||||
mappedElement = element
|
||||
|
||||
getDimensionsDiv()
|
||||
|
||||
//window.addEventListener('scroll', trackScroll)
|
||||
window.addEventListener('resize', getDimensionsDiv)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function getInnerHeight(elm) {
|
||||
var computed = getComputedStyle(elm),
|
||||
padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
|
||||
|
||||
return elm.clientHeight - padding
|
||||
}
|
||||
|
||||
function getDimensionsDiv() {
|
||||
var cantoplace = document.getElementById(displayId)
|
||||
var elementplace = document.getElementById(mappedElement)
|
||||
|
||||
var bodyWidth = elementplace.clientWidth;
|
||||
var bodyRatio = elementplace.clientHeight / bodyWidth;
|
||||
|
||||
let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
|
||||
|
||||
//minimap.style.width='15%';
|
||||
minimap.style.width = '100%';
|
||||
|
||||
realScale = minimap.clientWidth / (bodyWidth / 2);
|
||||
|
||||
minimapSize.style.paddingTop = `${bodyRatio * 100}%`
|
||||
viewer.style.paddingTop = `${winRatio * 100}%`;
|
||||
minimapContent.style.transform = `scale(${realScale})`;
|
||||
minimapContent.style.width = `${(100 / realScale)}%`;
|
||||
minimapContent.style.height = `${(100 / realScale)}%`;
|
||||
//minimapContent.style.height=`100%`;
|
||||
minimapContent.style.float = 'right';
|
||||
}
|
||||
|
||||
getDimDiv = function(){
|
||||
getDimensionsDiv();
|
||||
}*/
|
||||
/*
|
||||
function trackScroll() {
|
||||
console.log('sc '+window.scrollY)
|
||||
viewer.style.transform = `translateY(${window.scrollY * realScale}px)`
|
||||
}*/
|
||||
/*
|
||||
function trackScrollCanto() {
|
||||
console.log('cantoscrollT*realscale ' + document.getElementById(displayId).scrollTop * realScale + ' top: ' + document.getElementById(displayId).scrollTop)
|
||||
viewer.style.transform = `translateY(${document.getElementById(displayId).scrollTop * realScale}px)`
|
||||
}
|
||||
function trackScrollViewer(toppos) {
|
||||
console.log('scrollMMView top*1/realScale: ' + toppos * (1 / realScale) + ' top pos: ' + toppos)
|
||||
did = document.getElementById(displayId)
|
||||
|
||||
did.scrollTop = (toppos * (1 / realScale))
|
||||
}
|
||||
|
||||
function hideMinimap() {
|
||||
$('.canto').each(function() {
|
||||
$(this).attr("style", 'display:none');
|
||||
});
|
||||
$(".minimap__container").remove();
|
||||
currentMinimap = ''
|
||||
}
|
||||
*/
|
||||
//Cantica management functions
|
||||
|
||||
function showCanto(formecantica, idcantica, canto) {
|
||||
var setVersiCanto = new Set()
|
||||
|
||||
var cantica=cantiche[parseInt(idcantica)-1];
|
||||
var elverso, formaItem
|
||||
var elverso, formaItem, currSentenceId;
|
||||
formecantica.map(function(item) {
|
||||
formaItem = item.split("_");
|
||||
var sentenceid=idcantica+"_"+formaItem[1]+"_s_"+formaItem[5]
|
||||
if (formaItem[1]==canto){
|
||||
if (! setVersiCanto.has(cantica + "_" + formaItem[3] + "_" + 'Canto_' + formaItem[1])){
|
||||
if(currSentenceId!=null && currSentenceId != sentenceid){
|
||||
createSpanPeriodiTag(closeSTag, 'c', formaItem[2]-1, currSentenceId, elverso)
|
||||
currSentenceId=null
|
||||
}
|
||||
elverso=createDivVersoNew(cantica, formaItem[3], 'Canto_' + formaItem[1])
|
||||
setVersiCanto.add(cantica+ "_" + formaItem[3] + "_" + 'Canto_' + formaItem[1])
|
||||
}
|
||||
if(currSentenceId==null || currSentenceId != sentenceid){
|
||||
if (currSentenceId!=null){
|
||||
createSpanPeriodiTag(closeSTag, 'c', formaItem[2]-1, currSentenceId, elverso)
|
||||
}
|
||||
currSentenceId=sentenceid;
|
||||
createSpanPeriodiTag(openSTag, 'o', formaItem[2], sentenceid, elverso)
|
||||
}
|
||||
createSpanFormeNew(formaItem[0], formaItem[4], formaItem[2], sentenceid,formaItem[6],elverso)
|
||||
|
||||
}
|
||||
|
@ -604,6 +516,21 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
|
||||
}
|
||||
|
||||
function createSpanPeriodiTag(separator, catgramm, pos, sentenceid, elementoverso) {
|
||||
var spanoccorrenza = $('<span />')
|
||||
spanoccorrenza.attr('id', 'sep_'+pos)
|
||||
spanoccorrenza.attr('title', catgramm)
|
||||
spanoccorrenza.attr('class', sentenceid+' sentencetag')
|
||||
spanoccorrenza.append(separator+" ")
|
||||
if (separator==closeSTag){
|
||||
varsupel=$('<sup />')
|
||||
varsupel.append(sentenceid.split('_')[3]+' ')
|
||||
varsupel.appendTo(spanoccorrenza)
|
||||
}
|
||||
spanoccorrenza.css("display", "none")
|
||||
spanoccorrenza.appendTo(elementoverso)
|
||||
|
||||
}
|
||||
|
||||
function createSpanFormeNew(forma, catgramm, pos, sentenceid, clausefunct, elementoverso) {
|
||||
var spanoccorrenza = $('<span />')
|
||||
|
@ -782,7 +709,7 @@ $(" ."+formaClass).hover(function(idx, element) {
|
|||
//$(mysid).addClass("font-weight-bold mark ")
|
||||
listaPeriodiRisultato.push(mysid)
|
||||
$(mysid).each(function(){
|
||||
console.log('add id '+$(this).attr('id'));
|
||||
//console.log('add id '+$(this).attr('id'));
|
||||
listarisultati.push($(this).attr('id'))
|
||||
});
|
||||
if (!resSent.has(fraseItems[0])){
|
||||
|
|
|
@ -12,10 +12,11 @@ const synttypes=["princ", "subord I","subord II","subord III","coord", "coord I"
|
|||
|
||||
//var clausecolors=d3.scaleOrdinal(d3.schemeSet1).domain(synttypes)
|
||||
|
||||
const maptypes={"Ma": "princ", "SubI": "subord I", "SubII": "subord II", "SubIII": "subord III", "Co": "coord",
|
||||
/*const maptypes={"Ma": "princ", "SubI": "subord I", "SubII": "subord II", "SubIII": "subord III", "Co": "coord",
|
||||
"CoI": "coord I", "CoII": "coord II", "SubIV": "subord IV", "SubV": "subord V", "ParentethicalClause": "parent",
|
||||
"CoIII": "coord III", "ParentheticalCo":"pcoord", "PseudoCo": "oord 0", "SubVI": "subord VI" , "CoIV": "coord IV",
|
||||
"CoV": "coord V", "ParentheticalCoI": "pcoord I", "SubVII": "subord VII"}
|
||||
*/
|
||||
//const structpalette=d3.quantize(d3.interpolateHcl("#4d4193", "#60c96e"), 18)
|
||||
const maptypestopalette={"Ma": 0, "SubI": 1, "SubII": 3, "SubIII": 4, "Co": 5,
|
||||
"CoI": 9, "CoII": 10, "SubIV": 5, "SubV": 6, "ParentethicalClause": 17,
|
||||
|
@ -54,7 +55,8 @@ document.addEventListener("dblclick", function(e){
|
|||
var sentence = document.getElementsByClassName(tmpsent);
|
||||
for (let i = 0; i < sentence.length; i++) {
|
||||
sentence[i].classList.remove('font-italic');
|
||||
sentence[i].style.removeProperty('color');
|
||||
if (selectedVista!='frasi')
|
||||
sentence[i].style.removeProperty('color');
|
||||
|
||||
sentence[i].classList.remove('font-weight-normal');
|
||||
}
|
||||
|
@ -83,9 +85,10 @@ document.addEventListener("dblclick", function(e){
|
|||
//console.log(collection[i].className)
|
||||
var synttp=collection[i].className.split(" ")[1]
|
||||
|
||||
console.log(maptypes[synttp]+' '+maptypestopalette[synttp]+', '+colorssp(maptypestopalette[synttp]))
|
||||
//collection[i].style.color = getColor(maptypes[synttp]);
|
||||
//console.log(maptypes[synttp]+' '+maptypestopalette[synttp]+', '+colorssp(maptypestopalette[synttp]))
|
||||
//collection[i].style.background = colorssp(maptypestopalette[synttp]);
|
||||
collection[i].style.color = colorssp(maptypestopalette[synttp]);
|
||||
|
||||
//collection[i].style.removeProperty('color');
|
||||
}
|
||||
}
|
||||
|
|
17
js/utils.js
17
js/utils.js
|
@ -234,7 +234,24 @@ WHERE {
|
|||
|
||||
`
|
||||
|
||||
//colori
|
||||
|
||||
var colorssp = d3.scaleQuantize()
|
||||
.domain([0,17])
|
||||
.range(["#3288bd", "#66c2a5", "#e41a1c", "#4daf4a", "#984ea3", "#d53e4f", "#f46d43", "#ABDDA4",
|
||||
"#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43",
|
||||
"#D53E4F", "#9E0142", "#e377c2", "#7f7f7f", "#bcbd22"]);
|
||||
|
||||
const mapsynttypestopalette={"Ma": 0, "SubI": 1, "SubII": 3, "SubIII": 4, "Co": 5,
|
||||
"CoI": 9, "CoII": 10, "SubIV": 5, "SubV": 6, "ParentethicalClause": 17,
|
||||
"CoIII": 11, "ParentheticalCo":14, "PseudoCo": 16, "SubVI": 7 , "CoIV": 12,
|
||||
"CoV": 13, "ParentheticalCoI": 15, "SubVII": 8}
|
||||
|
||||
const maptypes={"Ma": "Principale", "SubI": "Subordinata I grado", "SubII": "Subordinata II grado", "SubIII": "Subordinata III grado", "Co": "Coordinata",
|
||||
"CoI": "Coordinata I grado", "CoII": "Coordinata II grado", "SubIV": "Subordinata IV grado", "SubV": "Subordinata V grado",
|
||||
"ParentethicalClause": "Parentetica", "CoIII": "Coordinata III grado", "ParentheticalCo":"Coordinata alla parentetica",
|
||||
"PseudoCo": "Pseudo-coordinata", "SubVI": "Subordinata VI grado" , "CoIV": "Coordinata IV grado", "CoV": "Coordinata V grado",
|
||||
"ParentheticalCoI": "Coordinata alla parentetica I grado", "SubVII": "Subordinata VII grado"}
|
||||
|
||||
orlprefix = 'https://dantenetwork.it/ontology/orl/current/'
|
||||
|
||||
|
|
Loading…
Reference in New Issue