Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Home.php 0 → 100644
View file @ fc881b4f
<!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
Index.php
View file @ fc881b4f
......@@ -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
RecipeView.php
View file @ fc881b4f
......@@ -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
css/Home.css 0 → 100644
View file @ fc881b4f
* {
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
css/Index.css
View file @ fc881b4f
......@@ -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