ginou/scripts/explorer.js

// remove place and tag from url when unnecessary
function onSubmit() {
    $("select[name=place]").each(function() {
        if ($(this).val() == "")
            $(this).remove();
    });

    $("select[name=tag]").each(function() {
        if ($(this).val() == "")
            $(this).remove();
    });
    return true;
}

function removeFromArray(array, item)
{
    index = array.indexOf(item);
    if (index > -1)
        array.splice(index, 1);
}

jQuery(document).ready(function($)
{
    // get URL parameters
    urlParams = new URLSearchParams(window.location.search);
    paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
    paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
    paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
    paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
    paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
    paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
    paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
    paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
    paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));

    $.getJSON("data.json", function(data)
    {

/**********/
/** MENU **/
/**********/

        var availableOptions = [];
        var selectedOptions = [];

        // filter data depending of parameters
        function filterData(selectedOptions)
        {
            function CheckItem(name, selectedElements)
            {
                return function(item)
                {
                    if (selectedElements.length == 0)
                        return true;
                    for (elem of selectedElements)
                    {
                        if (elem == "all")
                            return true;
                        if (item[name] == elem)
                            return true;
                    }
                    return false;
                }
            }

            function CheckTag(item)
            {
                for (tag of selectedOptions.tags)
                {
                    if (tag == "all")
                        return true;
                    if (!item.tags.includes(tag))
                        return false;
                }
                return true;
            }

            function CheckDimension(item)
            {
                if (selectedOptions.dimensions.length == 0)
                    return true;
                for (dimension of selectedOptions.dimensions)
                {
                    if (dimension == "all")
                        return true;
                    if (item.dimension.split("x")[0] == dimension)
                        return true;
                }
                return false;
            }

            data = data.filter(CheckTag);
            data = data.filter(CheckDimension);
            data = data.filter(CheckItem("year", selectedOptions.years));
            data = data.filter(CheckItem("photo", selectedOptions.photos));
            data = data.filter(CheckItem("month", selectedOptions.months));
            data = data.filter(CheckItem("genre", selectedOptions.genres));
            data = data.filter(CheckItem("theme", selectedOptions.themes));
            data = data.filter(CheckItem("place", selectedOptions.places));
            data = data.filter(CheckItem("help", selectedOptions.helps));
        }

        // gather data from json to make form
        function gatherData()
        {
            var photos = []; var years = []; var months = []; var genres = [];
            var themes = []; var places = []; var tags = []; var dimensions = []; var helps = [];

            function makeItem(item, array, displayName, min, max)
            {
                if (item >= min && item <= max)
                {
                    if (array.indexOf(displayName) === -1)
                        array.push(displayName);
                }
            }

            for (i of data)
            {
                if (photos.indexOf(i.photo) === -1 && i.photo != "" && i.photo != "—")
                    photos.push(i.photo);
                if (months.indexOf(i.month) === -1 && i.month != "" && i.month != "—")
                    months.push(i.month);
                if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
                    genres.push(i.genre);
                if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
                    themes.push(i.theme);
                if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
                    places.push(i.place);
                if (helps.indexOf(i.help) === -1 && i.help != "" && i.help != "—")
                    helps.push(i.help);
                if (i.year != "" && i.year != "—")
                {
                    makeItem(i.year, years, "50s", 1956, 1959);
                    makeItem(i.year, years, "60s", 1960, 1969);
                    makeItem(i.year, years, "70s", 1970, 1979);
                    makeItem(i.year, years, "80s", 1980, 1989);
                    makeItem(i.year, years, "90s", 1990, 1999);
                    makeItem(i.year, years, "00s", 2000, 2009);
                    makeItem(i.year, years, "10s", 2010, 2016);
                }
                if (i.dimension != "" && i.dimension != "—")
                {
                    makeItem(i.dimension.split("x")[0], dimensions, "18", 0, 19);
                    makeItem(i.dimension.split("x")[0], dimensions, "20", 20, 29);
                    makeItem(i.dimension.split("x")[0], dimensions, "30", 30, 39);
                    makeItem(i.dimension.split("x")[0], dimensions, "40", 40, 49);
                    makeItem(i.dimension.split("x")[0], dimensions, "50", 50, 59);
                    makeItem(i.dimension.split("x")[0], dimensions, "60", 60, 69);
                    makeItem(i.dimension.split("x")[0], dimensions, "70", 70, 79);
                    makeItem(i.dimension.split("x")[0], dimensions, "80", 80, 89);
                    makeItem(i.dimension.split("x")[0], dimensions, "90", 90, 99);
                    makeItem(i.dimension.split("x")[0], dimensions, "100", 100, 109);
                }
                if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
                {
                    splitTags = i.tags.split(", ");
                    for (splitTag of splitTags) {
                        if (tags.indexOf(splitTag) === -1)
                        {
                            tags.push(splitTag);
                        }
                    }
                }
            }

            genres.sort();
            themes.sort();
            helps.sort();
            places.sort(Intl.Collator().compare);
            tags.sort(Intl.Collator().compare);
            dimensions.sort(function(a, b) { return a - b; });
            var targetMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
            months.sort(function(a, b) { return targetMonths.indexOf(a) - targetMonths.indexOf(b); });
            var targetPhotos = ["none", "bad", "ok", "good"];
            photos.sort(function(a, b) { return targetPhotos.indexOf(a) - targetPhotos.indexOf(b); });

            return {"photos": photos, "years": years, "months": months, "genres": genres, "themes": themes, "places": places, "tags": tags, "dimensions": dimensions, "helps": helps};
        }

        // gather data from url to check available options
        function gatherURLdata()
        {
            selectedYears = [];
            selectedDimensions = [];
            selectedPhotos = paramPhoto;
            selectedMonths = paramMonth;
            selectedGenres = paramGenre;
            selectedThemes = paramTheme;
            selectedPlaces = paramPlace;
            selectedTags = paramTag;
            selectedHelps = paramHelp;
            for (p of paramYear)
            {
                if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
                if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
                if (p == "70s") for (i = 1970; i <= 1979; i++) selectedYears.push(i);
                if (p == "80s") for (i = 1980; i <= 1989; i++) selectedYears.push(i);
                if (p == "90s") for (i = 1990; i <= 1999; i++) selectedYears.push(i);
                if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
                if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
            }
            for (p of paramDimension)
            {
                if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
                if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
                if (p == "30") for (i = 30; i <= 39; i++) selectedDimensions.push(i);
                if (p == "40") for (i = 40; i <= 49; i++) selectedDimensions.push(i);
                if (p == "50") for (i = 50; i <= 59; i++) selectedDimensions.push(i);
                if (p == "60") for (i = 60; i <= 69; i++) selectedDimensions.push(i);
                if (p == "70") for (i = 70; i <= 79; i++) selectedDimensions.push(i);
                if (p == "80") for (i = 80; i <= 89; i++) selectedDimensions.push(i);
                if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
                if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
            }
            // special case of a multi selector
            if (selectedPhotos.includes("exist"))
            {
                selectedPhotos.push("bad");
                selectedPhotos.push("ok");
                selectedPhotos.push("good");
            }
            return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
                    "places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
        }

        var originalData = data;
        var originalAvailableOptions = gatherData();

        selectedOptions = gatherURLdata();
        filterData(selectedOptions);

        // menu initial generation
        $.getScript("scripts/explorer_menu.js", function()
        {
            generateMenu(originalAvailableOptions);
            availableOptions = gatherData();

            userActionHandle(availableOptions);
            URLGeneration(originalAvailableOptions);
            updateMenu(availableOptions);

            // handle tags
            function handleTags()
            {
                $('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
                {
                    paramTag = []; // collect all tags from all dropdowns
                    $('.box.tags .item-cont select[name="tag"]').each(function()
                    {
                        if (paramTag.indexOf(this.value) === -1 && this.value != "")
                            paramTag.push(this.value);
                    });
                    
                    if (this.value != "")
                    {
                        createNewElem = true; // if we modify an existing element to a value, we don't delete it
                        $('.box.tags select').each(function()
                        {
                            if ($(this).val() == "")
                                createNewElem = false;
                        });
                        if (createNewElem)
                        {
                            html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="tag">';
                            html += '<option value="">Aucun</option>';
                            for (a of originalAvailableOptions.tags)
                                html += '<option value="' + a + '">' + a + '</option>';
                            html += '</select></span>';
                            $(".box.tags .item-cont").append(html);
                        }
                    }
                    else
                    {
                        // if the element has no value, we delete it
                        $(this).parent().remove();
                    }

                    selectedOptions = gatherURLdata();
                    data = originalData;
                    filterData(selectedOptions);
                    availableOptions = [];
                    availableOptions = gatherData();
                    updateMenu(availableOptions);
                });
            }
            handleTags();

            function visualFilterCheckboxItem(name, param)
            {
                $('input[name="' + name + '"]').change(function()
                {
                    if (this.checked)
                        param.push(this.id);
                    else
                        removeFromArray(param, this.id);
                    
                    selectedOptions = gatherURLdata();
                    data = originalData;
                    filterData(selectedOptions);
                    availableOptions = [];
                    availableOptions = gatherData();
                    updateMenu(availableOptions);
                });
            }

            function visualFilterListItem(name, param)
            {
                $('select[name="' + name + '"]').change(function()
                {
                    if (this.value == "" && name == "place")
                        param.pop();
                    else
                        param.push(this.value);

                    selectedOptions = gatherURLdata();
                    data = originalData;
                    filterData(selectedOptions);
                    availableOptions = [];
                    availableOptions = gatherData();
                    updateMenu(availableOptions);
                });
            }

            visualFilterCheckboxItem("photo", paramPhoto);
            visualFilterCheckboxItem("year", paramYear);
            visualFilterCheckboxItem("month", paramMonth);
            visualFilterCheckboxItem("genre", paramGenre);
            visualFilterCheckboxItem("theme", paramTheme);
            visualFilterCheckboxItem("dimension", paramDimension);
            visualFilterCheckboxItem("help", paramHelp);

            visualFilterListItem("place", paramPlace);
        });

/*********************/
/** TABLE & GALLERY **/
/*********************/

        // gallery vars
        window.pageSize = 14;
        window.paintingList = [];

        function generateTable()
        {
            hasResult = false;
            numberOfItem = 0;
            canDisplay = true;

            for (i of data)
            {
                if (urlParams.toString() === "") // no parameter in URL
                    res = false;
                else
                    res = true;

                if (!res)
                    continue;

                hasResult = true;
                numberOfItem++;

                // table
                $("table").css("display", "block");

                result = "<tr>";
                result += "<td>" + i.number + "</td>";
                result += "<td>" + i.title + "</td>";
                result += "<td>" + (i.month != "—" ? i.month + "&nbsp;" : "") + i.year + "</td>";
                result += "<td>" + i.dimension + "</td>";
                result += "<td>" + i.genre + "</td>";
                result += "<td>" + i.theme + "</td>";
                result += "<td>" + i.place + "</td>";
                result += "<td>" + i.tags + "</td>";

                if (i.photo == "good")
                    result += '<td class="photo">&#x2605;&#x2605;&#x2605;</td>';
                else if (i.photo == "ok")
                    result += '<td class="photo">&#x2605;&#x2605;</td>';
                else if (i.photo == "bad")
                    result += '<td class="photo">&#x2605;</td>';
                else if (i.photo == "none")
                    result += '<td class="photo">&#x2606;</td>';

                if (i.help == "yes")
                    result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"></td>'
                else
                    result += '<td>&nbsp;</td>'

                result += '<td><a data-fancybox="exposition-list" href="';
                if (i.photo == "none")
                    result += 'images/unknown.jpg';
                else
                    result += 'photos/paintings/normal/' + i.number + '.jpg'
                result += '" data-fancybox-index="' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
                result += "</tr>";

                $("table").append(result);


                // gallery
                paintingList.push(i.number);
                if (paintingList.length % (pageSize + 1) == 0)
                    canDisplay = false;

                paintingHtml = '<div class="gallery-item ';
                if (canDisplay)
                        paintingHtml += 'active">';
                else
                    paintingHtml += 'inactive">';

                if (i.photo == "none")
                {
                    paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></a>'
                }
                else
                {
                    paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
                }

                paintingHtml += '<span class="item-title">' + i.title;
                if (i.year != '—')
                    paintingHtml += ' (' + i.year + ')';
                paintingHtml += '</span></div>';
                $(".gallery").append(paintingHtml);
            }
            $(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
            return hasResult;
        }

        $("#gallery").hide();
        $(".style-select").hide();

        var targetPage = 0;
        if (urlParams.get('page') != "")
            targetPage = urlParams.get('page');

        var res = generateTable();

        if (res) // display table or no result depending of computed result
        {
            $(".style-select").show();
            $("article.explorer h2").removeClass("active")
            $("form").slideUp(200);
            $("article.explorer p.result").css("display", "block");

            // pagination configuration
            window.currentPage = 0;
            window.previousArray = []
            $.getScript("scripts/pagination.js", function() {
                paginationInit(data, paintingList, true);

                if (targetPage > 0)
                    $("#pagination").pagination('go', targetPage);
            });
        }
        else
        {
            $("article.explorer p.no-result").css("display", "block");
            $("article.explorer p.result").css("display", "none");
        }


        // fancybox configuration
        $.getScript("scripts/fancybox.js", function() {
            fancyboxInit(data, true);
        });
    });
});