Working filters ; cleaning needs to be done

scripts/explorer.js

@@ -12,6 +12,13 @@ function onSubmit() {
     return true;
 }
 
+function removeFromArray(array, item)
+{
+    index = array.indexOf(item);
+    if (index > -1)
+        array.splice(index, 1);
+}
+
 jQuery(document).ready(function($)
 {
     // get URL parameters
@@ -29,8 +36,6 @@ jQuery(document).ready(function($)
     $.getJSON("data.json", function(data)
     {
 
-        var originalData = data;
-
 /**********/
 /** MENU **/
 /**********/
@@ -52,6 +57,8 @@ jQuery(document).ready(function($)
                         return true;
                     for (elem of selectedElements)
                     {
+                        if (elem == "all")
+                            return true;
                         if (item[name] == elem)
                             return true;
                     }
@@ -63,6 +70,8 @@ jQuery(document).ready(function($)
             {
                 for (tag of selectedOptions.tags)
                 {
+                    if (tag == "all")
+                        return true;
                     if (!item.tags.includes(tag))
                         return false;
                 }
@@ -75,12 +84,26 @@ jQuery(document).ready(function($)
                     return true;
                 for (dimension of selectedOptions.dimensions)
                 {
+                    if (dimension == "all")
+                        return true;
                     if (item.dimension.split("x")[0] == dimension)
                         return true;
                 }
                 return false;
             }
     
+            // change "exist" with the associeted value ; this needs to be done here (!), after visual menu generation
+            /*for (photo of selectedOptions.photos)
+            {
+                if (photo == "exist")
+                {
+                    //removeFromArray(selectedOptions.photos, photo);
+                    selectedOptions.photos.push("bad");
+                    selectedOptions.photos.push("ok");
+                    selectedOptions.photos.push("good");
+                }
+            }*/
+
             data = data.filter(CheckTag);
             data = data.filter(CheckDimension);
             data = data.filter(CheckItem("year", selectedOptions.years));
@@ -205,10 +228,20 @@ jQuery(document).ready(function($)
                 if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
                 if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
             }
+            if (selectedPhotos.includes("exist"))
+            {
+                //removeFromArray(selectedOptions.photos, photo);
+                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);
@@ -217,7 +250,18 @@ jQuery(document).ready(function($)
 
         // menu initial generation
         $.getScript("scripts/explorer_menu.js", function() {
-            generateMenu(availableOptions);
+            generateMenu(originalAvailableOptions);
+
+            selectedOptions = gatherURLdata();
+            data = originalData;
+
+            console.log("gather url data", selectedOptions);
+
+            filterData(selectedOptions);
+            //availableOptions = [];
+            availableOptions = gatherData();
+            updateMenu(availableOptions);
+
 
             // menu configurer show / hide
             $("article.explorer h2").click(function()
@@ -255,14 +299,7 @@ jQuery(document).ready(function($)
             userActionHandle(availableOptions);
             URLGeneration(availableOptions);
 
-            function removeFromArray(array, item)
+            function visualFilterCheckboxItem(name, param)
-            {
-                index = array.indexOf(item);
-                if (index > -1)
-                    array.splice(index, 1);
-            }
-
-            function visualFilterListItem(name, param)
             {
                 $('input[name="' + name + '"]').change(function()
                 {
@@ -281,19 +318,60 @@ jQuery(document).ready(function($)
                     filterData(selectedOptions);
                     availableOptions = [];
                     availableOptions = gatherData();
-                    console.log(data);
                     updateMenu(availableOptions);
                 });
             }
 
-            visualFilterListItem("photo", paramPhoto);
+            function visualFilterListItem(name, param)
-            visualFilterListItem("year", paramYear);
+            {
-            visualFilterListItem("month", paramMonth);
+                $('select[name="' + name + '"]').change(function()
-            visualFilterListItem("genre", paramGenre);
+                {
-            visualFilterListItem("theme", paramTheme);
+                    if (this.value == "" && name == "place")
-            visualFilterListItem("dimension", paramDimension);
+                        param.pop();
-            visualFilterListItem("help", paramHelp);
+                    else
+                        param.push(this.value);
 
+                    selectedOptions = gatherURLdata();
+                    data = originalData;
+                    filterData(selectedOptions);
+                    availableOptions = [];
+                    availableOptions = gatherData();
+                    console.log("select", selectedOptions);
+                    console.log("avail", availableOptions);
+                    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);
+            visualFilterListItem("tag", paramTag);
+
+            /*$('input[id="exist"]').click(function()
+            {
+                if (this.checked)
+                {
+                    console.log("exsit checked");
+                    paramPhoto.push(this.id);
+                    paramPhoto.push("bad");
+                    paramPhoto.push("ok");
+                    paramPhoto.push("good");
+                }
+                else
+                {
+                    console.log("exist unchecked");
+                    removeFromArray(paramPhoto, this.id);
+                    removeFromArray(paramPhoto, "bad");
+                    removeFromArray(paramPhoto, "ok");
+                    removeFromArray(paramPhoto, "good");
+                }
+            });*/
         });
 
 /*********************/

scripts/explorer_menu.js

@@ -1,5 +1,7 @@
 function generateMenu(availableOptions)
-{    
+{
+    console.log("generate menu", availableOptions);
+
     function createPhotoName(photo)
     {
         if (photo == "none") return "☆ inexistant";
@@ -98,7 +100,10 @@ function generateMenu(availableOptions)
 
     $(".box.places select").append('<option value="">Aucun</option');
     for (place of availableOptions.places)
+    {
+        //console.log(place);
         $(".box.places select").append('<option value="' + place + '">' + place + '</option');
+    }
 
     $(".box.tags select").append('<option value="">Aucun</option');
     for (tag of availableOptions.tags)
@@ -111,14 +116,44 @@ function updateMenu(availableOptions)
 
     function checkItem(name, array)
     {
-        $('.'+name+' .item-cont span').each(function()
+        $('.' + name + ' .item-cont span input').each(function()
         {
-            $(this).addClass("filter");
+            if (!array.includes($(this).prop("value")))
+            {
+                if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
+                    $(this).parent().addClass("filter");
+                
+                // special case for "exist" in photos
+                if ($(this).prop("value") == "exist")
+                {
+                    if (array.includes("none") && ! (array.includes("bad") || array.includes("ok") || array.includes("good")))
+                        $(this).parent().addClass("filter");
+                    else
+                        $(this).parent().removeClass("filter");
+                    if (array.length == 0)
+                        $(this).parent().addClass("filter");
+                }
+            }
+            else
+                $(this).parent().removeClass("filter");
         });
-        for (a of array)
+    }
+
+    function checkListItem(name, array)
+    {
+        $('.' + name + ' select option').each(function()
         {
-            $('.'+name+' .item-cont span input[id="'+a+'"]').parent().removeClass("filter");
+            if (!array.includes($(this).prop("value")))
-        }
+            {
+                if ($(this).prop("value") != "")
+                    $(this).hide();
+            }
+            else
+            {
+                console.log("show");
+                $(this).show();
+            }
+        });
     }
 
     checkItem("photos", availableOptions.photos);
@@ -129,16 +164,11 @@ function updateMenu(availableOptions)
     checkItem("dimensions", availableOptions.dimensions);
     checkItem("help", availableOptions.helps);
 
-    /*$('.photos .item-cont span').each(function()
+    checkListItem("places", availableOptions.places);
-    {
+    checkListItem("tags", availableOptions.tags);
-        $(this).addClass("filter");
-    });
-    for (a of availableOptions.photos)
-    {
-        $('.photos .item-cont span input[id="'+a+'"]').parent().removeClass("filter");
-    }*/
 }
 
+
 function URLGeneration(availableOptions)
 {
     // populate checkboxes depending on URL
@@ -202,8 +232,9 @@ function URLGeneration(availableOptions)
     URLlistSelector(".box.tags", "tag", paramTag, availableOptions.tags);
 
     // URL special case for photos with "exist"
-    if (paramPhoto == "exist")
+    if (paramPhoto.includes("exist"))
     {
+        console.log("paramPhoto!!!", paramPhoto);
         $('input[id="exist"]').prop("checked", true);
         $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
         $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
@@ -272,7 +303,7 @@ function userActionHandle(availableOptions)
     allCheckBoxSelected("tags", "tag");
     allCheckBoxSelected("photos", "photo");
     allCheckBoxSelected("helps", "help");
-    listOptionSelected(".box.places", "place", availableOptions.places);
+    //listOptionSelected(".box.places", "place", availableOptions.places);
     listOptionSelected(".box.tags", "tag", availableOptions.tags);
 
     // special case for photos with "exist"

styles/main.css

@@ -543,8 +543,7 @@ input:checked + label {
 }
 
 .item-cont span.filter {
-    font-size:0.75rem;
+    color:gray;
-    /*text-decoration:line-through;*/
 }
 
 @media only screen and (max-width:600px) {