Prevents form submission on editor's side.
This commit is contained in:
Mateus Machado Luna
parent
94e30bf8e3
commit
8094b478bb
|
|
@ -1,4 +1,5 @@
|
|||
const { registerBlockType } = wp.blocks;
|
||||
import { useEffect } from 'react';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
|
|
@ -125,53 +126,128 @@ registerBlockType('tainacan/search-bar', {
|
|||
collectionTextColor,
|
||||
collectionHeaderImage,
|
||||
collectionName
|
||||
} = attributes;
|
||||
} = attributes;
|
||||
|
||||
function setContent(){
|
||||
|
||||
setAttributes({
|
||||
content: (
|
||||
<div class="tainacan-search-container">
|
||||
<form
|
||||
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||
showCollectionHeader ?
|
||||
<div>
|
||||
{ collectionHeaderImage ?
|
||||
<div
|
||||
className={ 'search-bar-collection-header-image' }
|
||||
style={{
|
||||
backgroundImage: 'url(' + collectionHeaderImage + ')',
|
||||
height: collectionHeaderHeight ? collectionHeaderHeight + 'px' : '160px'
|
||||
}}>
|
||||
</div> : null
|
||||
}
|
||||
<div
|
||||
className={
|
||||
(showCollectionHeader ? 'search-bar-collection-header-container' : '') +
|
||||
(alignment == 'left' ? ' is-aligned-left' : '') +
|
||||
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||
}
|
||||
id="taincan-search-bar-block"
|
||||
action={ tainacan_plugin.site_url + '/' + collectionSlug + '/#/' }
|
||||
method='get'>
|
||||
<input
|
||||
style={{ borderColor: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||
id="taincan-search-bar-block_input"
|
||||
label={ __('Search', 'taincan')}
|
||||
name='search'
|
||||
placeholder={ placeholderText }
|
||||
/>
|
||||
<button
|
||||
class="button"
|
||||
type="submit">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -4 20 20">
|
||||
<path 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>
|
||||
</form>
|
||||
</div> )
|
||||
});
|
||||
style={{
|
||||
backgroundColor: collectionBackgroundColor
|
||||
}}>
|
||||
<div
|
||||
style={{ color: collectionTextColor ? collectionTextColor : '' }}
|
||||
class="search-bar-collection-header-title">
|
||||
{ showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }</span> : null }
|
||||
<h3 style={{ fontSize: collectionTextSize ? collectionTextSize + 'rem' : '2rem' }}>
|
||||
{ collectionName ? collectionName : '' }
|
||||
</h3>
|
||||
</div>
|
||||
{ collectionId && collectionSlug ?
|
||||
<div class="tainacan-search-container">
|
||||
<form
|
||||
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||
className={
|
||||
(alignment == 'left' ? ' is-aligned-left' : '') +
|
||||
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||
}
|
||||
id="taincan-search-bar-block"
|
||||
action={ tainacan_plugin.site_url + '/' + collectionSlug + '/#/' }
|
||||
method='get'>
|
||||
<input
|
||||
style={{ borderColor: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||
id="taincan-search-bar-block_input"
|
||||
label={ __('Search', 'taincan')}
|
||||
name='search'
|
||||
placeholder={ placeholderText }
|
||||
/>
|
||||
<button
|
||||
class="button"
|
||||
type="submit">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -4 20 20">
|
||||
<path 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>
|
||||
</form>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div class="tainacan-search-container">
|
||||
<form
|
||||
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||
className={
|
||||
(alignment == 'left' ? ' is-aligned-left' : '') +
|
||||
(alignment == 'right' ? ' is-aligned-right' : '')
|
||||
}
|
||||
id="taincan-search-bar-block"
|
||||
action={ tainacan_plugin.site_url + '/' + collectionSlug + '/#/' }
|
||||
method='get'>
|
||||
<input
|
||||
style={{ borderColor: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||
id="taincan-search-bar-block_input"
|
||||
label={ __('Search', 'taincan')}
|
||||
name='search'
|
||||
placeholder={ placeholderText }
|
||||
/>
|
||||
<button
|
||||
class="button"
|
||||
type="submit">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
style={{ fill: showCollectionHeader && collectionBackgroundColor ? collectionBackgroundColor : '' }}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -4 20 20">
|
||||
<path 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>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
function openSearchBarModal() {
|
||||
|
|
@ -412,6 +488,40 @@ registerBlockType('tainacan/search-bar', {
|
|||
) : null
|
||||
}
|
||||
|
||||
{ !collectionId ? (
|
||||
<Placeholder
|
||||
icon={(
|
||||
<img
|
||||
width={148}
|
||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||
alt="Tainacan Logo"/>
|
||||
)}>
|
||||
<p>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg width="24" height="24" viewBox="-2 -2 20 20">
|
||||
<path 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>
|
||||
{__('Set up a custom search bar to redirect to an item\'s list', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openSearchBarModal() }>
|
||||
{__('Select search source', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
showCollectionHeader ?
|
||||
<div>
|
||||
|
|
@ -461,7 +571,8 @@ registerBlockType('tainacan/search-bar', {
|
|||
/>
|
||||
<button
|
||||
class="button"
|
||||
type="submit">
|
||||
type="submit"
|
||||
onClick={(event) => { event.preventDefault(); return false; }}>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
|
|
@ -488,42 +599,8 @@ registerBlockType('tainacan/search-bar', {
|
|||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
{ !collectionId ? (
|
||||
<Placeholder
|
||||
icon={(
|
||||
<img
|
||||
width={148}
|
||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||
alt="Tainacan Logo"/>
|
||||
)}>
|
||||
<p>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg width="24" height="24" viewBox="-2 -2 20 20">
|
||||
<path 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>
|
||||
{__('Set up a custom search bar to redirect to an item\'s list', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openSearchBarModal() }>
|
||||
{__('Select search source', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ collectionId && collectionSlug && !showCollectionHeader?
|
||||
{ collectionId && collectionSlug && !showCollectionHeader ?
|
||||
<div class="tainacan-search-container">
|
||||
<form
|
||||
style={{ maxWidth: maxWidth ? maxWidth + '%' : '80%' }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue