tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes to several gutenberg modal css issues with 6.1. #566.

This commit is contained in:
mateuswetah 2022-09-22 15:35:09 -03:00
parent ff9890bd62
commit f6e6faac9b
21 changed files with 651 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/assets/css/tainacan-gutenberg-block-common-editor-styles.css
View File

@ -10,7 +10,7 @@
.tainacan-block-placeholder.components-placeholder {
align-items: center !important;
margin-bottom: 0 !important;
background: var(--tainacan-block-gray0, #f6f6f6); }
background: var(--tainacan-block-gray0, #f6f6f6) !important; }
.tainacan-block-placeholder.components-placeholder .components-placeholder__label {
margin-bottom: 0; }
.tainacan-block-placeholder.components-placeholder .components-placeholder__fieldset {
@ -36,20 +36,22 @@
margin: 0; }
.wp-block-tainacan-modal {
width: 50%; }
width: 50% !important; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-modal {
width: 75%; } }
width: 75% !important; } }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-modal {
width: 100%; } }
width: 100% !important; } }
.wp-block-tainacan-modal.dynamic-modal {
width: 90%;
width: 90% !important;
height: 90%;
width: 80vw;
width: 80vw !important;
height: 80vh; }
.wp-block-tainacan-modal.dynamic-modal iframe {
width: 100%;
height: calc(100% - 76px); }
.wp-block-tainacan-modal.dynamic-modal.wp-version-smaller-than-6-1 iframe {
height: calc(100% - 96px); }
.wp-block-tainacan-modal.dynamic-modal.wp-version-smaller-than-5-9 iframe {
height: calc(100% - 156px); }
@ -97,7 +99,8 @@
.wp-block-tainacan-modal .modal-search-area .components-base-control {
width: 95%; } }
.wp-block-tainacan-modal .modal-search-area .components-base-control:nth-child(2) {
flex-shrink: 2; }
flex-shrink: 2;
margin-left: 0.75em; }
.wp-block-tainacan-modal .modal-search-area .components-base-control .components-base-control__field {
flex-wrap: wrap; }
.wp-block-tainacan-modal .modal-search-area .components-base-control .components-base-control__field .components-select-control {
@ -113,8 +116,7 @@
.wp-block-tainacan-modal .modal-radio-area-label {
font-weight: 500;
margin-left: 1.75em; }
.wp-block-tainacan-modal .modal-checkbox-list,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
.wp-block-tainacan-modal .modal-checkbox-list, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack {
padding: 0;
flex-wrap: wrap;
display: flex;
@ -125,44 +127,44 @@
grid-gap: 0px;
justify-content: space-evenly;
list-style-type: none;
margin: 10px;
margin: 5px 0px;
padding: 2px;
max-height: 37vh;
overflow-y: auto;
overflow-x: hidden; }
.wp-block-tainacan-modal .modal-checkbox-list .components-base-control,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control {
overflow-x: hidden;
width: 100%; }
.wp-block-tainacan-modal .modal-checkbox-list .components-base-control, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .components-base-control, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .components-base-control {
overflow: hidden;
padding-left: 1px; }
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option {
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .modal-checkbox-list-item,
.wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .components-radio-control__option, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .modal-checkbox-list-item,
.wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .components-radio-control__option {
display: flex;
justify-content: flex-start;
align-items: center; }
align-items: center;
margin: 0.35em; }
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item img,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option img,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item img,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option img {
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option img, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .modal-checkbox-list-item img,
.wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .components-radio-control__option img, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .modal-checkbox-list-item img,
.wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .components-radio-control__option img {
width: 24px;
height: 24px;
margin-right: 10px;
margin-bottom: 8px; }
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
.wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .components-radio-control__option label, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .modal-checkbox-list-item label,
.wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .components-radio-control__option label {
display: inline-block;
max-width: 85%; }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
.wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .components-radio-control__option label, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .modal-checkbox-list-item label,
.wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .components-radio-control__option label {
max-width: 80%; } }
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option .components-radio-control__input,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option .components-radio-control__input {
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option .components-radio-control__input, .wp-block-tainacan-modal.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field .components-radio-control__option .components-radio-control__input, .wp-block-tainacan-modal:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack .components-radio-control__option .components-radio-control__input {
min-width: 20px;
min-height: 20px; }
.wp-block-tainacan-modal .modal-loadmore-section {

2
src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": ["../../views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
"names": [],
"file": "tainacan-gutenberg-block-common-editor-styles.css"

3
src/views/gutenberg-blocks/blocks/carousel-collections-list/carousel-collections-modal.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, CheckboxControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class CollectionsModal extends React.Component {
constructor(props) {
@ -192,7 +193,7 @@ export default class CollectionsModal extends React.Component {
render() {
return (
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select the desired collections from your repository', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select collections', 'tainacan')}>

4
src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js
View File

@ -206,7 +206,7 @@ export default class CarouselItemsModal extends React.Component {
return this.state.collectionId ? (
// Items modal
<Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < 5.9 ? 'wp-version-smaller-than-5-9' : '') }
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={ this.props.loadStrategy == 'selection' ? __('Select items to add on block', 'tainacan') : __('Configure the items search to be used on block', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
@ -242,7 +242,7 @@ export default class CarouselItemsModal extends React.Component {
) : (
// Collections modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }

3
src/views/gutenberg-blocks/blocks/collections-list/collections-modal.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, CheckboxControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class CollectionsModal extends React.Component {
constructor(props) {
@ -193,7 +194,7 @@ export default class CollectionsModal extends React.Component {
render() {
return (
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select the desired collections from your repository', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select collections', 'tainacan')}>

3
src/views/gutenberg-blocks/blocks/faceted-search/collection-modal.js
View File

@ -5,6 +5,7 @@ import qs from 'qs';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, SelectControl, RadioControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class CollectionModal extends React.Component {
constructor(props) {
@ -208,7 +209,7 @@ export default class CollectionModal extends React.Component {
render() {
return (
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select items', 'tainacan')}>

5
src/views/gutenberg-blocks/blocks/faceted-search/term-modal.js
View File

@ -3,6 +3,7 @@ import tainacan from '../../js/axios.js';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, SelectControl, RadioControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class TermModal extends React.Component {
constructor(props) {
@ -268,7 +269,7 @@ export default class TermModal extends React.Component {
return this.state.taxonomyId != null && this.state.taxonomyId != undefined ? (
// Terms modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select the desired terms from taxonomy ' + this.state.taxonomyName, 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select terms', 'tainacan')}>
@ -386,7 +387,7 @@ export default class TermModal extends React.Component {
) : (
// Taxonomies modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a taxonomy to fetch terms from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select terms', 'tainacan')}>

5
src/views/gutenberg-blocks/blocks/facets-list/metadata-modal.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class MetadataModal extends React.Component {
constructor(props) {
@ -243,7 +244,7 @@ export default class MetadataModal extends React.Component {
return this.state.collectionId ? (
// Metadata modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a metadatum to show it\'s facets on block', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select metadatum', 'tainacan')}>
@ -290,7 +291,7 @@ export default class MetadataModal extends React.Component {
) : (
// Collections modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch metadata from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select collection', 'tainacan')}>

3
src/views/gutenberg-blocks/blocks/facets-list/parent-term-modal.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class ParentTermModal extends React.Component {
constructor(props) {
@ -163,7 +164,7 @@ export default class ParentTermModal extends React.Component {
// Facets modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a parent term to fetch facets from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select term', 'tainacan')}>

120
src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js
View File

@ -4,7 +4,7 @@ const { Button, Spinner, Placeholder } = wp.components;
const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import SingleItemModal from '../../js/selection/single-item-modal.js';
import SingleItemMetadataSectionModal from '../../js/selection/single-item-metadata-section-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@ -31,54 +31,58 @@ export default function ({ attributes, setAttributes, className, isSelected, con
checkIfTemplateEdition();
function setContent() {
isLoading = true;
setAttributes({
isLoading: isLoading
});
if (sectionId) {
if ( dataSource === 'parent' && sectionId && sectionDescription && sectionName && sectionMetadata.length ) {
getMetadataSectionTemplates({
sectionId: sectionId,
sectionName: sectionName,
sectionDescription: sectionDescription,
sectionMetadata: sectionMetadata,
metadataSectionRequestSource: metadataSectionRequestSource
isLoading = true;
setAttributes({
isLoading: isLoading
});
} else {
if (metadataSectionRequestSource != undefined && typeof metadataSectionRequestSource == 'function')
metadataSectionRequestSource.cancel('Previous metadata sections search canceled.');
metadataSectionRequestSource = axios.CancelToken.source();
let endpoint = '/collection/'+ collectionId + '/metadata-sections/' + sectionId;
tainacan.get(endpoint, { cancelToken: metadataSectionRequestSource.token })
.then(response => {
metadataSection = response.data ? response.data : [];
getMetadataSectionTemplates({
sectionId: metadataSection.id,
sectionName: metadataSection.name,
sectionDescription: metadataSection.description,
sectionMetadata: metadataSection['metadata_object_list'],
metadataSectionRequestSource: metadataSectionRequestSource
});
})
.catch((error) => {
console.error(error);
setAttributes({
sectionId: '',
sectionName: '',
sectionDescription: '',
sectionMetadata: [],
isLoading: false
});
if ( dataSource === 'parent' && sectionMetadata.length ) {
getMetadataSectionTemplates({
sectionId: sectionId,
sectionName: sectionName,
sectionDescription: sectionDescription,
sectionMetadata: sectionMetadata,
metadataSectionRequestSource: metadataSectionRequestSource
});
} else {
if (metadataSectionRequestSource != undefined && typeof metadataSectionRequestSource == 'function')
metadataSectionRequestSource.cancel('Previous metadata sections search canceled.');
metadataSectionRequestSource = axios.CancelToken.source();
let endpoint = '/collection/'+ collectionId + '/metadata-sections/' + sectionId;
tainacan.get(endpoint, { cancelToken: metadataSectionRequestSource.token })
.then(response => {
let metadataSection = response.data ? response.data : [];
getMetadataSectionTemplates({
sectionId: metadataSection.id,
sectionName: metadataSection.name,
sectionDescription: metadataSection.description,
sectionMetadata: metadataSection['metadata_object_list'],
metadataSectionRequestSource: metadataSectionRequestSource
});
})
.catch((error) => {
console.error(error);
setAttributes({
sectionId: '',
sectionName: '',
sectionDescription: '',
sectionMetadata: [],
isLoading: false
});
});
}
}
}
@ -89,16 +93,14 @@ export default function ({ attributes, setAttributes, className, isSelected, con
sectionMetadata,
metadataSectionRequestSource
}) {
console.log(sectionName)
metadataSectionTemplate = [];
if (sectionName) {
metadataSectionTemplate.push([
'tainacan/metadata-section-name',
{
sectionId: sectionId,
itemId: Number(itemId),
collectionId: Number(collectionId),
sectionName: sectionName,
dataSource: 'parent'
}
]);
}
@ -193,21 +195,27 @@ export default function ({ attributes, setAttributes, className, isSelected, con
(
<div>
{ isModalOpen ?
<SingleItemModal
modalTitle={ __('Select one item to render its metadata', 'tainacan') }
applyButtonLabel={ __('List metadata for this item', 'tainacan') }
<SingleItemMetadataSectionModal
modalTitle={ __('Select one item to render a metadata section of it', 'tainacan') }
existingCollectionId={ collectionId }
existingItemId={ itemId }
existingMetadataSectionId={ sectionId }
onSelectCollection={ (selectedCollectionId) => {
collectionId = Number(selectedCollectionId);
setAttributes({
collectionId: collectionId
});
}}
onApplySelectedItem={ (selectedItemId) => {
itemId = Number(selectedItemId);
onSelectItem={ (selectedItemId) => {
itemId = selectedItemId;
setAttributes({
itemId: itemId
});
}}
onApplySelectedMetadataSection={ (selectedMetadataSection) => {
sectionId = selectedMetadataSection.sectionId;
setAttributes({
itemId: itemId,
sectionId: sectionId,
isModalOpen: false
});
setContent();
@ -237,7 +245,7 @@ export default function ({ attributes, setAttributes, className, isSelected, con
width="24px">
<path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
</svg>
{__('Select an item to display its metadata list.', 'tainacan')}
{ __('Select an item and a metadata section to display it.', 'tainacan') }
</p>
<Button
isPrimary
@ -249,7 +257,7 @@ export default function ({ attributes, setAttributes, className, isSelected, con
});
}
}>
{__('Select Item', 'tainacan')}
{__('Select Item and Metadata Section', 'tainacan')}
</Button>
</Placeholder>
) : null

2
src/views/gutenberg-blocks/blocks/item-metadata-sections/edit.js
View File

@ -8,7 +8,7 @@ import SingleItemModal from '../../js/selection/single-item-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
export default function ({ attributes, setAttributes, className, isSelected, context }) {
export default function ({ attributes, setAttributes, className, isSelected }) {
let {
content,

4
src/views/gutenberg-blocks/blocks/items-list/items-modal.js
View File

@ -239,7 +239,7 @@ export default class ItemsModal extends React.Component {
return this.state.collectionId ? (
// Items modal
<Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < 5.9 ? 'wp-version-smaller-than-5-9' : '') }
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={ __('Select items to add on block', 'tainacan', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
@ -264,7 +264,7 @@ export default class ItemsModal extends React.Component {
) : (
// Collections modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select items', 'tainacan')}>

22
src/views/gutenberg-blocks/blocks/metadata-section-name/block.json
View File

@ -19,30 +19,13 @@
"source": "query",
"selector": "div"
},
"dataSource": {
"type": "string",
"default": "selection"
},
"collectionId": {
"type": "integer"
},
"itemId": {
"type": "integer"
},
"sectionId": {
"type": "string"
},
"sectionName": {
"type": "string",
"default": ""
},
"isModalOpen": {
"type": "boolean",
"default": false
},
"labelLevel": {
"type": "number",
"default": 3
"default": 2
},
"textAlign": {
"type": "string"
@ -68,7 +51,8 @@
},
"spacing": {
"margin": true,
"padding": true
"padding": true,
"spacing": true
}
},
"editorScript": "metadata-section-name",

86
src/views/gutenberg-blocks/blocks/metadata-section-name/edit.js
View File

@ -1,12 +1,8 @@
const { __ } = wp.i18n;
const { Button, Placeholder, ToolbarDropdownMenu, SVG, Path, __experimentalHeading: Heading } = wp.components;
const { Placeholder, ToolbarDropdownMenu, SVG, Path, __experimentalHeading: Heading } = wp.components;
const ServerSideRender = wp.serverSideRender;
const { useBlockProps, BlockControls, AlignmentControl } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import SingleItemMetadatumModal from '../../js/selection/single-item-metadatum-modal.js';
import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
const levelToPath = {
1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
@ -16,16 +12,11 @@ const levelToPath = {
6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
};
export default function ({ attributes, setAttributes, className, isSelected }) {
export default function ({ attributes, setAttributes, className }) {
let {
content,
collectionId,
itemId,
sectionId,
sectionName,
isModalOpen,
dataSource,
labelLevel,
textAlign,
style
@ -38,7 +29,6 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
},
style,
} );
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
return content == 'preview' ?
<div className={className}>
@ -50,25 +40,6 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
<>
<BlockControls group="block">
{ dataSource == 'selection' ? (
TainacanBlocksCompatToolbar({
label: __('Select item', 'tainacan'),
icon: <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-2 -2 24 24"
height="24px"
width="24px">
<path d="m 6,3.9960001 h 5.016 c 0.544,0 1.008,0.192 1.392,0.576 L 19.416,11.58 c 0.384,0.384 0.576,0.856 0.576,1.416 0,0.56 -0.192,1.032 -0.576,1.416 l -4.992,4.992 c -0.176,0.176 -0.392,0.32 -0.648,0.432 -0.24,0.112 -0.496,0.168 -0.768,0.168 -0.272,0 -0.536,-0.056 -0.792,-0.168 -0.24,-0.112 -0.448,-0.256 -0.624,-0.432 L 4.608,12.42 c -0.4,-0.4 -0.6,-0.872 -0.6,-1.416 V 5.988 C 4.008,5.428 4.2,4.956 4.584,4.572 4.968,4.188 5.44,3.996 6,3.9960001 Z m 1.512,4.992 c 0.416,0 0.768,-0.144 1.056,-0.432 C 8.856,8.2680001 9,7.916 9,7.5 9,7.084 8.856,6.732 8.568,6.444 8.28,6.14 7.928,5.988 7.512,5.988 7.096,5.988 6.736,6.14 6.432,6.444 6.144,6.732 6,7.084 6,7.5 c 0,0.416 0.144,0.7680001 0.432,1.0560001 0.304,0.288 0.664,0.432 1.08,0.432 z"/>
</svg>,
onClick: () => {
isModalOpen = true;
setAttributes( {
isModalOpen: isModalOpen
});
}
})
): null
}
<ToolbarDropdownMenu
popoverProps={{
className: 'block-library-heading-level-dropdown',
@ -119,44 +90,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
/>
</BlockControls>
{ isSelected ?
(
<div>
{ isModalOpen ?
<SingleItemMetadatumModal
modalTitle={ __('Select one item to render its metadata', 'tainacan') }
existingCollectionId={ collectionId }
existingItemId={ itemId }
existingSectionId={ sectionId }
onSelectCollection={ (selectedCollectionId) => {
collectionId = selectedCollectionId;
setAttributes({
collectionId: collectionId
});
}}
onSelectItem={ (selectedItemId) => {
itemId = selectedItemId;
setAttributes({
itemId: itemId
});
}}
onApplySelectedMetadatum={ (selectedMetadatum) => {
sectionId = selectedMetadatum.sectionId;
setAttributes({
sectionId: sectionId,
isModalOpen: false
});
}}
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
: null
}
</div>
) : null
}
{ dataSource == 'selection' && !(collectionId && itemId && sectionId) ? (
{ !sectionName ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(
@ -173,20 +107,8 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
width="24px">
<path d="m 6,3.9960001 h 5.016 c 0.544,0 1.008,0.192 1.392,0.576 L 19.416,11.58 c 0.384,0.384 0.576,0.856 0.576,1.416 0,0.56 -0.192,1.032 -0.576,1.416 l -4.992,4.992 c -0.176,0.176 -0.392,0.32 -0.648,0.432 -0.24,0.112 -0.496,0.168 -0.768,0.168 -0.272,0 -0.536,-0.056 -0.792,-0.168 -0.24,-0.112 -0.448,-0.256 -0.624,-0.432 L 4.608,12.42 c -0.4,-0.4 -0.6,-0.872 -0.6,-1.416 V 5.988 C 4.008,5.428 4.2,4.956 4.584,4.572 4.968,4.188 5.44,3.996 6,3.9960001 Z m 1.512,4.992 c 0.416,0 0.768,-0.144 1.056,-0.432 C 8.856,8.2680001 9,7.916 9,7.5 9,7.084 8.856,6.732 8.568,6.444 8.28,6.14 7.928,5.988 7.512,5.988 7.096,5.988 6.736,6.14 6.432,6.444 6.144,6.732 6,7.084 6,7.5 c 0,0.416 0.144,0.7680001 0.432,1.0560001 0.304,0.288 0.664,0.432 1.08,0.432 z"/>
</svg>
{__('Select an item metadata to display its label and value.', 'tainacan')}
{ __('No metadata section was found. Please use this block only inside metadata section block.', 'tainacan') }
</p>
<Button
isPrimary
type="button"
onClick={ () => {
isModalOpen = true;
setAttributes( {
isModalOpen: isModalOpen
});
}
}>
{__('Select Item Metadatum', 'tainacan')}
</Button>
</Placeholder>
) : null
}

29
src/views/gutenberg-blocks/blocks/metadata-section-name/save.js
View File

@ -1,16 +1,17 @@
const { useBlockProps, InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default function({ attributes, className }) {
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
switch (attributes.labelLevel) {
case 1: return <h1 { ...blockProps }>{ attributes.sectionName }</h1>;
case 2: return <h2 { ...blockProps }>{ attributes.sectionName }</h2>;
case 3: return <h3 { ...blockProps }>{ attributes.sectionName }</h3>;
case 4: return <h4 { ...blockProps }>{ attributes.sectionName }</h4>;
case 5: return <h5 { ...blockProps }>{ attributes.sectionName }</h5>;
case 6: return <h6 { ...blockProps }>{ attributes.sectionName }</h6>;
default: return <h2 { ...blockProps }>{ attributes.sectionName }</h2>;
}
export default function({ attributes }) {
const { textAlign, style, sectionName, labelLevel } = attributes;
const TagName = 'h' + labelLevel;
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: `has-text-align-${ textAlign }`, style } : useBlockProps.save( {
className: `has-text-align-${ textAlign }`,
style,
} );
return (
<TagName { ...blockProps }>
{ sectionName }
</TagName>
);
};

3
src/views/gutenberg-blocks/blocks/search-bar/search-bar-modal.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class SearchBarModal extends React.Component {
constructor(props) {
@ -193,7 +194,7 @@ export default class SearchBarModal extends React.Component {
render() {
return <Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a search source to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select search source', 'tainacan')}>

5
src/views/gutenberg-blocks/blocks/terms-list/terms-modal.js
View File

@ -3,6 +3,7 @@ import tainacan from '../../js/axios.js';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, CheckboxControl, SelectControl, RadioControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class TermsModal extends React.Component {
constructor(props) {
@ -312,7 +313,7 @@ export default class TermsModal extends React.Component {
return this.state.taxonomyId ? (
// Terms modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select the desired terms from taxonomy ' + this.state.taxonomyName, 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select terms', 'tainacan')}>
@ -445,7 +446,7 @@ export default class TermsModal extends React.Component {
) : (
// Taxonomies modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a taxonomy to fetch terms from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select terms', 'tainacan')}>

490
src/views/gutenberg-blocks/js/selection/single-item-metadata-section-modal.js Normal file
View File

@ -0,0 +1,490 @@
import tainacan from '../axios.js';
import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class SingleItemMetadataSectionModal extends React.Component {
constructor(props) {
super(props);
// Initialize state
this.state = {
collectionsPerPage: 24,
collectionId: undefined,
itemId: undefined,
sectionId: undefined,
collectionName: '',
isLoadingCollections: false,
modalCollections: [],
itemTitle: '',
isLoadingMetadataSections: false,
modalMetadataSections: [],
totalModalCollections: 0,
collectionOrderBy: 'date-desc',
collectionPage: 1,
temporaryCollectionId: '',
temporaryItemId: '',
temporaryMetadataSectionId: '',
searchCollectionName: '',
collections: [],
collectionsRequestSource: undefined,
metadataSections: [],
metadataSectionsRequestSource: undefined,
searchURL: '',
itemsPerPage: 12
};
// Bind events
this.resetCollections = this.resetCollections.bind(this);
this.selectCollection = this.selectCollection.bind(this);
this.fetchCollections = this.fetchCollections.bind(this);
this.fetchModalCollections = this.fetchModalCollections.bind(this);
this.fetchCollection = this.fetchCollection.bind(this);
this.fetchItem = this.fetchItem.bind(this);
this.selectItem = this.selectItem.bind(this);
this.fetchModalMetadataSections = this.fetchModalMetadataSections.bind(this);
this.applySelectedMetadataSection = this.applySelectedMetadataSection.bind(this);
}
componentWillMount() {
this.setState({
collectionId: this.props.existingCollectionId,
itemId: this.props.existingItemId,
sectionId: this.props.existingSectionId
});
if (this.props.existingCollectionId) {
this.fetchCollection(this.props.existingCollectionId);
this.setState({
searchURL: tainacan_blocks.admin_url + 'admin.php?itemsSingleSelectionMode=true&page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?status=publish'
});
if (this.props.existingItemId) {
this.fetchItem(this.props.existingItemId);
this.fetchModalMetadataSections();
}
} else {
this.setState({ collectionPage: 1 });
this.fetchModalCollections();
}
}
// COLLECTIONS RELATED --------------------------------------------------
fetchModalCollections() {
let someModalCollections = this.state.modalCollections;
if (this.state.collectionPage <= 1)
someModalCollections = [];
let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
if (this.state.collectionOrderBy == 'date')
endpoint += '&orderby=date&order=asc';
else if (this.state.collectionOrderBy == 'date-desc')
endpoint += '&orderby=date&order=desc';
else if (this.state.collectionOrderBy == 'title')
endpoint += '&orderby=title&order=asc';
else if (this.state.collectionOrderBy == 'title-desc')
endpoint += '&orderby=title&order=desc';
this.setState({
isLoadingCollections: true,
collectionPage: this.state.collectionPage + 1,
modalCollections: someModalCollections
});
tainacan.get(endpoint)
.then(response => {
let otherModalCollections = this.state.modalCollections;
for (let collection of response.data) {
otherModalCollections.push({
name: collection.name,
id: collection.id
});
}
this.setState({
isLoadingCollections: false,
modalCollections: otherModalCollections,
totalModalCollections: response.headers['x-wp-total']
});
return otherModalCollections;
})
.catch(error => {
console.log('Error trying to fetch collections: ' + error);
});
}
fetchCollection(collectionId) {
tainacan.get('/collections/' + collectionId)
.then((response) => {
this.setState({ collectionName: response.data.name });
}).catch(error => {
console.log('Error trying to fetch collection: ' + error);
});
}
fetchItem(itemId) {
tainacan.get('/collections/' + this.state.collectionId + '/items/' + itemId)
.then((response) => {
this.setState({ itemTitle: response.data.title });
}).catch(error => {
console.log('Error trying to fetch collection: ' + error);
});
}
selectCollection(selectedCollectionId) {
this.setState({
collectionId: selectedCollectionId,
searchURL: tainacan_blocks.admin_url + 'admin.php?itemsSingleSelectionMode=true&page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?status=publish'
});
this.props.onSelectCollection(selectedCollectionId);
this.fetchCollection(selectedCollectionId);
}
fetchCollections(name) {
if (this.state.collectionsRequestSource != undefined)
this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
let aCollectionRequestSource = axios.CancelToken.source();
this.setState({
collectionsRequestSource: aCollectionRequestSource,
isLoadingCollections: true,
collections: [],
items: []
});
let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage;
if (name != undefined && name != '')
endpoint += '&search=' + name;
if (this.state.collectionOrderBy == 'date')
endpoint += '&orderby=date&order=asc';
else if (this.state.collectionOrderBy == 'date-desc')
endpoint += '&orderby=date&order=desc';
else if (this.state.collectionOrderBy == 'title')
endpoint += '&orderby=title&order=asc';
else if (this.state.collectionOrderBy == 'title-desc')
endpoint += '&orderby=title&order=desc';
tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
.then(response => {
let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
this.setState({
isLoadingCollections: false,
collections: someCollections
});
return someCollections;
})
.catch(error => {
console.log('Error trying to fetch collections: ' + error);
});
}
fetchModalMetadataSections() {
let someModalMetadataSections = [];
let endpoint = '/collection/' + this.state.collectionId + '/metadata-sections/?nopaging=1';
this.setState({
isLoadingMetadataSections: true,
modalMetadataSections: someModalMetadataSections
});
tainacan.get(endpoint)
.then(response => {
let otherModalMetadataSections = this.state.modalMetadataSections;
for (let metadataSection of response.data) {
otherModalMetadataSections.push({
name: metadataSection.name,
id: metadataSection.id,
});
}
this.setState({
isLoadingMetadataSections: false,
modalMetadataSections: otherModalMetadataSections
});
return otherModalMetadataSections;
})
.catch(error => {
console.log('Error trying to fetch metadataSections: ' + error);
});
}
selectItem() {
let iframe = document.getElementById("itemsFrame");
if (iframe) {
let params = new URLSearchParams(iframe.contentWindow.location.search);
let selectedItems = params.getAll('selecteditems');
params.delete('selecteditems')
if (selectedItems[0]) {
this.setState({
itemId: selectedItems[0]
});
this.props.onSelectItem(selectedItems[0]);
this.fetchModalMetadataSections();
}
}
}
applySelectedMetadataSection(selectedMetadataSection) {
this.setState({
sectionId: selectedMetadataSection.id
});
this.props.onApplySelectedMetadataSection({
sectionId: selectedMetadataSection.id
});
}
resetCollections() {
this.setState({
collectionId: null,
collectionPage: 1,
modalCollections: []
});
this.fetchModalCollections();
}
resetItem() {
this.setState({
itemId: null,
});
}
cancelSelection() {
this.setState({
modalCollections: [],
modalMetadataSections: []
});
this.props.onCancelSelection();
}
render() {
return (this.state.collectionId && this.state.itemId) ? (
// metadataSections modal
<Modal
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a metadata section to show', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select metadata section', 'tainacan')}>
{(
this.state.modalMetadataSections.length > 0 ?
(
<div>
<div className="modal-radio-list">
<RadioControl
selected={ this.state.temporaryMetadataSectionId }
options={
this.state.modalMetadataSections.map((metadataSection) => {
return { label: metadataSection.name , value: '' + metadataSection.id }
})
}
onChange={ ( aMetadataSectionId ) => {
this.setState({
temporaryMetadataSectionId: aMetadataSectionId
});
} } />
</div>
<br/>
</div>
) : this.state.isLoadingMetadataSections ? <Spinner/> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no metadatum found.', 'tainacan') }</p>
</div>
)
}
<div className="modal-footer-area">
<Button
isSecondary
onClick={ () => { this.resetCollections(); }}>
{ __('Switch Collection', 'tainacan') }
</Button>
<Button
isSecondary
onClick={ () => { this.resetItem(); }}>
{ __('Switch Item', 'tainacan') }
</Button>
<Button
isPrimary
disabled={ this.state.temporaryMetadataSectionId == undefined || this.state.temporaryMetadataSectionId == null || this.state.temporaryMetadataSectionId == ''}
onClick={ () => { this.applySelectedMetadataSection(this.state.modalMetadataSections.find((metadataSection) => metadataSection.id == this.state.temporaryMetadataSectionId)); } }>
{ __('Use this metadata section', 'tainacan') }
</Button>
</div>
</Modal>
) : (
this.state.collectionId ? (
// Item modal
<Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
contentLabel={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }>
<iframe
id="itemsFrame"
src={ this.state.searchURL } />
<div className="modal-footer-area">
<Button
isSecondary
onClick={ () => { this.resetCollections() }}>
{__('Switch collection', 'tainacan')}
</Button>
<Button
style={{ marginLeft: 'auto' }}
isPrimary
onClick={ () => this.selectItem() }>
{ __('Use this item', 'tainacan') }
</Button>
</div>
</Modal>
) : (
// Collections modal
<Modal
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
contentLabel={__('Select item', 'tainacan')}>
<div>
<div className="modal-search-area">
<TextControl
label={__('Search for a collection', 'tainacan')}
placeholder={ __('Search by collection\'s name', 'tainacan') }
value={ this.state.searchCollectionName }
onChange={(value) => {
this.setState({
searchCollectionName: value
});
_.debounce(this.fetchCollections(value), 300);
}}/>
<SelectControl
label={__('Order by', 'tainacan')}
value={ this.state.collectionOrderBy }
options={ [
{ label: __('Latest', 'tainacan'), value: 'date-desc' },
{ label: __('Oldest', 'tainacan'), value: 'date' },
{ label: __('Name (A-Z)', 'tainacan'), value: 'title' },
{ label: __('Name (Z-A)', 'tainacan'), value: 'title-desc' }
] }
onChange={ ( aCollectionOrderBy ) => {
this.state.collectionOrderBy = aCollectionOrderBy;
this.state.collectionPage = 1;
this.setState({
collectionOrderBy: this.state.collectionOrderBy,
collectionPage: this.state.collectionPage
});
if (this.state.searchCollectionName && this.state.searchCollectionName != '') {
this.fetchCollections(this.state.searchCollectionName);
} else {
this.fetchModalCollections();
}
}}/>
</div>
{(
this.state.searchCollectionName != '' ? (
this.state.collections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.collections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
</div>
</div>
) :
this.state.isLoadingCollections ? (
<Spinner />
) :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>
):
this.state.modalCollections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.modalCollections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
</div>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
{
this.state.modalCollections.length < this.state.totalModalCollections ? (
<Button
isSecondary
isSmall
onClick={ () => this.fetchModalCollections() }>
{__('Load more', 'tainacan')}
</Button>
) : null
}
</div>
</div>
) : this.state.isLoadingCollections ? <Spinner/> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>
)}
<div className="modal-footer-area">
<Button
isSecondary
onClick={ () => { this.cancelSelection() }}>
{__('Cancel', 'tainacan')}
</Button>
<Button
isPrimary
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
onClick={ () => { this.selectCollection(this.state.temporaryCollectionId); } }>
{ __('Select item', 'tainacan') }
</Button>
</div>
</div>
</Modal>)
);
}
}

6
src/views/gutenberg-blocks/js/selection/single-item-metadatum-modal.js
View File

@ -292,7 +292,7 @@ export default class SingleItemModal extends React.Component {
return (this.state.collectionId && this.state.itemId) ? (
// Metadata modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a metadatum to show it\'s value', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select metadatum', 'tainacan')}>
@ -346,7 +346,7 @@ export default class SingleItemModal extends React.Component {
this.state.collectionId ? (
// Item modal
<Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < 5.9 ? 'wp-version-smaller-than-5-9' : '') }
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
@ -371,7 +371,7 @@ export default class SingleItemModal extends React.Component {
) : (
// Collections modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }

4
src/views/gutenberg-blocks/js/selection/single-item-modal.js
View File

@ -200,7 +200,7 @@ export default class SingleItemModal extends React.Component {
return this.state.collectionId ? (
// Items modal
<Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < 5.9 ? 'wp-version-smaller-than-5-9' : '') }
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }
@ -225,7 +225,7 @@ export default class SingleItemModal extends React.Component {
) : (
// Collections modal
<Modal
className="wp-block-tainacan-modal"
className={ 'wp-block-tainacan-modal ' + (currentWPVersion < '5.9' ? 'wp-version-smaller-than-5-9' : '') + (currentWPVersion < '6.1' ? 'wp-version-smaller-than-6-1' : '') }
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false }

23
src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss
View File

@ -16,7 +16,7 @@
.tainacan-block-placeholder.components-placeholder {
align-items: center !important;
margin-bottom: 0 !important;
background: var(--tainacan-block-gray0, $gray0);
background: var(--tainacan-block-gray0, $gray0) !important;
.components-placeholder__label {
margin-bottom: 0;
@ -52,20 +52,23 @@
// Generic style for selection modals ---------------------------
.wp-block-tainacan-modal {
width: 50%;
width: 50% !important;
@media only screen and (max-width: 1024px) { width: 75% }
@media only screen and (max-width: 768px) { width: 100%; }
@media only screen and (max-width: 1024px) { width: 75% !important; }
@media only screen and (max-width: 768px) { width: 100% !important; }
// Iframe for dynamic modal
&.dynamic-modal {
width: 90%;
width: 90% !important;
height: 90%;
width: 80vw;
width: 80vw !important;
height: 80vh;
iframe {
width: 100%;
height: calc(100% - 76px);
}
&.wp-version-smaller-than-6-1 iframe {
height: calc(100% - 96px);
}
&.wp-version-smaller-than-5-9 iframe {
@ -133,6 +136,7 @@
@media only screen and (max-width: 1024px) { width: 95% }
&:nth-child(2) {
flex-shrink: 2;
margin-left: 0.75em
}
.components-base-control__field {
flex-wrap: wrap;
@ -160,7 +164,8 @@
}
.modal-checkbox-list,
.modal-radio-list .components-base-control__field {
&.wp-version-smaller-than-6-1 .modal-radio-list .components-base-control__field,
&:not(.wp-version-smaller-than-6-1) .modal-radio-list .components-flex.components-h-stack.components-v-stack {
padding: 0;
@include display-grid;
-ms-grid-columns: 250px 250px;
@ -168,11 +173,12 @@
grid-gap: 0px;
justify-content: space-evenly;
list-style-type: none;
margin: 10px;
margin: 5px 0px;
padding: 2px;
max-height: 37vh;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
.components-base-control {
overflow: hidden;
@ -184,6 +190,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0.35em;
img {
width: 24px;