From d3911c4c66bc32c9fad496f23bf123aa64469864 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Tue, 2 Mar 2021 17:41:59 -0300 Subject: [PATCH 01/21] Begins implementaion of function to render media component #499 --- src/classes/theme-helper/template-tags.php | 74 ++++++++++++++++++++-- 1 file changed, 68 insertions(+), 6 deletions(-) diff --git a/src/classes/theme-helper/template-tags.php b/src/classes/theme-helper/template-tags.php index 448b3fe36..bf560e2b5 100644 --- a/src/classes/theme-helper/template-tags.php +++ b/src/classes/theme-helper/template-tags.php @@ -17,17 +17,11 @@ use \Tainacan\Repositories; * Optional. Array or string of arguments. * * @type mixed $metadata Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata - * * @type array $metadata__in Array of metadata IDs or Slugs to be retrieved. Default none - * * @type array $metadata__not_in Array of metadata IDs (slugs not accepted) to excluded. Default none - * * @type bool $exclude_title Exclude the Core Title Metadata from result. Default false - * * @type bool $exclude_description Exclude the Core Description Metadata from result. Default false - * * @type bool $exclude_core Exclude Core Metadata (title and description) from result. Default false - * * @type bool $hide_empty Wether to hide or not metadata the item has no value to * Default: true * @type string $before String to be added before each metadata block @@ -219,6 +213,73 @@ function tainacan_the_collection_description() { echo tainacan_get_the_collection_description(); } +/** + * Tainacan Gallery component, used to render document, attachments and other files + * + * @return string + */ +function tainacan_the_media_component($media_items, $args) { + echo tainacan_get_the_media_component($media_items, $args); +} + + +/** + * Tainacan Gallery component, used to render document, attachments and other files + * + * @param array $media_items Array of media items to be rendered inside the carousel. Default to empty array + * @param array|string $args { + * Optional. Array of arguments. + * + * @type bool $render_main_gallery Render a main gallery bellow the thumbnails carousel. Default false. + * @type string $before_main_div String to be added before the main gallery div + * @type string $after_main_div String to be added after the main gallery div + * @type string $before_thumbs_div String to be added before the thumbs gallery div + * @type string $after_thumbs_div String to be added after the thumbs gallery div + * @type string $before_main_ul String to be added before the main gallery ul + * @type string $after_main_ul String to be added after the main gallery ul + * @type string $before_thumbs_ul String to be added before the thumbs gallery ul + * @type string $after_thumbs_ul String to be added after the thumbs gallery ul + * @type string $class_main_div Class to be added to the main gallery div + * @type string $class_main_ul Class to be added to the main gallery ul + * @type string $class_main_li Class to be added to the main gallery li + * @type string $class_thumbs_div Class to be added to the thumbs gallery div + * @type string $class_thumbs_ul Class to be added to the thumbs gallery ul + * @type string $class_thumbs_li Class to be added to the thumbs gallery li + * } + * @return string + */ +function tainacan_get_the_media_component($media_items = array(), $args = array()) { +?> + + + +
+ + + +
+ + + + +
+ + + +
+ +get_tainacan_items_list($args); + //TEST: tainacan_the_media_component(['a', 'b', 'c true, 'class_main_div' => 'teste']); } /** From da99673585e0b0517f9062fdf7415a63513b886a Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 3 Mar 2021 10:59:48 -0300 Subject: [PATCH 02/21] Adds function to render photoswipe layer and basic enqueus #499 --- src/classes/theme-helper/template-tags.php | 104 +++++- src/views/admin/js/media-component.js | 371 +++++++++++++++++++++ webpack.common.js | 1 + 3 files changed, 469 insertions(+), 7 deletions(-) create mode 100644 src/views/admin/js/media-component.js diff --git a/src/classes/theme-helper/template-tags.php b/src/classes/theme-helper/template-tags.php index bf560e2b5..1c9de92be 100644 --- a/src/classes/theme-helper/template-tags.php +++ b/src/classes/theme-helper/template-tags.php @@ -249,8 +249,21 @@ function tainacan_the_media_component($media_items, $args) { * @return string */ function tainacan_get_the_media_component($media_items = array(), $args = array()) { + global $TAINACAN_BASE_URL; + + // Modal layer for rendering photoswipe + echo tainacan_get_the_media_modal_layer(); + + //Necessary enqueues for the media component + wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), TAINACAN_VERSION); + wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), TAINACAN_VERSION, true ); + wp_enqueue_style( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css', array(), TAINACAN_VERSION); + wp_enqueue_style( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css', array(), TAINACAN_VERSION); + wp_enqueue_script( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js', array(), TAINACAN_VERSION, true ); + wp_enqueue_script( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js', array(), TAINACAN_VERSION, true ); + wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['swiper', 'photoswipe', 'photoswipe-skin'], TAINACAN_VERSION, true ); ?> - +
@@ -258,7 +271,7 @@ function tainacan_get_the_media_component($media_items = array(), $args = array(
  • - + ID) ?>
@@ -271,13 +284,89 @@ function tainacan_get_the_media_component($media_items = array(), $args = array(
    -
  • - TESTEEE -
    • + +
  • + ID) ?> +
    • +
+ + + + get_tainacan_items_list($args); - //TEST: tainacan_the_media_component(['a', 'b', 'c true, 'class_main_div' => 'teste']); + // echo $theme_helper->get_tainacan_items_list($args); + $attachments = tainacan_get_the_attachments(); + tainacan_the_media_component($attachments, ['render_main_gallery' => true, 'class_main_div' => 'teste']); } /** diff --git a/src/views/admin/js/media-component.js b/src/views/admin/js/media-component.js new file mode 100644 index 000000000..ea2ead5ae --- /dev/null +++ b/src/views/admin/js/media-component.js @@ -0,0 +1,371 @@ +// TAINACAN MEDIA GALLERY -------------------------------------------------------- +// +// Counts on some markup to make a list of media link be displayed +// as a carousel with a lightbox. It can be used in two modes: + +/* + +-- MODE 1 ---- Carousel of thumbnails only ---------------------------------------- + +
+