Home.php 4.73 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
<!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">

11
12
    <div class="background"></div>

13
14
    <div id="content">
        <div class="topnav">
15
16
            <button id="tabBtnI" class="active" value="Hierarchy.php" onclick="tabButtonClicked(this)">Hiérarchie</button>
            <button id="tabBtnA" value="AdvancedSearch.php" onclick="tabButtonClicked(this)">Avancé</button>
ALGLAVE Ivan's avatar
d    
ALGLAVE Ivan committed
17
            <button id="tabBtnR" value="Recipes.php" onclick="tabButtonClicked(this)">Recettes</button>
18
19
            <button id="tabBtnMA" class="right" value="MyAccount.php" onclick="tabButtonClicked(this)">Mon Compte</button>
            <button id="tabBtnF" class="right" value="MyFavouriteRecipes.php" onclick="tabButtonClicked(this)">Favoris</button>
20
21
        </div>

22
        <iframe id="tabFrame" onload="stopLoadingScreen();" frameborder="0" src="Hierarchy.php">
23
24
25
26
27
28
29
30
31

        </iframe>
    </div>

    <div id="BlurredElementCenteredContainer">
        <iframe id="BlurredElementEmbed" src=""></iframe>
        <button id="BlurredElementCenteredClose">X</button>
    </div>

32
33
34
35
    <div id="loadingScreen">
        <img id="loadingScreenImage" src=""></img>
    </div>

36
37
38
39
40
    <script>
        
        let wrapper = document.getElementById('BlurredElementCenteredContainer');
        let content = document.getElementById('content');
        let embed = document.getElementById('BlurredElementEmbed');
41
42
        let loadingScreen = document.getElementById('loadingScreen');
        let loadingScreenImage = document.getElementById('loadingScreenImage');
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
43
44

        let activeTabButton = document.getElementById('tabBtnI');
45
46
47
48
49
50
51
52
53
54
        
        window.onmessage = function (e) {

            let m_event = e.data.event;
            let m_value = e.data.value;

            if(m_event == 'keyup')
            {
                if(m_value == 27)
                {
55
                    hideBlurred();
56
57
58
59
60
61
                }
            }
            else if(m_event == 'recipeselect')
            {
                showRecipe(m_value);
            }
62
63
            else if(m_event == 'recipelist')
            {
64
65
66
67
68
                switchView('RecipeList.php?ids=' + m_value + '&showscore=false');
            }
            else if(m_event == 'recipelistscore')
            {
                switchView('RecipeList.php?ids=' + m_value + '&showscore=true');
69
            }
ALGLAVE Ivan's avatar
d    
ALGLAVE Ivan committed
70
71
            else if(m_event == 'hierarchyDisplay')
            {
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
72
                setActiveTab('tabBtnI');
ALGLAVE Ivan's avatar
d    
ALGLAVE Ivan committed
73
74
                switchView('Hierarchy.php?element="' + m_value + '"');
            }
75
76
        }

77
        function hideBlurred()
78
79
80
81
        {
            wrapper.classList.remove('active');
            content.classList.remove('blur');
            wraper.disabled = false;
82
            embed.setAttribute('src','');
83
84
        }

85
        function showInBlurred(address)
86
        {
87
            embed.setAttribute('src',address);
88

89
90
            wrapper.classList.add('active'); // Set the RecipeView wrapper active
            content.classList.add('blur'); // Blurs the original content of the page
91
92
93
94
95
96
97
98
            wrapper.disabled = true;

            embed.focus();

            document.addEventListener('keyup', function (e)
            {
                if(e.keyCode === 27)
                {
99
                    hideBlurred();
100
101
                }
            });
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
102
        }
103
104
105
106
107
108
109
110
111
112

        function showRecipe(id) // Show the Recipe with the id 'id' in the file 'Donnees.inc.php'
        {
            showInBlurred('RecipeView.php?id_recipe=' + id);
        }

        function showRecipeList(idsStr)
        {
            showInBlurred('RecipeList.php?ids=' + idsStr);
        }
113
            
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
114
115
        function switchView(viewSrc)
        {
116
            startLoadingScreen();
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
117
118
119
120
            var tabFrame = document.getElementById('tabFrame');
            tabFrame.setAttribute('src', viewSrc);
        }

ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
121
122
123
124
125
126
127
128
        function setActiveTab(newActiveTab)
        {
            n_tab = document.getElementById(newActiveTab);
            n_tab.classList.add('active');
            activeTabButton.classList.remove('active');
            activeTabButton = n_tab;
        }

129
        function tabButtonClicked(b)
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
130
        {
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
131
                setActiveTab(b.id);
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
132
                switchView(activeTabButton.value);
133
134
135
136
137
138
139
140
141
142
143
144
        }

        function startLoadingScreen()
        {
            loadingScreen.classList.add('active');
            loadingScreenImage.src = 'images/loading.gif?' + (new Date().getTime());
        }

        function stopLoadingScreen()
        {
            loadingScreen.classList.remove('active');
            loadingScreenImage.src = '';
145
146
147
148
        }

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

149
        closeBtn.addEventListener('click', hideBlurred);
150
151
152
153

    </script>

</body>