aggiunto modulo bootstrap per minimap, in progress

This commit is contained in:
cesare 2022-11-15 10:41:16 +01:00
parent f566503fab
commit 94844137a8
2 changed files with 45 additions and 16 deletions

View File

@ -133,9 +133,6 @@ p{
}
/* Pagination */
.pager {
margin-bottom: 60px;
@ -225,8 +222,8 @@ p{
.minimap_container {
position: fixed;
top: 100px;
/*position: fixed;*/
top: 160px;
left: 600px;
min-width: 20px;
z-index: 100;

View File

@ -79,12 +79,16 @@ $(document).ready(function() {
});
var mmih=0
var mmiw=0
jQuery(document).delegate('.navig-canto', 'click', function(e) {
$('.canto').each(function() {
$(this).attr("style", 'display:none');
});
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
mmiw=$("#displaycanto").innerWidth();
mmih=$("#displaycanto").innerHeight();
//alert (mmih+ ' '+ mmiw)
showMinimap($(this).attr('name').replace(" ", "_"))
currentMinimap=$(this).attr('name').replace(" ", "_");
@ -165,6 +169,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
showMinimap(currentMinimap)
}
//minimap management
let minimap = document.createElement('div');
let minimapSize = document.createElement('div');
@ -175,16 +180,27 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
function showMinimap(element) {
minimap.className = 'minimap_container'
mmplace=document.getElementById('displayminimap')
minimap.className = 'minimap_container position-fixed'
minimapSize.className = 'minimap_size'
viewer.className = 'minimap_viewer'
viewer.id='minimapviewer'
minimapContent.className = 'minimap_content'
//class="col-3 px-0"
minimap.append(minimapSize, viewer, minimapContent);
document.body.appendChild(minimap)
//document.body.appendChild(minimap)
if (mmplace!=null)
//mmplace.appendChild(minimap)
document.body.appendChild(minimap)
else{
minimap.style.position = 'fixed';
document.body.appendChild(minimap)
}
//console.log(element)
let html = document.getElementById(element).innerHTML
console.log(html)
@ -195,7 +211,11 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
iFrameDoc.close();
getDimensions()
window.addEventListener('scroll', trackScroll)
//document.getElementById('displayminimap').addEventListener('scroll', trackScrollCanto)
window.addEventListener('resize', getDimensions)
}
@ -204,16 +224,25 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
function getDimensions(){
cantoplace=document.getElementById('displaycanto')
let bodyWidth = document.body.clientWidth;
let bodyRatio = document.body.clientHeight / bodyWidth;
let winRatio = window.innerHeight / window.innerWidth;
minimap.style.width = '10%';
realScale = minimap.clientWidth / (bodyWidth);
realScale = minimap.clientWidth / bodyWidth;
//realScale = 130 / bodyWidth;
console.log('window: '+minimap.clientWidth+' '+bodyWidth+' '+bodyRatio+ ' '+winRatio)
console.log('displaycanto: '+minimap.clientWidth+' '+cantoplace.clientWidth+' '+(cantoplace.clientHeight/cantoplace.clientWidth)
+ ' '+(mmih/mmiw))
minimapSize.style.paddingTop = `${bodyRatio * 100}%`
viewer.style.paddingTop = `${winRatio * 100}%`;
minimapSize.style.paddingTop = `${bodyRatio * 100}%`
viewer.style.paddingTop = `${winRatio * 100}%`;
minimapContent.style.transform = `scale(${realScale})`;
minimapContent.style.width = `${(100 / realScale)}%`
@ -223,6 +252,9 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
function trackScroll(){
viewer.style.transform=`translateY(${window.scrollY * realScale}px)`
}
function trackScrollCanto(){
viewer.style.transform=`translateY(${document.getElementById('displaycanto').scrollY * realScale}px)`
}
function hideMinimap(){
$('.canto').each(function() {