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%;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
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-edit.facets-layout-grid {
padding: 0;
@ -331,53 +361,44 @@
color: var(--tainacan-block-gray5, #454647);
border: none;
font-weight: bold;
line-height: normal; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item img,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item img {
line-height: normal;
display: block; }
.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;
width: 100%;
padding: 0px;
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-edit.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:not(.facet-with-name-inside-image) span.facet-item-count {
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-edit.facets-layout-grid li.facet-list-item.facet-without-image img {
display: none; }
.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-with-name-inside-image a span {
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-edit.facets-layout-grid li.facet-list-item:hover a {
color: var(--tainacan-block-gray5, #454647);
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-edit.facets-layout-list {
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-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 {
color: var(--tainacan-block-gray5, #454647) !important;
color: var(--tainacan-block-gray5, #454647);
text-decoration: none; }
.wp-block-tainacan-facets-list .show-more-button {
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>
<li
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' : ''}">
<a
: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"
:key="childFacetIndex"
:show-image="showImage"
:name-inside-image="nameInsideImage"
:child-facets-object="childFacetsObject"
:facet="aChildTermFacet"
:cloud-rate="cloudRate"
@ -104,6 +105,7 @@ export default {
showImage: Boolean,
showItemsCount: Boolean,
showSearchBar: Boolean,
nameInsideImage: Boolean,
isLoadingChildTerms: Boolean,
linkTermFacetsToTermPage: Boolean,
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,
showSearchBar: false,
showLoadMore: false,
nameInsideImage: false,
linkTermFacetsToTermPage: true,
appendChildTerms: false,
layout: 'grid',
@ -51,6 +52,7 @@ document.addEventListener("DOMContentLoaded", () => {
collectionSlug: this.collectionSlug,
parentTermId: this.parentTermId,
showImage: this.showImage,
nameInsideImage: this.nameInsideImage,
showItemsCount: this.showItemsCount,
showSearchBar: this.showSearchBar,
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.parentTermId = this.$el.attributes['parent-term-id'] != undefined ? this.$el.attributes['parent-term-id'].value : undefined;
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
this.nameInsideImage = this.$el.attributes['name-inside-image'] != undefined ? this.$el.attributes['name-inside-image'].value == 'true' : false;
this.showItemsCount = this.$el.attributes['show-items-count'] != undefined ? this.$el.attributes['show-items-count'].value == 'true' : true;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
this.showLoadMore = this.$el.attributes['show-load-more'] != undefined ? this.$el.attributes['show-load-more'].value == 'true' : false;

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

@ -84,6 +84,7 @@
:key="index"
:show-search-bar="showSearchBar"
:show-image="showImage"
:name-inside-image="nameInsideImage"
:child-facets-object="childFacetsObject"
:append-child-terms="appendChildTerms"
:facet="facet"
@ -111,6 +112,7 @@
:key="index"
:show-search-bar="showSearchBar"
:show-image="showImage"
:name-inside-image="nameInsideImage"
:child-facets-object="childFacetsObject"
:append-child-terms="appendChildTerms"
:facet="facet"
@ -168,6 +170,7 @@ export default {
collectionSlug: String,
parentTermId: String,
showImage: Boolean,
nameInsideImage: Boolean,
showItemsCount: Boolean,
showSearchBar: 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 ----------------------------------------------------
ul.facets-list.facets-layout-grid,
ul.facets-list-edit.facets-layout-grid {
@ -354,22 +392,41 @@
border: none;
font-weight: bold;
line-height: normal;
display: block;
}
img {
&:not(.facet-with-name-inside-image) img {
height: auto;
width: 100%;
padding: 0px;
margin-bottom: 0.5em;
}
span.facet-item-count {
&:not(.facet-with-name-inside-image) span.facet-item-count {
color: var(--tainacan-block-gray3, $gray3);
}
&.facet-without-image img {
display: none;
&.facet-with-name-inside-image a span {
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 {
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 ----------------------------------------------------
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,
default: true
},
nameInsideImage: {
type: Boolean,
default: false
},
showItemsCount: {
type: Boolean,
default: true
@ -163,6 +167,7 @@ registerBlockType('tainacan/facets-list', {
collectionId,
collectionSlug,
showImage,
nameInsideImage,
showItemsCount,
showLoadMore,
showSearchBar,
@ -201,6 +206,10 @@ registerBlockType('tainacan/facets-list', {
showImage = true;
setAttributes({ showImage: showImage });
}
if (nameInsideImage === undefined) {
nameInsideImage = true;
setAttributes({ nameInsideImage: nameInsideImage });
}
if (showItemsCount === undefined) {
showItemsCount = true;
setAttributes({ showItemsCount: showItemsCount });
@ -215,7 +224,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' : '') + (nameInsideImage ? ' facet-with-name-inside-image' : '') + ((appendChildTerms && facet.total_children > 0) ? ' facet-term-with-children': '')}>
<a
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)) }
@ -691,12 +700,12 @@ registerBlockType('tainacan/facets-list', {
<div>
{ (metadatumType == 'Taxonomy' || metadatumType == 'Relationship') ?
<ToggleControl
label={__('Image', 'tainacan')}
help={ showImage ? __("Toggle to show facet's image", 'tainacan') : __("Do not show facet's image", 'tainacan')}
checked={ showImage }
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')}
checked={ nameInsideImage }
onChange={ ( isChecked ) => {
showImage = isChecked;
setAttributes({ showImage: showImage });
nameInsideImage = isChecked;
setAttributes({ nameInsideImage: nameInsideImage });
updateContent();
}
}
@ -992,6 +1001,7 @@ registerBlockType('tainacan/facets-list', {
collectionSlug,
parentTerm,
showImage,
nameInsideImage,
showItemsCount,
showLoadMore,
layout,
@ -1013,6 +1023,7 @@ registerBlockType('tainacan/facets-list', {
collection-slug={ collectionSlug }
parent-term-id={ parentTerm ? parentTerm.id : null }
show-image={ '' + showImage }
name-inside-image={ '' + nameInsideImage }
show-items-count={ '' + showItemsCount }
show-search-bar={ '' + showSearchBar }
show-load-more={ '' + showLoadMore }