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

Merge pull request #615 from tainacan/feature/612 

Feature/612 - Different layouts for related items templates.
This commit is contained in:
Mateus Machado Luna 2021-10-14 16:58:58 -03:00 committed by GitHub
parent 3d61aef836 c61aa92754
commit 732464e123
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 237 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
compile-sass.sh
View File

@ -40,7 +40,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/b
sass -E 'UTF-8' --cache-location .tmp/sass-cache-16 src/views/gutenberg-blocks/blocks/item-submission-form/style.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-17 src/views/gutenberg-blocks/blocks/carousel-related-items/style.scss:src/assets/css/tainacan-gutenberg-block-carousel-related-items.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-17 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-related-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-18 src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss:src/assets/css/tainacan-gutenberg-block-common-editor-styles.css

51
src/assets/css/tainacan-gutenberg-block-related-items-list.css Normal file
View File

@ -0,0 +1,51 @@
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%; }
.wp-block-tainacan-related-items .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: var(--tainacan-block-gray4, #555758); }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-related-items .skeleton {
border-radius: 2px;
background: var(--tainacan-block-gray1, #f2f2f2);
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-related-items .related-items-edit-container {
position: relative; }
.wp-block-tainacan-related-items .related-items-edit-container .skeleton {
min-height: 150px; }
/*# sourceMappingURL=tainacan-gutenberg-block-related-items-list.css.map */

7
src/assets/css/tainacan-gutenberg-block-related-items-list.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
"names": [],
"file": "tainacan-gutenberg-block-related-items-list.css"
}

129
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -49,6 +49,7 @@ class Theme_Helper {
add_shortcode( 'tainacan-search', array($this, 'search_shortcode'));
add_shortcode( 'tainacan-item-submission', array($this, 'item_submission_shortcode'));
add_shortcode( 'tainacan-items-carousel', array($this, 'get_tainacan_items_carousel'));
add_shortcode( 'tainacan-dynamic-items-list', array($this, 'get_tainacan_dynamic_items_list'));
add_shortcode( 'tainacan-related-items-carousel', array($this, 'get_tainacan_related_items_carousel'));
add_action( 'generate_rewrite_rules', array( &$this, 'rewrite_rules' ), 10, 1 );
@ -883,22 +884,100 @@ class Theme_Helper {
}
/**
* Returns a group of related items carousels
* Returns the div used by Vue to render the Dynamic List of Related Items
*
* @param array $args {
* Optional. Array of arguments.
* @type string $collection_id The Collection ID
* @type string $search_URL A query string to fetch items from, if load strategy is 'search'
* @type array $selected_items An array of item IDs to fetch items from, if load strategy is 'selection' and an array of items, if the load strategy is 'parent'
* @type string $load_strategy Either 'search' or 'selection', to determine how items will be fetch
* @type integer $max_items_number Maximum number of items to be fetch
* @type integer $max_columns_count Maximum columns cound (used by grid and list layouts)
* @type integer $grid_margin Margin around items in every layout
* @type string $show_name Show the item title
* @type string $show_image Show the item thumbnail
* @type string $layout Either 'grid', 'list' or 'mosaic'
* @type string $crop_images_to_square Force images shape to be squared
* @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background
* @type string $collection_text_color Color of the collection header text
* @type string $tainacan_api_root Path of the Tainacan api root (to make the items request)
* @type string $tainacan_base_url Path of the Tainacan base URL (to make the links to the items)
* @type string $class_name Extra class to add to the wrapper, besides the default wp-block-tainacan-carousel-items-list
* @type string $mosaic_height Height of the panel in the 'mosaic' layout
* @type string $mosaic_density
* @type string $mosaic_grid_rows
* @type string $mosaic_grid_columns
* @type string $mosaic_item_focal_point_x
* @type string $mosaic_item_focal_point_y
* @return string The HTML div to be used for rendering the items carousel vue component
*/
public function get_tainacan_dynamic_items_list($args = []) {
if (!is_array($args))
return __('There are missing parameters for Tainacan Items Block/shortcode', 'tainacan');
$defaults = array(
'max_items_number' => 12,
'max_columns_count' => 6,
'grid_margin' => 12,
'show_name' => true,
'show_image' => true,
'layout' => 'grid',
'crop_images_to_square' => true,
'show_collection_header' => false,
'show_collection_label' => false,
'collection_background_color' => '#454647',
'collection_text_color' => '#ffffff',
'tainacan_api_root' => '',
'tainacan_base_url' => '',
'class_name' => '',
'mosaic_height' => 280,
'mosaic_density' => 5,
'mosaic_grid_rows' => 3,
'mosaic_grid_columns' => 4,
'mosaic_item_focal_point_x' => 0.5,
'mosaic_item_focal_point_y' => 0.5
);
$args = wp_parse_args($args, $defaults);
$props = ' ';
// Always pass the class needed by Vue to mount the component;
$args['class'] = $args['class_name'] . ' wp-block-tainacan-dynamic-items-list';
unset($args['class_name']);
// Builds parameters to the html div rendered by Vue
foreach ($args as $key => $value) {
if (is_bool($value))
$value = $value ? 'true' : 'false';
// Changes from PHP '_' notation to HTML '-' notation
$props .= (str_replace('_', '-', $key) . "='" . $value . "' ");
}
return "<div data-module='dynamic-items-list' id='tainacan-dynamic-items-list-shortcode' $props ></div>";
}
/**
* Returns a group of related items list
* For each metatada, the collection name, the metadata name and a button linking
* the items list filtered is presented
*
* @param array $args {
* Optional. Array of arguments.
* @type string $item_id The Item ID
* @type string $items_list_layout The type of list to be rendered. Accepts 'grid', 'list', 'mosaic' and 'carousel'.
* @type string $class_name Extra class to add to the wrapper, besides the default wp-block-tainacan-carousel-related-items
* @type string $collection_heading_class_name Extra class to add to the collection name wrapper. Defaults to ''
* @type string $collection_heading_tag Tag to be used as wrapper of the collection name. Defaults to h2
* @type string $metadata_label_class_name Extra class to add to the metadata label wrapper. Defaults to ''
* @type string $metadata_label_tag Tag to be used as wrapper of the metadata label. Defaults to p
* @type array $carousel_args Array of arguments to be passed to the get_tainacan_items_carousel function
* @type array $carousel_args Array of arguments to be passed to the get_tainacan_items_carousel function if $items_list_layout == carousel
* @type array $dynamic_items_args Array of arguments to be passed to the get_tainacan_dynamic_items function if $items_list_layout != carousel
* @return string The HTML div to be used for rendering the related items vue component
*/
public function get_tainacan_related_items_carousel($args = []) {
public function get_tainacan_related_items_list($args = []) {
global $TAINACAN_BASE_URL;
global $TAINACAN_VERSION;
@ -908,7 +987,8 @@ class Theme_Helper {
'collection_heading_tag' => 'h2',
'metadata_label_class_name' => '',
'metadata_label_tag' => 'p',
'carousel_args' => []
'carousel_args' => [],
'dynamic_items_args' => []
);
$args = wp_parse_args($args, $defaults);
@ -922,8 +1002,8 @@ class Theme_Helper {
if (!count($related_items))
return;
// Always pass the default class;
$output = '<div data-module="carousel-related-items" class="' . $args['class_name'] . ' wp-block-tainacan-carousel-related-items' . '">';
// Always pass the default class. We force passing the wp-block-tainacan-carousel-related-items because themes might have used it to style before the other layouts exist;
$output = '<div data-module="related-items-list" class="' . $args['class_name'] . ' wp-block-tainacan-carousel-related-items wp-block-tainacan-related-items' . '">';
foreach($related_items as $collection_id => $related_group) {
@ -942,23 +1022,34 @@ class Theme_Helper {
}
// Sets the carousel, from the items carousel template tag.
$carousel_div = '';
$items_list_div = '';
if ( isset($related_group['collection_id']) ) {
$carousel_args = wp_parse_args([
'collection_id' => $related_group['collection_id'],
'load_strategy' => 'parent',
'selected_items' => json_encode($related_group['items'])
], $args['carousel_args']);
if ( isset($args['items_list_layout']) && $args['items_list_layout'] !== 'carousel' ) {
$items_list_args = wp_parse_args([
'collection_id' => $related_group['collection_id'],
'load_strategy' => 'parent',
'selected_items' => json_encode($related_group['items']),
'layout' => $args['items_list_layout']
], $args['dynamic_items_args']);
$carousel_div = $this->get_tainacan_items_carousel($carousel_args);
$items_list_div = $this->get_tainacan_dynamic_items_list($items_list_args);
} else {
$items_list_args = wp_parse_args([
'collection_id' => $related_group['collection_id'],
'load_strategy' => 'parent',
'selected_items' => json_encode($related_group['items'])
], $args['carousel_args']);
$items_list_div = $this->get_tainacan_items_carousel($items_list_args);
}
}
$output .= '<div class="wp-block-group">
<div class="wp-block-group__inner-container">' .
$collection_heading .
$metadata_label .
$carousel_div .
$items_list_div .
(
$related_group['total_items'] > 1 ?
'<div class="wp-block-buttons">
@ -981,5 +1072,15 @@ class Theme_Helper {
return $output;
}
/**
* Returns a group of related items list carousel
* This is just a pre-set version of the get_tainacan_related_items function kept for
* compatibility with previous versions.
*/
public function get_tainacan_related_items_carousel($args = []) {
$args = wp_parse_args($args, [ 'items_list_layout' => 'carousel' ]);
return $this->get_tainacan_related_items_list($args);
}
}

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

@ -1030,7 +1030,7 @@ function tainacan_the_items_carousel($args = []) {
}
/**
* Displays a group of related items carousels
* Displays a group of related items lists
* For each metatada, the collection name, the metadata name and a button linking
* the items list filtered is presented
*
@ -1039,10 +1039,24 @@ function tainacan_the_items_carousel($args = []) {
* @type string $item_id The Item ID
* @return void
*/
function tainacan_the_related_items($args = []) {
echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_related_items_list($args);
}
/**
* Displays a group of related items carousels
* This is a preset version of tainacan_the_related_items, to keep compatibility with previous versions
*
* @param array $args {
* Optional. Array of arguments.
* @type string $item_id The Item ID
* @return void
*/
function tainacan_the_related_items_carousel($args = []) {
echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_related_items_carousel($args);
}
/**
* Checks if the current item has or not related items
*/

14
src/views/gutenberg-blocks/blocks/carousel-related-items/block.json → src/views/gutenberg-blocks/blocks/related-items-list/block.json
View File

@ -1,9 +1,9 @@
{
"name": "tainacan/carousel-related-items",
"title": "Tainacan Related Items Carousel",
"name": "tainacan/related-items-list",
"title": "Tainacan Related Items List",
"category": "tainacan-blocks",
"keywords": [ "items", "carousel", "slider", "relationship" ],
"description": "A set of carousels to list items related to a certain item via relationship metadata.",
"description": "A set of lists to display items related to a certain item via relationship metadata.",
"textdomain": "tainacan",
"example": {
"attributes": {
@ -40,6 +40,10 @@
"itemRequestSource": {
"type": "String",
"default": ""
},
"itemsListlayout": {
"type": "String",
"default": "carousel"
}
},
"supports": {
@ -47,6 +51,6 @@
"html": false,
"multiple": true
},
"editorScript": "carousel-related-items",
"editorStyle": "carousel-related-items"
"editorScript": "related-items-list",
"editorStyle": "related-items-list"
}

0
src/views/gutenberg-blocks/blocks/carousel-related-items/deprecated.js → src/views/gutenberg-blocks/blocks/related-items-list/deprecated.js
View File

49
src/views/gutenberg-blocks/blocks/carousel-related-items/edit.js → src/views/gutenberg-blocks/blocks/related-items-list/edit.js
View File

@ -2,9 +2,9 @@ const { __ } = wp.i18n;
const { Spinner, Button, Placeholder } = wp.components;
const { InnerBlocks} = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import CarouselRelatedItemsModal from './carousel-related-items-modal.js';
import RelatedItemsModal from './related-items-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@ -18,10 +18,10 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
relatedItems,
isLoading,
itemRequestSource,
relatedItemsTemplate
relatedItemsTemplate,
itemsListlayout
} = attributes;
function setContent(){
isLoading = true;
@ -59,6 +59,28 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
function getRelatedItemsTemplates() {
relatedItemsTemplate = [];
innerItemsList = itemsListlayout !== 'carousel' ?
[
'tainacan/dynamic-items-list',
{
content: [{ type: 'innerblock' }],
selectedItems: collection.items,
loadStrategy: 'parent',
collectionId: collection.collection_id,
layout: itemsListlayout
}
] :
[
'tainacan/carousel-items-list',
{
content: [{ type: 'innerblock' }],
selectedItems: collection.items,
loadStrategy: 'parent',
collectionId: collection.collection_id
}
],
relatedItems.forEach((collection) => {
if (collection.total_items) {
@ -76,19 +98,11 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
[
'core/paragraph',
{
placeholder: __( 'Relationship metadadum name', 'tainacan' ),
placeholder: __( 'Relationship metadatum name', 'tainacan' ),
content: collection.metadata_name
}
],
[
'tainacan/carousel-items-list',
{
content: [{ type: 'innerblock' }],
selectedItems: collection.items,
loadStrategy: 'parent',
collectionId: collection.collection_id
}
],
innerItemsList,
[
'core/buttons',
{},
@ -130,7 +144,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
(
<div>
{ isModalOpen ?
<CarouselRelatedItemsModal
<RelatedItemsModal
existingCollectionId={ collectionId }
existingItemId={ itemId }
onSelectCollection={ (selectedCollectionId) => {
@ -183,7 +197,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
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 create a set of carousels with items related to it via relationship metadata.', 'tainacan')}
{__('Select an item to create a set of lists with items related to it via relationship metadata.', 'tainacan')}
</p>
<Button
isPrimary
@ -202,12 +216,13 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
<div>
{ relatedItems.length ? (
<div className={ 'carousel-related-items-edit-container' }>
<div className={ 'related-items-edit-container' }>
<InnerBlocks
allowedBlocks={[
'core/heading',
'core/paragraph',
'tainacan/carousel-items-list',
'tainacan/dynamic-items-list',
'core/buttons'
]}
template={ relatedItemsTemplate } />

0
src/views/gutenberg-blocks/blocks/carousel-related-items/icon.js → src/views/gutenberg-blocks/blocks/related-items-list/icon.js
View File

0
src/views/gutenberg-blocks/blocks/carousel-related-items/index.js → src/views/gutenberg-blocks/blocks/related-items-list/index.js
View File

2
src/views/gutenberg-blocks/blocks/carousel-related-items/carousel-related-items-modal.js → src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js
View File

@ -5,7 +5,7 @@ const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
export default class CarouselRelatedItemsModal extends React.Component {
export default class RelatedItemsModal extends React.Component {
constructor(props) {
super(props);

2
src/views/gutenberg-blocks/blocks/carousel-related-items/save.js → src/views/gutenberg-blocks/blocks/related-items-list/save.js
View File

@ -1,5 +1,5 @@
const { InnerBlocks} = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default function({ className }) {
return <div data-module="carousel-related-items" className={ className }><InnerBlocks.Content /></div>
return <div data-module="related-items-list" className={ className }><InnerBlocks.Content /></div>
};

4
src/views/gutenberg-blocks/blocks/carousel-related-items/style.scss → src/views/gutenberg-blocks/blocks/related-items-list/style.scss
View File

@ -1,6 +1,6 @@
@import '../../scss/gutenberg-blocks-variables.scss';
.wp-block-tainacan-carousel-related-items {
.wp-block-tainacan-related-items {
margin: 0.5em auto;
width: 100%;
@ -46,7 +46,7 @@
}
// Placeholder on editor side ----------------------------------------------------
.carousel-related-items-edit-container {
.related-items-edit-container {
position: relative;
& .skeleton {

0
src/views/gutenberg-blocks/blocks/carousel-related-items/theme.js → src/views/gutenberg-blocks/blocks/related-items-list/theme.js
View File

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

@ -12,7 +12,7 @@ const TAINACAN_BLOCKS = [
'carousel-items-list' => [],
'carousel-terms-list' => [],
'carousel-collections-list' => [],
'carousel-related-items' => [],
'related-items-list' => [],
'terms-list' => [],
'faceted-search' => [],
'item-submission-form' => []

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

@ -22,7 +22,7 @@ const addDataModuleToOldBlocks = () => {
'dynamic-items-list',
'carousel-items-list',
'carousel-terms-list',
'carousel-related-items',
'related-items-list',
'carousel-collections-list'
];

2
webpack.common.js
View File

@ -15,7 +15,7 @@ module.exports = {
block_search_bar: './src/views/gutenberg-blocks/blocks/search-bar/index.js',
block_collections_list: './src/views/gutenberg-blocks/blocks/collections-list/index.js',
block_carousel_collections_list: './src/views/gutenberg-blocks/blocks/carousel-collections-list/index.js',
block_carousel_related_items: './src/views/gutenberg-blocks/blocks/carousel-related-items/index.js',
block_related_items_list: './src/views/gutenberg-blocks/blocks/related-items-list/index.js',
block_facets_list: './src/views/gutenberg-blocks/blocks/facets-list/index.js',
block_item_submission_form: './src/views/gutenberg-blocks/blocks/item-submission-form/index.js',
block_faceted_search: './src/views/gutenberg-blocks/blocks/faceted-search/index.js',