Migrates faceted search block to new data- attribute strategy. #794.
This commit is contained in:
mateuswetah
parent
ecb69eeb5e
commit
a67b7f7b67
|
|
@ -5982,22 +5982,20 @@
|
|||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
|
||||
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"scheduler": "^0.20.2"
|
||||
"scheduler": "^0.23.0"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
|
|
@ -6306,12 +6304,11 @@
|
|||
}
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
|
||||
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
"node-sass": "^7.0.3",
|
||||
"photoswipe": "^5.4.3",
|
||||
"qs": "^6.11.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sortablejs": "^1.15.1",
|
||||
"sortablejs-vue3": "^1.2.11",
|
||||
"swiper": "^11.0.5",
|
||||
|
|
|
|||
|
|
@ -632,19 +632,19 @@ class Theme_Helper {
|
|||
// If in a tainacan taxonomy
|
||||
$term = tainacan_get_term($args);
|
||||
if ($term) {
|
||||
$props .= "term-id='" . $term->term_id . "' ";
|
||||
$props .= "taxonomy='" . $term->taxonomy . "' ";
|
||||
$props .= "data-term-id='" . $term->term_id . "' ";
|
||||
$props .= "data-taxonomy='" . $term->taxonomy . "' ";
|
||||
}
|
||||
|
||||
$props .= "default-view-mode='" . $default_view_mode . "' ";
|
||||
$props .= "enabled-view-modes='" . implode(',', $enabled_view_modes) . "' ";
|
||||
$props .= "default-order='" . $default_order . "' ";
|
||||
$props .= "default-orderby='" . (is_array($default_orderby) ? json_encode($default_orderby) : $default_orderby) . "' ";
|
||||
$props .= "data-default-view-mode='" . $default_view_mode . "' ";
|
||||
$props .= "data-enabled-view-modes='" . implode(',', $enabled_view_modes) . "' ";
|
||||
$props .= "data-default-order='" . $default_order . "' ";
|
||||
$props .= "data-default-orderby='" . (is_array($default_orderby) ? json_encode($default_orderby) : $default_orderby) . "' ";
|
||||
|
||||
// Passes arguments to custom props
|
||||
foreach ($args as $key => $value) {
|
||||
if ($value == true || $value == 'true') {
|
||||
$props .= str_replace("_", "-", $key) . "='" . $value . "' ";
|
||||
$props .= 'data-' . str_replace("_", "-", $key) . "='" . $value . "' ";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -652,32 +652,32 @@ class Theme_Helper {
|
|||
'div' => [
|
||||
'id' => true,
|
||||
'data-module' => true,
|
||||
'collection-id' => true,
|
||||
'term-id' => true,
|
||||
'taxonomy' => true,
|
||||
'default-view-mode' => true,
|
||||
'is-forced-view-mode' => true,
|
||||
'enabled-view-modes' => true,
|
||||
'default-order' => true,
|
||||
'default-orderby' => true,
|
||||
'hide-filters' => true,
|
||||
'hide-hide-filters-button' => true,
|
||||
'hide-search' => true,
|
||||
'hide-advanced-search' => true,
|
||||
'hide-displayed-metadata-button' => true,
|
||||
'hide-sorting-area' => true,
|
||||
'hide-items-thumbnail' => true,
|
||||
'hide-sort-by-button' => true,
|
||||
'hide-exposers-button' => true,
|
||||
'hide-items-per-page-button' => true,
|
||||
'hide-go-to-page-button' => true,
|
||||
'hide-pagination-area' => true,
|
||||
'default-items-per-page' => true,
|
||||
'show-filters-button-inside-search-control' => true,
|
||||
'start-with-filters-hidden' => true,
|
||||
'filters-as-modal' => true,
|
||||
'show-inline-view-mode-options' => true,
|
||||
'show-fullscreen-with-view-modes' => true
|
||||
'data-collection-id' => true,
|
||||
'data-term-id' => true,
|
||||
'data-taxonomy' => true,
|
||||
'data-default-view-mode' => true,
|
||||
'data-is-forced-view-mode' => true,
|
||||
'data-enabled-view-modes' => true,
|
||||
'data-default-order' => true,
|
||||
'data-default-orderby' => true,
|
||||
'data-hide-filters' => true,
|
||||
'data-hide-hide-filters-button' => true,
|
||||
'data-hide-search' => true,
|
||||
'data-hide-advanced-search' => true,
|
||||
'data-hide-displayed-metadata-button' => true,
|
||||
'data-hide-sorting-area' => true,
|
||||
'data-hide-items-thumbnail' => true,
|
||||
'data-hide-sort-by-button' => true,
|
||||
'data-hide-exposers-button' => true,
|
||||
'data-hide-items-per-page-button' => true,
|
||||
'data-hide-go-to-page-button' => true,
|
||||
'data-hide-pagination-area' => true,
|
||||
'data-default-items-per-page' => true,
|
||||
'data-show-filters-button-inside-search-control' => true,
|
||||
'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
|
||||
]
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,328 @@
|
|||
const { useBlockProps } = wp.blockEditor;
|
||||
|
||||
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 */
|
||||
{
|
||||
attributes: {
|
||||
|
|
@ -261,7 +585,7 @@ export default [
|
|||
updatedListType = 'collection';
|
||||
else if (updatedListType === '' && termId && taxonomyId)
|
||||
updatedListType = 'term';
|
||||
|
||||
console.log('deprecation 2', updatedListType, collectionOrderByMeta)
|
||||
return <div
|
||||
style={{
|
||||
'font-size': baseFontSize + 'px',
|
||||
|
|
|
|||
|
|
@ -89,7 +89,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' ),
|
||||
|
|
@ -986,9 +986,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
|
|||
collectionEnabledViewModes = collectionEnabledViewModes && collectionEnabledViewModes.length ? collectionEnabledViewModes : enabledViewModes;
|
||||
order = collectionDefaultOrder ? collectionDefaultOrder : 'ASC';
|
||||
collectionOrderBy = collectionDefaultOrderBy ? collectionDefaultOrderBy : 'date';
|
||||
collectionOrderByMeta = collectionDefaultOrderByMeta ? collectionDefaultOrderByMeta : '';
|
||||
collectionOrderByMeta = collectionDefaultOrderByMeta ? collectionDefaultOrderByMeta + '' : '';
|
||||
collectionOrderByType = collectionDefaultOrderByType ? collectionDefaultOrderByType : '';
|
||||
console.log(collectionDefaultOrderByMeta)
|
||||
setAttributes({
|
||||
collectionId: collectionId,
|
||||
collectionDefaultViewMode: collectionDefaultViewMode,
|
||||
|
|
|
|||
|
|
@ -58,7 +58,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();
|
||||
|
||||
|
|
@ -85,34 +85,34 @@ export default function({ attributes }) {
|
|||
<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 : '') } >
|
||||
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>
|
||||
};
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import ThemeItemsPage from '../theme-items-page.vue';
|
||||
import ThemeSearch from '../../theme.vue';
|
||||
|
||||
const themeRoutes = [
|
||||
// Catch-all route to handle any path
|
||||
{
|
||||
path: '/:catchAll(.*)*',
|
||||
component: ThemeItemsPage, // The component where you want to respond to changes
|
||||
component: ThemeSearch, // The component where you want to respond to changes
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,7 +27,7 @@ import cssVars from 'css-vars-ponyfill';
|
|||
import qs from 'qs';
|
||||
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';
|
||||
|
||||
// Remaining imports
|
||||
|
|
@ -53,6 +53,18 @@ import mitt from 'mitt';
|
|||
// 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) => {
|
||||
|
||||
function renderTainacanItemsListComponent() {
|
||||
|
|
@ -63,39 +75,62 @@ export default (element) => {
|
|||
// Mount only if the div exists and it is not already 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({
|
||||
el: '#tainacan-items-page',
|
||||
data: () => {
|
||||
return {
|
||||
termId: '',
|
||||
taxonomy: '',
|
||||
collectionId: '',
|
||||
defaultViewMode: '',
|
||||
defaultOrder: 'ASC',
|
||||
defaultOrderBy: 'date',
|
||||
defaultOrderByMeta: '',
|
||||
defaultOrderByType: '',
|
||||
isForcedViewMode: false,
|
||||
enabledViewModes: {},
|
||||
defaultItemsPerPage: 12,
|
||||
hideFilters: false,
|
||||
hideHideFiltersButton: false,
|
||||
hideSearch: false,
|
||||
hideAdvancedSearch: false,
|
||||
hideDisplayedMetadataButton: false,
|
||||
hideSortByButton: false,
|
||||
hideSortingArea: false,
|
||||
hideItemsThumbnail: false,
|
||||
hideItemsPerPageButton: false,
|
||||
hideGoToPageButton: false,
|
||||
hidePaginationArea: false,
|
||||
showFiltersButtonInsideSearchControl: false,
|
||||
startWithFiltersHidden: false,
|
||||
filtersAsModal: false,
|
||||
showInlineViewModeOptions: false,
|
||||
showFullscreenWithViewModes: false
|
||||
}
|
||||
},
|
||||
render: () => h(ThemeSearch, {
|
||||
collectionId: getDataAttribute(blockElement, 'collection-id'),
|
||||
termId: getDataAttribute(blockElement, 'term-id'),
|
||||
taxonomy: getDataAttribute(blockElement, 'taxonomy'),
|
||||
defaultOrder: getDataAttribute(blockElement, 'default-order', 'ASC'),
|
||||
defaultOrderBy: (() => {
|
||||
const defaultOrderByValue = maybeConvertFromJSON(getDataAttribute(blockElement, 'default-orderby', 'date'));
|
||||
return defaultOrderByValue === 'creation_date' ? 'date' : defaultOrderByValue;
|
||||
})(),
|
||||
defaultOrderByMeta: getDataAttribute(blockElement, 'default-orderby-meta'),
|
||||
defaultOrderByType: maybeConvertFromJSON(getDataAttribute(blockElement, 'default-orderby-type')),
|
||||
defaultViewMode: possibleDefaultViewMode,
|
||||
enabledViewModes: possibleViewModes,
|
||||
isForcedViewMode: new Boolean(getDataAttribute(blockElement, 'is-forced-view-mode')),
|
||||
hideFilters: possibleHideFilters,
|
||||
hideHideFiltersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-hide-filters-button')),
|
||||
hideSearch: isParameterTrue(getDataAttribute(blockElement, 'hide-search')),
|
||||
hideAdvancedSearch: isParameterTrue(getDataAttribute(blockElement, 'hide-advanced-search')),
|
||||
hideDisplayedMetadataButton: isParameterTrue(getDataAttribute(blockElement, 'hide-displayed-metadata-button')),
|
||||
hideSortingArea: isParameterTrue(getDataAttribute(blockElement, 'hide-sorting-area')),
|
||||
hideItemsThumbnail: isParameterTrue(getDataAttribute(blockElement, 'hide-items-thumbnail')),
|
||||
hideSortByButton: isParameterTrue(getDataAttribute(blockElement, 'hide-sort-by-button')),
|
||||
hideExposersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-exposers-button')),
|
||||
hideItemsPerPageButton: isParameterTrue(getDataAttribute(blockElement, 'hide-items-per-page-button')),
|
||||
hideGoToPageButton: isParameterTrue(getDataAttribute(blockElement, 'hide-go-to-page-button')),
|
||||
hidePaginationArea: isParameterTrue(getDataAttribute(blockElement, 'hide-pagination-area')),
|
||||
defaultItemsPerPage: new Number(getDataAttribute(blockElement, 'default-items-per-page', 12)),
|
||||
showFiltersButtonInsideSearchControl: isParameterTrue(getDataAttribute(blockElement, 'show-filters-button-inside-search-control')),
|
||||
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'))
|
||||
}),
|
||||
beforeMount() {
|
||||
// Loads params if passed previously
|
||||
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];
|
||||
}
|
||||
|
||||
// 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: {
|
||||
isParameterTrue(parameter) {
|
||||
const value = blockElement.attributes[parameter].value;
|
||||
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
|
||||
created() {
|
||||
blockElement.setAttribute('aria-live', 'polite');
|
||||
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...
|
||||
},
|
||||
maybeConvertFromJSON(someString) {
|
||||
try {
|
||||
return JSON.parse(someString);
|
||||
} catch(error) {
|
||||
return someString;
|
||||
mounted() {
|
||||
blockElement.classList.add('has-mounted');
|
||||
}
|
||||
}
|
||||
},
|
||||
render: () => h(ThemeSearch)
|
||||
});
|
||||
|
||||
VueItemsList.use(store);
|
||||
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 */
|
||||
if (typeof window.tainacan_extra_plugins != "undefined") {
|
||||
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
|
||||
possibleViewModes.forEach(viewModeSlug => {
|
||||
if ( registeredViewModes.indexOf(viewModeSlug) >= 0 )
|
||||
|
|
@ -289,7 +221,7 @@ export default (element) => {
|
|||
|
||||
VueItemsList.use(eventBusSearch);
|
||||
|
||||
VueItemsList.mount('#tainacan-items-page');
|
||||
VueItemsList.mount('#' + blockElement.id);
|
||||
|
||||
// Initialize Ponyfill for Custom CSS properties
|
||||
cssVars({
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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() {
|
||||
blockElement.classList.add('has-mounted');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="collectionId"
|
||||
class="tainacan-item-submission-form">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
v-model="isLoading"
|
||||
:can-cancel="false"/>
|
||||
|
||||
<template v-if="couldLoadCollection && collecionAllowsItemSubmission">
|
||||
<template v-if="collectionId && couldLoadCollection && collecionAllowsItemSubmission">
|
||||
<form
|
||||
v-if="!hasSentForm"
|
||||
v-show="!isLoading && !isSubmitting && !isUploading"
|
||||
|
|
@ -754,7 +751,6 @@
|
|||
<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue