143 lines
5.1 KiB
HTML
Executable file
143 lines
5.1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
|
|
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
|
<style>
|
|
.dropbtn {
|
|
background-color: #3498DB;
|
|
color: white;
|
|
padding: 16px;
|
|
font-size: 16px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.dropbtn:hover, .dropbtn:focus {
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f1f1f1;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content a:hover {background-color: #ddd}
|
|
|
|
.show {display:block;}
|
|
</style>
|
|
<script>
|
|
function changeName(name){
|
|
for (i = 2013; i <= 2019; i++)
|
|
document.getElementById(i).classList.replace("is-primary", "is-dark");
|
|
|
|
|
|
if(name == "salvini")
|
|
for (i = 2013; i <= 2019; i++)
|
|
document.getElementById(i).disabled = false;
|
|
else
|
|
for (i = 2013; i <= 2019; i++)
|
|
document.getElementById(i).disabled = true;
|
|
if(name == "renzi"){
|
|
document.getElementById("2019").disabled = false;
|
|
document.getElementById("2018").disabled = false;
|
|
}
|
|
}
|
|
|
|
function managePolitician(name){
|
|
var other = "";
|
|
if(name == "renzi") other = "salvini";
|
|
else if(name == "salvini") other = "renzi";
|
|
document.getElementById(other+"-btn").classList.replace("is-primary", "is-dark");
|
|
document.getElementById(name+"-btn").classList.replace("is-dark", "is-primary");
|
|
changeName(name);
|
|
}
|
|
|
|
function updatePage(year){
|
|
const is_salvini = document.getElementById("salvini-btn").classList.contains("is-primary");
|
|
const is_renzi = document.getElementById("renzi-btn").classList.contains("is-primary");
|
|
var politician = "";
|
|
if(is_salvini) politician = "salvini";
|
|
else if(is_renzi) politician = "renzi";
|
|
|
|
for (i = 2013; i <= 2019; i++){
|
|
document.getElementById(i).classList.replace("is-primary", "is-dark");
|
|
}
|
|
var btn = document.getElementById(year);
|
|
btn.classList.replace("is-dark", "is-primary");
|
|
|
|
// create iframe
|
|
if(politician == "salvini" || politician == "renzi"){
|
|
var iframe = document.createElement('iframe');
|
|
iframe.width=980
|
|
iframe.height=600
|
|
iframe.src = `http://localhost:5000/{{ viz|safe }}/${year}/${politician}`;
|
|
console.log(iframe.src);
|
|
iframe.style = "position:fixed; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;";
|
|
var div = document.getElementById("iframe");
|
|
div.innerHTML="";
|
|
div.appendChild(iframe);
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<container class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<div class="navbar-item">
|
|
<button id="salvini-btn" onclick="managePolitician('salvini')" class="dropbtn button is-dark">Matteo Salvini</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="renzi-btn" onclick="managePolitician('renzi')" class="dropbtn button is-dark">Matteo Renzi</button>
|
|
</div>
|
|
</div>
|
|
|
|
<container class="navbar-end">
|
|
<div class="navbar-item">
|
|
<button id="2019" onclick="updatePage('2019')" disabled class=" button is-dark">2019</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="2018" onclick="updatePage('2018')" disabled class=" button is-dark">2018</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="2017" onclick="updatePage('2017')" disabled class=" button is-dark">2017</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="2016" onclick="updatePage('2016')" disabled class=" button is-dark">2016</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="2015" onclick="updatePage('2015')" disabled class=" button is-dark">2015</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="2014" onclick="updatePage('2014')" disabled class=" button is-dark">2014</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button id="2013" onclick="updatePage('2013')" disabled class="button is-dark">2013</button>
|
|
</div>
|
|
<hr class="navbar-divider">
|
|
<hr class="navbar-divider">
|
|
<hr class="navbar-divider">
|
|
</container>
|
|
</container>
|
|
<container>
|
|
<div id="iframe">
|
|
</div>
|
|
</container>
|
|
</body>
|
|
</html>
|