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

Adds skeleton loading to carousel block.

This commit is contained in:
Mateus Machado Luna 2019-07-26 15:17:59 -03:00
parent 680b974b61
commit c3ec409848
3 changed files with 58 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list-theme.js
View File

@ -57,7 +57,7 @@ document.addEventListener("DOMContentLoaded", () => {
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-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 : undefined;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;

60
src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list-theme.vue
View File

@ -52,10 +52,9 @@
v-if="items.length > 0">
<swiper
role="list"
ref="mySwiper"
:options="swiperOptions"
:style="{
marginTop: showCollectionHeader ? '1.35rem' : '0px'
:style="{
marginTop: showCollectionHeader ? '1.35rem' : '0px'
}">
<swiper-slide
role="listitem"
@ -65,8 +64,7 @@
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"
target="_blank"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
target="_blank">
<img
:src="
item.thumbnail && item.thumbnail['tainacan-medium'][0] && item.thumbnail['tainacan-medium'][0]
@ -116,11 +114,58 @@
class="spinner-container">
{{ $root.__('No items found.', 'tainacan') }}
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
</div>
<div v-else>
<div :class="'tainacan-carousel has-arrows-' + arrowsPosition">
<swiper
role="list"
:options="swiperOptions"
:style="{
marginTop: showCollectionHeader ? '1.35rem' : '0px'
}">
<swiper-slide
role="listitem"
:key="index"
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"
slot="button-prev">
<svg
width="42"
height="42"
viewBox="0 0 24 24">
<path 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"
slot="button-next">
<svg
width="42"
height="42"
viewBox="0 0 24 24">
<path 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>
</div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';
@ -151,7 +196,6 @@ export default {
slidesPerGroup: 1,
spaceBetween: 32,
slideToClickedSlide: true,
autoHeight: this.autoPlay ? false : true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',

9
src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss
View File

@ -189,6 +189,11 @@
.items-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 {
@ -234,10 +239,6 @@
margin-bottom: 0.5rem;
}
a.item-without-title span {
display: none;
}
&:hover a {
color: #454647;
text-decoration: none;