Client theme side of the collpasable parent facets

src/assets/css/tainacan-gutenberg-block-facets-list.css

@@ -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.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 {
+      .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-term-with-children {
-        font-weight: bold;
+        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 */

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

@@ -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>

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

@@ -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;

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

@@ -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>
@@ -56,50 +56,21 @@
                     }"
                     class="facets-list"
                     :class="'facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">    
-                <li
+                <facets-list-theme-unit
-                        :key="index"
                         v-for="(facet, index) of facets"
-                        class="facet-list-item"
+                        :key="index"
-                        :class="(!showImage ? 'facet-without-image' : '')"
+                        :show-search-bar="showSearchBar"
-                        :style="{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}">      
+                        :show-image="showImage"
-                    <a 
+                        :child-facets-object="childFacetsObject"
-                            :id="isNaN(facet.id) ? facet.id : 'facet-id-' + facet.id"
+                        :append-child-terms="appendChildTerms"
-                            :href="facet.url"
+                        :facet="facet"
-                            target="_blank"
+                        :cloud-rate="cloudRate"
-                            :style="{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}">
+                        :tainacan-base-url="tainacanBaseUrl"
-                        <img
+                        :layout="layout"
-                            v-if="metadatumType == 'Taxonomy'"
+                        :metadatum-type="metadatumType"
-                            :src=" 
+                        :show-items-count="showItemsCount"
-                                facet.entity && facet.entity['header_image']
+                        :is-loading-child-terms="isloadingChildTerms"
-                                    ?    
+                        @on-display-child-terms="displayChildTerms" />
-                                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>
             </ul>
 
             <button
@@ -148,6 +119,7 @@ export default {
         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':

src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss

@@ -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 {
+            &.facet-term-with-children{
-                font-weight: bold;
+                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;   
+}

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

@@ -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>
-                    
+                    { appendChildTerms && facet.total_children > 0 ?
-                    { isLoadingChildTerms == facetId ? 
+                        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 prepareFacet(aChildTermFacet);
-
-                                            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>
                                         })
                                         :
                                         <p class="no-child-facet-found">{ __( 'This facet children terms do not contain items.', 'tainacan' )}</p>
                                 }
                             </ul>
                         : null )
-                    }
+                    : null }
                 </li>
             );
         }