tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #896 from tainacan/feature/893 

Adds option to display filters horizontally instead of sidebar. $893
This commit is contained in:
Mateus Machado Luna 2024-06-13 18:08:53 -03:00 committed by GitHub
parent 90d9d9c700 fbc3bc11db
commit d7b2112787
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 568 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/css/tainacan-gutenberg-block-faceted-search.css
View File

@ -55,6 +55,24 @@
flex-wrap: nowrap;
flex-direction: row;
flex: 1 0 auto; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters {
flex-direction: column; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters {
flex-direction: row;
flex: 0 1 100%;
flex-wrap: wrap;
padding: 18px 12px 6px 12px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filters-heading {
margin-right: 90%;
top: -0.5em;
left: 0.5em; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filters-heading + .fake-link {
margin-right: 95%;
margin-left: 12px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filter {
margin: 6px 12px;
display: inline-flex;
width: 16.666%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
@ -64,7 +82,7 @@
display: flex;
flex-direction: column;
width: 80%;
margin: 5% 12%; }
margin: 5% 8%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-text {
margin: 4px 0;
width: 35%;

2
src/assets/css/tainacan-gutenberg-block-faceted-search.css.map
View File

File diff suppressed because one or more lines are too long

8
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -512,6 +512,9 @@ class Theme_Helper {
* @type string $default_view_mode The default view mode
* @type bool $is_forced_view_mode Ignores user prefs to always render the choosen default view mode
* @type string[] $enabled_view_modes The list os enable view modes to display
* @type bool $should_not_hide_filters_on_mobile Disables the default behavior of automatically collapsing the filters inside a modal when in small screen sizes
* @type bool $display_filters_horizontally Display the filters in an horizontal panel above search control instead of a sidebar
* @type bool $hide_collapse_all_filters_button Hides the button that collapses all filters inside the filters panel
* @return string The HTML div to be used for rendering the items list vue component
*/
public function search_shortcode($args) {
@ -617,7 +620,10 @@ class Theme_Helper {
'data-start-with-filters-hidden' => true,
'data-filters-as-modal' => true,
'data-show-inline-view-mode-options' => true,
'data-show-fullscreen-with-view-modes' => true
'data-show-fullscreen-with-view-modes' => true,
'data-should-not-hide-filters-on-mobile' => true,
'data-display-filters-horizontally' => true,
'data-hide-collapse-all-filters-button' => true
]
];

2
src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue
View File

@ -159,7 +159,7 @@
@media screen and (min-width: 769px) and (max-width: 1500px) {
flex-wrap: wrap;
align-items: center;
align-items: stretch;
height: 60px;
}

13
src/views/admin/components/search/filters-items-list.vue
View File

@ -16,9 +16,11 @@
</h3>
<button
v-if="!isLoadingFilters &&
((filters.length >= 0 &&
isRepositoryLevel) || filters.length > 0)"
v-if="!hideCollapseAllFiltersButton &&
!isLoadingFilters && (
( filters.length >= 0 && isRepositoryLevel ) ||
filters.length > 0
)"
aria-controls="filters-items-list"
:aria-expanded="!collapseAll"
class="link-style collapse-all"
@ -33,7 +35,7 @@
</span>
</button>
<br>
<br v-if="!hideCollapseAllFiltersButton">
<filters-tags-list
v-if="filtersAsModal && hasFiltered"
@ -293,7 +295,8 @@
filtersAsModal: Boolean,
hasFiltered: Boolean,
isLoadingItems: Boolean,
isMobileScreen: false
isMobileScreen: false,
hideCollapseAllFiltersButton: false
},
emits: [
'update-is-loading-items-state'

6
src/views/admin/scss/_filters-menu-modal.scss
View File

@ -36,6 +36,12 @@
}
}
&.horizontal-filters {
.modal-content {
padding: calc(var(--tainacan-container-padding) - 12px) var(--tainacan-one-column) var(--tainacan-container-padding) var(--tainacan-one-column);
}
}
@media screen and (max-width: 768px) {
&:not(.filters-menu-modal) {

12
src/views/gutenberg-blocks/blocks/faceted-search/block.json
View File

@ -212,6 +212,18 @@
"collectionOrderByType": {
"type": "string",
"default": ""
},
"shouldNotHideFiltersOnMobile": {
"type": "boolean",
"default": false
},
"displayFiltersHorizontally": {
"type": "boolean",
"default": false
},
"hideColllapseAllFiltersButton": {
"type": "boolean",
"default": false
}
},
"supports": {

321
src/views/gutenberg-blocks/blocks/faceted-search/deprecated.js
View File

@ -1,6 +1,327 @@
const { useBlockProps } = wp.blockEditor;
export default [
/* Deprecated due to the creation of horizontal questions */
{
"attributes": {
"termId": {
"type": "string",
"default": null
},
"taxonomyId": {
"type": "string",
"default": null
},
"collectionId": {
"type": "string",
"default": null
},
"defaultViewMode": {
"type": "string",
"default": "masonry"
},
"enabledViewModes": {
"type": "array",
"default": []
},
"collectionDefaultViewMode": {
"type": "string",
"default": "masonry"
},
"collectionEnabledViewModes": {
"type": "array",
"default": []
},
"hideFilters": {
"type": "boolean",
"default": false
},
"hideHideFiltersButton": {
"type": "boolean",
"default": false
},
"hideSearch": {
"type": "boolean",
"default": false
},
"hideAdvancedSearch": {
"type": "boolean",
"default": false
},
"hideDisplayedMetadataButton": {
"type": "boolean",
"default": false
},
"hideSortingArea": {
"type": "boolean",
"default": false
},
"hideSortByButton": {
"type": "boolean",
"default": false
},
"hideItemsThumbnail": {
"type": "boolean",
"default": false
},
"hideExposersButton": {
"type": "boolean",
"default": false
},
"hideItemsPerPageButton": {
"type": "boolean",
"default": false
},
"defaultItemsPerPage": {
"type": "number",
"default": 12
},
"hideGoToPageButton": {
"type": "boolean",
"default": false
},
"hidePaginationArea": {
"type": "boolean",
"default": false
},
"showFiltersButtonInsideSearchControl": {
"type": "boolean",
"default": false
},
"startWithFiltersHidden": {
"type": "boolean",
"default": false
},
"filtersAsModal": {
"type": "boolean",
"default": false
},
"showInlineViewModeOptions": {
"type": "boolean",
"default": false
},
"showFullscreenWithViewModes": {
"type": "boolean",
"default": false
},
"listType": {
"type": "string",
"default": ""
},
"isCollectionModalOpen": {
"type": "boolean",
"default": false
},
"isTermModalOpen": {
"type": "boolean",
"default": false
},
"backgroundColor": {
"type": "string",
"default": "#ffffff"
},
"baseFontSize": {
"type": "number",
"default": 16
},
"filtersAreaWidth": {
"type": "number",
"default": 20
},
"inputColor": {
"type": "string",
"default": "#1d1d1d"
},
"inputBackgroundColor": {
"type": "string",
"default": "#ffffff"
},
"inputBorderColor": {
"type": "string",
"default": "#dbdbdb"
},
"labelColor": {
"type": "string",
"default": "#373839"
},
"infoColor": {
"type": "string",
"default": "#505253"
},
"headingColor": {
"type": "string",
"default": "#000000"
},
"skeletonColor": {
"type": "string",
"default": "#eeeeee"
},
"itemBackgroundColor": {
"type": "string",
"default": "#ffffff"
},
"itemHoverBackgroundColor": {
"type": "string",
"default": "#f2f2f2"
},
"itemHeadingHoverBackgroundColor": {
"type": "string",
"default": "#dbdbdb"
},
"primaryColor": {
"type": "string",
"default": "#d9eced"
},
"secondaryColor": {
"type": "string",
"default": "#187181"
},
"order": {
"type": "string",
"default": "ASC"
},
"orderBy": {
"type": "string",
"default": "date"
},
"orderByMeta": {
"type": "string",
"default": ""
},
"orderByType": {
"type": "string",
"default": ""
},
"collectionOrderBy": {
"type": "string",
"default": "date"
},
"collectionOrderByMeta": {
"type": "string",
"default": ""
},
"collectionOrderByType": {
"type": "string",
"default": ""
}
},
save: function({ attributes }) {
const {
termId,
taxonomyId,
collectionId,
defaultViewMode,
enabledViewModes,
collectionDefaultViewMode,
collectionEnabledViewModes,
hideDisplayedMetadataButton,
hideSortingArea,
hideFilters,
hideHideFiltersButton,
hideSearch,
hideAdvancedSearch,
hideSortByButton,
hideItemsThumbnail,
hidePaginationArea,
hideExposersButton,
hideItemsPerPageButton,
defaultItemsPerPage,
hideGoToPageButton,
showFiltersButtonInsideSearchControl,
startWithFiltersHidden,
filtersAsModal,
showInlineViewModeOptions,
showFullscreenWithViewModes,
listType,
backgroundColor,
baseFontSize,
filtersAreaWidth,
inputColor,
inputBackgroundColor,
inputBorderColor,
labelColor,
infoColor,
headingColor,
skeletonColor,
itemBackgroundColor,
itemHoverBackgroundColor,
itemHeadingHoverBackgroundColor,
primaryColor,
secondaryColor,
order,
orderBy,
orderByMeta,
orderByType,
collectionOrderBy,
collectionOrderByMeta,
collectionOrderByType
} = attributes;
let updatedListType = '' + listType;
if (updatedListType === '' && collectionId)
updatedListType = 'collection';
else if (updatedListType === '' && termId && taxonomyId)
updatedListType = 'term';
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = useBlockProps.save();
return <div
style={{
'font-size': baseFontSize + 'px',
'--tainacan-base-font-size': baseFontSize + 'px',
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
'--tainacan-label-color': labelColor,
'--tainacan-info-color': infoColor,
'--tainacan-heading-color': headingColor,
'--tainacan-skeleton-color': skeletonColor,
'--tainacan-item-background-color': itemBackgroundColor,
'--tainacan-item-hover-background-color': itemHoverBackgroundColor,
'--tainacan-item-heading-hover-background-color': itemHeadingHoverBackgroundColor,
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
{ ...blockProps }>
<main
id="tainacan-items-page"
data-module="faceted-search"
data-term-id={ updatedListType == 'term' ? termId : null }
data-taxonomy={ updatedListType == 'term' ? 'tnc_tax_' + taxonomyId : null }
data-collection-id={ updatedListType == 'collection' ? collectionId : null }
data-default-view-mode={ defaultViewMode != 'none' ? defaultViewMode : (updatedListType == 'collection' ? collectionDefaultViewMode : (hideItemsThumbnail ? 'table' : 'masonry') ) }
data-is-forced-view-mode={ defaultViewMode == 'none' ? 'true' : 'false' }
data-enabled-view-modes={ enabledViewModes ? enabledViewModes.toString() : '' }
data-hide-filters = { hideFilters.toString() }
data-hide-hide-filters-button= { hideHideFiltersButton.toString() }
data-hide-search = { hideSearch.toString() }
data-hide-advanced-search = { hideAdvancedSearch.toString() }
data-hide-displayed-metadata-button = { hideDisplayedMetadataButton.toString() }
data-hide-pagination-area = { hidePaginationArea.toString() }
data-hide-sorting-area = { hideSortingArea.toString() }
data-hide-items-thumbnail = { hideItemsThumbnail ? hideItemsThumbnail.toString() : 'false' }
data-hide-sort-by-button = { hideSortByButton.toString() }
data-hide-exposers-button = { hideExposersButton.toString() }
data-hide-items-per-page-button = { hideItemsPerPageButton.toString() }
data-default-items-per-page = { defaultItemsPerPage }
data-hide-go-to-page-button = { hideGoToPageButton.toString() }
data-show-filters-button-inside-search-control = { showFiltersButtonInsideSearchControl.toString() }
data-start-with-filters-hidden = { startWithFiltersHidden.toString() }
data-filters-as-modal = { filtersAsModal.toString() }
data-show-inline-view-mode-options = { showInlineViewModeOptions.toString() }
data-show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() }
data-default-order = { order ? order : 'ASC' }
data-default-orderby = { updatedListType == 'collection' ? (collectionOrderBy ? collectionOrderBy : 'date') : (orderBy ? orderBy : 'date') }
data-default-orderby-meta = { updatedListType == 'collection' ? (collectionOrderByMeta ? collectionOrderByMeta : '') : (orderByMeta ? orderByMeta : '') }
data-default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') } >
</main>
</div>
}
},
/* Deprecated during Vue 3 migration to prepend attributes with data- */
{
"attributes": {

40
src/views/gutenberg-blocks/blocks/faceted-search/edit.js
View File

@ -76,7 +76,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
orderByType,
collectionOrderBy,
collectionOrderByMeta,
collectionOrderByType
collectionOrderByType,
shouldNotHideFiltersOnMobile,
displayFiltersHorizontally,
hideColllapseAllFiltersButton
} = attributes;
// Gets blocks props from hook
@ -89,7 +92,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
if ( enabledViewModes === null || !enabledViewModes.length )
enabledViewModes = Object.keys(tainacan_plugin.registered_view_modes);
console.log('edit', collectionOrderByMeta);
const fontSizes = [
{
name: __( 'Tiny', 'tainacan' ),
@ -204,7 +207,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
else
return;
}
return ( listType == 'preview' ?
<div className={className}>
<img
@ -497,6 +500,16 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
setAttributes({ startWithFiltersHidden: isChecked });
}
}
/>
<ToggleControl
label={__('Should not hide filters even on mobile', 'tainacan')}
help={ shouldNotHideFiltersOnMobile || shouldNotHideFiltersOnMobile === undefined ? __('Toggle to keep filters area visible even on small screen sizes.', 'tainacan') : __('Automatically hide filters area on small screen sizes inside a modal', 'tainacan') }
checked={ shouldNotHideFiltersOnMobile && !filtersAsModal }
onChange={ ( isChecked ) => {
shouldNotHideFiltersOnMobile = isChecked;
setAttributes({ shouldNotHideFiltersOnMobile: isChecked });
}
}
/>
<ToggleControl
label={__('Filters as a Modal', 'tainacan')}
@ -508,6 +521,24 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}
}
/>
<ToggleControl
label={__('Display filters horizontally', 'tainacan')}
checked={ displayFiltersHorizontally }
onChange={ ( isChecked ) => {
displayFiltersHorizontally = isChecked;
setAttributes({ displayFiltersHorizontally: isChecked });
}
}
/>
<ToggleControl
label={__('Hide "Collapse all" filters button', 'tainacan')}
checked={ hideColllapseAllFiltersButton }
onChange={ ( isChecked ) => {
hideColllapseAllFiltersButton = isChecked;
setAttributes({ hideColllapseAllFiltersButton: isChecked });
}
}
/>
</PanelBody>
<PanelBody
@ -866,7 +897,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
!hideExposersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
}
</div>
<div className="below-search-control">
<div className={ 'below-search-control' + (displayFiltersHorizontally ? ' horizontal-filters' : '') }>
{ !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span className="fake-hide-button"><div className="fake-icon"></div></span> : null }
{
!hideFilters && !filtersAsModal && !startWithFiltersHidden ?
@ -876,6 +907,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}}
className="filters">
<div className="fake-filters-heading"></div>
{ !hideColllapseAllFiltersButton ? <span className="fake-link"></span> : null }
{ Array(2).fill().map( () => {
return <div className="fake-filter">
<span className="fake-text"></span>

10
src/views/gutenberg-blocks/blocks/faceted-search/save.js
View File

@ -49,7 +49,9 @@ export default function({ attributes }) {
orderByType,
collectionOrderBy,
collectionOrderByMeta,
collectionOrderByType
collectionOrderByType,
shouldNotHideFiltersOnMobile,
displayFiltersHorizontally
} = attributes;
let updatedListType = '' + listType;
@ -58,7 +60,7 @@ export default function({ attributes }) {
updatedListType = 'collection';
else if (updatedListType === '' && termId && taxonomyId)
updatedListType = 'term';
console.log('save', updatedListType, collectionOrderByMeta)
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = useBlockProps.save();
@ -112,7 +114,9 @@ export default function({ attributes }) {
data-default-order = { order ? order : 'ASC' }
data-default-orderby = { updatedListType == 'collection' ? (collectionOrderBy ? collectionOrderBy : 'date') : (orderBy ? orderBy : 'date') }
data-default-orderby-meta = { updatedListType == 'collection' ? (collectionOrderByMeta ? collectionOrderByMeta : '') : (orderByMeta ? orderByMeta : '') }
data-default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') } >
data-default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') }
data-should-not-hide-filters-on-mobile = { shouldNotHideFiltersOnMobile ? shouldNotHideFiltersOnMobile.toString() : 'false' }
data-display-filters-horizontally = { displayFiltersHorizontally ? displayFiltersHorizontally.toString() : 'false' } >
</main>
</div>
};

30
src/views/gutenberg-blocks/blocks/faceted-search/style.scss
View File

@ -56,6 +56,33 @@
flex-direction: row;
flex: 1 0 auto;
&.horizontal-filters {
flex-direction: column;
.filters {
flex-direction: row;
flex: 0 1 100%;
flex-wrap: wrap;
padding: 18px 12px 6px 12px;
.fake-filters-heading {
margin-right: 90%;
top: -0.5em;
left: 0.5em;
}
.fake-filters-heading + .fake-link {
margin-right: 95%;
margin-left: 12px;
}
.fake-filter {
margin: 6px 12px;
display: inline-flex;
width: 16.666%;
}
}
}
.filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
@ -66,7 +93,8 @@
display: flex;
flex-direction: column;
width: 80%;
margin: 5% 12%;
margin: 5% 8%;
.fake-text {
margin: 4px 0;
width: 35%;

60
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss
View File

@ -94,6 +94,10 @@
bottom: 0;
transition: top ease-in 0.75s, bottom ease-in 0.75s, position ease-in 0.75s;
&.horizontal-filters {
max-width: 100%;
}
@media screen and (max-width: 768px) {
padding: 0;
z-index: 99999;
@ -125,6 +129,12 @@
.modal-close {
display: none;
}
&.horizontal-filters {
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
}
}
}
@ -156,6 +166,52 @@
}
}
&.has-horizontal-filters {
.items-list-area {
max-width: 100%;
}
#filters-modal.horizontal-filters {
overflow: visible;
.modal-content,
.filters-components-list {
overflow: visible;
width: 100%;
max-width: 100% !important;
margin: 0;
}
.filters-components-list {
margin-bottom: 0;
& > div {
display: inline-block;
vertical-align: text-top;
}
.filter-item-forms {
width: 100%;
min-width: 272px;
break-inside: avoid;
display: inline-block;
vertical-align: text-top;
margin-bottom: 12px;
}
@media screen and (min-width: 769px) {
& > div:not(:last-child) {
margin-right: 2.25em;
}
.filter-item-forms {
width: 272px;
}
.filter-item-forms:not(:last-child) {
margin-right: 2.25em;
}
}
}
}
}
@media screen and (max-width: 768px) {
&.is-filters-menu-open {
@ -167,10 +223,6 @@
width: 100%;
}
#filter-menu-compress-button {
display: none;
}
.filters-menu {
padding-top: 0;

5
src/views/gutenberg-blocks/blocks/faceted-search/theme.js
View File

@ -131,7 +131,10 @@ export default (element) => {
startWithFiltersHidden: isParameterTrue(getDataAttribute(blockElement, 'start-with-filters-hidden')),
filtersAsModal: isParameterTrue(getDataAttribute(blockElement, 'filters-as-modal')),
showInlineViewModeOptions: isParameterTrue(getDataAttribute(blockElement, 'show-inline-view-mode-options')),
showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes'))
showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes')),
shouldNotHideFiltersOnMobile: isParameterTrue(getDataAttribute(blockElement, 'should-not-hide-filters-on-mobile')),
displayFiltersHorizontally: isParameterTrue(getDataAttribute(blockElement, 'display-filters-horizontally')),
hideCollapseAllFiltersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-collapse-all-filters-button')),
}),
});

70
src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
View File

@ -41,12 +41,19 @@
}"
aria-controls="filters-modal"
:aria-expanded="isFiltersModalActive"
:class="hideHideFiltersButton ? 'is-hidden-tablet' : ''"
:class="{
'is-hidden-tablet': !shouldNotHideFiltersOnMobile && hideHideFiltersButton,
'is-hidden': shouldNotHideFiltersOnMobile && hideHideFiltersButton
}"
:aria-label="!isFiltersModalActive ? $i18n.get('label_show_filters') : $i18n.get('label_hide_filters')"
@click="isFiltersModalActive = !isFiltersModalActive">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowleft' : isFiltersModalActive, 'tainacan-icon-arrowright' : !isFiltersModalActive }"
:class="{
'tainacan-icon-arrowdown': isFiltersModalActive && displayFiltersHorizontally,
'tainacan-icon-arrowleft': isFiltersModalActive && !displayFiltersHorizontally,
'tainacan-icon-arrowright' : !isFiltersModalActive
}"
class="tainacan-icon tainacan-icon-1-25em" />
</span>
<span class="text is-hidden-tablet">{{ $i18n.get('filters') }}</span>
@ -406,7 +413,45 @@
<!-- SIDEBAR WITH FILTERS -->
<template v-if="!hideFilters">
<template v-if="!filtersAsModal && shouldNotHideFiltersOnMobile">
<div
v-if="isFiltersModalActive"
id="filters-modal"
ref="filters-modal"
role="region"
:class="'tainacan-modal tainacan-form filters-menu' + (displayFiltersHorizontally ? ' horizontal-filters' : '')">
<div class="animation-content modal-content">
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_before']"
class="faceted-search-hook faceted-search-hook-filters-before"
v-html="hooks['filters_before']" />
<filters-items-list
id="filters-items-list"
:is-loading-items="isLoadingItems"
:taxonomy="taxonomy"
:collection-id="collectionId + ''"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="false"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
:hide-collapse-all-filters-button="hideCollapseAllFiltersButton"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_after']"
class="faceted-search-hook faceted-search-hook-filters-after"
v-html="hooks['filters_after']" />
</div>
</div>
</template>
<b-modal
v-else
id="filters-modal"
ref="filters-modal"
v-model="isFiltersModalActive"
@ -415,10 +460,10 @@
:auto-focus="filtersAsModal"
:trap-focus="filtersAsModal"
full-screen
:custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')"
:custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '') + (displayFiltersHorizontally ? ' horizontal-filters' : '')"
:can-cancel="hideHideFiltersButton || !filtersAsModal ? ['x', 'outside'] : ['x', 'escape', 'outside']"
:close-button-aria-label="$i18n.get('close')">
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_before']"
@ -438,6 +483,7 @@
:filters-as-modal="filtersAsModal"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
:hide-collapse-all-filters-button="hideCollapseAllFiltersButton"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<!-- JS-side hook for extra form content -->
@ -737,7 +783,10 @@
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false
showFullscreenWithViewModes: false,
shouldNotHideFiltersOnMobile: false,
displayFiltersHorizontally: false,
hideCollapseAllFiltersButton: false,
},
data() {
return {
@ -790,6 +839,7 @@
}),
wrapperClasses() {
return {
'has-horizontal-filters': this.displayFiltersHorizontally,
'is-filters-menu-open': !this.hideFilters && this.isFiltersModalActive && !this.openAdvancedSearch,
'is-filters-menu-fixed-at-top': this.isFiltersListFixedAtTop,
'is-filters-menu-fixed-at-bottom': this.isFiltersListFixedAtBottom,
@ -973,7 +1023,7 @@
this.hasAnOpenAlert = true;
},
isFiltersModalActive() {
if (this.isFiltersModalActive) {
if ( this.isFiltersModalActive ) {
setTimeout(() => {
if (this.filtersAsModal && this.$refs['filters-modal'] && this.$refs['filters-modal'].focus)
this.$refs['filters-modal'].focus();
@ -1129,9 +1179,11 @@
// Watches window resize to adjust filter's top position and compression on mobile
if (!this.hideFilters) {
if ( !this.hideFilters && !this.shouldNotHideFiltersOnMobile ) {
this.hideFiltersOnMobile();
window.addEventListener('resize', this.hideFiltersOnMobile);
} else {
this.isFiltersModalActive = !this.startWithFiltersHidden;
}
// Uses Intersection Observer o see if the top of the list is on screen and fix filters list position
@ -1589,7 +1641,7 @@
// Component
this.$emitter.off();
// Window
if (!this.hideFilters)
if ( !this.hideFilters && !this.shouldNotHideFiltersOnMobile )
window.removeEventListener('resize', this.hideFiltersOnMobile);
// $root
if (!this.hideAdvancedSearch)
@ -1925,7 +1977,7 @@
}
&:last-child {
margin-right: auto;
margin-right: 0;
}
.label {