Commit fc881b4f authored by ALGLAVE Ivan's avatar ALGLAVE Ivan
Browse files

Fichier "Home" qui contient la barre de navigation et le blurredelement,...

Fichier "Home" qui contient la barre de navigation et le blurredelement, communication entre les iframe et leur parent
parent eec234d3
<!DOCTYPE html>
<html>
<head>
<title>Drinkpedia</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/Home.css">
</head>
<body id="body">
<div id="content">
<div class="topnav">
<a class="active" href="">Hiérarchie</a>
<a href="">Avancé</a>
<a href="">Cocktails</a>
<a href="">Mon Compte</a>
</div>
<iframe id="frame" frameborder="0" src="Index.php">
</iframe>
</div>
<div id="BlurredElementCenteredContainer">
<iframe id="BlurredElementEmbed" src=""></iframe>
<button id="BlurredElementCenteredClose">X</button>
</div>
<script>
let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed');
window.onmessage = function (e) {
let m_event = e.data.event;
let m_value = e.data.value;
if(m_event == 'keyup')
{
if(m_value == 27)
{
hideRecipe();
}
}
else if(m_event == 'recipeselect')
{
showRecipe(m_value);
}
}
function hideRecipe()
{
wrapper.classList.remove('active');
content.classList.remove('blur');
wraper.disabled = false;
}
function showRecipe(id)
{
var clone = embed.cloneNode(true);
clone.setAttribute('src','RecipeView.php?id_recipe=' + id);
embed.parentNode.replaceChild(clone,embed);
embed = clone;
wrapper.classList.add('active');
content.classList.add('blur');
wrapper.disabled = true;
embed.focus();
document.addEventListener('keyup', function (e)
{
if(e.keyCode === 27)
{
hideRecipe();
}
});
}
let closeBtn = document.getElementById('BlurredElementCenteredClose');
closeBtn.addEventListener('click', hideRecipe);
</script>
</body>
\ No newline at end of file
......@@ -7,73 +7,31 @@
</head>
<body id="body">
<div id="content">
<select id="recipeSelection">
<?php
include "Donnees.inc.php";
for($i = 0; $i < count($Recettes); $i++)
{
echo '<option value="' . $i . '">' . $Recettes[$i]['titre'] . '</option>';
}
?>
</select>
<button onclick="showRecipe(document.getElementById('recipeSelection').value);">Show</button>
</div>
<select id="recipeSelection">
<?php
include "Donnees.inc.php";
for($i = 0; $i < count($Recettes); $i++)
{
echo '<option value="' . $i . '">' . $Recettes[$i]['titre'] . '</option>';
}
?>
</select>
<button onclick="notifyParent(document.getElementById('recipeSelection').value);">Show</button>
<div id="BlurredElementCenteredContainer">
<!--
<div>
<iframe id="BlurredElementEmbed" scrolling="no" src=""></iframe>
</div>
-->
<iframe id="BlurredElementEmbed" scrolling="no" src=""></iframe>
<button id="BlurredElementCenteredClose">X</button>
</div>
<!-- JAVASCRIPT -->
<script>
let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed');
function hideRecipe()
function notifyParent(e)
{
wrapper.classList.remove('active');
content.classList.remove('blur');
wraper.disabled = false;
var data = {
event: 'recipeselect',
value: Number(e)
};
window.top.postMessage(data, [data.event, data.value]);
}
function showRecipe(id)
{
var clone = embed.cloneNode(true);
clone.setAttribute('src','RecipeView.php?id_recipe=' + id);
embed.parentNode.replaceChild(clone,embed);
embed = clone;
wrapper.classList.add('active');
content.classList.add('blur');
wrapper.disabled = true;
embed.focus();
document.addEventListener('keyup', function (e)
{
if(e.keyCode === 27)
{
hideRecipe();
}
});
}
let closeBtn = document.getElementById('BlurredElementCenteredClose');
closeBtn.addEventListener('click', hideRecipe);
</script>
</body>
</html>
\ No newline at end of file
......@@ -40,4 +40,19 @@
</div>
<script>
document.addEventListener('keyup', function (e)
{
if(e.keyCode == 27)
{
var data = {
event: 'keyup',
value: e.keyCode
};
window.top.postMessage(data, [data.event, data.value]);
}
});
</script>
</body>
\ No newline at end of file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
iframe {
position: relative;
border: none;
border-width: 0px;
padding: 0px;
width: 100vw;
height: 100%;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #534caf;
color: white;
}
#content {
width: 100%;
display: block;
}
#content.blur {
filter: blur(5px);
}
#BlurredElementCenteredContainer {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
justify-content: center;
align-items: center;
}
#BlurredElementCenteredContainer.active {
display: flex;
}
#BlurredElementCenteredChildContainer {
border: none;
width: 75%;
max-height: 90%;
overflow: auto;
}
#BlurredElementCenteredClose {
position: absolute;
top: 10px;
right: 10px;
text-shadow: 0px 0px 10px black;
border-color: transparent;
background: transparent;
font-size: x-large;
}
#BlurredElementEmbed {
width: 75vw;
height: 90vh;
padding: 20px;
border-radius: 5px;
background-color: white;
border-color: black;
border-width: 1px;
overflow: auto;
position: relative;
border-radius: 5px;
box-shadow: 0px 0px 50px 5px black;
}
\ No newline at end of file
......@@ -7,62 +7,4 @@
body {
background: lightblue;
width: 100vw;
}
#content {
width: 100%;
}
#content.blur {
filter: blur(5px);
}
#BlurredElementCenteredContainer {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
justify-content: center;
align-items: center;
}
#BlurredElementCenteredContainer.active {
display: flex;
}
#BlurredElementCenteredChildContainer {
border: none;
width: 75%;
max-height: 90%;
overflow: auto;
}
#BlurredElementCenteredClose {
position: absolute;
top: 10px;
right: 10px;
text-shadow: 0px 0px 10px black;
border-color: transparent;
background: transparent;
font-size: x-large;
}
iframe {
width: 75vw;
height: 90vh;
padding: 20px;
border-radius: 5px;
background-color: white;
border-color: black;
border-width: 1px;
overflow: auto;
position: relative;
border-radius: 5px;
box-shadow: 0px 0px 50px 5px black;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment