Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
AdvancedSearch.php
+ 9
− 5
View file @ 6984760c
......@@ -181,18 +181,22 @@
{
var data = {
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
{
var data = {
event: 'recipelistscore',
value: e
event: 'recipelist',
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)
......
Home.php
+ 17
− 3
View file @ 6984760c
......@@ -34,7 +34,8 @@
</div>
<script>
sessionStorage.setItem('favourites', '');
let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed');
......@@ -61,7 +62,7 @@
}
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')
{
......@@ -78,8 +79,11 @@
{
wrapper.classList.remove('active');
content.classList.remove('blur');
wraper.disabled = false;
wrapper.disabled = false;
embed.setAttribute('src','');
//Notify child that blurred was closed
notifyChildBlurredClosed();
}
function showInBlurred(address)
......@@ -148,6 +152,16 @@
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>
</body>
\ No newline at end of file
MyFavouriteRecipes.php
+ 10
− 2
View file @ 6984760c
......@@ -3,11 +3,19 @@
<head>
<title>Drinkpedia</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/MyAccount.css">
</head>
<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>
</html>
\ No newline at end of file
RecipeList.php
+ 79
− 6
View file @ 6984760c
......@@ -8,19 +8,20 @@
<body>
<ul>
<?php
include "Donnees.inc.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;
if ($_GET['ids'] == '') echo '<h1>No recipe found</h1>';
else{
if ($_GET['ids'] != ''){
$recipesIds = explode('|', $_GET['ids']);
......@@ -33,7 +34,7 @@
echo '<li><div class="container">';
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>';
echo '</div>';
......@@ -46,7 +47,7 @@
if(file_exists($image_url)) echo '<img class="cocktailImg" src="' . $image_url . '"></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></li>';
......@@ -78,6 +79,78 @@
};
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>
</body>
......
RecipeView.php
+ 54
− 1
View file @ 6984760c
......@@ -5,7 +5,6 @@
<body>
<img class="toggleFavourite" src="images/favourite.png" >
<?php
include "scripts/Functions.php";
include "Donnees.inc.php";
......@@ -22,6 +21,7 @@
if(!file_exists($image_url)) $image_url = 'images/missing.jfif';
?>
<img class="toggleFavourite" onclick="switchFavourite(this);" alt="<?php echo $id_recipe; ?>" src="" >
<div>
<img src=<?php echo "\"" . $image_url . "\"" ?> width="256" height="256"; ?>
<span>
......@@ -59,6 +59,59 @@
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>
</body>
\ No newline at end of file
Recipes.php
+ 4
− 2
View file @ 6984760c
......@@ -14,9 +14,11 @@
getRecipes([], [], 0, true, true, function(e) {
var data = {
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>
......
css/Home.css
+ 1
− 1
View file @ 6984760c
......@@ -7,7 +7,7 @@
body {
background-image: url('../images/pattern.jpg');
background-repeat: repeat;
background-size: 45%;
background-color: rgba(169, 169, 169, 0.5);
}
#tabFrame {
......
css/RecipeList.css
+ 7
− 1
View file @ 6984760c
body {
padding: 20px;
background-color: rgba(169, 169, 169, 0.5);
}
ul {
......@@ -40,6 +39,7 @@ ul li:last-child {
flex-direction: row;
justify-content: left;
align-items: center;
cursor: pointer;
}
.cocktailImg {
......@@ -52,6 +52,11 @@ ul li:last-child {
height: 64px;
margin-right: 15px;
object-fit: contain;
cursor: pointer;
}
.cocktailTitle {
cursor: pointer;
}
.extra {
......@@ -65,4 +70,5 @@ ul li:last-child {
.toggleFavourite {
width: 32px;
height: auto;
cursor: pointer;
}
\ No newline at end of file
images/favourite.png → images/favourite_off.png
+ 0
− 0
View file @ 6984760c
File moved
images/favourite_on.png 0 → 100644
+ 0
− 0
View file @ 6984760c
images/favourite_on.png

39.8 KiB

images/pattern.jpg
+ 0
− 0
View replaced file @ bb21e207 View file @ 6984760c
images/pattern.jpg

819 KiB | W: | H:

images/pattern.jpg

275 KiB | W: | H:

images/pattern.jpg
images/pattern.jpg
images/pattern.jpg
images/pattern.jpg
  • 2-up
  • Swipe
  • Onion skin
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment