Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result
Blame Permalink
Home.php 3.64 KiB 
<!DOCTYPE html>
<html>
<head>
    <title>Drinkpedia</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/Home.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>

<body id="body">

    <div id="content">
        <div class="topnav">
            <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>
            <button id="tabBtnR" value="Recipes.php" onclick="tabButtonClicked(this)">Recettes</button>
            <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>
        </div>

        <iframe id="tabFrame" frameborder="0" src="Hierarchy.php">

        </iframe>
    </div>
    

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

    <script>
        
        let wrapper = document.getElementById('BlurredElementCenteredContainer');
        let content = document.getElementById('content');
        let embed = document.getElementById('BlurredElementEmbed');

        let activeTabButton = document.getElementById('tabBtnI');
        
        window.onmessage = function (e) {

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

            if(m_event == 'keyup')
            {
                if(m_value == 27)
                {
                    hideRecipe();
                }
            }
            else if(m_event == 'recipeselect')
            {
                showRecipe(m_value);
            }
            else if(m_event == 'hierarchyDisplay')
            {
                setActiveTab('tabBtnI');
                switchView('Hierarchy.php?element="' + m_value + '"');
            }
        }

        function hideRecipe()
        {
            wrapper.classList.remove('active');
            content.classList.remove('blur');
            wraper.disabled = false;
        }

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

            wrapper.classList.add('active'); // Set the RecipeView wrapper active
            content.classList.add('blur'); // Blurs the original content of the page
            wrapper.disabled = true;

            embed.focus();

            document.addEventListener('keyup', function (e)
            {
                if(e.keyCode === 27)
                {
                    hideRecipe();
                }
            });
        }
            
        function switchView(viewSrc)
        {
            var tabFrame = document.getElementById('tabFrame');
            tabFrame.setAttribute('src', viewSrc);
        }

        function setActiveTab(newActiveTab)
        {
            n_tab = document.getElementById(newActiveTab);
            n_tab.classList.add('active');
            activeTabButton.classList.remove('active');
            activeTabButton = n_tab;
        }

        function tabButtonClicked(b)
        {
            if(b.id != activeTabButton.id)
            {
                setActiveTab(b.id);
                switchView(activeTabButton.value);
            }
        }

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

        closeBtn.addEventListener('click', hideRecipe);

    </script>

</body>