Migrates dynamic items list block and facets list block to new data- attrbiute strategy. #794.
This commit is contained in:
mateuswetah
parent
2c933b6192
commit
8b9bf0df95
|
|
@ -1,6 +1,428 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated during Vue 3 migration to prepend attributes with data- */
|
||||
{
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "number",
|
||||
"default": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "object",
|
||||
"default": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "string",
|
||||
"default": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"orderBy": {
|
||||
"type": "string",
|
||||
"default": "date"
|
||||
},
|
||||
"orderByMetaKey": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "string",
|
||||
"default": "#373839"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "number",
|
||||
"default": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"default": "tainacan-medium"
|
||||
}
|
||||
},
|
||||
save: function({ attributes }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
loadStrategy,
|
||||
selectedItems,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
orderBy,
|
||||
orderByMetaKey,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
image-size={ imageSize }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
order-by={ orderBy }
|
||||
order-by-meta-key={ orderByMetaKey }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated during Vue 3 migration to hiphenize order attributes */
|
||||
{
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "number",
|
||||
"default": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "object",
|
||||
"default": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "string",
|
||||
"default": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"orderBy": {
|
||||
"type": "string",
|
||||
"default": "date"
|
||||
},
|
||||
"orderByMetaKey": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "string",
|
||||
"default": "#373839"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "number",
|
||||
"default": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"default": "tainacan-medium"
|
||||
}
|
||||
},
|
||||
save: function({ attributes }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
loadStrategy,
|
||||
selectedItems,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
orderBy,
|
||||
orderByMetaKey,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
image-size={ imageSize }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
orderBy={ orderBy }
|
||||
orderByMetaKey={ orderByMetaKey }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on 0.20.4 to replace collectionBackgroundColor */
|
||||
{
|
||||
attributes: {
|
||||
|
|
|
|||
|
|
@ -35,33 +35,32 @@ export default function({ attributes }) {
|
|||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
image-size={ imageSize }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
orderBy={ orderBy }
|
||||
orderByMetaKey={ orderByMetaKey }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
data-search-url={ searchURL }
|
||||
data-selected-items={ JSON.stringify(selectedItems) }
|
||||
data-collection-id={ collectionId }
|
||||
data-show-image={ '' + showImage }
|
||||
data-show-name={ '' + showName }
|
||||
data-show-search-bar={ '' + showSearchBar }
|
||||
data-show-collection-header={ '' + showCollectionHeader }
|
||||
data-show-collection-label={ '' + showCollectionLabel }
|
||||
data-image-size={ imageSize }
|
||||
data-layout={ layout }
|
||||
data-load-strategy={ loadStrategy }
|
||||
data-mosaic-height={ mosaicHeight }
|
||||
data-mosaic-density={ mosaicDensity }
|
||||
data-mosaic-grid-rows={ mosaicGridRows }
|
||||
data-mosaic-grid-columns={ mosaicGridColumns }
|
||||
data-mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
data-mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
data-max-columns-count={ maxColumnsCount }
|
||||
data-collection-background-color={ collectionBackgroundColor }
|
||||
data-collection-text-color={ collectionTextColor }
|
||||
data-grid-margin={ gridMargin }
|
||||
data-max-items-number={ maxItemsNumber }
|
||||
data-order={ order !== undefined ? order : '' }
|
||||
data-order-by={ orderBy !== undefined ? orderBy : 'date' }
|
||||
data-order-by-meta-key={ orderByMetaKey !== undefined ? orderByMetaKey : '' }
|
||||
data-tainacan-api-root={ tainacan_blocks.root }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { createApp, h } from 'vue';
|
|||
import DynamicItemsListTheme from './theme.vue';
|
||||
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
|
||||
import VueBlurHash from 'another-vue3-blurhash';
|
||||
import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js';
|
||||
|
||||
export default (element) => {
|
||||
|
||||
|
|
@ -24,34 +25,32 @@ export default (element) => {
|
|||
const VueDynamicItemsList = createApp( {
|
||||
render() {
|
||||
return h(DynamicItemsListTheme, {
|
||||
blockId: block.id,
|
||||
searchURL: block.attributes['search-url'] != undefined ? block.attributes['search-url'].value : undefined,
|
||||
selectedItems: block.attributes['selected-items'] != undefined ? JSON.parse(block.attributes['selected-items'].value) : undefined,
|
||||
loadStrategy: block.attributes['load-strategy'] != undefined ? block.attributes['load-strategy'].value : undefined,
|
||||
collectionId: block.attributes['collection-id'] != undefined ? block.attributes['collection-id'].value : undefined,
|
||||
showImage: block.attributes['show-image'] != undefined ? block.attributes['show-image'].value == 'true' : true,
|
||||
showName: block.attributes['show-name'] != undefined ? block.attributes['show-name'].value == 'true' : true,
|
||||
layout: block.attributes['layout'] != undefined ? block.attributes['layout'].value : undefined,
|
||||
gridMargin: block.attributes['grid-margin'] != undefined ? Number(block.attributes['grid-margin'].value) : undefined,
|
||||
mosaicDensity: block.attributes['mosaic-density'] != undefined ? Number(block.attributes['mosaic-density'].value) : undefined,
|
||||
mosaicHeight: block.attributes['mosaic-height'] != undefined ? Number(block.attributes['mosaic-height'].value) : undefined,
|
||||
mosaicGridRows: block.attributes['mosaic-grid-rows'] != undefined ? Number(block.attributes['mosaic-grid-rows'].value) : undefined,
|
||||
mosaicGridColumns: block.attributes['mosaic-grid-columns'] != undefined ? Number(block.attributes['mosaic-grid-columns'].value) : undefined,
|
||||
mosaicItemFocalPointX: block.attributes['mosaic-item-focal-point-x'] != undefined ? Number(block.attributes['mosaic-item-focal-point-x'].value) : undefined,
|
||||
mosaicItemFocalPointY: block.attributes['mosaic-item-focal-point-y'] != undefined ? Number(block.attributes['mosaic-item-focal-point-y'].value) : undefined,
|
||||
maxColumnsCount: block.attributes['max-columns-count'] != undefined ? block.attributes['max-columns-count'].value : 4,
|
||||
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
|
||||
maxItemsNumber: block.attributes['max-items-number'] != undefined ? block.attributes['max-items-number'].value : undefined,
|
||||
order: block.attributes['order'] != undefined ? block.attributes['order'].value : undefined,
|
||||
orderBy: block.attributes['order-by'] != undefined ? block.attributes['order-by'].value : undefined,
|
||||
orderByMetaKey: block.attributes['order-by-meta-key'] != undefined ? block.attributes['order-by-meta-key'].value : undefined,
|
||||
showSearchBar: block.attributes['show-search-bar'] != undefined ? block.attributes['show-search-bar'].value == 'true' : false,
|
||||
showCollectionHeader: block.attributes['show-collection-header'] != undefined ? block.attributes['show-collection-header'].value == 'true' : false,
|
||||
showCollectionLabel: block.attributes['show-collection-label'] != undefined ? block.attributes['show-collection-label'].value == 'true' : false,
|
||||
collectionBackgroundColor: block.attributes['collection-background-color'] != undefined ? block.attributes['collection-background-color'].value : undefined,
|
||||
collectionTextColor: block.attributes['collection-text-color'] != undefined ? block.attributes['collection-text-color'].value : undefined,
|
||||
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
|
||||
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
|
||||
searchURL: getDataAttribute(block, 'search-url'),
|
||||
selectedItems: JSON.parse(getDataAttribute(block, 'selected-items', '[]')),
|
||||
loadStrategy: getDataAttribute(block, 'load-strategy'),
|
||||
collectionId: getDataAttribute(block, 'collection-id'),
|
||||
showImage: getDataAttribute(block, 'show-image', 'true') == 'true',
|
||||
showName: getDataAttribute(block, 'show-name', 'true') == 'true',
|
||||
layout: getDataAttribute(block, 'layout'),
|
||||
gridMargin: Number(getDataAttribute(block, 'grid-margin', 0)),
|
||||
mosaicDensity: Number(getDataAttribute(block, 'mosaic-density', 5)),
|
||||
mosaicHeight: Number(getDataAttribute(block, 'mosaic-height', 40)),
|
||||
mosaicGridRows: Number(getDataAttribute(block, 'mosaic-grid-rows', 3)),
|
||||
mosaicGridColumns: Number(getDataAttribute(block, 'mosaic-grid-columns', 3)),
|
||||
mosaicItemFocalPointX: Number(getDataAttribute(block, 'mosaic-item-focal-point-x', 0.5)),
|
||||
mosaicItemFocalPointY: Number(getDataAttribute(block, 'mosaic-item-focal-point-y', 0.5)),
|
||||
maxColumnsCount: Number(getDataAttribute(block, 'max-columns-count', 4)),
|
||||
imageSize: getDataAttribute(block, 'image-size', 'tainacan-medium'),
|
||||
maxItemsNumber: Number(getDataAttribute(block, 'max-items-number', 12)),
|
||||
order: getDataAttribute(block, 'order'),
|
||||
orderBy: getDataAttribute(block, 'order-by'),
|
||||
orderByMetaKey: getDataAttribute(block, 'order-by-meta-key'),
|
||||
showSearchBar: getDataAttribute(block, 'show-search-bar', 'false') == 'true',
|
||||
showCollectionHeader: getDataAttribute(block, 'show-collection-header', 'false') == 'true',
|
||||
showCollectionLabel: getDataAttribute(block, 'show-collection-label', 'false') == 'true',
|
||||
collectionBackgroundColor: getDataAttribute(block, 'collection-background-color'),
|
||||
collectionTextColor: getDataAttribute(block, 'collection-text-color'),
|
||||
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root')
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<span
|
||||
v-if="showCollectionLabel"
|
||||
class="label">
|
||||
{{ $root.__('Collection', 'tainacan') }}
|
||||
{{ wpI18n('Collection', 'tainacan') }}
|
||||
<br>
|
||||
</span>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<button
|
||||
@click="localOrder = 'asc'; fetchItems()"
|
||||
:class="localOrder == 'asc' ? 'sorting-button-selected' : ''"
|
||||
:label="$root.__('Sort ascending', 'tainacan')">
|
||||
:label="wpI18n('Sort ascending', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<button
|
||||
@click="localOrder = 'desc'; fetchItems(); "
|
||||
:class="localOrder == 'desc' ? 'sorting-button-selected' : ''"
|
||||
:label="$root.__('Sort descending', 'tainacan')">
|
||||
:label="wpI18n('Sort descending', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
</button>
|
||||
<button
|
||||
@click="fetchItems()"
|
||||
:label="$root.__('Search', 'tainacan')"
|
||||
:label="wpI18n('Search', 'tainacan')"
|
||||
class="search-button">
|
||||
<span class="icon">
|
||||
<i>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
class="previous-button"
|
||||
v-if="paged > 1"
|
||||
@click="paged--; fetchItems()"
|
||||
:label="$root.__('Previous page', 'tainacan')">
|
||||
:label="wpI18n('Previous page', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
class="next-button"
|
||||
v-if="paged < totalItems/localMaxItemsNumber && items.length < totalItems"
|
||||
@click="paged++; fetchItems()"
|
||||
:label="$root.__('Next page', 'tainacan')">
|
||||
:label="wpI18n('Next page', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : wpI18n( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
</a>
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : wpI18n( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
</a>
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
<div
|
||||
v-else-if="!isLoading && items.length <= 0"
|
||||
class="spinner-container">
|
||||
{{ $root.__(errorMessage, 'tainacan') }}
|
||||
{{ wpI18n(errorMessage, 'tainacan') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -302,8 +302,7 @@ export default {
|
|||
showCollectionLabel: Boolean,
|
||||
collectionBackgroundColor: String,
|
||||
collectionTextColor: String,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String
|
||||
tainacanApiRoot: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -339,6 +338,9 @@ export default {
|
|||
this.fetchItems();
|
||||
},
|
||||
methods: {
|
||||
wpI18n(string, context) {
|
||||
return wp && wp.i18n ? wp.i18n.__(string, context) : string;
|
||||
},
|
||||
applySearchString: debounce(function(event) {
|
||||
|
||||
let value = event.target.value;
|
||||
|
|
@ -409,10 +411,9 @@ export default {
|
|||
queryObject.order = this.localOrder;
|
||||
else if (queryObject.order != undefined)
|
||||
this.localOrder = queryObject.order;
|
||||
else {
|
||||
queryObject.order = 'asc';
|
||||
this.localOrder = 'asc';
|
||||
}
|
||||
|
||||
if (!queryObject.order) // Avoid empty string query
|
||||
delete queryObject.order;
|
||||
|
||||
// Set up orderBy
|
||||
if (this.orderBy != undefined)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,196 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated during Vue 3 migration to prepend attributes with data- */
|
||||
{
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionSlug": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"facets": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"facetsObject": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"nameInsideImage": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showItemsCount": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showLoadMore": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"layout": {
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"cloudRate": {
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "number",
|
||||
"default": 24
|
||||
},
|
||||
"metadatumId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"metadatumType": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"facetsRequestSource": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"maxFacetsNumber": {
|
||||
"type": "number",
|
||||
"value": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "object",
|
||||
"value": {}
|
||||
},
|
||||
"searchstring": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"parentTerm": {
|
||||
"type": "number",
|
||||
"default": null
|
||||
},
|
||||
"isParentTermModalOpen": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"appendChildTerms": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"childFacetsObject": {
|
||||
"type": "object",
|
||||
"default": {}
|
||||
},
|
||||
"linkTermFacetsToTermPage": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"isLoadingChildTerms": {
|
||||
"type": "number",
|
||||
"default": null
|
||||
},
|
||||
"itemsCountStyle": {
|
||||
"type": "string",
|
||||
"default": "default"
|
||||
},
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"default": "tainacan-medium"
|
||||
}
|
||||
},
|
||||
save: function({ attributes }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
collectionSlug,
|
||||
parentTerm,
|
||||
showImage,
|
||||
nameInsideImage,
|
||||
showItemsCount,
|
||||
showLoadMore,
|
||||
layout,
|
||||
cloudRate,
|
||||
gridMargin,
|
||||
metadatumId,
|
||||
metadatumType,
|
||||
maxFacetsNumber,
|
||||
maxColumnsCount,
|
||||
showSearchBar,
|
||||
linkTermFacetsToTermPage,
|
||||
appendChildTerms,
|
||||
itemsCountStyle,
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="facets-list"
|
||||
metadatum-id={ metadatumId }
|
||||
metadatum-type={ metadatumType }
|
||||
collection-id={ collectionId }
|
||||
collection-slug={ collectionSlug }
|
||||
parent-term-id={ parentTerm ? parentTerm.id : undefined }
|
||||
show-image={ '' + showImage }
|
||||
name-inside-image={ nameInsideImage === true ? 'true' : 'false' }
|
||||
show-items-count={ '' + showItemsCount }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-load-more={ '' + showLoadMore }
|
||||
image-size={ imageSize }
|
||||
append-child-terms={ (appendChildTerms === true ? 'true' : 'false') }
|
||||
link-term-facets-to-term-page={ linkTermFacetsToTermPage === false ? 'false' : 'true' }
|
||||
layout={ layout }
|
||||
items-count-style={ itemsCountStyle }
|
||||
cloud-rate={ cloudRate }
|
||||
grid-margin={ gridMargin }
|
||||
max-facets-number={ maxFacetsNumber }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
tainacan-site-url={ tainacan_blocks.site_url }
|
||||
id={ 'wp-block-tainacan-facets-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.20.1 to add imageSize */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
?
|
||||
facet.entity.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
$thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize))
|
||||
"
|
||||
:alt="facet.thumbnail_alt ? facet.thumbnail_alt : (facet.label ? facet.label : $root.__('Thumbnail', 'tainacan'))">
|
||||
:alt="facet.thumbnail_alt ? facet.thumbnail_alt : (facet.label ? facet.label : wpI18n('Thumbnail', 'tainacan'))">
|
||||
<div :class=" 'facet-label-and-count' + (itemsCountStyle === 'below' ? ' is-style-facet-label-and-count--below' : '')">
|
||||
<span>{{ facet.label ? facet.label : '' }}</span>
|
||||
<span
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
class="facet-item-count"
|
||||
:style="{ display: !showItemsCount ? 'none' : '' }">
|
||||
<template v-if="itemsCountStyle === 'below'">
|
||||
{{ facet.total_items != 1 ? (facet.total_items + ' ' + $root.__('items', 'tainacan' )) : (facet.total_items + ' ' + $root.__('item', 'tainacan' )) }}
|
||||
{{ facet.total_items != 1 ? (facet.total_items + ' ' + wpI18n('items', 'tainacan' )) : (facet.total_items + ' ' + wpI18n('item', 'tainacan' )) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
({{ facet.total_items }})
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
marginTop: showSearchBar ? '1.5em' : '4px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (!showName ? ' facets-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
:class="'facets-layout-' + layout + ' facets-list-without-margin' + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<li
|
||||
:key="childFacet"
|
||||
v-for="childFacet in Number(facet.total_children)"
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
minHeight: getSkeletonHeight(),
|
||||
marginTop: layout == 'list' ? '4px' : '',
|
||||
marginLeft: layout == 'list' ? '7px' : '',
|
||||
marginBottom: layout == 'grid' && showImage ? (showName ? gridMargin + 12 : gridMargin) + 'px' : ''
|
||||
marginBottom: layout == 'grid' && showImage ? gridMargin + 'px' : ''
|
||||
}" />
|
||||
</ul>
|
||||
<template v-else>
|
||||
|
|
@ -91,7 +91,6 @@
|
|||
:child-facets-object="childFacetsObject"
|
||||
:facet="aChildTermFacet"
|
||||
:cloud-rate="cloudRate"
|
||||
:tainacan-base-url="tainacanBaseUrl"
|
||||
:layout="layout"
|
||||
:append-child-terms="appendChildTerms"
|
||||
:metadatum-type="metadatumType"
|
||||
|
|
@ -105,7 +104,7 @@
|
|||
<p
|
||||
v-else
|
||||
class="no-child-facet-found">
|
||||
{{ $root.__( 'The child terms of this facet do not contain items.', 'tainacan' ) }}
|
||||
{{ wpI18n( 'The child terms of this facet do not contain items.', 'tainacan' ) }}
|
||||
</p>
|
||||
</ul>
|
||||
</transition>
|
||||
|
|
@ -119,7 +118,6 @@ export default {
|
|||
props: {
|
||||
appendChildTerms: Boolean,
|
||||
facet: Object,
|
||||
tainacanBaseUrl: String,
|
||||
showImage: Boolean,
|
||||
showItemsCount: Boolean,
|
||||
showSearchBar: Boolean,
|
||||
|
|
@ -144,6 +142,9 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
wpI18n(string, context) {
|
||||
return wp && wp.i18n ? wp.i18n.__(string, context) : string;
|
||||
},
|
||||
displayChildTerms(facetId) {
|
||||
this.$emit('onDisplayChildTerms', facetId)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -30,28 +30,27 @@ export default function({ attributes }) {
|
|||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="facets-list"
|
||||
metadatum-id={ metadatumId }
|
||||
metadatum-type={ metadatumType }
|
||||
collection-id={ collectionId }
|
||||
collection-slug={ collectionSlug }
|
||||
parent-term-id={ parentTerm ? parentTerm.id : undefined }
|
||||
show-image={ '' + showImage }
|
||||
name-inside-image={ nameInsideImage === true ? 'true' : 'false' }
|
||||
show-items-count={ '' + showItemsCount }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-load-more={ '' + showLoadMore }
|
||||
image-size={ imageSize }
|
||||
append-child-terms={ (appendChildTerms === true ? 'true' : 'false') }
|
||||
link-term-facets-to-term-page={ linkTermFacetsToTermPage === false ? 'false' : 'true' }
|
||||
layout={ layout }
|
||||
items-count-style={ itemsCountStyle }
|
||||
cloud-rate={ cloudRate }
|
||||
grid-margin={ gridMargin }
|
||||
max-facets-number={ maxFacetsNumber }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
tainacan-site-url={ tainacan_blocks.site_url }
|
||||
data-metadatum-id={ metadatumId }
|
||||
data-metadatum-type={ metadatumType }
|
||||
data-collection-id={ collectionId }
|
||||
data-collection-slug={ collectionSlug }
|
||||
data-parent-term-id={ parentTerm ? parentTerm.id : undefined }
|
||||
data-show-image={ '' + showImage }
|
||||
data-name-inside-image={ nameInsideImage === true ? 'true' : 'false' }
|
||||
data-show-items-count={ '' + showItemsCount }
|
||||
data-show-search-bar={ '' + showSearchBar }
|
||||
data-show-load-more={ '' + showLoadMore }
|
||||
data-image-size={ imageSize }
|
||||
data-append-child-terms={ (appendChildTerms === true ? 'true' : 'false') }
|
||||
data-link-term-facets-to-term-page={ linkTermFacetsToTermPage === false ? 'false' : 'true' }
|
||||
data-layout={ layout }
|
||||
data-items-count-style={ itemsCountStyle }
|
||||
data-cloud-rate={ cloudRate }
|
||||
data-grid-margin={ gridMargin }
|
||||
data-max-facets-number={ maxFacetsNumber }
|
||||
data-max-columns-count={ maxColumnsCount }
|
||||
data-tainacan-api-root={ tainacan_blocks.root }
|
||||
data-tainacan-site-url={ tainacan_blocks.site_url }
|
||||
id={ 'wp-block-tainacan-facets-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { createApp, h } from 'vue';
|
||||
import FacetsListTheme from './theme.vue';
|
||||
import FacetsListThemeUnit from './facet-unit.vue';
|
||||
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
|
||||
import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js';
|
||||
|
||||
export default (element) => {
|
||||
|
||||
|
|
@ -14,108 +16,47 @@ export default (element) => {
|
|||
|
||||
// Checks if this carousel isn't already mounted
|
||||
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
|
||||
const blockIds = Object.values(blocks).map((block) => block.id);
|
||||
|
||||
// Creates a new Vue Instance to manage each block isolatelly
|
||||
for (let blockId of blockIds) {
|
||||
blocks.forEach((block) => {
|
||||
|
||||
// Configure Vue logic before passing it to constructor:
|
||||
let vueOptions = {
|
||||
data: () => {
|
||||
return {
|
||||
metadatumId: '',
|
||||
metadatumType: '',
|
||||
collectionId: '',
|
||||
collectionSlug: '',
|
||||
parentTermId: null,
|
||||
showImage: true,
|
||||
showItemsCount: true,
|
||||
showSearchBar: false,
|
||||
showLoadMore: false,
|
||||
nameInsideImage: false,
|
||||
linkTermFacetsToTermPage: true,
|
||||
appendChildTerms: false,
|
||||
imageSize: 'tainacan-medium',
|
||||
layout: 'grid',
|
||||
itemsCountStyle: 'default',
|
||||
cloudRate: 1,
|
||||
gridMargin: 24,
|
||||
maxFacetsNumber: 12,
|
||||
maxColumnsCount: 5,
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
tainacanSiteUrl: '',
|
||||
className: '',
|
||||
style: ''
|
||||
}
|
||||
},
|
||||
render(){
|
||||
const VueFacetsList = createApp({
|
||||
render() {
|
||||
return h(FacetsListTheme, {
|
||||
props: {
|
||||
metadatumId: this.metadatumId,
|
||||
metadatumType: this.metadatumType,
|
||||
collectionId: this.collectionId,
|
||||
collectionSlug: this.collectionSlug,
|
||||
parentTermId: this.parentTermId,
|
||||
showImage: this.showImage,
|
||||
nameInsideImage: this.nameInsideImage,
|
||||
showItemsCount: this.showItemsCount,
|
||||
showSearchBar: this.showSearchBar,
|
||||
showLoadMore: this.showLoadMore,
|
||||
layout: this.layout,
|
||||
itemsCountStyle: this.itemsCountStyle,
|
||||
cloudRate: this.cloudRate,
|
||||
gridMargin: this.gridMargin,
|
||||
imageSize: this.imageSize,
|
||||
linkTermFacetsToTermPage: this.linkTermFacetsToTermPage,
|
||||
appendChildTerms: this.appendChildTerms,
|
||||
maxFacetsNumber: this.maxFacetsNumber,
|
||||
maxColumnsCount: this.maxColumnsCount,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
tainacanSiteUrl: this.tainacanSiteUrl,
|
||||
className: this.className,
|
||||
customStyle: this.style
|
||||
}
|
||||
metadatumId: getDataAttribute(block, 'metadatum-id'),
|
||||
metadatumType: getDataAttribute(block, 'metadatum-type'),
|
||||
collectionId: getDataAttribute(block, 'collection-id'),
|
||||
collectionSlug: getDataAttribute(block, 'collection-slug'),
|
||||
appendChildTerms: getDataAttribute(block, 'append-child-terms', false) == 'true',
|
||||
parentTermId: getDataAttribute(block, 'parent-term-id'),
|
||||
showImage: getDataAttribute(block, 'show-image', true) == 'true',
|
||||
nameInsideImage: getDataAttribute(block, 'name-inside-image', false) == 'true',
|
||||
showItemsCount: getDataAttribute(block, 'show-items-count', true) == 'true',
|
||||
showSearchBar: getDataAttribute(block, 'show-search-bar', false) == 'true',
|
||||
showLoadMore: getDataAttribute(block, 'show-load-more', false) == 'true',
|
||||
layout: getDataAttribute(block, 'layout', 'grid'),
|
||||
itemsCountStyle: getDataAttribute(block, 'items-count-style', 'default'),
|
||||
cloudRate: Number(getDataAttribute(block, 'cloud-rate', 1)),
|
||||
gridMargin: Number(getDataAttribute(block, 'grid-margin', 24)),
|
||||
imageSize: getDataAttribute(block, 'image-size', 'tainacan-medium'),
|
||||
linkTermFacetsToTermPage: getDataAttribute(block, 'link-term-facets-to-term-page', true) == 'true',
|
||||
maxFacetsNumber: Number(getDataAttribute(block, 'max-facets-number', 12)),
|
||||
maxColumnsCount: Number(getDataAttribute(block, 'max-columns-count', 5)),
|
||||
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root'),
|
||||
tainacanSiteUrl: getDataAttribute(block, 'tainacan-site-url')
|
||||
});
|
||||
},
|
||||
beforeMount () {
|
||||
this.metadatumId = this.$el.attributes['metadatum-id'] != undefined ? this.$el.attributes['metadatum-id'].value : undefined;
|
||||
this.metadatumType = this.$el.attributes['metadatum-type'] != undefined ? this.$el.attributes['metadatum-type'].value : undefined;
|
||||
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
|
||||
this.collectionSlug = this.$el.attributes['collection-slug'] != undefined ? this.$el.attributes['collection-slug'].value : undefined;
|
||||
this.appendChildTerms = this.$el.attributes['append-child-terms'] != undefined ? this.$el.attributes['append-child-terms'].value == 'true' : false;
|
||||
this.parentTermId = this.$el.attributes['parent-term-id'] != undefined ? this.$el.attributes['parent-term-id'].value : undefined;
|
||||
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
|
||||
this.nameInsideImage = this.$el.attributes['name-inside-image'] != undefined ? this.$el.attributes['name-inside-image'].value == 'true' : false;
|
||||
this.showItemsCount = this.$el.attributes['show-items-count'] != undefined ? this.$el.attributes['show-items-count'].value == 'true' : true;
|
||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
this.showLoadMore = this.$el.attributes['show-load-more'] != undefined ? this.$el.attributes['show-load-more'].value == 'true' : false;
|
||||
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
|
||||
this.itemsCountStyle = this.$el.attributes['items-count-style'] != undefined ? this.$el.attributes['items-count-style'].value : undefined;
|
||||
this.cloudRate = this.$el.attributes['cloud-rate'] != undefined ? Number(this.$el.attributes['cloud-rate'].value) : undefined;
|
||||
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.linkTermFacetsToTermPage = this.$el.attributes['link-term-facets-to-term-page'] != undefined ? this.$el.attributes['link-term-facets-to-term-page'].value == 'true' : true;
|
||||
this.maxFacetsNumber = this.$el.attributes['max-facets-number'] != undefined ? this.$el.attributes['max-facets-number'].value : undefined;
|
||||
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 5;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
this.tainacanSiteUrl = this.$el.attributes['tainacan-site-url'] != undefined ? this.$el.attributes['tainacan-site-url'].value : undefined;
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
return wp.i18n.__(text, domain);
|
||||
}
|
||||
mounted() {
|
||||
block.classList.add('has-mounted');
|
||||
}
|
||||
};
|
||||
|
||||
const VueFacetsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
|
||||
});
|
||||
|
||||
VueFacetsList.use(ThumbnailHelperPlugin);
|
||||
VueFacetsList.component('facets-list-theme-unit', FacetsListThemeUnit);
|
||||
}
|
||||
|
||||
VueFacetsList.mount('#' + block.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,88 +1,116 @@
|
|||
<template>
|
||||
<div
|
||||
:style="customStyle"
|
||||
:class="className + ' has-mounted'">
|
||||
<div
|
||||
v-if="showSearchBar"
|
||||
class="facets-search-bar">
|
||||
<button
|
||||
:label="$root.__('Search', 'tainacan')"
|
||||
class="search-button">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path
|
||||
class="st0"
|
||||
d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
:value="searchString"
|
||||
@input="(value) => applySearchString(value)"
|
||||
type="text">
|
||||
</div>
|
||||
<template v-if="isLoading">
|
||||
<ul
|
||||
v-if="layout !== 'list'"
|
||||
:style="{
|
||||
gridGap: layout == 'grid' ? (gridMargin + 'px') : 'inherit',
|
||||
marginTop: showSearchBar ? '1.5em' : '4px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (!showName ? ' facets-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
v-if="showSearchBar"
|
||||
class="facets-search-bar">
|
||||
<button
|
||||
:label="wpI18n('Search', 'tainacan')"
|
||||
class="search-button">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path
|
||||
class="st0"
|
||||
d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
:value="searchString"
|
||||
@input="(value) => applySearchString(value)"
|
||||
type="text">
|
||||
</div>
|
||||
<template v-if="isLoading">
|
||||
<ul
|
||||
v-if="layout !== 'list'"
|
||||
:style="{
|
||||
gridGap: layout == 'grid' ? (gridMargin + 'px') : 'inherit',
|
||||
marginTop: showSearchBar ? '1.5em' : '4px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + 'facets-list-without-margin' + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<li
|
||||
:key="facet"
|
||||
v-for="facet in Number(maxFacetsNumber)"
|
||||
class="facet-list-item skeleton"
|
||||
:style="{
|
||||
marginBottom: layout == 'grid' && ((isMetadatumTypeRelationship || isMetadatumTypeTaxonomy) && showImage) ? gridMargin + 'px' : '',
|
||||
minHeight: getSkeletonHeight()
|
||||
}" />
|
||||
</ul>
|
||||
<ul
|
||||
v-else
|
||||
:style="{
|
||||
marginTop: showSearchBar ? '1.5em' : '4px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + ' facets-list-without-margin' + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<div
|
||||
style="margin: 2px 6px"
|
||||
v-for="column in Number(maxColumnsCount)"
|
||||
:key="column">
|
||||
<li
|
||||
v-for="facet in Math.ceil(maxFacetsNumber/maxColumnsCount)"
|
||||
:key="facet"
|
||||
v-for="facet in Number(maxFacetsNumber)"
|
||||
class="facet-list-item skeleton"
|
||||
:style="{
|
||||
marginBottom: layout == 'grid' && ((isMetadatumTypeRelationship || isMetadatumTypeTaxonomy) && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||
marginBottom: layout == 'grid' && ((isMetadatumTypeRelationship || isMetadatumTypeTaxonomy) && showImage) ? gridMargin + 'px' : '',
|
||||
minHeight: getSkeletonHeight()
|
||||
}" />
|
||||
</ul>
|
||||
<ul
|
||||
v-else
|
||||
:style="{
|
||||
marginTop: showSearchBar ? '1.5em' : '4px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (!showName ? ' facets-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<div
|
||||
style="margin: 2px 6px"
|
||||
v-for="column in Number(maxColumnsCount)"
|
||||
:key="column">
|
||||
<li
|
||||
v-for="facet in Math.ceil(maxFacetsNumber/maxColumnsCount)"
|
||||
:key="facet"
|
||||
class="facet-list-item skeleton"
|
||||
:style="{
|
||||
marginBottom: layout == 'grid' && ((isMetadatumTypeRelationship || isMetadatumTypeTaxonomy) && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||
minHeight: getSkeletonHeight()
|
||||
}" />
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
<div v-else>
|
||||
<ul
|
||||
v-if="facets.length > 0 && layout != 'list'"
|
||||
:style="{
|
||||
gridGap: layout == 'grid' ? (gridMargin + 'px') : 'inherit',
|
||||
marginTop: showSearchBar ? '1.5em' : '0px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
}" />
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
<div v-else>
|
||||
<ul
|
||||
v-if="facets.length > 0 && layout != 'list'"
|
||||
:style="{
|
||||
gridGap: layout == 'grid' ? (gridMargin + 'px') : 'inherit',
|
||||
marginTop: showSearchBar ? '1.5em' : '0px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<facets-list-theme-unit
|
||||
v-for="(facet, index) of facets"
|
||||
:key="index"
|
||||
:show-search-bar="showSearchBar"
|
||||
:show-image="showImage"
|
||||
:name-inside-image="nameInsideImage"
|
||||
:child-facets-object="childFacetsObject"
|
||||
:append-child-terms="appendChildTerms"
|
||||
:facet="facet"
|
||||
:image-size="imageSize"
|
||||
:cloud-rate="cloudRate"
|
||||
:items-count-style="itemsCountStyle"
|
||||
:layout="layout"
|
||||
:metadatum-type="metadatumType"
|
||||
:show-items-count="showItemsCount"
|
||||
:is-loading-child-terms="isloadingChildTerms"
|
||||
:link-term-facets-to-term-page="linkTermFacetsToTermPage"
|
||||
:is-metadatum-type-taxonomy="isMetadatumTypeTaxonomy"
|
||||
:is-metadatum-type-relationship="isMetadatumTypeRelationship"
|
||||
@on-display-child-terms="displayChildTerms" />
|
||||
</ul>
|
||||
<ul
|
||||
v-if="facets.length > 0 && layout == 'list'"
|
||||
:style="{
|
||||
marginTop: showSearchBar ? '1.5em' : '0px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<div
|
||||
v-for="column in Number(maxColumnsCount)"
|
||||
:key="column">
|
||||
<facets-list-theme-unit
|
||||
v-for="(facet, index) of facets"
|
||||
v-for="(facet, index) of facets.slice((column - 1) * Math.ceil(facets.length/maxColumnsCount), column * Math.ceil(facets.length/maxColumnsCount))"
|
||||
:key="index"
|
||||
:show-search-bar="showSearchBar"
|
||||
:show-image="showImage"
|
||||
|
|
@ -93,7 +121,6 @@
|
|||
:image-size="imageSize"
|
||||
:cloud-rate="cloudRate"
|
||||
:items-count-style="itemsCountStyle"
|
||||
:tainacan-base-url="tainacanBaseUrl"
|
||||
:layout="layout"
|
||||
:metadatum-type="metadatumType"
|
||||
:show-items-count="showItemsCount"
|
||||
|
|
@ -102,66 +129,33 @@
|
|||
:is-metadatum-type-taxonomy="isMetadatumTypeTaxonomy"
|
||||
:is-metadatum-type-relationship="isMetadatumTypeRelationship"
|
||||
@on-display-child-terms="displayChildTerms" />
|
||||
</ul>
|
||||
<ul
|
||||
v-if="facets.length > 0 && layout == 'list'"
|
||||
:style="{
|
||||
marginTop: showSearchBar ? '1.5em' : '0px'
|
||||
}"
|
||||
class="facets-list"
|
||||
:class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<div
|
||||
v-for="column in Number(maxColumnsCount)"
|
||||
:key="column">
|
||||
<facets-list-theme-unit
|
||||
v-for="(facet, index) of facets.slice((column - 1) * Math.ceil(facets.length/maxColumnsCount), column * Math.ceil(facets.length/maxColumnsCount))"
|
||||
:key="index"
|
||||
:show-search-bar="showSearchBar"
|
||||
:show-image="showImage"
|
||||
:name-inside-image="nameInsideImage"
|
||||
:child-facets-object="childFacetsObject"
|
||||
:append-child-terms="appendChildTerms"
|
||||
:facet="facet"
|
||||
:image-size="imageSize"
|
||||
:cloud-rate="cloudRate"
|
||||
:items-count-style="itemsCountStyle"
|
||||
:tainacan-base-url="tainacanBaseUrl"
|
||||
:layout="layout"
|
||||
:metadatum-type="metadatumType"
|
||||
:show-items-count="showItemsCount"
|
||||
:is-loading-child-terms="isloadingChildTerms"
|
||||
:link-term-facets-to-term-page="linkTermFacetsToTermPage"
|
||||
:is-metadatum-type-taxonomy="isMetadatumTypeTaxonomy"
|
||||
:is-metadatum-type-relationship="isMetadatumTypeRelationship"
|
||||
@on-display-child-terms="displayChildTerms" />
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
v-if="showLoadMore && facets.length > 0 && (facets.length < totalFacets || lastTerm != '')"
|
||||
@click="loadMore()"
|
||||
class="show-more-button"
|
||||
:label="$root.__('Show more', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="4 3 24 24">
|
||||
<path d="M 7.41,8.295 6,9.705 l 6,6 6,-6 -1.41,-1.41 -4.59,4.58 z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="spinner-container"
|
||||
:style="{ display: facets.length > 0 ? 'none' : 'flex'}">
|
||||
{{ $root.__('Nothing found.', 'tainacan') }}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
v-if="showLoadMore && facets.length > 0 && (facets.length < totalFacets || lastTerm != '')"
|
||||
@click="loadMore()"
|
||||
class="show-more-button"
|
||||
:label="wpI18n('Show more', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="4 3 24 24">
|
||||
<path d="M 7.41,8.295 6,9.705 l 6,6 6,-6 -1.41,-1.41 -4.59,4.58 z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="spinner-container"
|
||||
:style="{ display: facets.length > 0 ? 'none' : 'flex'}">
|
||||
{{ wpI18n('Nothing found.', 'tainacan') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -193,10 +187,7 @@ export default {
|
|||
maxFacetsNumber: Number,
|
||||
maxColumnsCount: Number,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
tainacanSiteUrl: String,
|
||||
className: String,
|
||||
customStyle: String,
|
||||
imageSize: String
|
||||
},
|
||||
data() {
|
||||
|
|
@ -221,10 +212,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
isMetadatumTypeRelationship() {
|
||||
return (this.metadatumType == 'Tainacan\\Metadata_Types\\Relationship') || (this.metadatumType == this.$root.__('Relationship', 'tainacan')) || (this.metadatumType == 'Relationship');
|
||||
return (this.metadatumType == 'Tainacan\\Metadata_Types\\Relationship') || (this.metadatumType == this.wpI18n('Relationship', 'tainacan')) || (this.metadatumType == 'Relationship');
|
||||
},
|
||||
isMetadatumTypeTaxonomy() {
|
||||
return (this.metadatumType == 'Tainacan\\Metadata_Types\\Taxonomy') || (this.metadatumType == this.$root.__('Taxonomy', 'tainacan')) || (this.metadatumType == 'Taxonomy');
|
||||
return (this.metadatumType == 'Tainacan\\Metadata_Types\\Taxonomy') || (this.metadatumType == this.wpI18n('Taxonomy', 'tainacan')) || (this.metadatumType == 'Taxonomy');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -248,6 +239,9 @@ export default {
|
|||
this.$el.removeEventListener('tainacan-blocks-facets-list-update', this.receiveSearchString);
|
||||
},
|
||||
methods: {
|
||||
wpI18n(string, context) {
|
||||
return wp && wp.i18n ? wp.i18n.__(string, context) : string;
|
||||
},
|
||||
receiveSearchString(event) {
|
||||
if (event.detail) {
|
||||
this.applySearchString({ target: { value: event.detail.searchString }});
|
||||
|
|
|
|||
Loading…
Reference in New Issue