Begins usage of inner blocks for related items
This commit is contained in:
mateuswetah
parent
36a30190e1
commit
61af25f99e
|
|
@ -12,7 +12,7 @@ const TAINACAN_BLOCKS = [
|
|||
'carousel-items-list' => [ 'has_theme_script' => true ],
|
||||
'carousel-terms-list' => [ 'has_theme_script' => true ],
|
||||
'carousel-collections-list' => [ 'has_theme_script' => true ],
|
||||
'carousel-related-items' => [ 'has_theme_script' => true ],
|
||||
'carousel-related-items' => [],
|
||||
'terms-list' => [ 'extra_editor_script_deps' => array('undescore') ],
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
this.state = {
|
||||
collectionsPerPage: 24,
|
||||
collectionId: undefined,
|
||||
itemId: undefined,
|
||||
collectionName: '',
|
||||
isLoadingCollections: false,
|
||||
modalCollections: [],
|
||||
|
|
@ -20,12 +21,12 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
collectionOrderBy: 'date-desc',
|
||||
collectionPage: 1,
|
||||
temporaryCollectionId: '',
|
||||
temporaryItemId: '',
|
||||
searchCollectionName: '',
|
||||
collections: [],
|
||||
collectionsRequestSource: undefined,
|
||||
searchURL: '',
|
||||
itemsPerPage: 12,
|
||||
loadStrategy: 'search'
|
||||
itemsPerPage: 12
|
||||
};
|
||||
|
||||
// Bind events
|
||||
|
|
@ -34,20 +35,21 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
this.fetchCollections = this.fetchCollections.bind(this);
|
||||
this.fetchModalCollections = this.fetchModalCollections.bind(this);
|
||||
this.fetchCollection = this.fetchCollection.bind(this);
|
||||
this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
|
||||
this.applySelectedItems = this.applySelectedItems.bind(this);
|
||||
this.applyRelatedItem = this.applyRelatedItem.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
this.setState({
|
||||
collectionId: this.props.existingCollectionId
|
||||
collectionId: this.props.existingCollectionId,
|
||||
itemId: this.props.existingItemId
|
||||
});
|
||||
|
||||
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
|
||||
this.fetchCollection(this.props.existingCollectionId);
|
||||
this.setState({
|
||||
searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish') });
|
||||
searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?singleselectionmode=true&iframemode=true&status=publish'
|
||||
});
|
||||
} else {
|
||||
this.setState({ collectionPage: 1 });
|
||||
this.fetchModalCollections();
|
||||
|
|
@ -114,7 +116,7 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
selectCollection(selectedCollectionId) {
|
||||
this.setState({
|
||||
collectionId: selectedCollectionId,
|
||||
searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish')
|
||||
searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?singleselectionmode=true&iframemode=true&status=publish'
|
||||
});
|
||||
|
||||
this.props.onSelectCollection(selectedCollectionId);
|
||||
|
|
@ -164,20 +166,13 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
applySelectedSearchURL() {
|
||||
let iframe = document.getElementById("itemsFrame");
|
||||
if (iframe) {
|
||||
this.props.onApplySearchURL(iframe.contentWindow.location.href);
|
||||
}
|
||||
}
|
||||
|
||||
applySelectedItems() {
|
||||
applyRelatedItem() {
|
||||
let iframe = document.getElementById("itemsFrame");
|
||||
if (iframe) {
|
||||
let params = new URLSearchParams(iframe.contentWindow.location.search);
|
||||
let selectedItems = params.getAll('selecteditems');
|
||||
params.delete('selecteditems')
|
||||
this.props.onApplySelectedItems(selectedItems);
|
||||
this.props.onApplyRelatedItem(selectedItems[0]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,10 +200,10 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
// Items modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal dynamic-modal"
|
||||
title={ this.props.loadStrategy == 'selection' ? __('Select items to add on block', 'tainacan') : __('Configure the items search to be used on block', 'tainacan')}
|
||||
title={ __('Select the item that has relations', 'tainacan') }
|
||||
onRequestClose={ () => this.cancelSelection() }
|
||||
shouldCloseOnClickOutside={ false }
|
||||
contentLabel={ this.props.loadStrategy == 'selection' ? __('Select items that will be added on block', 'tainacan') : __('Configure your items search that will load items on block', 'tainacan')}>
|
||||
contentLabel={ __('Select the item that has relations', 'tainacan') }>
|
||||
<iframe
|
||||
id="itemsFrame"
|
||||
src={ this.state.searchURL } />
|
||||
|
|
@ -218,23 +213,12 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
onClick={ () => { this.resetCollections() }}>
|
||||
{__('Switch collection', 'tainacan')}
|
||||
</Button>
|
||||
{ this.props.loadStrategy == 'selection' ?
|
||||
<Button
|
||||
style={{ marginLeft: 'auto' }}
|
||||
isPrimary
|
||||
onClick={ () => this.applySelectedItems() }>
|
||||
onClick={ () => this.applyRelatedItem() }>
|
||||
{__('Add the selected items', 'tainacan')}
|
||||
</Button>
|
||||
: null
|
||||
}
|
||||
{ this.props.loadStrategy == 'search' ?
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={ () => this.applySelectedSearchURL() }>
|
||||
{__('Use this search', 'tainacan')}
|
||||
</Button>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
|
|
@ -354,7 +338,7 @@ export default class CarouselRelatedItemsModal extends React.Component {
|
|||
isPrimary
|
||||
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
|
||||
onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }>
|
||||
{ this.props.loadStrategy == 'selection' ? __('Select items', 'tainacan') : __('Configure search', 'tainacan')}
|
||||
{ __('Select item', 'tainacan') }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,108 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import CarouselRelatedItemsTheme from './carousel-related-items-theme.vue';
|
||||
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
|
||||
import VueBlurHash from 'vue-blurhash';
|
||||
|
||||
// Vue Dev Tools!
|
||||
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
|
||||
|
||||
// This is rendered on the theme side.
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// Gets all divs with content created by our block;
|
||||
let blocks = document.getElementsByClassName('wp-block-tainacan-carousel-items-list');
|
||||
|
||||
if (blocks) {
|
||||
let blockIds = Object.values(blocks).map((block) => block.id);
|
||||
|
||||
// Creates a new Vue Instance to manage each block isolatelly
|
||||
for (let blockId of blockIds) {
|
||||
|
||||
// Configure Vue logic before passing it to constructor:
|
||||
let vueOptions = {
|
||||
data: {
|
||||
collectionId: '',
|
||||
searchURL: '',
|
||||
selectedItems: [],
|
||||
loadStrategy: 'search',
|
||||
maxItemsNumber: 12,
|
||||
maxItemsPerScreen: 7,
|
||||
arrowsPosition: 'around',
|
||||
largeArrows: false,
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: 3,
|
||||
loopSlides: false,
|
||||
hideTitle: true,
|
||||
cropImagesToSquare: true,
|
||||
showCollectionHeader: false,
|
||||
showCollectionLabel: false,
|
||||
collectionBackgroundColor: '#454647',
|
||||
collectionTextColor: '#ffffff',
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
className: ''
|
||||
},
|
||||
render(h){
|
||||
return h(CarouselRelatedItemsTheme, {
|
||||
props: {
|
||||
blockId: blockId,
|
||||
collectionId: this.collectionId,
|
||||
searchURL: this.searchURL,
|
||||
selectedItems: this.selectedItems,
|
||||
loadStrategy: this.loadStrategy,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
maxItemsPerScreen: this.maxItemsPerScreen,
|
||||
arrowsPosition: this.arrowsPosition,
|
||||
largeArrows: this.largeArrows,
|
||||
autoPlay: this.autoPlay,
|
||||
autoPlaySpeed: this.autoPlaySpeed,
|
||||
loopSlides: this.loopSlides,
|
||||
hideTitle: this.hideTitle,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
showCollectionHeader: this.showCollectionHeader,
|
||||
showCollectionLabel: this.showCollectionLabel,
|
||||
collectionBackgroundColor: this.collectionBackgroundColor,
|
||||
collectionTextColor: this.collectionTextColor,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
className: this.className
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeMount () {
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
|
||||
this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
|
||||
this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
|
||||
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||
this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
|
||||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
|
||||
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
|
||||
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
|
||||
this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
|
||||
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
|
||||
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
|
||||
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
|
||||
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
|
||||
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
|
||||
console.log(this.collectionId);
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
return wp.i18n.__(text, domain);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Vue.use(ThumbnailHelperPlugin);
|
||||
Vue.use(VueBlurHash);
|
||||
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,372 +0,0 @@
|
|||
<template>
|
||||
<div :class="className">
|
||||
<div v-if="showCollectionHeader">
|
||||
<div
|
||||
v-if="isLoadingCollection"
|
||||
class="carousel-items-collection-header skeleton"
|
||||
:style="{ height: '165px' }"/>
|
||||
<a
|
||||
v-else
|
||||
target="_blank"
|
||||
:href="collection.url ? collection.url : ''"
|
||||
class="carousel-items-collection-header">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
v-if="showCollectionLabel"
|
||||
class="label">
|
||||
{{ $root.__('Collection', 'tainacan') }}
|
||||
<br>
|
||||
</span>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="!isLoading">
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
|
||||
v-if="items.length > 0">
|
||||
<swiper
|
||||
role="list"
|
||||
:options="swiperOptions"
|
||||
ref="myItemSwiper"
|
||||
:style="{
|
||||
marginTop: showCollectionHeader ? '1.35em' : '0px'
|
||||
}">
|
||||
<swiper-slide
|
||||
role="listitem"
|
||||
ref="myItemSwiperSlide"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="item-list-item">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
target="_blank">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
|
||||
<div
|
||||
v-if="maxItemsPerScreen <= 4"
|
||||
class="swiper-lazy-preloader swiper-lazy-preloader-white"/>
|
||||
</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 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 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
|
||||
class="spinner-container">
|
||||
{{ $root.__(errorMessage, 'tainacan') }}
|
||||
</div>
|
||||
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
|
||||
</div>
|
||||
<div v-else-if="isLoading && !autoPlay && !loopSlides">
|
||||
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
|
||||
<swiper
|
||||
role="list"
|
||||
:options="swiperOptions"
|
||||
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 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 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';
|
||||
import 'swiper/css/swiper.min.css';
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
|
||||
|
||||
export default {
|
||||
name: "CarouselRelatedItemsTheme",
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide
|
||||
},
|
||||
props: {
|
||||
blockId: String,
|
||||
collectionId: String,
|
||||
searchURL: String,
|
||||
selectedItems: Array,
|
||||
loadStrategy: String,
|
||||
maxItemsNumber: Number,
|
||||
maxItemsPerScreen: Number,
|
||||
arrowsPosition: String,
|
||||
largeArrows: Boolean,
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: Number,
|
||||
loopSlides: Boolean,
|
||||
hideTitle: Boolean,
|
||||
cropImagesToSquare: Boolean,
|
||||
showCollectionHeader: Boolean,
|
||||
showCollectionLabel: Boolean,
|
||||
collectionBackgroundColor: String,
|
||||
collectionTextColor: String,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
className: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
collection: undefined,
|
||||
itemsRequestSource: undefined,
|
||||
isLoading: false,
|
||||
isLoadingCollection: false,
|
||||
localMaxItemsNumber: undefined,
|
||||
localOrder: undefined,
|
||||
tainacanAxios: undefined,
|
||||
paged: undefined,
|
||||
totalItems: 0,
|
||||
swiperOptions: {
|
||||
lazy: this.maxItemsPerScreen <= 4,
|
||||
watchOverflow: true,
|
||||
mousewheel: true,
|
||||
observer: true,
|
||||
preventInteractionOnTransition: true,
|
||||
allowClick: true,
|
||||
allowTouchMove: true,
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
spaceBetween: 32,
|
||||
slideToClickedSlide: true,
|
||||
navigation: {
|
||||
nextEl: '#' + this.blockId + '-next',
|
||||
prevEl: '#' + this.blockId + '-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
498: { slidesPerView: 2 },
|
||||
768: { slidesPerView: 3 },
|
||||
1024: { slidesPerView: 4 },
|
||||
1366: { slidesPerView: 5 },
|
||||
1600: { slidesPerView: 6 }
|
||||
},
|
||||
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
||||
loop: this.loopSlides ? this.loopSlides : false
|
||||
},
|
||||
errorMessage: 'No items found.'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
|
||||
|
||||
if (this.showCollectionHeader)
|
||||
this.fetchCollectionForHeader();
|
||||
|
||||
this.fetchItems();
|
||||
|
||||
if (!isNaN(this.maxItemsPerScreen) && this.maxItemsPerScreen != 6) {
|
||||
this.swiperOptions.breakpoints = {
|
||||
498: { slidesPerView: this.maxItemsPerScreen - 4 > 0 ? this.maxItemsPerScreen - 4 : 1 },
|
||||
768: { slidesPerView: this.maxItemsPerScreen - 3 > 0 ? this.maxItemsPerScreen - 3 : 1 },
|
||||
1024: { slidesPerView: this.maxItemsPerScreen - 2 > 0 ? this.maxItemsPerScreen - 2 : 1 },
|
||||
1366: { slidesPerView: this.maxItemsPerScreen - 1 > 0 ? this.maxItemsPerScreen - 1 : 1 },
|
||||
1600: { slidesPerView: this.maxItemsPerScreen > 0 ? this.maxItemsPerScreen : 1 },
|
||||
}
|
||||
this.swiperOptions.slidesPerView = 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchItems() {
|
||||
|
||||
this.isLoading = true;
|
||||
this.errorMessage = 'No items found.';
|
||||
|
||||
if (this.itemsRequestSource != undefined && typeof this.itemsRequestSource == 'function')
|
||||
this.itemsRequestSource.cancel('Previous items search canceled.');
|
||||
|
||||
this.itemsRequestSource = axios.CancelToken.source();
|
||||
|
||||
if (this.loadStrategy == 'selection') {
|
||||
let endpoint = '/collection/' + this.collectionId + '/items?' + qs.stringify({ postin: this.selectedItems, perpage: this.selectedItems.length }) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
for (let item of response.data.items)
|
||||
this.items.push(item);
|
||||
|
||||
this.isLoading = false;
|
||||
this.totalItems = response.headers['x-wp-total'];
|
||||
|
||||
}).catch((error) => {
|
||||
this.isLoading = false;
|
||||
if (error.response && error.response.status && error.response.status == 401)
|
||||
this.errorMessage = 'Not allowed to see these items.'
|
||||
});
|
||||
} else {
|
||||
|
||||
this.items = [];
|
||||
|
||||
let endpoint = '/collection' + this.searchURL.split('#')[1].split('/collections')[1];
|
||||
let query = endpoint.split('?')[1];
|
||||
let queryObject = qs.parse(query);
|
||||
|
||||
// Set up max items to be shown
|
||||
if (this.maxItemsNumber != undefined && Number(this.maxItemsNumber) > 0)
|
||||
queryObject.perpage = this.maxItemsNumber;
|
||||
else if (queryObject.perpage != undefined && queryObject.perpage > 0)
|
||||
this.localMaxItemsNumber = queryObject.perpage;
|
||||
else {
|
||||
queryObject.perpage = 12;
|
||||
this.localMaxItemsNumber = 12;
|
||||
}
|
||||
|
||||
// Set up paging
|
||||
if (this.paged != undefined)
|
||||
queryObject.paged = this.paged;
|
||||
else if (queryObject.paged != undefined)
|
||||
this.paged = queryObject.paged;
|
||||
else
|
||||
this.paged = 1;
|
||||
|
||||
// Remove unecessary queries
|
||||
delete queryObject.readmode;
|
||||
delete queryObject.iframemode;
|
||||
delete queryObject.admin_view_mode;
|
||||
delete queryObject.fetch_only_meta;
|
||||
|
||||
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
for (let item of response.data.items)
|
||||
this.items.push(item);
|
||||
|
||||
this.isLoading = false;
|
||||
this.totalItems = response.headers['x-wp-total'];
|
||||
|
||||
}).catch((error) => {
|
||||
this.isLoading = false;
|
||||
if (error.response && error.response.status && error.response.status == 401)
|
||||
this.errorMessage = 'Not allowed to see these items.'
|
||||
});
|
||||
}
|
||||
},
|
||||
fetchCollectionForHeader() {
|
||||
if (this.showCollectionHeader) {
|
||||
|
||||
this.isLoadingCollection = true;
|
||||
|
||||
this.tainacanAxios.get('/collections/' + this.collectionId + '?fetch_only=name,thumbnail,header_image')
|
||||
.then(response => {
|
||||
this.collection = response.data;
|
||||
this.isLoadingCollection = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import './carousel-related-items.scss';
|
||||
|
||||
</style>
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
.wp-block-tainacan-carousel-related-items {
|
||||
margin: 2em auto;
|
||||
--swiper-navigation-color: var(--tainacan-block-primary, $primary);
|
||||
--swiper-theme-color: var(--tainacan-block-primary, $primary);
|
||||
|
||||
// Spinner
|
||||
.spinner-container {
|
||||
|
|
@ -46,486 +44,12 @@
|
|||
animation: skeleton-animation 1.8s ease infinite;
|
||||
}
|
||||
|
||||
// Collection header
|
||||
.carousel-items-collection-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
text-decoration: none !important;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.collection-name {
|
||||
width: auto;
|
||||
min-width: 350px;
|
||||
flex-grow: 1;
|
||||
padding: 1em 100px 1em 1em;
|
||||
text-align: right;
|
||||
line-height: 1.5em;
|
||||
min-height: 165px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background-color: var(--tainacan-block-gray5, $gray5);
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1.3em;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
span.label {
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&.only-collection-name {
|
||||
justify-content: center;
|
||||
padding: 1em;
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collection-thumbnail {
|
||||
height: 145px;
|
||||
width: 145px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 80px;
|
||||
border: 4px solid white;
|
||||
margin: 10px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
margin-left: -155px;
|
||||
left: 82px;
|
||||
background-color: var(--tainacan-block-gray2, $gray2);
|
||||
}
|
||||
.collection-header-image {
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
min-height: 165px;
|
||||
flex-grow: 2;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--tainacan-block-gray2, $gray2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
flex-wrap: wrap-reverse;
|
||||
|
||||
.collection-name {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
justify-content: center !important;
|
||||
text-align: center !important;
|
||||
padding: 64px 1em 0em 1em;
|
||||
h3 { margin-bottom: 1em; }
|
||||
}
|
||||
.collection-thumbnail {
|
||||
left: calc(-50% + 78px) !important;
|
||||
top: -78px !important;
|
||||
}
|
||||
.collection-header-image {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tainacan Carousel
|
||||
.tainacan-carousel {
|
||||
position: relative;
|
||||
width: calc(100% + 40px);
|
||||
left: -20px;
|
||||
|
||||
.swiper-container {
|
||||
margin: 0 50px;
|
||||
|
||||
a>span,
|
||||
a:hover>span {
|
||||
color: var(--tainacan-block-gray5, $gray5);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
display: block;
|
||||
line-height: 1.2em;
|
||||
word-break: break-word;
|
||||
}
|
||||
a>img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-warning {
|
||||
width: 100%;
|
||||
font-size: 0.875em;
|
||||
font-style: italic;
|
||||
color: var(--tainacan-block-gray4, $gray4);
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 8px 2px 2px 2px;
|
||||
}
|
||||
|
||||
// Next and previous buttons
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
top: calc(50% - 42px);
|
||||
bottom: initial;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
margin: 0 -4px;
|
||||
|
||||
svg {
|
||||
fill: var(--tainacan-block-primary, $primary);
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel placeholder on editor side ----------------------------------------------------
|
||||
.items-list-edit-container,
|
||||
.tainacan-carousel {
|
||||
// Placeholder on editor side ----------------------------------------------------
|
||||
.carousel-related-items-edit-container {
|
||||
position: relative;
|
||||
|
||||
& .skeleton {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
&.has-arrows-none .swiper-button-prev,
|
||||
&.has-arrows-none .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
&.has-arrows-left .swiper-button-next {
|
||||
left: 10px;
|
||||
right: auto;
|
||||
top: calc(50% + 12px) !important;
|
||||
}
|
||||
&.has-arrows-right .swiper-button-prev {
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
&.has-arrows-right .swiper-button-next {
|
||||
top: calc(50% + 12px) !important;
|
||||
}
|
||||
&.has-large-arrows .swiper-button-prev,
|
||||
&.has-large-arrows .swiper-button-next {
|
||||
top: calc(50% - 60px);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 -24px;
|
||||
}
|
||||
&.has-large-arrows.has-arrows-left .swiper-button-next {
|
||||
left: 30px;
|
||||
right: auto;
|
||||
top: calc(50% + 30px) !important;
|
||||
}
|
||||
&.has-large-arrows.has-arrows-right .swiper-button-prev {
|
||||
right: 30px;
|
||||
left: auto;
|
||||
}
|
||||
&.has-large-arrows.has-arrows-right .swiper-button-next {
|
||||
top: calc(50% + 30px) !important;
|
||||
}
|
||||
}
|
||||
ul.items-list-edit {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
overflow-x: scroll;
|
||||
list-style: none;
|
||||
margin: 0 36px;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-left: 10px;
|
||||
|
||||
li.item-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 16px;
|
||||
width: calc(14.285% - 32px);
|
||||
min-width: calc(14.285% - 32px);
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px;
|
||||
|
||||
a {
|
||||
color: var(--tainacan-block-gray5, $gray5);
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: var(--tainacan-block-gray5, $gray5);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute !important;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
color: var(--tainacan-block-gray5, $gray5);
|
||||
padding: 2px;
|
||||
margin-left: 5px;
|
||||
min-width: 14px;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
right: -14px;
|
||||
top: 0px;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.dashicon { margin: 0px; }
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
background-color: rgba(255, 255, 255, 1) !important;
|
||||
opacity: 1;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
border: 1px solid var(--tainacan-block-gray3, $gray3);
|
||||
border-radius: 12px;
|
||||
transition: opacity linear 0.15s, right linear 0.15s;
|
||||
}
|
||||
&:hover button:hover {
|
||||
background-color: rgba(255, 255, 255, 1) !important;
|
||||
border: 1px solid var(--tainacan-block-gray3, $gray3) !important;
|
||||
}
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1686px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1452px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px);
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1118px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px);
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-4,
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 854px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px);
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-5,
|
||||
&.max-itens-per-screen-4,
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 584px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px);
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
}
|
||||
&.max-itens-per-screen-6,
|
||||
&.max-itens-per-screen-5,
|
||||
&.max-itens-per-screen-4,
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const { __ } = wp.i18n;
|
|||
|
||||
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, InnerBlocks } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import CarouselRelatedItemsModal from './carousel-related-items-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
|
|
@ -29,25 +29,20 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
</svg>,
|
||||
category: 'tainacan-blocks',
|
||||
keywords: [ __( 'items', 'tainacan' ), __( 'carousel', 'tainacan' ), __( 'slider', 'tainacan' ), __( 'relationship', 'tainacan' ) ],
|
||||
description: __('A carousel do list items related to a certain item via relationship metadata.', 'tainacan'),
|
||||
description: __('A set of carousels to list items related to a certain item via relationship metadata.', 'tainacan'),
|
||||
example: {
|
||||
attributes: {
|
||||
content: 'preview'
|
||||
}
|
||||
},
|
||||
attributes: {
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
collectionId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: []
|
||||
itemId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
|
|
@ -57,168 +52,31 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
selectedItems: {
|
||||
relatedItems: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
itemsRequestSource: {
|
||||
itemRequestSource: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
maxItemsNumber: {
|
||||
type: Number,
|
||||
value: undefined
|
||||
},
|
||||
maxItemsPerScreen: {
|
||||
type: Number,
|
||||
value: 7
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
isLoadingCollection: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
loadStrategy: {
|
||||
type: String,
|
||||
value: 'search'
|
||||
},
|
||||
arrowsPosition: {
|
||||
type: String,
|
||||
value: 'search'
|
||||
},
|
||||
largeArrows: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
autoPlaySpeed: {
|
||||
type: Number,
|
||||
value: 3
|
||||
},
|
||||
loopSlides: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
hideTitle: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showCollectionHeader: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
showCollectionLabel: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
cropImagesToSquare: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
collection: {
|
||||
type: Object,
|
||||
value: undefined
|
||||
},
|
||||
blockId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
collectionBackgroundColor: {
|
||||
type: String,
|
||||
default: "#454647"
|
||||
},
|
||||
collectionTextColor: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
multiple: true,
|
||||
fontSize: true
|
||||
},
|
||||
edit({ attributes, setAttributes, className, isSelected, clientId }){
|
||||
edit({ attributes, setAttributes, className, isSelected }){
|
||||
let {
|
||||
items,
|
||||
content,
|
||||
collectionId,
|
||||
itemId,
|
||||
isModalOpen,
|
||||
searchURL,
|
||||
itemsRequestSource,
|
||||
maxItemsNumber,
|
||||
maxItemsPerScreen,
|
||||
selectedItems,
|
||||
relatedItems,
|
||||
isLoading,
|
||||
loadStrategy,
|
||||
arrowsPosition,
|
||||
largeArrows,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideTitle,
|
||||
cropImagesToSquare,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
isLoadingCollection,
|
||||
collection,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor
|
||||
itemRequestSource
|
||||
} = attributes;
|
||||
|
||||
// Obtains block's client id to render it on save function
|
||||
setAttributes({ blockId: clientId });
|
||||
const thumbHelper = ThumbnailHelperFunctions();
|
||||
|
||||
// Sets some defaults that were not working
|
||||
if (maxItemsPerScreen === undefined) {
|
||||
maxItemsPerScreen = 7;
|
||||
setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
}
|
||||
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
<li
|
||||
key={ item.id }
|
||||
className={ 'item-list-item ' + (maxItemsPerScreen ? 'max-itens-per-screen-' + maxItemsPerScreen : '') }>
|
||||
{ loadStrategy == 'selection' ?
|
||||
( tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
:
|
||||
<Button
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
)
|
||||
:null
|
||||
}
|
||||
<a
|
||||
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
|
||||
href={ item.url }
|
||||
target="_blank">
|
||||
<img
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
|
||||
srcset={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' )) }/>
|
||||
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
isLoading = true;
|
||||
|
||||
|
|
@ -226,130 +84,34 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
isLoading: isLoading
|
||||
});
|
||||
|
||||
if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
|
||||
itemsRequestSource.cancel('Previous items search canceled.');
|
||||
if (itemRequestSource != undefined && typeof itemRequestSource == 'function')
|
||||
itemRequestSource.cancel('Previous items search canceled.');
|
||||
|
||||
itemsRequestSource = axios.CancelToken.source();
|
||||
itemRequestSource = axios.CancelToken.source();
|
||||
|
||||
items = [];
|
||||
let endpoint = '/collection/' + collectionId + '/items?'+ itemId;
|
||||
|
||||
if (loadStrategy == 'selection') {
|
||||
let endpoint = '/collection/' + collectionId + '/items?'+ qs.stringify({ postin: selectedItems, perpage: selectedItems.length }) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
||||
tainacan.get(endpoint, { cancelToken: itemRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
for (let item of response.data.items)
|
||||
items.push(prepareItem(item));
|
||||
let relatedItems = [];
|
||||
//relatedItems = response.data.item.related_items;
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
relatedItems: relatedItems,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
||||
let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
|
||||
let query = endpoint.split('?')[1];
|
||||
let queryObject = qs.parse(query);
|
||||
|
||||
// Set up max items to be shown
|
||||
if (maxItemsNumber != undefined && maxItemsNumber > 0)
|
||||
queryObject.perpage = maxItemsNumber;
|
||||
else if (queryObject.perpage != undefined && queryObject.perpage > 0)
|
||||
setAttributes({ maxItemsNumber: queryObject.perpage });
|
||||
else {
|
||||
queryObject.perpage = 12;
|
||||
setAttributes({ maxItemsNumber: 12 });
|
||||
}
|
||||
|
||||
// Remove unecessary queries
|
||||
delete queryObject.readmode;
|
||||
delete queryObject.iframemode;
|
||||
delete queryObject.admin_view_mode;
|
||||
delete queryObject.fetch_only_meta;
|
||||
|
||||
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
for (let item of response.data.items)
|
||||
items.push(prepareItem(item));
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource
|
||||
itemRequestSource: itemRequestSource
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fetchCollectionForHeader() {
|
||||
if (showCollectionHeader) {
|
||||
|
||||
isLoadingCollection = true;
|
||||
setAttributes({
|
||||
isLoadingCollection: isLoadingCollection
|
||||
});
|
||||
|
||||
tainacan.get('/collections/' + collectionId + '?fetch_only=name,thumbnail,header_image')
|
||||
.then(response => {
|
||||
collection = response.data;
|
||||
isLoadingCollection = false;
|
||||
|
||||
if (collection.tainacan_theme_collection_background_color)
|
||||
collectionBackgroundColor = collection.tainacan_theme_collection_background_color;
|
||||
else
|
||||
collectionBackgroundColor = '#454647';
|
||||
|
||||
if (collection.tainacan_theme_collection_color)
|
||||
collectionTextColor = collection.tainacan_theme_collection_color;
|
||||
else
|
||||
collectionTextColor = '#ffffff';
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
collection: collection,
|
||||
isLoadingCollection: isLoadingCollection,
|
||||
collectionBackgroundColor: collectionBackgroundColor,
|
||||
collectionTextColor: collectionTextColor
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function openCarouseltemsModal(aLoadStrategy) {
|
||||
loadStrategy = aLoadStrategy;
|
||||
function openRelatedItemsModal() {
|
||||
isModalOpen = true;
|
||||
setAttributes( {
|
||||
isModalOpen: isModalOpen,
|
||||
loadStrategy: loadStrategy
|
||||
isModalOpen: isModalOpen
|
||||
} );
|
||||
}
|
||||
|
||||
function removeItemOfId(itemId) {
|
||||
|
||||
let existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
|
||||
if (existingItemIndex >= 0)
|
||||
items.splice(existingItemIndex, 1);
|
||||
|
||||
let existingSelectedItemIndex = selectedItems.findIndex((existingSelectedItem) => existingSelectedItem == itemId);
|
||||
if (existingSelectedItemIndex >= 0)
|
||||
selectedItems.splice(existingSelectedItemIndex, 1);
|
||||
|
||||
setAttributes({
|
||||
selectedItems: selectedItems,
|
||||
items: items,
|
||||
content: <div></div>
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
|
@ -363,9 +125,9 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
: (
|
||||
<div className={className}>
|
||||
|
||||
{ items.length ?
|
||||
{ relatedItems.length ?
|
||||
<BlockControls>
|
||||
{ loadStrategy != 'search' ?
|
||||
{
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __('Add more items', 'tainacan'),
|
||||
icon: <svg
|
||||
|
|
@ -375,207 +137,14 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
width="24px">
|
||||
<path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
|
||||
</svg>,
|
||||
onClick: openCarouseltemsModal,
|
||||
onClickParams: 'selection'
|
||||
})
|
||||
:
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __('Configure a search', 'tainacan'),
|
||||
icon: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
height="24px"
|
||||
width="24px">
|
||||
<path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
|
||||
</svg>,
|
||||
onClick: openCarouseltemsModal,
|
||||
onClickParams: 'search'
|
||||
onClick: openRelatedItemsModal
|
||||
})
|
||||
}
|
||||
</BlockControls>
|
||||
: null }
|
||||
<div>
|
||||
<InspectorControls>
|
||||
|
||||
<PanelBody
|
||||
title={__('Collection header', 'tainacan')}
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ToggleControl
|
||||
label={__('Display header', 'tainacan')}
|
||||
help={ !showCollectionHeader ? __('Toggle to show collection header', 'tainacan') : __('Do not show collection header', 'tainacan')}
|
||||
checked={ showCollectionHeader }
|
||||
onChange={ ( isChecked ) => {
|
||||
showCollectionHeader = isChecked;
|
||||
if (isChecked) fetchCollectionForHeader();
|
||||
setAttributes({ showCollectionHeader: showCollectionHeader });
|
||||
}
|
||||
}
|
||||
/>
|
||||
{ showCollectionHeader ?
|
||||
<div style={{ margin: '6px' }}>
|
||||
|
||||
<ToggleControl
|
||||
label={__('Display "Collection" label', 'tainacan')}
|
||||
help={ !showCollectionLabel ? __('Toggle to show "Collection" label above header', 'tainacan') : __('Do not show "Collection" label', 'tainacan')}
|
||||
checked={ showCollectionLabel }
|
||||
onChange={ ( isChecked ) => {
|
||||
showCollectionLabel = isChecked;
|
||||
setAttributes({ showCollectionLabel: showCollectionLabel });
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
<BaseControl
|
||||
id="colorpicker"
|
||||
label={ __('Background color', 'tainacan')}>
|
||||
<ColorPicker
|
||||
color={ collectionBackgroundColor }
|
||||
onChangeComplete={ ( value ) => {
|
||||
collectionBackgroundColor = value.hex;
|
||||
setAttributes({ collectionBackgroundColor: collectionBackgroundColor })
|
||||
}}
|
||||
disableAlpha
|
||||
/>
|
||||
</BaseControl>
|
||||
|
||||
<BaseControl
|
||||
id="colorpallete"
|
||||
label={ __('Collection name color', 'tainacan')}>
|
||||
<ColorPalette
|
||||
colors={ [{ name: __('Black', 'tainacan'), color: '#000000'}, { name: __('White', 'tainacan'), color: '#ffffff'} ] }
|
||||
value={ collectionTextColor }
|
||||
onChange={ ( color ) => {
|
||||
collectionTextColor = color;
|
||||
setAttributes({ collectionTextColor: collectionTextColor })
|
||||
}}
|
||||
/>
|
||||
</BaseControl>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</PanelBody>
|
||||
|
||||
<PanelBody
|
||||
title={__('Carousel', 'tainacan')}
|
||||
initialOpen={ true }
|
||||
>
|
||||
<div>
|
||||
<RangeControl
|
||||
label={ __('Maximum items per slide on a wide screen', 'tainacan') }
|
||||
help={ maxItemsPerScreen <= 4 ? __('Warning: with such a small number of items per slide, the image size is greater, thus the cropped version of the thumbnail won\'t be used.', 'tainacan') : null }
|
||||
value={ maxItemsPerScreen ? maxItemsPerScreen : 7 }
|
||||
onChange={ ( aMaxItemsPerScreen ) => {
|
||||
maxItemsPerScreen = aMaxItemsPerScreen;
|
||||
setAttributes( { maxItemsPerScreen: aMaxItemsPerScreen } );
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 9 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare && maxItemsPerScreen > 4 ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare && maxItemsPerScreen > 4 }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Hide title', 'tainacan')}
|
||||
help={ !hideTitle ? __('Toggle to hide item\'s title', 'tainacan') : __('Do not hide item\'s title', 'tainacan')}
|
||||
checked={ hideTitle }
|
||||
onChange={ ( isChecked ) => {
|
||||
hideTitle = isChecked;
|
||||
setAttributes({ hideTitle: hideTitle });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Loop slides', 'tainacan')}
|
||||
help={ !loopSlides ? __('Toggle to make slides loop from first to last', 'tainacan') : __('Do not loop slides from first to last', 'tainacan')}
|
||||
checked={ loopSlides }
|
||||
onChange={ ( isChecked ) => {
|
||||
loopSlides = isChecked;
|
||||
setAttributes({ loopSlides: loopSlides });
|
||||
}
|
||||
}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Auto play', 'tainacan')}
|
||||
help={ !autoPlay ? __('Toggle to automatically slide to the next item', 'tainacan') : __('Do not automatically slide to the next item', 'tainacan')}
|
||||
checked={ autoPlay }
|
||||
onChange={ ( isChecked ) => {
|
||||
autoPlay = isChecked;
|
||||
setAttributes({ autoPlay: autoPlay });
|
||||
}
|
||||
}
|
||||
/>
|
||||
{
|
||||
autoPlay ?
|
||||
<RangeControl
|
||||
label={__('Seconds before sliding to the next', 'tainacan')}
|
||||
value={ autoPlaySpeed }
|
||||
onChange={ ( aAutoPlaySpeed ) => {
|
||||
autoPlaySpeed = aAutoPlaySpeed;
|
||||
setAttributes( { autoPlaySpeed: aAutoPlaySpeed } )
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 5 }
|
||||
/>
|
||||
: null
|
||||
}
|
||||
<SelectControl
|
||||
label={__('Arrows', 'tainacan')}
|
||||
value={ arrowsPosition }
|
||||
options={ [
|
||||
{ label: __('Around', 'tainacan'), value: 'around' },
|
||||
{ label: __('Left', 'tainacan'), value: 'left' },
|
||||
{ label: __('Right', 'tainacan'), value: 'right' }
|
||||
] }
|
||||
onChange={ ( aPosition ) => {
|
||||
arrowsPosition = aPosition;
|
||||
|
||||
setAttributes({ arrowsPosition: arrowsPosition });
|
||||
}}/>
|
||||
<ToggleControl
|
||||
label={__('Large arrows', 'tainacan')}
|
||||
help={ !largeArrows ? __('Toggle to display arrows bigger than the default size.', 'tainacan') : __('Do not show arrows bigger than the default size.', 'tainacan')}
|
||||
checked={ largeArrows }
|
||||
onChange={ ( isChecked ) => {
|
||||
largeArrows = isChecked;
|
||||
setAttributes({ largeArrows: largeArrows });
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
|
||||
{ loadStrategy == 'search' ?
|
||||
<PanelBody
|
||||
title={__('Item\'s Search', 'tainacan')}
|
||||
initialOpen={ true }
|
||||
>
|
||||
<div>
|
||||
<RangeControl
|
||||
label={__('Maximum number of items to load', 'tainacan')}
|
||||
value={ maxItemsNumber }
|
||||
onChange={ ( aMaxItemsNumber ) => {
|
||||
maxItemsNumber = aMaxItemsNumber;
|
||||
setAttributes( { maxItemsNumber: aMaxItemsNumber } )
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 96 }
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
:null
|
||||
}
|
||||
SAY WHAAT
|
||||
</InspectorControls>
|
||||
</div>
|
||||
|
||||
|
|
@ -584,37 +153,25 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
<div>
|
||||
{ isModalOpen ?
|
||||
<CarouselRelatedItemsModal
|
||||
loadStrategy={ loadStrategy }
|
||||
existingCollectionId={ collectionId }
|
||||
existingSearchURL={ loadStrategy == 'search' ? searchURL : false }
|
||||
existingItemId={ itemId }
|
||||
onSelectCollection={ (selectedCollectionId) => {
|
||||
if (collectionId != selectedCollectionId) {
|
||||
items = [];
|
||||
selectedItems = [];
|
||||
}
|
||||
if (collectionId != selectedCollectionId)
|
||||
relatedItems = [];
|
||||
|
||||
collectionId = selectedCollectionId;
|
||||
setAttributes({
|
||||
collectionId: collectionId,
|
||||
items: items,
|
||||
selectedItems: selectedItems
|
||||
relatedItems: relatedItems
|
||||
});
|
||||
}}
|
||||
onApplySearchURL={ (aSearchURL) => {
|
||||
searchURL = aSearchURL;
|
||||
loadStrategy = 'search';
|
||||
onApplyRelatedItem={ (selectedItemId) => {
|
||||
if (itemId != selectedItemId)
|
||||
relatedItems = [];
|
||||
|
||||
itemId = selectedItemId;
|
||||
setAttributes({
|
||||
searchURL: searchURL,
|
||||
loadStrategy: loadStrategy,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onApplySelectedItems={ (aSelectionOfItems) => {
|
||||
selectedItems = selectedItems.concat(aSelectionOfItems);
|
||||
loadStrategy = 'selection';
|
||||
setAttributes({
|
||||
selectedItems: selectedItems,
|
||||
loadStrategy: loadStrategy,
|
||||
itemId: itemId,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
|
|
@ -627,57 +184,7 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
showCollectionHeader ?
|
||||
|
||||
<div> {
|
||||
isLoadingCollection ?
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
</div>
|
||||
:
|
||||
<a
|
||||
href={ collection.url ? collection.url : '' }
|
||||
target="_blank"
|
||||
class="carousel-items-collection-header">
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1rem' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}}
|
||||
className={
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
}>
|
||||
<h3 style={{ color: collectionTextColor ? collectionTextColor : '' }}>
|
||||
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }<br/></span> : null }
|
||||
{ collection && collection.name ? collection.name : '' }
|
||||
</h3>
|
||||
</div>
|
||||
{
|
||||
collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ?
|
||||
<div
|
||||
class="collection-thumbnail"
|
||||
style={{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}}/>
|
||||
: null
|
||||
}
|
||||
<div
|
||||
class="collection-header-image"
|
||||
style={{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}}/>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
{ !items.length && !isLoading ? (
|
||||
{ !relatedItems.length && !isLoading ? (
|
||||
<Placeholder
|
||||
className="tainacan-block-placeholder"
|
||||
icon={(
|
||||
|
|
@ -699,16 +206,9 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openCarouseltemsModal('selection') }>
|
||||
onClick={ () => openRelatedItemsModal() }>
|
||||
{__('Select Items', 'tainacan')}
|
||||
</Button>
|
||||
<p style={{ margin: '0 12px' }}>{__('or', 'tainacan')}</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openCarouseltemsModal('search') }>
|
||||
{__('Configure a search', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
|
@ -718,106 +218,33 @@ registerBlockType('tainacan/carousel-related-items', {
|
|||
<Spinner />
|
||||
</div> :
|
||||
<div>
|
||||
{ isSelected && items.length ?
|
||||
<div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
|
||||
: null
|
||||
}
|
||||
{ items.length ? (
|
||||
{ relatedItems.length ? (
|
||||
|
||||
<div
|
||||
className={'items-list-edit-container ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
slot="button-prev"
|
||||
style={{ cursor: 'not-allowed' }}>
|
||||
<svg
|
||||
width={ largeArrows ? 60 : 42 }
|
||||
height={ largeArrows ? 60 : 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>
|
||||
<ul
|
||||
style={{
|
||||
marginTop: showCollectionHeader ? '1.5rem' : '0px'
|
||||
}}
|
||||
className={ 'items-list-edit' }>
|
||||
{ items }
|
||||
</ul>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
slot="button-next"
|
||||
style={{ cursor: 'not-allowed' }}>
|
||||
<svg
|
||||
width={ largeArrows ? 60 : 42 }
|
||||
height={ largeArrows ? 60 : 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 className={ 'carousel-related-items-edit-container' }>
|
||||
<InnerBlocks
|
||||
allowedBlocks={[
|
||||
'core/heading',
|
||||
'core/paragraph',
|
||||
'tainacan/carousel-items-list',
|
||||
'core/buttons'
|
||||
]}
|
||||
template={[
|
||||
[ 'core/heading', { placeholder: 'Book Title' } ],
|
||||
[ 'core/paragraph', { placeholder: 'Summary' } ],
|
||||
[ 'tainacan/carousel-items-list', { content: [{ type: 'innerblock' }], relatedItems: ['131051', '131516', '131228', '131517'], loadStrategy: 'selection', collectionId: '130957' } ],
|
||||
[ 'core/buttons', {} ]
|
||||
]} />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
searchURL,
|
||||
selectedItems,
|
||||
arrowsPosition,
|
||||
largeArrows,
|
||||
loadStrategy,
|
||||
maxItemsNumber,
|
||||
maxItemsPerScreen,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideTitle,
|
||||
cropImagesToSquare,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor
|
||||
} = attributes;
|
||||
|
||||
return <div
|
||||
className={ className }
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
arrows-position={ arrowsPosition }
|
||||
load-strategy={ loadStrategy }
|
||||
collection-id={ collectionId }
|
||||
auto-play={ '' + autoPlay }
|
||||
auto-play-speed={ autoPlaySpeed }
|
||||
loop-slides={ '' + loopSlides }
|
||||
hide-title={ '' + hideTitle }
|
||||
large-arrows={ '' + largeArrows }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
max-items-number={ maxItemsNumber }
|
||||
max-items-per-screen={ maxItemsPerScreen }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
save({ className }){
|
||||
return <div className={ className }><InnerBlocks.Content /></div>
|
||||
},
|
||||
deprecated: DeprecatedBlocks
|
||||
});
|
||||
|
|
@ -30,7 +30,6 @@ module.exports = {
|
|||
block_carousel_collections_list_theme: './src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.js',
|
||||
|
||||
block_carousel_related_items: './src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js',
|
||||
block_carousel_related_items_theme: './src/views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items-theme.js',
|
||||
|
||||
block_facets_list: './src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js',
|
||||
block_facets_list_theme: './src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js',
|
||||
|
|
|
|||
Loading…
Reference in New Issue