From fe6fb0423c3ba52e1fd25f409c37322f68285523 Mon Sep 17 00:00:00 2001 From: cesare Date: Mon, 6 Feb 2023 12:51:34 +0100 Subject: [PATCH] js per gestione minimap --- js/cesareBrowse.js | 18 +++--- js/minimap.js | 144 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 153 insertions(+), 9 deletions(-) create mode 100644 js/minimap.js diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js index 8f5d79e..b6813b9 100644 --- a/js/cesareBrowse.js +++ b/js/cesareBrowse.js @@ -6,7 +6,7 @@ var resetResult; var lsid; var lsentid; -var getDimDiv; +//var getDimDiv; const formaClass='frm' @@ -34,12 +34,12 @@ $(document).ready(function() { //used in minimap // - let minimap = document.createElement('div'); + /*let minimap = document.createElement('div'); let minimapSize = document.createElement('div'); let viewer = document.createElement('div'); let minimapContent = document.createElement('iframe'); let realScale; - let mappedElement = ''; + let mappedElement = '';*/ resetResult=function(){ //console.log('clean result') @@ -283,7 +283,7 @@ $(" ."+formaClass).hover(function(idx, element) { } return categoriegrammaticali[categ[0]] } - + /* function drawMinimap(name){ showMinimap(name) @@ -307,7 +307,7 @@ $(" ."+formaClass).hover(function(idx, element) { } }); } - + */ function cleanSearchResult() { for (msid of listaPeriodiRisultato){ @@ -396,7 +396,7 @@ $(" ."+formaClass).hover(function(idx, element) { //minimap management - +/* function showMinimap(element) { mmplace = document.getElementById('displayminimap') minimap.className = 'minimap__container' @@ -475,13 +475,13 @@ $(" ."+formaClass).hover(function(idx, element) { 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)` @@ -500,7 +500,7 @@ $(" ."+formaClass).hover(function(idx, element) { $(".minimap__container").remove(); currentMinimap = '' } - +*/ //Cantica management functions function showCanto(formecantica, idcantica, canto) { diff --git a/js/minimap.js b/js/minimap.js new file mode 100644 index 0000000..0dc78d1 --- /dev/null +++ b/js/minimap.js @@ -0,0 +1,144 @@ +/** + * + */ + +const displayId = 'displaycanto' + +let minimap = document.createElement('div'); +let minimapSize = document.createElement('div'); +let viewer = document.createElement('div'); +let minimapContent = document.createElement('iframe'); +let realScale; +let mappedElement = ''; + +function drawMinimap(name){ + + showMinimap(name) + 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 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 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; + + 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 getInnerHeight(elm) { + var computed = getComputedStyle(elm), + padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom); + + return elm.clientHeight - padding + } + /* + 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 = '' + } + +