Index.php 2.12 KB
Newer Older
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
    <title>Drinkpedia</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/Index.css">
</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>



    <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>

    

    <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)
            {
                if(e.keyCode === 27)
                {
                    hideRecipe();
                }
            });
            
            
        }

        let closeBtn = document.getElementById('BlurredElementCenteredClose');

        closeBtn.addEventListener('click', hideRecipe);

    </script>
</body>
</html>