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

Several updates to ditch vue-awesome-swiper in favor of latest version of swiper. #548.

This commit is contained in:
mateuswetah 2022-03-11 18:25:29 -03:00
parent cd22aa372e
commit 0ed3b6410f
27 changed files with 684 additions and 724 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@ -3573,11 +3573,11 @@
}
},
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"requires": {
"ssr-window": "^2.0.0"
"ssr-window": "^4.0.0"
}
},
"domain-browser": {
@ -4886,7 +4886,8 @@
},
"ini": {
"version": "1.3.5",
"resolved": "",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true,
"optional": true
},
@ -9483,9 +9484,9 @@
}
},
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"ssri": {
"version": "8.0.1",
@ -9761,12 +9762,12 @@
}
},
"swiper": {
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
"version": "8.0.7",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.7.tgz",
"integrity": "sha512-GHjDfxSZdupfU7LrSVOpaNaT7R1D2zxopPGBFz1UOXOtsYvVJLg0k6NvkTAD7qn0ASl5pTti82qoYwvYvIkg4g==",
"requires": {
"dom7": "^2.1.5",
"ssr-window": "^2.0.0"
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
}
},
"t": {
@ -10465,11 +10466,6 @@
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz",
"integrity": "sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw=="
},
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
},
"vue-blurhash": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/vue-blurhash/-/vue-blurhash-0.1.4.tgz",

3
package.json
View File

@ -23,11 +23,10 @@
"qs": "^6.9.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"swiper": "^5.2.0",
"swiper": "^8.0.7",
"t": "^0.5.1",
"vue": "^2.6.14",
"vue-apexcharts": "^1.6.2",
"vue-awesome-swiper": "^4.1.1",
"vue-blurhash": "^0.1.4",
"vue-countup-v2": "^4.0.0",
"vue-masonry-css": "^1.0.3",

37
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
View File

@ -69,7 +69,7 @@
margin: 2em auto;
--swiper-navigation-color: var(--tainacan-block-primary, $primary);
--swiper-theme-color: var(--tainacan-block-primary, $primary); }
.wp-block-tainacan-carousel-collections-list .spinner-container {
.wp-block-tainacan-carousel-collections-list .spinner {
min-height: 56px;
padding: 1em;
display: flex;
@ -115,10 +115,14 @@
position: relative;
width: calc(100% + 40px);
left: -20px; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper {
margin: 0 var(--spaceAroundCarousel, 50px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > span,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover > span {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper ul.swiper-wrapper {
list-style: none;
padding: 0;
margin: 0; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a > span,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a:hover > span {
color: inherit;
font-weight: bold;
text-decoration: none;
@ -126,19 +130,19 @@
display: block;
line-height: 1.2em;
word-break: break-word; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > img {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a > img {
width: 100%;
height: auto; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a:hover {
color: inherit;
text-decoration: none; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide-duplicate img {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate img {
display: initial !important; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a {
width: 100%;
display: block; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid {
flex-wrap: wrap;
display: flex;
display: -ms-grid;
@ -149,7 +153,7 @@
grid-gap: 5px;
gap: 5px;
box-sizing: border-box; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid > *:first-of-type {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > *:first-of-type {
flex-basis: 100%;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
@ -158,13 +162,13 @@
grid-column: 1/3;
grid-row: 1/3;
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid > * {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > * {
flex-basis: 50%;
width: 100%;
height: auto;
margin-bottom: 0px;
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid img {
object-fit: cover;
object-position: center; }
.wp-block-tainacan-carousel-collections-list .preview-warning {
@ -248,7 +252,8 @@
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; }
scroll-padding-left: 10px;
max-width: calc(100% - 2 * var(--spaceAroundCarousel)); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
position: relative;
display: block;
@ -474,8 +479,8 @@
.block-editor-block-list__block > .wp-block-tainacan-carousel-collections-list {
max-width: calc(100% - 72px); }
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list .swiper-container a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list .swiper-container a:hover > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list .swiper a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list .swiper a:hover > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list li.collection-list-item a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list li.collection-list-item a:hover > span {
color: var(--tainacan-block-gray5, #454647); }

2
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css.map
View File

File diff suppressed because one or more lines are too long

27
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
View File

@ -122,10 +122,14 @@
position: relative;
width: calc(100% + 40px);
left: -20px; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper {
margin: 0 var(--spaceAroundCarousel, 50px); }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > span,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover > span {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper ul.swiper-wrapper {
list-style: none;
padding: 0;
margin: 0; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a > span,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a:hover > span {
color: inherit;
font-weight: bold;
text-decoration: none;
@ -133,16 +137,16 @@
display: block;
line-height: 1.2em;
word-break: break-word; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > img {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a > img {
width: 100%;
height: auto; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a:hover {
color: inherit;
text-decoration: none; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div {
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div img {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img {
object-fit: cover;
object-position: center; }
.wp-block-tainacan-carousel-items-list .preview-warning {
@ -227,7 +231,8 @@
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; }
scroll-padding-left: 10px;
max-width: calc(100% - 2 * var(--spaceAroundCarousel)); }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
position: relative;
display: block;
@ -446,8 +451,8 @@
.block-editor-block-list__block > .wp-block-tainacan-carousel-items-list {
max-width: calc(100% - 72px); }
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list .swiper-container a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list .swiper-container a:hover > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list .swiper a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list .swiper a:hover > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list li.item-list-item a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list li.item-list-item a:hover > span {
color: var(--tainacan-block-gray5, #454647); }

2
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css.map
View File

File diff suppressed because one or more lines are too long

35
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
View File

@ -115,10 +115,14 @@
position: relative;
width: calc(100% + 40px);
left: -20px; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper {
margin: 0 var(--spaceAroundCarousel, 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 {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper ul.swiper-wrapper {
list-style: none;
padding: 0;
margin: 0; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a > span,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a:hover > span {
color: inherit;
font-weight: bold;
text-decoration: none;
@ -126,19 +130,19 @@
display: block;
line-height: 1.2em;
word-break: break-word; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a > img {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a > img {
width: 100%;
height: auto; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a:hover {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a:hover {
color: inherit;
text-decoration: none; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide-duplicate img {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate img {
display: initial !important; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid a {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .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 {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid {
flex-wrap: wrap;
display: flex;
display: -ms-grid;
@ -149,7 +153,7 @@
grid-gap: 5px;
gap: 5px;
box-sizing: border-box; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid > *:first-of-type {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > *:first-of-type {
flex-basis: 100%;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
@ -158,13 +162,13 @@
grid-column: 1/3;
grid-row: 1/3;
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid > * {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > * {
flex-basis: 50%;
width: 100%;
height: auto;
margin-bottom: 0px;
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid img {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid img {
object-fit: cover;
object-position: center; }
.wp-block-tainacan-carousel-terms-list .preview-warning {
@ -248,7 +252,8 @@
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; }
scroll-padding-left: 10px;
max-width: calc(100% - 2 * var(--spaceAroundCarousel)); }
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item {
position: relative;
display: block;
@ -473,8 +478,8 @@
.block-editor-block-list__block > .wp-block-tainacan-carousel-terms-list {
max-width: calc(100% - 72px); }
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list .swiper-container a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list .swiper-container a:hover > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list .swiper a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list .swiper a:hover > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list li.term-list-item a > span,
.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list li.term-list-item a:hover > span {
color: var(--tainacan-block-gray5, #454647); }

2
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map
View File

File diff suppressed because one or more lines are too long

4
src/assets/css/tainacan-gutenberg-block-item-gallery.css
View File

@ -644,9 +644,9 @@ a.pswp__share--download:hover {
/* Style valid for both cases of carousel, main and thumbs */
.tainacan-media-component__swiper-main .swiper-button-prev:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-main .swiper-container-rtl .swiper-button-next:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-main .swiper-rtl .swiper-button-next:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-thumbs .swiper-button-prev:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-thumbs .swiper-container-rtl .swiper-button-next:not(.swiper-button-has-svg)::after {
.tainacan-media-component__swiper-thumbs .swiper-rtl .swiper-button-next:not(.swiper-button-has-svg)::after {
content: 'previous'; }
.tainacan-media-component__swiper-main .swiper-button-next:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-main .swiper-button-prev:not(.swiper-button-has-svg)::after,

2
src/assets/css/tainacan-gutenberg-block-item-gallery.css.map
View File

File diff suppressed because one or more lines are too long

4
src/classes/theme-helper/template-tags.php
View File

@ -371,7 +371,7 @@ function tainacan_get_the_media_component(
<!-- Slider main container -->
<?php echo $args['before_main_div'] ?>
<div id="<?php echo $args['media_main_id'] ?>" class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
<div id="<?php echo $args['media_main_id'] ?>" class="tainacan-media-component__swiper-main swiper <?php echo $args['class_main_div'] ?>">
<!-- Additional required wrapper -->
<?php echo $args['before_main_ul'] ?>
@ -424,7 +424,7 @@ function tainacan_get_the_media_component(
<!-- Slider thumbs container -->
<?php echo $args['before_thumbs_div'] ?>
<div id="<?php echo $args['media_thumbs_id'] ?>" class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
<div id="<?php echo $args['media_thumbs_id'] ?>" class="tainacan-media-component__swiper-thumbs swiper <?php echo $args['class_thumbs_div'] ?>">
<!-- Additional required wrapper -->
<?php echo $args['before_thumbs_ul'] ?>

1
src/views/admin/admin.vue
View File

@ -53,7 +53,6 @@
import TainacanHeader from './components/navigation/tainacan-header.vue';
import TainacanRepositorySubheader from './components/navigation/tainacan-repository-subheader.vue';
import CustomDialog from './components/other/custom-dialog.vue';
import 'swiper/css/swiper.min.css';
import "floating-vue/dist/style.css";
export default {

66
src/views/admin/components/edition/item-edition-form.vue
View File

@ -139,10 +139,9 @@
<div class="b-tabs">
<nav
role="list"
ref="tainacanTabsSwiper"
v-swiper:mySwiper="swiperOptions"
class="tabs">
id="tainacanTabsSwiper"
class="swiper tabs">
<ul class="swiper-wrapper">
<li
v-for="(tab, tabIndex) of tabs"
@ -948,7 +947,10 @@ import CustomDialog from '../other/custom-dialog.vue';
import AttachmentsList from '../lists/attachments-list.vue';
import { formHooks } from '../../js/mixins';
import ItemMetadatumErrorsTooltip from '../other/item-metadatum-errors-tooltip.vue';
import { directive } from 'vue-awesome-swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/mousewheel/mousewheel.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import Swiper, { Mousewheel, Navigation } from 'swiper';
import ItemDocumentTextModal from '../modals/item-document-text-modal.vue';
import ItemDocumentURLModal from '../modals/item-document-url-modal.vue';
import ItemThumbnailAltTextModal from '../modals/item-thumbnail-alt-text-modal.vue';
@ -962,26 +964,10 @@ export default {
RelatedItemsList,
ItemMetadatumErrorsTooltip
},
directives: {
swiper: directive
},
mixins: [ formHooks ],
data(){
return {
swiperOptions: {
watchOverflow: true,
mousewheel: true,
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slideToClickedSlide: true,
slidesPerView: 'auto',
navigation: {
nextEl: '#tainacan-tabs-next',
prevEl: '#tainacan-tabs-prev',
}
},
swiper: {},
selected: 'Home',
pageTitle: '',
itemId: Number,
@ -1123,6 +1109,32 @@ export default {
// Obtains current Sequence Group Info
this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId });
},
tabs:{
handler() {
if (typeof this.swiper.update == 'function')
this.swiper.update();
else {
this.$nextTick(() => {
this.swiper = new Swiper('#tainacanTabsSwiper', {
watchOverflow: true,
mousewheel: true,
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slideToClickedSlide: true,
slidesPerView: 'auto',
navigation: {
nextEl: '#tainacan-tabs-next',
prevEl: '#tainacan-tabs-prev',
},
modules: [Mousewheel, Navigation]
});
});
}
},
immediate: true
}
},
created() {
@ -1207,6 +1219,8 @@ export default {
eventBusItemMetadata.$off('isOnFirstMetadatumOfCompoundNavigation');
eventBusItemMetadata.$off('isOnLastMetadatumOfCompoundNavigation');
window.removeEventListener('resize', this.handleWindowResize);
if (typeof this.swiper.destroy == 'function')
this.swiper.destroy();
},
beforeRouteLeave ( to, from, next ) {
if (this.item.status == 'auto-draft') {
@ -2302,7 +2316,7 @@ export default {
.tab-content {
border-top: 1px solid var(--tainacan-input-border-color);
}
.swiper-container {
.swiper {
width: 100%;
position: relative;
margin: 0;
@ -2325,16 +2339,16 @@ export default {
bottom: 0;
}
.swiper-button-prev::after,
.swiper-container-rtl .swiper-button-next::after {
.swiper-rtl .swiper-button-next::after {
content: 'previous';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
.swiper-rtl .swiper-button-prev {
right: 0;
background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--tainacan-background-color) 40%);
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
.swiper-rtl .swiper-button-next {
left: 0;
background-image: linear-gradient(90deg, var(--tainacan-background-color) 0%, rgba(255,255,255,0) 60%);
}

120
src/views/admin/components/search/filters-tags-list.vue
View File

@ -15,30 +15,31 @@
</a>
</span>
</p>
<swiper
role="list"
ref="tainacanFilterTagsSwiper"
:options="swiperOptions">
<swiper-slide
v-for="(filterTag, index) of filterTags"
:key="index"
class="filter-tag"
:class="{ 'is-readonly': !filterTag.filterId && filterTag.argType != 'postin' }">
<span class="">
<div class="filter-tag-metadatum-name">
{{ filterTag.metadatumName }}
</div>
<div
class="filter-tag-metadatum-value"
v-html="filterTag.singleLabel != undefined ? filterTag.singleLabel : filterTag.label"/>
</span>
<a
v-if="filterTag.filterId || filterTag.argType == 'postin'"
role="button"
tabindex="0"
class="tag is-delete"
@click="removeMetaQuery(filterTag)" />
</swiper-slide>
<div
class="swiper"
id="tainacanFilterTagsSwiper">
<ul class="swiper-wrapper">
<li
v-for="(filterTag, index) of filterTags"
:key="index"
class="swiper-slide filter-tag"
:class="{ 'is-readonly': !filterTag.filterId && filterTag.argType != 'postin' }">
<span class="">
<div class="filter-tag-metadatum-name">
{{ filterTag.metadatumName }}
</div>
<div
class="filter-tag-metadatum-value"
v-html="filterTag.singleLabel != undefined ? filterTag.singleLabel : filterTag.label"/>
</span>
<a
v-if="filterTag.filterId || filterTag.argType == 'postin'"
role="button"
tabindex="0"
class="tag is-delete"
@click="removeMetaQuery(filterTag)" />
</li>
</ul>
<button
class="swiper-button-prev"
id="tainacan-filter-tags-prev"
@ -67,37 +68,23 @@
fill="none"/>
</svg>
</button>
</swiper>
</div>
</div>
</transition>
</template>
<script>
import { mapGetters } from 'vuex';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/mousewheel/mousewheel.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import Swiper, { Mousewheel, Navigation } from 'swiper';
export default {
name: 'FiltersTagsList',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOptions: {
watchOverflow: true,
mousewheel: true,
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slideToClickedSlide: true,
slidesPerView: 'auto',
navigation: {
nextEl: '#tainacan-filter-tags-next',
prevEl: '#tainacan-filter-tags-prev',
}
},
swiper: {}
}
},
computed: {
@ -131,13 +118,42 @@
});
}
});
return flattenTags;
},
totalItems() {
return this.getTotalItems()
}
},
watch: {
filterTags() {
if (typeof this.swiper.update == 'function')
this.swiper.update();
}
},
mounted() {
this.$nextTick(() => {
this.swiper = new Swiper('#tainacanFilterTagsSwiper', {
mousewheel: true,
observer: true,
resizeObserver: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slideToClickedSlide: true,
slidesPerView: 'auto',
navigation: {
nextEl: '#tainacan-filter-tags-next',
prevEl: '#tainacan-filter-tags-prev',
},
modules: [Mousewheel, Navigation]
});
});
},
beforeDestroy() {
if (typeof this.swiper.destroy == 'function')
this.swiper.destroy();
},
methods: {
...mapGetters('search',[
'getFilterTags',
@ -227,7 +243,7 @@
}
}
.swiper-container {
.swiper {
width: 100%;
position: relative;
margin: 0;
@ -247,16 +263,16 @@
bottom: 0;
}
.swiper-button-prev::after,
.swiper-container-rtl .swiper-button-next::after {
.swiper-rtl .swiper-button-next::after {
content: 'previous';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
.swiper-rtl .swiper-button-prev {
right: 0;
background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--tainacan-background-color) 40%);
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
.swiper-rtl .swiper-button-next {
left: 0;
background-image: linear-gradient(90deg, var(--tainacan-background-color) 0%, rgba(255,255,255,0) 60%);
}
@ -288,15 +304,15 @@
flex-direction: row;
justify-content: space-between;
}
.swiper-container {
.swiper {
margin-top: 1em;
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
.swiper-rtl .swiper-button-prev {
padding-right: 8px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
.swiper-rtl .swiper-button-next {
padding-left: 8px;
}
}

15
src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js
View File

@ -10,7 +10,10 @@ import axios from 'axios';
import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import 'swiper/css/swiper.min.css';
import 'swiper/swiper.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/autoplay/autoplay.min.css';
import 'swiper/modules/navigation/navigation.min.css';
export default function ({ attributes, setAttributes, className, isSelected, clientId }) {
let {
@ -56,7 +59,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
return (
<li
key={ collection.id }
className={ 'collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid ' : '') + (maxCollectionsPerScreen ? ' max-collections-per-screen-' + maxCollectionsPerScreen : '') }>
className={ 'swiper-slide collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid ' : '') + (maxCollectionsPerScreen ? ' max-collections-per-screen-' + maxCollectionsPerScreen : '') }>
{ tainacan_blocks.wp_version < '5.4' ?
<IconButton
onClick={ () => removeItemOfId(collection.id) }
@ -426,6 +429,11 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
'--spaceBetweenCollections': !isNaN(spaceBetweenCollections) ? (spaceBetweenCollections + 'px') : '32px',
'--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px'
}}>
<div className={'swiper'}>
<ul className={'swiper-wrapper collections-list-edit'}>
{ collections }
</ul>
</div>
<button
class="swiper-button-prev"
slot="button-prev"
@ -445,9 +453,6 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
fill="none"/>
</svg>
</button>
<ul className={'collections-list-edit'}>
{ collections }
</ul>
<button
class="swiper-button-next"
slot="button-next"

15
src/views/gutenberg-blocks/blocks/carousel-collections-list/style.scss
View File

@ -88,7 +88,7 @@
--swiper-theme-color: var(--tainacan-block-primary, $primary);
// Spinner
.spinner-container {
.spinner {
min-height: 56px;
padding: 1em;
display: flex;
@ -134,9 +134,15 @@
width: calc(100% + 40px);
left: -20px;
.swiper-container {
.swiper {
margin: 0 var(--spaceAroundCarousel, 50px);
ul.swiper-wrapper {
list-style: none;
padding: 0;
margin: 0;
}
a>span,
a:hover>span {
color: inherit;
@ -247,7 +253,7 @@
.tainacan-carousel {
position: relative;
& .skeleton {
.skeleton {
min-height: 150px;
max-height: 260px;
}
@ -298,6 +304,7 @@
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
max-width: calc(100% - 2 * var(--spaceAroundCarousel));
li.collection-list-item {
position: relative;
@ -615,7 +622,7 @@
max-width: calc(100% - 72px);
}
.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-collections-list {
.swiper-container,
.swiper,
li.collection-list-item {
a>span,
a:hover>span {

297
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
View File

@ -2,20 +2,37 @@
<div
:style="style"
:class="className + ' has-mounted'">
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="collections.length > 0">
<swiper
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="collections.length > 0 || isLoading">
<div
class="swiper"
:id="blockId + '-carousel'">
<ul
v-if="isLoading"
role="list"
ref="myCollectionSwiper"
:options="swiperOptions">
<swiper-slide
class="swiper-wrapper">
<li
role="listitem"
:key="index"
v-for="index in 18"
class="swiper-slide collection-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
</a>
</li>
</ul>
<ul
v-else
role="list"
class="swiper-wrapper">
<li
role="listitem"
:key="index"
v-for="(collection, index) of collections"
:class="'collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid' : '')">
:class="'swiper-slide collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid' : '')">
<a
v-if="showCollectionThumbnail"
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
@ -78,116 +95,54 @@
</div>
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
</a>
</swiper-slide>
</swiper>
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</li>
</ul>
</div>
<div
v-else
class="spinner-container">
{{ $root.__('No collections found.', 'tainacan') }}
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</div>
<div v-else>
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }">
<swiper
role="list"
ref="myCollectionSwiper"
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }">
<swiper-slide
role="listitem"
:key="index"
v-for="(collection, index) of 18"
class="collection-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
</a>
</swiper-slide>
</swiper>
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</div>
<div
v-else-if="collections.length <= 0 && !isLoading"
class="spinner-container">
{{ $root.__('No collections found.', 'tainacan') }}
</div>
</div>
</template>
@ -195,15 +150,14 @@
<script>
import axios from 'axios';
import qs from 'qs';
import 'swiper/css/swiper.min.css';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/autoplay/autoplay.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import Swiper, { Autoplay, Navigation, A11y } from 'swiper';
export default {
name: "CarouselCollectionsListTheme",
components: {
Swiper,
SwiperSlide
},
props: {
blockId: String,
selectedCollections: Array,
@ -237,34 +191,8 @@ export default {
tainacanAxios: undefined,
paged: undefined,
totalCollections: 0,
swiperOptions: {
watchOverflow: true,
mousewheel: {
forceToAxis: true
},
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: this.spaceBetweenCollections,
slideToClickedSlide: true,
navigation: {
nextEl: '#' + this.blockId + '-next',
prevEl: '#' + this.blockId + '-prev',
},
breakpoints: {
498: { slidesPerView: this.showCollectionThumbnail ? 1 : 1, spaceBetween: this.spaceBetweenCollections },
768: { slidesPerView: this.showCollectionThumbnail ? 2 : 1, spaceBetween: this.spaceBetweenCollections },
1024: { slidesPerView: this.showCollectionThumbnail ? 3 : 2, spaceBetween: this.spaceBetweenCollections },
1366: { slidesPerView: this.showCollectionThumbnail ? 4 : 3, spaceBetween: this.spaceBetweenCollections },
1600: { slidesPerView: this.showCollectionThumbnail ? 5 : 4, spaceBetween: this.spaceBetweenCollections },
},
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
loop: this.loopSlides
},
errorMessage: 'No collections found.'
errorMessage: 'No collections found.',
swiper: {}
}
},
created() {
@ -273,22 +201,19 @@ export default {
this.tainacanAxios.defaults.headers.common['X-WP-Nonce'] = tainacan_blocks.nonce;
this.fetchCollections();
if (!isNaN(this.maxCollectionsPerScreen)) {
this.swiperOptions.breakpoints = {
498: { slidesPerView: this.maxCollectionsPerScreen - 4 > 0 ? this.maxCollectionsPerScreen - 4 : 1, spaceBetween: this.spaceBetweenCollections },
768: { slidesPerView: this.maxCollectionsPerScreen - 3 > 0 ? this.maxCollectionsPerScreen - 3 : 1, spaceBetween: this.spaceBetweenCollections },
1024: { slidesPerView: this.maxCollectionsPerScreen - 2 > 0 ? this.maxCollectionsPerScreen - 2 : 1, spaceBetween: this.spaceBetweenCollections },
1366: { slidesPerView: this.maxCollectionsPerScreen - 1 > 0 ? this.maxCollectionsPerScreen - 1 : 1, spaceBetween: this.spaceBetweenCollections },
1600: { slidesPerView: this.maxCollectionsPerScreen > 0 ? this.maxCollectionsPerScreen : 1, spaceBetween: this.spaceBetweenCollections },
}
this.swiperOptions.slidesPerView = 1;
}
},
beforeDestroy() {
if (typeof this.swiper.destroy == 'function')
this.swiper.destroy();
},
methods: {
fetchCollections() {
this.isLoading = true;
this.errorMessage = 'No collections found.';
this.$nextTick(() => {
this.mountCarousel();
});
if (this.collectionsRequestSource != undefined && typeof this.collectionsRequestSource == 'function')
this.collectionsRequestSource.cancel('Previous collections search canceled.');
@ -309,6 +234,10 @@ export default {
this.isLoading = false;
this.totalCollections = response.headers['x-wp-total'];
this.$nextTick(() => {
this.mountCarousel();
});
}).catch((error) => {
this.isLoading = false;
if (error.response && error.response.status && error.response.status == 401)
@ -316,6 +245,48 @@ export default {
});
},
mountCarousel() {
const self = this;
this.swiper = new Swiper('#' + self.blockId + '-carousel', {
mousewheel: {
forceToAxis: true
},
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: self.spaceBetweenCollections,
slideToClickedSlide: true,
navigation: {
nextEl: '#' + self.blockId + '-next',
prevEl: '#' + self.blockId + '-prev',
},
breakpoints: !isNaN(self.maxCollectionsPerScreen) ? {
498: { slidesPerView: self.showCollectionThumbnail ? 1 : 1, spaceBetween: self.spaceBetweenCollections },
768: { slidesPerView: self.showCollectionThumbnail ? 2 : 1, spaceBetween: self.spaceBetweenCollections },
1024: { slidesPerView: self.showCollectionThumbnail ? 3 : 2, spaceBetween: self.spaceBetweenCollections },
1366: { slidesPerView: self.showCollectionThumbnail ? 4 : 3, spaceBetween: self.spaceBetweenCollections },
1600: { slidesPerView: self.showCollectionThumbnail ? 5 : 4, spaceBetween: self.spaceBetweenCollections },
} : {
498: { slidesPerView: self.maxCollectionsPerScreen - 4 > 0 ? self.maxCollectionsPerScreen - 4 : 1, spaceBetween: self.spaceBetweenCollections },
768: { slidesPerView: self.maxCollectionsPerScreen - 3 > 0 ? self.maxCollectionsPerScreen - 3 : 1, spaceBetween: self.spaceBetweenCollections },
1024: { slidesPerView: self.maxCollectionsPerScreen - 2 > 0 ? self.maxCollectionsPerScreen - 2 : 1, spaceBetween: self.spaceBetweenCollections },
1366: { slidesPerView: self.maxCollectionsPerScreen - 1 > 0 ? self.maxCollectionsPerScreen - 1 : 1, spaceBetween: self.spaceBetweenCollections },
1600: { slidesPerView: self.maxCollectionsPerScreen > 0 ? self.maxCollectionsPerScreen : 1, spaceBetween: self.spaceBetweenCollections },
},
autoplay: (self.autoPlay && !self.isLoading) ? { delay: self.autoPlaySpeed*1000 } : false,
loop: self.loopSlides && !self.isLoading,
a11y: {
prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
},
modules: [Autoplay, Navigation, A11y]
});
}
}
}
</script>

24
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -11,7 +11,10 @@ import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
import 'swiper/css/swiper.min.css';
import 'swiper/swiper.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/autoplay/autoplay.min.css';
import 'swiper/modules/navigation/navigation.min.css';
export default function({ attributes, setAttributes, className, isSelected, clientId }){
let {
@ -65,7 +68,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
return (
<li
key={ item.id }
className={ 'item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
{ loadStrategy == 'selection' ?
( tainacan_blocks.wp_version < '5.4' ?
<IconButton
@ -657,13 +660,21 @@ export default function({ attributes, setAttributes, className, isSelected, clie
: null
}
{ items.length ? (
<div
className={'items-list-edit-container ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }
style={{
'--spaceBetweenItems': !isNaN(spaceBetweenItems) ? (spaceBetweenItems + 'px') : '32px',
'--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px'
}}>
<div className={'swiper'}>
<ul
style={{
marginTop: showCollectionHeader ? '1.5rem' : '0px'
}}
className={ 'swiper-wrapper items-list-edit' }>
{ items }
</ul>
</div>
<button
class="swiper-button-prev"
slot="button-prev"
@ -683,13 +694,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
fill="none"/>
</svg>
</button>
<ul
style={{
marginTop: showCollectionHeader ? '1.5rem' : '0px'
}}
className={ 'items-list-edit' }>
{ items }
</ul>
<button
class="swiper-button-next"
slot="button-next"

13
src/views/gutenberg-blocks/blocks/carousel-items-list/style.scss
View File

@ -146,9 +146,15 @@
width: calc(100% + 40px);
left: -20px;
.swiper-container {
.swiper {
margin: 0 var(--spaceAroundCarousel, 50px);
ul.swiper-wrapper {
list-style: none;
padding: 0;
margin: 0;
}
a>span,
a:hover>span {
color: inherit;
@ -227,7 +233,7 @@
.tainacan-carousel {
position: relative;
& .skeleton {
.skeleton {
min-height: 150px;
max-height: 260px;
}
@ -278,6 +284,7 @@
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
max-width: calc(100% - 2 * var(--spaceAroundCarousel));
li.item-list-item {
position: relative;
@ -594,7 +601,7 @@
max-width: calc(100% - 72px);
}
.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-items-list {
.swiper-container,
.swiper,
li.item-list-item {
a>span,
a:hover>span {

312
src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
View File

@ -47,24 +47,43 @@
}"/>
</a>
</div>
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="items.length > 0">
<swiper
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="items.length > 0 || isLoading">
<div
class="swiper"
:id="blockId + '-carousel'">
<ul
v-if="isLoading"
role="list"
:options="swiperOptions"
ref="myItemSwiper"
class="swiper-wrapper"
:style="{
marginTop: showCollectionHeader ? '1.35em' : '0px'
}">
<swiper-slide
<li
role="listitem"
:key="index"
v-for="index in 18"
class="swiper-slide collection-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
</a>
</li>
</ul>
<ul
v-else
role="list"
class="swiper-wrapper"
:style="{
marginTop: showCollectionHeader ? '1.35em' : '0px'
}">
<li
role="listitem"
ref="myItemSwiperSlide"
:key="index"
v-for="(item, index) of items"
class="item-list-item"
class="swiper-slide item-list-item"
:class="{ 'is-forced-square': cropImagesToSquare }">
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
@ -79,120 +98,54 @@
:transition-duration="500" />
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
</a>
</swiper-slide>
</swiper>
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</li>
</ul>
</div>
<div
v-else
class="spinner-container">
{{ $root.__(errorMessage, 'tainacan') }}
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</div>
<div v-else>
<div
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
<swiper
role="list"
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }"
ref="myItemSwiperSkeleton"
:style="{
marginTop: showCollectionHeader ? '1.35em' : '0px'
}">
<swiper-slide
role="listitem"
:key="index"
ref="myItemSwiperSlideSkeleton"
v-for="(item, index) of 18"
class="item-list-item skeleton">
<a>
<img>
<span v-if="!hideTitle" />
</a>
</swiper-slide>
</swiper>
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</div>
<div
v-else-if="items.length <= 0 && !isLoading"
class="spinner-container">
{{ $root.__('No items found.', 'tainacan') }}
</div>
</div>
</template>
@ -200,15 +153,14 @@
<script>
import axios from 'axios';
import qs from 'qs';
import 'swiper/css/swiper.min.css';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/autoplay/autoplay.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import Swiper, { Autoplay, Navigation, A11y } from 'swiper';
export default {
name: "CarouselItemsListTheme",
components: {
Swiper,
SwiperSlide
},
props: {
blockId: String,
collectionId: String,
@ -248,33 +200,7 @@ export default {
tainacanAxios: undefined,
paged: undefined,
totalItems: 0,
swiperOptions: {
watchOverflow: true,
mousewheel: {
forceToAxis: true
},
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: this.spaceBetweenItems,
slideToClickedSlide: true,
navigation: {
nextEl: '#' + this.blockId + '-next',
prevEl: '#' + this.blockId + '-prev',
},
breakpoints: {
498: { slidesPerView: 2, spaceBetween: this.spaceBetweenItems },
768: { slidesPerView: 3, spaceBetween: this.spaceBetweenItems },
1024: { slidesPerView: 4, spaceBetween: this.spaceBetweenItems },
1366: { slidesPerView: 5, spaceBetween: this.spaceBetweenItems },
1600: { slidesPerView: 6, spaceBetween: this.spaceBetweenItems }
},
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
loop: this.loopSlides ? this.loopSlides : false
},
swiper: {},
errorMessage: 'No items found.'
}
},
@ -287,23 +213,20 @@ export default {
this.fetchCollectionForHeader();
this.fetchItems();
if (!isNaN(this.maxItemsPerScreen) && this.maxItemsPerScreen != 6) {
this.swiperOptions.breakpoints = {
498: { slidesPerView: this.maxItemsPerScreen - 4 > 0 ? this.maxItemsPerScreen - 4 : 1, spaceBetween: this.spaceBetweenItems },
768: { slidesPerView: this.maxItemsPerScreen - 3 > 0 ? this.maxItemsPerScreen - 3 : 1, spaceBetween: this.spaceBetweenItems },
1024: { slidesPerView: this.maxItemsPerScreen - 2 > 0 ? this.maxItemsPerScreen - 2 : 1, spaceBetween: this.spaceBetweenItems },
1366: { slidesPerView: this.maxItemsPerScreen - 1 > 0 ? this.maxItemsPerScreen - 1 : 1, spaceBetween: this.spaceBetweenItems },
1600: { slidesPerView: this.maxItemsPerScreen > 0 ? this.maxItemsPerScreen : 1, spaceBetween: this.spaceBetweenItems },
}
this.swiperOptions.slidesPerView = 1;
}
},
beforeDestroy() {
if (typeof this.swiper.destroy == 'function')
this.swiper.destroy();
},
methods: {
fetchItems() {
this.isLoading = true;
this.errorMessage = 'No items found.';
this.$nextTick(() => {
this.mountCarousel();
});
if (this.itemsRequestSource != undefined && typeof this.itemsRequestSource == 'function')
this.itemsRequestSource.cancel('Previous items search canceled.');
@ -318,6 +241,10 @@ export default {
this.isLoading = false;
this.totalItems = this.items.length;
this.$nextTick(() => {
this.mountCarousel();
});
} else if (this.loadStrategy == 'selection') {
let endpoint = '/collection/' + this.collectionId + '/items?' + qs.stringify({ postin: this.selectedItems, perpage: this.selectedItems.length }) + '&fetch_only=title,url,thumbnail';
@ -330,6 +257,10 @@ export default {
this.isLoading = false;
this.totalItems = response.headers['x-wp-total'];
this.$nextTick(() => {
this.mountCarousel();
});
}).catch((error) => {
this.isLoading = false;
if (error.response && error.response.status && error.response.status == 401)
@ -376,6 +307,10 @@ export default {
this.isLoading = false;
this.totalItems = response.headers['x-wp-total'];
this.$nextTick(() => {
this.mountCarousel();
});
}).catch((error) => {
this.isLoading = false;
if (error.response && error.response.status && error.response.status == 401)
@ -394,6 +329,49 @@ export default {
this.isLoadingCollection = false;
});
}
},
mountCarousel() {
const self = this;
this.swiper = new Swiper('#' + self.blockId + '-carousel', {
watchOverflow: true,
mousewheel: {
forceToAxis: true
},
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: self.spaceBetweenItems,
slideToClickedSlide: true,
navigation: {
nextEl: '#' + self.blockId + '-next',
prevEl: '#' + self.blockId + '-prev',
},
breakpoints: (!isNaN(self.maxItemsPerScreen) && self.maxItemsPerScreen != 6) ? {
498: { slidesPerView: self.maxItemsPerScreen - 4 > 0 ? self.maxItemsPerScreen - 4 : 1, spaceBetween: self.spaceBetweenItems },
768: { slidesPerView: self.maxItemsPerScreen - 3 > 0 ? self.maxItemsPerScreen - 3 : 1, spaceBetween: self.spaceBetweenItems },
1024: { slidesPerView: self.maxItemsPerScreen - 2 > 0 ? self.maxItemsPerScreen - 2 : 1, spaceBetween: self.spaceBetweenItems },
1366: { slidesPerView: self.maxItemsPerScreen - 1 > 0 ? self.maxItemsPerScreen - 1 : 1, spaceBetween: self.spaceBetweenItems },
1600: { slidesPerView: self.maxItemsPerScreen > 0 ? self.maxItemsPerScreen : 1, spaceBetween: self.spaceBetweenItems },
} : {
498: { slidesPerView: 2, spaceBetween: self.spaceBetweenItems },
768: { slidesPerView: 3, spaceBetween: self.spaceBetweenItems },
1024: { slidesPerView: 4, spaceBetween: self.spaceBetweenItems },
1366: { slidesPerView: 5, spaceBetween: self.spaceBetweenItems },
1600: { slidesPerView: 6, spaceBetween: self.spaceBetweenItems }
},
autoplay: self.autoPlay ? { delay: self.autoPlaySpeed*1000 } : false,
loop: self.loopSlides ? self.loopSlides : false,
a11y: {
prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
},
modules: [Autoplay, Navigation, A11y]
});
}
}
}

15
src/views/gutenberg-blocks/blocks/carousel-terms-list/edit.js
View File

@ -10,7 +10,10 @@ import axios from 'axios';
import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import 'swiper/css/swiper.min.css';
import 'swiper/swiper.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/autoplay/autoplay.min.css';
import 'swiper/modules/navigation/navigation.min.css';
export default function({ attributes, setAttributes, className, isSelected, clientId }){
let {
@ -52,7 +55,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
return (
<li
key={ term.id }
className={ 'term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid ' : '') + (maxTermsPerScreen ? ' max-terms-per-screen-' + maxTermsPerScreen : '') }>
className={ 'swiper-slide term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid ' : '') + (maxTermsPerScreen ? ' max-terms-per-screen-' + maxTermsPerScreen : '') }>
{ tainacan_blocks.wp_version < '5.4' ?
<IconButton
onClick={ () => removeItemOfId(term.id) }
@ -407,6 +410,11 @@ export default function({ attributes, setAttributes, className, isSelected, clie
'--spaceBetweenTerms': !isNaN(spaceBetweenTerms) ? (spaceBetweenTerms + 'px') : '32px',
'--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px'
}}>
<div className={'swiper'}>
<ul className={'swiper-wrapper terms-list-edit'}>
{ terms }
</ul>
</div>
<button
class="swiper-button-prev"
slot="button-prev"
@ -426,9 +434,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
fill="none"/>
</svg>
</button>
<ul className={'terms-list-edit'}>
{ terms }
</ul>
<button
class="swiper-button-next"
slot="button-next"

11
src/views/gutenberg-blocks/blocks/carousel-terms-list/style.scss
View File

@ -134,9 +134,15 @@
width: calc(100% + 40px);
left: -20px;
.swiper-container {
.swiper {
margin: 0 var(--spaceAroundCarousel, 50px);
ul.swiper-wrapper {
list-style: none;
padding: 0;
margin: 0;
}
a>span,
a:hover>span {
color: inherit;
@ -297,6 +303,7 @@
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
max-width: calc(100% - 2 * var(--spaceAroundCarousel));
li.term-list-item {
position: relative;
@ -612,7 +619,7 @@
max-width: calc(100% - 72px);
}
.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-terms-list {
.swiper-container,
.swiper,
li.term-list-item {
a>span,
a:hover>span {

296
src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
View File

@ -2,20 +2,38 @@
<div
:style="style"
:class="className + ' has-mounted'">
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="terms.length > 0">
<swiper
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="terms.length > 0 || isLoading">
<div
class="swiper"
:id="blockId + '-carousel'">
<ul
v-if="isLoading"
role="list"
ref="myTermSwiper"
:options="swiperOptions">
<swiper-slide
class="swiper-wrapper">
<li
role="listitem"
:key="index"
v-for="index in 18"
class="swiper-slide term-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
</a>
</li>
</ul>
<ul
v-else
role="list"
class="swiper-wrapper">
<li
role="listitem"
:key="index"
v-for="(term, index) of terms"
:class="'term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid' : '')">
:class="'swiper-slide term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid' : '')">
<a
v-if="showTermThumbnail"
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
@ -57,116 +75,54 @@
</div>
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
</a>
</swiper-slide>
</swiper>
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</li>
</ul>
</div>
<div
v-else
class="spinner-container">
{{ $root.__('No terms found.', 'tainacan') }}
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</div>
<div v-else>
<div
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
<swiper
role="list"
ref="myTermSwiper"
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }">
<swiper-slide
role="listitem"
:key="index"
v-for="(term, index) of 18"
class="term-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
</a>
</swiper-slide>
</swiper>
<button
class="swiper-button-prev"
:id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
<button
class="swiper-button-next"
:id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
</svg>
</button>
</div>
<div
v-else-if="terms.length <= 0 && !isLoading"
class="spinner-container">
{{ $root.__('No terms found.', 'tainacan') }}
</div>
</div>
</template>
@ -174,15 +130,14 @@
<script>
import axios from 'axios';
import qs from 'qs';
import 'swiper/css/swiper.min.css';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/autoplay/autoplay.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import Swiper, { Autoplay, Navigation, A11y } from 'swiper';
export default {
name: "CarouselTermsListTheme",
components: {
Swiper,
SwiperSlide
},
props: {
blockId: String,
selectedTerms: Array,
@ -216,33 +171,7 @@ export default {
tainacanAxios: undefined,
paged: undefined,
totalTerms: 0,
swiperOptions: {
watchOverflow: false,
mousewheel: {
forceToAxis: true
},
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: this.spaceBetweenTerms,
slideToClickedSlide: true,
navigation: {
nextEl: '#' + this.blockId + '-next',
prevEl: '#' + this.blockId + '-prev',
},
breakpoints: {
498: { slidesPerView: this.showTermThumbnail ? 1 : 1, spaceBetween: this.spaceBetweenTerms },
768: { slidesPerView: this.showTermThumbnail ? 2 : 1, spaceBetween: this.spaceBetweenTerms },
1024: { slidesPerView: this.showTermThumbnail ? 3 : 2, spaceBetween: this.spaceBetweenTerms },
1366: { slidesPerView: this.showTermThumbnail ? 4 : 3, spaceBetween: this.spaceBetweenTerms },
1600: { slidesPerView: this.showTermThumbnail ? 5 : 4, spaceBetween: this.spaceBetweenTerms },
},
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
loop: this.loopSlides
},
swiper: {},
errorMessage: 'No terms found.'
}
},
@ -252,22 +181,19 @@ export default {
this.tainacanAxios.defaults.headers.common['X-WP-Nonce'] = tainacan_blocks.nonce;
this.fetchTerms();
if (!isNaN(this.maxTermsPerScreen)) {
this.swiperOptions.breakpoints = {
498: { slidesPerView: this.maxTermsPerScreen - 4 > 0 ? this.maxTermsPerScreen - 4 : 1, spaceBetween: this.spaceBetweenTerms },
768: { slidesPerView: this.maxTermsPerScreen - 3 > 0 ? this.maxTermsPerScreen - 3 : 1, spaceBetween: this.spaceBetweenTerms },
1024: { slidesPerView: this.maxTermsPerScreen - 2 > 0 ? this.maxTermsPerScreen - 2 : 1, spaceBetween: this.spaceBetweenTerms },
1366: { slidesPerView: this.maxTermsPerScreen - 1 > 0 ? this.maxTermsPerScreen - 1 : 1, spaceBetween: this.spaceBetweenTerms },
1600: { slidesPerView: this.maxTermsPerScreen > 0 ? this.maxTermsPerScreen : 1, spaceBetween: this.spaceBetweenTerms },
}
this.swiperOptions.slidesPerView = 1;
}
},
beforeDestroy() {
if (typeof this.swiper.destroy == 'function')
this.swiper.destroy();
},
methods: {
fetchTerms() {
this.isLoading = true;
this.errorMessage = 'No terms found.';
this.$nextTick(() => {
this.mountCarousel();
});
if (this.termsRequestSource != undefined && typeof this.termsRequestSource == 'function')
this.termsRequestSource.cancel('Previous terms search canceled.');
@ -288,6 +214,10 @@ export default {
this.isLoading = false;
this.totalTerms = response.headers['x-wp-total'];
this.$nextTick(() => {
this.mountCarousel();
});
}).catch((error) => {
this.isLoading = false;
if (error.response && error.response.status && error.response.status == 401)
@ -295,6 +225,48 @@ export default {
});
},
mountCarousel() {
const self = this;
this.swiper = new Swiper('#' + self.blockId + '-carousel', {
mousewheel: {
forceToAxis: true
},
observer: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: self.spaceBetweenTerms,
slideToClickedSlide: true,
navigation: {
nextEl: '#' + self.blockId + '-next',
prevEl: '#' + self.blockId + '-prev',
},
breakpoints: !isNaN(self.maxTermsPerScreen) ? {
498: { slidesPerView: self.maxTermsPerScreen - 4 > 0 ? self.maxTermsPerScreen - 4 : 1, spaceBetween: self.spaceBetweenTerms },
768: { slidesPerView: self.maxTermsPerScreen - 3 > 0 ? self.maxTermsPerScreen - 3 : 1, spaceBetween: self.spaceBetweenTerms },
1024: { slidesPerView: self.maxTermsPerScreen - 2 > 0 ? self.maxTermsPerScreen - 2 : 1, spaceBetween: self.spaceBetweenTerms },
1366: { slidesPerView: self.maxTermsPerScreen - 1 > 0 ? self.maxTermsPerScreen - 1 : 1, spaceBetween: self.spaceBetweenTerms },
1600: { slidesPerView: self.maxTermsPerScreen > 0 ? self.maxTermsPerScreen : 1, spaceBetween: self.spaceBetweenTerms },
} : {
498: { slidesPerView: self.showTermThumbnail ? 1 : 1, spaceBetween: self.spaceBetweenTerms },
768: { slidesPerView: self.showTermThumbnail ? 2 : 1, spaceBetween: self.spaceBetweenTerms },
1024: { slidesPerView: self.showTermThumbnail ? 3 : 2, spaceBetween: self.spaceBetweenTerms },
1366: { slidesPerView: self.showTermThumbnail ? 4 : 3, spaceBetween: self.spaceBetweenTerms },
1600: { slidesPerView: self.showTermThumbnail ? 5 : 4, spaceBetween: self.spaceBetweenTerms },
},
autoplay: (self.autoPlay && !self.isLoading) ? { delay: self.autoPlaySpeed*1000 } : false,
loop: self.loopSlides && !self.isLoading,
a11y: {
prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
},
modules: [Autoplay, Navigation, A11y]
});
}
}
}
</script>

12
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
View File

@ -219,7 +219,7 @@
<!-- The Swiper slider itself -->
<div
id="tainacan-slide-container"
class="swiper-container">
class="swiper">
<div
role="list"
class="swiper-wrapper" />
@ -325,8 +325,11 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import axios from '../../../../../admin/js/axios';
import 'swiper/css/swiper.min.css';
import Swiper from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/mousewheel/mousewheel.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import 'swiper/modules/virtual/virtual.min.css';
import Swiper, {Navigation, Virtual, Mousewheel } from 'swiper';
import CircularCounter from './circular-counter.vue';
import SlidesHelpModal from './slides-help-modal.vue'
import { viewModesMixin } from '../js/view-modes-mixin.js';
@ -480,7 +483,8 @@ export default {
self.itemPosition = null;
}
}
}
},
modules: [Navigation, Virtual, Mousewheel]
});
// Adds clipped class to root html

4
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss
View File

@ -236,7 +236,8 @@
&>div audio,
&>div img,
&>div video,
&>div.tainacan-embed-container {
&>div.tainacan-embed-container,
&>figure.tainacan-embed-container {
width: 100%;
max-width: 100vw;
text-align: center;
@ -251,6 +252,7 @@
}
iframe {
border: none;
padding: 4em;
}
.empty-document {

2
src/views/gutenberg-blocks/blocks/item-gallery/style.scss
View File

@ -59,7 +59,7 @@ $pswp__include-minimal-style: true !default;
.tainacan-media-component__swiper-main,
.tainacan-media-component__swiper-thumbs {
.swiper-button-prev:not(.swiper-button-has-svg)::after,
.swiper-container-rtl .swiper-button-next:not(.swiper-button-has-svg)::after {
.swiper-rtl .swiper-button-next:not(.swiper-button-has-svg)::after {
content: 'previous';
}
.swiper-button-next:not(.swiper-button-has-svg)::after,

55
src/views/gutenberg-blocks/blocks/item-gallery/theme.js
View File

@ -4,8 +4,10 @@
// as a carousel with a lightbox. Check examples in the end of the file
import PhotoSwipe from 'photoswipe/dist/photoswipe.min.js';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min.js';
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
import Swiper, { Navigation, A11y } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import 'swiper/modules/a11y/a11y.min.css';
const { __ } = wp.i18n;
@ -61,6 +63,7 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
firstSlideMessage: __('This is the first slide', 'tainacan'),
lastSlideMessage: __('This is the last slide', 'tainacan')
},
modules: [Navigation, A11y]
};
thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options };
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions);
@ -85,6 +88,7 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
firstSlideMessage: __('This is the first slide', 'tainacan'),
lastSlideMessage: __('This is the last slide', 'tainacan')
},
modules: [Navigation, A11y]
};
if (this.thumbsSwiper) {
mainSwiperOptions.thumbs = {
@ -390,49 +394,4 @@ export default (element) => {
component
);
}
};
/*
---- Carousel of thumbnails only ----------------------------------------
<div class="swiper-container-thumbs swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="link-to-full-image-or-file">
<img href="link-to-thumbnail" alt..>
<span class="swiper-slide-name>File name</span>
</a>
</li>
</ul>
</div>
new TainacanMediaGallery(.swiper-container-thumbs, null, {...});
---- Carousel of thumbnails with main slider ----------------------------
<div class="swiper-container-main swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="link-to-full-image-or-file">
<img href="link-to-medium-or-large" alt..>
<span class="swiper-slide-name>File name</span>
</a>
</li>
</ul>
</div>
<div class="swiper-container-thumbs swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img href="link-to-thumbnail" alt..>
<span class="swiper-slide-name>File name</span>
</li>
</ul>
</div>
new TainacanMediaGallery(.swiper-container-thumbs, .swiper-container-main, {...});
*/
};