keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Working filters ; cleaning needs to be done

Browse Source
This commit is contained in:
Théo Marchal 2021-03-03 09:38:55 +01:00
parent fece1eab16
commit 10dea8e993
3 changed files with 145 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
scripts/explorer.js
View File

@ -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)
{
index = array.indexOf(item);
if (index > -1)
array.splice(index, 1);
}
function visualFilterListItem(name, param)
function visualFilterCheckboxItem(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);
visualFilterListItem("year", paramYear);
visualFilterListItem("month", paramMonth);
visualFilterListItem("genre", paramGenre);
visualFilterListItem("theme", paramTheme);
visualFilterListItem("dimension", paramDimension);
visualFilterListItem("help", paramHelp);
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();
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");
}
});*/
});
/*********************/

63
scripts/explorer_menu.js
View File

@ -1,5 +1,7 @@
function generateMenu(availableOptions)
{
{
console.log("generate menu", availableOptions);
function createPhotoName(photo)
{
if (photo == "none") return "&#x2606; 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()
{
$(this).addClass("filter");
});
for (a of availableOptions.photos)
{
$('.photos .item-cont span input[id="'+a+'"]').parent().removeClass("filter");
}*/
checkListItem("places", availableOptions.places);
checkListItem("tags", availableOptions.tags);
}
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"

3
styles/main.css
View File

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