Finishes implementation of search and sorting bar inside block editor.
This commit is contained in:
Mateus Machado Luna
parent
768993845a
commit
8d9c4028e8
|
|
@ -402,8 +402,43 @@
|
|||
|
||||
.wp-block-tainacan-dynamic-items-list {
|
||||
margin: 2rem 0px; }
|
||||
.wp-block-tainacan-dynamic-items-list .components-spinner {
|
||||
margin: 1rem 50%; }
|
||||
.wp-block-tainacan-dynamic-items-list .spinner-container {
|
||||
min-height: 56px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #cbcbcb;
|
||||
padding: 1.25rem 0 0.75rem;
|
||||
margin-bottom: 1rem; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button {
|
||||
margin-right: 0.75rem;
|
||||
z-index: 2; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button svg {
|
||||
fill: #cbcbcb;
|
||||
transition: fill 0.4s ease; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button:hover svg {
|
||||
fill: #545758; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button:focus, .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button:active {
|
||||
border: none;
|
||||
box-shadow: none; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button.sorting-button-selected svg {
|
||||
fill: #545758; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input {
|
||||
width: 20%;
|
||||
border-radius: 0;
|
||||
margin-left: -52px;
|
||||
padding-left: 52px;
|
||||
border: 1px solid white;
|
||||
transition: border-color 0.7s ease, width 0.5s ease-in; }
|
||||
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input:focus, .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input:active, .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input:hover {
|
||||
width: 100%;
|
||||
border: 1px solid #cbcbcb;
|
||||
box-shadow: none; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-list-without-margin,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-list-without-margin {
|
||||
grid-template-columns: repeat(auto-fill, 185px);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2,8 +2,53 @@
|
|||
margin: 2rem 0px;
|
||||
|
||||
// Spinner
|
||||
.components-spinner {
|
||||
margin: 1rem 50%;
|
||||
.spinner-container {
|
||||
min-height: 56px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Search control bar
|
||||
.dynamic-items-search-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #cbcbcb;
|
||||
padding: 1.25rem 0 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
button {
|
||||
margin-right: 0.75rem;
|
||||
z-index: 2;
|
||||
|
||||
svg {
|
||||
fill: #cbcbcb;
|
||||
transition: fill 0.4s ease;
|
||||
}
|
||||
&:hover svg { fill: #545758; }
|
||||
&:focus, &:active { border: none; box-shadow: none; }
|
||||
&.sorting-button-selected svg {
|
||||
fill: #545758;
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 20%;
|
||||
border-radius: 0;
|
||||
margin-left: -52px;
|
||||
padding-left: 52px;
|
||||
border: 1px solid white;
|
||||
transition: border-color 0.7s ease, width 0.5s ease-in;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
width: 100%;
|
||||
border: 1px solid #cbcbcb;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid View Mode ----------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -74,6 +74,14 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
showSearchBar: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
searchString: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
order: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
|
|
@ -93,6 +101,8 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
searchURL,
|
||||
itemsRequestSource,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
searchString,
|
||||
isLoading,
|
||||
showSearchBar
|
||||
} = attributes;
|
||||
|
|
@ -155,6 +165,26 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
setAttributes({ maxItemsNumber: 12 });
|
||||
}
|
||||
|
||||
// Set up sorting order
|
||||
if (order != undefined)
|
||||
queryObject.order = order;
|
||||
else if (queryObject.order != undefined)
|
||||
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;
|
||||
|
|
@ -207,6 +237,17 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
setContent();
|
||||
}
|
||||
|
||||
function applySearchString(event) {
|
||||
|
||||
let value = event.target.value;
|
||||
|
||||
if (searchString != value) {
|
||||
searchString = value;
|
||||
setAttributes({ searchString: searchString });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
|
@ -352,6 +393,58 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
showSearchBar ?
|
||||
<div class="dynamic-items-search-bar">
|
||||
<Button
|
||||
onClick={ () => { order = 'asc'; setAttributes({ order: order }); setContent(); }}
|
||||
className={order == 'asc' ? 'sorting-button-selected' : ''}
|
||||
label={__('label_sort_ascending', 'tainacan')}>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg width="24" height="24" viewBox="-2 -4 20 20">
|
||||
<path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7 h8.3V10.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={ () => { order = 'desc'; setAttributes({ order: order }); setContent(); }}
|
||||
className={order == 'desc' ? 'sorting-button-selected' : ''}
|
||||
label={__('label_sort_descending', 'tainacan')}>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg width="24" height="24" viewBox="-2 -4 20 20">
|
||||
<path d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={ () => { setContent(); }}
|
||||
label={__('search', 'tainacan')}>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg width="24" height="24" viewBox="-2 -4 20 20">
|
||||
<path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</Button>
|
||||
<input
|
||||
value={ searchString }
|
||||
onChange={ (value) => { _.debounce(applySearchString(value), 300); } }
|
||||
type="text"/>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
{ !items.length ? (
|
||||
<Placeholder
|
||||
icon={(
|
||||
|
|
@ -377,13 +470,12 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
{ isLoading ? <Spinner /> :
|
||||
|
||||
{ isLoading ?
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
</div> :
|
||||
<div>
|
||||
{ showSearchBar ?
|
||||
<div class="dynamic-items-search-bar">
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue