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

fixes #2227 add creation date filter

Browse Source 
Same logic as date posted
This commit is contained in:
HWFord
2024-09-17 16:50:38 +02:00
parent 2783a8b848
commit 2d2baa7052
9 changed files with 635 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default/css/clear-search.css
+15 -2
View File
@@ -128,18 +128,28 @@
.custom_posted_date .date_posted-option:nth-child(even) .month_input i,
.custom_posted_date .days_container .date_posted-option:nth-child(odd) label,
.custom_posted_date .days_container .date_posted-option:nth-child(odd) i,
.preset_created_date .date_created-option:nth-child(odd) label,
.preset_created_date .date_created-option:nth-child(odd) i,
.custom_created_date .date_created-option:nth-child(odd) .year_input label,
.custom_created_date .date_created-option:nth-child(odd) .year_input i,
.custom_created_date .date_created-option:nth-child(even) .month_input label,
.custom_created_date .date_created-option:nth-child(even) .month_input i,
.custom_created_date .days_container .date_created-option:nth-child(odd) label,
.custom_created_date .days_container .date_created-option:nth-child(odd) i,
.ratios-option:nth-child(odd),
.ratings-option:nth-child(odd){
background: #f3f3f3;
}
.date_posted-option label .checked-icon.grey-icon{
.date_posted-option label .checked-icon.grey-icon,
.date_created-option label .checked-icon.grey-icon{
color:#777;
}
.filetypes-option label .checked-icon,
.added_by-option label .checked-icon,
.date_posted-option label .checked-icon,
.date_created-option label .checked-icon,
.ratios-option label .checked-icon,
.ratings-option label .checked-icon{
color: #ff7700;
@@ -148,6 +158,7 @@
.filetypes-option label .ext-badge,
.added_by-option label .added_by-badge,
.date_posted-badge,
.date_created-badge,
.ratios-option label .ratio-badge,
.ratings-option label .ratings-badge {
background: #ff7700;
@@ -170,7 +181,9 @@
.ratios-option input:checked + label,
.ratings-option input:checked + label,
.preset_posted_date .date_posted-option input:checked + label,
.custom_posted_date .selected input:checked {
.custom_posted_date .selected input:checked,
.preset_created_date .date_created-option input:checked + label,
.custom_created_date .selected input:checked {
background: #fff5e8;
}
themes/default/css/dark-search.css
+9 -2
View File
@@ -112,9 +112,16 @@
.filetypes-option:nth-child(odd),
.added_by-option:nth-child(odd),
.date_posted-option:nth-child(odd) label,
.preset_posted_date .date_posted-option:nth-child(odd) label,
.preset_posted_date .date_posted-option:nth-child(odd) i,
.custom_posted_date .date_posted-option:nth-child(odd) .year_input label,
.custom_posted_date .date_posted-option:nth-child(odd) .year_input i,
.custom_posted_date .date_posted-option:nth-child(even) .month_input label,
.custom_posted_date .date_posted-option:nth-child(even) .month_input i,
.custom_posted_date .days_container .date_posted-option:nth-child(odd) label,
.custom_posted_date .days_container .date_posted-option:nth-child(odd) i,
.ratios-option:nth-child(odd),
.ratings-option:nth-child(odd) {
.ratings-option:nth-child(odd){
background: #444;
}
themes/default/css/search.css
+45 -19
View File
@@ -234,6 +234,7 @@
.filter-filetypes-form .filter-actions,
.filter-date_posted-form .filter-actions,
.filter-date_created-form .filter-actions,
.filter-ratios-form .filter-actions,
.filter-ratings-form .filter-actions{
gap: 5px;
@@ -309,6 +310,7 @@
.filetypes-option-container,
.added_by-option-container,
.date_posted-option-container,
.date_created-option-container,
.ratios-option-container
.ratings-option-container {
display: flex;
@@ -319,7 +321,8 @@
}
.date_posted-option-container {
.date_posted-option-container,
.date_created-option-container {
margin: 10px 0 10px 0;
}
@@ -331,6 +334,7 @@
.filetypes-option input,
.added_by-option input,
.date_posted-option input,
.date_created-option input,
.ratios-option input,
.ratings-option input {
display: none;
@@ -339,6 +343,7 @@
.filetypes-option label,
.added_by-option label,
.preset_posted_date .date_posted-option label,
.preset_created_date .date_created-option label,
.ratios-option label,
.ratings-option label{
display: flex;
@@ -352,14 +357,16 @@
.added_by-option label .checked-icon,
.ratios-option label .checked-icon,
.ratings-option label .checked-icon,
.preset_posted_date .date_posted-option label .checked-icon{
.preset_posted_date .date_posted-option label .checked-icon,
.preset_created_date .date_created-option label .checked-icon{
display: none;
position: absolute;
left: 3px;
top: 4px;
}
.custom_posted_date .date_posted-option label .checked-icon{
.custom_posted_date .date_posted-option label .checked-icon,
.custom_created_date .date_created-option label .checked-icon{
display: none;
position: absolute;
right: 3px;
@@ -374,6 +381,7 @@
.added_by-option label .added_by-name,
.ratios-option label .ratio-name,
.preset_posted_date .date_posted-option .date-period,
.preset_created_date .date_created-option .date-period,
.ratings-option label .ratings-name {
margin-left: 30px;
}
@@ -383,7 +391,8 @@
margin-right: 10px;
}
.custom_posted_date .date_posted-option label .date-period{
.custom_posted_date .date_posted-option label .date-period,
.custom_created_date .date_created-option label .date-period{
margin-right: 30px;
}
@@ -391,14 +400,16 @@
.added_by-option label .added_by-badge,
.ratios-option label .ratio-badge,
.ratings-option label .ratings-badge,
.preset_posted_date .date_posted-option label .date_posted-badge {
.preset_posted_date .date_posted-option label .date_posted-badge,
.preset_created_date .date_created-option label .date_created-badge {
margin-left: auto;
border-radius: 10px;
padding: 0 5px;
font-weight: 600;
}
.custom_posted_date .date_posted-option label .date_posted-badge{
.custom_posted_date .date_posted-option label .date_posted-badge,
.custom_created_date .date_created-option label .date_created-badge{
border-radius: 10px;
padding: 0 5px;
font-weight: 600;
@@ -408,11 +419,13 @@
.added_by-option input:checked + label .checked-icon,
.ratios-option input:checked + label .checked-icon,
.ratings-option input:checked + label .checked-icon,
.preset_posted_date .date_posted-option input:checked + label .checked-icon{
.preset_posted_date .date_posted-option input:checked + label .checked-icon,
.preset_created_date .date_created-option input:checked + label .checked-icon{
display: block;
}
.filter-date_posted-form,
.filter-date_created-form,
.filter-album-form {
width: 400px;
}
@@ -440,7 +453,8 @@
display:flex
}
.date_posted-option label{
.date_posted-option label,
.date_created-option label{
display: flex;
flex-direction: row;
align-items: baseline;
@@ -449,35 +463,43 @@
margin-left:-1px;
}
.custom_posted_date .date_posted-option label{
.custom_posted_date .date_posted-option label,
.custom_created_date .date_created-option label{
width:100%;
}
.date_posted-option .accordion-toggle{
.date_posted-option .accordion-toggle,
.date_created-option .accordion-toggle{
padding:5px;
rotate:90deg;
}
.date_posted-option .accordion-toggle:hover{
.date_posted-option .accordion-toggle:hover,
.date_created-option .accordion-toggle:hover{
color:#ff7700;
cursor:pointer;
}
.date_posted-option.month{
.date_posted-option.month,
.date_created-option.month{
margin-left:15px;
display:none;
}
.date_posted-option.day{
.date_posted-option.day,
.date_created-option.day{
margin-left:30px;
margin-right:10px;
display:none;
}
.date_posted-option .show-child .accordion-toggle::before {
.date_posted-option .show-child .accordion-toggle::before,
.date_created-option .show-child .accordion-toggle::before {
transform: rotate(90deg);
}
.custom_posted_date{
.custom_posted_date,
.custom_created_date{
display:none;
}
@@ -485,21 +507,25 @@
display:block!important;
}
.custom_posted_date_toggle{
.custom_posted_date_toggle,
.custom_created_date_toggle{
cursor:pointer;
}
.date_posted-option .custom_posted_date_toggle{
.date_posted-option .custom_posted_date_toggle,
.date_created-option .custom_created_date_toggle{
padding: 5px 0;
border-top: .3px solid #aaa;
border-bottom: .3px solid #aaa;
}
.custom_posted_date_toggle .gallery-icon-up-open:before{
.custom_posted_date_toggle .gallery-icon-up-open:before,
.custom_created_date_toggle .gallery-icon-up-open:before{
rotate: -90deg;
}
.custom_posted_date.custom_posted_date_toggle{
.custom_posted_date.custom_posted_date_toggle,
.custom_created_date.custom_created_date_toggle{
position:absolute;
}
themes/default/js/mcs.js
+199 -2
View File
@@ -187,7 +187,7 @@ $(document).ready(function () {
$(".custom_posted_date .date_posted-option input").change(function() {
var parentOption = $(this).parent()
if(true == $(this).prop("checked")){
if($(this).is(":checked")){
// Toggle tick icon on selected date in custom list
$(this).siblings('label').find('.checked-icon').show();
@@ -276,6 +276,133 @@ $(document).ready(function () {
empty_filters_list.push(PS_params.date_posted_custom);
}
// Setup Date creation filter
if (global_params.fields.date_created) {
$(".filter-date_created").css("display", "flex");
$(".filter-manager-controller.date_created").prop("checked", true);
if (global_params.fields.date_created.preset != null && global_params.fields.date_created.preset != "") {
// If filter is used and not empty check preset date option
$("#date_created-" + global_params.fields.date_created.preset).prop("checked", true);
date_created_str = $('.date_created-option label#'+ global_params.fields.date_created.preset +' .date-period').text();
// if option is custom check custom dates
if ('custom' == global_params.fields.date_created.preset && global_params.fields.date_created.custom != null)
{
date_created_str = '';
var customArray = global_params.fields.date_created.custom
$(customArray).each(function( index ) {
var customValue = this.substring(1, $(this).length);
$("#date_created_"+customValue).prop("checked", true).addClass('selected');
$("#date_created_"+customValue).siblings('label').find('.checked-icon').show();
date_created_str += $('.date_created-option label#'+ customValue +' .date-period').text()
if($(global_params.fields.date_created.custom).length > 1 && index != $(customArray).length-1)
{
date_created_str += ', ';
}
});
}
// change badge label if filter not empty
$(".filter-date_created").addClass("filter-filled");
$(".filter.filter-date_created .search-words").text(date_created_str);
}
$(".filter-date_created .filter-actions .clear").on('click', function () {
updateFilters('date_created', 'add');
$(".date_created-option input").prop('checked', false);
$(".date_created-option input").trigger('change');
// $('.date_created-option input').removeAttr('disabled');
// $('.date_created-option input').removeClass('grey-icon');
});
// Disable possiblity for user to select custom option, its gets selected programtically later on
$("#date_created_custom").attr('disabled', 'disabled');
// Handle toggle between preset and custom options
$(".custom_created_date_toggle").on("click", function (e) {
$('.custom_created_date').toggle()
$('.preset_created_date').toggle()
});
// Handle accoridan features in custom options
$(".custom_created_date .accordion-toggle").on("click", function (e) {
var clickedOption = $(this).parent();
$(clickedOption).toggleClass('show-child');
if('year' == $(this).data('type'))
{
$(clickedOption).parent().find('.date_created-option.month').toggle();
}
else if('month' == $(this).data('type'))
{
$(clickedOption).parent().find('.date_created-option.day').toggle();
}
});
// On custom date input select
$(".custom_created_date .date_created-option input").change(function() {
var parentOption = $(this).parent()
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')
}
// if this is selected then disable selecting children, and display grey tick
// Used to select custom in preset list if dates are selected
if($('.custom_created_date input:checked').length > 0)
{
$("#date_created-custom").prop('checked', true);
$('.preset_created_date input').attr('disabled', 'disabled');
}
else{
$("#date_created-custom").prop('checked', false);
$('.preset_created_date input').removeAttr('disabled');
}
});
// Used to select custom in preset list if dates are selected
if($('.custom_created_date input:checked').length > 0)
{
$("#date_created-custom").prop('checked', true);
$('.preset_created_date input').attr('disabled', 'disabled');
}
else{
$("#date_created-custom").prop('checked', false);
$('.preset_created_date input').removeAttr('disabled');
}
PS_params.date_created_preset = global_params.fields.date_created.preset != '' ? global_params.fields.date_created.preset : '';
PS_params.date_created_custom = global_params.fields.date_created.custom != '' ? global_params.fields.date_created.custom : '';
empty_filters_list.push(PS_params.date_created_preset);
empty_filters_list.push(PS_params.date_created_custom);
}
// Setup album filter
if (global_params.fields.cat) {
$(".filter-album").css("display", "flex");
@@ -620,7 +747,7 @@ $(document).ready(function () {
exclude_params = ['search_id', 'allwords_mode', 'allwords_fields', 'tags_mode', 'categories_withsubs'];
for (const key in PS_params) {
if (!exclude_params.includes(key)) {
if("date_posted_custom" == key)
if("date_posted_custom" == key || "date_created_custom" == key)
{
PS_params[key] = [];
}
@@ -869,6 +996,58 @@ $(document).ready(function () {
}
});
/**
* Filter Date created
*/
$(".filter-date_created").on("click", function (e) {
if ($(".filter-form").has(e.target).length != 0 ||
$(e.target).hasClass("filter-form")) {
return;
}
$(".filter-date_created-form").toggle(0, function () {
if ($(this).is(':visible'))
{
$(".filter-date_created").addClass("show-filter-dropdown");
}
else
{
$(".filter-date_created").removeClass("show-filter-dropdown");
var presetValue = $(".preset_created_date .date_created-option input:checked").val();
global_params.fields.date_created.preset = presetValue;
PS_params.date_created_preset = presetValue != null ? presetValue : "";
if ('custom' == presetValue)
{
var customDates = [];
$(".custom_created_date .date_created-option input:checked").each(function(){
customDates.push($(this).val());
});
global_params.fields.date_created.custom = customDates;
PS_params.date_created_custom = customDates.length > 0 ? customDates : "";
}
}
});
});
$(".filter-date_created .filter-validate").on("click", function () {
$(".filter-date_created").trigger("click");
performSearch(PS_params, true);
});
$(".filter-date_created .filter-actions .delete").on("click", function () {
updateFilters('date_created', 'del');
performSearch(PS_params, true);
if (!$(".filter-date_created").hasClass("filter-filled")) {
$(".filter-date_created").hide();
$(".filter-manager-controller.date").prop("checked", false);
}
});
/**
* Filter Album
*/
@@ -1344,6 +1523,24 @@ function updateFilters(filterName, mode) {
}
break;
case 'date_created':
if (mode == 'add') {
global_params.fields['date_created'] = {};
global_params.fields.date_created.preset = '';
global_params.fields.date_created.custom = [];
PS_params.date_created_preset = '';
PS_params.date_created_custom = [];
} else if (mode == 'del') {
delete global_params.fields.date_created.preset;
delete global_params.fields.date_created.custom;
delete PS_params.date_created_preset;
delete PS_params.date_created_custom;
}
break;
case 'filesize':
if (mode == 'add') {
global_params.fields.filesize_min = '';
themes/default/template/include/search_filters.inc.tpl
+105 -2
View File
@@ -114,6 +114,10 @@ const prefix_icon = 'gallery-icon-';
<input data-wid='date_posted' class="filter-manager-controller date_posted" type="checkbox"/>
<span class="mcs-icon gallery-icon-calendar-plus">{'Post date'|@translate}</span>
</label>
<label>
<input data-wid='date_created' class="filter-manager-controller date_created" type="checkbox"/>
<span class="mcs-icon gallery-icon-calendar">{'Creation date'|@translate}</span>
</label>
<label>
<input data-wid='album' class="filter-manager-controller album" type="checkbox"/>
<span class="mcs-icon gallery-icon-album">{'Album'|@translate}</span>
@@ -262,8 +266,8 @@ const prefix_icon = 'gallery-icon-';
</div>
{/if}
{* For pst date *}
{if isset($DATE_POSTED)}
{* For post date *}
{if isset($DATE_POSTED) or isset($LIST_DATE_POSTED)}
<div class="filter filter-date_posted">
<span class="mcs-icon gallery-icon-calendar-plus filter-icon"></span>
<span class="search-words">{'Post date'|@translate}</span>
@@ -359,6 +363,105 @@ const prefix_icon = 'gallery-icon-';
</div>
{/if}
{* For creation date *}
{if isset($DATE_CREATED) or isset($LIST_DATE_CREATED)}
<div class="filter filter-date_created">
<span class="mcs-icon gallery-icon-calendar filter-icon"></span>
<span class="search-words">{'Creation date'|@translate}</span>
<span class="filter-arrow gallery-icon-up-open"></span>
<div class="filter-form filter-date_created-form">
<div class="filter-form-title gallery-icon-calendar">{'Creation date'|@translate}</div>
<div class="filter-actions">
<span class="delete mcs-icon gallery-icon-trash" title="{'Delete'|@translate}"></span>
<span class="clear mcs-icon gallery-icon-arrow-rotate-left" title="{'Clear'|@translate}"></span>
</div>
<div class="date_created-option-container">
<div class="preset_created_date">
{foreach from=$DATE_CREATED item=date_created key=k}
<div class="date_created-option">
<input type="radio" id="date_created-{$k}" value={$k} name="date_created-period">
<label for="date_created-{$k}" id="{$k}">
<span class="mcs-icon gallery-icon-checkmark checked-icon"></span>
<span class="date-period">{$date_created.label}</span>
<span class="date_created-badge">{$date_created.counter}</span>
</label>
</div>
{/foreach}
<div class="date_created-option">
<input type="radio" id="date_created-custom" value="custom" name="date_created-period">
<label for="date_created_custom" class="custom_created_date_toggle">
<span class="mcs-icon gallery-icon-checkmark checked-icon"></span>
<span class="date-period">{'Custom'|translate}</span>
</label>
</div>
</div>
<div class="custom_created_date">
{foreach from=$LIST_DATE_CREATED key=y item=year}
<div class="date_created-option year" id="container_{$y}">
<div class="year_input">
<input type="checkbox" id="date_created_{$y}" value='y{$y}'>
<i class="gallery-icon-up-open accordion-toggle" data-type='year'></i>
<label for="date_created_{$y}" id="{$y}">
<span class="date-period">{$year.label}</span>
<span class="date_created-badge">{$year.count}</span>
<span class="mcs-icon gallery-icon-checkmark checked-icon"></span>
</label>
</div>
<div class="months_container">
{foreach from=$year.months key=m item=month}
<div class="date_created-option month" id="container_{$m}">
<div class="month_input">
<input type="checkbox" id="date_created_{$m}" value='m{$m}'>
<i class="gallery-icon-up-open accordion-toggle" data-type='month'></i>
<label for="date_created_{$m}" id="{$m}">
<span class="date-period">{$month.label}</span>
<span class="date_created-badge">{$month.count}</span>
<span class="mcs-icon gallery-icon-checkmark checked-icon"></span>
</label>
</div>
<div class="days_container">
{foreach from=$month.days key=d item=day}
<div class="date_created-option day" id="container_{$d}">
<input type="checkbox" id="date_created_{$d}" value='d{$d}'>
<label for="date_created_{$d}" id="{$d}">
<span class="date-period">{$day.label}</span>
<span class="date_created-badge">{$day.count}</span>
<span class="mcs-icon gallery-icon-checkmark checked-icon"></span>
</label>
</div>
{/foreach}
</div>
</div>
{/foreach}
</div>
</div>
{/foreach}
</div>
</div>
<div>
<div class="custom_created_date custom_created_date_toggle">
<i class="gallery-icon-up-open"></i>
<span>{'Previous'|translate}</span>
</div>
<div class="filter-validate">
<i class="loading gallery-icon-spin6 animate-spin"></i>
<span class="validate-text">{'Validate'|@translate}</span>
</div>
</div>
</div>
</div>
{/if}
<div class="filter filter-album">
<span class="mcs-icon gallery-icon-album filter-icon"></span>
<span class="search-words"></span>