Adds focal point adjustment option to mosaic view mode.
This commit is contained in:
Mateus Machado Luna
parent
8d6c2ce0fe
commit
4322476bb9
|
|
@ -17,6 +17,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
mosaicHeight: 40,
|
||||
mosaicGridRows: 3,
|
||||
mosaicGridColumns: 3,
|
||||
mosaicItemFocalPointX : 0.5,
|
||||
mosaicItemFocalPointY : 0.5,
|
||||
order: 'asc',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
|
|
@ -38,6 +40,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
mosaicHeight: this.mosaicHeight,
|
||||
mosaicGridRows: this.mosaicGridRows,
|
||||
mosaicGridColumns: this.mosaicGridColumns,
|
||||
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
|
||||
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
|
||||
searchURL: this.searchURL,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
order: this.order,
|
||||
|
|
@ -63,6 +67,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
|
||||
this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
|
||||
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
|
||||
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
|
||||
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
|
||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
|
|
|
|||
|
|
@ -237,7 +237,10 @@
|
|||
:key="index"
|
||||
v-for="(item, index) of mosaicGroup"
|
||||
class="item-list-item"
|
||||
:style="{ backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, 'medium_large')})` : 'none' }">
|
||||
:style="{
|
||||
backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, 'medium_large')})` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
|
||||
}">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
|
|
@ -294,6 +297,8 @@ export default {
|
|||
mosaicHeight: Number,
|
||||
mosaicGridRows: Number,
|
||||
mosaicGridColumns: Number,
|
||||
mosaicItemFocalPointX: Number,
|
||||
mosaicItemFocalPointY: Number,
|
||||
order: String,
|
||||
showSearchBar: Boolean,
|
||||
showCollectionHeader: Boolean,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
|
|||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const { SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
|
||||
const { FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = wp.editor;
|
||||
|
||||
|
|
@ -127,6 +127,17 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
mosaicGridRows: {
|
||||
type: Number,
|
||||
value: 3
|
||||
},
|
||||
sampleBackgroundImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
mosaicItemFocalPoint: {
|
||||
type: Object,
|
||||
default: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
|
|
@ -158,7 +169,9 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridColumns,
|
||||
mosaicGridRows
|
||||
mosaicGridRows,
|
||||
mosaicItemFocalPoint,
|
||||
sampleBackgroundImage
|
||||
} = attributes;
|
||||
|
||||
// Obtains block's client id to render it on save function
|
||||
|
|
@ -172,7 +185,8 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
style={
|
||||
{
|
||||
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||
backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, layout === 'mosaic' ? 'medium_large' : 'tainacan-medium')})` : 'none'
|
||||
backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, 'medium_large')})` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPoint.x * 100 }% ${ mosaicItemFocalPoint.y * 100 }%` : 'none'
|
||||
}
|
||||
}>
|
||||
<a
|
||||
|
|
@ -267,29 +281,41 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
// Initializes some variables
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 40;
|
||||
|
||||
if (layout !== 'mosaic') {
|
||||
// Initializes some variables
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 40;
|
||||
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') : '';
|
||||
|
||||
for (let item of response.data.items)
|
||||
items.push(prepareItem(item));
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource,
|
||||
mosaicHeight: mosaicHeight,
|
||||
mosaicGridRows: mosaicGridRows,
|
||||
mosaicGridColumns: mosaicGridColumns,
|
||||
mosaicItemFocalPoint: mosaicItemFocalPoint,
|
||||
sampleBackgroundImage: sampleBackgroundImage
|
||||
});
|
||||
|
||||
} else {
|
||||
const mosaicGroups = mosaicPartition(response.data.items, 5);
|
||||
for (let mosaicGroup of mosaicGroups)
|
||||
items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
|
||||
}
|
||||
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource,
|
||||
mosaicHeight: mosaicHeight,
|
||||
mosaicGridRows: mosaicGridRows,
|
||||
mosaicGridColumns: mosaicGridColumns
|
||||
});
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
items: items,
|
||||
isLoading: false,
|
||||
itemsRequestSource: itemsRequestSource
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -376,6 +402,14 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
}
|
||||
}
|
||||
|
||||
function updateMosaicItemFocalPoint(focalPoint) {
|
||||
if (Math.abs(focalPoint.x - mosaicItemFocalPoint.x) > 0.025 || Math.abs(focalPoint.y - mosaicItemFocalPoint.y) > 0.025) {
|
||||
mosaicItemFocalPoint = focalPoint;
|
||||
setAttributes({ mosaicItemFocalPoint: focalPoint });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
|
||||
function mosaicPartition(items, size) {
|
||||
const partition = _.groupBy(items, (item, i) => {
|
||||
if (i % 2 == 0)
|
||||
|
|
@ -605,6 +639,18 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
setContent();
|
||||
}}/>
|
||||
</div>
|
||||
<div>
|
||||
<FocalPointPicker
|
||||
label={ __('Mosaic item focal point for background image', 'tainacan') }
|
||||
url={ sampleBackgroundImage }
|
||||
dimensions={ {
|
||||
width: 400,
|
||||
height: 400
|
||||
} }
|
||||
value={ mosaicItemFocalPoint }
|
||||
onChange={ ( focalPoint ) =>_.debounce( updateMosaicItemFocalPoint(focalPoint), 700) }
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
: null}
|
||||
</InspectorControls>
|
||||
|
|
@ -868,7 +914,8 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint
|
||||
} = attributes;
|
||||
|
||||
return <div
|
||||
|
|
@ -883,7 +930,9 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
layout={ layout }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ mosaicItemFocalPoint.x }
|
||||
mosaic-item-focal-point-y={ mosaicItemFocalPoint.y }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
|
|
|
|||
Loading…
Reference in New Issue