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

Creates template tag for generating related items carousel.

This commit is contained in:
mateuswetah 2021-06-22 13:22:48 -03:00
parent c310716135
commit d076436344
3 changed files with 169 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,8 @@ 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, 'items_carousel_shortcode'));
add_shortcode( 'tainacan-items-carousel', array($this, 'get_tainacan_items_carousel'));
add_shortcode( 'tainacan-related-items-carousel', array($this, 'get_tainacan_related_items_carousel'));
add_action( 'generate_rewrite_rules', array( &$this, 'rewrite_rules' ), 10, 1 );
add_filter( 'query_vars', array( &$this, 'rewrite_rules_query_vars' ) );
@ -124,18 +125,28 @@ class Theme_Helper {
}
}
public function enqueue_items_carousel_scripts($force = false) {
global $TAINACAN_BASE_URL;
public function enqueue_items_carousel_scripts() {
global $post;
global $TAINACAN_BASE_URL;
global $wp_version;
if ( $force || $this->is_post_an_item($post) ) {
wp_enqueue_script(
'carousel-items-list-theme',
$TAINACAN_BASE_URL . '/assets/js/block_carousel_items_list_theme.js',
array('wp-components')
);
wp_set_script_translations('carousel-items-list-theme', 'tainacan');
}
$settings = [
'wp_version' => $wp_version,
'root' => esc_url_raw( rest_url() ) . 'tainacan/v2',
'nonce' => is_user_logged_in() ? wp_create_nonce( 'wp_rest' ) : false,
'base_url' => $TAINACAN_BASE_URL,
'admin_url' => admin_url(),
'site_url' => site_url(),
'theme_items_list_url' => esc_url_raw( get_site_url() ) . '/' . \Tainacan\Theme_Helper::get_instance()->get_items_list_slug()
];
wp_enqueue_script(
'carousel-items-list-theme',
$TAINACAN_BASE_URL . '/assets/js/block_carousel_items_list_theme.js',
array('wp-components')
);
wp_set_script_translations('carousel-items-list-theme', 'tainacan');
wp_localize_script('carousel-items-list-theme', 'tainacan_blocks', $settings);
}
public function is_post_an_item(\WP_Post $post) {
@ -849,7 +860,7 @@ class Theme_Helper {
* 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'
* @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_tems_per_screen Maximum columns of items to be displayed on a row of the carousel
@ -867,32 +878,112 @@ class Theme_Helper {
* @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
* @return string The HTML div to be used for rendering the related items vue component
* @return string The HTML div to be used for rendering the items carousel vue component
*/
public function items_carousel_shortcode($args) {
return $this->get_tainacan_items_carousel($args, true);
}
public function get_tainacan_items_carousel($args, $force_enqueue = false) {
public function get_tainacan_items_carousel($args = []) {
if (!is_array($args))
return __('There are missing parameters for Tainacan Items Carousel shortcode', 'tainacan');
$props = ' ';
// Always pass the class needed by Vue to mount the component;
$args['class'] = isset($args['class_name']) ? ($args['class_name'] . 'wp-block-tainacan-carousel-items-list') : 'wp-block-tainacan-carousel-items-list';
$args['class'] = isset($args['class_name']) ? ($args['class_name'] . ' wp-block-tainacan-carousel-items-list') : 'wp-block-tainacan-carousel-items-list';
unset($args['class_name']);
// Builds parameters to the html div rendered by Vue
foreach ($args as $key => $value) {
// Changes from PHP '_' notation to HTML '-' notation
$props .= (str_replace('_', '-', $key) . '="' . $value . '" ');
$props .= (str_replace('_', '-', $key) . "='" . $value . "' ");
}
$this->enqueue_items_carousel_scripts($force_enqueue);
// TODO Generate new IDs for weach instance!
return '<div id="tainacan-items-carousel-shortcode" ' . $props . ' ></div>';
$this->enqueue_items_carousel_scripts();
return "<div id='tainacan-items-carousel-shortcode' $props ></div>";
}
/**
* Returns a group of related items carousels
* 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 $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
* @return string The HTML div to be used for rendering the related items vue component
*/
public function get_tainacan_related_items_carousel($args = []) {
$defaults = array(
'class_name' => '',
'collection_heading_class_name' => '',
'collection_heading_tag' => 'h2',
'metadata_label_class_name' => '',
'metadata_label_tag' => 'p'
);
$args = wp_parse_args($args, $defaults);
// Gets the current Item
$item = isset($args['item_id']) ? $this->tainacan_get_item($args['item_id']) : $this->tainacan_get_item();
if (!$item)
return;
// Then fetches related ones
$related_items = $item->get_related_items();
if (!count($related_items))
return;
// Always pass the default class;
$output = '<div class="' . $args['class_name'] . ' wp-block-tainacan-carousel-items-list' . '">';
var_dump($related_items['134219']['items'][0]);
foreach($related_items as $collection_id => $related_group) {
// Adds a heading with the collection name
$collection_heading = '';
if ( isset($related_group['collection_name']) ) {
$collection_heading = '<' . $args['collection_heading_tag'] . ' class="' . $args['collection_heading_class_name'] . '">' . $related_group['collection_name'] . '</' . $args['collection_heading_tag'] . '>';
}
// Adds a paragraph with the metadata name
$metadata_label = '';
if ( isset($related_group['metadata_name']) ) {
$metadata_label = '<' . $args['metadata_label_tag'] . ' class="' . $args['metadata_label_class_name'] . '">' . $related_group['metadata_name'] . '</' . $args['metadata_label_tag'] . '>';
}
// Sets the carousel, from the items carousel template tag.
$carousel_div = '';
if ( isset($related_group['collection_id']) && isset($related_group['items']) ) {
$carousel_div = $this->get_tainacan_items_carousel([
'collection_id' => $related_group['collection_id'],
'load_strategy' => 'parent',
'selected_items' => json_encode($related_group['items'])
]);
}
$output .= '<div class="wp-block-group">
<div class="wp-block-group__inner-container">' .
$collection_heading .
$metadata_label .
$carousel_div .
'<div class="wp-block-buttons">
<div class="wp-block-button">
<a class="wp-block-button__link">
' . __('View all related items', 'tainacan') . '
</a>
</div>
</div>
<div style="height:70px" aria-hidden="true" class="wp-block-spacer">
</div>
</div>
</div>';
}
$output .= '</div>';
return $output;
}
}

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

@ -997,3 +997,48 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
return $images_path . $icon_file . $image_size . '.png';
}
/**
* Displays a carousel of items, the same of the gutenberg block
*
* @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_tems_per_screen Maximum columns of items to be displayed on a row of the carousel
* @type string $arrows_position How the arrows will be positioned regarding the carousel ('around', 'left', 'right')
* @type bool $large_arrows Should large arrows be displayed?
* @type bool $auto_play Should the Caroulsel start automatically to slide?
* @type integer $auto_play_speed The time in s to translate to the next slide automatically
* @type bool $loop_slides Should slides loop when reached the end of the Carousel?
* @type bool $hide_title Should the title of the items be displayed?
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`?
* @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
* @return void The HTML div to be used for rendering the items carousel vue component
*/
function tainacan_the_items_carousel($args = []) {
echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_items_carousel($args);
}
/**
* Displays a group of related items carousels
* 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
* @return void
*/
function tainacan_the_related_items_carousel($args = []) {
echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_related_items_carousel($args);
}

25
src/views/gutenberg-blocks/tainacan-items/carousel-related-items/index.js
View File

@ -1,17 +1,14 @@
const { registerBlockType } = wp.blocks;
const { withDispatch, useDispatch, useSelect } = wp.data;
const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { Spinner, Button, Placeholder } = wp.components;
const { InspectorControls, BlockControls, InnerBlocks, store } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls, InnerBlocks} = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import CarouselRelatedItemsModal from './carousel-related-items-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import DeprecatedBlocks from './carousel-related-items-deprecated.js';
import 'swiper/css/swiper.min.css';
@ -76,12 +73,7 @@ registerBlockType('tainacan/carousel-related-items', {
html: false,
multiple: true,
},
edit({ attributes, setAttributes, className, isSelected, clientId }){
const innerBlocks = useSelect(
( select ) =>
select( store ).getBlocks(clientId),
[ clientId ]
);
edit({ attributes, setAttributes, className, isSelected, clientId }) {
let {
content,
@ -96,7 +88,6 @@ registerBlockType('tainacan/carousel-related-items', {
} = attributes;
function setContent(){
isLoading = true;
@ -134,7 +125,7 @@ registerBlockType('tainacan/carousel-related-items', {
function updateChildBlocks() {
console.log(innerBlocks);
console.log("Como???");
}
@ -205,7 +196,7 @@ registerBlockType('tainacan/carousel-related-items', {
: (
<div className={className}>
{ relatedItems.length ?
{/* { relatedItems.length ?
<BlockControls>
{
TainacanBlocksCompatToolbar({
@ -221,8 +212,8 @@ registerBlockType('tainacan/carousel-related-items', {
})
}
</BlockControls>
: null }
<div>
: null } */}
{/* <div>
<InspectorControls>
<ToggleControl
label={__('Hide title', 'tainacan')}
@ -236,7 +227,7 @@ registerBlockType('tainacan/carousel-related-items', {
}
/>
</InspectorControls>
</div>
</div> */}
{ isSelected ?
(