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

Adds option to display facet name inside the grid image.

This commit is contained in:
mateuswetah 2020-11-27 11:25:28 -03:00
parent a3e0992e8f
commit 108d025c33
8 changed files with 162 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,6 +179,36 @@
width: 100%; width: 100%;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb); border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
box-shadow: none; } box-shadow: none; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item {
display: flex;
align-items: flex-start; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: var(--tainacan-block-gray5, #454647);
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item:hover button {
height: auto;
visibility: visible;
background-color: white !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item:hover button:hover {
background-color: white !important;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid {
padding: 0; padding: 0;
@ -331,53 +361,44 @@
color: var(--tainacan-block-gray5, #454647); color: var(--tainacan-block-gray5, #454647);
border: none; border: none;
font-weight: bold; font-weight: bold;
line-height: normal; } line-height: normal;
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item img, display: block; }
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item img { .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) img,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) img {
height: auto; height: auto;
width: 100%; width: 100%;
padding: 0px; padding: 0px;
margin-bottom: 0.5em; } margin-bottom: 0.5em; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item span.facet-item-count, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) span.facet-item-count,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item span.facet-item-count { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) span.facet-item-count {
color: var(--tainacan-block-gray3, #cbcbcb); } color: var(--tainacan-block-gray3, #cbcbcb); }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item.facet-without-image img, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item.facet-without-image img { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span {
display: none; } display: block;
position: absolute;
background: rgba(255, 255, 255, 0.75);
opacity: 0;
padding: 8px 12px;
word-break: break-word;
transition: opacity 0.5s ease;
max-width: 100%; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span:first-of-type,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span:first-of-type {
left: 0;
bottom: 0;
border-top-right-radius: 2px; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span:last-of-type,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span:last-of-type {
right: 0;
top: 0;
border-bottom-left-radius: 2px; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:hover.facet-with-name-inside-image a span,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:hover.facet-with-name-inside-image a span {
opacity: 1; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:hover a, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:hover a,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:hover a { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:hover a {
color: var(--tainacan-block-gray5, #454647); color: var(--tainacan-block-gray5, #454647);
text-decoration: none; } text-decoration: none; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item {
display: flex;
align-items: flex-start; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: var(--tainacan-block-gray5, #454647);
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item:hover button {
height: auto;
visibility: visible;
background-color: white !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s; }
.wp-block-tainacan-facets-list ul.facets-list-edit li.facet-list-item:hover button:hover {
background-color: white !important;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list {
padding: 0; padding: 0;
@ -600,7 +621,7 @@
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children a, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children a,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children, .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children a { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children a {
color: var(--tainacan-block-gray5, #454647) !important; color: var(--tainacan-block-gray5, #454647);
text-decoration: none; } text-decoration: none; }
.wp-block-tainacan-facets-list .show-more-button { .wp-block-tainacan-facets-list .show-more-button {
margin: 12px auto; margin: 12px auto;

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

File diff suppressed because one or more lines are too long

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

@ -1,7 +1,7 @@
<template> <template>
<li <li
class="facet-list-item" class="facet-list-item"
:class="(!showImage ? 'facet-without-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')" :class="(!showImage ? 'facet-without-image' : '') + (nameInsideImage ? ' facet-with-name-inside-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')"
: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"
@ -71,6 +71,7 @@
v-for="(aChildTermFacet, childFacetIndex) of childFacetsObject[facet.id != undefined ? facet.id : facet.value].facets" v-for="(aChildTermFacet, childFacetIndex) of childFacetsObject[facet.id != undefined ? facet.id : facet.value].facets"
:key="childFacetIndex" :key="childFacetIndex"
:show-image="showImage" :show-image="showImage"
:name-inside-image="nameInsideImage"
:child-facets-object="childFacetsObject" :child-facets-object="childFacetsObject"
:facet="aChildTermFacet" :facet="aChildTermFacet"
:cloud-rate="cloudRate" :cloud-rate="cloudRate"
@ -104,6 +105,7 @@ export default {
showImage: Boolean, showImage: Boolean,
showItemsCount: Boolean, showItemsCount: Boolean,
showSearchBar: Boolean, showSearchBar: Boolean,
nameInsideImage: Boolean,
isLoadingChildTerms: Boolean, isLoadingChildTerms: Boolean,
linkTermFacetsToTermPage: Boolean, linkTermFacetsToTermPage: Boolean,
layout: String, layout: String,

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

@ -30,6 +30,7 @@ document.addEventListener("DOMContentLoaded", () => {
showItemsCount: true, showItemsCount: true,
showSearchBar: false, showSearchBar: false,
showLoadMore: false, showLoadMore: false,
nameInsideImage: false,
linkTermFacetsToTermPage: true, linkTermFacetsToTermPage: true,
appendChildTerms: false, appendChildTerms: false,
layout: 'grid', layout: 'grid',
@ -51,6 +52,7 @@ document.addEventListener("DOMContentLoaded", () => {
collectionSlug: this.collectionSlug, collectionSlug: this.collectionSlug,
parentTermId: this.parentTermId, parentTermId: this.parentTermId,
showImage: this.showImage, showImage: this.showImage,
nameInsideImage: this.nameInsideImage,
showItemsCount: this.showItemsCount, showItemsCount: this.showItemsCount,
showSearchBar: this.showSearchBar, showSearchBar: this.showSearchBar,
showLoadMore: this.showLoadMore, showLoadMore: this.showLoadMore,
@ -76,6 +78,7 @@ document.addEventListener("DOMContentLoaded", () => {
this.appendChildTerms = this.$el.attributes['append-child-terms'] != undefined ? this.$el.attributes['append-child-terms'].value == 'true' : true; 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.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.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.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.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.showLoadMore = this.$el.attributes['show-load-more'] != undefined ? this.$el.attributes['show-load-more'].value == 'true' : false;

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

@ -84,6 +84,7 @@
:key="index" :key="index"
:show-search-bar="showSearchBar" :show-search-bar="showSearchBar"
:show-image="showImage" :show-image="showImage"
:name-inside-image="nameInsideImage"
:child-facets-object="childFacetsObject" :child-facets-object="childFacetsObject"
:append-child-terms="appendChildTerms" :append-child-terms="appendChildTerms"
:facet="facet" :facet="facet"
@ -111,6 +112,7 @@
:key="index" :key="index"
:show-search-bar="showSearchBar" :show-search-bar="showSearchBar"
:show-image="showImage" :show-image="showImage"
:name-inside-image="nameInsideImage"
:child-facets-object="childFacetsObject" :child-facets-object="childFacetsObject"
:append-child-terms="appendChildTerms" :append-child-terms="appendChildTerms"
:facet="facet" :facet="facet"
@ -168,6 +170,7 @@ export default {
collectionSlug: String, collectionSlug: String,
parentTermId: String, parentTermId: String,
showImage: Boolean, showImage: Boolean,
nameInsideImage: Boolean,
showItemsCount: Boolean, showItemsCount: Boolean,
showSearchBar: Boolean, showSearchBar: Boolean,
showLoadMore: Boolean, showLoadMore: Boolean,

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

@ -217,6 +217,44 @@
} }
} }
// Apply to all view modes
ul.facets-list-edit li.facet-list-item {
display: flex;
align-items: flex-start;
button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: var(--tainacan-block-gray5, $gray5);
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999;
}
&:hover button {
height: auto;
visibility: visible;
background-color: rgba(255, 255, 255, 1) !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid var(--tainacan-block-gray3, $gray3);
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s;
}
&:hover button:hover {
background-color: rgba(255, 255, 255, 1) !important;
border: 1px solid var(--tainacan-block-gray3, $gray3) !important;
}
}
// Grid View Mode ---------------------------------------------------- // Grid View Mode ----------------------------------------------------
ul.facets-list.facets-layout-grid, ul.facets-list.facets-layout-grid,
ul.facets-list-edit.facets-layout-grid { ul.facets-list-edit.facets-layout-grid {
@ -354,22 +392,41 @@
border: none; border: none;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
display: block;
} }
img { &:not(.facet-with-name-inside-image) img {
height: auto; height: auto;
width: 100%; width: 100%;
padding: 0px; padding: 0px;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
span.facet-item-count { &:not(.facet-with-name-inside-image) span.facet-item-count {
color: var(--tainacan-block-gray3, $gray3); color: var(--tainacan-block-gray3, $gray3);
} }
&.facet-without-image img { &.facet-with-name-inside-image a span {
display: none; display: block;
position: absolute;
background: rgba(255, 255, 255, 0.75);
opacity: 0;
padding: 8px 12px;
word-break: break-word;
transition: opacity 0.5s ease;
max-width: 100%;
} }
&.facet-with-name-inside-image a span:first-of-type {
left: 0;
bottom: 0;
border-top-right-radius: 2px;
}
&.facet-with-name-inside-image a span:last-of-type {
right: 0;
top: 0;
border-bottom-left-radius: 2px;
}
&:hover.facet-with-name-inside-image a span { opacity: 1 };
&:hover a { &:hover a {
color: var(--tainacan-block-gray5, $gray5); color: var(--tainacan-block-gray5, $gray5);
@ -377,42 +434,6 @@
} }
} }
} }
ul.facets-list-edit li.facet-list-item {
display: flex;
align-items: flex-start;
button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: var(--tainacan-block-gray5, $gray5);
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999;
}
&:hover button {
height: auto;
visibility: visible;
background-color: rgba(255, 255, 255, 1) !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid var(--tainacan-block-gray3, $gray3);
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s;
}
&:hover button:hover {
background-color: rgba(255, 255, 255, 1) !important;
border: 1px solid var(--tainacan-block-gray3, $gray3) !important;
}
}
// List View Mode ---------------------------------------------------- // List View Mode ----------------------------------------------------
ul.facets-list.facets-layout-list, ul.facets-list.facets-layout-list,

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

@ -58,6 +58,10 @@ registerBlockType('tainacan/facets-list', {
type: Boolean, type: Boolean,
default: true default: true
}, },
nameInsideImage: {
type: Boolean,
default: false
},
showItemsCount: { showItemsCount: {
type: Boolean, type: Boolean,
default: true default: true
@ -163,6 +167,7 @@ registerBlockType('tainacan/facets-list', {
collectionId, collectionId,
collectionSlug, collectionSlug,
showImage, showImage,
nameInsideImage,
showItemsCount, showItemsCount,
showLoadMore, showLoadMore,
showSearchBar, showSearchBar,
@ -201,6 +206,10 @@ registerBlockType('tainacan/facets-list', {
showImage = true; showImage = true;
setAttributes({ showImage: showImage }); setAttributes({ showImage: showImage });
} }
if (nameInsideImage === undefined) {
nameInsideImage = true;
setAttributes({ nameInsideImage: nameInsideImage });
}
if (showItemsCount === undefined) { if (showItemsCount === undefined) {
showItemsCount = true; showItemsCount = true;
setAttributes({ showItemsCount: showItemsCount }); setAttributes({ showItemsCount: showItemsCount });
@ -215,7 +224,7 @@ registerBlockType('tainacan/facets-list', {
return ( return (
<li <li
key={ facetId } 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' : '') + (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 && metadatumType == 'Taxonomy') ? facet.term_url : facet.url) : (facet.total_children > 0 ? null : (linkTermFacetsToTermPage ? facet.term_url : facet.url)) }
@ -691,12 +700,12 @@ registerBlockType('tainacan/facets-list', {
<div> <div>
{ (metadatumType == 'Taxonomy' || metadatumType == 'Relationship') ? { (metadatumType == 'Taxonomy' || metadatumType == 'Relationship') ?
<ToggleControl <ToggleControl
label={__('Image', 'tainacan')} label={__('Name inside image', 'tainacan')}
help={ showImage ? __("Toggle to show facet's image", 'tainacan') : __("Do not show facet's image", 'tainacan')} help={ nameInsideImage ? __("Toggle to show facet's name inside the image", 'tainacan') : __("Do not show facet's name image", 'tainacan')}
checked={ showImage } checked={ nameInsideImage }
onChange={ ( isChecked ) => { onChange={ ( isChecked ) => {
showImage = isChecked; nameInsideImage = isChecked;
setAttributes({ showImage: showImage }); setAttributes({ nameInsideImage: nameInsideImage });
updateContent(); updateContent();
} }
} }
@ -992,6 +1001,7 @@ registerBlockType('tainacan/facets-list', {
collectionSlug, collectionSlug,
parentTerm, parentTerm,
showImage, showImage,
nameInsideImage,
showItemsCount, showItemsCount,
showLoadMore, showLoadMore,
layout, layout,
@ -1013,6 +1023,7 @@ registerBlockType('tainacan/facets-list', {
collection-slug={ collectionSlug } collection-slug={ collectionSlug }
parent-term-id={ parentTerm ? parentTerm.id : null } parent-term-id={ parentTerm ? parentTerm.id : null }
show-image={ '' + showImage } show-image={ '' + showImage }
name-inside-image={ '' + nameInsideImage }
show-items-count={ '' + showItemsCount } show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar } show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore } show-load-more={ '' + showLoadMore }