diff --git a/compile-sass.sh b/compile-sass.sh
index 88be95d24..24fd5c724 100644
--- a/compile-sass.sh
+++ b/compile-sass.sh
@@ -40,7 +40,9 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/t
sass -E 'UTF-8' --cache-location .tmp/sass-cache-16 src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
-sass -E 'UTF-8' --cache-location .tmp/sass-cache-17 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-17 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss:src/assets/css/tainacan-gutenberg-block-carousel-related-items.css
+
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-18 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
echo "Compilação do Sass Concluído!"
exit 0
diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-related-items.css b/src/assets/css/tainacan-gutenberg-block-carousel-related-items.css
new file mode 100644
index 000000000..df451beaa
--- /dev/null
+++ b/src/assets/css/tainacan-gutenberg-block-carousel-related-items.css
@@ -0,0 +1,398 @@
+.wp-block-tainacan-carousel-related-items {
+ margin: 2em auto;
+ --swiper-navigation-color: var(--tainacan-block-primary, $primary);
+ --swiper-theme-color: var(--tainacan-block-primary, $primary); }
+ .wp-block-tainacan-carousel-related-items .spinner-container {
+ min-height: 56px;
+ padding: 1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--tainacan-block-gray4, #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-carousel-related-items .skeleton {
+ border-radius: 2px;
+ background: var(--tainacan-block-gray1, #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-carousel-related-items .carousel-items-collection-header {
+ display: flex;
+ width: 100%;
+ align-items: stretch;
+ text-decoration: none !important;
+ margin-bottom: 30px; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header:hover {
+ text-decoration: none; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-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: var(--tainacan-block-gray5, #454647); }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-name h3 {
+ color: white;
+ text-decoration: none;
+ font-size: 1.3em;
+ margin: 0; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-name h3:hover {
+ text-decoration: none; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-name span.label {
+ color: white;
+ font-weight: normal;
+ font-size: 0.75em; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-name.only-collection-name {
+ justify-content: center;
+ padding: 1em; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-name.only-collection-name h3 {
+ text-align: center;
+ font-size: 1.75em; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-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: var(--tainacan-block-gray2, #dbdbdb); }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-header-image {
+ width: auto;
+ min-width: 150px;
+ min-height: 165px;
+ flex-grow: 2;
+ background-size: cover;
+ background-position: center;
+ background-color: var(--tainacan-block-gray2, #dbdbdb); }
+ @media only screen and (max-width: 1024px) {
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header {
+ flex-wrap: wrap-reverse; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-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-carousel-related-items .carousel-items-collection-header .collection-name h3 {
+ margin-bottom: 1em; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-thumbnail {
+ left: calc(-50% + 78px) !important;
+ top: -78px !important; }
+ .wp-block-tainacan-carousel-related-items .carousel-items-collection-header .collection-header-image {
+ background-color: transparent; } }
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel {
+ position: relative;
+ width: calc(100% + 40px);
+ left: -20px; }
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel .swiper-container {
+ margin: 0 50px; }
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel .swiper-container a > span,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel .swiper-container a:hover > span {
+ color: var(--tainacan-block-gray5, #454647);
+ font-weight: bold;
+ text-decoration: none;
+ padding: 8px 16px;
+ display: block;
+ line-height: 1.2em;
+ word-break: break-word; }
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel .swiper-container a > img {
+ width: 100%;
+ height: auto; }
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel .swiper-container a:hover {
+ text-decoration: none; }
+ .wp-block-tainacan-carousel-related-items .preview-warning {
+ width: 100%;
+ font-size: 0.875em;
+ font-style: italic;
+ color: var(--tainacan-block-gray4, #555758);
+ text-align: center;
+ margin: 0 auto;
+ padding: 8px 2px 2px 2px; }
+ .wp-block-tainacan-carousel-related-items .swiper-button-prev, .wp-block-tainacan-carousel-related-items .swiper-button-next {
+ top: calc(50% - 42px);
+ bottom: initial;
+ background: none;
+ border: none;
+ width: 42px;
+ height: 42px;
+ padding: 0;
+ margin: 0 -4px; }
+ .wp-block-tainacan-carousel-related-items .swiper-button-prev svg, .wp-block-tainacan-carousel-related-items .swiper-button-next svg {
+ fill: var(--tainacan-block-primary, #298596); }
+ .wp-block-tainacan-carousel-related-items .swiper-button-prev::after, .wp-block-tainacan-carousel-related-items .swiper-button-prev::before, .wp-block-tainacan-carousel-related-items .swiper-button-next::after, .wp-block-tainacan-carousel-related-items .swiper-button-next::before {
+ content: none !important; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel {
+ position: relative; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container .skeleton,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel .skeleton {
+ min-height: 150px; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-arrows-none .swiper-button-prev, .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-arrows-none .swiper-button-next,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-arrows-none .swiper-button-prev,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-arrows-none .swiper-button-next {
+ display: none; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-arrows-left .swiper-button-next,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-arrows-left .swiper-button-next {
+ left: 10px;
+ right: auto;
+ top: calc(50% + 12px) !important; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-arrows-right .swiper-button-prev,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-arrows-right .swiper-button-prev {
+ right: 10px;
+ left: auto; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-arrows-right .swiper-button-next,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-arrows-right .swiper-button-next {
+ top: calc(50% + 12px) !important; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-large-arrows .swiper-button-prev, .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-large-arrows .swiper-button-next,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-large-arrows .swiper-button-prev,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-large-arrows .swiper-button-next {
+ top: calc(50% - 60px);
+ width: 60px;
+ height: 60px;
+ margin: 0 -24px; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-large-arrows.has-arrows-left .swiper-button-next,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-large-arrows.has-arrows-left .swiper-button-next {
+ left: 30px;
+ right: auto;
+ top: calc(50% + 30px) !important; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-large-arrows.has-arrows-right .swiper-button-prev,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-large-arrows.has-arrows-right .swiper-button-prev {
+ right: 30px;
+ left: auto; }
+ .wp-block-tainacan-carousel-related-items .items-list-edit-container.has-large-arrows.has-arrows-right .swiper-button-next,
+ .wp-block-tainacan-carousel-related-items .tainacan-carousel.has-large-arrows.has-arrows-right .swiper-button-next {
+ top: calc(50% + 30px) !important; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit {
+ display: flex;
+ align-items: flex-start;
+ overflow-x: scroll;
+ list-style: none;
+ margin: 0 36px;
+ scroll-snap-type: x mandatory;
+ scroll-padding-left: 10px; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item {
+ position: relative;
+ display: block;
+ margin: 16px;
+ width: calc(14.285% - 32px);
+ min-width: calc(14.285% - 32px);
+ scroll-snap-align: start;
+ scroll-margin: 0 16px; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item a {
+ color: var(--tainacan-block-gray5, #454647);
+ font-weight: bold;
+ line-height: normal; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item img {
+ height: auto;
+ display: block;
+ padding: 0px;
+ margin-bottom: 0.5em; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item:hover a {
+ color: var(--tainacan-block-gray5, #454647);
+ text-decoration: none; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item button {
+ position: absolute !important;
+ background-color: rgba(255, 255, 255, 0.75);
+ color: var(--tainacan-block-gray5, #454647);
+ padding: 2px;
+ margin-left: 5px;
+ min-width: 14px;
+ visibility: hidden;
+ position: relative;
+ opacity: 0;
+ right: -14px;
+ top: 0px;
+ justify-content: center;
+ z-index: 999; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item button .dashicon {
+ margin: 0px; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item:hover button {
+ height: auto;
+ visibility: visible;
+ background-color: white !important;
+ opacity: 1;
+ right: -8px;
+ top: -8px;
+ border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
+ border-radius: 12px;
+ transition: opacity linear 0.15s, right linear 0.15s; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item:hover button:hover {
+ background-color: white !important;
+ border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
+ width: calc((100% / 9) - 32px);
+ min-width: calc((100% / 9) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
+ width: calc((100% / 8) - 32px);
+ min-width: calc((100% / 8) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
+ width: calc((100% / 7) - 32px);
+ min-width: calc((100% / 7) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-4 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-3 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-2 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px); }
+ @media only screen and (max-width: 1686px) {
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item {
+ width: calc(16.666% - 32px);
+ min-width: calc(16.666% - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
+ width: calc((100% / 8) - 32px);
+ min-width: calc((100% / 8) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
+ width: calc((100% / 7) - 32px);
+ min-width: calc((100% / 7) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-4 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-3 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px); } }
+ @media only screen and (max-width: 1452px) {
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item {
+ width: calc(20% - 32px);
+ min-width: calc(20% - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
+ width: calc((100% / 7) - 32px);
+ min-width: calc((100% / 7) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-4 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px); } }
+ @media only screen and (max-width: 1118px) {
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item {
+ width: calc(25% - 32px);
+ min-width: calc(25% - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-4, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px); } }
+ @media only screen and (max-width: 854px) {
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item {
+ width: calc(33.333% - 32px);
+ min-width: calc(33.333% - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-5, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-4, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px); } }
+ @media only screen and (max-width: 584px) {
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item {
+ width: calc(50% - 32px);
+ min-width: calc(50% - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px); }
+ .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-6, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-5, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-4, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-related-items ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px); } }
+
+/*# sourceMappingURL=tainacan-gutenberg-block-carousel-related-items.css.map */
diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-related-items.css.map b/src/assets/css/tainacan-gutenberg-block-carousel-related-items.css.map
new file mode 100644
index 000000000..f54219344
--- /dev/null
+++ b/src/assets/css/tainacan-gutenberg-block-carousel-related-items.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEA,yCAA0C;EACtC,MAAM,EAAE,QAAQ;EAChB,yBAAyB,CAAC,wCAAwC;EAClE,oBAAoB,CAAC,wCAAwC;EAG7D,4DAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,mDAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,2EAAkC;IAC9B,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,OAAO;IACpB,eAAe,EAAE,eAAe;IAChC,aAAa,EAAE,IAAI;IAEnB,iFAAQ;MACJ,eAAe,EAAE,IAAI;IAGzB,4FAAiB;MACb,KAAK,EAAE,IAAI;MACX,SAAS,EAAE,KAAK;MAChB,SAAS,EAAE,CAAC;MACZ,OAAO,EAAE,iBAAiB;MAC1B,UAAU,EAAE,KAAK;MACjB,WAAW,EAAE,KAAK;MAClB,UAAU,EAAE,KAAK;MACjB,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,QAAQ;MACzB,WAAW,EAAE,MAAM;MACnB,gBAAgB,EAAE,oCAAmC;MAErD,+FAAG;QACC,KAAK,EAAE,KAAK;QACZ,eAAe,EAAE,IAAI;QACrB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,CAAC;QACT,qGAAQ;UACJ,eAAe,EAAE,IAAI;MAG7B,uGAAW;QACP,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,MAAM;MAGrB,iHAAuB;QACnB,eAAe,EAAE,MAAM;QACvB,OAAO,EAAE,GAAG;QACZ,oHAAG;UACC,UAAU,EAAE,MAAM;UAClB,SAAS,EAAE,MAAM;IAI7B,iGAAsB;MAClB,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,KAAK;MACZ,eAAe,EAAE,KAAK;MACtB,mBAAmB,EAAE,MAAM;MAC3B,aAAa,EAAE,IAAI;MACnB,MAAM,EAAE,eAAe;MACvB,MAAM,EAAE,IAAI;MACZ,WAAW,EAAE,CAAC;MACd,QAAQ,EAAE,QAAQ;MAClB,WAAW,EAAE,MAAM;MACnB,IAAI,EAAE,IAAI;MACV,gBAAgB,EAAE,oCAAmC;IAEzD,oGAAyB;MACrB,KAAK,EAAE,IAAI;MACX,SAAS,EAAE,KAAK;MAChB,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,CAAC;MACZ,eAAe,EAAE,KAAK;MACtB,mBAAmB,EAAE,MAAM;MAC3B,gBAAgB,EAAE,oCAAmC;IAGzD,0CAA2C;MAxE/C,2EAAkC;QAyE1B,SAAS,EAAE,YAAY;QAEvB,4FAAiB;UACb,KAAK,EAAE,eAAe;UACtB,SAAS,EAAE,eAAe;UAC1B,eAAe,EAAE,iBAAiB;UAClC,UAAU,EAAE,iBAAiB;UAC7B,OAAO,EAAE,gBAAgB;UACzB,+FAAG;YAAE,aAAa,EAAE,GAAG;QAE3B,iGAAsB;UAClB,IAAI,EAAE,4BAA4B;UAClC,GAAG,EAAE,gBAAgB;QAEzB,oGAAyB;UACrB,gBAAgB,EAAE,WAAW;EAMzC,4DAAmB;IACf,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,KAAK;IAEX,8EAAkB;MACd,MAAM,EAAE,MAAM;MAEd;mGACa;QACT,KAAK,EAAE,oCAAmC;QAC1C,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,IAAI;QACrB,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,UAAU;MAE1B,sFAAM;QACF,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;MAEhB,sFAAQ;QACJ,eAAe,EAAE,IAAI;EAKjC,0DAAiB;IACb,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,oCAAmC;IAC1C,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,eAAe;EAI5B,4HAAyC;IACrC,GAAG,EAAE,gBAAgB;IACrB,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,MAAM;IAEd,oIAAI;MACA,IAAI,EAAE,sCAAuC;IAEjD,wRACU;MACN,OAAO,EAAE,eAAe;EAKhC;8DACmB;IACf,QAAQ,EAAE,QAAQ;IAElB;0EAAY;MACR,UAAU,EAAE,KAAK;IAGrB;;oGACsC;MAClC,OAAO,EAAE,IAAI;IAEjB;oGAAsC;MAClC,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,2BAA2B;IAEpC;qGAAuC;MACnC,KAAK,EAAE,IAAI;MACX,IAAI,EAAE,IAAI;IAEd;qGAAuC;MACnC,GAAG,EAAE,2BAA2B;IAEpC;;qGACuC;MACnC,GAAG,EAAE,gBAAgB;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,MAAM,EAAE,OAAO;IAEnB;qHAAuD;MACnD,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,2BAA2B;IAEpC;sHAAwD;MACpD,KAAK,EAAE,IAAI;MACX,IAAI,EAAE,IAAI;IAEd;sHAAwD;MACpD,GAAG,EAAE,2BAA2B;EAGxC,4DAAmB;IACf,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IACvB,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,MAAM;IACd,gBAAgB,EAAE,WAAW;IAC7B,mBAAmB,EAAE,IAAI;IAEzB,8EAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,oBAAoB;MAC3B,SAAS,EAAE,oBAAoB;MAC/B,iBAAiB,EAAE,KAAK;MACxB,aAAa,EAAE,MAAM;MAErB,gFAAE;QACE,KAAK,EAAE,oCAAmC;QAC1C,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;MAGvB,kFAAI;QACA,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB,sFAAU;QACN,KAAK,EAAE,oCAAmC;QAC1C,eAAe,EAAE,IAAI;MAGzB,qFAAO;QACH,QAAQ,EAAE,mBAAmB;QAC7B,gBAAgB,EAAE,yBAAyB;QAC3C,KAAK,EAAE,oCAAmC;QAC1C,OAAO,EAAE,GAAG;QACZ,WAAW,EAAE,GAAG;QAChB,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,GAAG;QACR,eAAe,EAAE,MAAM;QACvB,OAAO,EAAE,GAAG;QAEZ,+FAAU;UAAE,MAAM,EAAE,GAAG;MAG3B,2FAAe;QACX,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,OAAO;QACnB,gBAAgB,EAAE,gBAAiC;QACnD,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,IAAI;QACT,MAAM,EAAE,8CAA6C;QACrD,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,wCAAwC;MAExD,iGAAqB;QACjB,gBAAgB,EAAE,gBAAiC;QACnD,MAAM,EAAE,yDAAwD;MAGpE,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,iBAAiB;EAIxC,0CAA2C;IAEvC,8EAAqC;MACjC,KAAK,EAAE,oBAAoB;MAC3B,SAAS,EAAE,oBAAoB;MAE/B,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,4MACyB;QACrB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,iBAAiB;EAIxC,0CAA2C;IAEvC,8EAAqC;MACjC,KAAK,EAAE,gBAAgB;MACvB,SAAS,EAAE,gBAAgB;MAE3B,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,mTAEyB;QACrB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,iBAAiB;EAIxC,0CAA2C;IAEvC,8EAAqC;MACjC,KAAK,EAAE,gBAAgB;MACvB,SAAS,EAAE,gBAAgB;MAE3B,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,0ZAGyB;QACrB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,iBAAiB;EAIxC,yCAA0C;IAEtC,8EAAqC;MACjC,KAAK,EAAE,oBAAoB;MAC3B,SAAS,EAAE,oBAAoB;MAE/B,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,igBAIyB;QACrB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,iBAAiB;EAIxC,yCAA0C;IAEtC,8EAAqC;MACjC,KAAK,EAAE,gBAAgB;MACvB,SAAS,EAAE,gBAAgB;MAE3B,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,qGAAyB;QACrB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,uBAAuB;MAEtC,wmBAKyB;QACrB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,iBAAiB",
+"sources": ["../../views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss"],
+"names": [],
+"file": "tainacan-gutenberg-block-carousel-related-items.css"
+}
diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index c8b367eff..77ed528d0 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -158,11 +158,7 @@
>>>>>> develop
+ :style="{ 'padding-left': !collectionId || !(isIframeMode || collection && collection.current_user_can_bulk_edit) || isReadMode? '0.5em !important' : (isOnAllItemsTabs ? '1.875em' : '2.75em') }"
class="metadata-title">
>>>>>> develop
+ 'padding-left': !collectionId || !(isIframeMode || collection && collection.current_user_can_bulk_edit) || isReadMode ? '0 !important' : (isOnAllItemsTabs ? '0.5em' : '1em')
}"
@click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)"
@@ -442,13 +434,8 @@
0);
->>>>>>> develop
}
},
watch: {
diff --git a/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php b/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php
index 8cdbb490b..cb64580f4 100644
--- a/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php
+++ b/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php
@@ -12,6 +12,7 @@ const TAINACAN_BLOCKS = [
'carousel-items-list' => [ 'has_theme_script' => true ],
'carousel-terms-list' => [ 'has_theme_script' => true ],
'carousel-collections-list' => [ 'has_theme_script' => true ],
+ 'carousel-related-items' => [ 'has_theme_script' => true ],
'terms-list' => [ 'extra_editor_script_deps' => array('undescore') ],
];
diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-deprecated.js b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-deprecated.js
new file mode 100644
index 000000000..109fa8b38
--- /dev/null
+++ b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-deprecated.js
@@ -0,0 +1 @@
+export default [];
\ No newline at end of file
diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-modal.js b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-modal.js
new file mode 100644
index 000000000..b2f8737db
--- /dev/null
+++ b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-modal.js
@@ -0,0 +1,364 @@
+import tainacan from '../../js/axios.js';
+import axios from 'axios';
+
+const { __ } = wp.i18n;
+
+const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
+
+export default class CarouselRelatedItemsModal extends React.Component {
+ constructor(props) {
+ super(props);
+
+ // Initialize state
+ this.state = {
+ collectionsPerPage: 24,
+ collectionId: undefined,
+ collectionName: '',
+ isLoadingCollections: false,
+ modalCollections: [],
+ totalModalCollections: 0,
+ collectionOrderBy: 'date-desc',
+ collectionPage: 1,
+ temporaryCollectionId: '',
+ searchCollectionName: '',
+ collections: [],
+ collectionsRequestSource: undefined,
+ searchURL: '',
+ itemsPerPage: 12,
+ loadStrategy: 'search'
+ };
+
+ // Bind events
+ this.resetCollections = this.resetCollections.bind(this);
+ this.selectCollection = this.selectCollection.bind(this);
+ this.fetchCollections = this.fetchCollections.bind(this);
+ this.fetchModalCollections = this.fetchModalCollections.bind(this);
+ this.fetchCollection = this.fetchCollection.bind(this);
+ this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
+ this.applySelectedItems = this.applySelectedItems.bind(this);
+ }
+
+ componentWillMount() {
+
+ this.setState({
+ collectionId: this.props.existingCollectionId
+ });
+
+ if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
+ this.fetchCollection(this.props.existingCollectionId);
+ this.setState({
+ searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish') });
+ } else {
+ this.setState({ collectionPage: 1 });
+ this.fetchModalCollections();
+ }
+ }
+
+ // COLLECTIONS RELATED --------------------------------------------------
+ fetchModalCollections() {
+
+ let someModalCollections = this.state.modalCollections;
+ if (this.state.collectionPage <= 1)
+ someModalCollections = [];
+
+ let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
+
+ if (this.state.collectionOrderBy == 'date')
+ endpoint += '&orderby=date&order=asc';
+ else if (this.state.collectionOrderBy == 'date-desc')
+ endpoint += '&orderby=date&order=desc';
+ else if (this.state.collectionOrderBy == 'title')
+ endpoint += '&orderby=title&order=asc';
+ else if (this.state.collectionOrderBy == 'title-desc')
+ endpoint += '&orderby=title&order=desc';
+
+ this.setState({
+ isLoadingCollections: true,
+ collectionPage: this.state.collectionPage + 1,
+ modalCollections: someModalCollections
+ });
+
+ tainacan.get(endpoint)
+ .then(response => {
+
+ let otherModalCollections = this.state.modalCollections;
+ for (let collection of response.data) {
+ otherModalCollections.push({
+ name: collection.name,
+ id: collection.id
+ });
+ }
+
+ this.setState({
+ isLoadingCollections: false,
+ modalCollections: otherModalCollections,
+ totalModalCollections: response.headers['x-wp-total']
+ });
+
+ return otherModalCollections;
+ })
+ .catch(error => {
+ console.log('Error trying to fetch collections: ' + error);
+ });
+ }
+
+ fetchCollection(collectionId) {
+ tainacan.get('/collections/' + collectionId)
+ .then((response) => {
+ this.setState({ collectionName: response.data.name });
+ }).catch(error => {
+ console.log('Error trying to fetch collection: ' + error);
+ });
+ }
+
+ selectCollection(selectedCollectionId) {
+ this.setState({
+ collectionId: selectedCollectionId,
+ searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish')
+ });
+
+ this.props.onSelectCollection(selectedCollectionId);
+ this.fetchCollection(selectedCollectionId);
+ }
+
+ fetchCollections(name) {
+
+ if (this.state.collectionsRequestSource != undefined)
+ this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
+
+ let aCollectionRequestSource = axios.CancelToken.source();
+
+ this.setState({
+ collectionsRequestSource: aCollectionRequestSource,
+ isLoadingCollections: true,
+ collections: [],
+ items: []
+ });
+
+ let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage;
+ if (name != undefined && name != '')
+ endpoint += '&search=' + name;
+
+ if (this.state.collectionOrderBy == 'date')
+ endpoint += '&orderby=date&order=asc';
+ else if (this.state.collectionOrderBy == 'date-desc')
+ endpoint += '&orderby=date&order=desc';
+ else if (this.state.collectionOrderBy == 'title')
+ endpoint += '&orderby=title&order=asc';
+ else if (this.state.collectionOrderBy == 'title-desc')
+ endpoint += '&orderby=title&order=desc';
+
+ tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
+ .then(response => {
+ let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
+
+ this.setState({
+ isLoadingCollections: false,
+ collections: someCollections
+ });
+
+ return someCollections;
+ })
+ .catch(error => {
+ console.log('Error trying to fetch collections: ' + error);
+ });
+ }
+
+ applySelectedSearchURL() {
+ let iframe = document.getElementById("itemsFrame");
+ if (iframe) {
+ this.props.onApplySearchURL(iframe.contentWindow.location.href);
+ }
+ }
+
+ applySelectedItems() {
+ let iframe = document.getElementById("itemsFrame");
+ if (iframe) {
+ let params = new URLSearchParams(iframe.contentWindow.location.search);
+ let selectedItems = params.getAll('selecteditems');
+ params.delete('selecteditems')
+ this.props.onApplySelectedItems(selectedItems);
+ }
+ }
+
+ resetCollections() {
+
+ this.setState({
+ collectionId: null,
+ collectionPage: 1,
+ modalCollections: []
+ });
+ this.fetchModalCollections();
+ }
+
+ cancelSelection() {
+
+ this.setState({
+ modalCollections: []
+ });
+
+ this.props.onCancelSelection();
+ }
+
+ render() {
+ return this.state.collectionId != null && this.state.collectionId != undefined ? (
+ // Items modal
+ this.cancelSelection() }
+ shouldCloseOnClickOutside={ false }
+ contentLabel={ this.props.loadStrategy == 'selection' ? __('Select items that will be added on block', 'tainacan') : __('Configure your items search that will load items on block', 'tainacan')}>
+
+
+
+ { this.props.loadStrategy == 'selection' ?
+
+ : null
+ }
+ { this.props.loadStrategy == 'search' ?
+
+ : null
+ }
+
+
+ ) : (
+ // Collections modal
+ this.cancelSelection() }
+ shouldCloseOnClickOutside={ false }
+ contentLabel={__('Select items', 'tainacan')}>
+
+
+ {
+ this.setState({
+ searchCollectionName: value
+ });
+ _.debounce(this.fetchCollections(value), 300);
+ }}/>
+ {
+ this.state.collectionOrderBy = aCollectionOrderBy;
+ this.state.collectionPage = 1;
+ this.setState({
+ collectionOrderBy: this.state.collectionOrderBy,
+ collectionPage: this.state.collectionPage
+ });
+ if (this.state.searchCollectionName && this.state.searchCollectionName != '') {
+ this.fetchCollections(this.state.searchCollectionName);
+ } else {
+ this.fetchModalCollections();
+ }
+ }}/>
+
+ {(
+ this.state.searchCollectionName != '' ? (
+ this.state.collections.length > 0 ?
+ (
+
+
+ {
+ {
+ return { label: collection.name, value: '' + collection.id }
+ })
+ }
+ onChange={ ( aCollectionId ) => {
+ this.setState({ temporaryCollectionId: aCollectionId });
+ } } />
+ }
+
+
+ ) :
+ this.state.isLoadingCollections ? (
+
+ ) :
+
+
{ __('Sorry, no collection found.', 'tainacan') }
+
+ ):
+ this.state.modalCollections.length > 0 ?
+ (
+
+
+ {
+ {
+ return { label: collection.name, value: '' + collection.id }
+ })
+ }
+ onChange={ ( aCollectionId ) => {
+ this.setState({ temporaryCollectionId: aCollectionId });
+ } } />
+ }
+
+
+
{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}
+ {
+ this.state.modalCollections.length < this.state.totalModalCollections ? (
+
+ ) : null
+ }
+
+
+ ) : this.state.isLoadingCollections ?
:
+
+
{ __('Sorry, no collection found.', 'tainacan') }
+
+ )}
+
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.js b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.js
new file mode 100644
index 000000000..a2832ee3d
--- /dev/null
+++ b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.js
@@ -0,0 +1,108 @@
+import Vue from 'vue';
+import CarouselRelatedItemsTheme from './carousel-related-items-theme.vue';
+import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
+import VueBlurHash from 'vue-blurhash';
+
+// Vue Dev Tools!
+Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
+
+// This is rendered on the theme side.
+document.addEventListener("DOMContentLoaded", () => {
+
+ // Gets all divs with content created by our block;
+ let blocks = document.getElementsByClassName('wp-block-tainacan-carousel-items-list');
+
+ if (blocks) {
+ let blockIds = Object.values(blocks).map((block) => block.id);
+
+ // Creates a new Vue Instance to manage each block isolatelly
+ for (let blockId of blockIds) {
+
+ // Configure Vue logic before passing it to constructor:
+ let vueOptions = {
+ data: {
+ collectionId: '',
+ searchURL: '',
+ selectedItems: [],
+ loadStrategy: 'search',
+ maxItemsNumber: 12,
+ maxItemsPerScreen: 7,
+ arrowsPosition: 'around',
+ largeArrows: false,
+ autoPlay: false,
+ autoPlaySpeed: 3,
+ loopSlides: false,
+ hideTitle: true,
+ cropImagesToSquare: true,
+ showCollectionHeader: false,
+ showCollectionLabel: false,
+ collectionBackgroundColor: '#454647',
+ collectionTextColor: '#ffffff',
+ tainacanApiRoot: '',
+ tainacanBaseUrl: '',
+ className: ''
+ },
+ render(h){
+ return h(CarouselRelatedItemsTheme, {
+ props: {
+ blockId: blockId,
+ collectionId: this.collectionId,
+ searchURL: this.searchURL,
+ selectedItems: this.selectedItems,
+ loadStrategy: this.loadStrategy,
+ maxItemsNumber: this.maxItemsNumber,
+ maxItemsPerScreen: this.maxItemsPerScreen,
+ arrowsPosition: this.arrowsPosition,
+ largeArrows: this.largeArrows,
+ autoPlay: this.autoPlay,
+ autoPlaySpeed: this.autoPlaySpeed,
+ loopSlides: this.loopSlides,
+ hideTitle: this.hideTitle,
+ cropImagesToSquare: this.cropImagesToSquare,
+ showCollectionHeader: this.showCollectionHeader,
+ showCollectionLabel: this.showCollectionLabel,
+ collectionBackgroundColor: this.collectionBackgroundColor,
+ collectionTextColor: this.collectionTextColor,
+ tainacanApiRoot: this.tainacanApiRoot,
+ tainacanBaseUrl: this.tainacanBaseUrl,
+ className: this.className
+ }
+ });
+ },
+ beforeMount () {
+ this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
+ this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
+ this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
+ this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
+ this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
+ this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
+ this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
+ this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
+ this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
+ this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
+ this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
+ this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
+ this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
+ this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
+ this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
+ this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
+ this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
+ this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
+ this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
+ this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+
+ console.log(this.collectionId);
+ },
+ methods: {
+ __(text, domain) {
+ return wp.i18n.__(text, domain);
+ }
+ }
+ };
+
+ Vue.use(ThumbnailHelperPlugin);
+ Vue.use(VueBlurHash);
+ new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
+ }
+ }
+});
\ No newline at end of file
diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.vue b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.vue
new file mode 100644
index 000000000..8e6f11e51
--- /dev/null
+++ b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.vue
@@ -0,0 +1,372 @@
+
+
+
+
+
+
+
+
+
+ {{ $root.__(errorMessage, 'tainacan') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss
new file mode 100644
index 000000000..1536a301c
--- /dev/null
+++ b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss
@@ -0,0 +1,531 @@
+@import '../../gutenberg-blocks-variables.scss';
+
+.wp-block-tainacan-carousel-related-items {
+ margin: 2em auto;
+ --swiper-navigation-color: var(--tainacan-block-primary, $primary);
+ --swiper-theme-color: var(--tainacan-block-primary, $primary);
+
+ // Spinner
+ .spinner-container {
+ min-height: 56px;
+ padding: 1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--tainacan-block-gray4, $gray4);
+ }
+
+ // 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: var(--tainacan-block-gray1, $gray1);
+
+ -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
+ .carousel-items-collection-header {
+ display: flex;
+ width: 100%;
+ align-items: stretch;
+ text-decoration: none !important;
+ margin-bottom: 30px;
+
+ &: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: var(--tainacan-block-gray5, $gray5);
+
+ h3 {
+ color: white;
+ text-decoration: none;
+ font-size: 1.3em;
+ margin: 0;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ span.label {
+ color: white;
+ 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: var(--tainacan-block-gray2, $gray2);
+ }
+ .collection-header-image {
+ width: auto;
+ min-width: 150px;
+ min-height: 165px;
+ flex-grow: 2;
+ background-size: cover;
+ background-position: center;
+ background-color: var(--tainacan-block-gray2, $gray2);
+ }
+
+ @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;
+ }
+ }
+ }
+
+ // Tainacan Carousel
+ .tainacan-carousel {
+ position: relative;
+ width: calc(100% + 40px);
+ left: -20px;
+
+ .swiper-container {
+ margin: 0 50px;
+
+ a>span,
+ a:hover>span {
+ color: var(--tainacan-block-gray5, $gray5);
+ font-weight: bold;
+ text-decoration: none;
+ padding: 8px 16px;
+ display: block;
+ line-height: 1.2em;
+ word-break: break-word;
+ }
+ a>img {
+ width: 100%;
+ height: auto;
+ }
+ a:hover {
+ text-decoration: none;
+ }
+ }
+ }
+
+ .preview-warning {
+ width: 100%;
+ font-size: 0.875em;
+ font-style: italic;
+ color: var(--tainacan-block-gray4, $gray4);
+ text-align: center;
+ margin: 0 auto;
+ padding: 8px 2px 2px 2px;
+ }
+
+ // Next and previous buttons
+ .swiper-button-prev, .swiper-button-next {
+ top: calc(50% - 42px);
+ bottom: initial;
+ background: none;
+ border: none;
+ width: 42px;
+ height: 42px;
+ padding: 0;
+ margin: 0 -4px;
+
+ svg {
+ fill: var(--tainacan-block-primary, $primary);
+ }
+ &::after,
+ &::before {
+ content: none !important;
+ }
+ }
+
+ // Carousel placeholder on editor side ----------------------------------------------------
+ .items-list-edit-container,
+ .tainacan-carousel {
+ position: relative;
+
+ & .skeleton {
+ min-height: 150px;
+ }
+
+ &.has-arrows-none .swiper-button-prev,
+ &.has-arrows-none .swiper-button-next {
+ display: none;
+ }
+ &.has-arrows-left .swiper-button-next {
+ left: 10px;
+ right: auto;
+ top: calc(50% + 12px) !important;
+ }
+ &.has-arrows-right .swiper-button-prev {
+ right: 10px;
+ left: auto;
+ }
+ &.has-arrows-right .swiper-button-next {
+ top: calc(50% + 12px) !important;
+ }
+ &.has-large-arrows .swiper-button-prev,
+ &.has-large-arrows .swiper-button-next {
+ top: calc(50% - 60px);
+ width: 60px;
+ height: 60px;
+ margin: 0 -24px;
+ }
+ &.has-large-arrows.has-arrows-left .swiper-button-next {
+ left: 30px;
+ right: auto;
+ top: calc(50% + 30px) !important;
+ }
+ &.has-large-arrows.has-arrows-right .swiper-button-prev {
+ right: 30px;
+ left: auto;
+ }
+ &.has-large-arrows.has-arrows-right .swiper-button-next {
+ top: calc(50% + 30px) !important;
+ }
+ }
+ ul.items-list-edit {
+ display: flex;
+ align-items: flex-start;
+ overflow-x: scroll;
+ list-style: none;
+ margin: 0 36px;
+ scroll-snap-type: x mandatory;
+ scroll-padding-left: 10px;
+
+ li.item-list-item {
+ position: relative;
+ display: block;
+ margin: 16px;
+ width: calc(14.285% - 32px);
+ min-width: calc(14.285% - 32px);
+ scroll-snap-align: start;
+ scroll-margin: 0 16px;
+
+ a {
+ color: var(--tainacan-block-gray5, $gray5);
+ font-weight: bold;
+ line-height: normal;
+ }
+
+ img {
+ height: auto;
+ display: block;
+ padding: 0px;
+ margin-bottom: 0.5em;
+ }
+
+ &:hover a {
+ color: var(--tainacan-block-gray5, $gray5);
+ text-decoration: none;
+ }
+
+ button {
+ position: absolute !important;
+ background-color: rgba(255, 255, 255, 0.75);
+ color: var(--tainacan-block-gray5, $gray5);
+ padding: 2px;
+ margin-left: 5px;
+ min-width: 14px;
+ visibility: hidden;
+ position: relative;
+ opacity: 0;
+ right: -14px;
+ top: 0px;
+ justify-content: center;
+ z-index: 999;
+
+ .dashicon { margin: 0px; }
+ }
+
+ &:hover button {
+ height: auto;
+ visibility: visible;
+ background-color: rgba(255, 255, 255, 1) !important;
+ opacity: 1;
+ right: -8px;
+ top: -8px;
+ border: 1px solid var(--tainacan-block-gray3, $gray3);
+ border-radius: 12px;
+ transition: opacity linear 0.15s, right linear 0.15s;
+ }
+ &:hover button:hover {
+ background-color: rgba(255, 255, 255, 1) !important;
+ border: 1px solid var(--tainacan-block-gray3, $gray3) !important;
+ }
+
+ &.max-itens-per-screen-9 {
+ width: calc((100% / 9) - 32px);
+ min-width: calc((100% / 9) - 32px);
+ }
+ &.max-itens-per-screen-8 {
+ width: calc((100% / 8) - 32px);
+ min-width: calc((100% / 8) - 32px);
+ }
+ &.max-itens-per-screen-7 {
+ width: calc((100% / 7) - 32px);
+ min-width: calc((100% / 7) - 32px);
+ }
+ &.max-itens-per-screen-6 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px);
+ }
+ &.max-itens-per-screen-5 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px);
+ }
+ &.max-itens-per-screen-4 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px);
+ }
+ &.max-itens-per-screen-3 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px);
+ }
+ &.max-itens-per-screen-2 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px);
+ }
+ &.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px);
+ }
+ }
+ }
+ @media only screen and (max-width: 1686px) {
+
+ ul.items-list-edit li.item-list-item {
+ width: calc(16.666% - 32px);
+ min-width: calc(16.666% - 32px);
+
+ &.max-itens-per-screen-9 {
+ width: calc((100% / 8) - 32px);
+ min-width: calc((100% / 8) - 32px);
+ }
+ &.max-itens-per-screen-8 {
+ width: calc((100% / 7) - 32px);
+ min-width: calc((100% / 7) - 32px);
+ }
+ &.max-itens-per-screen-7 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px);
+ }
+ &.max-itens-per-screen-6 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px);
+ }
+ &.max-itens-per-screen-5 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px);
+ }
+ &.max-itens-per-screen-4 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px);
+ }
+ &.max-itens-per-screen-3 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px);
+ }
+ &.max-itens-per-screen-2,
+ &.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px);
+ }
+ }
+ }
+ @media only screen and (max-width: 1452px) {
+
+ ul.items-list-edit li.item-list-item {
+ width: calc(20% - 32px);
+ min-width: calc(20% - 32px);
+
+ &.max-itens-per-screen-9 {
+ width: calc((100% / 7) - 32px);
+ min-width: calc((100% / 7) - 32px);
+ }
+ &.max-itens-per-screen-8 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px);
+ }
+ &.max-itens-per-screen-7 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px);
+ }
+ &.max-itens-per-screen-6 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px);
+ }
+ &.max-itens-per-screen-5 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px);
+ }
+ &.max-itens-per-screen-4 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px);
+ }
+ &.max-itens-per-screen-3,
+ &.max-itens-per-screen-2,
+ &.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px);
+ }
+ }
+ }
+ @media only screen and (max-width: 1118px) {
+
+ ul.items-list-edit li.item-list-item {
+ width: calc(25% - 32px);
+ min-width: calc(25% - 32px);
+
+ &.max-itens-per-screen-9 {
+ width: calc((100% / 6) - 32px);
+ min-width: calc((100% / 6) - 32px);
+ }
+ &.max-itens-per-screen-8 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px);
+ }
+ &.max-itens-per-screen-7 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px);
+ }
+ &.max-itens-per-screen-6 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px);
+ }
+ &.max-itens-per-screen-5 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px);
+ }
+ &.max-itens-per-screen-4,
+ &.max-itens-per-screen-3,
+ &.max-itens-per-screen-2,
+ &.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px);
+ }
+ }
+ }
+ @media only screen and (max-width: 854px) {
+
+ ul.items-list-edit li.item-list-item {
+ width: calc(33.333% - 32px);
+ min-width: calc(33.333% - 32px);
+
+ &.max-itens-per-screen-9 {
+ width: calc((100% / 5) - 32px);
+ min-width: calc((100% / 5) - 32px);
+ }
+ &.max-itens-per-screen-8 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px);
+ }
+ &.max-itens-per-screen-7 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px);
+ }
+ &.max-itens-per-screen-6 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px);
+ }
+ &.max-itens-per-screen-5,
+ &.max-itens-per-screen-4,
+ &.max-itens-per-screen-3,
+ &.max-itens-per-screen-2,
+ &.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px);
+ }
+ }
+ }
+ @media only screen and (max-width: 584px) {
+
+ ul.items-list-edit li.item-list-item {
+ width: calc(50% - 32px);
+ min-width: calc(50% - 32px);
+
+ &.max-itens-per-screen-9 {
+ width: calc((100% / 4) - 32px);
+ min-width: calc((100% / 4) - 32px);
+ }
+ &.max-itens-per-screen-8 {
+ width: calc((100% / 3) - 32px);
+ min-width: calc((100% / 3) - 32px);
+ }
+ &.max-itens-per-screen-7 {
+ width: calc((100% / 2) - 32px);
+ min-width: calc((100% / 2) - 32px);
+ }
+ &.max-itens-per-screen-6,
+ &.max-itens-per-screen-5,
+ &.max-itens-per-screen-4,
+ &.max-itens-per-screen-3,
+ &.max-itens-per-screen-2,
+ &.max-itens-per-screen-1 {
+ width: calc(100% - 32px);
+ min-width: calc(100% - 32px);
+ }
+ }
+ }
+
+}
diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js
new file mode 100644
index 000000000..111ab743f
--- /dev/null
+++ b/src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js
@@ -0,0 +1,822 @@
+const { registerBlockType } = wp.blocks;
+
+const { __ } = wp.i18n;
+
+const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+
+const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
+import CarouselRelatedItemsModal from './carousel-related-items-modal.js';
+import tainacan from '../../js/axios.js';
+import axios from 'axios';
+import qs from 'qs';
+import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
+import DeprecatedBlocks from './carousel-related-items-deprecated.js';
+
+registerBlockType('tainacan/carousel-related-items', {
+ title: __('Tainacan Related Items Carousel', 'tainacan'),
+ icon:
+ ,
+ category: 'tainacan-blocks',
+ keywords: [ __( 'items', 'tainacan' ), __( 'carousel', 'tainacan' ), __( 'slider', 'tainacan' ), __( 'relationship', 'tainacan' ) ],
+ description: __('A carousel do list items related to a certain item via relationship metadata.', 'tainacan'),
+ example: {
+ attributes: {
+ content: 'preview'
+ }
+ },
+ attributes: {
+ content: {
+ type: 'array',
+ source: 'children',
+ selector: 'div'
+ },
+ collectionId: {
+ type: String,
+ default: undefined
+ },
+ items: {
+ type: Array,
+ default: []
+ },
+ isModalOpen: {
+ type: Boolean,
+ default: false
+ },
+ searchURL: {
+ type: String,
+ default: undefined
+ },
+ selectedItems: {
+ type: Array,
+ default: []
+ },
+ itemsRequestSource: {
+ type: String,
+ default: undefined
+ },
+ maxItemsNumber: {
+ type: Number,
+ value: undefined
+ },
+ maxItemsPerScreen: {
+ type: Number,
+ value: 7
+ },
+ isLoading: {
+ type: Boolean,
+ value: false
+ },
+ isLoadingCollection: {
+ type: Boolean,
+ value: false
+ },
+ loadStrategy: {
+ type: String,
+ value: 'search'
+ },
+ arrowsPosition: {
+ type: String,
+ value: 'search'
+ },
+ largeArrows: {
+ type: Boolean,
+ value: false
+ },
+ autoPlay: {
+ type: Boolean,
+ value: false
+ },
+ autoPlaySpeed: {
+ type: Number,
+ value: 3
+ },
+ loopSlides: {
+ type: Boolean,
+ value: false
+ },
+ hideTitle: {
+ type: Boolean,
+ value: true
+ },
+ showCollectionHeader: {
+ type: Boolean,
+ value: false
+ },
+ showCollectionLabel: {
+ type: Boolean,
+ value: false
+ },
+ cropImagesToSquare: {
+ type: Boolean,
+ value: true
+ },
+ collection: {
+ type: Object,
+ value: undefined
+ },
+ blockId: {
+ type: String,
+ default: undefined
+ },
+ collectionBackgroundColor: {
+ type: String,
+ default: "#454647"
+ },
+ collectionTextColor: {
+ type: String,
+ default: "#ffffff"
+ }
+ },
+ supports: {
+ align: ['full', 'wide'],
+ html: false,
+ multiple: true,
+ fontSize: true
+ },
+ edit({ attributes, setAttributes, className, isSelected, clientId }){
+ let {
+ items,
+ content,
+ collectionId,
+ isModalOpen,
+ searchURL,
+ itemsRequestSource,
+ maxItemsNumber,
+ maxItemsPerScreen,
+ selectedItems,
+ isLoading,
+ loadStrategy,
+ arrowsPosition,
+ largeArrows,
+ autoPlay,
+ autoPlaySpeed,
+ loopSlides,
+ hideTitle,
+ cropImagesToSquare,
+ showCollectionHeader,
+ showCollectionLabel,
+ isLoadingCollection,
+ collection,
+ collectionBackgroundColor,
+ collectionTextColor
+ } = attributes;
+
+ // Obtains block's client id to render it on save function
+ setAttributes({ blockId: clientId });
+ const thumbHelper = ThumbnailHelperFunctions();
+
+ // Sets some defaults that were not working
+ if (maxItemsPerScreen === undefined) {
+ maxItemsPerScreen = 7;
+ setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
+ }
+ if (cropImagesToSquare === undefined) {
+ cropImagesToSquare = true;
+ setAttributes({ cropImagesToSquare: cropImagesToSquare });
+ }
+
+ function prepareItem(item) {
+ return (
+
+ { loadStrategy == 'selection' ?
+ ( tainacan_blocks.wp_version < '5.4' ?
+ removeItemOfId(item.id) }
+ icon="no-alt"
+ label={__('Remove', 'tainacan')}/>
+ :
+
+ );
+ }
+
+ function setContent(){
+ isLoading = true;
+
+ setAttributes({
+ isLoading: isLoading
+ });
+
+ if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
+ itemsRequestSource.cancel('Previous items search canceled.');
+
+ itemsRequestSource = axios.CancelToken.source();
+
+ items = [];
+
+ if (loadStrategy == 'selection') {
+ let endpoint = '/collection/' + collectionId + '/items?'+ qs.stringify({ postin: selectedItems, perpage: selectedItems.length }) + '&fetch_only=title,url,thumbnail';
+
+ tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
+ .then(response => {
+
+ for (let item of response.data.items)
+ items.push(prepareItem(item));
+
+ setAttributes({
+ content: ,
+ items: items,
+ isLoading: false,
+ itemsRequestSource: itemsRequestSource
+ });
+ });
+ } else {
+
+ let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
+ let query = endpoint.split('?')[1];
+ let queryObject = qs.parse(query);
+
+ // Set up max items to be shown
+ if (maxItemsNumber != undefined && maxItemsNumber > 0)
+ queryObject.perpage = maxItemsNumber;
+ else if (queryObject.perpage != undefined && queryObject.perpage > 0)
+ setAttributes({ maxItemsNumber: queryObject.perpage });
+ else {
+ queryObject.perpage = 12;
+ setAttributes({ maxItemsNumber: 12 });
+ }
+
+ // Remove unecessary queries
+ delete queryObject.readmode;
+ delete queryObject.iframemode;
+ delete queryObject.admin_view_mode;
+ delete queryObject.fetch_only_meta;
+
+ endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
+
+ tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
+ .then(response => {
+
+ for (let item of response.data.items)
+ items.push(prepareItem(item));
+
+ setAttributes({
+ content: ,
+ items: items,
+ isLoading: false,
+ itemsRequestSource: itemsRequestSource
+ });
+ });
+ }
+ }
+
+ function fetchCollectionForHeader() {
+ if (showCollectionHeader) {
+
+ isLoadingCollection = true;
+ setAttributes({
+ isLoadingCollection: isLoadingCollection
+ });
+
+ tainacan.get('/collections/' + collectionId + '?fetch_only=name,thumbnail,header_image')
+ .then(response => {
+ collection = response.data;
+ isLoadingCollection = false;
+
+ if (collection.tainacan_theme_collection_background_color)
+ collectionBackgroundColor = collection.tainacan_theme_collection_background_color;
+ else
+ collectionBackgroundColor = '#454647';
+
+ if (collection.tainacan_theme_collection_color)
+ collectionTextColor = collection.tainacan_theme_collection_color;
+ else
+ collectionTextColor = '#ffffff';
+
+ setAttributes({
+ content: ,
+ collection: collection,
+ isLoadingCollection: isLoadingCollection,
+ collectionBackgroundColor: collectionBackgroundColor,
+ collectionTextColor: collectionTextColor
+ });
+ });
+ }
+ }
+
+ function openCarouseltemsModal(aLoadStrategy) {
+ loadStrategy = aLoadStrategy;
+ isModalOpen = true;
+ setAttributes( {
+ isModalOpen: isModalOpen,
+ loadStrategy: loadStrategy
+ } );
+ }
+
+ function removeItemOfId(itemId) {
+
+ let existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+ if (existingItemIndex >= 0)
+ items.splice(existingItemIndex, 1);
+
+ let existingSelectedItemIndex = selectedItems.findIndex((existingSelectedItem) => existingSelectedItem == itemId);
+ if (existingSelectedItemIndex >= 0)
+ selectedItems.splice(existingSelectedItemIndex, 1);
+
+ setAttributes({
+ selectedItems: selectedItems,
+ items: items,
+ content:
+ });
+
+ }
+
+ // Executed only on the first load of page
+ if(content && content.length && content[0].type)
+ setContent();
+
+ return content == 'preview' ?
+
+
+
+ : (
+
+
+ { items.length ?
+
+ { loadStrategy != 'search' ?
+ TainacanBlocksCompatToolbar({
+ label: __('Add more items', 'tainacan'),
+ icon: ,
+ onClick: openCarouseltemsModal,
+ onClickParams: 'selection'
+ })
+ :
+ TainacanBlocksCompatToolbar({
+ label: __('Configure a search', 'tainacan'),
+ icon: ,
+ onClick: openCarouseltemsModal,
+ onClickParams: 'search'
+ })
+ }
+
+ : null }
+
+
+
+
+ {
+ showCollectionHeader = isChecked;
+ if (isChecked) fetchCollectionForHeader();
+ setAttributes({ showCollectionHeader: showCollectionHeader });
+ }
+ }
+ />
+ { showCollectionHeader ?
+
+
+ {
+ showCollectionLabel = isChecked;
+ setAttributes({ showCollectionLabel: showCollectionLabel });
+ }
+ }
+ />
+
+
+ {
+ collectionBackgroundColor = value.hex;
+ setAttributes({ collectionBackgroundColor: collectionBackgroundColor })
+ }}
+ disableAlpha
+ />
+
+
+
+ {
+ collectionTextColor = color;
+ setAttributes({ collectionTextColor: collectionTextColor })
+ }}
+ />
+
+
+ : null
+ }
+
+
+
+
+ {
+ maxItemsPerScreen = aMaxItemsPerScreen;
+ setAttributes( { maxItemsPerScreen: aMaxItemsPerScreen } );
+ setContent();
+ }}
+ min={ 1 }
+ max={ 9 }
+ />
+ 4 ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
+ checked={ cropImagesToSquare && maxItemsPerScreen > 4 }
+ onChange={ ( isChecked ) => {
+ cropImagesToSquare = isChecked;
+ setAttributes({ cropImagesToSquare: cropImagesToSquare });
+ setContent();
+ }
+ }
+ />
+ {
+ hideTitle = isChecked;
+ setAttributes({ hideTitle: hideTitle });
+ setContent();
+ }
+ }
+ />
+ {
+ loopSlides = isChecked;
+ setAttributes({ loopSlides: loopSlides });
+ }
+ }
+ />
+ {
+ autoPlay = isChecked;
+ setAttributes({ autoPlay: autoPlay });
+ }
+ }
+ />
+ {
+ autoPlay ?
+ {
+ autoPlaySpeed = aAutoPlaySpeed;
+ setAttributes( { autoPlaySpeed: aAutoPlaySpeed } )
+ }}
+ min={ 1 }
+ max={ 5 }
+ />
+ : null
+ }
+ {
+ arrowsPosition = aPosition;
+
+ setAttributes({ arrowsPosition: arrowsPosition });
+ }}/>
+ {
+ largeArrows = isChecked;
+ setAttributes({ largeArrows: largeArrows });
+ }
+ }
+ />
+
+
+
+ { loadStrategy == 'search' ?
+
+
+ {
+ maxItemsNumber = aMaxItemsNumber;
+ setAttributes( { maxItemsNumber: aMaxItemsNumber } )
+ setContent();
+ }}
+ min={ 1 }
+ max={ 96 }
+ />
+
+
+ :null
+ }
+
+
+
+ { isSelected ?
+ (
+
+ { isModalOpen ?
+ {
+ if (collectionId != selectedCollectionId) {
+ items = [];
+ selectedItems = [];
+ }
+ collectionId = selectedCollectionId;
+ setAttributes({
+ collectionId: collectionId,
+ items: items,
+ selectedItems: selectedItems
+ });
+ }}
+ onApplySearchURL={ (aSearchURL) => {
+ searchURL = aSearchURL;
+ loadStrategy = 'search';
+ setAttributes({
+ searchURL: searchURL,
+ loadStrategy: loadStrategy,
+ isModalOpen: false
+ });
+ setContent();
+ }}
+ onApplySelectedItems={ (aSelectionOfItems) => {
+ selectedItems = selectedItems.concat(aSelectionOfItems);
+ loadStrategy = 'selection';
+ setAttributes({
+ selectedItems: selectedItems,
+ loadStrategy: loadStrategy,
+ isModalOpen: false
+ });
+ setContent();
+ }}
+ onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
+ : null
+ }
+
+
+ ) : null
+ }
+
+ {
+ showCollectionHeader ?
+
+
{
+ isLoadingCollection ?
+
+
+
+ :
+
+ }
+
+ : null
+ }
+ { !items.length && !isLoading ? (
+
+ )}>
+
+
+ {__('List items on a Carousel, using search or item selection.', 'tainacan')}
+
+
+
{__('or', 'tainacan')}
+
+
+ ) : null
+ }
+
+ { isLoading ?
+
+
+
:
+
+ { isSelected && items.length ?
+
{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}
+ : null
+ }
+ { items.length ? (
+
+
+
+
+
+
+ ):null
+ }
+
+
+ }
+
+
+ );
+ },
+ save({ attributes, className }){
+ const {
+ content,
+ blockId,
+ collectionId,
+ searchURL,
+ selectedItems,
+ arrowsPosition,
+ largeArrows,
+ loadStrategy,
+ maxItemsNumber,
+ maxItemsPerScreen,
+ autoPlay,
+ autoPlaySpeed,
+ loopSlides,
+ hideTitle,
+ cropImagesToSquare,
+ showCollectionHeader,
+ showCollectionLabel,
+ collectionBackgroundColor,
+ collectionTextColor
+ } = attributes;
+
+ return
+ { content }
+
+ },
+ deprecated: DeprecatedBlocks
+});
\ No newline at end of file
diff --git a/webpack.common.js b/webpack.common.js
index 9adc9879c..c78053f4f 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -28,6 +28,9 @@ module.exports = {
block_carousel_collections_list: './src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js',
block_carousel_collections_list_theme: './src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.js',
+
+ block_carousel_related_items: './src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js',
+ block_carousel_related_items_theme: './src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.js',
block_facets_list: './src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js',
block_facets_list_theme: './src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js',