From a8daeba237f87799100fcff0d239d7535858cc21 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Mon, 14 Jun 2021 16:46:31 -0300 Subject: [PATCH] Begins implementation of related items carousel block. #358 --- compile-sass.sh | 4 +- ...gutenberg-block-carousel-related-items.css | 398 +++++++++ ...nberg-block-carousel-related-items.css.map | 7 + .../admin/components/lists/items-list.vue | 32 +- .../class-tainacan-gutenberg-block.php | 1 + .../carousel-related-items-deprecated.js | 1 + .../carousel-related-items-modal.js | 364 ++++++++ .../carousel-related-items-theme.js | 108 +++ .../carousel-related-items-theme.vue | 372 ++++++++ .../carousel-related-items.scss | 531 +++++++++++ .../carousel-related-items/index.js | 822 ++++++++++++++++++ webpack.common.js | 3 + 12 files changed, 2616 insertions(+), 27 deletions(-) create mode 100644 src/assets/css/tainacan-gutenberg-block-carousel-related-items.css create mode 100644 src/assets/css/tainacan-gutenberg-block-carousel-related-items.css.map create mode 100644 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-deprecated.js create mode 100644 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-modal.js create mode 100644 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.js create mode 100644 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.vue create mode 100644 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss create mode 100644 src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js 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": "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", +"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')}> +