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

Client theme side of the collpasable parent facets

This commit is contained in:
mateuswetah 2020-11-25 23:41:31 -03:00
parent ac00dfa7ca
commit e1cb9e30f9
7 changed files with 268 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -390,6 +390,7 @@
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item a,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item a {
color: var(--tainacan-block-gray5, #454647);
line-height: normal;
height: auto;
display: flex;
align-items: center;
@ -419,12 +420,13 @@
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item:hover a {
color: var(--tainacan-block-gray5, #454647);
text-decoration: none; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet_term_with_children,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet_term_with_children {
font-weight: bold;
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet-term-with-children,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-term-with-children {
font-weight: bold !important;
cursor: pointer; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item .child-term-facets,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item .child-term-facets {
padding-left: 1.3em;
margin: 12px 0px -12px 0px; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item .child-term-facets .facet-list-item,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item .child-term-facets .facet-list-item {
@ -486,4 +488,16 @@
.wp-block-tainacan-facets-list .show-more-button i > svg {
fill: white; }
.filter-item-enter-active {
overflow: hidden;
animation-name: filter-item-in;
animation-duration: 0.1s;
animation-timing-function: ease; }
.filter-item-leave-active {
overflow: hidden;
animation-name: filter-item-out;
animation-duration: 0.1s;
animation-timing-function: ease; }
/*# sourceMappingURL=tainacan-gutenberg-block-facets-list.css.map */

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

File diff suppressed because one or more lines are too long

135
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme-unit.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<li
class="facet-list-item"
:class="(!showImage ? 'facet-without-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')"
:style="{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}">
<a
:id="isNaN(facetId) ? facetId : 'facet-id-' + facetId"
:href="(appendChildTerms && facet.total_children > 0) ? null : facet.url"
@click="() => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null }"
target="_blank"
:style="{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}">
<img
v-if="metadatumType == 'Taxonomy'"
:src="
facet.entity && facet.entity['header_image']
?
facet.entity['header_image']
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`
"
:alt="facet.label ? facet.label : $root.__('Thumbnail', 'tainacan')">
<img
v-if="metadatumType == 'Relationship'"
:src="
facet.entity.thumbnail && facet.entity.thumbnail['tainacan-medium'][0] && facet.entity.thumbnail['tainacan-medium'][0]
?
facet.entity.thumbnail['tainacan-medium'][0]
:
(facet.entity.thumbnail && facet.entity.thumbnail['thumbnail'][0] && facet.entity.thumbnail['thumbnail'][0]
?
facet.entity.thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
"
:alt="facet.label ? facet.label : $root.__('Thumbnail', 'tainacan')">
<span>{{ facet.label ? facet.label : '' }}</span>
<span
v-if="facet.total_items"
class="facet-item-count"
:style="{ display: !showItemsCount ? 'none' : '' }">
&nbsp;({{ facet.total_items }})
</span>
</a>
<template v-if="appendChildTerms && facet.total_children > 0">
<ul
v-if="isLoadingChildTerms == (facet.id != undefined ? facet.id : facet.value)"
:style="{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + 185) + 'px)' : 'inherit',
marginTop: showSearchBar ? '1.5em' : '4px'
}"
class="facets-list"
:class="'facets-layout-' + layout + (!showName ? ' facets-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
<li
:key="childFacet"
v-for="childFacet in Number(facet.total_children)"
class="facet-list-item skeleton"
:style="{
marginBottom: layout == 'grid' && ((metadatumType == 'Relationship' || metadatumType == 'Taxonomy') && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
minHeight: getSkeletonHeight()
}" />
</ul>
<template v-else>
<transition name="filter-item">
<ul
v-if="childFacetsObject[facet.id != undefined ? facet.id : facet.value] && childFacetsObject[facet.id != undefined ? facet.id : facet.value].visible"
class="child-term-facets">
<template v-if="childFacetsObject[facet.id != undefined ? facet.id : facet.value].facets.length">
<facets-list-theme-unit
v-for="(aChildTermFacet, childFacetIndex) of childFacetsObject[facet.id != undefined ? facet.id : facet.value].facets"
:key="childFacetIndex"
:child-facets-object="childFacetsObject"
:facet="aChildTermFacet"
:cloud-rate="cloudRate"
:tainacan-base-url="tainacanBaseUrl"
:layout="layout"
:append-child-terms="appendChildTerms"
:metadatum-type="metadatumType"
:show-items-count="showItemsCount"
:is-loading-child-terms="isloadingChildTerms"
@on-display-child-terms="displayChildTerms" />
</template>
<p
v-else
class="no-child-facet-found">
{{ $root.__( 'This facet children terms do not contain items.', 'tainacan' ) }}
</p>
</ul>
</transition>
</template>
</template>
</li>
</template>
<script>
export default {
props: {
appendChildTerms: Boolean,
facet: Object,
tainacanBaseUrl: String,
showImage: Boolean,
showItemsCount: Boolean,
showSearchBar: Boolean,
isLoadingChildTerms: Boolean,
layout: String,
cloudRate: Number,
metadatumType: String,
childFacetsObject: Object
},
computed:{
facetId() {
return (this.facet.id != undefined ? this.facet.id : this.facet.value);
}
},
methods: {
displayChildTerms(facetId) {
this.$emit('on-display-child-terms', facetId)
},
getSkeletonHeight() {
switch(this.layout) {
case 'grid':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage)
return '230px';
else
return '24px'
case 'list':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage)
return '54px';
else
return '24px'
default: return '54px';
}
}
}
}
</script>

5
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js
View File

@ -1,8 +1,10 @@
import Vue from 'vue';
import FacetsListTheme from './facets-list-theme.vue';
import FacetsListThemeUnit from './facets-list-theme-unit.vue';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
Vue.component('facets-list-theme-unit', FacetsListThemeUnit);
// This is rendered on the theme side.
document.addEventListener("DOMContentLoaded", () => {
@ -28,6 +30,7 @@ document.addEventListener("DOMContentLoaded", () => {
showItemsCount: true,
showSearchBar: false,
showLoadMore: false,
appendChildTerms: false,
layout: 'grid',
cloudRate: 1,
gridMargin: 0,
@ -53,6 +56,7 @@ document.addEventListener("DOMContentLoaded", () => {
layout: this.layout,
cloudRate: this.cloudRate,
gridMargin: this.gridMargin,
appendChildTerms: this.appendChildTerms,
maxFacetsNumber: this.maxFacetsNumber,
maxColumnsCount: this.maxColumnsCount,
tainacanApiRoot: this.tainacanApiRoot,
@ -67,6 +71,7 @@ document.addEventListener("DOMContentLoaded", () => {
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' : true;
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.showItemsCount = this.$el.attributes['show-items-count'] != undefined ? this.$el.attributes['show-items-count'].value == 'true' : true;

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

@ -34,7 +34,7 @@
v-if="isLoading"
:style="{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + 185) + 'px)' : 'inherit',
marginTop: showSearchBar ? '1.5em' : '0px'
marginTop: showSearchBar ? '1.5em' : '4px'
}"
class="facets-list"
:class="'facets-layout-' + layout + (!showName ? ' facets-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
@ -44,7 +44,7 @@
class="facet-list-item skeleton"
:style="{
marginBottom: layout == 'grid' && ((metadatumType == 'Relationship' || metadatumType == 'Taxonomy') && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
height: getSkeletonHeight()
minHeight: getSkeletonHeight()
}" />
</ul>
<div v-else>
@ -55,51 +55,22 @@
marginTop: showSearchBar ? '1.5em' : '0px'
}"
class="facets-list"
:class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
<li
:key="index"
:class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
<facets-list-theme-unit
v-for="(facet, index) of facets"
class="facet-list-item"
:class="(!showImage ? 'facet-without-image' : '')"
:style="{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}">
<a
:id="isNaN(facet.id) ? facet.id : 'facet-id-' + facet.id"
:href="facet.url"
target="_blank"
:style="{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}">
<img
v-if="metadatumType == 'Taxonomy'"
:src="
facet.entity && facet.entity['header_image']
?
facet.entity['header_image']
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`
"
:alt="facet.title ? facet.title : $root.__('Thumbnail', 'tainacan')">
<img
v-if="metadatumType == 'Relationship'"
:src="
facet.entity.thumbnail && facet.entity.thumbnail['tainacan-medium'][0] && facet.entity.thumbnail['tainacan-medium'][0]
?
facet.entity.thumbnail['tainacan-medium'][0]
:
(facet.entity.thumbnail && facet.entity.thumbnail['thumbnail'][0] && facet.entity.thumbnail['thumbnail'][0]
?
facet.entity.thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
"
:alt="facet.title ? facet.title : $root.__('Thumbnail', 'tainacan')">
<span>{{ facet.label ? facet.label : '' }}</span>
<span
v-if="facet.total_items"
class="facet-item-count"
:style="{ display: !showItemsCount ? 'none' : '' }">
&nbsp;({{ facet.total_items }})
</span>
</a>
</li>
:key="index"
:show-search-bar="showSearchBar"
:show-image="showImage"
:child-facets-object="childFacetsObject"
:append-child-terms="appendChildTerms"
:facet="facet"
:cloud-rate="cloudRate"
:tainacan-base-url="tainacanBaseUrl"
:layout="layout"
:metadatum-type="metadatumType"
:show-items-count="showItemsCount"
:is-loading-child-terms="isloadingChildTerms"
@on-display-child-terms="displayChildTerms" />
</ul>
<button
@ -143,11 +114,12 @@ export default {
metadatumType: String,
collectionId: String,
collectionSlug: String,
parentTermId: String,
parentTermId: String,
showImage: Boolean,
showItemsCount: Boolean,
showSearchBar: Boolean,
showLoadMore: Boolean,
appendChildTerms: Boolean,
layout: String,
cloudRate: Number,
gridMargin: Number,
@ -161,10 +133,12 @@ export default {
data() {
return {
facets: [],
childFacetsObject: {},
collection: undefined,
facetsRequestSource: undefined,
searchString: '',
isLoading: false,
isloadingChildTerms: null,
isLoadingCollection: false,
localMaxFacetsNumber: undefined,
localOrder: undefined,
@ -274,6 +248,72 @@ export default {
// console.log(error);
});
},
fetchChildTerms(parentTermId) {
this.isloadingChildTerms = parentTermId;
let endpoint = '/facets/' + this.metadatumId;
let query = endpoint.split('?')[1];
let queryObject = qs.parse(query);
// Set up max facets to be shown
if (this.maxFacetsNumber != undefined && Number(this.maxFacetsNumber) > 0)
queryObject.number = this.maxFacetsNumber;
else if (queryObject.number != undefined && queryObject.number > 0)
this.localMaxFacetsNumber = queryObject.number;
else {
queryObject.number = 12;
this.localMaxFacetsNumber = 12;
}
// Set up searching string
if (this.searchString != undefined)
queryObject.search = this.searchString;
else if (queryObject.search != undefined)
this.searchString = queryObject.search;
else {
delete queryObject.search;
this.searchString = undefined;
}
// Set up paging
queryObject.offset = this.offset;
if (this.lastTerm != undefined)
queryObject.last_term = this.lastTerm;
// Parameter fo tech entity object with image and url
queryObject['context'] = 'extended';
queryObject['parent'] = parentTermId
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject);
this.tainacanAxios.get(endpoint, { cancelToken: this.facetsRequestSource.token })
.then(response => {
let childFacets = [];
for (let facet of response.data.values) {
childFacets.push(Object.assign({
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
}, facet));
}
this.$set(this.childFacetsObject, parentTermId, {
facets: childFacets,
visible: true
});
this.isloadingChildTerms = null;
}).catch(() => {
this.isloadingChildTerms = null;
// console.log(error);
});
},
displayChildTerms(parentTermId) {
if (this.childFacetsObject[parentTermId]) {
this.$set(this.childFacetsObject[parentTermId], 'visible', !this.childFacetsObject[parentTermId].visible);
} else
this.fetchChildTerms(parentTermId)
},
getSkeletonHeight() {
switch(this.layout) {
case 'grid':

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

@ -378,6 +378,7 @@
a {
color: var(--tainacan-block-gray5, $gray5);
line-height: normal;
height: auto;
display: flex;
align-items: center;
@ -412,12 +413,13 @@
text-decoration: none;
}
&.facet_term_with_children {
font-weight: bold;
&.facet-term-with-children{
font-weight: bold !important;
cursor: pointer;
}
.child-term-facets {
padding-left: 1.3em;
margin: 12px 0px -12px 0px;
.facet-list-item {
@ -500,3 +502,16 @@
}
}
}
.filter-item-enter-active {
overflow: hidden;
animation-name: filter-item-in;
animation-duration: 0.1s;
animation-timing-function: ease;
}
.filter-item-leave-active {
overflow: hidden;
animation-name: filter-item-out;
animation-duration: 0.1s;
animation-timing-function: ease;
}

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

@ -194,7 +194,7 @@ registerBlockType('tainacan/facets-list', {
return (
<li
key={ facetId }
className={ 'facet-list-item' + (!showImage ? ' facet-without-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet_term_with_children': '')}
className={ 'facet-list-item' + (!showImage ? ' facet-without-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')}
style={{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}}>
<a
id={ isNaN(facetId) ? facetId : 'facet-id-' + facetId }
@ -234,47 +234,25 @@ registerBlockType('tainacan/facets-list', {
{ facet.total_items ? <span class="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>&nbsp;({ facet.total_items })</span> : null }
</a>
{ isLoadingChildTerms == facetId ?
{ appendChildTerms && facet.total_children > 0 ?
isLoadingChildTerms == facetId ?
<div class="spinner-container">
<Spinner />
</div>
:
( appendChildTerms && childFacetsObject[facetId] && childFacetsObject[facetId].visible ?
( childFacetsObject[facetId] && childFacetsObject[facetId].visible ?
<ul class="child-term-facets">
{
childFacetsObject[facetId].facets.length ?
childFacetsObject[facetId].facets.map((aChildTermFacet) => {
const childFacetId = aChildTermFacet.id ? aChildTermFacet.id : aChildTermFacet.value;
return <li
className={ 'facet-list-item' + (!showImage ? ' facet-without-image' : '') }
style={{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}}>
<a
id={ isNaN(childFacetId) ? childFacetId : 'facet-id-' + childFacetId }
href={ aChildTermFacet.url }
target="_blank"
style={{ fontSize: layout == 'cloud' && aChildTermFacet.total_items ? + (1 + (cloudRate/4) * Math.log(aChildTermFacet.total_items)) + 'rem' : ''}}>
<img
src={
aChildTermFacet.entity && aChildTermFacet.entity['header_image']
?
aChildTermFacet.entity['header_image']
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`
}
alt={ aChildTermFacet.label ? aChildTermFacet.label : __( 'Thumbnail', 'tainacan' ) }/>
<span>{ aChildTermFacet.label ? aChildTermFacet.label : '' }</span>
{ aChildTermFacet.total_items ? <span class="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>&nbsp;({ aChildTermFacet.total_items })</span> : null }
</a>
</li>
return prepareFacet(aChildTermFacet);
})
:
<p class="no-child-facet-found">{ __( 'This facet children terms do not contain items.', 'tainacan' )}</p>
}
</ul>
: null )
}
: null }
</li>
);
}