browsing in progress
This commit is contained in:
cesare
parent
905d34b5cd
commit
6fe5a1cd3e
|
|
@ -13,15 +13,17 @@
|
||||||
|
|
||||||
<script type="text/javascript" src="js/utils.js"></script>
|
<script type="text/javascript" src="js/utils.js"></script>
|
||||||
<script type="text/javascript" src="js/cesareBrowse.js"></script>
|
<script type="text/javascript" src="js/cesareBrowse.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="blog-masthead">
|
<div class="blog-masthead">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<nav class="blog-nav">
|
<nav class="blog-nav">
|
||||||
<!-- <a class="blog-nav-item active" id="cantica1" href="#">Inferno</a> -->
|
<div class="container">
|
||||||
<a class="blog-nav-item" id="cantica1" href="#">Inferno</a>
|
<a class="blog-nav-item" id="cantica1" href="#">Inferno</a>
|
||||||
<a class="blog-nav-item" id="cantica2" href="#">Purgatorio</a>
|
<a class="blog-nav-item" id="cantica2" href="#">Purgatorio</a>
|
||||||
<a class="blog-nav-item" id="cantica3" href="#">Paradiso</a>
|
<a class="blog-nav-item" id="cantica3" href="#">Paradiso</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -44,24 +46,20 @@
|
||||||
|
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-module">
|
<!-- <div class="sidebar-module">
|
||||||
<h4>Altro</h4>
|
<h4>Altro</h4>
|
||||||
<ol class="list-unstyled">
|
<ol class="list-unstyled">
|
||||||
<li><a href="#">Metafore</a></li>
|
<li><a href="#">Metafore</a></li>
|
||||||
<li><a href="#">Dialoghi</a></li>
|
<li><a href="#">Dialoghi</a></li>
|
||||||
<li><a href="#">Personaggi</a></li>
|
<li><a href="#">Personaggi</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div> -->
|
||||||
</div><!-- /.blog-sidebar -->
|
</div><!-- /.blog-sidebar -->
|
||||||
|
|
||||||
<div class="col-sm-8 blog-main">
|
<div class="col-sm-8 blog-main" id='displaycanto'>
|
||||||
|
|
||||||
<!-- <div class="canto" style="display:none">
|
|
||||||
<h2 class="titolo-canto">Titolo</h2> -->
|
|
||||||
<!-- <p class="canto-meta">January 1, 2014 by <a href="#">Mark</a></p> -->
|
|
||||||
|
|
||||||
|
|
||||||
</div><!-- /.canto -->
|
</div><!-- /.displaycanto -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -72,6 +70,6 @@
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <script type="text/javascript" src="js/minimap.js"></script> -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -43,6 +43,8 @@ h6, .h6 {
|
||||||
background-color: #428bca;
|
background-color: #428bca;
|
||||||
-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
|
-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
|
||||||
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
|
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Nav links */
|
/* Nav links */
|
||||||
|
|
@ -111,6 +113,7 @@ h6, .h6 {
|
||||||
.sidebar-module {
|
.sidebar-module {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 0 -15px 15px;
|
margin: 0 -15px 15px;
|
||||||
|
position: fixed;
|
||||||
}
|
}
|
||||||
.sidebar-module-inset {
|
.sidebar-module-inset {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
@ -183,3 +186,85 @@ h6, .h6 {
|
||||||
.blog-footer p:last-child {
|
.blog-footer p:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Minimap
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body{
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font-size: clamp(1px, 3.2vw, 28px);
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-size: clamp(1px, 2.2vw, 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.minimap_container {
|
||||||
|
position: fixed;
|
||||||
|
top: 100px;
|
||||||
|
left: 1000px;
|
||||||
|
min-width: 20px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimap_size {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
border: 2px solid white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimap_viewer {
|
||||||
|
|
||||||
|
width: 25%;
|
||||||
|
|
||||||
|
position:absolute;
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
transform-origin: 0 0;
|
||||||
|
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
border: 1px solid #0000009a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimap_content {
|
||||||
|
position:absolute;
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width:100%;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
transform-origin: 0 0;
|
||||||
|
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//caricamento seconda cantica
|
//caricamento seconda cantica
|
||||||
|
|
@ -82,6 +83,7 @@
|
||||||
$(this).attr("style", 'display:none');
|
$(this).attr("style", 'display:none');
|
||||||
});
|
});
|
||||||
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
|
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
|
||||||
|
showMinimap($(this).attr('name').replace(" ", "_"))
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -104,6 +106,71 @@
|
||||||
$("#CantiPurgatorio").attr('style', 'display:none')
|
$("#CantiPurgatorio").attr('style', 'display:none')
|
||||||
$("#CantiParadiso").attr('style', 'display:none')
|
$("#CantiParadiso").attr('style', 'display:none')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//minimap management
|
||||||
|
let minimap = document.createElement('div');
|
||||||
|
let minimapSize = document.createElement('div');
|
||||||
|
let viewer = document.createElement('div');
|
||||||
|
let minimapContent = document.createElement('iframe');
|
||||||
|
let scale=0.1;
|
||||||
|
let realScale;
|
||||||
|
|
||||||
|
function showMinimap(element) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
minimap.className = 'minimap_container'
|
||||||
|
minimapSize.className = 'minimap_size'
|
||||||
|
viewer.className = 'minimap_viewer'
|
||||||
|
minimapContent.className = 'minimap_content'
|
||||||
|
|
||||||
|
minimap.append(minimapSize, viewer, minimapContent);
|
||||||
|
|
||||||
|
document.body.appendChild(minimap)
|
||||||
|
|
||||||
|
let html = document.getElementById(element).innerHTML
|
||||||
|
console.log(html)
|
||||||
|
|
||||||
|
let iFrameDoc = minimapContent.contentWindow.document;
|
||||||
|
iFrameDoc.open();
|
||||||
|
iFrameDoc.write(html);
|
||||||
|
iFrameDoc.close();
|
||||||
|
|
||||||
|
getDimensions()
|
||||||
|
window.addEventListener('scroll', trackScroll)
|
||||||
|
window.addEventListener('resize', getDimensions)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getDimensions(){
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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)}%`
|
||||||
|
}
|
||||||
|
|
||||||
|
function trackScroll(){
|
||||||
|
viewer.style.transform=`translateY(${window.scrollY * realScale}px)`
|
||||||
|
}
|
||||||
|
|
||||||
|
//end minimap management
|
||||||
|
|
||||||
async function executeQueryVersi(query) {
|
async function executeQueryVersi(query) {
|
||||||
bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
|
bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
|
||||||
alert(query)
|
alert(query)
|
||||||
|
|
@ -182,7 +249,18 @@
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// scroll function
|
||||||
|
/*
|
||||||
|
$(window).scroll(function(e){
|
||||||
|
var $el = $('.blog-masthead');
|
||||||
|
var isPositionFixed = ($el.css('position') == 'fixed');
|
||||||
|
if ($(this).scrollTop() > 10 && !isPositionFixed){
|
||||||
|
$el.css({'position': 'fixed', 'top': '0px'});
|
||||||
|
}
|
||||||
|
if ($(this).scrollTop() < 10 && isPositionFixed){
|
||||||
|
$el.css({'position': 'static', 'top': '0px'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
Loading…
Reference in New Issue