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

Adds first options to the item gallery block. #674.

This commit is contained in:
mateuswetah 2022-03-03 17:36:22 -03:00
parent 9030075eba
commit 56bf797bdb
6 changed files with 445 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/classes/theme-helper/template-tags.php
View File

@ -333,11 +333,14 @@ function tainacan_get_the_media_component(
$args['media_thumbs_id'] = $media_id . '-thumbs';
$args['media_id'] = $media_id;
ob_start();
if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
// Modal lightbox layer for rendering photoswipe
add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-gallery.css', array(), TAINACAN_VERSION);
?>
<script>
@ -422,7 +425,12 @@ function tainacan_get_the_media_component(
<?php endif; ?> <!-- End of if ($args['has_media_main'] || $args['has_media_thumbs'] ) -->
<?php
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}

60
src/views/gutenberg-blocks/blocks/item-gallery/block.json
View File

@ -2,6 +2,7 @@
"$schema": "https://schemas.wp.org/trunk/block.json",
"name": "tainacan/item-gallery",
"title": "Tainacan Item Gallery",
"apiVersion": 2,
"category": "tainacan-blocks",
"keywords": [ "item", "document", "carousel", "attachments", "zoom" ],
"description": "The media gallery of the item, displaying document and attachments.",
@ -12,6 +13,10 @@
}
},
"attributes": {
"blockId": {
"type": "string",
"default": ""
},
"content": {
"type": "array",
"source": "query",
@ -28,6 +33,61 @@
"isModalOpen": {
"type": "boolean",
"default": false
},
"layoutElements": {
"type": "object",
"default": {
"main": true,
"thumbnails": true
}
},
"mediaSources": {
"type": "object",
"default": {
"document": true,
"attachments": true,
"metadata": false
}
},
"hideFileNameMain": {
"type": "boolean",
"default": true
},
"hideFileCaptionMain": {
"type": "boolean",
"default": false
},
"hideFileDescriptionMain": {
"type": "boolean",
"default": true
},
"hideFileNameThumbnails": {
"type": "boolean",
"default": true
},
"hideFileCaptionThumbnails": {
"type": "boolean",
"default": true
},
"hideFileDescriptionThumbnails": {
"type": "boolean",
"default": true
},
"hideFileNameLightbox": {
"type": "boolean",
"default": false
},
"hideFileCaptionLightbox": {
"type": "boolean",
"default": false
},
"hideFileDescriptionLightbox": {
"type": "boolean",
"default": false
},
"openLightboxOnClick": {
"type": "boolean",
"default": true
}
},
"supports": {

241
src/views/gutenberg-blocks/blocks/item-gallery/edit.js
View File

@ -1,37 +1,47 @@
const { __ } = wp.i18n;
const { Spinner, Button, Placeholder } = wp.components;
const { Button, Placeholder, ToggleControl, PanelBody } = wp.components;
const { InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { serverSideRender: ServerSideRender } = wp.serverSideRender;
const { InspectorControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
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 }) {
export default function ({ attributes, setAttributes, className, isSelected, clientId }) {
let {
blockId,
content,
collectionId,
itemId,
isModalOpen,
isLoading,
layoutElements,
mediaSources,
hideFileNameMain,
hideFileCaptionMain,
hideFileDescriptionMain,
hideFileNameThumbnails,
hideFileCaptionThumbnails,
hideFileDescriptionThumbnails,
hideFileNameLightbox,
hideFileCaptionLightbox,
hideFileDescriptionLightbox,
openLightboxOnClick
} = attributes;
function setContent(){
}
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
function openSingleItemModal() {
isModalOpen = true;
setAttributes( {
isModalOpen: isModalOpen
} );
});
}
// Executed only on the first load of page
if(content && content.length && content[0].type)
setContent();
return content == 'preview' ?
<div className={className}>
<img
@ -39,7 +49,182 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
src={ `${tainacan_blocks.base_url}/assets/images/related-carousel-items.png` } />
</div>
: (
<div className={className}>
<div { ...blockProps }>
<InspectorControls>
<PanelBody
title={__('Media item sources', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Document', 'tainacan')}
checked={ mediaSources['document'] === true }
onChange={ ( isChecked ) => {
let updatedSources = JSON.parse(JSON.stringify(mediaSources));
updatedSources['document'] = isChecked;
setAttributes({ mediaSources: updatedSources });
}
}
/>
<ToggleControl
label={__('Attachments', 'tainacan')}
checked={ mediaSources['attachments'] === true }
onChange={ ( isChecked ) => {
let updatedSources = JSON.parse(JSON.stringify(mediaSources));
updatedSources['attachments'] = isChecked;
setAttributes({ mediaSources: updatedSources });
}
}
/>
<ToggleControl
label={__('Metadata', 'tainacan')}
checked={ mediaSources['metadata'] === true }
onChange={ ( isChecked ) => {
let updatedSources = JSON.parse(JSON.stringify(mediaSources));
updatedSources['metadata'] = isChecked;
setAttributes({ mediaSources: updatedSources });
}
}
/>
</PanelBody>
<PanelBody
title={__('Layout elements', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Main slider', 'tainacan')}
checked={ layoutElements['main'] === true }
onChange={ ( isChecked ) => {
let updatedElements = JSON.parse(JSON.stringify(layoutElements));
updatedElements['main'] = isChecked;
setAttributes({ layoutElements: updatedElements });
}
}
/>
<ToggleControl
label={__('Thumbnails carousel', 'tainacan')}
checked={ layoutElements['thumbnails'] === true }
onChange={ (isChecked) => {
let updatedElements = JSON.parse(JSON.stringify(layoutElements));
updatedElements['thumbnails'] = isChecked;
setAttributes({ layoutElements: updatedElements });
}
}
/>
<ToggleControl
label={__('Open lightbox on click', 'tainacan')}
checked={ openLightboxOnClick }
onChange={ ( isChecked ) => {
openLightboxOnClick = isChecked;
setAttributes({ openLightboxOnClick: openLightboxOnClick });
}
}
/>
</PanelBody>
{ layoutElements['main'] === true ?
<PanelBody
title={__('Main slider settings', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameMain }
onChange={ ( isChecked ) => {
hideFileNameMain = isChecked;
setAttributes({ hideFileNameMain: hideFileNameMain });
}
}
/>
<ToggleControl
label={__('Hide file caption', 'tainacan')}
checked={ hideFileCaptionMain }
onChange={ ( isChecked ) => {
hideFileCaptionMain = isChecked;
setAttributes({ hideFileCaptionMain: hideFileCaptionMain });
}
}
/>
<ToggleControl
label={__('Hide file description', 'tainacan')}
checked={ hideFileDescriptionMain }
onChange={ ( isChecked ) => {
hideFileDescriptionMain = isChecked;
setAttributes({ hideFileDescriptionMain: hideFileDescriptionMain });
}
}
/>
</PanelBody>
: null }
{ layoutElements['thumbnails'] === true ?
<PanelBody
title={__('Thumbnails carousel settings', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameThumbnails }
onChange={ ( isChecked ) => {
hideFileNameThumbnails = isChecked;
setAttributes({ hideFileNameThumbnails: hideFileNameThumbnails });
}
}
/>
<ToggleControl
label={__('Hide file caption', 'tainacan')}
checked={ hideFileCaptionThumbnails }
onChange={ ( isChecked ) => {
hideFileCaptionThumbnails = isChecked;
setAttributes({ hideFileCaptionThumbnails: hideFileCaptionThumbnails });
}
}
/>
<ToggleControl
label={__('Hide file description', 'tainacan')}
checked={ hideFileDescriptionThumbnails }
onChange={ ( isChecked ) => {
hideFileDescriptionThumbnails = isChecked;
setAttributes({ hideFileDescriptionThumbnails: hideFileDescriptionThumbnails });
}
}
/>
</PanelBody>
: null }
{ openLightboxOnClick ?
<PanelBody
title={__('Lightbox settings', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameLightbox }
onChange={ ( isChecked ) => {
hideFileNameLightbox = isChecked;
setAttributes({ hideFileNameLightbox: hideFileNameLightbox });
}
}
/>
<ToggleControl
label={__('Hide file caption', 'tainacan')}
checked={ hideFileCaptionLightbox }
onChange={ ( isChecked ) => {
hideFileCaptionLightbox = isChecked;
setAttributes({ hideFileCaptionLightbox: hideFileCaptionLightbox });
}
}
/>
<ToggleControl
label={__('Hide file description', 'tainacan')}
checked={ hideFileDescriptionLightbox }
onChange={ ( isChecked ) => {
hideFileDescriptionLightbox = isChecked;
setAttributes({ hideFileDescriptionLightbox: hideFileDescriptionLightbox });
}
}
/>
</PanelBody>
: null }
</InspectorControls>
{ isSelected ?
(
@ -51,29 +236,17 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
existingCollectionId={ collectionId }
existingItemId={ itemId }
onSelectCollection={ (selectedCollectionId) => {
// if (collectionId != selectedCollectionId)
// relatedItems = [];
collectionId = selectedCollectionId;
setAttributes({
collectionId: collectionId,
// relatedItems: relatedItems
collectionId: collectionId
});
}}
onApplySelectedItem={ (selectedItemId) => {
// if (itemId != selectedItemId) {
// relatedItems = [];
// relatedItemsTemplate = [];
// }
itemId = selectedItemId;
setAttributes({
itemId: itemId,
// relatedItems: relatedItems,
// relatedItemsTemplate: relatedItemsTemplate,
isModalOpen: false
});
setContent();
}}
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
: null
@ -83,7 +256,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
) : null
}
{ !itemId && !isLoading ? (
{ !itemId ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(
@ -112,20 +285,16 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
) : null
}
{ isLoading ?
<div class="spinner-container">
<Spinner />
</div> :
<div>
{ itemId ? (
<div className={ 'item-gallery-edit-container' }>
{ JSON.stringify(attributes) }
{/* <ServerSideRender
block="tainacan/facets-list"
/> */}
</div>
) : null
}
</div>
}
</div>
);

154
src/views/gutenberg-blocks/blocks/item-gallery/save.php Normal file
View File

@ -0,0 +1,154 @@
<?php
/**
* Renders the content of the item gallery block
* using Tainacan template functions that create
* a Swiper.js carousel and slider, with a PhotoSwipe.js
* lightbox
*/
function tainacan_blocks_render_items_gallery( $block_attributes, $content ) {
if ( !isset($block_attributes['itemId']) )
return '';
// Gets options from block attributes
$item_id = $block_attributes['itemId'];
$block_id = $block_attributes['blockId'];
$layout_elements = isset($block_attributes['layoutElements']) ? $block_attributes['layoutElements'] : array('main' => true, 'thumbnails' => true);
$media_sources = isset($block_attributes['mediaSources']) ? $block_attributes['mediaSources'] : array( 'document' => true, 'attachments' => true, 'metadata' => false);
$hide_file_name_main = isset($block_attributes['hideFileNameMain']) ? $block_attributes['hideFileNameMain'] : true;
$hide_file_caption_main = isset($block_attributes['hideFileCaptionMain']) ? $block_attributes['hideFileCaptionMain'] : false;
$hide_file_description_main = isset($block_attributes['hideFileDescriptionMain']) ? $block_attributes['hideFileDescriptionMain'] : true;
$hide_file_name_thumbnails = isset($block_attributes['hideFileNameThumbnails']) ? $block_attributes['hideFileNameThumbnails'] : true;
$hide_file_caption_thumbnails = isset($block_attributes['hideFileCaptionThumbnails']) ? $block_attributes['hideFileCaptionThumbnails'] : true;
$hide_file_description_thumbnails = isset($block_attributes['hideFileDescriptionThumbnails']) ? $block_attributes['hideFileDescriptionThumbnails'] : true;
$hide_file_name_lightbox = isset($block_attributes['hideFileNameLightbox']) ? $block_attributes['hideFileNameLightbox'] : false;
$hide_file_caption_lightbox = isset($block_attributes['hideFileCaptionLightbox']) ? $block_attributes['hideFileCaptionLightbox'] : false;
$hide_file_description_lightbox = isset($block_attributes['hideFileDescriptionLightbox']) ? $block_attributes['hideFileDescriptionLightbox'] : false;
$open_lightbox_on_click = isset($block_attributes['openLightboxOnClick']) ? $block_attributes['openLightboxOnClick'] : true;
$media_items_main = array();
$media_items_thumbnails = array();
if ( isset($media_sources['attachments']) && $media_sources['attachments'] )
$attachments = tainacan_get_the_attachments(null, $item_id);
if ( isset($layout_elements['main']) && $layout_elements['main'] ) {
$class_slide_metadata = '';
if ($hide_file_name_main)
$class_slide_metadata .= ' hide-name';
if ($hide_file_description_main)
$class_slide_metadata .= ' hide-description';
if ($hide_file_caption_main)
$class_slide_metadata .= ' hide-caption';
if ( isset($media_sources['document']) && $media_sources['document'] && !empty(tainacan_get_the_document($item_id)) ) {
$is_document_type_attachment = tainacan_get_the_document_type($item_id) === 'attachment';
$media_items_main[] =
tainacan_get_the_media_component_slide(array(
'after_slide_metadata' => (( !get_theme_mod( 'tainacan_single_item_hide_download_document', false ) && tainacan_the_item_document_download_link($item_id) != '' ) ?
('<span class="tainacan-item-file-download">' . tainacan_the_item_document_download_link($item_id) . '</span>')
: ''),
'media_content' => tainacan_get_the_document($item_id),
'media_content_full' => $is_document_type_attachment ? tainacan_get_the_document($item_id, 'full') : ('<div class="attachment-without-image">' . tainacan_get_the_document($item_id, 'full') . '</div>'),
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw($item_id)) : '',
'media_description' => $is_document_type_attachment ? get_the_content(null, false, tainacan_get_the_document_raw($item_id)) : '',
'media_caption' => $is_document_type_attachment ? wp_get_attachment_caption(tainacan_get_the_document_raw($item_id)) : '',
'media_type' => tainacan_get_the_document_type($item_id),
'class_slide_metadata' => $class_slide_metadata
));
}
if ( isset($media_sources['attachments']) && $media_sources['attachments'] ) {
foreach ( $attachments as $attachment ) {
$media_items_main[] =
tainacan_get_the_media_component_slide(array(
'after_slide_metadata' => (( !get_theme_mod( 'tainacan_single_item_hide_download_document', false ) && tainacan_the_item_attachment_download_link($attachment->ID) != '' ) ?
'<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>'
: ''),
'media_content' => tainacan_get_attachment_as_html($attachment->ID, $item_id),
'media_content_full' => wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : ('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe" src="' . tainacan_get_attachment_html_url($attachment->ID) . '"></iframe></div>'),
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
'media_caption' => $attachment->post_excerpt,
'media_type' => $attachment->post_mime_type,
'class_slide_metadata' => $class_slide_metadata
));
}
}
}
if ( isset($layout_elements['thumbnails']) && $layout_elements['thumbnails'] ) {
$class_slide_metadata = '';
if ($hide_file_name_thumbnails)
$class_slide_metadata .= ' hide-name';
if ($hide_file_description_thumbnails)
$class_slide_metadata .= ' hide-description';
if ($hide_file_caption_thumbnails)
$class_slide_metadata .= ' hide-caption';
if ( isset($media_sources['document']) && $media_sources['document'] && !empty(tainacan_get_the_document($item_id)) ) {
$is_document_type_attachment = tainacan_get_the_document_type($item_id) === 'attachment';
$media_items_thumbnails[] =
tainacan_get_the_media_component_slide(array(
'media_content' => get_the_post_thumbnail(null, 'tainacan-medium'),
'media_content_full' => $is_document_type_attachment ? tainacan_get_the_document($item_id, 'full') : ('<div class="attachment-without-image">' . tainacan_get_the_document($item_id, 'full') . '</div>'),
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw($item_id)) : '',
'media_description' => $is_document_type_attachment ? get_the_content(null, false, tainacan_get_the_document_raw($item_id)) : '',
'media_caption' => $is_document_type_attachment ? wp_get_attachment_caption(tainacan_get_the_document_raw($item_id)) : '',
'media_type' => tainacan_get_the_document_type($item_id),
'class_slide_metadata' => $class_slide_metadata
));
}
if ( isset($media_sources['attachments']) && $media_sources['attachments'] ) {
foreach ( $attachments as $attachment ) {
$media_items_thumbnails[] =
tainacan_get_the_media_component_slide(array(
'media_content' => wp_get_attachment_image( $attachment->ID, 'tainacan-medium', false ),
'media_content_full' => wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : ('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe" src="' . tainacan_get_attachment_html_url($attachment->ID) . '"></iframe></div>'),
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
'media_caption' => $attachment->post_excerpt,
'media_type' => $attachment->post_mime_type,
'class_slide_metadata' => $class_slide_metadata
));
}
}
}
$wrapper_attributes = get_block_wrapper_attributes();
return sprintf(
'<div %1$s>%2$s</div>',
$wrapper_attributes,
tainacan_get_the_media_component(
'tainacan-item-gallery-block_id-' . $block_id,
(isset($layout_elements['thumbnails']) && $layout_elements['thumbnails']) ? $media_items_thumbnails : null,
(isset($layout_elements['main']) && $layout_elements['main']) ? $media_items_main : null,
array(
'class_main_div' => '',
'class_thumbs_div' => '',
'swiper_main_options' => (isset($layout_elements['main']) && $layout_elements['main']) ? array(
'navigation' => array(
'nextEl' => '.swiper-navigation-next_' . 'tainacan-item-gallery-block_id-' . $block_id . '-main',
'prevEl' => '.swiper-navigation-prev_' . 'tainacan-item-gallery-block_id-' . $block_id . '-main',
'preloadImages' => false,
'lazy' => true
)
) : '',
'swiper_thumbs_options' => (isset($layout_elements['thumbnails']) && $layout_elements['thumbnails'] && (!isset($layout_elements['main']) || !$layout_elements['main']) ) ? array(
'navigation' => array(
'nextEl' => '.swiper-navigation-next_' . 'tainacan-item-gallery-block_id-' . $block_id . '-thumbs',
'prevEl' => '.swiper-navigation-prev_' . 'tainacan-item-gallery-block_id-' . $block_id . '-thumbs',
'preloadImages' => false,
'lazy' => true
)
) : '',
'disable_lightbox' => !$open_lightbox_on_click,
)
)
);
}

12
src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php
View File

@ -82,15 +82,6 @@ function tainacan_blocks_register_and_enqueue_all_blocks() {
}
}
/**
* Plugin Name: Gutenberg examples dynamic
*/
function tainacan_blocks_render_items_gallery( $block_attributes, $content ) {
$content = '<p>TESTE</p>';
return '<h1>EITA</h1>';
}
/**
* Registers a 'generic' Tainacan Block, according to the TAINACAN_BLOCKs array
*
@ -109,6 +100,7 @@ function tainacan_blocks_register_block($block_slug, $options = []) {
// If there is a server side render callback, we add its render function
if ( isset($options['render_callback']) ) {
require_once( __DIR__ . '/blocks/' . $block_slug . '/save.php' );
$register_params['render_callback'] = $options['render_callback'];
$register_params['skip_inner_blocks'] = true;
@ -120,7 +112,7 @@ function tainacan_blocks_register_block($block_slug, $options = []) {
}
// Defines dependencies for editor script
$editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components');
$editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-server-side-render');
if ( version_compare( $wp_version, '5.2', '<') )
$editor_script_deps[] = 'wp-editor';
else

13
src/views/gutenberg-blocks/tainacan-blocks-common-scripts.js
View File

@ -23,8 +23,7 @@ const addDataModuleToOldBlocks = () => {
'carousel-items-list',
'carousel-terms-list',
'related-items-list',
'carousel-collections-list',
'item-gallery'
'carousel-collections-list'
];
// Looks for Tainacan Blocks based on their classes.
@ -36,7 +35,7 @@ const addDataModuleToOldBlocks = () => {
});
});
// Extra case for the items list and item submission, as their
// Extra case for the items list, item gallery and item submission, as their
// theme wrapper does not uses gutenberg classes, but the div ID
let existingItemListOnPage = document.getElementById('tainacan-items-page');
if ( existingItemListOnPage && !existingItemListOnPage.getAttribute('data-module') )
@ -45,6 +44,14 @@ const addDataModuleToOldBlocks = () => {
let existingItemSubmissionFormOnPage = document.getElementById('tainacan-item-submission-form');
if ( existingItemSubmissionFormOnPage && !existingItemSubmissionFormOnPage.getAttribute('data-module') )
existingItemSubmissionFormOnPage.setAttribute('data-module', 'item-submission-form');
let existingItemGalleryOnPages = document.getElementsByClassName('wp-block-tainacan-item-gallery');
[...existingItemGalleryOnPages].forEach((existingItemGalleryOnPage) => {
let mediaComponentDiv = existingItemGalleryOnPage.getElementsByClassName('tainacan-media-component');
if ( mediaComponentDiv[0] && !mediaComponentDiv[0].getAttribute('data-module') )
mediaComponentDiv[0].setAttribute('data-module', 'item-gallery');
});
}
performWhenDocumentIsLoaded(() => {