Skip to content
Snippets Groups Projects
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
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Home.php 0 → 100644
+ 93
− 0
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
+ 18
− 60
View file @ fc881b4f
......@@ -7,7 +7,7 @@
</head>
<body id="body">
<div id="content">
<select id="recipeSelection">
<?php
include "Donnees.inc.php";
......@@ -17,62 +17,20 @@
}
?>
</select>
<button onclick="showRecipe(document.getElementById('recipeSelection').value);">Show</button>
</div>
<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>
<button onclick="notifyParent(document.getElementById('recipeSelection').value);">Show</button>
<!-- JAVASCRIPT -->
<script>
let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed');
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)
function notifyParent(e)
{
if(e.keyCode === 27)
{
hideRecipe();
var data = {
event: 'recipeselect',
value: Number(e)
};
window.top.postMessage(data, [data.event, data.value]);
}
});
}
let closeBtn = document.getElementById('BlurredElementCenteredClose');
closeBtn.addEventListener('click', hideRecipe);
</script>
</body>
......
......
RecipeView.php
+ 15
− 0
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
+ 97
− 0
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
+ 0
− 58
View file @ fc881b4f
......@@ -8,61 +8,3 @@ body {
background: lightblue;
width: 100vw;
}
\ No newline at end of file
#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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment