concordia
/
LiDa_Search
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

js per gestione minimap

This commit is contained in:
cesare 2023-02-06 12:51:34 +01:00
parent c29bb1f272
commit fe6fb0423c
2 changed files with 153 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
js/cesareBrowse.js
View File

@ -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) {

144
js/minimap.js Normal file
View File

@ -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 = ''
}