Basics for new gutenberg block loading the full items list.
This commit is contained in:
Mateus Machado Luna
parent
8cf2fa0b61
commit
c2e6063297
|
|
@ -33,5 +33,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/views/gutenberg-blocks/t
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
|
||||||
|
|
||||||
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-13 src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss:src/assets/css/tainacan-gutenberg-block-faceted-search.css
|
||||||
|
|
||||||
echo "Compilação do Sass Concluído!"
|
echo "Compilação do Sass Concluído!"
|
||||||
exit 0
|
exit 0
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,546 @@
|
||||||
|
[data-align='full'] .block-control {
|
||||||
|
width: calc(100% + 14px); }
|
||||||
|
|
||||||
|
.block-control {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
top: -14px;
|
||||||
|
left: -14px;
|
||||||
|
width: calc(100% + 28px);
|
||||||
|
background: #f2f2f2; }
|
||||||
|
.block-control p {
|
||||||
|
font-size: 0.875em !important;
|
||||||
|
margin: 12px 1.5em 16px 0;
|
||||||
|
fill: #555758; }
|
||||||
|
.block-control p svg {
|
||||||
|
top: 4px;
|
||||||
|
margin-right: 0.75em;
|
||||||
|
position: relative;
|
||||||
|
fill: #555758; }
|
||||||
|
|
||||||
|
.components-placeholder {
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: #f6f6f6; }
|
||||||
|
.components-placeholder .components-placeholder__label {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
.components-placeholder .components-placeholder__fieldset p {
|
||||||
|
font-size: 1em !important;
|
||||||
|
margin: 12px 0;
|
||||||
|
color: #454647;
|
||||||
|
fill: #555758; }
|
||||||
|
.components-placeholder .components-placeholder__fieldset p svg {
|
||||||
|
margin-right: 1em;
|
||||||
|
top: 4px;
|
||||||
|
position: relative;
|
||||||
|
fill: #555758; }
|
||||||
|
|
||||||
|
.wp-block-tainacan-modal {
|
||||||
|
width: 50%; }
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.wp-block-tainacan-modal {
|
||||||
|
width: 75%; } }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-modal {
|
||||||
|
width: 100%; } }
|
||||||
|
.wp-block-tainacan-modal.dynamic-modal {
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
width: 80vw;
|
||||||
|
height: 80vh; }
|
||||||
|
.wp-block-tainacan-modal.dynamic-modal iframe {
|
||||||
|
width: calc(100% + 32px);
|
||||||
|
height: calc(100% - 128px);
|
||||||
|
margin-left: -16px; }
|
||||||
|
.wp-block-tainacan-modal.dynamic-modal .modal-footer-area {
|
||||||
|
height: 68px;
|
||||||
|
width: calc(100% + 32px);
|
||||||
|
margin-left: -16px !important;
|
||||||
|
padding: 1.2em 1.2em !important;
|
||||||
|
border-top: 1px solid #cbcbcb; }
|
||||||
|
.wp-block-tainacan-modal .spinner-container {
|
||||||
|
min-height: 56px;
|
||||||
|
padding: 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #555758; }
|
||||||
|
.wp-block-tainacan-modal .spinner-container .components-spineer {
|
||||||
|
margin: 8px; }
|
||||||
|
.wp-block-tainacan-modal .components-modal__header .components-icon-button {
|
||||||
|
padding-right: 0; }
|
||||||
|
.wp-block-tainacan-modal hr {
|
||||||
|
margin: 5px 0.75em; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 14px; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control {
|
||||||
|
width: 60%; }
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control {
|
||||||
|
width: 95%; } }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control:nth-child(2) {
|
||||||
|
flex-shrink: 2; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control .components-base-control__field {
|
||||||
|
flex-wrap: wrap; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control label.components-base-control__label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #454647;
|
||||||
|
font-size: 1em;
|
||||||
|
text-align: center; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control input.components-text-control__input {
|
||||||
|
padding: 5px 8px;
|
||||||
|
height: 28px; }
|
||||||
|
.wp-block-tainacan-modal .modal-radio-area-label {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 1.75em; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
|
||||||
|
padding: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-ms-grid-columns: 250px 250px;
|
||||||
|
grid-template-columns: repeat(auto-fill, 250px);
|
||||||
|
grid-gap: 0px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 12px;
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-base-control,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control {
|
||||||
|
overflow: hidden; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list svg.dashicon.components-checkbox-control__checked,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field svg.dashicon.components-checkbox-control__checked {
|
||||||
|
fill: black; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item img,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option img,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item img,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 10px; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 85%; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
|
||||||
|
max-width: 80%; } }
|
||||||
|
.wp-block-tainacan-modal .modal-loadmore-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center; }
|
||||||
|
.wp-block-tainacan-modal .modal-loadmore-section p {
|
||||||
|
color: #555758;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-top: 2px; }
|
||||||
|
.wp-block-tainacan-modal .modal-footer-area {
|
||||||
|
border-top: 1px solid #e2e4e7;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 16px 0 16px;
|
||||||
|
margin: 0 -16px; }
|
||||||
|
.wp-block-tainacan-modal .modal-footer-area p {
|
||||||
|
padding: 0 12px;
|
||||||
|
color: #454647; }
|
||||||
|
|
||||||
|
.wp-block-tainacan-facets-list {
|
||||||
|
margin: 2em auto; }
|
||||||
|
.wp-block-tainacan-facets-list .spinner-container {
|
||||||
|
min-height: 56px;
|
||||||
|
padding: 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #555758; }
|
||||||
|
@-webkit-keyframes skeleton-animation {
|
||||||
|
0% {
|
||||||
|
opacity: 1.0; }
|
||||||
|
50% {
|
||||||
|
opacity: 0.2; }
|
||||||
|
100% {
|
||||||
|
opacity: 1.0; } }
|
||||||
|
@-moz-keyframes skeleton-animation {
|
||||||
|
0% {
|
||||||
|
opacity: 1.0; }
|
||||||
|
50% {
|
||||||
|
opacity: 0.2; }
|
||||||
|
100% {
|
||||||
|
opacity: 1.0; } }
|
||||||
|
@-o-keyframes skeleton-animation {
|
||||||
|
0% {
|
||||||
|
opacity: 1.0; }
|
||||||
|
50% {
|
||||||
|
opacity: 0.2; }
|
||||||
|
100% {
|
||||||
|
opacity: 1.0; } }
|
||||||
|
@keyframes skeleton-animation {
|
||||||
|
0% {
|
||||||
|
opacity: 1.0; }
|
||||||
|
50% {
|
||||||
|
opacity: 0.2; }
|
||||||
|
100% {
|
||||||
|
opacity: 1.0; } }
|
||||||
|
.wp-block-tainacan-facets-list .skeleton {
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
-webkit-animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
-moz-animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
-o-animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
animation: skeleton-animation 1.8s ease infinite; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
text-decoration: none !important; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header:hover {
|
||||||
|
text-decoration: none; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name {
|
||||||
|
width: auto;
|
||||||
|
min-width: 350px;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 1em 100px 1em 1em;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 1.5em;
|
||||||
|
min-height: 165px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #454647; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name h3 {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.3em;
|
||||||
|
margin: 0; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name h3:hover {
|
||||||
|
text-decoration: none; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name span.label {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.75em; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name.only-collection-name {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1em; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name.only-collection-name h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.75em; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-thumbnail {
|
||||||
|
height: 145px;
|
||||||
|
width: 145px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 80px;
|
||||||
|
border: 4px solid white;
|
||||||
|
margin: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
margin-left: -155px;
|
||||||
|
left: 82px;
|
||||||
|
background-color: #dbdbdb; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-header-image {
|
||||||
|
width: auto;
|
||||||
|
min-width: 150px;
|
||||||
|
min-height: 165px;
|
||||||
|
flex-grow: 2;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-color: #dbdbdb; }
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header {
|
||||||
|
flex-wrap: wrap-reverse; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 100% !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 64px 1em 0em 1em; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-name h3 {
|
||||||
|
margin-bottom: 1em; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-thumbnail {
|
||||||
|
left: calc(-50% + 78px) !important;
|
||||||
|
top: -78px !important; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-collection-header .collection-header-image {
|
||||||
|
background-color: transparent; } }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #cbcbcb;
|
||||||
|
padding: 1.00em 0.5em 0.75em 0.5em; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar {
|
||||||
|
flex-wrap: wrap; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar .search-button {
|
||||||
|
order: 4;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 37px; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar input {
|
||||||
|
width: 100% !important;
|
||||||
|
order: 5;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
padding-left: 4px !important;
|
||||||
|
border-color: #dbdbdb !important; } }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button {
|
||||||
|
margin-right: 0.75em;
|
||||||
|
padding: 0 0.35em;
|
||||||
|
min-height: 28px;
|
||||||
|
z-index: 2;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button svg {
|
||||||
|
fill: #cbcbcb;
|
||||||
|
transition: fill 0.4s ease; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button:hover svg {
|
||||||
|
fill: #545758; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button:focus, .wp-block-tainacan-facets-list .facets-search-bar button:active {
|
||||||
|
border: none;
|
||||||
|
box-shadow: none; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button.sorting-button-selected svg {
|
||||||
|
fill: #545758; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button.next-button {
|
||||||
|
margin-right: 0em;
|
||||||
|
padding: 0; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button.next-button svg {
|
||||||
|
fill: #298596; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button.previous-button {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 1em;
|
||||||
|
padding: 0; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button.previous-button svg {
|
||||||
|
fill: #298596; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar button[disabled] svg {
|
||||||
|
fill: #f2f2f2;
|
||||||
|
cursor: not-allowed; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar input {
|
||||||
|
height: 32px;
|
||||||
|
width: 20%;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-left: -52px;
|
||||||
|
padding-left: 52px;
|
||||||
|
border: 1px solid white;
|
||||||
|
transition: border-color 0.7s ease, width 0.5s ease-in; }
|
||||||
|
.wp-block-tainacan-facets-list .facets-search-bar input:focus, .wp-block-tainacan-facets-list .facets-search-bar input:active, .wp-block-tainacan-facets-list .facets-search-bar input:hover {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
box-shadow: none; }
|
||||||
|
.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;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||||
|
grid-template-columns: repeat(auto-fill, 220px);
|
||||||
|
grid-gap: 0px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
list-style-type: none; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: 12px;
|
||||||
|
width: 185px; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item a,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item a {
|
||||||
|
color: #454647;
|
||||||
|
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 {
|
||||||
|
height: auto;
|
||||||
|
width: 185px;
|
||||||
|
min-width: 185px;
|
||||||
|
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 {
|
||||||
|
color: #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:hover a,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:hover a {
|
||||||
|
color: #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: #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 {
|
||||||
|
visibility: visible;
|
||||||
|
background-color: white !important;
|
||||||
|
opacity: 1;
|
||||||
|
right: -8px;
|
||||||
|
top: -8px;
|
||||||
|
border: 1px solid #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 #cbcbcb !important; }
|
||||||
|
@media only screen and (max-width: 498px) {
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, 100%); }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item {
|
||||||
|
width: 100%; }
|
||||||
|
.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 {
|
||||||
|
width: 100%; } }
|
||||||
|
.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;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
list-style-type: none; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item {
|
||||||
|
position: relative;
|
||||||
|
margin: 12px 12px 24px 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
min-height: 54px;
|
||||||
|
min-width: calc(20% - 24px);
|
||||||
|
width: calc(20% - 24px); }
|
||||||
|
.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: #454647;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
word-break: break-all;
|
||||||
|
word-break: break-word; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item img,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item img {
|
||||||
|
height: auto;
|
||||||
|
width: 54px;
|
||||||
|
min-width: 54px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-right: 20px; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet-without-image,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-without-image {
|
||||||
|
min-height: 0.875em; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet-without-image a,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-without-image a {
|
||||||
|
height: 0.875em; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet-without-image img,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-without-image img {
|
||||||
|
display: none; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item span.facet-item-count,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item span.facet-item-count {
|
||||||
|
color: #cbcbcb;
|
||||||
|
word-break: break-all; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item:hover a,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item:hover a {
|
||||||
|
color: #454647;
|
||||||
|
text-decoration: none; }
|
||||||
|
@media only screen and (max-width: 1600px) {
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item {
|
||||||
|
min-width: calc(25% - 24px);
|
||||||
|
width: calc(25% - 24px); } }
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item {
|
||||||
|
min-width: calc(33.333% - 24px);
|
||||||
|
width: calc(33.333% - 24px); } }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item {
|
||||||
|
min-width: calc(50% - 24px);
|
||||||
|
width: calc(50% - 24px); } }
|
||||||
|
@media only screen and (max-width: 498px) {
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item {
|
||||||
|
min-width: calc(100% - 24px);
|
||||||
|
width: calc(100% - 24px); } }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud {
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px 12px;
|
||||||
|
line-height: normal;
|
||||||
|
vertical-align: middle; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item a,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item a {
|
||||||
|
color: #454647;
|
||||||
|
display: inline;
|
||||||
|
min-height: 54px; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item img,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item img {
|
||||||
|
height: auto;
|
||||||
|
width: 54px;
|
||||||
|
min-width: 54px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-right: 20px; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item.facet-without-image img,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item.facet-without-image img {
|
||||||
|
display: none; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item span.facet-item-count,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item span.facet-item-count {
|
||||||
|
color: #cbcbcb; }
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover a,
|
||||||
|
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover a {
|
||||||
|
color: #298596;
|
||||||
|
text-decoration: none; }
|
||||||
|
.wp-block-tainacan-facets-list .show-more-button {
|
||||||
|
margin: 12px auto;
|
||||||
|
padding: 0.25em;
|
||||||
|
display: block;
|
||||||
|
background: #298596;
|
||||||
|
border: none;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
cursor: pointer; }
|
||||||
|
.wp-block-tainacan-facets-list .show-more-button[disabled] {
|
||||||
|
background-color: #cbcbcb; }
|
||||||
|
.wp-block-tainacan-facets-list .show-more-button i > svg {
|
||||||
|
fill: white; }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=tainacan-gutenberg-block-faceted-search.css.map */
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -19,6 +19,7 @@ function tainacan_blocks_add_gutenberg_blocks_actions() {
|
||||||
add_action('init', 'tainacan_blocks_register_tainacan_carousel_items_list');
|
add_action('init', 'tainacan_blocks_register_tainacan_carousel_items_list');
|
||||||
add_action('init', 'tainacan_blocks_register_tainacan_carousel_terms_list');
|
add_action('init', 'tainacan_blocks_register_tainacan_carousel_terms_list');
|
||||||
add_action('init', 'tainacan_blocks_register_tainacan_search_bar');
|
add_action('init', 'tainacan_blocks_register_tainacan_search_bar');
|
||||||
|
add_action('init', 'tainacan_blocks_register_tainacan_faceted_search');
|
||||||
add_action('init', 'tainacan_blocks_register_tainacan_collections_list');
|
add_action('init', 'tainacan_blocks_register_tainacan_collections_list');
|
||||||
add_action('init', 'tainacan_blocks_register_tainacan_carousel_collections_list');
|
add_action('init', 'tainacan_blocks_register_tainacan_carousel_collections_list');
|
||||||
add_action('init', 'tainacan_blocks_register_tainacan_facets_list');
|
add_action('init', 'tainacan_blocks_register_tainacan_facets_list');
|
||||||
|
|
@ -147,6 +148,37 @@ function tainacan_blocks_register_tainacan_dynamic_items_list(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function tainacan_blocks_register_tainacan_faceted_search(){
|
||||||
|
global $TAINACAN_BASE_URL;
|
||||||
|
|
||||||
|
wp_register_script(
|
||||||
|
'faceted-search-theme',
|
||||||
|
$TAINACAN_BASE_URL . '/assets/js/theme_search.js',
|
||||||
|
['underscore']
|
||||||
|
//array('wp-components')
|
||||||
|
);
|
||||||
|
|
||||||
|
wp_register_script(
|
||||||
|
'faceted-search',
|
||||||
|
$TAINACAN_BASE_URL . '/assets/js/block_faceted_search.js',
|
||||||
|
array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor')
|
||||||
|
);
|
||||||
|
|
||||||
|
wp_register_style(
|
||||||
|
'faceted-search',
|
||||||
|
$TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-faceted-search.css',
|
||||||
|
array('wp-edit-blocks')
|
||||||
|
);
|
||||||
|
|
||||||
|
if (function_exists('register_block_type')) {
|
||||||
|
register_block_type( 'tainacan/faceted-search', array(
|
||||||
|
'editor_script' => 'faceted-search',
|
||||||
|
'style' => 'faceted-search',
|
||||||
|
'script' => 'faceted-search-theme'
|
||||||
|
) );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function tainacan_blocks_register_tainacan_carousel_items_list(){
|
function tainacan_blocks_register_tainacan_carousel_items_list(){
|
||||||
global $TAINACAN_BASE_URL;
|
global $TAINACAN_BASE_URL;
|
||||||
|
|
||||||
|
|
@ -314,6 +346,10 @@ function tainacan_blocks_add_plugin_settings() {
|
||||||
wp_localize_script( 'carousel-items-list', 'tainacan_blocks', $settings );
|
wp_localize_script( 'carousel-items-list', 'tainacan_blocks', $settings );
|
||||||
wp_localize_script( 'carousel-terms-list', 'tainacan_blocks', $settings );
|
wp_localize_script( 'carousel-terms-list', 'tainacan_blocks', $settings );
|
||||||
wp_localize_script( 'search-bar', 'tainacan_blocks', $settings );
|
wp_localize_script( 'search-bar', 'tainacan_blocks', $settings );
|
||||||
|
wp_localize_script( 'faceted-search', 'tainacan_blocks', $settings );
|
||||||
|
// wp_localize_script( 'faceted-search-theme', 'tainacan_plugin', $settings );
|
||||||
|
wp_localize_script( 'faceted-search-theme', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params() );
|
||||||
|
|
||||||
wp_localize_script( 'collections-list', 'tainacan_blocks', $settings );
|
wp_localize_script( 'collections-list', 'tainacan_blocks', $settings );
|
||||||
wp_localize_script( 'carousel-collections-list', 'tainacan_blocks', $settings );
|
wp_localize_script( 'carousel-collections-list', 'tainacan_blocks', $settings );
|
||||||
wp_localize_script( 'facets-list', 'tainacan_blocks', $settings );
|
wp_localize_script( 'facets-list', 'tainacan_blocks', $settings );
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,452 @@
|
||||||
|
@import '../../gutenberg-blocks-style.scss';
|
||||||
|
|
||||||
|
.wp-block-tainacan-facets-list {
|
||||||
|
margin: 2em auto;
|
||||||
|
|
||||||
|
// Spinner
|
||||||
|
.spinner-container {
|
||||||
|
min-height: 56px;
|
||||||
|
padding: 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #555758;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skeleton loading
|
||||||
|
@-webkit-keyframes skeleton-animation {
|
||||||
|
0%{opacity: 1.0}
|
||||||
|
50%{opacity: 0.2}
|
||||||
|
100%{opacity: 1.0}
|
||||||
|
}
|
||||||
|
@-moz-keyframes skeleton-animation {
|
||||||
|
0%{opacity: 1.0}
|
||||||
|
50%{opacity: 0.2}
|
||||||
|
100%{opacity: 1.0}
|
||||||
|
}
|
||||||
|
@-o-keyframes skeleton-animation {
|
||||||
|
0%{opacity: 1.0}
|
||||||
|
50%{opacity: 0.2}
|
||||||
|
100%{opacity: 1.0}
|
||||||
|
}
|
||||||
|
@keyframes skeleton-animation {
|
||||||
|
0%{opacity: 1.0}
|
||||||
|
50%{opacity: 0.2}
|
||||||
|
100%{opacity: 1.0}
|
||||||
|
}
|
||||||
|
.skeleton {
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
|
||||||
|
-webkit-animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
-moz-animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
-o-animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
animation: skeleton-animation 1.8s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collection header
|
||||||
|
.facets-collection-header {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
text-decoration: none !important;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-name {
|
||||||
|
width: auto;
|
||||||
|
min-width: 350px;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 1em 100px 1em 1em;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 1.5em;
|
||||||
|
min-height: 165px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #454647;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.3em;
|
||||||
|
margin: 0;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span.label {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.only-collection-name {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1em;
|
||||||
|
h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.collection-thumbnail {
|
||||||
|
height: 145px;
|
||||||
|
width: 145px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 80px;
|
||||||
|
border: 4px solid white;
|
||||||
|
margin: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
margin-left: -155px;
|
||||||
|
left: 82px;
|
||||||
|
background-color: #dbdbdb;
|
||||||
|
}
|
||||||
|
.collection-header-image {
|
||||||
|
width: auto;
|
||||||
|
min-width: 150px;
|
||||||
|
min-height: 165px;
|
||||||
|
flex-grow: 2;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-color: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
flex-wrap: wrap-reverse;
|
||||||
|
|
||||||
|
.collection-name {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 100% !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 64px 1em 0em 1em;
|
||||||
|
h3 { margin-bottom: 1em; }
|
||||||
|
}
|
||||||
|
.collection-thumbnail {
|
||||||
|
left: calc(-50% + 78px) !important;
|
||||||
|
top: -78px !important;
|
||||||
|
}
|
||||||
|
.collection-header-image {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search control bar
|
||||||
|
.facets-search-bar {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #cbcbcb;
|
||||||
|
padding: 1.00em 0.5em 0.75em 0.5em;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
order: 4;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 37px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 100% !important;
|
||||||
|
order: 5;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
padding-left: 4px !important;
|
||||||
|
border-color: #dbdbdb !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-right: 0.75em;
|
||||||
|
padding: 0 0.35em;
|
||||||
|
min-height: 28px;
|
||||||
|
z-index: 2;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: #cbcbcb;
|
||||||
|
transition: fill 0.4s ease;
|
||||||
|
}
|
||||||
|
&:hover svg { fill: #545758; }
|
||||||
|
&:focus, &:active { border: none; box-shadow: none; }
|
||||||
|
&.sorting-button-selected svg {
|
||||||
|
fill: #545758;
|
||||||
|
}
|
||||||
|
&.next-button {
|
||||||
|
margin-right: 0em;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
svg { fill: #298596; }
|
||||||
|
}
|
||||||
|
&.previous-button {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 1em;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
svg { fill: #298596; }
|
||||||
|
}
|
||||||
|
&[disabled] svg {
|
||||||
|
fill: #f2f2f2;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
height: 32px;
|
||||||
|
width: 20%;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-left: -52px;
|
||||||
|
padding-left: 52px;
|
||||||
|
border: 1px solid white;
|
||||||
|
transition: border-color 0.7s ease, width 0.5s ease-in;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&:hover {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid View Mode ----------------------------------------------------
|
||||||
|
ul.facets-list.facets-layout-grid,
|
||||||
|
ul.facets-list-edit.facets-layout-grid {
|
||||||
|
padding: 0;
|
||||||
|
@include display-grid;
|
||||||
|
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||||
|
grid-template-columns: repeat(auto-fill, 220px);
|
||||||
|
grid-gap: 0px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li.facet-list-item {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: 12px;
|
||||||
|
width: 185px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #454647;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: auto;
|
||||||
|
width: 185px;
|
||||||
|
min-width: 185px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.facet-item-count {
|
||||||
|
color: #cbcbcb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.facet-without-image img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a {
|
||||||
|
color: #454647;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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: #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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover button {
|
||||||
|
visibility: visible;
|
||||||
|
background-color: rgba(255, 255, 255, 1) !important;
|
||||||
|
opacity: 1;
|
||||||
|
right: -8px;
|
||||||
|
top: -8px;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
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 #cbcbcb !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 498px) {
|
||||||
|
|
||||||
|
ul.facets-list.facets-layout-grid,
|
||||||
|
ul.facets-list-edit.facets-layout-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, 100%);
|
||||||
|
|
||||||
|
li.facet-list-item {
|
||||||
|
width: 100%;
|
||||||
|
img { width: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// List View Mode ----------------------------------------------------
|
||||||
|
ul.facets-list.facets-layout-list,
|
||||||
|
ul.facets-list-edit.facets-layout-list {
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li.facet-list-item {
|
||||||
|
position: relative;
|
||||||
|
margin: 12px 12px 24px 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
min-height: 54px;
|
||||||
|
min-width: calc(20% - 24px);
|
||||||
|
width: calc(20% - 24px);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #454647;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
word-break: break-all;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: auto;
|
||||||
|
width: 54px;
|
||||||
|
min-width: 54px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.facet-without-image {
|
||||||
|
min-height: 0.875em;
|
||||||
|
a {
|
||||||
|
height: 0.875em;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span.facet-item-count {
|
||||||
|
color: #cbcbcb;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a {
|
||||||
|
color: #454647;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1600px) {
|
||||||
|
min-width: calc(25% - 24px);
|
||||||
|
width: calc(25% - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
min-width: calc(33.333% - 24px);
|
||||||
|
width: calc(33.333% - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
min-width: calc(50% - 24px);
|
||||||
|
width: calc(50% - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 498px) {
|
||||||
|
min-width: calc(100% - 24px);
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cloud View Mode ----------------------------------------------------
|
||||||
|
ul.facets-list.facets-layout-cloud,
|
||||||
|
ul.facets-list-edit.facets-layout-cloud {
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
li.facet-list-item {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px 12px;
|
||||||
|
line-height: normal;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #454647;
|
||||||
|
// overflow: hidden;
|
||||||
|
// text-overflow: ellipsis;
|
||||||
|
// white-space: nowrap;
|
||||||
|
display: inline;
|
||||||
|
min-height: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: auto;
|
||||||
|
width: 54px;
|
||||||
|
min-width: 54px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.facet-without-image img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
span.facet-item-count {
|
||||||
|
color: #cbcbcb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a {
|
||||||
|
color: #298596;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more-button {
|
||||||
|
margin: 12px auto;
|
||||||
|
padding: 0.25em;
|
||||||
|
display: block;
|
||||||
|
background: #298596;
|
||||||
|
border: none;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
background-color: #cbcbcb;
|
||||||
|
}
|
||||||
|
|
||||||
|
i>svg {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,467 @@
|
||||||
|
const { registerBlockType } = wp.blocks;
|
||||||
|
|
||||||
|
const { __ } = wp.i18n;
|
||||||
|
|
||||||
|
const { BaseControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, PanelBody } = wp.components;
|
||||||
|
|
||||||
|
const { InspectorControls, BlockControls } = wp.editor;
|
||||||
|
|
||||||
|
import tainacan from '../../js/axios.js';
|
||||||
|
import axios from 'axios';
|
||||||
|
import qs from 'qs';
|
||||||
|
|
||||||
|
registerBlockType('tainacan/faceted-search', {
|
||||||
|
title: __('Tainacan Faceted Search', 'tainacan'),
|
||||||
|
icon:
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
height="24px"
|
||||||
|
width="24px">
|
||||||
|
<path
|
||||||
|
fill="#298596"
|
||||||
|
d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
|
||||||
|
</svg>,
|
||||||
|
category: 'tainacan-blocks',
|
||||||
|
keywords: [ __( 'facets', 'tainacan' ), __( 'search', 'tainacan' ), __( 'items', 'tainacan' ) ],
|
||||||
|
description: __('A full items list faceted search from either the repository, a collection or a term.', 'tainacan'),
|
||||||
|
attributes: {
|
||||||
|
content: {
|
||||||
|
type: 'array',
|
||||||
|
source: 'children',
|
||||||
|
selector: 'div'
|
||||||
|
},
|
||||||
|
termId: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
taxonomy: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
collectionId: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
defaultViewMode: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
enabledViewModes: {
|
||||||
|
type: Array,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
hideFilters: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideHideFiltersButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideSearch: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideAdvancedSearch: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideSortByButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideItemsPerPageButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideGoToPageButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
startWithFiltersHidden: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
filtersAsModal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showInlineViewModeOptions: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showFullscreenWithViewModes: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
supports: {
|
||||||
|
align: ['full', 'wide'],
|
||||||
|
html: true,
|
||||||
|
multiple: false
|
||||||
|
},
|
||||||
|
edit({ attributes, setAttributes, className, isSelected, clientId }){
|
||||||
|
let {
|
||||||
|
termId,
|
||||||
|
taxonomy,
|
||||||
|
collectionId,
|
||||||
|
defaultViewMode,
|
||||||
|
enabledViewModes,
|
||||||
|
hideFilters,
|
||||||
|
hideHideFiltersButton,
|
||||||
|
hideSearch,
|
||||||
|
hideAdvancedSearch,
|
||||||
|
hideSortByButton,
|
||||||
|
hideItemsPerPageButton,
|
||||||
|
hideGoToPageButton,
|
||||||
|
startWithFiltersHidden,
|
||||||
|
filtersAsModal,
|
||||||
|
showInlineViewModeOptions,
|
||||||
|
showFullscreenWithViewModes
|
||||||
|
} = attributes;
|
||||||
|
|
||||||
|
function setContent(){
|
||||||
|
|
||||||
|
facets = [];
|
||||||
|
isLoading = true;
|
||||||
|
|
||||||
|
if (facetsRequestSource != undefined && typeof facetsRequestSource == 'function')
|
||||||
|
facetsRequestSource.cancel('Previous facets search canceled.');
|
||||||
|
|
||||||
|
facetsRequestSource = axios.CancelToken.source();
|
||||||
|
|
||||||
|
setAttributes({
|
||||||
|
isLoading: isLoading
|
||||||
|
});
|
||||||
|
|
||||||
|
let endpoint = '/facets/' + metadatumId;
|
||||||
|
let query = endpoint.split('?')[1];
|
||||||
|
let queryObject = qs.parse(query);
|
||||||
|
|
||||||
|
// Set up max facets to be shown
|
||||||
|
if (maxFacetsNumber != undefined && maxFacetsNumber > 0)
|
||||||
|
queryObject.number = maxFacetsNumber;
|
||||||
|
else if (queryObject.number != undefined && queryObject.number > 0)
|
||||||
|
setAttributes({ maxFacetsNumber: queryObject.number });
|
||||||
|
else {
|
||||||
|
queryObject.number = 12;
|
||||||
|
setAttributes({ maxFacetsNumber: 12 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up searching string
|
||||||
|
if (searchString != undefined)
|
||||||
|
queryObject.search = searchString;
|
||||||
|
else if (queryObject.search != undefined)
|
||||||
|
setAttributes({ searchString: queryObject.search });
|
||||||
|
else {
|
||||||
|
delete queryObject.search;
|
||||||
|
setAttributes({ searchString: undefined });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up parentTerm for taxonomies
|
||||||
|
if (parentTerm && parentTerm.id !== undefined && parentTerm.id !== null && parentTerm.id !== '' && metadatumType == 'Taxonomy')
|
||||||
|
queryObject.parent = parentTerm.id;
|
||||||
|
else {
|
||||||
|
delete queryObject.parent;
|
||||||
|
setAttributes({ parentTerm: null });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parameter fo tech entity object with image and url
|
||||||
|
queryObject['context'] = 'extended';
|
||||||
|
|
||||||
|
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject);
|
||||||
|
|
||||||
|
tainacan.get(endpoint, { cancelToken: facetsRequestSource.token })
|
||||||
|
.then(response => {
|
||||||
|
facetsObject = [];
|
||||||
|
|
||||||
|
if (metadatumType == 'Taxonomy') {
|
||||||
|
for (let facet of response.data.values) {
|
||||||
|
facetsObject.push(Object.assign({
|
||||||
|
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
|
||||||
|
}, facet));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let facet of response.data.values) {
|
||||||
|
facetsObject.push(Object.assign({
|
||||||
|
url: tainacan_blocks.site_url + '/' + collectionSlug + '/#/?metaquery[0][key]=' + metadatumId + '&metaquery[0][value]=' + facet.value
|
||||||
|
}, facet));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let facet of facetsObject)
|
||||||
|
facets.push(prepareFacet(facet));
|
||||||
|
|
||||||
|
setAttributes({
|
||||||
|
content: <div></div>,
|
||||||
|
facets: facets,
|
||||||
|
facetsObject: facetsObject,
|
||||||
|
isLoading: false,
|
||||||
|
facetsRequestSource: facetsRequestSource
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateContent() {
|
||||||
|
|
||||||
|
setAttributes({
|
||||||
|
content: <div></div>
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openMetadataModal() {
|
||||||
|
isModalOpen = true;
|
||||||
|
setAttributes( {
|
||||||
|
isModalOpen: isModalOpen
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function openParentTermModal() {
|
||||||
|
isParentTermModalOpen = true;
|
||||||
|
setAttributes( {
|
||||||
|
isParentTermModalOpen: isParentTermModalOpen
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Executed only on the first load of page
|
||||||
|
if(content && content.length && content[0].type)
|
||||||
|
setContent();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<InspectorControls>
|
||||||
|
|
||||||
|
<PanelBody
|
||||||
|
title={__('Search Control Area', 'tainacan')}
|
||||||
|
initialOpen={ true }
|
||||||
|
>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide search input', 'tainacan')}
|
||||||
|
help={ hideSearch ? __('Do not show textual search input', 'tainacan') : __('Toggle to show textual search input', 'tainacan')}
|
||||||
|
checked={ hideSearch }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideSearch = isChecked;
|
||||||
|
setAttributes({ hideSearch: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide advanced search', 'tainacan')}
|
||||||
|
help={ hideAdvancedSearch ? __('Do not show advanced search', 'tainacan') : __('Toggle to show advanced search', 'tainacan')}
|
||||||
|
checked={ hideAdvancedSearch }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideAdvancedSearch = isChecked;
|
||||||
|
setAttributes({ hideAdvancedSearch: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide "Sort By" button', 'tainacan')}
|
||||||
|
help={ hideSortByButton ? __('Do not show "Sort By" button', 'tainacan') : __('Toggle to show "Sort By" button', 'tainacan')}
|
||||||
|
checked={ hideSortByButton }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideSortByButton = isChecked;
|
||||||
|
setAttributes({ hideSortByButton: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Show inline View Mode options', 'tainacan')}
|
||||||
|
help={ showInlineViewModeOptions ? __('Toggle to show View Mode options inline instead of a dropdown', 'tainacan') : __('Keep view mode options as a dropdown', 'tainacan')}
|
||||||
|
checked={ showInlineViewModeOptions }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
showInlineViewModeOptions = isChecked;
|
||||||
|
setAttributes({ showInlineViewModeOptions: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Show Fullscreen with other View Modes', 'tainacan')}
|
||||||
|
help={ showFullscreenWithViewModes ? __('Toggle to show Fullscreen view mode alongside with other View Modes', 'tainacan') : __('Keep Fullscreen view mode separated from other View Mode Options', 'tainacan')}
|
||||||
|
checked={ showFullscreenWithViewModes }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
showFullscreenWithViewModes = isChecked;
|
||||||
|
setAttributes({ showFullscreenWithViewModes: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</PanelBody>
|
||||||
|
|
||||||
|
<PanelBody
|
||||||
|
title={__('Filters Area', 'tainacan')}
|
||||||
|
initialOpen={ true }
|
||||||
|
>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide Filters', 'tainacan')}
|
||||||
|
help={ hideFilters ? __('Do not show Filters with the list', 'tainacan') : __('Toggle to show Filters with the list', 'tainacan')}
|
||||||
|
checked={ hideFilters }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideFilters = isChecked;
|
||||||
|
setAttributes({ hideFilters: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide "Hide Filters" button', 'tainacan')}
|
||||||
|
help={ hideHideFiltersButton ? __('Do not show "Hide Filters" button', 'tainacan') : __('Toggle to show "Hide Filters" button', 'tainacan')}
|
||||||
|
checked={ hideHideFiltersButton }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideHideFiltersButton = isChecked;
|
||||||
|
setAttributes({ hideHideFiltersButton: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Start with Filters hidden', 'tainacan')}
|
||||||
|
help={ startWithFiltersHidden ? __('Render the list with filters hidden at first" button', 'tainacan') : __('Toggle to render the list with filters visible at first', 'tainacan')}
|
||||||
|
checked={ startWithFiltersHidden }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
startWithFiltersHidden = isChecked;
|
||||||
|
setAttributes({ startWithFiltersHidden: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Filters as a Modal', 'tainacan')}
|
||||||
|
help={ filtersAsModal ? __('Render the filters area as modal instead of a collapse" button', 'tainacan') : __('Toggle to show filters list as a collapse instead of a modal', 'tainacan')}
|
||||||
|
checked={ filtersAsModal }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
filtersAsModal = isChecked;
|
||||||
|
setAttributes({ filtersAsModal: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</PanelBody>
|
||||||
|
|
||||||
|
<PanelBody
|
||||||
|
title={__('Pagination Area', 'tainacan')}
|
||||||
|
initialOpen={ true }
|
||||||
|
>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide "Items per Page" button', 'tainacan')}
|
||||||
|
help={ hideItemsPerPageButton ? __('Do not show "Items per Page" button', 'tainacan') : __('Toggle to show "Items per Page" button', 'tainacan')}
|
||||||
|
checked={ hideItemsPerPageButton }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideItemsPerPageButton = isChecked;
|
||||||
|
setAttributes({ hideItemsPerPageButton: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ToggleControl
|
||||||
|
label={__('Hide "Go to Page" button', 'tainacan')}
|
||||||
|
help={ hideGoToPageButton ? __('Do not show "Go to Page" button', 'tainacan') : __('Toggle to show "Go to Page" button', 'tainacan')}
|
||||||
|
checked={ hideGoToPageButton }
|
||||||
|
onChange={ ( isChecked ) => {
|
||||||
|
hideGoToPageButton = isChecked;
|
||||||
|
setAttributes({ hideGoToPageButton: isChecked });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</PanelBody>
|
||||||
|
|
||||||
|
</InspectorControls>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{ isSelected ?
|
||||||
|
(
|
||||||
|
<div>
|
||||||
|
|
||||||
|
{ collectionId ? (
|
||||||
|
<div className="block-control">
|
||||||
|
<p>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
height="24px"
|
||||||
|
width="24px">
|
||||||
|
<path
|
||||||
|
fill="#298596"
|
||||||
|
d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
|
||||||
|
</svg>
|
||||||
|
{__('List facets from a Tainacan Collection or Repository', 'tainacan')}
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
isPrimary
|
||||||
|
type="submit"
|
||||||
|
onClick={ () => openMetadataModal() }>
|
||||||
|
{__('Select facets', 'tainacan')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
): null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
{ !collectionId ? (
|
||||||
|
<Placeholder
|
||||||
|
icon={(
|
||||||
|
<img
|
||||||
|
width={148}
|
||||||
|
src={ `${tainacan_blocks.base_url}/assets/images/tainacan_logo_header.svg` }
|
||||||
|
alt="Tainacan Logo"/>
|
||||||
|
)}>
|
||||||
|
<p>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
height="24px"
|
||||||
|
width="24px">
|
||||||
|
<path
|
||||||
|
fill="#298596"
|
||||||
|
d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
|
||||||
|
</svg>
|
||||||
|
{__('List facets from a Tainacan Collection or Repository', 'tainacan')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</Placeholder>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
save({ attributes, className }){
|
||||||
|
const {
|
||||||
|
termId,
|
||||||
|
taxonomy,
|
||||||
|
collectionId,
|
||||||
|
defaultViewMode,
|
||||||
|
enabledViewModes,
|
||||||
|
hideFilters,
|
||||||
|
hideHideFiltersButton,
|
||||||
|
hideSearch,
|
||||||
|
hideAdvancedSearch,
|
||||||
|
hideSortByButton,
|
||||||
|
hideItemsPerPageButton,
|
||||||
|
hideGoToPageButton,
|
||||||
|
startWithFiltersHidden,
|
||||||
|
filtersAsModal,
|
||||||
|
showInlineViewModeOptions,
|
||||||
|
showFullscreenWithViewModes
|
||||||
|
} = attributes;
|
||||||
|
return <main
|
||||||
|
className={ className }
|
||||||
|
term-id={ termId }
|
||||||
|
taxonomy={ taxonomy }
|
||||||
|
collection-id={ '67472' /* collectionId */ }
|
||||||
|
default-view-mode={ defaultViewMode }
|
||||||
|
enabled-view-modes={ enabledViewModes }
|
||||||
|
hide-filters = { '' + hideFilters }
|
||||||
|
hide-hide-filters-button= { hideHideFiltersButton }
|
||||||
|
hide-search = { '' + hideSearch }
|
||||||
|
hide-advanced-search = { '' + hideAdvancedSearch }
|
||||||
|
hide-sort-by-button = { '' + hideSortByButton }
|
||||||
|
hide-items-per-page-button = { '' + hideItemsPerPageButton }
|
||||||
|
hide-go-to-page-button = { '' + hideGoToPageButton }
|
||||||
|
start-with-filters-hidden = { '' + startWithFiltersHidden }
|
||||||
|
filters-as-modal = { '' + filtersAsModal }
|
||||||
|
show-inline-view-mode-options = { '' + showInlineViewModeOptions }
|
||||||
|
show-fullscreen-with-view-modes = { '' + showFullscreenWithViewModes }
|
||||||
|
id="tainacan-items-page">
|
||||||
|
</main>
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -846,7 +846,7 @@ registerBlockType('tainacan/facets-list', {
|
||||||
blockId: {
|
blockId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: undefined
|
default: undefined
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
save({ attributes, className }){
|
save({ attributes, className }){
|
||||||
const {
|
const {
|
||||||
|
|
|
||||||
|
|
@ -73,74 +73,75 @@ Vue.component('view-mode-slideshow', ViewModeSlideshow);
|
||||||
|
|
||||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||||
|
|
||||||
export const ThemeItemsListing = new Vue({
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
el: '#tainacan-items-page',
|
new Vue({
|
||||||
store,
|
el: '#tainacan-items-page',
|
||||||
router: routerTheme,
|
store,
|
||||||
data: {
|
router: routerTheme,
|
||||||
termId: '',
|
data: {
|
||||||
taxonomy: '',
|
termId: '',
|
||||||
collectionId: '',
|
taxonomy: '',
|
||||||
defaultViewMode: '',
|
collectionId: '',
|
||||||
enabledViewModes: {},
|
defaultViewMode: '',
|
||||||
hideFilters: false,
|
enabledViewModes: {},
|
||||||
hideHideFiltersButton: false,
|
hideFilters: false,
|
||||||
hideSearch: false,
|
hideHideFiltersButton: false,
|
||||||
hideAdvancedSearch: false,
|
hideSearch: false,
|
||||||
hideSortByButton: false,
|
hideAdvancedSearch: false,
|
||||||
hideItemsPerPageButton: false,
|
hideSortByButton: false,
|
||||||
hideGoToPageButton: false,
|
hideItemsPerPageButton: false,
|
||||||
startWithFiltersHidden: false,
|
hideGoToPageButton: false,
|
||||||
filtersAsModal: false,
|
startWithFiltersHidden: false,
|
||||||
showInlineViewModeOptions: false,
|
filtersAsModal: false,
|
||||||
showFullscreenWithViewModes: false
|
showInlineViewModeOptions: false,
|
||||||
},
|
showFullscreenWithViewModes: false
|
||||||
beforeMount () {
|
},
|
||||||
|
beforeMount () {
|
||||||
|
// Collection or Term source settings
|
||||||
|
if (this.$el.attributes['collection-id'] != undefined)
|
||||||
|
this.collectionId = this.$el.attributes['collection-id'].value;
|
||||||
|
if (this.$el.attributes['term-id'] != undefined)
|
||||||
|
this.termId = this.$el.attributes['term-id'].value;
|
||||||
|
if (this.$el.attributes['taxonomy'] != undefined)
|
||||||
|
this.taxonomy = this.$el.attributes['taxonomy'].value;
|
||||||
|
|
||||||
// Collection or Term source settings
|
// View Mode settings
|
||||||
if (this.$el.attributes['collection-id'] != undefined)
|
if (this.$el.attributes['default-view-mode'] != undefined)
|
||||||
this.collectionId = this.$el.attributes['collection-id'].value;
|
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
|
||||||
if (this.$el.attributes['term-id'] != undefined)
|
else
|
||||||
this.termId = this.$el.attributes['term-id'].value;
|
this.defaultViewMode = 'cards';
|
||||||
if (this.$el.attributes['taxonomy'] != undefined)
|
|
||||||
this.taxonomy = this.$el.attributes['taxonomy'].value;
|
|
||||||
|
|
||||||
// View Mode settings
|
if (this.$el.attributes['enabled-view-modes'] != undefined)
|
||||||
if (this.$el.attributes['default-view-mode'] != undefined)
|
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
|
||||||
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
|
|
||||||
else
|
|
||||||
this.defaultViewMode = 'cards';
|
|
||||||
|
|
||||||
if (this.$el.attributes['enabled-view-modes'] != undefined)
|
// Options related to hidding elements
|
||||||
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
|
if (this.$el.attributes['hide-filters'] != undefined)
|
||||||
|
this.hideFilters = this.$el.attributes['hide-filters'].value;
|
||||||
|
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
|
||||||
|
this.hideHideFiltersButton = this.$el.attributes['hide-hide-filters-button'].value;
|
||||||
|
if (this.$el.attributes['hide-search'] != undefined)
|
||||||
|
this.hideSearch = this.$el.attributes['hide-search'].value;
|
||||||
|
if (this.$el.attributes['hide-advanced-search'] != undefined)
|
||||||
|
this.hideAdvancedSearch = this.$el.attributes['hide-advanced-search'].value;
|
||||||
|
if (this.$el.attributes['hide-sort-by-button'] != undefined)
|
||||||
|
this.hideSortByButton = this.$el.attributes['hide-sort-by-button'].value;
|
||||||
|
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
|
||||||
|
this.hideItemsPerPageButton = this.$el.attributes['hide-items-per-page-button'].value;
|
||||||
|
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
|
||||||
|
this.hideGoToPageButton = this.$el.attributes['hide-go-to-page-button'].value;
|
||||||
|
|
||||||
// Options related to hidding elements
|
// Other Tweaks
|
||||||
if (this.$el.attributes['hide-filters'] != undefined)
|
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
|
||||||
this.hideFilters = this.$el.attributes['hide-filters'].value;
|
this.startWithFiltersHidden = this.$el.attributes['start-with-filters-hidden'].value;
|
||||||
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
|
if (this.$el.attributes['filters-as-modal'] != undefined)
|
||||||
this.hideHideFiltersButton = this.$el.attributes['hide-hide-filters-button'].value;
|
this.filtersAsModal = this.$el.attributes['filters-as-modal'].value;
|
||||||
if (this.$el.attributes['hide-search'] != undefined)
|
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
|
||||||
this.hideSearch = this.$el.attributes['hide-search'].value;
|
this.showInlineViewModeOptions = this.$el.attributes['show-inline-view-mode-options'].value;
|
||||||
if (this.$el.attributes['hide-advanced-search'] != undefined)
|
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
|
||||||
this.hideAdvancedSearch = this.$el.attributes['hide-advanced-search'].value;
|
this.showFullscreenWithViewModes = this.$el.attributes['show-fullscreen-with-view-modes'].value;
|
||||||
if (this.$el.attributes['hide-sort-by-button'] != undefined)
|
},
|
||||||
this.hideSortByButton = this.$el.attributes['hide-sort-by-button'].value;
|
render: h => h(ThemeSearch)
|
||||||
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
|
});
|
||||||
this.hideItemsPerPageButton = this.$el.attributes['hide-items-per-page-button'].value;
|
|
||||||
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
|
|
||||||
this.hideGoToPageButton = this.$el.attributes['hide-go-to-page-button'].value;
|
|
||||||
|
|
||||||
// Other Tweaks
|
|
||||||
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
|
|
||||||
this.startWithFiltersHidden = this.$el.attributes['start-with-filters-hidden'].value;
|
|
||||||
if (this.$el.attributes['filters-as-modal'] != undefined)
|
|
||||||
this.filtersAsModal = this.$el.attributes['filters-as-modal'].value;
|
|
||||||
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
|
|
||||||
this.showInlineViewModeOptions = this.$el.attributes['show-inline-view-mode-options'].value;
|
|
||||||
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
|
|
||||||
this.showFullscreenWithViewModes = this.$el.attributes['show-fullscreen-with-view-modes'].value;
|
|
||||||
},
|
|
||||||
render: h => h(ThemeSearch)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize Ponyfill for Custom CSS properties
|
// Initialize Ponyfill for Custom CSS properties
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,8 @@ module.exports = {
|
||||||
block_facets_list: './src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js',
|
block_facets_list: './src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js',
|
||||||
block_facets_list_theme: './src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js',
|
block_facets_list_theme: './src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js',
|
||||||
|
|
||||||
|
block_faceted_search: './src/views/gutenberg-blocks/tainacan-facets/faceted-search/index.js',
|
||||||
|
|
||||||
block_carousel_terms_list: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js',
|
block_carousel_terms_list: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js',
|
||||||
block_carousel_terms_list_theme: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js'
|
block_carousel_terms_list_theme: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js'
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue