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-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!"
|
||||
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_terms_list');
|
||||
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_carousel_collections_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(){
|
||||
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-terms-list', '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( 'carousel-collections-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: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
}
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,8 @@ Vue.component('view-mode-slideshow', ViewModeSlideshow);
|
|||
|
||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||
|
||||
export const ThemeItemsListing = new Vue({
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
new Vue({
|
||||
el: '#tainacan-items-page',
|
||||
store,
|
||||
router: routerTheme,
|
||||
|
|
@ -96,7 +97,6 @@ export const ThemeItemsListing = new Vue({
|
|||
showFullscreenWithViewModes: false
|
||||
},
|
||||
beforeMount () {
|
||||
|
||||
// Collection or Term source settings
|
||||
if (this.$el.attributes['collection-id'] != undefined)
|
||||
this.collectionId = this.$el.attributes['collection-id'].value;
|
||||
|
|
@ -141,6 +141,7 @@ export const ThemeItemsListing = new Vue({
|
|||
this.showFullscreenWithViewModes = this.$el.attributes['show-fullscreen-with-view-modes'].value;
|
||||
},
|
||||
render: h => h(ThemeSearch)
|
||||
});
|
||||
});
|
||||
|
||||
// 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_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_theme: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue