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

Creates option to disable autohide of filters on mobile screens. #893.

This commit is contained in:
mateuswetah 2024-06-10 17:06:34 -03:00
parent 1b18647dac
commit 49f0027031
6 changed files with 389 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -212,6 +212,10 @@
"collectionOrderByType": {
"type": "string",
"default": ""
},
"shouldNotHideFiltersOnMobile": {
"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": {

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

@ -76,7 +76,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
orderByType,
collectionOrderBy,
collectionOrderByMeta,
collectionOrderByType
collectionOrderByType,
shouldNotHideFiltersOnMobile
} = attributes;
// Gets blocks props from hook
@ -89,7 +90,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 +205,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
else
return;
}
return ( listType == 'preview' ?
<div className={className}>
<img
@ -497,6 +498,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')}

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

@ -49,7 +49,8 @@ export default function({ attributes }) {
orderByType,
collectionOrderBy,
collectionOrderByMeta,
collectionOrderByType
collectionOrderByType,
shouldNotHideFiltersOnMobile
} = attributes;
let updatedListType = '' + listType;
@ -58,7 +59,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 +113,8 @@ 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' } >
</main>
</div>
};

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

@ -130,7 +130,8 @@ 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'))
}),
});

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

@ -406,7 +406,44 @@
<!-- SIDEBAR WITH FILTERS -->
<template v-if="!hideFilters">
<div
v-if="!filtersAsModal && !shouldNotHideFiltersOnMobile && isFiltersModalActive"
id="filters-modal"
ref="filters-modal"
role="region"
:class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')">
<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"
@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>
<b-modal
v-else
id="filters-modal"
ref="filters-modal"
v-model="isFiltersModalActive"
@ -418,7 +455,7 @@
:custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')"
: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']"
@ -737,7 +774,8 @@
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false
showFullscreenWithViewModes: false,
shouldNotHideFiltersOnMobile: false
},
data() {
return {
@ -973,7 +1011,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,7 +1167,7 @@
// 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);
}
@ -1589,7 +1627,7 @@
// Component
this.$emitter.off();
// Window
if (!this.hideFilters)
if ( !this.hideFilters && !this.shouldNotHideFiltersOnMobile )
window.removeEventListener('resize', this.hideFiltersOnMobile);
// $root
if (!this.hideAdvancedSearch)