Home.php 4.55 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
64
65
            else if(m_event == 'recipelist')
            {
                switchView('RecipeList.php?ids=' + m_value);
            }
ALGLAVE Ivan's avatar
d    
ALGLAVE Ivan committed
66
67
            else if(m_event == 'hierarchyDisplay')
            {
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
68
                setActiveTab('tabBtnI');
ALGLAVE Ivan's avatar
d    
ALGLAVE Ivan committed
69
70
                switchView('Hierarchy.php?element="' + m_value + '"');
            }
71
72
        }

73
        function hideBlurred()
74
75
76
77
        {
            wrapper.classList.remove('active');
            content.classList.remove('blur');
            wraper.disabled = false;
78
            embed.setAttribute('src','');
79
80
        }

81
        function showInBlurred(address)
82
        {
83
            embed.setAttribute('src',address);
84

85
86
            wrapper.classList.add('active'); // Set the RecipeView wrapper active
            content.classList.add('blur'); // Blurs the original content of the page
87
88
89
90
91
92
93
94
            wrapper.disabled = true;

            embed.focus();

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

        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);
        }
109
            
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
110
111
        function switchView(viewSrc)
        {
112
            startLoadingScreen();
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
113
114
115
116
            var tabFrame = document.getElementById('tabFrame');
            tabFrame.setAttribute('src', viewSrc);
        }

ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
117
118
119
120
121
122
123
124
        function setActiveTab(newActiveTab)
        {
            n_tab = document.getElementById(newActiveTab);
            n_tab.classList.add('active');
            activeTabButton.classList.remove('active');
            activeTabButton = n_tab;
        }

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

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

        function stopLoadingScreen()
        {
            loadingScreen.classList.remove('active');
            loadingScreenImage.src = '';
141
142
143
144
        }

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

145
        closeBtn.addEventListener('click', hideBlurred);
146
147
148
149

    </script>

</body>