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

Migrates faceted search block to new data- attribute strategy. #794.

This commit is contained in:
mateuswetah 2023-12-15 17:14:19 -03:00
parent ecb69eeb5e
commit a67b7f7b67
12 changed files with 3189 additions and 2969 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
package-lock.json generated
View File

@ -5982,22 +5982,20 @@
} }
}, },
"react": { "react": {
"version": "17.0.2", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
} }
}, },
"react-dom": { "react-dom": {
"version": "17.0.2", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"object-assign": "^4.1.1", "scheduler": "^0.23.0"
"scheduler": "^0.20.2"
} }
}, },
"read-pkg": { "read-pkg": {
@ -6306,12 +6304,11 @@
} }
}, },
"scheduler": { "scheduler": {
"version": "0.20.2", "version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
} }
}, },
"schema-utils": { "schema-utils": {

4
package.json
View File

@ -27,8 +27,8 @@
"node-sass": "^7.0.3", "node-sass": "^7.0.3",
"photoswipe": "^5.4.3", "photoswipe": "^5.4.3",
"qs": "^6.11.2", "qs": "^6.11.2",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"sortablejs": "^1.15.1", "sortablejs": "^1.15.1",
"sortablejs-vue3": "^1.2.11", "sortablejs-vue3": "^1.2.11",
"swiper": "^11.0.5", "swiper": "^11.0.5",

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

@ -632,19 +632,19 @@ class Theme_Helper {
// If in a tainacan taxonomy // If in a tainacan taxonomy
$term = tainacan_get_term($args); $term = tainacan_get_term($args);
if ($term) { if ($term) {
$props .= "term-id='" . $term->term_id . "' "; $props .= "data-term-id='" . $term->term_id . "' ";
$props .= "taxonomy='" . $term->taxonomy . "' "; $props .= "data-taxonomy='" . $term->taxonomy . "' ";
} }
$props .= "default-view-mode='" . $default_view_mode . "' "; $props .= "data-default-view-mode='" . $default_view_mode . "' ";
$props .= "enabled-view-modes='" . implode(',', $enabled_view_modes) . "' "; $props .= "data-enabled-view-modes='" . implode(',', $enabled_view_modes) . "' ";
$props .= "default-order='" . $default_order . "' "; $props .= "data-default-order='" . $default_order . "' ";
$props .= "default-orderby='" . (is_array($default_orderby) ? json_encode($default_orderby) : $default_orderby) . "' "; $props .= "data-default-orderby='" . (is_array($default_orderby) ? json_encode($default_orderby) : $default_orderby) . "' ";
// Passes arguments to custom props // Passes arguments to custom props
foreach ($args as $key => $value) { foreach ($args as $key => $value) {
if ($value == true || $value == 'true') { if ($value == true || $value == 'true') {
$props .= str_replace("_", "-", $key) . "='" . $value . "' "; $props .= 'data-' . str_replace("_", "-", $key) . "='" . $value . "' ";
} }
} }
@ -652,32 +652,32 @@ class Theme_Helper {
'div' => [ 'div' => [
'id' => true, 'id' => true,
'data-module' => true, 'data-module' => true,
'collection-id' => true, 'data-collection-id' => true,
'term-id' => true, 'data-term-id' => true,
'taxonomy' => true, 'data-taxonomy' => true,
'default-view-mode' => true, 'data-default-view-mode' => true,
'is-forced-view-mode' => true, 'data-is-forced-view-mode' => true,
'enabled-view-modes' => true, 'data-enabled-view-modes' => true,
'default-order' => true, 'data-default-order' => true,
'default-orderby' => true, 'data-default-orderby' => true,
'hide-filters' => true, 'data-hide-filters' => true,
'hide-hide-filters-button' => true, 'data-hide-hide-filters-button' => true,
'hide-search' => true, 'data-hide-search' => true,
'hide-advanced-search' => true, 'data-hide-advanced-search' => true,
'hide-displayed-metadata-button' => true, 'data-hide-displayed-metadata-button' => true,
'hide-sorting-area' => true, 'data-hide-sorting-area' => true,
'hide-items-thumbnail' => true, 'data-hide-items-thumbnail' => true,
'hide-sort-by-button' => true, 'data-hide-sort-by-button' => true,
'hide-exposers-button' => true, 'data-hide-exposers-button' => true,
'hide-items-per-page-button' => true, 'data-hide-items-per-page-button' => true,
'hide-go-to-page-button' => true, 'data-hide-go-to-page-button' => true,
'hide-pagination-area' => true, 'data-hide-pagination-area' => true,
'default-items-per-page' => true, 'data-default-items-per-page' => true,
'show-filters-button-inside-search-control' => true, 'data-show-filters-button-inside-search-control' => true,
'start-with-filters-hidden' => true, 'data-start-with-filters-hidden' => true,
'filters-as-modal' => true, 'data-filters-as-modal' => true,
'show-inline-view-mode-options' => true, 'data-show-inline-view-mode-options' => true,
'show-fullscreen-with-view-modes' => true 'data-show-fullscreen-with-view-modes' => true
] ]
]; ];

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

@ -1,4 +1,328 @@
const { useBlockProps } = wp.blockEditor;
export default [ export default [
/* Deprecated during Vue 3 migration to prepend attributes with data- */
{
"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';
console.log('deprecation 1', updatedListType, collectionOrderByMeta)
// 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"
term-id={ updatedListType == 'term' ? termId : null }
taxonomy={ updatedListType == 'term' ? 'tnc_tax_' + taxonomyId : null }
collection-id={ updatedListType == 'collection' ? collectionId : null }
default-view-mode={ defaultViewMode != 'none' ? defaultViewMode : (updatedListType == 'collection' ? collectionDefaultViewMode : (hideItemsThumbnail ? 'table' : 'masonry') ) }
is-forced-view-mode={ defaultViewMode == 'none' ? 'true' : 'false' }
enabled-view-modes={ enabledViewModes ? enabledViewModes.toString() : '' }
hide-filters = { hideFilters.toString() }
hide-hide-filters-button= { hideHideFiltersButton.toString() }
hide-search = { hideSearch.toString() }
hide-advanced-search = { hideAdvancedSearch.toString() }
hide-displayed-metadata-button = { hideDisplayedMetadataButton.toString() }
hide-pagination-area = { hidePaginationArea.toString() }
hide-sorting-area = { hideSortingArea.toString() }
hide-items-thumbnail = { hideItemsThumbnail ? hideItemsThumbnail.toString() : 'false' }
hide-sort-by-button = { hideSortByButton.toString() }
hide-exposers-button = { hideExposersButton.toString() }
hide-items-per-page-button = { hideItemsPerPageButton.toString() }
default-items-per-page = { defaultItemsPerPage }
hide-go-to-page-button = { hideGoToPageButton.toString() }
show-filters-button-inside-search-control = { showFiltersButtonInsideSearchControl.toString() }
start-with-filters-hidden = { startWithFiltersHidden.toString() }
filters-as-modal = { filtersAsModal.toString() }
show-inline-view-mode-options = { showInlineViewModeOptions.toString() }
show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() }
default-order = { order ? order : 'ASC' }
default-orderby = { updatedListType == 'collection' ? (collectionOrderBy ? collectionOrderBy : 'date') : (orderBy ? orderBy : 'date') }
default-orderby-meta = { updatedListType == 'collection' ? (collectionOrderByMeta ? collectionOrderByMeta : '') : (orderByMeta ? orderByMeta : '') }
default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') } >
</main>
</div>
}
},
/* Deprecated in version 0.20.4 due to changes on labelColor, infoColor and secondaryColor default values */ /* Deprecated in version 0.20.4 due to changes on labelColor, infoColor and secondaryColor default values */
{ {
attributes: { attributes: {
@ -261,7 +585,7 @@ export default [
updatedListType = 'collection'; updatedListType = 'collection';
else if (updatedListType === '' && termId && taxonomyId) else if (updatedListType === '' && termId && taxonomyId)
updatedListType = 'term'; updatedListType = 'term';
console.log('deprecation 2', updatedListType, collectionOrderByMeta)
return <div return <div
style={{ style={{
'font-size': baseFontSize + 'px', 'font-size': baseFontSize + 'px',

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

@ -89,7 +89,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
if ( enabledViewModes === null || !enabledViewModes.length ) if ( enabledViewModes === null || !enabledViewModes.length )
enabledViewModes = Object.keys(tainacan_plugin.registered_view_modes); enabledViewModes = Object.keys(tainacan_plugin.registered_view_modes);
console.log('edit', collectionOrderByMeta);
const fontSizes = [ const fontSizes = [
{ {
name: __( 'Tiny', 'tainacan' ), name: __( 'Tiny', 'tainacan' ),
@ -986,9 +986,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
collectionEnabledViewModes = collectionEnabledViewModes && collectionEnabledViewModes.length ? collectionEnabledViewModes : enabledViewModes; collectionEnabledViewModes = collectionEnabledViewModes && collectionEnabledViewModes.length ? collectionEnabledViewModes : enabledViewModes;
order = collectionDefaultOrder ? collectionDefaultOrder : 'ASC'; order = collectionDefaultOrder ? collectionDefaultOrder : 'ASC';
collectionOrderBy = collectionDefaultOrderBy ? collectionDefaultOrderBy : 'date'; collectionOrderBy = collectionDefaultOrderBy ? collectionDefaultOrderBy : 'date';
collectionOrderByMeta = collectionDefaultOrderByMeta ? collectionDefaultOrderByMeta : ''; collectionOrderByMeta = collectionDefaultOrderByMeta ? collectionDefaultOrderByMeta + '' : '';
collectionOrderByType = collectionDefaultOrderByType ? collectionDefaultOrderByType : ''; collectionOrderByType = collectionDefaultOrderByType ? collectionDefaultOrderByType : '';
console.log(collectionDefaultOrderByMeta)
setAttributes({ setAttributes({
collectionId: collectionId, collectionId: collectionId,
collectionDefaultViewMode: collectionDefaultViewMode, collectionDefaultViewMode: collectionDefaultViewMode,

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

@ -58,7 +58,7 @@ export default function({ attributes }) {
updatedListType = 'collection'; updatedListType = 'collection';
else if (updatedListType === '' && termId && taxonomyId) else if (updatedListType === '' && termId && taxonomyId)
updatedListType = 'term'; updatedListType = 'term';
console.log('save', updatedListType, collectionOrderByMeta)
// Gets attributes such as style, that are automatically added by the editor hook // Gets attributes such as style, that are automatically added by the editor hook
const blockProps = useBlockProps.save(); const blockProps = useBlockProps.save();
@ -85,34 +85,34 @@ export default function({ attributes }) {
<main <main
id="tainacan-items-page" id="tainacan-items-page"
data-module="faceted-search" data-module="faceted-search"
term-id={ updatedListType == 'term' ? termId : null } data-term-id={ updatedListType == 'term' ? termId : null }
taxonomy={ updatedListType == 'term' ? 'tnc_tax_' + taxonomyId : null } data-taxonomy={ updatedListType == 'term' ? 'tnc_tax_' + taxonomyId : null }
collection-id={ updatedListType == 'collection' ? collectionId : null } data-collection-id={ updatedListType == 'collection' ? collectionId : null }
default-view-mode={ defaultViewMode != 'none' ? defaultViewMode : (updatedListType == 'collection' ? collectionDefaultViewMode : (hideItemsThumbnail ? 'table' : 'masonry') ) } data-default-view-mode={ defaultViewMode != 'none' ? defaultViewMode : (updatedListType == 'collection' ? collectionDefaultViewMode : (hideItemsThumbnail ? 'table' : 'masonry') ) }
is-forced-view-mode={ defaultViewMode == 'none' ? 'true' : 'false' } data-is-forced-view-mode={ defaultViewMode == 'none' ? 'true' : 'false' }
enabled-view-modes={ enabledViewModes ? enabledViewModes.toString() : '' } data-enabled-view-modes={ enabledViewModes ? enabledViewModes.toString() : '' }
hide-filters = { hideFilters.toString() } data-hide-filters = { hideFilters.toString() }
hide-hide-filters-button= { hideHideFiltersButton.toString() } data-hide-hide-filters-button= { hideHideFiltersButton.toString() }
hide-search = { hideSearch.toString() } data-hide-search = { hideSearch.toString() }
hide-advanced-search = { hideAdvancedSearch.toString() } data-hide-advanced-search = { hideAdvancedSearch.toString() }
hide-displayed-metadata-button = { hideDisplayedMetadataButton.toString() } data-hide-displayed-metadata-button = { hideDisplayedMetadataButton.toString() }
hide-pagination-area = { hidePaginationArea.toString() } data-hide-pagination-area = { hidePaginationArea.toString() }
hide-sorting-area = { hideSortingArea.toString() } data-hide-sorting-area = { hideSortingArea.toString() }
hide-items-thumbnail = { hideItemsThumbnail ? hideItemsThumbnail.toString() : 'false' } data-hide-items-thumbnail = { hideItemsThumbnail ? hideItemsThumbnail.toString() : 'false' }
hide-sort-by-button = { hideSortByButton.toString() } data-hide-sort-by-button = { hideSortByButton.toString() }
hide-exposers-button = { hideExposersButton.toString() } data-hide-exposers-button = { hideExposersButton.toString() }
hide-items-per-page-button = { hideItemsPerPageButton.toString() } data-hide-items-per-page-button = { hideItemsPerPageButton.toString() }
default-items-per-page = { defaultItemsPerPage } data-default-items-per-page = { defaultItemsPerPage }
hide-go-to-page-button = { hideGoToPageButton.toString() } data-hide-go-to-page-button = { hideGoToPageButton.toString() }
show-filters-button-inside-search-control = { showFiltersButtonInsideSearchControl.toString() } data-show-filters-button-inside-search-control = { showFiltersButtonInsideSearchControl.toString() }
start-with-filters-hidden = { startWithFiltersHidden.toString() } data-start-with-filters-hidden = { startWithFiltersHidden.toString() }
filters-as-modal = { filtersAsModal.toString() } data-filters-as-modal = { filtersAsModal.toString() }
show-inline-view-mode-options = { showInlineViewModeOptions.toString() } data-show-inline-view-mode-options = { showInlineViewModeOptions.toString() }
show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() } data-show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() }
default-order = { order ? order : 'ASC' } data-default-order = { order ? order : 'ASC' }
default-orderby = { updatedListType == 'collection' ? (collectionOrderBy ? collectionOrderBy : 'date') : (orderBy ? orderBy : 'date') } data-default-orderby = { updatedListType == 'collection' ? (collectionOrderBy ? collectionOrderBy : 'date') : (orderBy ? orderBy : 'date') }
default-orderby-meta = { updatedListType == 'collection' ? (collectionOrderByMeta ? collectionOrderByMeta : '') : (orderByMeta ? orderByMeta : '') } data-default-orderby-meta = { updatedListType == 'collection' ? (collectionOrderByMeta ? collectionOrderByMeta : '') : (orderByMeta ? orderByMeta : '') }
default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') } > data-default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') } >
</main> </main>
</div> </div>
}; };

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

@ -1,11 +1,11 @@
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
import ThemeItemsPage from '../theme-items-page.vue'; import ThemeSearch from '../../theme.vue';
const themeRoutes = [ const themeRoutes = [
// Catch-all route to handle any path // Catch-all route to handle any path
{ {
path: '/:catchAll(.*)*', path: '/:catchAll(.*)*',
component: ThemeItemsPage, // The component where you want to respond to changes component: ThemeSearch, // The component where you want to respond to changes
} }
]; ];

1994
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -27,7 +27,7 @@ import cssVars from 'css-vars-ponyfill';
import qs from 'qs'; import qs from 'qs';
import VueBlurHash from 'another-vue3-blurhash'; import VueBlurHash from 'another-vue3-blurhash';
import ThemeItemsPage from './theme-search/theme-items-page.vue'; import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js';
import ThemeSearch from './theme.vue'; import ThemeSearch from './theme.vue';
// Remaining imports // Remaining imports
@ -53,6 +53,18 @@ import mitt from 'mitt';
// RENDER_FUNCTION: false // RENDER_FUNCTION: false
// }) // })
const isParameterTrue = function(value) {
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
}
const maybeConvertFromJSON = function(someString) {
try {
return JSON.parse(someString);
} catch(error) {
return someString;
}
}
export default (element) => { export default (element) => {
function renderTainacanItemsListComponent() { function renderTainacanItemsListComponent() {
@ -63,39 +75,62 @@ export default (element) => {
// Mount only if the div exists and it is not already mounted // Mount only if the div exists and it is not already mounted
if ( blockElement && blockElement.classList && !blockElement.classList.contains('has-mounted') ) { if ( blockElement && blockElement.classList && !blockElement.classList.contains('has-mounted') ) {
// Filters logic
const possibleHideFilters = isParameterTrue(getDataAttribute(blockElement,'hide-filters'));
// View Modes Logic
const registeredViewModes =
( tainacan_plugin && tainacan_plugin.registered_view_modes && tainacan_plugin.registered_view_modes.length ) ?
tainacan_plugin.registered_view_modes :
[ 'table', 'cards', 'records', 'masonry', 'slideshow', 'list', 'map' ];
// At first, we consider that all registered view modes are included.
let possibleViewModes = registeredViewModes;
if ( getDataAttribute(blockElement, 'enabled-view-modes') != undefined )
possibleViewModes = getDataAttribute(blockElement, 'enabled-view-modes').split(',');
// View Mode settings
let possibleDefaultViewMode = 'masonry';
if ( getDataAttribute(blockElement, 'default-view-mode') != undefined )
possibleDefaultViewMode = getDataAttribute(blockElement, 'default-view-mode');
if ( possibleViewModes.indexOf(possibleDefaultViewMode) < 0 )
possibleViewModes.push(possibleDefaultViewMode);
const VueItemsList = createApp({ const VueItemsList = createApp({
el: '#tainacan-items-page', render: () => h(ThemeSearch, {
data: () => { collectionId: getDataAttribute(blockElement, 'collection-id'),
return { termId: getDataAttribute(blockElement, 'term-id'),
termId: '', taxonomy: getDataAttribute(blockElement, 'taxonomy'),
taxonomy: '', defaultOrder: getDataAttribute(blockElement, 'default-order', 'ASC'),
collectionId: '', defaultOrderBy: (() => {
defaultViewMode: '', const defaultOrderByValue = maybeConvertFromJSON(getDataAttribute(blockElement, 'default-orderby', 'date'));
defaultOrder: 'ASC', return defaultOrderByValue === 'creation_date' ? 'date' : defaultOrderByValue;
defaultOrderBy: 'date', })(),
defaultOrderByMeta: '', defaultOrderByMeta: getDataAttribute(blockElement, 'default-orderby-meta'),
defaultOrderByType: '', defaultOrderByType: maybeConvertFromJSON(getDataAttribute(blockElement, 'default-orderby-type')),
isForcedViewMode: false, defaultViewMode: possibleDefaultViewMode,
enabledViewModes: {}, enabledViewModes: possibleViewModes,
defaultItemsPerPage: 12, isForcedViewMode: new Boolean(getDataAttribute(blockElement, 'is-forced-view-mode')),
hideFilters: false, hideFilters: possibleHideFilters,
hideHideFiltersButton: false, hideHideFiltersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-hide-filters-button')),
hideSearch: false, hideSearch: isParameterTrue(getDataAttribute(blockElement, 'hide-search')),
hideAdvancedSearch: false, hideAdvancedSearch: isParameterTrue(getDataAttribute(blockElement, 'hide-advanced-search')),
hideDisplayedMetadataButton: false, hideDisplayedMetadataButton: isParameterTrue(getDataAttribute(blockElement, 'hide-displayed-metadata-button')),
hideSortByButton: false, hideSortingArea: isParameterTrue(getDataAttribute(blockElement, 'hide-sorting-area')),
hideSortingArea: false, hideItemsThumbnail: isParameterTrue(getDataAttribute(blockElement, 'hide-items-thumbnail')),
hideItemsThumbnail: false, hideSortByButton: isParameterTrue(getDataAttribute(blockElement, 'hide-sort-by-button')),
hideItemsPerPageButton: false, hideExposersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-exposers-button')),
hideGoToPageButton: false, hideItemsPerPageButton: isParameterTrue(getDataAttribute(blockElement, 'hide-items-per-page-button')),
hidePaginationArea: false, hideGoToPageButton: isParameterTrue(getDataAttribute(blockElement, 'hide-go-to-page-button')),
showFiltersButtonInsideSearchControl: false, hidePaginationArea: isParameterTrue(getDataAttribute(blockElement, 'hide-pagination-area')),
startWithFiltersHidden: false, defaultItemsPerPage: new Number(getDataAttribute(blockElement, 'default-items-per-page', 12)),
filtersAsModal: false, showFiltersButtonInsideSearchControl: isParameterTrue(getDataAttribute(blockElement, 'show-filters-button-inside-search-control')),
showInlineViewModeOptions: false, startWithFiltersHidden: isParameterTrue(getDataAttribute(blockElement, 'start-with-filters-hidden')),
showFullscreenWithViewModes: false 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'))
}),
beforeMount() { beforeMount() {
// Loads params if passed previously // Loads params if passed previously
if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) { if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
@ -105,91 +140,22 @@ export default (element) => {
this.$route.query[key] = existingQueries[key]; this.$route.query[key] = existingQueries[key];
} }
// Collection or Term source settings
if (blockElement.attributes['collection-id'] != undefined)
this.collectionId = blockElement.attributes['collection-id'].value;
if (blockElement.attributes['term-id'] != undefined)
this.termId = blockElement.attributes['term-id'].value;
if (blockElement.attributes['taxonomy'] != undefined)
this.taxonomy = blockElement.attributes['taxonomy'].value;
// Sorting options
if (blockElement.attributes['default-order'] != undefined)
this.defaultOrder = blockElement.attributes['default-order'].value;
if (blockElement.attributes['default-orderby'] != undefined) {
this.defaultOrderBy = this.maybeConvertFromJSON(blockElement.attributes['default-orderby'].value);
this.defaultOrderBy === 'creation_date' ? 'date' : this.defaultOrderBy;
}
if (blockElement.attributes['default-orderby-meta'] != undefined)
this.defaultOrderByMeta = blockElement.attributes['default-orderby-meta'].value;
if (blockElement.attributes['default-orderby-type'] != undefined)
this.defaultOrderByType = this.maybeConvertFromJSON(blockElement.attributes['default-orderby-type'].value);
// View modes settings
if (blockElement.attributes['is-forced-view-mode'] != undefined)
this.isForcedViewMode = new Boolean(blockElement.attributes['is-forced-view-mode'].value);
this.defaultViewMode = possibleDefaultViewMode;
this.enabledViewModes = possibleViewModes;
// Options related to hidding elements
this.hideFilters = possibleHideFilters;
if (blockElement.attributes['hide-hide-filters-button'] != undefined)
this.hideHideFiltersButton = this.isParameterTrue('hide-hide-filters-button');
if (blockElement.attributes['hide-search'] != undefined)
this.hideSearch = this.isParameterTrue('hide-search');
if (blockElement.attributes['hide-advanced-search'] != undefined)
this.hideAdvancedSearch = this.isParameterTrue('hide-advanced-search');
if (blockElement.attributes['hide-displayed-metadata-button'] != undefined)
this.hideDisplayedMetadataButton = this.isParameterTrue('hide-displayed-metadata-button');
if (blockElement.attributes['hide-sorting-area'] != undefined)
this.hideSortingArea = this.isParameterTrue('hide-sorting-area');
if (blockElement.attributes['hide-items-thumbnail'] != undefined)
this.hideItemsThumbnail = this.isParameterTrue('hide-items-thumbnail');
if (blockElement.attributes['hide-sort-by-button'] != undefined)
this.hideSortByButton = this.isParameterTrue('hide-sort-by-button');
if (blockElement.attributes['hide-exposers-button'] != undefined)
this.hideExposersButton = this.isParameterTrue('hide-exposers-button');
if (blockElement.attributes['hide-items-per-page-button'] != undefined)
this.hideItemsPerPageButton = this.isParameterTrue('hide-items-per-page-button');
if (blockElement.attributes['hide-go-to-page-button'] != undefined)
this.hideGoToPageButton = this.isParameterTrue('hide-go-to-page-button');
if (blockElement.attributes['hide-pagination-area'] != undefined)
this.hidePaginationArea = this.isParameterTrue('hide-pagination-area');
// Other Tweaks
if (blockElement.attributes['default-items-per-page'] != undefined)
this.defaultItemsPerPage = Number(blockElement.attributes['default-items-per-page'].value);
if (blockElement.attributes['show-filters-button-inside-search-control'] != undefined)
this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control');
if (blockElement.attributes['start-with-filters-hidden'] != undefined)
this.startWithFiltersHidden = this.isParameterTrue('start-with-filters-hidden');
if (blockElement.attributes['filters-as-modal'] != undefined)
this.filtersAsModal = this.isParameterTrue('filters-as-modal');
if (blockElement.attributes['show-inline-view-mode-options'] != undefined)
this.showInlineViewModeOptions = this.isParameterTrue('show-inline-view-mode-options');
if (blockElement.attributes['show-fullscreen-with-view-modes'] != undefined)
this.showFullscreenWithViewModes = this.isParameterTrue('show-fullscreen-with-view-modes');
}, },
methods: { created() {
isParameterTrue(parameter) { blockElement.setAttribute('aria-live', 'polite');
const value = blockElement.attributes[parameter].value; blockElement.classList.add('theme-items-list'); // This used to be on the component, but as Vue now do not renders the component inside a div...
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
},
maybeConvertFromJSON(someString) {
try {
return JSON.parse(someString);
} catch(error) {
return someString;
}
}
}, },
render: () => h(ThemeSearch) mounted() {
blockElement.classList.add('has-mounted');
}
}); });
VueItemsList.use(store); VueItemsList.use(store);
VueItemsList.use(routerTheme); VueItemsList.use(routerTheme);
if ( !possibleHideFilters )
VueItemsList.component('filters-items-list', defineAsyncComponent(() => import('../../../admin/components/search/filters-items-list.vue')));
/* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */ /* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */
if (typeof window.tainacan_extra_plugins != "undefined") { if (typeof window.tainacan_extra_plugins != "undefined") {
for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins)) { for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins)) {
@ -244,40 +210,6 @@ export default (element) => {
} }
} }
// Filters logic
let possibleHideFilters = false;
if ( blockElement.attributes['hide-filters'] != undefined ) {
const hideFiltersValue = blockElement.attributes['hide-filters'].value;
possibleHideFilters = ( hideFiltersValue == true || hideFiltersValue == 'true' || hideFiltersValue == '1' || hideFiltersValue == 1 ) ? true : false;
}
if ( !possibleHideFilters ) {
VueItemsList.component('filters-items-list', defineAsyncComponent(() => import('../../../admin/components/search/filters-items-list.vue')));
}
/* Main page component */
VueItemsList.component('theme-items-page', ThemeItemsPage);
VueItemsList.component('theme-search', ThemeSearch);
// View Modes Logic
const registeredViewModes =
( tainacan_plugin && tainacan_plugin.registered_view_modes && tainacan_plugin.registered_view_modes.length ) ?
tainacan_plugin.registered_view_modes :
[ 'table', 'cards', 'records', 'masonry', 'slideshow', 'list', 'map' ];
// At first, we consider that all registered view modes are included.
let possibleViewModes = registeredViewModes;
if ( blockElement.attributes['enabled-view-modes'] != undefined )
possibleViewModes = blockElement.attributes['enabled-view-modes'].value.split(',');
// View Mode settings
let possibleDefaultViewMode = 'masonry';
if ( blockElement.attributes['default-view-mode'] != undefined)
possibleDefaultViewMode = blockElement.attributes['default-view-mode'].value;
if ( possibleViewModes.indexOf(possibleDefaultViewMode) < 0 )
possibleViewModes.push(possibleDefaultViewMode);
// Logic for dynamic importing Tainacan oficial view modes only if they are necessary // Logic for dynamic importing Tainacan oficial view modes only if they are necessary
possibleViewModes.forEach(viewModeSlug => { possibleViewModes.forEach(viewModeSlug => {
if ( registeredViewModes.indexOf(viewModeSlug) >= 0 ) if ( registeredViewModes.indexOf(viewModeSlug) >= 0 )
@ -289,7 +221,7 @@ export default (element) => {
VueItemsList.use(eventBusSearch); VueItemsList.use(eventBusSearch);
VueItemsList.mount('#tainacan-items-page'); VueItemsList.mount('#' + blockElement.id);
// Initialize Ponyfill for Custom CSS properties // Initialize Ponyfill for Custom CSS properties
cssVars({ cssVars({

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

File diff suppressed because it is too large Load Diff

3
src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
View File

@ -95,6 +95,9 @@ export default (element) => {
} }
})(), })(),
}), }),
created() {
blockElement.classList.add('tainacan-item-submission-form'); // This used to be on the component, but as Vue now do not renders the component inside a div...
},
mounted() { mounted() {
blockElement.classList.add('has-mounted'); blockElement.classList.add('has-mounted');
} }

1412
src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue
View File

File diff suppressed because it is too large Load Diff