Adds option to insert a confirmation checkbox on the item submission form #611.
This commit is contained in:
mateuswetah
parent
a76288ca97
commit
a9e409cad3
|
|
@ -139,10 +139,10 @@
|
|||
display: inline-block; }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button {
|
||||
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
|
||||
padding: 0.4em 0.7em;
|
||||
height: 0.95em;
|
||||
padding: 0.45em 0.75em;
|
||||
height: 1em;
|
||||
width: 10%;
|
||||
max-width: 3.25em;
|
||||
max-width: 3.45em;
|
||||
min-width: 1em;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -158,7 +158,8 @@
|
|||
flex: 1 0 auto;
|
||||
margin: 0 2px; }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button.outline {
|
||||
border: 2px solid var(--tainacan-input-border-color rgba(200, 200, 200, 0.3));
|
||||
margin-left: 0px !important;
|
||||
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
|
||||
background-color: var(--tainacan-background-color, white); }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button.outline .fake-text {
|
||||
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.1)); }
|
||||
|
|
@ -177,6 +178,27 @@
|
|||
margin-left: 0.5em;
|
||||
width: 24%;
|
||||
max-width: 4em; }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-checkbox-confirmation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 0.75em 0.25em 0.75em;
|
||||
border: 1px dashed var(--tainacan-input-border-color); }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-checkbox-confirmation .fake-checkbox {
|
||||
border: 2px solid var(--tainacan-info-color, rgba(200, 200, 200, 0.3));
|
||||
height: 0.875em;
|
||||
width: 0.875em;
|
||||
min-height: 0.875em;
|
||||
min-width: 0.875em;
|
||||
max-height: 0.875em;
|
||||
max-width: 0.875em;
|
||||
margin-right: 0.5em;
|
||||
border-radius: 1px;
|
||||
display: inline-block; }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-checkbox-confirmation:hover .fake-checkbox, .wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-checkbox-confirmation:hover:focus .fake-checkbox, .wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-checkbox-confirmation:focus-within .fake-checkbox {
|
||||
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.1)); }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-checkbox-confirmation .rich-text {
|
||||
margin: 12px 0;
|
||||
padding: 4px 2px; }
|
||||
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .documents-section {
|
||||
display: flex;
|
||||
padding: 0.5em; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -138,6 +138,14 @@
|
|||
"helpInfoBellowLabel": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"showTermsAgreementCheckbox": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"termsAgreementMessage": {
|
||||
"type": "String",
|
||||
"default": "I agree to submit this item information."
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,217 @@
|
|||
const { __ } = wp.i18n;
|
||||
|
||||
export default [
|
||||
/* Deprecated on Tainacan 0.18.7, due to the addition of showTermsAgreementCheckbox */
|
||||
{
|
||||
"attributes": {
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"isCollectionModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideFileModalButton": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideTextModalButton": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideLinkModalButton": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideThumbnailSection": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideAttachmentsSection": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideHelpButtons": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideMetadataTypes": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"showAllowCommentsSection": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideCollapses": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "Object",
|
||||
"default": { "r": 255, "g": 255, "b": 255, "a": 0 }
|
||||
},
|
||||
"baseFontSize": {
|
||||
"type": "Number",
|
||||
"default": 16
|
||||
},
|
||||
"inputColor": {
|
||||
"type": "String",
|
||||
"default": "#1d1d1d"
|
||||
},
|
||||
"inputBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"inputBorderColor": {
|
||||
"type": "String",
|
||||
"default": "#dbdbdb"
|
||||
},
|
||||
"labelColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"infoColor": {
|
||||
"type": "String",
|
||||
"default": "#555758"
|
||||
},
|
||||
"primaryColor": {
|
||||
"type": "String",
|
||||
"default": "#d9eced"
|
||||
},
|
||||
"secondaryColor": {
|
||||
"type": "String",
|
||||
"default": "#298596"
|
||||
},
|
||||
"enabledMetadata": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"collectionMetadata": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"isLoadingCollectionMetadata": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"sentFormHeading": {
|
||||
"type": "String",
|
||||
"default": "Form submitted!"
|
||||
},
|
||||
"sentFormMessage": {
|
||||
"type": "String",
|
||||
"default": "Thank you. Your item was submitted to the collection."
|
||||
},
|
||||
"documentSectionLabel": {
|
||||
"type": "String",
|
||||
"default": "Document"
|
||||
},
|
||||
"attachmentsSectionLabel": {
|
||||
"type": "String",
|
||||
"default": "Attachments"
|
||||
},
|
||||
"thumbnailSectionLabel": {
|
||||
"type": "String",
|
||||
"default": "Thumbnail"
|
||||
},
|
||||
"metadataSectionLabel": {
|
||||
"type": "String",
|
||||
"default": "Metadata"
|
||||
},
|
||||
"showItemLinkButton": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"itemLinkButtonLabel": {
|
||||
"type": "String",
|
||||
"default": "Go to the item page"
|
||||
},
|
||||
"helpInfoBellowLabel": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"align": ["full", "wide"],
|
||||
"html": true,
|
||||
"multiple": false
|
||||
},
|
||||
save({ attributes, className }) {
|
||||
const {
|
||||
collectionId,
|
||||
backgroundColor,
|
||||
hideFileModalButton,
|
||||
hideTextModalButton,
|
||||
hideLinkModalButton,
|
||||
hideThumbnailSection,
|
||||
hideAttachmentsSection,
|
||||
showAllowCommentsSection,
|
||||
hideHelpButtons,
|
||||
hideMetadataTypes,
|
||||
hideCollapses,
|
||||
documentSectionLabel,
|
||||
thumbnailSectionLabel,
|
||||
attachmentsSectionLabel,
|
||||
metadataSectionLabel,
|
||||
baseFontSize,
|
||||
inputColor,
|
||||
inputBackgroundColor,
|
||||
inputBorderColor,
|
||||
labelColor,
|
||||
infoColor,
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
enabledMetadata,
|
||||
sentFormHeading,
|
||||
sentFormMessage,
|
||||
showItemLinkButton,
|
||||
itemLinkButtonLabel,
|
||||
helpInfoBellowLabel
|
||||
} = attributes;
|
||||
|
||||
return <div
|
||||
style={{
|
||||
'font-size': baseFontSize + 'px',
|
||||
'--tainacan-base-font-size': baseFontSize + 'px',
|
||||
'--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
|
||||
'--tainacan-input-color': inputColor,
|
||||
'--tainacan-input-background-color': inputBackgroundColor,
|
||||
'--tainacan-input-border-color': inputBorderColor,
|
||||
'--tainacan-label-color': labelColor,
|
||||
'--tainacan-info-color': infoColor,
|
||||
'--tainacan-primary': primaryColor,
|
||||
'--tainacan-secondary': secondaryColor
|
||||
}}
|
||||
className={ className }>
|
||||
<div
|
||||
id="tainacan-item-submission-form"
|
||||
data-module="item-submission-form"
|
||||
collection-id={ collectionId }
|
||||
hide-file-modal-button={ hideFileModalButton.toString() }
|
||||
hide-text-modal-button={ hideTextModalButton.toString() }
|
||||
hide-link-modal-button={ hideLinkModalButton.toString() }
|
||||
hide-thumbnail-section={ hideThumbnailSection.toString() }
|
||||
hide-attachments-section={ hideAttachmentsSection.toString() }
|
||||
show-allow-comments-section={ showAllowCommentsSection.toString() }
|
||||
hide-help-buttons={ hideHelpButtons.toString() }
|
||||
hide-metadata-types={ hideMetadataTypes.toString() }
|
||||
hide-collapses={ hideCollapses.toString() }
|
||||
enabled-metadata={ enabledMetadata.toString() }
|
||||
sent-form-heading={ sentFormHeading }
|
||||
sent-form-message={ sentFormMessage }
|
||||
document-section-label={ documentSectionLabel }
|
||||
thumbnail-section-label={ thumbnailSectionLabel }
|
||||
attachments-section-label={ attachmentsSectionLabel }
|
||||
metadata-section-label={ metadataSectionLabel }
|
||||
show-item-link-button={ showItemLinkButton ? showItemLinkButton.toString() : 'false' }
|
||||
item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) }
|
||||
help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' } >
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.18.4, due to the new block.json strategy */
|
||||
{
|
||||
attributes: {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const {
|
|||
PanelBody
|
||||
} = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, RichText, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import tainacan from '../../js/axios.js';
|
||||
import CollectionModal from '../faceted-search/collection-modal.js';
|
||||
|
|
@ -54,9 +54,13 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
metadataSectionLabel,
|
||||
showItemLinkButton,
|
||||
itemLinkButtonLabel,
|
||||
helpInfoBellowLabel
|
||||
helpInfoBellowLabel,
|
||||
showTermsAgreementCheckbox,
|
||||
termsAgreementMessage
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
const fontSizes = [
|
||||
{
|
||||
name: __( 'Tiny', 'tainacan' ),
|
||||
|
|
@ -371,6 +375,20 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={__('Confirmation of agreement to terms', 'tainacan')}
|
||||
initialOpen={ false }>
|
||||
<ToggleControl
|
||||
label={__('Show terms agreement confimation checkbox', 'tainacan')}
|
||||
help={ __('With this option enabled, user will be prevented to submit the form until a confirmation checkbox is pressed. You can edit the content of the agreement message on the block itself.', 'tainacan') }
|
||||
checked={ showTermsAgreementCheckbox }
|
||||
onChange={ ( isChecked ) => {
|
||||
showTermsAgreementCheckbox = isChecked;
|
||||
setAttributes({ showTermsAgreementCheckbox: isChecked });
|
||||
}
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={__('Colors and Sizes', 'tainacan')}
|
||||
initialOpen={ false }
|
||||
|
|
@ -647,6 +665,20 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{ showTermsAgreementCheckbox ?
|
||||
<div class="fake-checkbox-confirmation">
|
||||
<span class="fake-checkbox"></span>
|
||||
<RichText
|
||||
{ ...blockProps }
|
||||
tagName="p"
|
||||
value={ termsAgreementMessage }
|
||||
onChange={ ( inputContent ) => setAttributes( { termsAgreementMessage: inputContent } ) }
|
||||
placeholder={ __( 'Type here a message requiring the user to agree with certain conditions.' ) }
|
||||
/>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
<div class="form-footer">
|
||||
<span class="fake-button outline"><span class="fake-text"></span></span>
|
||||
<span class="fake-text"></span>
|
||||
|
|
|
|||
|
|
@ -400,6 +400,18 @@
|
|||
<br>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="showTermsAgreementCheckbox"
|
||||
class="terms-agreement-confirmation-section">
|
||||
<b-field>
|
||||
<b-checkbox
|
||||
v-model="userHasAgreedToTerms"
|
||||
size="is-medium">
|
||||
<span v-html="termsAgreementMessage" />
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<footer class="form-submission-footer">
|
||||
|
||||
<button
|
||||
|
|
@ -421,6 +433,7 @@
|
|||
</div>
|
||||
|
||||
<button
|
||||
:disabled="showTermsAgreementCheckbox && !userHasAgreedToTerms"
|
||||
@click="onSubmit()"
|
||||
type="button"
|
||||
class="button is-secondary">{{ $i18n.get('label_submit') }}</button>
|
||||
|
|
@ -518,7 +531,9 @@ export default {
|
|||
metadataSectionLabel: String,
|
||||
showItemLinkButton: Boolean,
|
||||
itemLinkButtonLabel: String,
|
||||
helpInfoBellowLabel: Boolean
|
||||
helpInfoBellowLabel: Boolean,
|
||||
showTermsAgreementCheckbox: Boolean,
|
||||
termsAgreementMessage: String
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -547,7 +562,8 @@ export default {
|
|||
couldLoadCollection: true,
|
||||
useCaptcha: 'no',
|
||||
captchaSiteKey: tainacan_plugin['item_submission_captcha_site_key'],
|
||||
linkToCreatedItem: ''
|
||||
linkToCreatedItem: '',
|
||||
userHasAgreedToTerms: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -907,6 +923,20 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.terms-agreement-confirmation-section {
|
||||
width: 100%;
|
||||
margin-top: 1.25em;
|
||||
|
||||
.field {
|
||||
padding: 0.75em 0.75em 0.5em 0.75em;
|
||||
border: 1px dashed var(--tainacan-input-border-color);
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-submission-footer {
|
||||
padding: 18px 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
const { RichText, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default function({ attributes, className }) {
|
||||
const {
|
||||
collectionId,
|
||||
|
|
@ -28,9 +30,15 @@ export default function({ attributes, className }) {
|
|||
sentFormMessage,
|
||||
showItemLinkButton,
|
||||
itemLinkButtonLabel,
|
||||
helpInfoBellowLabel
|
||||
helpInfoBellowLabel,
|
||||
showTermsAgreementCheckbox,
|
||||
termsAgreementMessage
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps.save();
|
||||
let termsAgreementMessageHTML = <RichText.Content { ...blockProps } tagName="p" value={ termsAgreementMessage } />;
|
||||
termsAgreementMessageHTML = (termsAgreementMessageHTML && termsAgreementMessageHTML.props && termsAgreementMessageHTML.props.value) ? termsAgreementMessageHTML.props.value : '';
|
||||
|
||||
return <div
|
||||
style={{
|
||||
'font-size': baseFontSize + 'px',
|
||||
|
|
@ -66,6 +74,8 @@ export default function({ attributes, className }) {
|
|||
attachments-section-label={ attachmentsSectionLabel }
|
||||
metadata-section-label={ metadataSectionLabel }
|
||||
show-item-link-button={ showItemLinkButton ? showItemLinkButton.toString() : 'false' }
|
||||
show-terms-agreement-checkbox={ showTermsAgreementCheckbox ? showTermsAgreementCheckbox.toString() : 'false' }
|
||||
terms-agreement-message={ termsAgreementMessageHTML }
|
||||
item-link-button-label={ itemLinkButtonLabel ? itemLinkButtonLabel : __( 'Go to the item page', 'tainacan' ) }
|
||||
help-info-bellow-label={ helpInfoBellowLabel ? helpInfoBellowLabel.toString() : 'false' } >
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -169,10 +169,10 @@
|
|||
}
|
||||
.fake-button {
|
||||
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
|
||||
padding: 0.4em 0.7em;
|
||||
height: 0.95em;
|
||||
padding: 0.45em 0.75em;
|
||||
height: 1em;
|
||||
width: 10%;
|
||||
max-width: 3.25em;
|
||||
max-width: 3.45em;
|
||||
min-width: 1em;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -191,7 +191,8 @@
|
|||
margin: 0 2px;
|
||||
}
|
||||
&.outline {
|
||||
border: 2px solid var(--tainacan-input-border-color rgba(200,200,200, 0.3));
|
||||
margin-left: 0px !important;
|
||||
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
|
||||
background-color: var(--tainacan-background-color, white);
|
||||
|
||||
.fake-text {
|
||||
|
|
@ -218,6 +219,38 @@
|
|||
max-width: 4em;
|
||||
}
|
||||
}
|
||||
.fake-checkbox-confirmation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 0.75em 0.25em 0.75em;
|
||||
border: 1px dashed var(--tainacan-input-border-color);
|
||||
|
||||
.fake-checkbox {
|
||||
border: 2px solid var(--tainacan-info-color, rgba(200,200,200, 0.3));
|
||||
height: 0.875em;
|
||||
width: 0.875em;
|
||||
min-height: 0.875em;
|
||||
min-width: 0.875em;
|
||||
max-height: 0.875em;
|
||||
max-width: 0.875em;
|
||||
margin-right: 0.5em;
|
||||
border-radius: 1px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:hover:focus,
|
||||
&:focus-within {
|
||||
.fake-checkbox {
|
||||
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.1));
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text {
|
||||
margin: 12px 0;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
}
|
||||
.documents-section {
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
|
|
|
|||
|
|
@ -109,7 +109,9 @@ export default (element) => {
|
|||
metadataSectionLabel: '',
|
||||
showItemLinkButton: false,
|
||||
itemLinkButtonLabel: '',
|
||||
helpInfoBellowLabel: false
|
||||
helpInfoBellowLabel: false,
|
||||
showItemLinkButton: false,
|
||||
termsAgreementMessage: ''
|
||||
},
|
||||
beforeMount () {
|
||||
// Collection source settings
|
||||
|
|
@ -157,6 +159,12 @@ export default (element) => {
|
|||
this.itemLinkButtonLabel = this.$el.attributes['item-link-button-label'].value;
|
||||
if (this.$el.attributes['show-item-link-button'] != undefined)
|
||||
this.showItemLinkButton = this.isParameterTrue('show-item-link-button');
|
||||
|
||||
/* Terms agreements confirmation checkbox */
|
||||
if (this.$el.attributes['show-terms-agreement-checkbox'] != undefined)
|
||||
this.showTermsAgreementCheckbox = this.isParameterTrue('show-terms-agreement-checkbox');
|
||||
if (this.$el.attributes['terms-agreement-message'] != undefined)
|
||||
this.termsAgreementMessage = this.$el.attributes['terms-agreement-message'].value;
|
||||
|
||||
// List of metadata
|
||||
if (this.$el.attributes['enabled-metadata'] != undefined && this.$el.attributes['enabled-metadata'].value)
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
:show-item-link-button="$root.showItemLinkButton"
|
||||
:item-link-button-label="$root.itemLinkButtonLabel"
|
||||
:help-info-bellow-label="$root.helpInfoBellowLabel ? $root.helpInfoBellowLabel : false"
|
||||
:show-terms-agreement-checkbox="$root.showTermsAgreementCheckbox ? $root.showTermsAgreementCheckbox : false"
|
||||
:terms-agreement-message="$root.termsAgreementMessage"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue