Overview.html

<div id="gridContainer" style="margin-left: 15px; margin-right: 15px; width: 100%;">
    <div class="card-deck" style="margin-left: 15px; margin-right: 15px; display: flex; flex-wrap: wrap !important; overflow: hidden; justify-content: center;">
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3268145/mod_resource/content/2/Intro.png" alt="Section image: Two hands shaking">
            <div class="card-body">
                <h5 class="card-title">Introduction</h5>
                <p class="card-text">The purpose of the course</p>
                <p class="card-text">How Moodle works<br></p>
                <p class="card-text">Learn more about Moodle</p>
                <p class="card-text">Suggest new Moodle feature!<br></p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3268146/mod_resource/content/1/Templates%282%29.png" alt="Section image: Person looking at templates">
            <div class="card-body">
                <h5 class="card-title">Course Templates</h5>
                <p class="card-text">Why use them</p>
                <p class="card-text">How to use them</p>
                <p class="card-text">Four templates</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3268147/mod_resource/content/1/Course%20formats.png" alt="Section image: lectures in a grid">
            <div class="card-body">
                <h5 class="card-title">Section level</h5>
                <p class="card-text">Why care about looks?</p>
                <p class="card-text">Course formats</p>
                <p class="card-text">Summary</p>
                <p class="card-text">Hiding content</p>
                <p class="card-text">Controlling student access</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3280451/mod_resource/content/2/Display_Content.png" alt="Section image: A projector screen">
            <div class="card-body">
                <h5 class="card-title">Displaying content</h5>
                <p class="card-text">Text and Media Area</p>
                <p class="card-text">Collapsible Section</p>
                <p class="card-text">Tracking students</p>
                <p class="card-text">Access restriction</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3284341/mod_resource/content/2/Uploading%20files.png" alt="Section image: paper with an upload icon">
            <div class="card-body">
                <h5 class="card-title">Teaching material</h5>
                <p class="card-text">Using files</p>
                <p class="card-text">Using PDFs</p>
                <p class="card-text">Folder</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3268148/mod_resource/content/1/Teaching_activities.png" alt="Section image: play button, books and projector screen">
            <div class="card-body">
                <h5 class="card-title">Embedding media</h5>
                <p class="card-text">Panopto </p>
                <p class="card-text">Interactive Content in H5P</p>
                <p class="card-text">Linking to external sources</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3268149/mod_resource/content/1/Feedback.png" alt="Section image: two speech bubbles one postive and the other negative">
            <div class="card-body">
                <h5 class="card-title">Communication</h5>
                <p class="card-text">Teacher to student</p>
                <p class="card-text">Student to Teacher</p>
                <p class="card-text">Student to student</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://www.moodle.aau.dk/pluginfile.php/3268151/mod_resource/content/1/Running%20quizzes%281%29.png" alt="Section image: Student answering a multiple choice Quiz">
            <div class="card-body">
                <h5 class="card-title">Quiz and exams</h5>
                <p class="card-text">Single/group assignment</p>
                <p class="card-text">Quizzes in Moodle</p>
                <p class="card-text"> Award micro-credential</p>
            </div>
        </div>
    </div>    
</div>

<div id="tab">	
    <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="Introduction-tab" data-toggle="tab" href="#introduction" role="tab" aria-controls="home" aria-selected="true">Introduction</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="CourseTemplates-tab" data-toggle="tab" href="#CourseTemplates" role="tab" aria-controls="profile" aria-selected="false">Course Templates</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="SectionLevel-tab" data-toggle="tab" href="#SectionLevel" role="tab" aria-controls="contact" aria-selected="false">Section level</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="DisplayingContent-tab" data-toggle="tab" href="#DisplayingContent" role="tab" aria-controls="contact" aria-selected="false">Displaying Content</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="TeachingMaterial-tab" data-toggle="tab" href="#TeachingMaterial" role="tab" aria-controls="home" aria-selected="true">Teaching Material</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="EmbeddingMedia-tab" data-toggle="tab" href="#EmbeddingMedia" role="tab" aria-controls="profile" aria-selected="false">Embedding Media</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="Communication-tab" data-toggle="tab" href="#Communication" role="tab" aria-controls="contact" aria-selected="false">Communication</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="QuizAndExams-tab" data-toggle="tab" href="#QuizAndExams" role="tab" aria-controls="contact" aria-selected="false">Quiz and Exams</a>
    </li>
    </ul>
    <div class="tab-content" id="myTabContent" style="color: #434343; font-size: .875rem; margin-top: 20px;">
        <div class="tab-pane active" id="introduction" role="tabpanel" aria-labelledby="introduction-tab">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">The purpose of the course</p>
                    <p class="card-text">How Moodle works<br></p>
                    <p class="card-text">Learn more about Moodle</p>
                    <p class="card-text">Suggest new Moodle feature!<br></p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3268145/mod_resource/content/2/Intro.png" alt="Section image: Two hands shaking" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>           
        </div>
        <div class="tab-pane fade" id="CourseTemplates" role="tabpanel" aria-labelledby="CourseTemplates-prints">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Why use them</p>
                    <p class="card-text">How to use them</p>
                    <p class="card-text">Four templates</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3268146/mod_resource/content/1/Templates%282%29.png" alt="Section image: Person looking at templates" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
        <div class="tab-pane fade" id="SectionLevel" role="tabpanel" aria-labelledby="SectionLevel">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Why care about looks?</p>
                    <p class="card-text">Course formats</p>
                    <p class="card-text">Summary</p>
                    <p class="card-text">Hiding content</p>
                    <p class="card-text">Controlling student access</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3268147/mod_resource/content/1/Course%20formats.png" alt="Section image: lectures in a grid" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
        <div class="tab-pane fade" id="DisplayingContent" role="tabpanel" aria-labelledby="DisplayingContent">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Text and Media Area</p>
                    <p class="card-text">Collapsible Section</p>
                    <p class="card-text">Tracking students</p>
                    <p class="card-text">Access restriction</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3280451/mod_resource/content/2/Display_Content.png" alt="Section image: A projector screen" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
        <div class="tab-pane fade" id="TeachingMaterial" role="tabpanel" aria-labelledby="TeachingMaterial">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Using files</p>
                    <p class="card-text">Using PDFs</p>
                    <p class="card-text">Folder</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3284341/mod_resource/content/2/Uploading%20files.png" alt="Section image: paper with an upload icon" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
        <div class="tab-pane fade" id="EmbeddingMedia" role="tabpanel" aria-labelledby="Embedding Media">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Panopto </p>
                    <p class="card-text">Interactive Content in H5P</p>
                    <p class="card-text">Linking to external sources</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3268148/mod_resource/content/1/Teaching_activities.png" alt="Section image: play button, books and projector screen" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
        <div class="tab-pane fade" id="Communication" role="tabpanel" aria-labelledby="Communication">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Teacher to student</p>
                    <p class="card-text">Student to Teacher</p>
                    <p class="card-text">Student to student</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3268149/mod_resource/content/1/Feedback.png" alt="Section image: two speech bubbles one postive and the other negative" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
        <div class="tab-pane fade" id="QuizAndExams" role="tabpanel" aria-labelledby="Quiz And Exams">
            <div id="flex-container" style="display: flex; align-items: start; position: relative; overflow: hidden">
                <div id="tab-text" class="tab-text"> 
                    <p class="card-text">Single/group assignment</p>
                    <p class="card-text">Quizzes in Moodle</p>
                    <p class="card-text"> Award micro-credential</p>
                </div>
                <img id="dynamic-image" class="img-tab" src="https://www.moodle.aau.dk/pluginfile.php/3268151/mod_resource/content/1/Running%20quizzes%281%29.png" alt="Section image: Student answering a multiple choice Quiz" style="object-fit: scale-down; margin-left: 15px; display: block; max-width: 45%; margin-left: auto;">
            </div>
        </div>
    </div>
</div>
<script>
    // card elemets
    const gridContainer = document.getElementById("gridContainer");
    const cards = document.getElementsByClassName("card");
    const text = document.getElementsByClassName("card-text");
    const cardImages = document.getElementsByClassName("card-img-top");
    // tab elements
    const tab = document.getElementById("tab");
    // Moodle elements to check for visibility
    const courseIndex = document.getElementById('theme_space-drawers-courseindex');
    const rightblockDrawer = document.getElementById('theme_space-drawers-blocks');
    const navigationDrawer = document.getElementById('nav-drawer');

    // state control
    let courseIndexState = false;
    let rightblockDrawerState = false;
    let navDrawerState = false;
    
    // CSS assingment
    const width = '1131';
    gridContainer.style.cssText = "horizontalpadding: 20px;";
    const cardheight = "400px";
    const imageHeightRatio = 0.25;
    const imageFit = "scale-down";

    //Aply CSS
    changeClassParameters(cards, cardheight, "200px");

    changeClassParametersTab(text, "#434343", ".875rem");

    changeClassParametersImages(cardImages, imageFit, imageHeightRatio, cardheight);

    // Initial call to set styles based on window width
    updateStyles(courseIndexState, rightblockDrawerState, navDrawerState, width);

    // Function to change CSS class parameters for multiple elements
    function changeClassParameters(elements, height, width) {
        for (let i = 0; i < elements.length; i++) {
            let element = elements[i];
            element.style.height = height;
            element.style.width = width;
            element.style.cssText += "margin-left: 1px; margin-right: 1px; margin-bottom: 2px; flex: 1 0 auto; overflow-x: hidden; overflow-y:auto"
        }
    }
    // Function to change CSS class parameters for multiple elements
    function changeClassParametersTab(elements, color, fontSize) {
        for (let i = 0; i < elements.length; i++) {
            let element = elements[i];
            element.style.color = color;
            element.style.fontSize = fontSize;
        }
    }
    // Function to change CSS class parameters for multiple elements
    function changeClassParametersImages(elements, fit, heightRatio, cardheight) {
        const dynamicHeight = parseInt(cardheight, 10) * heightRatio;
        for (let i = 0; i < elements.length; i++) {
            let element = elements[i];
            element.style.height = dynamicHeight + "px";
            element.style.objectFit = fit;
        }
    }
    //Control flex grow for the flex container that holds the cards
    function controlFlexGrow(elements, courseIndexState, rightblockDrawerState, navDrawerState) {
        if (window.outerWidth < 1980  || courseIndexState == true && window.outerWidth < 1980 || rightblockDrawerState == true && window.outerWidth < 1980 || navDrawerState == true && window.outerWidth < 1980|| window.outerWidth < 2234 && courseIndexState == true && outerWidth > 1980 || window.outerWidth < 2234 && rightblockDrawerState == true && outerWidth > 1980 || window.outerWidth < 2234 && navDrawerState == true && outerWidth > 1980) {
            for (let i = 0; i < elements.length; i++) {
                let element = elements[i];
                element.style.cssText += "flex: 0 0 auto;"
            }
        } else if (window.outerWidth >= 1980 && courseIndexState == false && rightblockDrawerState == false && navDrawerState == false || window.outerWidth >= 2234) {
            for (let i = 0; i < elements.length; i++) {
                let element = elements[i];
                element.style.cssText += "flex: 1 0 auto;"
            }
        }
    }
    // Add conditional styles based on window width
    function tabControl(grid, tab, width, courseIndexState, rightblockDrawerState, navDrawerState) {
        if (window.outerWidth < width || window.outerWidth <= 1420 && courseIndexState == true || window.outerWidth <= 1420 && rightblockDrawerState == true | window.outerWidth <= 1420 && navDrawerState == true) {
            grid.style.display = "none";
            tab.style.display = "block";
            return;
        } else if (window.outerWidth >= width && courseIndexState == false && rightblockDrawerState == false && navDrawerState == false || window.outerWidth >= 1420 && courseIndexState == true || window.outerWidth >= 1420 && rightblockDrawerState == true || window.outerWidth >= 1420 && navDrawerState == true) {
            tab.style.display = "none";
            grid.style.display = "block";
        }
    }

    // Function to update styles based on window width
    function updateStyles(courseIndexState, rightblockDrawerState, navDrawerState, width) {
        controlFlexGrow(cards, courseIndexState, rightblockDrawerState, navDrawerState);
        tabControl(gridContainer, tab, width, courseIndexState, rightblockDrawerState, navDrawerState);
    }
    // Function to check if element is visible
    function respondToVisibility(element, width, callback) {
        if (element === null || element === undefined) return;
        var options = {
        root: null, // Use the viewport
        threshold: 0 // Call the callback when the element is completely visible or completely hidden
        };

        var observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                // Check if the element is visible
                if (entry.intersectionRatio > 0) {
                    // Check if the element has the 'closed' class or the 'aria-hidden' attribute set to 'true'
                    if (element.classList.contains('closed') || element.getAttribute('aria-hidden') === 'true') {
                        callback(false);
                    } else {
                        callback(true);
                    }
                } else {
                    // Check if the element has the 'closed' class or the 'aria-hidden' attribute set to 'true'
                    if (element.classList.contains('closed') || element.getAttribute('aria-hidden') === 'true') {
                        callback(false);
                    } else {
                        callback(false);
                    }
                }
            });
        }, options);

        observer.observe(element);
    }

    // Event listener to update styles on window resize
    //window.addEventListener("resize", updateStyles);
    window.addEventListener("resize", function() {
        updateStyles(courseIndexState, rightblockDrawerState, navDrawerState, width);
    });
    // Event listener to update styles on window resize based on the Moodle element course index
    respondToVisibility(courseIndex, width, function(isVisible) {
        courseIndexState = isVisible;
        controlFlexGrow(cards, courseIndexState, rightblockDrawerState, navDrawerState);
        tabControl(gridContainer, tab, width, courseIndexState, rightblockDrawerState, navDrawerState);
    });
    // Event listener to update styles on window resize based on the Moodle element right block drawer
    respondToVisibility(rightblockDrawer, width, function(isVisible) {
        rightblockDrawerState = isVisible;
        controlFlexGrow(cards, courseIndexState, rightblockDrawerState, navDrawerState);
        tabControl(gridContainer, tab, width, courseIndexState, rightblockDrawerState, navDrawerState);
    });
    // Event listener to update styles on window resize based on the Moodle element nav drawer
    respondToVisibility(navigationDrawer, width, function(isVisible) {
        navDrawerState = isVisible;
        controlFlexGrow(cards, courseIndexState, rightblockDrawerState, navDrawerState);
        tabControl(gridContainer, tab, width, courseIndexState, rightblockDrawerState, navDrawerState);
    });
    
</script>