Theme side new features of the dynamic search bar. #592
This commit is contained in:
mateuswetah
parent
8b37b75254
commit
ed7ae36423
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
|
||||
<span>{ item.id ? item.id : '' }</span>
|
||||
<span>{ item.title ? item.title : '' }</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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