adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-06-02 04:15:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixes #2229 date posted filter, handle parent and child dates

Browse Source 
Add and outline check for parent date and grey check for child dates
This commit is contained in:
Linty
2024-09-19 17:37:46 +02:00
parent 9462c7aa09
commit 874db88b5d
2 changed files with 90 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default/js/mcs.js
+87 -61
View File
@@ -144,6 +144,10 @@ $(document).ready(function () {
date_posted_str += ', ';
}
});
$('.date_posted-option.year').each(function () {
updateDateFilters(`.custom_posted_date #${$(this).attr('id')}`);
});
}
// change badge label if filter not empty
@@ -155,9 +159,6 @@ $(document).ready(function () {
updateFilters('date_posted', 'add');
$(".date_posted-option input").prop('checked', false);
$(".date_posted-option input").trigger('change');
// $('.date_posted-option input').removeAttr('disabled');
// $('.date_posted-option input').removeClass('grey-icon');
});
// Disable possiblity for user to select custom option, its gets selected programtically later on
@@ -183,67 +184,16 @@ $(document).ready(function () {
}
});
// For debug
// $('.date_posted-option-container').find(':input').show();
// On custom date input select
$(".custom_posted_date .date_posted-option input").change(function() {
var parentOption = $(this).parent()
const parentOption = $(this).parent();
const currentYear = $(this).data('year');
if($(this).is(":checked")){
// Toggle tick icon on selected date in custom list
$(this).siblings('label').find('.checked-icon').show();
// Add class selected to selected option,
// We want to find which are selected to handle the others
$(this).addClass('selected')
$(parentOption).addClass('selected')
$(parentOption).find('.mcs-icon').addClass('selected')
}
else
{
// Toggle tick icon on selected date in custom list
$(this).siblings('label').find('.checked-icon').hide();
// Add class selected to selected option,
// We want to find which are selected to handle the others
$(this).removeClass('selected')
$(parentOption).removeClass('selected')
$(parentOption).find('.mcs-icon').removeClass('selected')
}
// TODO finish handling grey tick on child options, and having specifi icon to show children are selected
// if this is selected then disable selecting children, and display grey tick
// var selectedContainerID = $(this).parent().parent().attr('id');
// if ($(this).is(":checked"))
// {
// $('#'+selectedContainerID+' .date_posted-option input').not('.selected').attr('disabled', 'disabled');
// $('#'+selectedContainerID+' .date_posted-option .mcs-icon').not('.selected').addClass('grey-icon');
// if($(parentOption).hasClass('year'))
// {
// if($(parentOption).find('label .mcs-icon').hasClass('gallery-icon-menu'))
// {
// $(parentOption).find('label .mcs-icon').toggleClass('gallery-icon-menu gallery-icon-checkmark').show();
// }
// }
// else if($(parentOption).hasClass('month'))
// {
// $(this).parents('.year').find('label .mcs-icon').first().toggleClass('gallery-icon-menu gallery-icon-checkmark grey-icon');
// }
// else if ($(parentOption).hasClass('day'))
// {
// $(this).parents('.year').find('label .mcs-icon').first().toggleClass('gallery-icon-menu gallery-icon-checkmark').show();
// $(this).parents('.month').find('label .mcs-icon').first().toggleClass('gallery-icon-menu gallery-icon-checkmark').show();
// }
// }
// else
// {
// $('#'+selectedContainerID+' .date_posted-option input').not('.selected').removeAttr('disabled');
// $('#'+selectedContainerID+' .date_posted-option .mcs-icon').not('.selected').removeClass('grey-icon');
// $(this).parents('.year').find('label .mcs-icon').first().toggleClass('gallery-icon-menu gallery-icon-checkmark grey-icon');
// $(this).parents('.month').find('label .mcs-icon').first().toggleClass('gallery-icon-menu gallery-icon-checkmark grey-icon');
// }
const selector = `.custom_posted_date #container_${currentYear}`;
updateDateFilters(selector);
// Used to select custom in preset list if dates are selected
if($('.custom_posted_date input:checked').length > 0)
@@ -1610,6 +1560,82 @@ function reloadPage(url){
window.location.href = url;
}
function updateDateFilters(selector) {
const ctx = $(selector);
const inputYear = ctx.find('.year_input input');
const iconYear = ctx.find('.year_input .mcs-icon');
const allMonth = ctx.find('.months_container').children();
const allDays = ctx.find('.days_container').children();
let yearIsCheck = false;
// check year
// year state
// check => check mark
// uncheck with children checked => outline check mark
// uncheck without children checked => hide
if (inputYear.is(':checked')) {
console.log('state : Year is check')
yearIsCheck = true;
ctx.find(':input:not(:checked)').attr('disabled', true);
iconYear.removeClass('gallery-icon-check-outline grey-icon')
.addClass('gallery-icon-checkmark').show();
} else if (ctx.find(':input:checked').length) {
console.log('state : Year is uncheck but have children', ctx.find(':input:checked'));
ctx.find(':input').attr('disabled', false);
iconYear.removeClass('gallery-icon-checkmark')
.addClass('gallery-icon-check-outline grey-icon').show();
} else {
console.log('state: Year is uncheck and doesnt have children');
ctx.find(':input').attr('disabled', false);
iconYear.removeClass('grey-icon').hide();
}
// check month and his days
// month state
// check => check mark
// uncheck with children check => outline check mark
// uncheck with no children and year is checked => grey check mark
// uncheck with no children => hide
allMonth.each(function () {
const monthInput = $(this).find('.month_input input');
const iconMonth = $(this).find('.month_input .mcs-icon');
const allDays = $(this).find('.days_container').children();
let monthIsChecked = false;
if (monthInput.is(':checked')) {
monthIsChecked = true;
allDays.find(':input:not(:checked)').attr('disabled', true);
iconMonth.removeClass('gallery-icon-check-outline grey-icon')
.addClass('gallery-icon-checkmark').show();
} else if (allDays.find(':input:checked').length) {
iconMonth.removeClass('gallery-icon-checkmark')
.addClass('gallery-icon-check-outline grey-icon').show();
} else if (yearIsCheck) {
iconMonth.removeClass('gallery-icon-check-outline')
.addClass('gallery-icon-checkmark grey-icon').show();
} else {
iconMonth.removeClass('grey-icon').hide();
}
// day state
// check => check mark
// uncheck with year or month checked => grey check mark
// uncheck without year or month checked => hide
allDays.each(function () {
const inputDay = $(this).find('input');
const iconDay = $(this).find('.mcs-icon');
if (inputDay.is(':checked')) {
iconDay.removeClass('grey-icon').show();
} else if (monthIsChecked || yearIsCheck) {
iconDay.addClass('grey-icon').show();
} else {
iconDay.removeClass('grey-icon').hide();
}
});
});
}
/**
* Replace the filter_form elements if they exceed the window
*/
themes/default/template/include/search_filters.inc.tpl
+3 -3
View File
@@ -305,7 +305,7 @@ const prefix_icon = 'gallery-icon-';
{foreach from=$LIST_DATE_POSTED key=y item=year}
<div class="date_posted-option year" id="container_{$y}">
<div class="year_input">
<input type="checkbox" id="date_posted_{$y}" value='y{$y}'>
<input type="checkbox" id="date_posted_{$y}" value='y{$y}' data-year="{$y}">
<i class="gallery-icon-up-open accordion-toggle" data-type='year'></i>
<label for="date_posted_{$y}" id="{$y}">
<span class="date-period">{$year.label}</span>
@@ -318,7 +318,7 @@ const prefix_icon = 'gallery-icon-';
{foreach from=$year.months key=m item=month}
<div class="date_posted-option month" id="container_{$m}">
<div class="month_input">
<input type="checkbox" id="date_posted_{$m}" value='m{$m}'>
<input type="checkbox" id="date_posted_{$m}" value='m{$m}' data-year="{$y}">
<i class="gallery-icon-up-open accordion-toggle" data-type='month'></i>
<label for="date_posted_{$m}" id="{$m}">
<span class="date-period">{$month.label}</span>
@@ -330,7 +330,7 @@ const prefix_icon = 'gallery-icon-';
<div class="days_container">
{foreach from=$month.days key=d item=day}
<div class="date_posted-option day" id="container_{$d}">
<input type="checkbox" id="date_posted_{$d}" value='d{$d}'>
<input type="checkbox" id="date_posted_{$d}" value='d{$d}' data-year="{$y}">
<label for="date_posted_{$d}" id="{$d}">
<span class="date-period">{$day.label}</span>
<span class="date_posted-badge">{$day.count}</span>