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

Fixes carousels responsiveness on screen smaller than 468px and fixes selection of facets metadatum type after translation.

This commit is contained in:
mateuswetah 2020-12-04 15:58:51 -03:00
parent f8af51c924
commit e6fefd3259
14 changed files with 510 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/tainacan-gutenberg-block-facets-list.css
View File

@ -637,13 +637,13 @@
.wp-block-tainacan-facets-list .show-more-button i > svg { .wp-block-tainacan-facets-list .show-more-button i > svg {
fill: white; } fill: white; }
.filter-item-enter-active { .child-reveal-enter-active {
overflow: hidden; overflow: hidden;
animation-name: filter-item-in; animation-name: filter-item-in;
animation-duration: 0.1s; animation-duration: 0.1s;
animation-timing-function: ease; } animation-timing-function: ease; }
.filter-item-leave-active { .child-reveal-leave-active {
overflow: hidden; overflow: hidden;
animation-name: filter-item-out; animation-name: filter-item-out;
animation-duration: 0.1s; animation-duration: 0.1s;

2
src/assets/css/tainacan-gutenberg-block-facets-list.css.map
View File

File diff suppressed because one or more lines are too long

2
src/assets/js/admin.js.map
View File

File diff suppressed because one or more lines are too long

12
src/classes/api/endpoints/class-tainacan-rest-facets-controller.php
View File

@ -141,9 +141,15 @@ class REST_Facets_Controller extends REST_Controller {
$second_arg = $val['taxonomy']; $second_arg = $val['taxonomy'];
} }
$entity = $metadatum_type_object->get_repository()->fetch( (int) $val['value'], $second_arg ); $entity = $metadatum_type_object->get_repository()->fetch( (int) $val['value'], $second_arg );
if ($entity) {
$val['entity'] = $entity->_toArray(); $add_attt_item = function($array_item, $item) {
} $array_item['thumbnail'] = $item->get_thumbnail();
return $array_item;
};
add_filter('tainacan-item-to-array', $add_attt_item, 10, 2);
$val['entity'] = $entity->_toArray();
remove_filter( 'tainacan-item-to-array', $add_attt_item, 10);
return $val; return $val;
}, $all_values['values']); }, $all_values['values']);
} }

2
src/views/admin/components/metadata-types/compound/Compound.vue
View File

@ -47,7 +47,7 @@
<div <div
class="skeleton" class="skeleton"
:style="{ :style="{
minHeight: (childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-checkbox' || childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-taxonomycheckbox') ? '150px' : '30px' minHeight: (childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-checkbox' || childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-taxonomy-checkbox') ? '150px' : '30px'
}" /> }" />
</div> </div>
<tainacan-form-item <tainacan-form-item

14
src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue
View File

@ -237,7 +237,7 @@ export default {
preventInteractionOnTransition: true, preventInteractionOnTransition: true,
allowClick: true, allowClick: true,
allowTouchMove: true, allowTouchMove: true,
slidesPerView: this.showCollectionThumbnail ? 6 : 5, slidesPerView: 1,
slidesPerGroup: 1, slidesPerGroup: 1,
spaceBetween: this.showCollectionThumbnail ? 32 : 16, spaceBetween: this.showCollectionThumbnail ? 32 : 16,
slideToClickedSlide: true, slideToClickedSlide: true,
@ -264,13 +264,13 @@ export default {
if (!isNaN(this.maxCollectionsPerScreen)) { if (!isNaN(this.maxCollectionsPerScreen)) {
this.swiperOptions.breakpoints = { this.swiperOptions.breakpoints = {
498: { slidesPerView: this.maxCollectionsPerScreen - 5 > 0 ? this.maxCollectionsPerScreen - 5 : 1 }, 498: { slidesPerView: this.maxCollectionsPerScreen - 4 > 0 ? this.maxCollectionsPerScreen - 4 : 1 },
768: { slidesPerView: this.maxCollectionsPerScreen - 4 > 0 ? this.maxCollectionsPerScreen - 4 : 1 }, 768: { slidesPerView: this.maxCollectionsPerScreen - 3 > 0 ? this.maxCollectionsPerScreen - 3 : 1 },
1024: { slidesPerView: this.maxCollectionsPerScreen - 3 > 0 ? this.maxCollectionsPerScreen - 3 : 1 }, 1024: { slidesPerView: this.maxCollectionsPerScreen - 2 > 0 ? this.maxCollectionsPerScreen - 2 : 1 },
1366: { slidesPerView: this.maxCollectionsPerScreen - 2 > 0 ? this.maxCollectionsPerScreen - 2 : 1 }, 1366: { slidesPerView: this.maxCollectionsPerScreen - 1 > 0 ? this.maxCollectionsPerScreen - 1 : 1 },
1600: { slidesPerView: this.maxCollectionsPerScreen - 1 > 0 ? this.maxCollectionsPerScreen - 1 : 1 }, 1600: { slidesPerView: this.maxCollectionsPerScreen > 0 ? this.maxCollectionsPerScreen : 1 },
} }
this.swiperOptions.slidesPerView = this.maxCollectionsPerScreen; this.swiperOptions.slidesPerView = 1;
} }
}, },
methods: { methods: {

416
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-deprecated.js Normal file
View File

@ -0,0 +1,416 @@
export default [
/* Deprecated on Tainacan 0.17.2, due to the introduction of support: fontSize */
{
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'div'
},
collectionId: {
type: String,
default: undefined
},
collectionSlug: {
type: String,
default: undefined
},
facets: {
type: Array,
default: []
},
facetsObject: {
type: Array,
default: []
},
showImage: {
type: Boolean,
default: true
},
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: 0
},
metadatumId: {
type: String,
default: undefined
},
metadatumType: {
type: String,
default: undefined
},
facetsRequestSource: {
type: String,
default: undefined
},
maxFacetsNumber: {
type: Number,
value: undefined
},
isLoading: {
type: Boolean,
value: false
},
isLoadingCollection: {
type: Boolean,
value: false
},
collection: {
type: Object,
value: undefined
},
searchString: {
type: String,
default: undefined
},
blockId: {
type: String,
default: undefined
},
parentTerm: {
type: Number,
default: null
},
isParentTermModalOpen: {
type: Boolean,
default: false
}
},
save({ attributes, className }){
const {
content,
blockId,
collectionId,
collectionSlug,
parentTerm,
showImage,
showItemsCount,
showLoadMore,
layout,
cloudRate,
gridMargin,
metadatumId,
metadatumType,
maxFacetsNumber,
showSearchBar,
} = attributes;
return <div
className={ className }
metadatum-id={ metadatumId }
metadatum-type={ metadatumType }
collection-id={ collectionId }
collection-slug={ collectionSlug }
parent-term-id={ parentTerm ? parentTerm.id : null }
show-image={ '' + showImage }
show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore }
layout={ layout }
cloud-rate={ cloudRate }
grid-margin={ gridMargin }
max-facets-number={ maxFacetsNumber }
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>
}
},
{
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'div'
},
collectionId: {
type: String,
default: undefined
},
collectionSlug: {
type: String,
default: undefined
},
facets: {
type: Array,
default: []
},
facetsObject: {
type: Array,
default: []
},
showImage: {
type: Boolean,
default: true
},
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: 0
},
metadatumId: {
type: String,
default: undefined
},
metadatumType: {
type: String,
default: undefined
},
facetsRequestSource: {
type: String,
default: undefined
},
maxFacetsNumber: {
type: Number,
value: undefined
},
isLoading: {
type: Boolean,
value: false
},
isLoadingCollection: {
type: Boolean,
value: false
},
collection: {
type: Object,
value: undefined
},
searchString: {
type: String,
default: undefined
},
blockId: {
type: String,
default: undefined
},
parentTerm: {
type: Number,
default: null
},
isParentTermModalOpen: {
type: Boolean,
default: false
}
},
save({ attributes, className }){
const {
content,
blockId,
collectionId,
collectionSlug,
parentTerm,
showImage,
showItemsCount,
showLoadMore,
layout,
cloudRate,
gridMargin,
metadatumId,
metadatumType,
maxFacetsNumber,
showSearchBar,
} = attributes;
return <div
className={ className }
metadatum-id={ metadatumId }
metadatum-type={ metadatumType }
collection-id={ collectionId }
collection-slug={ collectionSlug }
parent-term-id={ parentTerm ? parentTerm.id : null }
show-image={ '' + showImage }
show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore }
layout={ layout }
cloud-rate={ cloudRate }
grid-margin={ gridMargin }
max-facets-number={ maxFacetsNumber }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-facets-list_' + blockId }>
{ content }
</div>
}
},
{
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'div'
},
collectionId: {
type: String,
default: undefined
},
collectionSlug: {
type: String,
default: undefined
},
facets: {
type: Array,
default: []
},
facetsObject: {
type: Array,
default: []
},
showImage: {
type: Boolean,
default: true
},
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: 0
},
metadatumId: {
type: String,
default: undefined
},
metadatumType: {
type: String,
default: undefined
},
facetsRequestSource: {
type: String,
default: undefined
},
maxFacetsNumber: {
type: Number,
value: undefined
},
isLoading: {
type: Boolean,
value: false
},
isLoadingCollection: {
type: Boolean,
value: false
},
collection: {
type: Object,
value: undefined
},
searchString: {
type: String,
default: undefined
},
blockId: {
type: String,
default: undefined
}
},
save({ attributes, className }){
const {
content,
blockId,
collectionId,
collectionSlug,
showImage,
showItemsCount,
showLoadMore,
layout,
cloudRate,
gridMargin,
metadatumId,
metadatumType,
maxFacetsNumber,
showSearchBar,
} = attributes;
return <div
className={ className }
metadatum-id={ metadatumId }
metadatum-type={ metadatumType }
collection-id={ collectionId }
collection-slug={ collectionSlug }
show-image={ '' + showImage }
show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore }
layout={ layout }
cloud-rate={ cloudRate }
grid-margin={ gridMargin }
max-facets-number={ maxFacetsNumber }
tainacan-api-root={ tainacan_plugin.root }
tainacan-base-url={ tainacan_plugin.base_url }
tainacan-site-url={ tainacan_plugin.site_url }
id={ 'wp-block-tainacan-facets-list_' + blockId }>
{ content }
</div>
}
}
]

18
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme-unit.vue
View File

@ -5,12 +5,12 @@
:style="{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}"> :style="{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}">
<a <a
:id="isNaN(facetId) ? facetId : 'facet-id-' + facetId" :id="isNaN(facetId) ? facetId : 'facet-id-' + facetId"
:href="(appendChildTerms && facet.total_children > 0) ? null : ((linkTermFacetsToTermPage && metadatumType == 'Taxonomy') ? facet.term_url : facet.url)" :href="(appendChildTerms && facet.total_children > 0) ? null : ((linkTermFacetsToTermPage && isMetadatumTypeTaxonomy) ? facet.term_url : facet.url)"
@click="() => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null }" @click="() => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null }"
target="_blank" target="_blank"
:style="{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}"> :style="{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}">
<img <img
v-if="metadatumType == 'Taxonomy'" v-if="isMetadatumTypeTaxonomy"
:src=" :src="
facet.entity && facet.entity['header_image'] facet.entity && facet.entity['header_image']
? ?
@ -20,7 +20,7 @@
" "
:alt="facet.label ? facet.label : $root.__('Thumbnail', 'tainacan')"> :alt="facet.label ? facet.label : $root.__('Thumbnail', 'tainacan')">
<img <img
v-if="metadatumType == 'Relationship'" v-if="isMetadatumTypeRelationship"
:src=" :src="
facet.entity.thumbnail && facet.entity.thumbnail['tainacan-medium'][0] && facet.entity.thumbnail['tainacan-medium'][0] facet.entity.thumbnail && facet.entity.thumbnail['tainacan-medium'][0] && facet.entity.thumbnail['tainacan-medium'][0]
? ?
@ -62,7 +62,7 @@
}" /> }" />
</ul> </ul>
<template v-else> <template v-else>
<transition name="filter-item"> <transition name="child-reveal">
<ul <ul
v-if="childFacetsObject[facet.id != undefined ? facet.id : facet.value] && childFacetsObject[facet.id != undefined ? facet.id : facet.value].visible" v-if="childFacetsObject[facet.id != undefined ? facet.id : facet.value] && childFacetsObject[facet.id != undefined ? facet.id : facet.value].visible"
class="child-term-facets"> class="child-term-facets">
@ -82,6 +82,8 @@
:show-items-count="showItemsCount" :show-items-count="showItemsCount"
:is-loading-child-terms="isloadingChildTerms" :is-loading-child-terms="isloadingChildTerms"
:link-term-facets-to-term-page="linkTermFacetsToTermPage" :link-term-facets-to-term-page="linkTermFacetsToTermPage"
:is-metadatum-type-taxonomy="isMetadatumTypeTaxonomy"
:is-metadatum-type-relationship="isMetadatumTypeRelationship"
@on-display-child-terms="displayChildTerms" /> @on-display-child-terms="displayChildTerms" />
</template> </template>
<p <p
@ -111,7 +113,9 @@ export default {
layout: String, layout: String,
cloudRate: Number, cloudRate: Number,
metadatumType: String, metadatumType: String,
childFacetsObject: Object childFacetsObject: Object,
isMetadatumTypeTaxonomy: Boolean,
isMetadatumTypeRelationship: Boolean
}, },
computed:{ computed:{
facetId() { facetId() {
@ -125,12 +129,12 @@ export default {
getSkeletonHeight() { getSkeletonHeight() {
switch(this.layout) { switch(this.layout) {
case 'grid': case 'grid':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage) if ((this.isMetadatumTypeRelationship || this.isMetadatumTypeTaxonomy) && this.showImage)
return '230px'; return '230px';
else else
return '24px' return '24px'
case 'list': case 'list':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage) if ((this.isMetadatumTypeRelationship || this.isMetadatumTypeTaxonomy) && this.showImage)
return '54px'; return '54px';
else else
return '24px' return '24px'

24
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.vue
View File

@ -44,7 +44,7 @@
v-for="facet in Number(maxFacetsNumber)" v-for="facet in Number(maxFacetsNumber)"
class="facet-list-item skeleton" class="facet-list-item skeleton"
:style="{ :style="{
marginBottom: layout == 'grid' && ((metadatumType == 'Relationship' || metadatumType == 'Taxonomy') && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '', marginBottom: layout == 'grid' && ((isMetadatumTypeRelationship || isMetadatumTypeTaxonomy) && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
minHeight: getSkeletonHeight() minHeight: getSkeletonHeight()
}" /> }" />
</ul> </ul>
@ -64,7 +64,7 @@
:key="facet" :key="facet"
class="facet-list-item skeleton" class="facet-list-item skeleton"
:style="{ :style="{
marginBottom: layout == 'grid' && ((metadatumType == 'Relationship' || metadatumType == 'Taxonomy') && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '', marginBottom: layout == 'grid' && ((isMetadatumTypeRelationship || isMetadatumTypeTaxonomy) && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
minHeight: getSkeletonHeight() minHeight: getSkeletonHeight()
}" /> }" />
</div> </div>
@ -95,6 +95,8 @@
:show-items-count="showItemsCount" :show-items-count="showItemsCount"
:is-loading-child-terms="isloadingChildTerms" :is-loading-child-terms="isloadingChildTerms"
:link-term-facets-to-term-page="linkTermFacetsToTermPage" :link-term-facets-to-term-page="linkTermFacetsToTermPage"
:is-metadatum-type-taxonomy="isMetadatumTypeTaxonomy"
:is-metadatum-type-relationship="isMetadatumTypeRelationship"
@on-display-child-terms="displayChildTerms" /> @on-display-child-terms="displayChildTerms" />
</ul> </ul>
<ul <ul
@ -123,6 +125,8 @@
:show-items-count="showItemsCount" :show-items-count="showItemsCount"
:is-loading-child-terms="isloadingChildTerms" :is-loading-child-terms="isloadingChildTerms"
:link-term-facets-to-term-page="linkTermFacetsToTermPage" :link-term-facets-to-term-page="linkTermFacetsToTermPage"
:is-metadatum-type-taxonomy="isMetadatumTypeTaxonomy"
:is-metadatum-type-relationship="isMetadatumTypeRelationship"
@on-display-child-terms="displayChildTerms" /> @on-display-child-terms="displayChildTerms" />
</div> </div>
</ul> </ul>
@ -204,6 +208,14 @@ export default {
lastTerm: undefined lastTerm: undefined
} }
}, },
computed: {
isMetadatumTypeRelationship() {
return (this.metadatumType == 'Tainacan\\Metadata_Types\\Relationship') || (this.metadatumType == this.$root.__('Relationship', 'tainacan') );
},
isMetadatumTypeTaxonomy() {
return (this.metadatumType == 'Tainacan\\Metadata_Types\\Taxonomy') || (this.metadatumType == this.$root.__('Taxonomy', 'tainacan') );
}
},
created() { created() {
this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot }); this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
this.offset = 0; this.offset = 0;
@ -266,7 +278,7 @@ export default {
queryObject.last_term = this.lastTerm; queryObject.last_term = this.lastTerm;
// Set up parentTerm for taxonomies // Set up parentTerm for taxonomies
if (this.parentTermId !== undefined && this.parentTermId !== null && this.parentTermId !== '' && this.metadatumType == 'Taxonomy') if (this.parentTermId !== undefined && this.parentTermId !== null && this.parentTermId !== '' && this.isMetadatumTypeTaxonomy)
queryObject.parent = this.parentTermId; queryObject.parent = this.parentTermId;
else { else {
delete queryObject.parent; delete queryObject.parent;
@ -281,7 +293,7 @@ export default {
this.tainacanAxios.get(endpoint, { cancelToken: this.facetsRequestSource.token }) this.tainacanAxios.get(endpoint, { cancelToken: this.facetsRequestSource.token })
.then(response => { .then(response => {
if (this.metadatumType == 'Taxonomy') { if (this.isMetadatumTypeTaxonomy) {
for (let facet of response.data.values) { for (let facet of response.data.values) {
this.facets.push(Object.assign({ this.facets.push(Object.assign({
term_url: facet.entity && facet.entity.url ? facet.entity.url : this.tainacanSiteUrl + '/' + this.collectionSlug + '/#/?taxquery[0][compare]=IN&taxquery[0][taxonomy]=' + facet.taxonomy + '&taxquery[0][terms][0]=' + facet.value, term_url: facet.entity && facet.entity.url ? facet.entity.url : this.tainacanSiteUrl + '/' + this.collectionSlug + '/#/?taxquery[0][compare]=IN&taxquery[0][taxonomy]=' + facet.taxonomy + '&taxquery[0][terms][0]=' + facet.value,
@ -375,12 +387,12 @@ export default {
getSkeletonHeight() { getSkeletonHeight() {
switch(this.layout) { switch(this.layout) {
case 'grid': case 'grid':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage) if ((this.isMetadatumTypeRelationship || this.isMetadatumTypeTaxonomy) && this.showImage)
return '230px'; return '230px';
else else
return '24px' return '24px'
case 'list': case 'list':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage) if ((this.isMetadatumTypeRelationship || this.isMetadatumTypeTaxonomy) && this.showImage)
return '54px'; return '54px';
else else
return '24px' return '24px'

4
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss
View File

@ -637,13 +637,13 @@
} }
} }
.filter-item-enter-active { .child-reveal-enter-active {
overflow: hidden; overflow: hidden;
animation-name: filter-item-in; animation-name: filter-item-in;
animation-duration: 0.1s; animation-duration: 0.1s;
animation-timing-function: ease; animation-timing-function: ease;
} }
.filter-item-leave-active { .child-reveal-leave-active {
overflow: hidden; overflow: hidden;
animation-name: filter-item-out; animation-name: filter-item-out;
animation-duration: 0.1s; animation-duration: 0.1s;

314
src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js
View File

@ -12,6 +12,7 @@ import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import DeprecatedBlocks from './facets-list-deprecated.js';
registerBlockType('tainacan/facets-list', { registerBlockType('tainacan/facets-list', {
title: __('Tainacan Facets List', 'tainacan'), title: __('Tainacan Facets List', 'tainacan'),
@ -159,6 +160,7 @@ registerBlockType('tainacan/facets-list', {
supports: { supports: {
align: ['full', 'wide'], align: ['full', 'wide'],
html: false, html: false,
fontSize: true
}, },
edit({ attributes, setAttributes, className, isSelected, clientId }){ edit({ attributes, setAttributes, className, isSelected, clientId }){
let { let {
@ -208,7 +210,7 @@ registerBlockType('tainacan/facets-list', {
setAttributes({ showImage: showImage }); setAttributes({ showImage: showImage });
} }
if (nameInsideImage === undefined) { if (nameInsideImage === undefined) {
nameInsideImage = true; nameInsideImage = false;
setAttributes({ nameInsideImage: nameInsideImage }); setAttributes({ nameInsideImage: nameInsideImage });
} }
if (showItemsCount === undefined) { if (showItemsCount === undefined) {
@ -219,7 +221,7 @@ registerBlockType('tainacan/facets-list', {
gridMargin = 24; gridMargin = 24;
setAttributes({ gridMargin: gridMargin }); setAttributes({ gridMargin: gridMargin });
} }
console.log(metadatumType)
function prepareFacet(facet) { function prepareFacet(facet) {
const facetId = facet.id != undefined ? facet.id : facet.value; const facetId = facet.id != undefined ? facet.id : facet.value;
return ( return (
@ -228,11 +230,11 @@ registerBlockType('tainacan/facets-list', {
className={ 'facet-list-item' + (!showImage ? ' facet-without-image' : '') + (nameInsideImage ? ' facet-with-name-inside-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')}> className={ 'facet-list-item' + (!showImage ? ' facet-without-image' : '') + (nameInsideImage ? ' facet-with-name-inside-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')}>
<a <a
id={ isNaN(facetId) ? facetId : 'facet-id-' + facetId } id={ isNaN(facetId) ? facetId : 'facet-id-' + facetId }
href={ !appendChildTerms ? ((linkTermFacetsToTermPage && metadatumType == 'Taxonomy') ? facet.term_url : facet.url) : (facet.total_children > 0 ? null : (linkTermFacetsToTermPage ? facet.term_url : facet.url)) } href={ !appendChildTerms ? ((linkTermFacetsToTermPage && isMetadatumTypeTaxonomy(metadatumType)) ? facet.term_url : facet.url) : (facet.total_children > 0 ? null : (linkTermFacetsToTermPage ? facet.term_url : facet.url)) }
onClick={ () => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null } } onClick={ () => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null } }
target="_blank" target="_blank"
style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'rem' : ''}}> style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'rem' : ''}}>
{ metadatumType == 'Taxonomy' ? { isMetadatumTypeTaxonomy(metadatumType) ?
<img <img
src={ src={
facet.entity && facet.entity['header_image'] facet.entity && facet.entity['header_image']
@ -244,7 +246,7 @@ registerBlockType('tainacan/facets-list', {
alt={ facet.label ? facet.label : __( 'Thumbnail', 'tainacan' ) }/> alt={ facet.label ? facet.label : __( 'Thumbnail', 'tainacan' ) }/>
: null : null
} }
{ metadatumType == 'Relationship' ? { isMetadatumTypeRelationship(metadatumType) ?
<img <img
src={ src={
facet.entity.thumbnail && facet.entity.thumbnail['tainacan-medium'][0] && facet.entity.thumbnail['tainacan-medium'][0] facet.entity.thumbnail && facet.entity.thumbnail['tainacan-medium'][0] && facet.entity.thumbnail['tainacan-medium'][0]
@ -326,7 +328,7 @@ registerBlockType('tainacan/facets-list', {
} }
// Set up parentTerm for taxonomies // Set up parentTerm for taxonomies
if (parentTerm && parentTerm.id !== undefined && parentTerm.id !== null && parentTerm.id !== '' && metadatumType == 'Taxonomy') { if (parentTerm && parentTerm.id !== undefined && parentTerm.id !== null && parentTerm.id !== '' && isMetadatumTypeTaxonomy(metadatumType)) {
queryObject.parent = parentTerm.id; queryObject.parent = parentTerm.id;
} else { } else {
delete queryObject.parent; delete queryObject.parent;
@ -342,7 +344,7 @@ registerBlockType('tainacan/facets-list', {
.then(response => { .then(response => {
facetsObject = []; facetsObject = [];
if (metadatumType == 'Taxonomy') { if (isMetadatumTypeTaxonomy(metadatumType)) {
for (let facet of response.data.values) { for (let facet of response.data.values) {
facetsObject.push(Object.assign({ facetsObject.push(Object.assign({
term_url: facet.entity && facet.entity.url ? facet.entity.url : tainacan_blocks.site_url + '/' + collectionSlug + '/#/?taxquery[0][compare]=IN&taxquery[0][taxonomy]=' + facet.taxonomy + '&taxquery[0][terms][0]=' + facet.value, term_url: facet.entity && facet.entity.url ? facet.entity.url : tainacan_blocks.site_url + '/' + collectionSlug + '/#/?taxquery[0][compare]=IN&taxquery[0][taxonomy]=' + facet.taxonomy + '&taxquery[0][terms][0]=' + facet.value,
@ -500,6 +502,14 @@ registerBlockType('tainacan/facets-list', {
} }
} }
// These two functions are necessary as previous versions of the block used a translated version of the type label as metadatum type.
function isMetadatumTypeRelationship(metadatumType) {
return (metadatumType == 'Tainacan\\Metadata_Types\\Relationship') || (metadatumType == __('Relationship', 'tainacan') );
}
function isMetadatumTypeTaxonomy(metadatumType) {
return (metadatumType == 'Tainacan\\Metadata_Types\\Taxonomy') || (metadatumType == __('Taxonomy', 'tainacan') );
}
// Executed only on the first load of page // Executed only on the first load of page
if(content && content.length && content[0].type) if(content && content.length && content[0].type)
setContent(); setContent();
@ -507,19 +517,19 @@ registerBlockType('tainacan/facets-list', {
const layoutControls = [ const layoutControls = [
{ {
icon: 'grid-view', icon: 'grid-view',
title: __( 'Grid View' ), title: __( 'Grid View', 'tainacan' ),
onClick: () => updateLayout('grid'), onClick: () => updateLayout('grid'),
isActive: layout === 'grid', isActive: layout === 'grid',
}, },
{ {
icon: 'list-view', icon: 'list-view',
title: __( 'List View' ), title: __( 'List View', 'tainacan' ),
onClick: () => updateLayout('list'), onClick: () => updateLayout('list'),
isActive: layout === 'list', isActive: layout === 'list',
}, },
{ {
icon: 'cloud', icon: 'cloud',
title: __( 'Cloud View' ), title: __( 'Cloud View', 'tainacan' ),
onClick: () => updateLayout('cloud'), onClick: () => updateLayout('cloud'),
isActive: layout === 'cloud', isActive: layout === 'cloud',
} }
@ -610,7 +620,7 @@ registerBlockType('tainacan/facets-list', {
/> />
</PanelBody> </PanelBody>
{/* Settings related only to facets from Taxonomy metadata */} {/* Settings related only to facets from Taxonomy metadata */}
{ metadatumType == 'Taxonomy' ? { isMetadatumTypeTaxonomy(metadatumType) ?
<PanelBody <PanelBody
title={__('Taxonomy options', 'tainacan')} title={__('Taxonomy options', 'tainacan')}
initialOpen={ true }> initialOpen={ true }>
@ -665,7 +675,7 @@ registerBlockType('tainacan/facets-list', {
initialOpen={ true } initialOpen={ true }
> >
<div> <div>
{ (metadatumType == 'Taxonomy' || metadatumType == 'Relationship') ? { (isMetadatumTypeTaxonomy(metadatumType) || isMetadatumTypeRelationship(metadatumType)) ?
<ToggleControl <ToggleControl
label={__('Name inside image', 'tainacan')} label={__('Name inside image', 'tainacan')}
help={ nameInsideImage ? __("Toggle to show facet's name inside the image", 'tainacan') : __("Do not show facet's name image", 'tainacan')} help={ nameInsideImage ? __("Toggle to show facet's name inside the image", 'tainacan') : __("Do not show facet's name image", 'tainacan')}
@ -715,7 +725,7 @@ registerBlockType('tainacan/facets-list', {
initialOpen={ true } initialOpen={ true }
> >
<div> <div>
{ (metadatumType == 'Taxonomy' || metadatumType == 'Relationship') ? { (isMetadatumTypeTaxonomy(metadatumType) || isMetadatumTypeRelationship(metadatumType)) ?
<ToggleControl <ToggleControl
label={__('Image', 'tainacan')} label={__('Image', 'tainacan')}
help={ showImage ? __("Toggle to show facet's image", 'tainacan') : __("Do not show facet's image", 'tainacan')} help={ showImage ? __("Toggle to show facet's image", 'tainacan') : __("Do not show facet's image", 'tainacan')}
@ -871,7 +881,7 @@ registerBlockType('tainacan/facets-list', {
{__('List facets from a Tainacan Collection or Repository', 'tainacan')} {__('List facets from a Tainacan Collection or Repository', 'tainacan')}
</p> </p>
{ {
parentTerm && parentTerm.id && metadatumType == 'Taxonomy'? parentTerm && parentTerm.id && isMetadatumTypeTaxonomy(metadatumType)?
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Button <Button
isPrimary isPrimary
@ -1008,279 +1018,5 @@ registerBlockType('tainacan/facets-list', {
{ content } { content }
</div> </div>
}, },
deprecated: [ deprecated: DeprecatedBlocks
{
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'div'
},
collectionId: {
type: String,
default: undefined
},
collectionSlug: {
type: String,
default: undefined
},
facets: {
type: Array,
default: []
},
facetsObject: {
type: Array,
default: []
},
showImage: {
type: Boolean,
default: true
},
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: 0
},
metadatumId: {
type: String,
default: undefined
},
metadatumType: {
type: String,
default: undefined
},
facetsRequestSource: {
type: String,
default: undefined
},
maxFacetsNumber: {
type: Number,
value: undefined
},
isLoading: {
type: Boolean,
value: false
},
isLoadingCollection: {
type: Boolean,
value: false
},
collection: {
type: Object,
value: undefined
},
searchString: {
type: String,
default: undefined
},
blockId: {
type: String,
default: undefined
},
parentTerm: {
type: Number,
default: null
},
isParentTermModalOpen: {
type: Boolean,
default: false
}
},
save({ attributes, className }){
const {
content,
blockId,
collectionId,
collectionSlug,
parentTerm,
showImage,
showItemsCount,
showLoadMore,
layout,
cloudRate,
gridMargin,
metadatumId,
metadatumType,
maxFacetsNumber,
showSearchBar,
} = attributes;
return <div
className={ className }
metadatum-id={ metadatumId }
metadatum-type={ metadatumType }
collection-id={ collectionId }
collection-slug={ collectionSlug }
parent-term-id={ parentTerm ? parentTerm.id : null }
show-image={ '' + showImage }
show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore }
layout={ layout }
cloud-rate={ cloudRate }
grid-margin={ gridMargin }
max-facets-number={ maxFacetsNumber }
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>
}
},
{
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'div'
},
collectionId: {
type: String,
default: undefined
},
collectionSlug: {
type: String,
default: undefined
},
facets: {
type: Array,
default: []
},
facetsObject: {
type: Array,
default: []
},
showImage: {
type: Boolean,
default: true
},
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: 0
},
metadatumId: {
type: String,
default: undefined
},
metadatumType: {
type: String,
default: undefined
},
facetsRequestSource: {
type: String,
default: undefined
},
maxFacetsNumber: {
type: Number,
value: undefined
},
isLoading: {
type: Boolean,
value: false
},
isLoadingCollection: {
type: Boolean,
value: false
},
collection: {
type: Object,
value: undefined
},
searchString: {
type: String,
default: undefined
},
blockId: {
type: String,
default: undefined
}
},
save({ attributes, className }){
const {
content,
blockId,
collectionId,
collectionSlug,
showImage,
showItemsCount,
showLoadMore,
layout,
cloudRate,
gridMargin,
metadatumId,
metadatumType,
maxFacetsNumber,
showSearchBar,
} = attributes;
return <div
className={ className }
metadatum-id={ metadatumId }
metadatum-type={ metadatumType }
collection-id={ collectionId }
collection-slug={ collectionSlug }
show-image={ '' + showImage }
show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore }
layout={ layout }
cloud-rate={ cloudRate }
grid-margin={ gridMargin }
max-facets-number={ maxFacetsNumber }
tainacan-api-root={ tainacan_plugin.root }
tainacan-base-url={ tainacan_plugin.base_url }
tainacan-site-url={ tainacan_plugin.site_url }
id={ 'wp-block-tainacan-facets-list_' + blockId }>
{ content }
</div>
}
}
]
}); });

26
src/views/gutenberg-blocks/tainacan-facets/facets-list/metadata-modal.js
View File

@ -38,7 +38,6 @@ export default class MetadataModal extends React.Component {
this.fetchModalCollections = this.fetchModalCollections.bind(this); this.fetchModalCollections = this.fetchModalCollections.bind(this);
this.selectMetadatum = this.selectMetadatum.bind(this); this.selectMetadatum = this.selectMetadatum.bind(this);
this.fetchModalMetadata = this.fetchModalMetadata.bind(this); this.fetchModalMetadata = this.fetchModalMetadata.bind(this);
this.getMetadatumType = this.getMetadatumType.bind(this);
} }
componentWillMount() { componentWillMount() {
@ -211,7 +210,8 @@ export default class MetadataModal extends React.Component {
otherModalMetadata.push({ otherModalMetadata.push({
name: metadatum.name, name: metadatum.name,
id: metadatum.id, id: metadatum.id,
type: this.getMetadatumType(metadatum) type: metadatum.metadata_type,
typeLabel: metadatum.metadata_type_object ? metadatum.metadata_type_object.name : ''
}); });
} }
@ -227,26 +227,6 @@ export default class MetadataModal extends React.Component {
}); });
} }
getMetadatumType(metadatum) {
let metadatumType = metadatum.metadata_type_object ? metadatum.metadata_type_object.component : false;
if (metadatumType) {
switch(metadatumType) {
case 'tainacan-text': return __('Text', 'tainacan');
case 'tainacan-textarea': return __('Text area', 'tainacan');
case 'tainacan-date': return __('Date', 'tainacan');
case 'tainacan-numeric': return __('Numeric', 'tainacan');
case 'tainacan-selectbox': return __('Select box', 'tainacan');
case 'tainacan-relationship': return __('Relationship', 'tainacan');
case 'tainacan-taxonomy': return __('Taxonomy', 'tainacan');
case 'tainacan-compound': return __('Compound', 'tainacan');
default: return false;
}
} else {
return metadatumType;
}
}
selectMetadatum(selectedMetadatum) { selectMetadatum(selectedMetadatum) {
this.setState({ this.setState({
metadatumId: selectedMetadatum.id, metadatumId: selectedMetadatum.id,
@ -276,7 +256,7 @@ export default class MetadataModal extends React.Component {
selected={ this.state.temporaryMetadatumId } selected={ this.state.temporaryMetadatumId }
options={ options={
this.state.modalMetadata.map((metadatum) => { this.state.modalMetadata.map((metadatum) => {
return { label: metadatum.name + ' (' + metadatum.type + ')', value: '' + metadatum.id } return { label: metadatum.name + ' (' + metadatum.typeLabel + ')', value: '' + metadatum.id }
}) })
} }
onChange={ ( aMetadatumId ) => { onChange={ ( aMetadatumId ) => {

14
src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list-theme.vue
View File

@ -248,7 +248,7 @@ export default {
preventInteractionOnTransition: true, preventInteractionOnTransition: true,
allowClick: true, allowClick: true,
allowTouchMove: true, allowTouchMove: true,
slidesPerView: 7, slidesPerView: 1,
slidesPerGroup: 1, slidesPerGroup: 1,
spaceBetween: 32, spaceBetween: 32,
slideToClickedSlide: true, slideToClickedSlide: true,
@ -279,13 +279,13 @@ export default {
if (!isNaN(this.maxItemsPerScreen) && this.maxItemsPerScreen != 6) { if (!isNaN(this.maxItemsPerScreen) && this.maxItemsPerScreen != 6) {
this.swiperOptions.breakpoints = { this.swiperOptions.breakpoints = {
498: { slidesPerView: this.maxItemsPerScreen - 5 > 0 ? this.maxItemsPerScreen - 5 : 1 }, 498: { slidesPerView: this.maxItemsPerScreen - 4 > 0 ? this.maxItemsPerScreen - 4 : 1 },
768: { slidesPerView: this.maxItemsPerScreen - 4 > 0 ? this.maxItemsPerScreen - 4 : 1 }, 768: { slidesPerView: this.maxItemsPerScreen - 3 > 0 ? this.maxItemsPerScreen - 3 : 1 },
1024: { slidesPerView: this.maxItemsPerScreen - 3 > 0 ? this.maxItemsPerScreen - 3 : 1 }, 1024: { slidesPerView: this.maxItemsPerScreen - 2 > 0 ? this.maxItemsPerScreen - 2 : 1 },
1366: { slidesPerView: this.maxItemsPerScreen - 2 > 0 ? this.maxItemsPerScreen - 2 : 1 }, 1366: { slidesPerView: this.maxItemsPerScreen - 1 > 0 ? this.maxItemsPerScreen - 1 : 1 },
1600: { slidesPerView: this.maxItemsPerScreen - 1 > 0 ? this.maxItemsPerScreen - 1 : 1 }, 1600: { slidesPerView: this.maxItemsPerScreen > 0 ? this.maxItemsPerScreen : 1 },
} }
this.swiperOptions.slidesPerView = this.maxItemsPerScreen; this.swiperOptions.slidesPerView = 1;
} }
}, },
methods: { methods: {

14
src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.vue
View File

@ -211,7 +211,7 @@ export default {
preventInteractionOnTransition: true, preventInteractionOnTransition: true,
allowClick: true, allowClick: true,
allowTouchMove: true, allowTouchMove: true,
slidesPerView: this.showTermThumbnail ? 6 : 5, slidesPerView: 1,
slidesPerGroup: 1, slidesPerGroup: 1,
spaceBetween: this.showTermThumbnail ? 32 : 16, spaceBetween: this.showTermThumbnail ? 32 : 16,
slideToClickedSlide: true, slideToClickedSlide: true,
@ -238,13 +238,13 @@ export default {
if (!isNaN(this.maxTermsPerScreen)) { if (!isNaN(this.maxTermsPerScreen)) {
this.swiperOptions.breakpoints = { this.swiperOptions.breakpoints = {
498: { slidesPerView: this.maxTermsPerScreen - 5 > 0 ? this.maxTermsPerScreen - 5 : 1 }, 498: { slidesPerView: this.maxTermsPerScreen - 4 > 0 ? this.maxTermsPerScreen - 4 : 1 },
768: { slidesPerView: this.maxTermsPerScreen - 4 > 0 ? this.maxTermsPerScreen - 4 : 1 }, 768: { slidesPerView: this.maxTermsPerScreen - 3 > 0 ? this.maxTermsPerScreen - 3 : 1 },
1024: { slidesPerView: this.maxTermsPerScreen - 3 > 0 ? this.maxTermsPerScreen - 3 : 1 }, 1024: { slidesPerView: this.maxTermsPerScreen - 2 > 0 ? this.maxTermsPerScreen - 2 : 1 },
1366: { slidesPerView: this.maxTermsPerScreen - 2 > 0 ? this.maxTermsPerScreen - 2 : 1 }, 1366: { slidesPerView: this.maxTermsPerScreen - 1 > 0 ? this.maxTermsPerScreen - 1 : 1 },
1600: { slidesPerView: this.maxTermsPerScreen - 1 > 0 ? this.maxTermsPerScreen - 1 : 1 }, 1600: { slidesPerView: this.maxTermsPerScreen > 0 ? this.maxTermsPerScreen : 1 },
} }
this.swiperOptions.slidesPerView = this.maxTermsPerScreen; this.swiperOptions.slidesPerView = 1;
} }
}, },
methods: { methods: {