Commit 6984760c authored by ALGLAVE Ivan's avatar ALGLAVE Ivan
Browse files

Favourites are stored in cookies, and Blurred recipe view sends feedback back...

Favourites are stored in cookies, and Blurred recipe view sends feedback back to RecipeList (or any other window opened in the tab) when closed to update favourites
parent bb21e207
...@@ -181,18 +181,22 @@ ...@@ -181,18 +181,22 @@
{ {
var data = { var data = {
event: 'recipelist', event: 'recipelist',
value: e value: e,
showScore: 'false',
title: 'Résultats de la recherche :'
}; };
window.top.postMessage(data, [data.event, data.value]); window.top.postMessage(data, [data.event, data.value, data.showScore, data.title]);
} }
function notifyParentScore(e) // Send a message to the parent window, asking to display the recipe #e function notifyParentScore(e) // Send a message to the parent window, asking to display the recipe #e
{ {
var data = { var data = {
event: 'recipelistscore', event: 'recipelist',
value: e value: e,
showScore: 'false',
title: 'Résultats de la recherche :'
}; };
window.top.postMessage(data, [data.event, data.value]); window.top.postMessage(data, [data.event, data.value, data.showScore, data.title]);
} }
function appendIngredient(ing, status) function appendIngredient(ing, status)
......
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
</div> </div>
<script> <script>
sessionStorage.setItem('favourites', '');
let wrapper = document.getElementById('BlurredElementCenteredContainer'); let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content'); let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed'); let embed = document.getElementById('BlurredElementEmbed');
...@@ -61,7 +62,7 @@ ...@@ -61,7 +62,7 @@
} }
else if(m_event == 'recipelist') else if(m_event == 'recipelist')
{ {
switchView('RecipeList.php?ids=' + m_value + '&showscore=false'); switchView('RecipeList.php?ids=' + m_value + '&showscore=' + e.data.showScore + '&title=' + e.data.title);
} }
else if(m_event == 'recipelistscore') else if(m_event == 'recipelistscore')
{ {
...@@ -78,8 +79,11 @@ ...@@ -78,8 +79,11 @@
{ {
wrapper.classList.remove('active'); wrapper.classList.remove('active');
content.classList.remove('blur'); content.classList.remove('blur');
wraper.disabled = false; wrapper.disabled = false;
embed.setAttribute('src',''); embed.setAttribute('src','');
//Notify child that blurred was closed
notifyChildBlurredClosed();
} }
function showInBlurred(address) function showInBlurred(address)
...@@ -148,6 +152,16 @@ ...@@ -148,6 +152,16 @@
closeBtn.addEventListener('click', hideBlurred); closeBtn.addEventListener('click', hideBlurred);
function notifyChildBlurredClosed() // Send a message to the parent window, asking to display the recipe #e
{
var data = {
event: 'blurredclosed',
value: 'closed'
};
var tabFrame = document.getElementById('tabFrame');
tabFrame.contentWindow.postMessage(data, [data.event, data.value]);
}
</script> </script>
</body> </body>
\ No newline at end of file
...@@ -3,11 +3,19 @@ ...@@ -3,11 +3,19 @@
<head> <head>
<title>Drinkpedia</title> <title>Drinkpedia</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/MyAccount.css">
</head> </head>
<body> <body>
<h1>My Favourite Recipes</h1> <script>
var data = {
event: 'recipelist',
value: sessionStorage.getItem('favourites'),
showScore: 'false',
title: 'Favoris :'
};
window.top.postMessage(data, [data.event, data.value, data.showScore, data.title]);
</script>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -8,19 +8,20 @@ ...@@ -8,19 +8,20 @@
<body> <body>
<ul>
<?php <?php
include "Donnees.inc.php"; include "Donnees.inc.php";
include "scripts/Functions.php"; include "scripts/Functions.php";
if(isset($_GET['title'])) echo '<h1 class="listeTitle">' . $_GET['title'] . '</h1>';
if ($_GET['ids'] == '') echo '<h1>Aucune recette !</h1>';
echo '<ul>';
$showScore = $_GET['showscore'] == 'true' ? true : false; $showScore = $_GET['showscore'] == 'true' ? true : false;
if ($_GET['ids'] == '') echo '<h1>No recipe found</h1>';
else{ if ($_GET['ids'] != ''){
$recipesIds = explode('|', $_GET['ids']); $recipesIds = explode('|', $_GET['ids']);
...@@ -33,7 +34,7 @@ ...@@ -33,7 +34,7 @@
echo '<li><div class="container">'; echo '<li><div class="container">';
echo '<div class="extra">'; echo '<div class="extra">';
echo '<img class="toggleFavourite" src="images/favourite.png" >'; echo '<img class="toggleFavourite" onclick="switchFavourite(this);" alt="' . $re[0] . '" src="" >';
if($showScore) echo '<p class="unsatisfied">Non satisfiés : ' . $re[1] . '</p>'; if($showScore) echo '<p class="unsatisfied">Non satisfiés : ' . $re[1] . '</p>';
echo '</div>'; echo '</div>';
...@@ -46,7 +47,7 @@ ...@@ -46,7 +47,7 @@
if(file_exists($image_url)) echo '<img class="cocktailImg" src="' . $image_url . '"></img>'; if(file_exists($image_url)) echo '<img class="cocktailImg" src="' . $image_url . '"></img>';
else echo '<img class="cocktailImg" src="images/missing.jfif"></img>'; else echo '<img class="cocktailImg" src="images/missing.jfif"></img>';
echo '<h1>' . $recipe['titre'] . '</h1>'; echo '<h1 class="cocktailTitle">' . $recipe['titre'] . '</h1>';
echo '</div>'; echo '</div>';
echo '</div></li>'; echo '</div></li>';
...@@ -78,6 +79,78 @@ ...@@ -78,6 +79,78 @@
}; };
window.top.postMessage(data, [data.event, data.value]); window.top.postMessage(data, [data.event, data.value]);
} }
function switchFavourite(img)
{
let new_src = "images/favourite_off.png";
if(!img.classList.contains('favouriteOn'))
{
new_src = "images/favourite_on.png";
img.classList.add('favouriteOn');
img.classList.remove('favouriteOff');
let f = sessionStorage.getItem('favourites');
if(f != '') f += '|';
f += img.alt;
sessionStorage.setItem('favourites', f);
}
else
{
img.classList.remove('favouriteOn');
img.classList.add('favouriteOff');
let f = sessionStorage.getItem('favourites').split('|');
let nf = '';
for(let i = 0; i < f.length; i++)
{
if(img.alt != f[i])
{
if(i != 0) nf += '|';
nf += f[i];
}
}
sessionStorage.setItem('favourites', nf);
}
img.src= new_src;
}
function refreshFavourites()
{
let collection = document.getElementsByClassName('toggleFavourite');
let favourites = sessionStorage.getItem('favourites').split('|');
for(let i = 0; i < collection.length; i++)
{
let node = collection[i];
let r_id = node.value;
if(favourites.findIndex(val => val == node.alt) >= 0)
{
node.classList.add('favouriteOn');
node.classList.remove('favouriteOff');
node.src = "images/favourite_on.png";
}
else
{
node.classList.add('favouriteOff');
node.classList.remove('favouriteOn');
node.src = "images/favourite_off.png";
}
}
}
window.onmessage = function (e) {
let m_event = e.data.event;
let m_value = e.data.value;
if(m_event == 'blurredclosed')
{
refreshFavourites();
}
}
refreshFavourites();
</script> </script>
</body> </body>
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<body> <body>
<img class="toggleFavourite" src="images/favourite.png" >
<?php <?php
include "scripts/Functions.php"; include "scripts/Functions.php";
include "Donnees.inc.php"; include "Donnees.inc.php";
...@@ -22,6 +21,7 @@ ...@@ -22,6 +21,7 @@
if(!file_exists($image_url)) $image_url = 'images/missing.jfif'; if(!file_exists($image_url)) $image_url = 'images/missing.jfif';
?> ?>
<img class="toggleFavourite" onclick="switchFavourite(this);" alt="<?php echo $id_recipe; ?>" src="" >
<div> <div>
<img src=<?php echo "\"" . $image_url . "\"" ?> width="256" height="256"; ?> <img src=<?php echo "\"" . $image_url . "\"" ?> width="256" height="256"; ?>
<span> <span>
...@@ -59,6 +59,59 @@ ...@@ -59,6 +59,59 @@
window.top.postMessage(data, [data.event, data.value]); window.top.postMessage(data, [data.event, data.value]);
} }
}); });
function switchFavourite(img)
{
let new_src = "images/favourite_off.png";
if(!img.classList.contains('favouriteOn'))
{
new_src = "images/favourite_on.png";
img.classList.add('favouriteOn');
img.classList.remove('favouriteOff');
let f = sessionStorage.getItem('favourites');
if(f != '') f += '|';
f += img.alt;
sessionStorage.setItem('favourites', f);
}
else
{
img.classList.remove('favouriteOn');
img.classList.add('favouriteOff');
let f = sessionStorage.getItem('favourites').split('|');
let nf = '';
for(let i = 0; i < f.length; i++)
{
if(img.alt != f[i])
{
if(i == 0) nf += '|';
nf += f[i];
}
}
sessionStorage.setItem('favourites', nf);
}
img.src= new_src;
}
let collection = document.getElementsByClassName('toggleFavourite');
let favourites = sessionStorage.getItem('favourites').split('|');
for(let i = 0; i < collection.length; i++)
{
let node = collection[i];
let r_id = node.value;
if(favourites.findIndex(val => val == node.alt) >= 0)
{
node.classList.add('favouriteOn');
node.src = "images/favourite_on.png";
}
else
{
node.classList.add('favouriteOff');
node.src = "images/favourite_off.png";
}
}
</script> </script>
</body> </body>
\ No newline at end of file
...@@ -14,9 +14,11 @@ ...@@ -14,9 +14,11 @@
getRecipes([], [], 0, true, true, function(e) { getRecipes([], [], 0, true, true, function(e) {
var data = { var data = {
event: 'recipelist', event: 'recipelist',
value: e value: e,
showScore: 'false',
title: 'Tous les cocktails :'
}; };
window.top.postMessage(data, [data.event, data.value]); window.top.postMessage(data, [data.event, data.value, data.showScore, data.title]);
}); });
</script> </script>
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
body { body {
background-image: url('../images/pattern.jpg'); background-image: url('../images/pattern.jpg');
background-repeat: repeat; background-repeat: repeat;
background-size: 45%; background-color: rgba(169, 169, 169, 0.5);
} }
#tabFrame { #tabFrame {
......
body { body {
padding: 20px; padding: 20px;
background-color: rgba(169, 169, 169, 0.5);
} }
ul { ul {
...@@ -40,6 +39,7 @@ ul li:last-child { ...@@ -40,6 +39,7 @@ ul li:last-child {
flex-direction: row; flex-direction: row;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
cursor: pointer;
} }
.cocktailImg { .cocktailImg {
...@@ -52,6 +52,11 @@ ul li:last-child { ...@@ -52,6 +52,11 @@ ul li:last-child {
height: 64px; height: 64px;
margin-right: 15px; margin-right: 15px;
object-fit: contain; object-fit: contain;
cursor: pointer;
}
.cocktailTitle {
cursor: pointer;
} }
.extra { .extra {
...@@ -65,4 +70,5 @@ ul li:last-child { ...@@ -65,4 +70,5 @@ ul li:last-child {
.toggleFavourite { .toggleFavourite {
width: 32px; width: 32px;
height: auto; height: auto;
cursor: pointer;
} }
\ No newline at end of file
images/pattern.jpg

819 KB | W: | H:

images/pattern.jpg

275 KB | W: | H:

images/pattern.jpg
images/pattern.jpg
images/pattern.jpg
images/pattern.jpg
  • 2-up
  • Swipe
  • Onion skin
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