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

Rceives URL from modal and loads items list.

This commit is contained in:
Mateus Machado Luna 2019-04-29 12:27:42 -03:00
parent 6315da7589
commit f64887a5d9
4 changed files with 80 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/admin/components/lists/items-list.vue
View File

@ -914,19 +914,6 @@ export default {
this.selectedItemsIDs.push(false);
this.selectedItems.push(false);
}
// Disables every link in case we're inside an iframe
if (this.$route.query.iframemode) {
jQuery(document).ready(() =>{
jQuery('a[data-linkto="item"]').click((event) => {
this.$console.log("Preventing link navigation inside gutenberg modal iframe.");
event.preventDefault();
event.stopPropagation();
return false;
});
});
}
},
watch: {
selectedItems() {
@ -1193,7 +1180,7 @@ export default {
if (!metadata || itemMetadata == undefined) {
return '';
} else {
if (component != undefined && component == 'tainacan-textarea')
if ((component != undefined && component == 'tainacan-textarea') || this.$route.query.iframemode)
return metadata.value_as_string;
else
return metadata.value_as_html;

4
src/admin/scss/_iframe_read_mode_overrides.scss
View File

@ -48,9 +48,9 @@
.metadata-title { margin-left: 6px !important; padding-left: 6px !important; }
}
.tainacan-record {
&:hover { background-color: $gray0 !important; cursor: default; }
&:hover .media { background-color: $gray0 !important; cursor: default; }
.metadata-title { padding-left: 1.5rem !important; margin-bottom: -0.75rem; }
&:hover .metadata-title { background-color: $gray0 !important }
&:hover .metadata-title { background-color: $gray0 !important; cursor: default; }
}
.tainacan-masonry-item {
&:hover { background-color: transparent; cursor: default; }

38
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-modal.js
View File

@ -22,7 +22,7 @@ export default class DynamicItemsModal extends React.Component {
searchCollectionName: '',
collections: [],
collectionsRequestSource: undefined,
itemsURL: '',
searchURL: '',
};
// Bind events
@ -31,6 +31,7 @@ export default class DynamicItemsModal extends React.Component {
this.fetchCollections = this.fetchCollections.bind(this);
this.fetchModalCollections = this.fetchModalCollections.bind(this);
this.fetchCollection = this.fetchCollection.bind(this);
this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
}
componentWillMount() {
@ -41,7 +42,7 @@ export default class DynamicItemsModal extends React.Component {
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
this.fetchCollection(this.props.existingCollectionId);
this.setState({ itemsURL: this.props.existingItemsURL ? this.props.existingItemsURL : '/collections/'+ this.props.existingCollectionId + '/items/?readmode=true&iframemode=true' });
this.setState({ searchURL: this.props.existingsearchURL ? this.props.existingsearchURL : '/collections/'+ this.props.existingCollectionId + '/items/?readmode=true&iframemode=true' });
} else {
this.setState({ collectionPage: 1 });
this.fetchModalCollections();
@ -99,7 +100,7 @@ export default class DynamicItemsModal extends React.Component {
selectCollection(selectedCollectionId) {
this.setState({
collectionId: selectedCollectionId,
itemsURL: '/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true'
searchURL: '/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true'
});
this.props.onSelectCollection(selectedCollectionId);
@ -140,18 +141,29 @@ export default class DynamicItemsModal extends React.Component {
});
}
applySelectedSearchURL() {
this.props.onApplySearchURL(document.getElementById("itemsFrame").contentWindow.location.href);
}
resetCollections() {
this.setState({
itemsPage: 1,
collectionId: null,
collectionPage: 1,
modalCollections: [],
modalItems: []
modalCollections: []
});
this.fetchModalCollections();
}
cancelSelection() {
this.setState({
modalCollections: []
});
this.props.onCancelSelection();
}
render() {
return this.state.collectionId != null && this.state.collectionId != undefined ? (
// Items modal
@ -159,18 +171,20 @@ export default class DynamicItemsModal extends React.Component {
className="wp-block-tainacan-modal dynamic-modal"
title={__('Select the desired items from collection ' + this.state.collectionName, 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select items', 'tainacan')}>
<iframe src={ tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#' + this.state.itemsURL }></iframe>
contentLabel={__('Configure your items search to be shown on block', 'tainacan')}>
<iframe
id="itemsFrame"
src={ tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#' + this.state.searchURL } />
<div className="modal-footer-area">
<Button
isDefault
onClick={ () => { this.cancelSelection() }}>
{__('Cancel', 'tainacan')}
onClick={ () => { this.resetCollections() }}>
{__('Switch collection', 'tainacan')}
</Button>
<Button
isPrimary
onClick={ () => console.log("Feito!") }>
{__('Select items', 'tainacan')}
onClick={ () => this.applySelectedSearchURL() }>
{__('Use this search', 'tainacan')}
</Button>
</div>
</Modal>

134
src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
View File

@ -7,6 +7,8 @@ const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar }
const { InspectorControls, BlockControls } = wp.editor;
import DynamicItemsModal from './dynamic-items-modal.js';
import tainacan from '../../api-client/axios.js';
import axios from 'axios';
registerBlockType('tainacan/dynamic-items-list', {
title: __('Tainacan Dynamic Items List', 'tainacan'),
@ -19,56 +21,16 @@ registerBlockType('tainacan/dynamic-items-list', {
category: 'tainacan-blocks',
keywords: [ __( 'Tainacan', 'tainacan' ), __( 'items', 'tainacan' ), __( 'collection', 'tainacan' ) ],
attributes: {
selectedItemsObject: {
type: 'array',
source: 'query',
selector: 'a',
query: {
id: {
type: 'string',
source: 'attribute',
attribute: 'id'
},
url: {
type: 'string',
source: 'attribute',
attribute: 'href'
},
title: {
type: 'string',
source: 'text'
},
thumbnail: {
source: 'query',
selector: 'img',
query: {
src: {
source: 'attribute',
attribute: 'src'
},
alt: {
source: 'attribute',
attribute: 'alt'
},
}
},
},
default: []
},
content: {
type: 'array',
source: 'children',
selector: 'div'
},
query: {
type: Object,
default: {}
},
collectionId: {
type: String,
default: undefined
},
selectedItemsHTML: {
items: {
type: Array,
default: []
},
@ -91,6 +53,14 @@ registerBlockType('tainacan/dynamic-items-list', {
gridMargin: {
type: Number,
default: 0
},
searchURL: {
type: String,
default: undefined
},
itemsRequestSource: {
type: String,
default: undefined
}
},
supports: {
@ -99,15 +69,16 @@ registerBlockType('tainacan/dynamic-items-list', {
},
edit({ attributes, setAttributes, className, isSelected }){
let {
selectedItemsObject,
selectedItemsHTML,
items,
content,
collectionId,
showImage,
showName,
layout,
isModalOpen,
gridMargin
gridMargin,
searchURL,
itemsRequestSource
} = attributes;
function prepareItem(item) {
@ -115,11 +86,7 @@ registerBlockType('tainacan/dynamic-items-list', {
<li
key={ item.id }
className="item-list-item"
style={{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}}>
<IconButton
onClick={ () => removeItemOfId(item.id) }
icon="no-alt"
label={__('Remove', 'tainacan')}/>
style={{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}}>
<a
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url }
@ -136,21 +103,32 @@ registerBlockType('tainacan/dynamic-items-list', {
function setContent(){
selectedItemsHTML = [];
items = [];
for (let i = 0; i < selectedItemsObject.length; i++)
selectedItemsHTML.push(prepareItem(selectedItemsObject[i]));
if (itemsRequestSource != undefined)
itemsRequestSource.cancel('Previous items search canceled.');
setAttributes({
content: (
<ul
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
className={'items-list items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
{ selectedItemsHTML }
</ul>
),
selectedItemsHTML: selectedItemsHTML
});
let anItemsRequestSource = axios.CancelToken.source();
let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
tainacan.get(endpoint, { cancelToken: anItemsRequestSource.token })
.then(response => {
for (let item of response.data.items)
items.push(prepareItem(item));
setAttributes({
content: (
<ul
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
className={'items-list items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
{ items }
</ul>
),
items: items
});
});
}
function openDynamicItemsModal() {
@ -160,16 +138,6 @@ registerBlockType('tainacan/dynamic-items-list', {
} );
}
function removeItemOfId(itemId) {
let existingItemIndex = selectedItemsObject.findIndex((existingItem) => ((existingItem.id == 'item-id-' + itemId) || (existingItem.id == itemId)));
if (existingItemIndex >= 0)
selectedItemsObject.splice(existingItemIndex, 1);
setContent();
}
function updateLayout(newLayout) {
layout = newLayout;
@ -268,19 +236,19 @@ registerBlockType('tainacan/dynamic-items-list', {
{ isModalOpen ?
<DynamicItemsModal
existingCollectionId={ collectionId }
// selectedItemsObject={ selectedItemsObject }
existingsearchURL={ searchURL }
onSelectCollection={ (selectedCollectionId) => {
collectionId = selectedCollectionId;
setAttributes({ collectionId: collectionId });
}}
// onApplySelection={ (aSelectedItemsObject) =>{
// selectedItemsObject = aSelectedItemsObject
// setAttributes({
// selectedItemsObject: selectedItemsObject,
// isModalOpen: false
// });
// setContent();
// }}
onApplySearchURL={ (aSearchURL) =>{
searchURL = aSearchURL
setAttributes({
searchURL: searchURL,
isModalOpen: false
});
setContent();
}}
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
: null
}
@ -298,7 +266,7 @@ registerBlockType('tainacan/dynamic-items-list', {
) : null
}
{ !selectedItemsHTML.length ? (
{ !items.length ? (
<Placeholder
icon={(
<img
@ -312,7 +280,7 @@ registerBlockType('tainacan/dynamic-items-list', {
<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' : '')}>
{ selectedItemsHTML }
{ items }
</ul>
</div>