diff --git a/compile-sass.sh b/compile-sass.sh index 92369e83c..08d2bbea9 100644 --- a/compile-sass.sh +++ b/compile-sass.sh @@ -31,5 +31,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-10 src/gutenberg-blocks/tainaca sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss:src/assets/css/tainacan-gutenberg-block-facets-list.css +sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css + echo "Compilação do Sass Concluído!" exit 0 diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css b/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css new file mode 100644 index 000000000..59f0778cc --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css @@ -0,0 +1,424 @@ +[data-align='full'] .block-control { + width: calc(100% + 14px); } + +.block-control { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 5px; + position: relative; + top: -14px; + left: -14px; + width: calc(100% + 28px); + background: #f2f2f2; } + .block-control p { + font-size: 0.875rem !important; + margin: 12px 1.5rem 16px 0; + fill: #555758; } + .block-control p svg { + top: 4px; + margin-right: 0.75rem; + position: relative; + fill: #555758; } + +.components-placeholder__fieldset p { + font-size: 0.875rem !important; + margin-top: -2px; + fill: #555758; } + .components-placeholder__fieldset p svg { + margin-right: 1rem; + top: 4px; + position: relative; + fill: #555758; } + +.wp-block-tainacan-modal { + width: 50%; } + @media only screen and (max-width: 1024px) { + .wp-block-tainacan-modal { + width: 75%; } } + @media only screen and (max-width: 768px) { + .wp-block-tainacan-modal { + width: 100%; } } + .wp-block-tainacan-modal.dynamic-modal { + width: 90%; + height: 90%; + width: 80vw; + height: 80vh; } + .wp-block-tainacan-modal.dynamic-modal iframe { + width: calc(100% + 32px); + height: calc(100% - 128px); + margin-left: -16px; } + .wp-block-tainacan-modal.dynamic-modal .modal-footer-area { + height: 68px; + width: calc(100% + 32px); + margin-left: -16px !important; + padding: 1.2rem 1.2rem !important; + border-top: 1px solid #cbcbcb; } + .wp-block-tainacan-modal .spinner-container { + min-height: 56px; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; + color: #555758; } + .wp-block-tainacan-modal .spinner-container .components-spineer { + margin: 8px; } + .wp-block-tainacan-modal .components-modal__header .components-icon-button { + padding-right: 0; } + .wp-block-tainacan-modal hr { + margin: 5px 0.75rem; } + .wp-block-tainacan-modal .modal-search-area { + display: flex; + justify-content: center; + margin-bottom: 14px; } + .wp-block-tainacan-modal .modal-search-area .components-base-control { + width: 60%; } + @media only screen and (max-width: 1024px) { + .wp-block-tainacan-modal .modal-search-area .components-base-control { + width: 95%; } } + .wp-block-tainacan-modal .modal-search-area .components-base-control:nth-child(2) { + flex-shrink: 2; } + .wp-block-tainacan-modal .modal-search-area .components-base-control .components-base-control__field { + flex-wrap: wrap; } + .wp-block-tainacan-modal .modal-search-area .components-base-control label.components-base-control__label { + font-weight: 500; + color: #454647; + font-size: 0.875rem; + text-align: center; } + .wp-block-tainacan-modal .modal-search-area .components-base-control input.components-text-control__input { + padding: 5px 8px; + height: 28px; } + .wp-block-tainacan-modal .modal-radio-area-label { + font-weight: 500; + margin-left: 1.75rem; } + .wp-block-tainacan-modal .modal-checkbox-list, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field { + padding: 0; + display: -ms-grid; + display: grid; + grid-template-columns: repeat(auto-fill, 250px); + grid-gap: 0px; + justify-content: space-evenly; + list-style-type: none; + margin: 12px; + max-height: 50vh; + overflow-y: auto; + overflow-x: hidden; } + .wp-block-tainacan-modal .modal-checkbox-list .components-base-control, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control { + overflow: hidden; } + .wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item, + .wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option { + display: flex; + justify-content: flex-start; } + .wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item img, + .wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option img, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item img, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option img { + width: 24px; + height: 24px; + margin-right: 10px; } + .wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label, + .wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + max-width: 85%; } + @media only screen and (max-width: 768px) { + .wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label, + .wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label, + .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label { + max-width: 80%; } } + .wp-block-tainacan-modal .modal-loadmore-section { + display: flex; + align-items: baseline; + justify-content: center; } + .wp-block-tainacan-modal .modal-loadmore-section p { + color: #555758; + margin-right: 12px; + margin-top: 2px; } + .wp-block-tainacan-modal .modal-footer-area { + border-top: 1px solid #e2e4e7; + display: flex; + align-items: baseline; + justify-content: space-between; + padding: 16px 16px 0 16px; + margin: 0 -16px; } + .wp-block-tainacan-modal .modal-footer-area p { + padding: 0 12px; + color: #454647; } + +.components-panel__body .term-carousel-view-modes { + display: flex; + margin: 12px 0 24px 0; } + .components-panel__body .term-carousel-view-modes button { + background: transparent; + border: 1px solid #cbcbcb; + border-radius: 5px; + padding: 2px; + margin: 0; + width: calc(50% - 6px); + flex-shrink: 0; + cursor: pointer; + transition: border ease 0.5s, opacity ease 0.5; } + .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid { + margin-right: 6px; } + .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid div { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-template-rows: 50% 50%; + grid-column-gap: 2px; + grid-row-gap: 2px; + width: 60px; + height: 40px; + margin: 4px auto 8px auto; } + .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid div > div:first-of-type { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; + width: 41px; + height: 42px; } + .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid div > div { + width: 20px; + height: 20px; + background: #555758; + transition: background-color ease 0.5s; } + .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-thumbnail { + margin-left: 6px; } + .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-thumbnail div { + display: block; + height: 40px; + width: 40px; + background: #555758; + margin: 4px auto 8px auto; + transition: background-color ease 0.5s; } + .components-panel__body .term-carousel-view-modes button label { + font-size: 0.75rem; + color: #555758; } + .components-panel__body .term-carousel-view-modes button.is-active { + border: 2px solid #298596; } + .components-panel__body .term-carousel-view-modes button.is-active.term-carousel-view-mode-thumbnail div, .components-panel__body .term-carousel-view-modes button.is-active.term-carousel-view-mode-grid div > div { + background-color: #298596; } + .components-panel__body .term-carousel-view-modes button:hover { + opacity: 0.9; + border-width: 2px; } + .components-panel__body .term-carousel-view-modes button:hover button { + background: #f2f2f2; } + +.wp-block-tainacan-carousel-terms-list { + margin: 2rem 0px; } + .wp-block-tainacan-carousel-terms-list .spinner-container { + min-height: 56px; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; + color: #555758; } +@-webkit-keyframes skeleton-animation { + 0% { + opacity: 1.0; } + 50% { + opacity: 0.2; } + 100% { + opacity: 1.0; } } +@-moz-keyframes skeleton-animation { + 0% { + opacity: 1.0; } + 50% { + opacity: 0.2; } + 100% { + opacity: 1.0; } } +@-o-keyframes skeleton-animation { + 0% { + opacity: 1.0; } + 50% { + opacity: 0.2; } + 100% { + opacity: 1.0; } } +@keyframes skeleton-animation { + 0% { + opacity: 1.0; } + 50% { + opacity: 0.2; } + 100% { + opacity: 1.0; } } + .wp-block-tainacan-carousel-terms-list .skeleton { + border-radius: 2px; + background: #f2f2f2; + -webkit-animation: skeleton-animation 1.8s ease infinite; + -moz-animation: skeleton-animation 1.8s ease infinite; + -o-animation: skeleton-animation 1.8s ease infinite; + animation: skeleton-animation 1.8s ease infinite; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel { + position: relative; + width: calc(100% + 40px); + left: -20px; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container { + margin: 0 50px; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a > span, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a:hover > span { + color: black; + font-weight: bold; + text-decoration: none; + padding: 8px 16px; + display: block; + line-height: 1.2rem; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a > img { + width: 100%; + height: auto; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a:hover { + text-decoration: none; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid a { + width: 100%; + display: block; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-template-rows: 50% 50%; + width: 100%; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid img:first-of-type { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; } + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid img { + width: 100%; + height: auto; + padding: 2px; + margin-bottom: 0px; } + .wp-block-tainacan-carousel-terms-list .preview-warning { + width: 100%; + font-size: 0.875rem; + font-style: italic; + color: #898d8f; + text-align: center; + margin: 4px auto; } + .wp-block-tainacan-carousel-terms-list .swiper-button-prev, .wp-block-tainacan-carousel-terms-list .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-terms-list .swiper-button-prev svg, .wp-block-tainacan-carousel-terms-list .swiper-button-next svg { + fill: #298596; } + .wp-block-tainacan-carousel-terms-list .terms-list-edit-container, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel { + position: relative; } + .wp-block-tainacan-carousel-terms-list .terms-list-edit-container .skeleton, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel .skeleton { + min-height: 150px; + max-height: 150px; } + .wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-none .swiper-button-prev, .wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-none .swiper-button-next, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-none .swiper-button-prev, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-none .swiper-button-next { + display: none; } + .wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-left .swiper-button-next, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-left .swiper-button-next { + left: 10px; + right: auto; + top: calc(50% + 12px) !important; } + .wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-right .swiper-button-prev, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-right .swiper-button-prev { + right: 10px; + left: auto; } + .wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-right .swiper-button-next, + .wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-right .swiper-button-next { + top: calc(50% + 12px) !important; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit { + display: flex; + align-items: flex-start; + overflow-x: scroll; + list-style: none; + margin: 0 36px; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item { + position: relative; + display: block; + margin: 16px 32px 16px 0px; + width: calc(16.666% - 32px); + min-width: calc(16.666% - 32px); } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.term-list-item-grid { + margin: 16px; + width: calc(25% - 16px); + min-width: calc(25% - 16px); } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item a { + color: #454647; + font-weight: bold; + line-height: normal; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item img { + height: auto; + padding: 0px; + margin-bottom: 0.5rem; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item:hover a { + color: #454647; + text-decoration: none; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item button { + position: absolute !important; + background-color: rgba(255, 255, 255, 0.75); + color: #454647; + padding: 2px; + margin-left: 5px; + min-width: 14px; + visibility: hidden; + position: relative; + opacity: 0; + right: -14px; + top: 0px; + justify-content: center; + z-index: 999; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item:hover button { + visibility: visible; + background-color: white !important; + opacity: 1; + right: -8px; + top: -8px; + border: 1px solid #cbcbcb; + border-radius: 12px; + transition: opacity linear 0.15s, right linear 0.15s; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item:hover button:hover { + background-color: white !important; + border: 1px solid #cbcbcb !important; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item .term-items-grid { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-template-rows: 50% 50%; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item .term-items-grid img:first-of-type { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; } + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item .term-items-grid img { + padding: 2px; + margin-bottom: 0px; } + @media only screen and (max-width: 1686px) { + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item { + width: calc(20% - 32px); + min-width: calc(20% - 32px); } } + @media only screen and (max-width: 1452px) { + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item { + width: calc(25% - 32px); + min-width: calc(25% - 32px); } } + @media only screen and (max-width: 1118px) { + .wp-block-tainacan-carousel-terms-list ul.terms-edit li.term-list-item { + width: calc(33.333% - 32px); + min-width: calc(33.333% - 32px); } } + @media only screen and (max-width: 854px) { + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item { + width: calc(50% - 32px); + min-width: calc(50% - 32px); } } + @media only screen and (max-width: 584px) { + .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item { + width: calc(100% - 32px); + min-width: calc(100% - 32px); } } + +/*# sourceMappingURL=tainacan-gutenberg-block-carousel-terms-list.css.map */ diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map b/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map new file mode 100644 index 000000000..1154d64f7 --- /dev/null +++ b/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../../gutenberg-blocks/gutenberg-blocks-style.scss","../../gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss"], +"names": [], +"file": "tainacan-gutenberg-block-carousel-terms-list.css" +} diff --git a/src/gutenberg-blocks/class-tainacan-gutenberg-block.php b/src/gutenberg-blocks/class-tainacan-gutenberg-block.php index a0dade68d..1b5046874 100644 --- a/src/gutenberg-blocks/class-tainacan-gutenberg-block.php +++ b/src/gutenberg-blocks/class-tainacan-gutenberg-block.php @@ -17,6 +17,7 @@ function tainacan_blocks_add_gutenberg_blocks_actions() { add_action('init', 'tainacan_blocks_register_tainacan_items_list'); add_action('init', 'tainacan_blocks_register_tainacan_dynamic_items_list'); add_action('init', 'tainacan_blocks_register_tainacan_carousel_items_list'); + add_action('init', 'tainacan_blocks_register_tainacan_carousel_terms_list'); add_action('init', 'tainacan_blocks_register_tainacan_search_bar'); add_action('init', 'tainacan_blocks_register_tainacan_collections_list'); add_action('init', 'tainacan_blocks_register_tainacan_carousel_collections_list'); @@ -176,6 +177,36 @@ function tainacan_blocks_register_tainacan_carousel_items_list(){ } } +function tainacan_blocks_register_tainacan_carousel_terms_list(){ + global $TAINACAN_BASE_URL; + + wp_enqueue_script( + 'carousel-terms-list-theme', + $TAINACAN_BASE_URL . '/assets/gutenberg_carousel_terms_list_theme-components.js', + array('wp-components') + ); + + wp_register_script( + 'carousel-terms-list', + $TAINACAN_BASE_URL . '/assets/gutenberg_carousel_terms_list-components.js', + array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor') + ); + + wp_register_style( + 'carousel-terms-list', + $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-carousel-terms-list.css', + array('wp-edit-blocks') + ); + + if (function_exists('register_block_type')) { + register_block_type( 'tainacan/carousel-terms-list', array( + 'editor_script' => 'carousel-terms-list', + 'style' => 'carousel-terms-list', + 'script' => 'carousel-terms-list-theme' + ) ); + } +} + function tainacan_blocks_register_tainacan_search_bar(){ global $TAINACAN_BASE_URL; @@ -281,6 +312,7 @@ function tainacan_blocks_add_plugin_settings() { wp_localize_script( 'items-list', 'tainacan_plugin', $settings ); wp_localize_script( 'dynamic-items-list', 'tainacan_plugin', $settings ); wp_localize_script( 'carousel-items-list', 'tainacan_plugin', $settings ); + wp_localize_script( 'carousel-terms-list', 'tainacan_plugin', $settings ); wp_localize_script( 'search-bar', 'tainacan_plugin', $settings ); wp_localize_script( 'collections-list', 'tainacan_plugin', $settings ); wp_localize_script( 'carousel-collections-list', 'tainacan_plugin', $settings ); diff --git a/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js new file mode 100644 index 000000000..be48640a1 --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js @@ -0,0 +1,72 @@ +import Vue from 'vue'; +import CarouselTermsListTheme from './carousel-terms-list-theme.vue'; + +// 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-terms-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: { + selectedItem: [], + maxItemsNumber: 12, + arrowsPosition: 'around', + autoPlay: false, + autoPlaySpeed: 3, + loopSlides: false, + hideName: true, + showCollectionThumbnail: false, + tainacanApiRoot: '', + tainacanBaseUrl: '', + className: '' + }, + render(h){ + return h(CarouselTermsListTheme, { + props: { + blockId: blockId, + selectedTerms: this.selectedTerms, + maxItemsNumber: this.maxItemsNumber, + arrowsPosition: this.arrowsPosition, + autoPlay: this.autoPlay, + autoPlaySpeed: this.autoPlaySpeed, + loopSlides: this.loopSlides, + hideName: this.hideName, + showCollectionThumbnail: this.showCollectionThumbnail, + tainacanApiRoot: this.tainacanApiRoot, + tainacanBaseUrl: this.tainacanBaseUrl, + className: this.className, + } + }); + }, + beforeMount () { + this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined; + this.selectedTerms = this.$el.attributes['selected-terms'] != undefined ? JSON.parse(this.$el.attributes['selected-terms'].value) : undefined; + this.maxItemsNumber = this.$el.attributes['max-terms-number'] != undefined ? this.$el.attributes['max-terms-number'].value : undefined; + this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined; + 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.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false; + this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false; + 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; + }, + methods: { + __(text, domain) { + return wp.i18n.__(text, domain); + } + } + }; + + new Vue( Object.assign({ el: '#' + blockId }, vueOptions) ); + } + } +}); \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.vue b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.vue new file mode 100644 index 000000000..18282ca4f --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.vue @@ -0,0 +1,303 @@ + + + + + diff --git a/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss new file mode 100644 index 000000000..68dff7d07 --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss @@ -0,0 +1,360 @@ +@import '../../gutenberg-blocks-style.scss'; + +.components-panel__body .term-carousel-view-modes { + display: flex; + margin: 12px 0 24px 0; + + button { + background: transparent; + border: 1px solid #cbcbcb; + border-radius: 5px; + padding: 2px; + margin: 0; + width: calc(50% - 6px); + flex-shrink: 0; + cursor: pointer; + transition: border ease 0.5s, opacity ease 0.5; + + &.term-carousel-view-mode-grid { + margin-right: 6px; + div { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-template-rows: 50% 50%; + grid-column-gap: 2px; + grid-row-gap: 2px; + width: 60px; + height: 40px; + margin: 4px auto 8px auto; + + &>div:first-of-type { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; + width: 41px; + height: 42px; + } + + &>div { + width: 20px; + height: 20px; + background: #555758; + transition: background-color ease 0.5s; + } + } + } + &.term-carousel-view-mode-thumbnail { + margin-left: 6px; + + div { + display: block; + height: 40px; + width: 40px; + background: #555758; + margin: 4px auto 8px auto; + transition: background-color ease 0.5s; + } + } + + label { + font-size: 0.75rem; + color: #555758; + } + + &.is-active { + border: 2px solid #298596; + + &.term-carousel-view-mode-thumbnail div, + &.term-carousel-view-mode-grid div>div { + background-color: #298596; + } + } + &:hover { + opacity: 0.9; + border-width: 2px; + button { + background: #f2f2f2; + } + } + + } +} + +.wp-block-tainacan-carousel-terms-list { + margin: 2rem 0px; + + // Spinner + .spinner-container { + min-height: 56px; + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; + color: #555758; + } + + // Skeleton loading + @-webkit-keyframes skeleton-animation { + 0%{opacity: 1.0} + 50%{opacity: 0.2} + 100%{opacity: 1.0} + } + @-moz-keyframes skeleton-animation { + 0%{opacity: 1.0} + 50%{opacity: 0.2} + 100%{opacity: 1.0} + } + @-o-keyframes skeleton-animation { + 0%{opacity: 1.0} + 50%{opacity: 0.2} + 100%{opacity: 1.0} + } + @keyframes skeleton-animation { + 0%{opacity: 1.0} + 50%{opacity: 0.2} + 100%{opacity: 1.0} + } + .skeleton { + border-radius: 2px; + background: #f2f2f2; + + -webkit-animation: skeleton-animation 1.8s ease infinite; + -moz-animation: skeleton-animation 1.8s ease infinite; + -o-animation: skeleton-animation 1.8s ease infinite; + animation: skeleton-animation 1.8s ease infinite; + } + + // Tainacan Carousel + .tainacan-carousel { + position: relative; + width: calc(100% + 40px); + left: -20px; + + .swiper-container { + margin: 0 50px; + + a>span, + a:hover>span { + color: black; + font-weight: bold; + text-decoration: none; + padding: 8px 16px; + display: block; + line-height: 1.2rem; + } + a>img { + width: 100%; + height: auto; + } + a:hover { + text-decoration: none; + } + + .swiper-slide.term-list-item-grid { + + a { + width: 100%; + display: block; + } + .term-items-grid { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-template-rows: 50% 50%; + width: 100%; + + img:first-of-type { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; + } + + img { + width: 100%; + height: auto; + padding: 2px; + margin-bottom: 0px; + } + } + } + } + } + + .preview-warning { + width: 100%; + font-size: 0.875rem; + font-style: italic; + color: #898d8f; + text-align: center; + margin: 4px auto; + } + + // 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: #298596; + } + } + + // Carousel placeholder on editor side ---------------------------------------------------- + .terms-list-edit-container, + .tainacan-carousel { + position: relative; + + & .skeleton { + min-height: 150px; + max-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; + } + } + ul.terms-list-edit { + display: flex; + align-items: flex-start; + overflow-x: scroll; + list-style: none; + margin: 0 36px; + + li.term-list-item { + position: relative; + display: block; + margin: 16px 32px 16px 0px; + width: calc(16.666% - 32px); + min-width: calc(16.666% - 32px); + + &.term-list-item-grid { + margin: 16px; + width: calc(25% - 16px); + min-width: calc(25% - 16px); + } + + a { + color: #454647; + font-weight: bold; + line-height: normal; + } + + img { + height: auto; + padding: 0px; + margin-bottom: 0.5rem; + } + + &:hover a { + color: #454647; + text-decoration: none; + } + + button { + position: absolute !important; + background-color: rgba(255, 255, 255, 0.75); + color: #454647; + padding: 2px; + margin-left: 5px; + min-width: 14px; + visibility: hidden; + position: relative; + opacity: 0; + right: -14px; + top: 0px; + justify-content: center; + z-index: 999; + } + + &:hover button { + visibility: visible; + background-color: rgba(255, 255, 255, 1) !important; + opacity: 1; + right: -8px; + top: -8px; + border: 1px solid #cbcbcb; + border-radius: 12px; + transition: opacity linear 0.15s, right linear 0.15s; + } + &:hover button:hover { + background-color: rgba(255, 255, 255, 1) !important; + border: 1px solid #cbcbcb !important; + } + + + .term-items-grid { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-template-rows: 50% 50%; + + img:first-of-type { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; + } + + img { + padding: 2px; + margin-bottom: 0px; + } + } + } + } + @media only screen and (max-width: 1686px) { + + ul.terms-list-edit li.term-list-item { + width: calc(20% - 32px); + min-width: calc(20% - 32px); + } + } + @media only screen and (max-width: 1452px) { + + ul.terms-list-edit li.term-list-item { + width: calc(25% - 32px); + min-width: calc(25% - 32px); + } + } + @media only screen and (max-width: 1118px) { + + ul.terms-edit li.term-list-item { + width: calc(33.333% - 32px); + min-width: calc(33.333% - 32px); + } + } + @media only screen and (max-width: 854px) { + + ul.terms-list-edit li.term-list-item { + width: calc(50% - 32px); + min-width: calc(50% - 32px); + } + } + @media only screen and (max-width: 584px) { + + ul.terms-list-edit li.term-list-item { + width: calc(100% - 32px); + min-width: calc(100% - 32px); + } + } + +} diff --git a/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-modal.js b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-modal.js new file mode 100644 index 000000000..51ee66038 --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-modal.js @@ -0,0 +1,309 @@ +import tainacan from '../../api-client/axios.js'; +import axios from 'axios'; + +const { __ } = wp.i18n; + +const { TextControl, Button, Modal, CheckboxControl, Spinner } = wp.components; + +export default class TermsModal extends React.Component { + constructor(props) { + super(props); + + // Initialize state + this.state = { + searchTermName: '', + termsRequestSource: undefined, + terms: [], + temporarySelectedTerms: [], + isLoadingTerms: false, + modalTerms: [], + totalModalTerms: 0, + termsPerPage: 24, + termsPage: 1, + }; + + // Bind events + this.selectTemporaryTerm = this.selectTemporaryTerm.bind(this); + this.removeTemporaryTermOfId = this.removeTemporaryTermOfId.bind(this); + this.applySelectedTerms = this.applySelectedTerms.bind(this); + this.isTemporaryTermSelected = this.isTemporaryTermSelected.bind(this); + this.toggleSelectTemporaryTerm = this.toggleSelectTemporaryTerm.bind(this); + this.cancelSelection = this.cancelSelection.bind(this); + this.selectTerm = this.selectTerm.bind(this); + this.fetchModalTerms = this.fetchModalTerms.bind(this); + this.fetchTerms = this.fetchTerms.bind(this); + } + + componentWillMount() { + + this.fetchModalTerms(); + + this.setState( { + terms: [], + termsPage: 1, + temporarySelectedTerms: JSON.parse(JSON.stringify(this.props.selectedTermsObject)) + } ); + } + + selectTemporaryTerm(term) { + let existingTermIndex = this.state.temporarySelectedTerms.findIndex((existingTerm) => existingTerm.id == term.id); + + if (existingTermIndex < 0) { + let aTemporarySelectedTerms = this.state.temporarySelectedTerms; + aTemporarySelectedTerms.push({ + id: term.id, + name: term.name, + url: term.url, + thumbnail: term.thumbnail + }); + this.setState({ temporarySelectedTerms: aTemporarySelectedTerms }); + } + } + + removeTemporaryTermOfId(termId) { + + let existingTermIndex = this.state.temporarySelectedTerms.findIndex((existingTerm) => existingTerm.id == termId); + + if (existingTermIndex >= 0) { + let aTemporarySelectedTerms = this.state.temporarySelectedTerms; + aTemporarySelectedTerms.splice(existingTermIndex, 1); + this.setState({ temporarySelectedTerms: aTemporarySelectedTerms }); + } + } + + applySelectedTerms() { + let aSelectedTermsObject = JSON.parse(JSON.stringify(this.state.temporarySelectedTerms)); + this.props.onApplySelection(aSelectedTermsObject); + } + + isTemporaryTermSelected(termId) { + return this.state.temporarySelectedTerms.findIndex(term => term.id == termId) >= 0; + } + + toggleSelectTemporaryTerm(term, isChecked) { + if (isChecked) + this.selectTemporaryTerm(term); + else + this.removeTemporaryTermOfId(term.id); + } + + cancelSelection() { + + this.setState({ + termsPage: 1, + modalTerms: [] + }); + + this.props.onCancelSelection(); + } + + selectTerm(selectedTermId) { + + this.setState({ + termId: selectedTermId + }); + this.fetchTerm(); + this.fetchModalTerms(); + } + + fetchModalTerms() { + + let currentModalTerms = this.state.modalTerms; + if (this.state.termsPage <= 1) + currentModalTerms = []; + + let endpoint = '/terms/?orderby=title&order=asc&perpage=' + this.state.termsPerPage + '&paged=' + this.state.termsPage; + + this.setState({ + isLoadingTerms: true, + modalTerms: currentModalTerms, + }); + + tainacan.get(endpoint) + .then(response => { + + for (let term of response.data) { + currentModalTerms.push({ + name: term.name, + id: term.id, + url: term.url, + thumbnail: [{ + src: term.thumbnail['tainacan-medium'] != undefined ? term.thumbnail['tainacan-medium'][0] : term.thumbnail['medium'][0], + alt: term.name + }] + }); + } + + this.setState({ + termsPage: this.state.termsPage + 1, + isLoadingTerms: false, + modalTerms: currentModalTerms, + totalModalTerms: response.headers['x-wp-total'] + }); + + return currentModalTerms; + }) + .catch(error => { + console.log('Error trying to fetch terms: ' + error); + }); + } + + fetchTerms(name) { + if (this.state.termsRequestSource != undefined) + this.state.termsRequestSource.cancel('Previous terms search canceled.'); + + let aTermRequestSource = axios.CancelToken.source(); + this.setState({ + termsRequestSource: aTermRequestSource, + isLoadingTerms: true + }); + + let endpoint = '/terms/?orderby=title&order=asc&perpage=' + this.state.termsPerPage; + + if (name != undefined && name != '') + endpoint += '&search=' + name; + + tainacan.get(endpoint, { cancelToken: aTermRequestSource.token }) + .then(response => { + + let someTerms = this.state.terms; + someTerms = response.data.map((term) => ({ + name: term.name, + id: term.id, + url: term.url, + thumbnail: [{ + src: term.thumbnail['tainacan-medium'] != undefined ? term.thumbnail['tainacan-medium'][0] : term.thumbnail['medium'][0], + alt: term.name + }] + })); + + this.setState({ + isLoadingTerms: false, + terms: someTerms + }); + + return someTerms; + }) + .catch(error => { + console.log('Error trying to fetch terms: ' + error); + }); + } + + render() { + return ( + this.cancelSelection() } + contentLabel={__('Select terms', 'tainacan')}> + +
+
+ { + this.setState({ + searchTermName: value.target.value + }); + }} + onChange={(value) => this.fetchTerms(value)}/> +
+ {( + this.state.searchTermName != '' ? ( + + this.state.terms.length > 0 ? + ( +
+
    + { + this.state.terms.map((term) => +
  • + { term.thumbnail ? + { + : null + } + { this.toggleSelectTemporaryTerm(term, isChecked) } } + /> +
    • + ) + } +
+ { this.state.isLoadingTerms ? : null } +
+ ) + : this.state.isLoadingTerms ? : +
+

{ __('Sorry, no terms found.', 'tainacan') }

+
+ ) : + this.state.modalTerms.length > 0 ? + ( +
+
    + { + this.state.modalTerms.map((term) => +
  • + { term.thumbnail ? + { + : null + } + { this.toggleSelectTemporaryTerm(term, isChecked) } } /> +
    • + ) + } + { this.state.isLoadingTerms ? : null } +
+
+

{ __('Showing', 'tainacan') + " " + this.state.modalTerms.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTerms + " " + __('terms', 'tainacan') + "."}

+ { + this.state.modalTerms.length < this.state.totalModalTerms ? ( + + ) : null + } +
+
+ ) : this.state.isLoadingTerms ? : +
+

{ __('Sorry, no terms found.', 'tainacan') }

+
+ )} +
+ + +
+
+ + ); + } +} \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js new file mode 100644 index 000000000..a6ea32bec --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js @@ -0,0 +1,551 @@ +const { registerBlockType } = wp.blocks; + +const { __ } = wp.i18n; + +const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components; + +const { InspectorControls } = wp.editor; + +import CarouselTermsModal from './carousel-terms-modal.js'; +import tainacan from '../../api-client/axios.js'; +import axios from 'axios'; +import qs from 'qs'; + +registerBlockType('tainacan/carousel-terms-list', { + title: __('Tainacan Terms Carousel', 'tainacan'), + icon: + + + , + category: 'tainacan-blocks', + keywords: [ __( 'terms', 'tainacan' ), __( 'carousel', 'tainacan' ), __( 'slider', 'tainacan' ), __( 'taxonomy', 'tainacan' ) ], + attributes: { + content: { + type: 'array', + source: 'children', + selector: 'div' + }, + terms: { + type: Array, + default: [] + }, + isModalOpen: { + type: Boolean, + default: false + }, + selectedTerms: { + type: Array, + default: [] + }, + itemsRequestSource: { + type: String, + default: undefined + }, + maxTermsNumber: { + type: Number, + value: undefined + }, + isLoading: { + type: Boolean, + value: false + }, + isLoadingTerm: { + type: Boolean, + value: false + }, + arrowsPosition: { + type: String, + value: 'search' + }, + autoPlay: { + type: Boolean, + value: false + }, + autoPlaySpeed: { + type: Number, + value: 3 + }, + loopSlides: { + type: Boolean, + value: false + }, + hideName: { + type: Boolean, + value: true + }, + showTermThumbnail: { + type: Boolean, + value: false + }, + term: { + type: Object, + value: undefined + }, + blockId: { + type: String, + default: undefined + }, + termBackgroundColor: { + type: String, + default: "#454647" + }, + termTextColor: { + type: String, + default: "#ffffff" + } + }, + supports: { + align: ['full', 'wide'], + html: false, + multiple: true + }, + edit({ attributes, setAttributes, className, isSelected, clientId }){ + let { + terms, + content, + isModalOpen, + itemsRequestSource, + selectedTerms, + isLoading, + arrowsPosition, + autoPlay, + autoPlaySpeed, + loopSlides, + hideName, + showTermThumbnail + } = attributes; + + // Obtains block's client id to render it on save function + setAttributes({ blockId: clientId }); + + function prepareItem(term, termItems) { + return ( +
  • + removeItemOfId(term.id) } + icon="no-alt" + label={__('Remove', 'tainacan')}/> + + { !showTermThumbnail ? +
    + { + { + { +
    + : + { + } + { !hideName ? { term.name ? term.name : '' } : null } +     +
    • + ); + } + + function setContent(){ + isLoading = true; + + setAttributes({ + isLoading: isLoading + }); + + if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function') + itemsRequestSource.cancel('Previous terms search canceled.'); + + itemsRequestSource = axios.CancelToken.source(); + + terms = []; + + let endpoint = '/terms?'+ qs.stringify({ postin: selectedTerms }) + '&fetch_only=name,url,thumbnail'; + tainacan.get(endpoint, { cancelToken: itemsRequestSource.token }) + .then(response => { + + if (showTermThumbnail) { + for (let term of response.data) { + terms.push(prepareItem(term)); + } + setAttributes({ + content:
    , + terms: terms, + isLoading: false, + itemsRequestSource: itemsRequestSource + }); + } else { + let promises = []; + for (let term of response.data) { + promises.push( + tainacan.get('/term/' + term.id + '/items?perpage=3&fetch_only=name,url,thumbnail') + .then(response => { return({ term: term, termItems: response.data.items }) }) + .catch((error) => console.log(error)) + ); + } + axios.all(promises).then((results) => { + for (let result of results) { + terms.push(prepareItem(result.term, result.termItems)); + } + setAttributes({ + content:
    , + terms: terms, + isLoading: false, + itemsRequestSource: itemsRequestSource + }); + }) + } + }); + } + + function openCarouselModal() { + isModalOpen = true; + setAttributes( { + isModalOpen: isModalOpen + } ); + } + + function removeItemOfId(itemId) { + + let existingItemIndex = terms.findIndex((existingItem) => existingItem.key == itemId); + if (existingItemIndex >= 0) + terms.splice(existingItemIndex, 1); + + let existingSelectedItemIndex = selectedTerms.findIndex((existingSelectedItem) => existingSelectedItem == itemId); + if (existingSelectedItemIndex >= 0) + selectedTerms.splice(existingSelectedItemIndex, 1); + + setAttributes({ + selectedTerms: selectedTerms, + terms: terms, + content:
    + }); + } + + // Executed only on the first load of page + if(content && content.length && content[0].type) + setContent(); + + return ( +
    + +
    + + + +
    + {/* { + showTermThumbnail = isChecked; + setAttributes({ showTermThumbnail: showTermThumbnail }); + setContent(); + } + } + /> */} + +
    + + +
    +     + { + hideName = isChecked; + setAttributes({ hideName: hideName }); + 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 }); + }}/> +
    +     +     +
    + + { isSelected ? + ( +
    + { isModalOpen ? + { + selectedTerms = selectedTerms.concat(aSelectionOfTerms.map((term) => { return term.id; })); + setAttributes({ + selectedTerms: selectedTerms, + isModalOpen: false + }); + setContent(); + }} + onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> + : null + } + + { terms.length ? ( +
    +

    + + + + {__('List terms on a Carousel', 'tainacan')} +

    + +
    + ): null + } +
    + ) : null + } + + { !terms.length && !isLoading ? ( + + )}> +

    + + + + {__('List terms on a Carousel, using search or term selection.', 'tainacan')} +

    + +     + ) : null + } + + { isLoading ? + : +
    + { isSelected && terms.length ? +
    {__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}
    + : null + } + { terms.length ? ( +
    + +
      + { terms } +
    + +
    + ):null + } +
    + } +
    + ); + }, + save({ attributes, className }){ + const { + content, + blockId, + selectedTerms, + arrowsPosition, + maxTermsNumber, + autoPlay, + autoPlaySpeed, + loopSlides, + hideName, + showTermThumbnail + } = attributes; + return
    + { content } +
    + } +}); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 29b336d26..8e5f21324 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -27,7 +27,11 @@ module.exports = { gutenberg_carousel_collections_list_theme: './src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.js', gutenberg_facets_list: './src/gutenberg-blocks/tainacan-facets/facets-list/index.js', - gutenberg_facets_list_theme: './src/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js' + gutenberg_facets_list_theme: './src/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js', + + gutenberg_carousel_terms_list: './src/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js', + gutenberg_carousel_terms_list_theme: './src/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js' + }, output: { path: path.resolve(__dirname, './src/assets/'),