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

Fetches metadata inside modal and renders facets on block.

This commit is contained in:
Mateus Machado Luna 2019-05-29 15:40:56 -03:00
parent 2f038fac12
commit 183d09b141
7 changed files with 598 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build.sh
View File

@ -13,12 +13,12 @@ current_OS=`uname`
# For macOS (Darwin) # For macOS (Darwin)
if [ $current_OS == "Darwin" ]; then if [ $current_OS == "Darwin" ]; then
find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5 find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5
find ./src/scss/ ./src/admin/scss/ ./src/gutenberg-blocks/ ./src/gutenberg-blocks/tainacan-collections/collections-list ./src/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/gutenberg-blocks/tainacan-items/items-list ./src/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5 {} \; | sort -k 2 | md5 > last-sass-build.md5 find ./src/scss/ ./src/admin/scss/ ./src/gutenberg-blocks/ ./src/gutenberg-blocks/tainacan-collections/collections-list ./src/gutenberg-blocks/tainacan-facets/facets-list ./src/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/gutenberg-blocks/tainacan-items/items-list ./src/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5 {} \; | sort -k 2 | md5 > last-sass-build.md5
find ./composer.json -type f \( -name "composer.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-composer-build.md5 find ./composer.json -type f \( -name "composer.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-composer-build.md5
find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-package-build.md5 find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-package-build.md5
else else
find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5 find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5
find ./src/scss/ ./src/admin/scss/ ./src/gutenberg-blocks ./src/gutenberg-blocks/tainacan-collections/collections-list ./src/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/gutenberg-blocks/tainacan-items/items-list ./src/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-sass-build.md5 find ./src/scss/ ./src/admin/scss/ ./src/gutenberg-blocks ./src/gutenberg-blocks/tainacan-collections/collections-list ./src/gutenberg-blocks/tainacan-facets/facets-list ./src/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/gutenberg-blocks/tainacan-items/items-list ./src/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-sass-build.md5
find ./composer.json -type f \( -name "composer.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-composer-build.md5 find ./composer.json -type f \( -name "composer.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-composer-build.md5
find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-package-build.md5 find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-package-build.md5
fi fi

2
compile-sass.sh
View File

@ -21,5 +21,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/gutenberg-blocks/tainacan
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-7 src/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss:src/assets/css/tainacan-gutenberg-block-facets-list.css
echo "Compilação do Sass Concluído!" echo "Compilação do Sass Concluído!"
exit 0 exit 0

447
src/assets/css/tainacan-gutenberg-block-facets-list.css Normal file
View File

@ -0,0 +1,447 @@
.block-control {
display: flex;
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.875rem !important;
margin: 12px 1.5rem 16px 0;
fill: #555758; }
.block-control p svg {
top: 4px;
margin-right: 0.75rem;
position: relative;
fill: #555758; }
.components-placeholder__fieldset p {
font-size: 0.875rem !important;
margin-top: -2px;
fill: #555758; }
.components-placeholder__fieldset p svg {
margin-right: 1rem;
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.2rem 1.2rem !important;
border-top: 1px solid #cbcbcb; }
.wp-block-tainacan-modal .spinner-container {
min-height: 56px;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
color: #555758; }
.wp-block-tainacan-modal .spinner-container .components-spineer {
margin: 8px; }
.wp-block-tainacan-modal .modal-search-area {
display: flex;
justify-content: center;
margin-bottom: 24px; }
.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 label {
text-align: center; }
.wp-block-tainacan-modal .modal-radio-area-label {
font-weight: bold;
margin-left: 1.75rem; }
.wp-block-tainacan-modal .modal-checkbox-list,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
padding: 0;
display: -ms-grid;
display: grid;
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; }
.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 .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-facets-list {
margin: 2rem 0px; }
.wp-block-tainacan-facets-list .spinner-container {
min-height: 56px;
padding: 1rem;
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: 1rem 100px 1rem 1rem;
text-align: right;
line-height: 1.5rem;
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.3rem; }
.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: 1rem; }
.wp-block-tainacan-facets-list .facets-collection-header .collection-name.only-collection-name {
justify-content: center;
padding: 1rem; }
.wp-block-tainacan-facets-list .facets-collection-header .collection-name.only-collection-name h3 {
text-align: center;
font-size: 1.75rem; }
.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 1rem 0rem 1rem; }
.wp-block-tainacan-facets-list .facets-collection-header .collection-name h3 {
margin-bottom: 1rem; }
.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.00rem 0.5rem 0.75rem 0.5rem; }
@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.75rem;
padding: 0 0.35rem;
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: 0rem;
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: 1rem;
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-list-without-margin,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-list-without-margin {
grid-template-columns: repeat(auto-fill, 185px);
justify-content: center !important;
grid-template-rows: auto !important;
list-style: none; }
.wp-block-tainacan-facets-list ul.facets-list.facets-list-without-margin li,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-list-without-margin li {
margin-top: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
height: 185px !important; }
.wp-block-tainacan-facets-list ul.facets-list.facets-list-without-margin li img,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-list-without-margin li img {
height: 185px !important;
margin-bottom: 0px !important; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid {
padding: 0;
display: -ms-grid;
display: grid;
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 12px 24px 12px;
margin-bottom: 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.5rem; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item a.facet-without-title span,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item a.facet-without-title span {
display: none; }
.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: #555758; }
.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: block;
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;
display: inline-block;
margin: 12px 12px 24px 12px;
margin-bottom: 12px;
min-height: 54px;
min-width: 22%;
width: 22%; }
.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;
display: flex;
align-items: center;
height: 54px; }
.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 a.facet-without-image img,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item a.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: #555758; }
.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; }
/*# sourceMappingURL=tainacan-gutenberg-block-facets-list.css.map */

7
src/assets/css/tainacan-gutenberg-block-facets-list.css.map Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -269,6 +269,9 @@
a.facet-without-title span { a.facet-without-title span {
display: none; display: none;
} }
span.facet-item-count {
color: #555758;
}
&:hover a { &:hover a {
color: #454647; color: #454647;
@ -361,6 +364,9 @@
a.facet-without-image img { a.facet-without-image img {
display: none; display: none;
} }
span.facet-item-count {
color: #555758;
}
&:hover a { &:hover a {
color: #454647; color: #454647;

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

@ -6,7 +6,7 @@ const { RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Tool
const { InspectorControls, BlockControls } = wp.editor; const { InspectorControls, BlockControls } = wp.editor;
import FacetsModal from './facets-modal.js'; import MetadataModal from './metadata-modal.js';
import tainacan from '../../api-client/axios.js'; import tainacan from '../../api-client/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
@ -59,7 +59,7 @@ registerBlockType('tainacan/facets-list', {
type: Number, type: Number,
default: 0 default: 0
}, },
searchURL: { metadatumId: {
type: String, type: String,
default: undefined default: undefined
}, },
@ -130,7 +130,7 @@ registerBlockType('tainacan/facets-list', {
layout, layout,
isModalOpen, isModalOpen,
gridMargin, gridMargin,
searchURL, metadatumId,
facetsRequestSource, facetsRequestSource,
maxFacetsNumber, maxFacetsNumber,
order, order,
@ -171,8 +171,9 @@ registerBlockType('tainacan/facets-list', {
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
} }
alt={ facet.title ? facet.title : __( 'Thumbnail', 'tainacan' ) }/> alt={ facet.label ? facet.label : __( 'Thumbnail', 'tainacan' ) }/>
<span>{ facet.title ? facet.title : '' }</span> <span>{ facet.label ? facet.label : '' }</span>
{ facet.total_items ? <span class="facet-item-count">&nbsp;({ facet.total_items })</span> : null }
</a> </a>
</li> </li>
); );
@ -192,7 +193,7 @@ registerBlockType('tainacan/facets-list', {
isLoading: isLoading isLoading: isLoading
}); });
let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1]; let endpoint = collectionId != 'default' ? '/collection/' + collectionId + '/facets/' + metadatumId : '/facets/' + metadatumId;
let query = endpoint.split('?')[1]; let query = endpoint.split('?')[1];
let queryObject = qs.parse(query); let queryObject = qs.parse(query);
@ -232,12 +233,12 @@ registerBlockType('tainacan/facets-list', {
delete queryObject.admin_view_mode; delete queryObject.admin_view_mode;
delete queryObject.fetch_only_meta; delete queryObject.fetch_only_meta;
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail'; endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject);
tainacan.get(endpoint, { cancelToken: facetsRequestSource.token }) tainacan.get(endpoint, { cancelToken: facetsRequestSource.token })
.then(response => { .then(response => {
for (let facet of response.data.facets) for (let facet of response.data.values)
facets.push(prepareFacet(facet)); facets.push(prepareFacet(facet));
setAttributes({ setAttributes({
@ -283,7 +284,7 @@ registerBlockType('tainacan/facets-list', {
} }
} }
function openFacetsModal() { function openMetadataModal() {
isModalOpen = true; isModalOpen = true;
setAttributes( { setAttributes( {
isModalOpen: isModalOpen isModalOpen: isModalOpen
@ -491,18 +492,18 @@ registerBlockType('tainacan/facets-list', {
( (
<div> <div>
{ isModalOpen ? { isModalOpen ?
<FacetsModal <MetadataModal
existingCollectionId={ collectionId } existingCollectionId={ collectionId }
existingSearchURL={ searchURL } existingMetadatumId={ metadatumId }
onSelectCollection={ (selectedCollectionId) => { onSelectCollection={ (selectedCollectionId) => {
collectionId = selectedCollectionId; collectionId = selectedCollectionId;
setAttributes({ collectionId: collectionId }); setAttributes({ collectionId: collectionId });
fetchCollectionForHeader(); fetchCollectionForHeader();
}} }}
onApplySearchURL={ (aSearchURL) =>{ onSelectMetadatum={ (selectedFacetId) =>{
searchURL = aSearchURL metadatumId = selectedFacetId;
setAttributes({ setAttributes({
searchURL: searchURL, metadatumId: metadatumId,
isModalOpen: false isModalOpen: false
}); });
setContent(); setContent();
@ -528,7 +529,7 @@ registerBlockType('tainacan/facets-list', {
<Button <Button
isPrimary isPrimary
type="submit" type="submit"
onClick={ () => openFacetsModal() }> onClick={ () => openMetadataModal() }>
{__('Configure search', 'tainacan')} {__('Configure search', 'tainacan')}
</Button> </Button>
</div> </div>
@ -704,7 +705,7 @@ registerBlockType('tainacan/facets-list', {
<Button <Button
isPrimary isPrimary
type="submit" type="submit"
onClick={ () => openFacetsModal() }> onClick={ () => openMetadataModal() }>
{__('Select facets', 'tainacan')} {__('Select facets', 'tainacan')}
</Button> </Button>
</Placeholder> </Placeholder>
@ -738,7 +739,7 @@ registerBlockType('tainacan/facets-list', {
showName, showName,
layout, layout,
gridMargin, gridMargin,
searchURL, metadatumId,
maxFacetsNumber, maxFacetsNumber,
order, order,
showSearchBar, showSearchBar,
@ -749,8 +750,8 @@ registerBlockType('tainacan/facets-list', {
} = attributes; } = attributes;
return <div return <div
search-url={ searchURL }
className={ className } className={ className }
metadatum-id={ metadatumId }
collection-id={ collectionId } collection-id={ collectionId }
show-image={ '' + showImage } show-image={ '' + showImage }
show-name={ '' + showName } show-name={ '' + showName }

157
src/gutenberg-blocks/tainacan-facets/facets-list/facets-modal.js → src/gutenberg-blocks/tainacan-facets/facets-list/metadata-modal.js
View File

@ -5,7 +5,7 @@ const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components; const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components;
export default class FacetsModal extends React.Component { export default class MetadataModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -20,9 +20,13 @@ export default class FacetsModal extends React.Component {
collectionPage: 1, collectionPage: 1,
temporaryCollectionId: '', temporaryCollectionId: '',
searchCollectionName: '', searchCollectionName: '',
metadatumId: undefined,
isLoadingMetadata: false,
modalMetadata: [],
temporaryMetadatumId: '',
collections: [], collections: [],
collectionsRequestSource: undefined, collectionsRequestSource: undefined,
searchURL: '', metadataRequestSource: undefined
}; };
// Bind events // Bind events
@ -31,7 +35,8 @@ export default class FacetsModal extends React.Component {
this.fetchCollections = this.fetchCollections.bind(this); this.fetchCollections = this.fetchCollections.bind(this);
this.fetchModalCollections = this.fetchModalCollections.bind(this); this.fetchModalCollections = this.fetchModalCollections.bind(this);
this.fetchCollection = this.fetchCollection.bind(this); this.fetchCollection = this.fetchCollection.bind(this);
this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this); this.selectMetadatum = this.selectMetadatum.bind(this);
this.fetchModalMetadata = this.fetchModalMetadata.bind(this);
} }
componentWillMount() { componentWillMount() {
@ -39,10 +44,10 @@ export default class FacetsModal extends React.Component {
this.setState({ this.setState({
collectionId: this.props.existingCollectionId collectionId: this.props.existingCollectionId
}); });
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) { if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
this.fetchCollection(this.props.existingCollectionId); this.fetchCollection(this.props.existingCollectionId);
this.setState({ searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/facets/?readmode=true&iframemode=true' }); this.fetchModalMetadata(this.props.existingCollectionId);
this.setState({ metadatumId: this.props.existingMetadatumId ? this.props.existingMetadatumId : undefined });
} else { } else {
this.setState({ collectionPage: 1 }); this.setState({ collectionPage: 1 });
this.fetchModalCollections(); this.fetchModalCollections();
@ -90,22 +95,27 @@ export default class FacetsModal extends React.Component {
} }
fetchCollection(collectionId) { fetchCollection(collectionId) {
tainacan.get('/collections/' + collectionId) if (collectionId != 'default') {
.then((response) => { tainacan.get('/collections/' + collectionId)
this.setState({ collectionName: response.data.name }); .then((response) => {
}).catch(error => { this.setState({ collectionName: response.data.name });
console.log('Error trying to fetch collection: ' + error); }).catch(error => {
}); console.log('Error trying to fetch collection: ' + error);
});
} else {
this.setState({ collectionName: __('Repository', 'tainacan') });
}
} }
selectCollection(selectedCollectionId) { selectCollection(selectedCollectionId) {
this.setState({ this.setState({
collectionId: selectedCollectionId, collectionId: selectedCollectionId
searchURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + '/facets/?readmode=true&iframemode=true'
}); });
this.props.onSelectCollection(selectedCollectionId); this.props.onSelectCollection(selectedCollectionId);
this.fetchCollection(selectedCollectionId); this.fetchCollection(selectedCollectionId);
this.fetchModalMetadata(selectedCollectionId);
} }
fetchCollections(name) { fetchCollections(name) {
@ -119,7 +129,7 @@ export default class FacetsModal extends React.Component {
collectionsRequestSource: aCollectionRequestSource, collectionsRequestSource: aCollectionRequestSource,
isLoadingCollections: true, isLoadingCollections: true,
collections: [], collections: [],
facets: [] metadata: []
}); });
let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage; let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage;
@ -142,10 +152,6 @@ export default class FacetsModal extends React.Component {
}); });
} }
applySelectedSearchURL() {
this.props.onApplySearchURL(document.getElementById("facetsFrame").contentWindow.location.href);
}
resetCollections() { resetCollections() {
this.setState({ this.setState({
@ -165,37 +171,104 @@ export default class FacetsModal extends React.Component {
this.props.onCancelSelection(); this.props.onCancelSelection();
} }
// FACETS RELATED --------------------------------------------------
fetchModalMetadata(selectedCollectionId) {
let someModalMetadata = [];
let endpoint = selectedCollectionId != 'default' ? '/collection/' + selectedCollectionId + '/metadata/?nopaging=1' : '/metadata/?nopaging=1';
this.setState({
isLoadingMetadata: true,
modalMetadata: someModalMetadata
});
tainacan.get(endpoint)
.then(response => {
let otherModalMetadata = this.state.modalMetadata;
for (let metadatum of response.data) {
otherModalMetadata.push({
name: metadatum.name,
id: metadatum.id,
type: metadatum.metadata_type_object ? metadatum.metadata_type_object.component : false
});
}
this.setState({
isLoadingMetadata: false,
modalMetadata: otherModalMetadata
});
return otherModalMetadata;
})
.catch(error => {
console.log('Error trying to fetch metadata: ' + error);
});
}
selectMetadatum(selectedMetadatumId) {
this.setState({
collectionId: selectedMetadatumId
});
this.props.onSelectMetadatum(selectedMetadatumId);
}
render() { render() {
return this.state.collectionId != null && this.state.collectionId != undefined ? ( return this.state.collectionId != null && this.state.collectionId != undefined ? (
// Facets modal // Metadata modal
<Modal <Modal
className="wp-block-tainacan-modal" className="wp-block-tainacan-modal"
title={__('Select the facet to show values on block', 'tainacan')} title={__('Select a metadatum to show it\'s values on block', 'tainacan')}
onRequestClose={ () => this.cancelSelection() } onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Configure your facets search to be shown on block', 'tainacan')}> contentLabel={__('Select metadatum', 'tainacan')}>
<iframe {(
id="facetsFrame" this.state.modalMetadata.length > 0 ?
src={ this.state.searchURL } /> (
<div className="modal-footer-area"> <div>
<Button <div className="modal-radio-list">
isDefault <RadioControl
onClick={ () => { this.resetCollections() }}> selected={ this.state.temporaryMetadatumId }
{__('Switch collection', 'tainacan')} options={
</Button> this.state.modalMetadata.map((metadatum) => {
<Button return { label: metadatum.name, value: '' + metadatum.id }
isPrimary })
onClick={ () => this.applySelectedSearchURL() }> }
{__('Use this search', 'tainacan')} onChange={ ( aMetadatumId ) => {
</Button> this.setState({ temporaryMetadatumId: aMetadatumId });
</div> } } />
</Modal> </div>
) : ( </div>
) : this.state.isLoadingMetadata ? <Spinner/> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no metadatum found.', 'tainacan') }</p>
</div>
)
}
<div className="modal-footer-area">
<Button
isDefault
onClick={ () => { this.resetCollections(); }}>
{__('Switch collection', 'tainacan')}
</Button>
<Button
isPrimary
disabled={ this.state.temporaryMetadatumId == undefined || this.state.temporaryMetadatumId == null || this.state.temporaryMetadatumId == ''}
onClick={ () => { this.selectMetadatum(this.state.temporaryMetadatumId); } }>
{__('Finish', 'tainacan')}
</Button>
</div>
</Modal>
) : (
// Collections modal // Collections modal
<Modal <Modal
className="wp-block-tainacan-modal" className="wp-block-tainacan-modal"
title={__('Select a collection to fetch facets from', 'tainacan')} title={__('Select a collection to fetch metadata from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() } onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select facets', 'tainacan')}> contentLabel={__('Select collection', 'tainacan')}>
<div> <div>
<div className="modal-search-area"> <div className="modal-search-area">
<TextControl <TextControl
@ -291,7 +364,7 @@ export default class FacetsModal extends React.Component {
isPrimary isPrimary
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''} disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }> onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }>
{__('Configure search', 'tainacan')} {__('Select metadatum', 'tainacan')}
</Button> </Button>
</div> </div>
</div> </div>