src/main/webapp/project-details.js

/*
 * Copyright 2023 Mike Becker. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright
 * notice, this list of conditions and the following disclaimer in the
 * documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
 * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/**
 * Hides and shows the project details.
 *
 * Following elements are required on the page (element ID):
 *
 * - toggle-details-button
 * - project-details-header-reduced
 * - project-details-header
 *
 */
projectDetailsVisible = true
function toggleProjectDetails() {
    const button = document.getElementById('toggle-details-button')
    const reduced = document.getElementById('project-details-header-reduced')
    const full = document.getElementById('project-details-header')

    const v = !window.projectDetailsVisible
    window.projectDetailsVisible = v

    if (v) {
        button.dataset.toggle = 'true'
        reduced.style.display = 'none'
        full.style.display = 'block'
    } else {
        delete button.dataset.toggle
        reduced.style.display = 'block'
        full.style.display = 'none'
    }
}

function toggleFilterDetails() {
    const filters = document.getElementById('more-filters')
    const toggle = document.getElementById('show-more-filters')
    if (toggle.checked) {
        filters.style.display = 'flex'
    } else {
        filters.style.display = 'none'
    }
}

function toggleDetails() {
    toggleProjectDetails()
    toggleFilterDetails()
}

window.addEventListener('load', function() { toggleDetails() }, false)