Mateus Machado Luna
GitHub
commit
e9e3b5e5b8
|
|
@ -191,7 +191,8 @@
|
|||
box-shadow: none; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
|
||||
display: flex;
|
||||
align-items: flex-start; }
|
||||
align-items: flex-start;
|
||||
position: relative; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
|
||||
position: absolute !important;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -47,7 +47,8 @@ export default class CarouselItemsModal extends React.Component {
|
|||
if (this.props.existingCollectionId) {
|
||||
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: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish')
|
||||
});
|
||||
} else {
|
||||
this.setState({ collectionPage: 1 });
|
||||
this.fetchModalCollections();
|
||||
|
|
@ -4,7 +4,7 @@ const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder
|
|||
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import CarouselItemsModal from './carousel-items-modal.js';
|
||||
import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
import qs from 'qs';
|
||||
|
|
|
|||
|
|
@ -78,9 +78,6 @@
|
|||
: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>
|
||||
|
|
@ -227,7 +224,6 @@ export default {
|
|||
paged: undefined,
|
||||
totalItems: 0,
|
||||
swiperOptions: {
|
||||
lazy: this.maxItemsPerScreen <= 4,
|
||||
watchOverflow: true,
|
||||
mousewheel: true,
|
||||
observer: true,
|
||||
|
|
|
|||
|
|
@ -85,6 +85,14 @@
|
|||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
|
|
|
|||
|
|
@ -1,4 +1,206 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated when new selection strategy was added */
|
||||
{
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "Array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "Number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "Number",
|
||||
"value": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "Object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "Number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "Number",
|
||||
"default": 4
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"align": ["full", "wide"],
|
||||
"html": false,
|
||||
"typography": {
|
||||
"fontSize": true
|
||||
},
|
||||
"color": {
|
||||
"text": true,
|
||||
"background": false,
|
||||
"gradients": false,
|
||||
"link": true
|
||||
}
|
||||
},
|
||||
save: function({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
layout={ layout }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.18.4, due to the new block.json strategy */
|
||||
{
|
||||
attributes: {
|
||||
|
|
|
|||
|
|
@ -1,293 +0,0 @@
|
|||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components;
|
||||
|
||||
export default class DynamicItemsModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
// Initialize state
|
||||
this.state = {
|
||||
collectionsPerPage: 24,
|
||||
collectionId: undefined,
|
||||
collectionName: '',
|
||||
isLoadingCollections: false,
|
||||
modalCollections: [],
|
||||
totalModalCollections: 0,
|
||||
collectionPage: 1,
|
||||
temporaryCollectionId: '',
|
||||
searchCollectionName: '',
|
||||
collections: [],
|
||||
collectionsRequestSource: undefined,
|
||||
searchURL: '',
|
||||
};
|
||||
|
||||
// Bind events
|
||||
this.resetCollections = this.resetCollections.bind(this);
|
||||
this.selectCollection = this.selectCollection.bind(this);
|
||||
this.fetchCollections = this.fetchCollections.bind(this);
|
||||
this.fetchModalCollections = this.fetchModalCollections.bind(this);
|
||||
this.fetchCollection = this.fetchCollection.bind(this);
|
||||
this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
this.setState({
|
||||
collectionId: this.props.existingCollectionId
|
||||
});
|
||||
|
||||
if (this.props.existingCollectionId) {
|
||||
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 + '/items/?readmode=true&iframemode=true&status=publish' });
|
||||
} else {
|
||||
this.setState({ collectionPage: 1 });
|
||||
this.fetchModalCollections();
|
||||
}
|
||||
}
|
||||
|
||||
// COLLECTIONS RELATED --------------------------------------------------
|
||||
fetchModalCollections() {
|
||||
|
||||
let someModalCollections = this.state.modalCollections;
|
||||
if (this.state.collectionPage <= 1)
|
||||
someModalCollections = [];
|
||||
|
||||
let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
|
||||
|
||||
this.setState({
|
||||
isLoadingCollections: true,
|
||||
collectionPage: this.state.collectionPage + 1,
|
||||
modalCollections: someModalCollections
|
||||
});
|
||||
|
||||
tainacan.get(endpoint)
|
||||
.then(response => {
|
||||
|
||||
let otherModalCollections = this.state.modalCollections;
|
||||
for (let collection of response.data) {
|
||||
otherModalCollections.push({
|
||||
name: collection.name,
|
||||
id: collection.id
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isLoadingCollections: false,
|
||||
modalCollections: otherModalCollections,
|
||||
totalModalCollections: response.headers['x-wp-total']
|
||||
});
|
||||
|
||||
return otherModalCollections;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch collections: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchCollection(collectionId) {
|
||||
tainacan.get('/collections/' + collectionId)
|
||||
.then((response) => {
|
||||
this.setState({ collectionName: response.data.name });
|
||||
}).catch(error => {
|
||||
console.log('Error trying to fetch collection: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
selectCollection(selectedCollectionId) {
|
||||
this.setState({
|
||||
collectionId: selectedCollectionId,
|
||||
searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true&status=publish'
|
||||
});
|
||||
|
||||
this.props.onSelectCollection(selectedCollectionId);
|
||||
this.fetchCollection(selectedCollectionId);
|
||||
}
|
||||
|
||||
fetchCollections(name) {
|
||||
|
||||
if (this.state.collectionsRequestSource != undefined)
|
||||
this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
|
||||
|
||||
let aCollectionRequestSource = axios.CancelToken.source();
|
||||
|
||||
this.setState({
|
||||
collectionsRequestSource: aCollectionRequestSource,
|
||||
isLoadingCollections: true,
|
||||
collections: [],
|
||||
items: []
|
||||
});
|
||||
|
||||
let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage;
|
||||
if (name != undefined && name != '')
|
||||
endpoint += '&search=' + name;
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
|
||||
.then(response => {
|
||||
let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
|
||||
|
||||
this.setState({
|
||||
isLoadingCollections: false,
|
||||
collections: someCollections
|
||||
});
|
||||
|
||||
return someCollections;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error trying to fetch collections: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
applySelectedSearchURL() {
|
||||
this.props.onApplySearchURL(document.getElementById("itemsFrame").contentWindow.location.href);
|
||||
}
|
||||
|
||||
resetCollections() {
|
||||
|
||||
this.setState({
|
||||
collectionId: null,
|
||||
collectionPage: 1,
|
||||
modalCollections: []
|
||||
});
|
||||
this.fetchModalCollections();
|
||||
}
|
||||
|
||||
cancelSelection() {
|
||||
|
||||
this.setState({
|
||||
modalCollections: []
|
||||
});
|
||||
|
||||
this.props.onCancelSelection();
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.state.collectionId ? (
|
||||
// Items modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal dynamic-modal"
|
||||
title={__('Configure the items search to be used on block', 'tainacan')}
|
||||
onRequestClose={ () => this.cancelSelection() }
|
||||
shouldCloseOnClickOutside={ false }
|
||||
contentLabel={__('Configure your items search to be shown on block', 'tainacan')}>
|
||||
<iframe
|
||||
id="itemsFrame"
|
||||
src={ this.state.searchURL } />
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isSecondary
|
||||
onClick={ () => { this.resetCollections() }}>
|
||||
{__('Switch collection', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={ () => this.applySelectedSearchURL() }>
|
||||
{__('Use this search', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
// Collections modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal"
|
||||
title={__('Select a collection to fetch items from', 'tainacan')}
|
||||
onRequestClose={ () => this.cancelSelection() }
|
||||
shouldCloseOnClickOutside={ false }
|
||||
contentLabel={__('Select items', 'tainacan')}>
|
||||
<div>
|
||||
<div className="modal-search-area">
|
||||
<TextControl
|
||||
label={__('Search for a collection', 'tainacan')}
|
||||
value={ this.state.searchCollectionName }
|
||||
onChange={(value) => {
|
||||
this.setState({
|
||||
searchCollectionName: value
|
||||
});
|
||||
_.debounce(this.fetchCollections(value), 300);
|
||||
}}/>
|
||||
</div>
|
||||
{(
|
||||
this.state.searchCollectionName != '' ? (
|
||||
this.state.collections.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<div className="modal-radio-list">
|
||||
{
|
||||
<RadioControl
|
||||
selected={ this.state.temporaryCollectionId }
|
||||
options={
|
||||
this.state.collections.map((collection) => {
|
||||
return { label: collection.name, value: '' + collection.id }
|
||||
})
|
||||
}
|
||||
onChange={ ( aCollectionId ) => {
|
||||
this.setState({ temporaryCollectionId: aCollectionId });
|
||||
} } />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) :
|
||||
this.state.isLoadingCollections ? (
|
||||
<Spinner />
|
||||
) :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
|
||||
</div>
|
||||
):
|
||||
this.state.modalCollections.length > 0 ?
|
||||
(
|
||||
<div>
|
||||
<div className="modal-radio-list">
|
||||
{
|
||||
<RadioControl
|
||||
selected={ this.state.temporaryCollectionId }
|
||||
options={
|
||||
this.state.modalCollections.map((collection) => {
|
||||
return { label: collection.name, value: '' + collection.id }
|
||||
})
|
||||
}
|
||||
onChange={ ( aCollectionId ) => {
|
||||
this.setState({ temporaryCollectionId: aCollectionId });
|
||||
} } />
|
||||
}
|
||||
</div>
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
|
||||
{
|
||||
this.state.modalCollections.length < this.state.totalModalCollections ? (
|
||||
<Button
|
||||
isSecondary
|
||||
isSmall
|
||||
onClick={ () => this.fetchModalCollections() }>
|
||||
{__('Load more', 'tainacan')}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
) : this.state.isLoadingCollections ? <Spinner/> :
|
||||
<div className="modal-loadmore-section">
|
||||
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isSecondary
|
||||
onClick={ () => { this.cancelSelection() }}>
|
||||
{__('Cancel', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
|
||||
onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }>
|
||||
{__('Configure search', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Bu
|
|||
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import DynamicItemsModal from './dynamic-items-modal.js';
|
||||
import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
import qs from 'qs';
|
||||
|
|
@ -16,7 +16,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
items,
|
||||
content,
|
||||
collection,
|
||||
collectionId,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
|
|
@ -27,7 +27,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
maxItemsNumber,
|
||||
order,
|
||||
searchString,
|
||||
selectedItems,
|
||||
isLoading,
|
||||
loadStrategy,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
|
|
@ -49,6 +51,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
|
||||
// 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 (maxColumnsCount === undefined) {
|
||||
|
|
@ -59,8 +62,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
}
|
||||
|
||||
const thumbHelper = ThumbnailHelperFunctions();
|
||||
if (loadStrategy === undefined) {
|
||||
loadStrategy = 'search';
|
||||
setAttributes({ loadStrategy: loadStrategy });
|
||||
}
|
||||
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
|
|
@ -71,15 +76,26 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
backgroundImage: layout == 'mosaic' ? `url(${ thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype']) })` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) * 100 }% ${ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) * 100 }%` : 'none'
|
||||
}}
|
||||
>
|
||||
>
|
||||
{ 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 }
|
||||
onClick={ (event) => event.preventDefault() }
|
||||
target="_blank"
|
||||
style={ {
|
||||
|
||||
} }
|
||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||
<img
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
|
|
@ -110,69 +126,69 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
)
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
function setContent() {
|
||||
isLoading = true;
|
||||
|
||||
if (searchURL) {
|
||||
setAttributes({
|
||||
isLoading: isLoading
|
||||
});
|
||||
|
||||
items = [];
|
||||
isLoading = true;
|
||||
items = [];
|
||||
|
||||
if (loadStrategy == 'parent') {
|
||||
|
||||
if (layout !== 'mosaic') {
|
||||
|
||||
for (let item of selectedItems)
|
||||
items.push(prepareItem(item));
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false
|
||||
});
|
||||
|
||||
} else {
|
||||
// Initializes some variables
|
||||
mosaicDensity = mosaicDensity ? mosaicDensity : 5;
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 280;
|
||||
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
|
||||
sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
|
||||
|
||||
const mosaicGroups = mosaicPartition(response.data.items);
|
||||
for (let mosaicGroup of mosaicGroups)
|
||||
items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource,
|
||||
mosaicDensity: mosaicDensity,
|
||||
mosaicHeight: mosaicHeight,
|
||||
mosaicGridRows: mosaicGridRows,
|
||||
mosaicGridColumns: mosaicGridColumns,
|
||||
mosaicItemFocalPoint: mosaicItemFocalPoint,
|
||||
sampleBackgroundImage: sampleBackgroundImage
|
||||
});
|
||||
}
|
||||
|
||||
} else if (loadStrategy == 'selection') {
|
||||
|
||||
if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
|
||||
itemsRequestSource.cancel('Previous items search canceled.');
|
||||
|
||||
itemsRequestSource = axios.CancelToken.source();
|
||||
|
||||
setAttributes({
|
||||
isLoading: isLoading
|
||||
});
|
||||
|
||||
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 });
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (order != '' && showSearchBar)
|
||||
queryObject.order = order;
|
||||
else if (queryObject.order != '')
|
||||
setAttributes({ order: queryObject.order });
|
||||
else {
|
||||
queryObject.order = 'asc';
|
||||
setAttributes({ order: 'asc' });
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (searchString != undefined)
|
||||
queryObject.search = searchString;
|
||||
else if (queryObject.search != undefined)
|
||||
setAttributes({ searchString: queryObject.search });
|
||||
else {
|
||||
delete queryObject.search;
|
||||
setAttributes({ searchString: undefined });
|
||||
}
|
||||
|
||||
// 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';
|
||||
let endpoint = '/collection/' + collectionId + '/items?'+ qs.stringify({ postin: selectedItems, perpage: selectedItems.length }) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
|
||||
if (layout !== 'mosaic') {
|
||||
|
||||
|
||||
for (let item of response.data.items)
|
||||
items.push(prepareItem(item));
|
||||
|
||||
|
|
@ -209,7 +225,102 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
sampleBackgroundImage: sampleBackgroundImage
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
} else {
|
||||
|
||||
if (searchURL) {
|
||||
|
||||
if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
|
||||
itemsRequestSource.cancel('Previous items search canceled.');
|
||||
|
||||
itemsRequestSource = axios.CancelToken.source();
|
||||
|
||||
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 });
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (order != '' && showSearchBar)
|
||||
queryObject.order = order;
|
||||
else if (queryObject.order != '')
|
||||
setAttributes({ order: queryObject.order });
|
||||
else {
|
||||
queryObject.order = 'asc';
|
||||
setAttributes({ order: 'asc' });
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (searchString != undefined)
|
||||
queryObject.search = searchString;
|
||||
else if (queryObject.search != undefined)
|
||||
setAttributes({ searchString: queryObject.search });
|
||||
else {
|
||||
delete queryObject.search;
|
||||
setAttributes({ searchString: undefined });
|
||||
}
|
||||
|
||||
// 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 => {
|
||||
|
||||
if (layout !== 'mosaic') {
|
||||
|
||||
for (let item of response.data.items)
|
||||
items.push(prepareItem(item));
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource
|
||||
});
|
||||
|
||||
} else {
|
||||
// Initializes some variables
|
||||
mosaicDensity = mosaicDensity ? mosaicDensity : 5;
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 280;
|
||||
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
|
||||
sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
|
||||
|
||||
const mosaicGroups = mosaicPartition(response.data.items);
|
||||
for (let mosaicGroup of mosaicGroups)
|
||||
items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource,
|
||||
mosaicDensity: mosaicDensity,
|
||||
mosaicHeight: mosaicHeight,
|
||||
mosaicGridRows: mosaicGridRows,
|
||||
mosaicGridColumns: mosaicGridColumns,
|
||||
mosaicItemFocalPoint: mosaicItemFocalPoint,
|
||||
sampleBackgroundImage: sampleBackgroundImage
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,13 +372,46 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
)
|
||||
}
|
||||
|
||||
function openDynamicItemsModal() {
|
||||
function openDynamicItemsModal(aLoadStrategy) {
|
||||
loadStrategy = aLoadStrategy;
|
||||
isModalOpen = true;
|
||||
setAttributes( {
|
||||
isModalOpen: isModalOpen
|
||||
isModalOpen: isModalOpen,
|
||||
loadStrategy: loadStrategy
|
||||
} );
|
||||
}
|
||||
|
||||
function removeItemOfId(itemId) {
|
||||
|
||||
let existingItemIndex = -1;
|
||||
|
||||
let existingSelectedItemIndex = selectedItems.findIndex((existingSelectedItem) => existingSelectedItem == itemId);
|
||||
if (existingSelectedItemIndex >= 0)
|
||||
selectedItems.splice(existingSelectedItemIndex, 1);
|
||||
|
||||
if (layout == 'mosaic') {
|
||||
existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
|
||||
|
||||
setAttributes({
|
||||
selectedItems: selectedItems,
|
||||
content: <div></div>
|
||||
});
|
||||
// In the case of the mosaic layout, we need to re-render as the items array is organized in groups.
|
||||
setContent();
|
||||
} else {
|
||||
existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
|
||||
|
||||
if (existingItemIndex >= 0)
|
||||
items.splice(existingItemIndex, 1);
|
||||
|
||||
setAttributes({
|
||||
selectedItems: selectedItems,
|
||||
items: items,
|
||||
content: <div></div>
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateLayout(newLayout) {
|
||||
layout = newLayout;
|
||||
|
||||
|
|
@ -355,24 +499,41 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
: (
|
||||
<div { ...blockProps }>
|
||||
|
||||
<div>
|
||||
{ items.length ?
|
||||
<BlockControls>
|
||||
{ TainacanBlocksCompatToolbar({ controls: layoutControls }) }
|
||||
{ items.length ?
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __('Configure search', 'tainacan'),
|
||||
icon: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -2 24 24"
|
||||
height="24px"
|
||||
width="24px">
|
||||
<path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
|
||||
</svg>,
|
||||
onClick: openDynamicItemsModal
|
||||
})
|
||||
: null }
|
||||
{ loadStrategy != 'parent' ?
|
||||
(
|
||||
loadStrategy == 'selection' ?
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __('Add more items', 'tainacan'),
|
||||
icon: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -2 24 24"
|
||||
height="24px"
|
||||
width="24px">
|
||||
<path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
|
||||
</svg>,
|
||||
onClick: openDynamicItemsModal,
|
||||
onClickParams: 'selection'
|
||||
})
|
||||
:
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __('Configure a search', 'tainacan'),
|
||||
icon: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -2 24 24"
|
||||
height="24px"
|
||||
width="24px">
|
||||
<path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
|
||||
</svg>,
|
||||
onClick: openDynamicItemsModal,
|
||||
onClickParams: 'search'
|
||||
})
|
||||
) : null
|
||||
}
|
||||
</BlockControls>
|
||||
</div>
|
||||
: null }
|
||||
|
||||
<div>
|
||||
<InspectorControls>
|
||||
|
|
@ -435,39 +596,43 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
: null
|
||||
}
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={__('Search bar', 'tainacan')}
|
||||
initialOpen={ true }
|
||||
>
|
||||
<ToggleControl
|
||||
label={__('Display bar', 'tainacan')}
|
||||
help={ showSearchBar ? __('Toggle to show search bar on block', 'tainacan') : __('Do not show search bar', 'tainacan')}
|
||||
checked={ showSearchBar }
|
||||
onChange={ ( isChecked ) => {
|
||||
showSearchBar = isChecked;
|
||||
setAttributes({ showSearchBar: showSearchBar });
|
||||
}
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
{ loadStrategy == 'search' ?
|
||||
<PanelBody
|
||||
title={__('Search bar', 'tainacan')}
|
||||
initialOpen={ true }
|
||||
>
|
||||
<ToggleControl
|
||||
label={__('Display bar', 'tainacan')}
|
||||
help={ showSearchBar ? __('Toggle to show search bar on block', 'tainacan') : __('Do not show search bar', 'tainacan')}
|
||||
checked={ showSearchBar }
|
||||
onChange={ ( isChecked ) => {
|
||||
showSearchBar = isChecked;
|
||||
setAttributes({ showSearchBar: showSearchBar });
|
||||
}
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
: null }
|
||||
<PanelBody
|
||||
title={__('Items', 'tainacan')}
|
||||
initialOpen={ true }
|
||||
>
|
||||
<div>
|
||||
<RangeControl
|
||||
label={__('Maximum number of items', 'tainacan')}
|
||||
value={ maxItemsNumber ? maxItemsNumber : 12 }
|
||||
onChange={ ( aMaxItemsNumber ) => {
|
||||
maxItemsNumber = aMaxItemsNumber;
|
||||
setAttributes( { maxItemsNumber: aMaxItemsNumber } )
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 96 }
|
||||
/>
|
||||
{ loadStrategy == 'search' ?
|
||||
<div>
|
||||
<RangeControl
|
||||
label={__('Maximum number of items', 'tainacan')}
|
||||
value={ maxItemsNumber ? maxItemsNumber : 12 }
|
||||
onChange={ ( aMaxItemsNumber ) => {
|
||||
maxItemsNumber = aMaxItemsNumber;
|
||||
setAttributes( { maxItemsNumber: aMaxItemsNumber } )
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 96 }
|
||||
/>
|
||||
<hr></hr>
|
||||
</div>
|
||||
<hr></hr>
|
||||
: null }
|
||||
<div>
|
||||
{ layout == 'list' ?
|
||||
<div style={{ marginTop: '16px'}}>
|
||||
|
|
@ -594,6 +759,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
{ label: '4 x 3', value: '4x3' },
|
||||
{ label: '4 x 5', value: '4x5' },
|
||||
{ label: '5 x 4', value: '5x4' },
|
||||
{ label: '6 x 5', value: '6x5' },
|
||||
] }
|
||||
onChange={ ( aGrid ) => {
|
||||
mosaicGridRows = aGrid.split('x')[0];
|
||||
|
|
@ -628,21 +794,41 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
<div>
|
||||
{ isModalOpen ?
|
||||
<DynamicItemsModal
|
||||
loadStrategy={ loadStrategy }
|
||||
existingCollectionId={ collectionId }
|
||||
existingSearchURL={ searchURL }
|
||||
onSelectCollection={ (selectedCollectionId) => {
|
||||
if (collectionId != selectedCollectionId) {
|
||||
items = [];
|
||||
selectedItems = [];
|
||||
}
|
||||
collectionId = selectedCollectionId;
|
||||
setAttributes({ collectionId: collectionId });
|
||||
setAttributes({
|
||||
collectionId: collectionId,
|
||||
items: items,
|
||||
selectedItems: selectedItems
|
||||
});
|
||||
fetchCollectionForHeader();
|
||||
}}
|
||||
onApplySearchURL={ (aSearchURL) =>{
|
||||
searchURL = aSearchURL
|
||||
searchURL = aSearchURL;
|
||||
loadStrategy = 'search';
|
||||
setAttributes({
|
||||
searchURL: searchURL,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onApplySelectedItems={ (aSelectionOfItems) => {
|
||||
selectedItems = selectedItems.concat(aSelectionOfItems);
|
||||
loadStrategy = 'selection';
|
||||
setAttributes({
|
||||
selectedItems: selectedItems,
|
||||
loadStrategy: loadStrategy,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
|
|
@ -809,12 +995,25 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
</svg>
|
||||
{__('Dynamically list items from a Tainacan items search', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openDynamicItemsModal() }>
|
||||
{__('Configure search', 'tainacan')}
|
||||
</Button>
|
||||
{
|
||||
loadStrategy != 'parent' ?
|
||||
<div>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openDynamicItemsModal('selection') }>
|
||||
{__('Select Items', 'tainacan')}
|
||||
</Button>
|
||||
<p style={{ margin: '0 12px' }}>{__('or', 'tainacan')}</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openDynamicItemsModal('search') }>
|
||||
{__('Configure a search', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -237,6 +237,7 @@
|
|||
ul.items-list-edit li.item-list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
position: absolute !important;
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@ export default (element) => {
|
|||
layout: 'grid',
|
||||
gridMargin: 0,
|
||||
searchURL: '',
|
||||
selectedItems: [],
|
||||
loadStrategy: 'search',
|
||||
maxItemsNumber: 12,
|
||||
mosaicHeight: 40,
|
||||
mosaicDensity: 5,
|
||||
|
|
@ -69,6 +71,8 @@ export default (element) => {
|
|||
maxColumnsCount: this.maxColumnsCount,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
searchURL: this.searchURL,
|
||||
selectedItems: this.selectedItems,
|
||||
loadStrategy: this.loadStrategy,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
order: this.order,
|
||||
showSearchBar: this.showSearchBar,
|
||||
|
|
@ -86,6 +90,8 @@ export default (element) => {
|
|||
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.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
|
||||
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
|
||||
|
|
|
|||
|
|
@ -290,6 +290,8 @@ export default {
|
|||
layout: String,
|
||||
gridMargin: Number,
|
||||
searchURL: String,
|
||||
selectedItems: Array,
|
||||
loadStrategy: String,
|
||||
maxItemsNumber: Number,
|
||||
mosaicDensity: Number,
|
||||
mosaicHeight: Number,
|
||||
|
|
@ -360,70 +362,98 @@ export default {
|
|||
|
||||
this.itemsRequestSource = axios.CancelToken.source();
|
||||
|
||||
let endpoint = '/collection' + this.searchURL.split('#')[1].split('/collections')[1];
|
||||
let query = endpoint.split('?')[1];
|
||||
let queryObject = qs.parse(query);
|
||||
if (this.loadStrategy == 'parent') {
|
||||
|
||||
// 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 sorting order
|
||||
if (this.localOrder != undefined)
|
||||
queryObject.order = this.localOrder;
|
||||
else if (queryObject.order != undefined)
|
||||
this.localOrder = queryObject.order;
|
||||
else {
|
||||
queryObject.order = 'asc';
|
||||
this.localOrder = 'asc';
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (this.searchString != undefined)
|
||||
queryObject.search = this.searchString;
|
||||
else if (queryObject.search != undefined)
|
||||
this.searchString = queryObject.search;
|
||||
else {
|
||||
delete queryObject.search;
|
||||
this.searchString = undefined;
|
||||
}
|
||||
|
||||
// Set up paging
|
||||
if (this.paged != undefined)
|
||||
queryObject.paged = this.paged;
|
||||
else if (queryObject.paged != undefined)
|
||||
this.paged = queryObject.paged;
|
||||
else
|
||||
this.paged = 1;
|
||||
|
||||
// emove 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);
|
||||
for (let item of this.selectedItems)
|
||||
this.items.push(item);
|
||||
|
||||
this.isLoading = false;
|
||||
this.totalItems = response.headers['x-wp-total'];
|
||||
this.totalItems = this.items.length;
|
||||
|
||||
}).catch((error) => {
|
||||
this.isLoading = false;
|
||||
if (error.response && error.response.status && error.response.status == 401)
|
||||
this.errorMessage = 'Not allowed to see these items.'
|
||||
});
|
||||
} 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';
|
||||
|
||||
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 {
|
||||
|
||||
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 sorting order
|
||||
if (this.localOrder != undefined)
|
||||
queryObject.order = this.localOrder;
|
||||
else if (queryObject.order != undefined)
|
||||
this.localOrder = queryObject.order;
|
||||
else {
|
||||
queryObject.order = 'asc';
|
||||
this.localOrder = 'asc';
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (this.searchString != undefined)
|
||||
queryObject.search = this.searchString;
|
||||
else if (queryObject.search != undefined)
|
||||
this.searchString = queryObject.search;
|
||||
else {
|
||||
delete queryObject.search;
|
||||
this.searchString = undefined;
|
||||
}
|
||||
|
||||
// Set up paging
|
||||
if (this.paged != undefined)
|
||||
queryObject.paged = this.paged;
|
||||
else if (queryObject.paged != undefined)
|
||||
this.paged = queryObject.paged;
|
||||
else
|
||||
this.paged = 1;
|
||||
|
||||
// emove 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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue