More adjustments do media component
This commit is contained in:
mateuswetah
parent
7d5cd72add
commit
b48f0ff0c9
|
|
@ -3513,18 +3513,32 @@
|
|||
"dev": true
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.3",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
|
||||
"integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||
"integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bn.js": "^4.4.0",
|
||||
"brorand": "^1.0.1",
|
||||
"bn.js": "^4.11.9",
|
||||
"brorand": "^1.1.0",
|
||||
"hash.js": "^1.0.0",
|
||||
"hmac-drbg": "^1.0.0",
|
||||
"inherits": "^2.0.1",
|
||||
"minimalistic-assert": "^1.0.0",
|
||||
"minimalistic-crypto-utils": "^1.0.0"
|
||||
"hmac-drbg": "^1.0.1",
|
||||
"inherits": "^2.0.4",
|
||||
"minimalistic-assert": "^1.0.1",
|
||||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"bn.js": {
|
||||
"version": "4.12.0",
|
||||
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
|
||||
"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
|
||||
"dev": true
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"emoji-regex": {
|
||||
|
|
@ -7539,6 +7553,11 @@
|
|||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
||||
},
|
||||
"photoswipe": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
|
||||
"integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA=="
|
||||
},
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -8,14 +8,15 @@
|
|||
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"blurhash": "^1.1.3",
|
||||
"axios": "^0.21.1",
|
||||
"blurhash": "^1.1.3",
|
||||
"buefy": "^0.9.4",
|
||||
"bulma": "^0.9.1",
|
||||
"css-vars-ponyfill": "^2.3.1",
|
||||
"mdi": "^2.2.43",
|
||||
"moment": "^2.25.3",
|
||||
"node-sass": "^4.14.1",
|
||||
"photoswipe": "^4.1.3",
|
||||
"qs": "^6.9.4",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
|
|
|
|||
|
|
@ -218,88 +218,239 @@ function tainacan_the_collection_description() {
|
|||
*
|
||||
* @return string
|
||||
*/
|
||||
function tainacan_the_media_component($media_items, $args) {
|
||||
echo tainacan_get_the_media_component($media_items, $args);
|
||||
function tainacan_the_media_component($media_id, $media_items_thumbs, $media_items_main, $args) {
|
||||
echo tainacan_get_the_media_component($media_id, $media_items_thumbs, $media_items_main, $args);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tainacan Gallery component, used to render document, attachments and other files
|
||||
* Tainacan Media Gallery component, used to render document, attachments and other files
|
||||
*
|
||||
* @param array $media_items_thumbs Array of media items to be rendered inside smaller the carousel. Default to empty array
|
||||
* @param array $media_items_main Array of media items to be rendered inside main, bigger the carousel. Default to empty array
|
||||
* @param string $media_id ID to be added to the gallery div. If both main and thumbnail items are passed, each div ID will be posfixed with '-main' or '-thumbs'.
|
||||
* @param array $media_items_thumbs Array of media items to be rendered inside smaller the carousel. Default to empty array
|
||||
* @param array $media_items_main Array of media items to be rendered inside main, bigger 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
|
||||
* Optional. Array of arguments.
|
||||
* @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
|
||||
* @type bool auto_play Sets swiper to autoplay
|
||||
* @type integer auto_play_delay Sets swiper to autoplay delay in milisecs
|
||||
* @type bool show_arrows Shows swiper navigation arrows
|
||||
* @type bool show_pagination Shows swiper pagination
|
||||
* @type bool pagination_type Swiper pagination type ('bullets', 'fraction', 'progressbar')
|
||||
* @type bool show_share_button Shows share button on lightbox
|
||||
* }
|
||||
* @return string
|
||||
*/
|
||||
function tainacan_get_the_media_component($media_items_thumbs = array(), $media_items_main = array(), $args = array()) {
|
||||
|
||||
function tainacan_get_the_media_component(
|
||||
$media_id = 'tainacan-media-component',
|
||||
$media_items_thumbs = array(),
|
||||
$media_items_main = array(),
|
||||
$args = array()
|
||||
) {
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
// Modal layer for rendering photoswipe
|
||||
echo tainacan_get_the_media_modal_layer();
|
||||
$args = array_merge(array(
|
||||
'before_main_div' => '',
|
||||
'after_main_div' => '',
|
||||
'before_thumbs_div' => '',
|
||||
'after_thumbs_div' => '',
|
||||
'before_main_ul' => '',
|
||||
'after_main_ul' => '',
|
||||
'before_thumbs_ul' => '',
|
||||
'after_thumbs_ul' => '',
|
||||
'class_main_div' => '',
|
||||
'class_main_ul' => '',
|
||||
'class_main_li' => '',
|
||||
'class_thumbs_div' => '',
|
||||
'class_thumbs_ul' => '',
|
||||
'class_thumbs_li' => '',
|
||||
'auto_play' => false,
|
||||
'auto_play_delay' => 3000,
|
||||
'show_arrows' => false,
|
||||
'show_pagination' => true,
|
||||
'pagination_type' => 'bullets',
|
||||
'show_share_button' => false
|
||||
), $args);
|
||||
|
||||
//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 );
|
||||
$args['has_media_main'] = $media_items_main && is_array($media_items_main) && count($media_items_main);
|
||||
$args['has_media_thumbs'] = $media_items_thumbs && is_array($media_items_thumbs) && count($media_items_thumbs);
|
||||
$args['media_main_id'] = $args['has_media_thumbs'] ? ( $media_id . '-main' ) : $media_id;
|
||||
$args['media_thumbs_id'] = $args['has_media_main'] ? ( $media_id . '-thumbs' ) : $media_id;
|
||||
|
||||
// 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/media-component.css', array(), TAINACAN_VERSION);
|
||||
wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['swiper', 'photoswipe', 'photoswipe-skin'], TAINACAN_VERSION, true );
|
||||
wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['tainacan-search'], TAINACAN_VERSION, true );
|
||||
?>
|
||||
|
||||
<?php if ( isset($args['render_main_gallery']) && $args['render_main_gallery'] == true ) : ?>
|
||||
<?php if ( $args['has_media_main'] ) : ?>
|
||||
|
||||
<!-- Slider main container -->
|
||||
<?php echo $args['before_main_div'] ?>
|
||||
<div class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
|
||||
<div id="<?php echo $args['media_main_id'] ?>" class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
|
||||
|
||||
<!-- Additional required wrapper -->
|
||||
<?php echo $args['before_main_ul'] ?>
|
||||
<ul class="swiper-wrapper <?php echo $args['class_main_ul'] ?>">
|
||||
<?php foreach($media_items_main as $media_item) { ?>
|
||||
<li class="swiper-slide <?php echo $args['class_main_li'] ?>">
|
||||
<?php tainacan_get_single_attachment_as_html($media_item->ID) ?>
|
||||
<?php echo $media_item ?>
|
||||
</li>
|
||||
<?php }; ?>
|
||||
</ul>
|
||||
<?php echo $args['before_main_ul'] ?>
|
||||
|
||||
<?php if ( $args['show_pagination'] ) : ?>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $args['show_arrows'] ) : ?>
|
||||
<!-- If we need navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php echo $args['after_main_div'] ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php echo $args['before_thumbs_div'] ?>
|
||||
<div class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
|
||||
<?php echo $args['before_thumbs_ul'] ?>
|
||||
<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
|
||||
<?php foreach($media_items_thumbs as $media_item) { ?>
|
||||
<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
|
||||
<?php echo wp_get_attachment_image($media_item->ID) ?>
|
||||
</li>
|
||||
<?php }; ?>
|
||||
</ul>
|
||||
<?php echo $args['before_thumbs_ul'] ?>
|
||||
</div>
|
||||
<?php echo $args['after_thumbs_div'] ?>
|
||||
<?php if ( $args['has_media_thumbs'] ) : ?>
|
||||
|
||||
<!-- Slider main container -->
|
||||
<?php echo $args['before_thumbs_div'] ?>
|
||||
<div id="<?php echo $args['media_thumbs_id'] ?>" class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
|
||||
|
||||
<!-- Additional required wrapper -->
|
||||
<?php echo $args['before_thumbs_ul'] ?>
|
||||
<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
|
||||
<?php foreach($media_items_thumbs as $media_item) { ?>
|
||||
<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
|
||||
<?php echo $media_item ?>
|
||||
</li>
|
||||
<?php }; ?>
|
||||
</ul>
|
||||
<?php echo $args['before_thumbs_ul'] ?>
|
||||
|
||||
<?php if ( $args['show_pagination'] ) : ?>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $args['show_arrows'] ) : ?>
|
||||
<!-- If we need navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php echo $args['after_thumbs_div'] ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
wp_add_inline_script( 'tainacan-media-component', "
|
||||
tainacan_plugin.tainacan_media_components = (typeof tainacan_plugin != undefined && typeof tainacan_plugin.tainacan_media_components != 'undefined') ? tainacan_plugin.tainacan_media_components : [];
|
||||
tainacan_plugin.tainacan_media_components.push(JSON.parse('" . json_encode($args) . "'));
|
||||
", 'before' );
|
||||
?>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tainacan Media Item for the Media Gallery component, used to render a single link displayed in the carousel
|
||||
*
|
||||
* @param array|string $args {
|
||||
* Optional. Array of arguments.
|
||||
* @type string before_slide_content String to be added before the slide-content div or a tag
|
||||
* @type string after_slide_content String to be added after the slide-content div or a tag
|
||||
* @type string class_slide_content Class to be added to the slide-content div or a tag
|
||||
* @type string before_slide_metadata String to be added before the slide-metadata div
|
||||
* @type string after_slide_metadata String to be added after the slide-metadata div
|
||||
* @type string class_slide_metadata Class to be added to the slide-metadata div
|
||||
* @type mixed media_content The content of the slide itself, such as an image, audio, video or iframe tag
|
||||
* @type string media_full_link A link to wrap the content, possibly to show a full version in the main modal. If this is passed, the slide-content div is rendered as an a tag
|
||||
* @type string media_title The media title, if available
|
||||
* @type string media_description The media description, if available
|
||||
* @type string media_caption The media caption, if available
|
||||
* }
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function tainacan_get_the_media_component_slide( $args = array() ) {
|
||||
|
||||
$args = array_merge(array(
|
||||
'before_slide_content' => '',
|
||||
'after_slide_content' => '',
|
||||
'class_slide_content' => '',
|
||||
'before_slide_metadata' => '',
|
||||
'after_slide_metadata' => '',
|
||||
'class_slide_metadata' => '',
|
||||
'media_content' => '',
|
||||
'media_full_link' => '',
|
||||
'media_title' => '',
|
||||
'media_description' => '',
|
||||
'media_caption' => '',
|
||||
), $args);
|
||||
|
||||
ob_start();
|
||||
|
||||
if ( !empty($args['media_content']) ) : ?>
|
||||
|
||||
<?php echo $args['before_slide_content'] ?>
|
||||
<?php if ($args['media_full_link']) : ?>
|
||||
<a class="swiper-slide-content <?php echo $args['class_slide_content'] ?>" href="<?php echo $args['media_full_link'] ?>">
|
||||
<?php else: ?>
|
||||
<div class="swiper-slide-content <?php echo $args['class_slide_content'] ?>">
|
||||
<?php endif; ?>
|
||||
<?php echo $args['media_content'] ?>
|
||||
|
||||
<?php echo $args['before_slide_metadata'] ?>
|
||||
|
||||
<?php if ( !empty($args['media_title']) || !empty($args['description']) || !empty($args['media_caption']) ) :?>
|
||||
<div class="swiper-slide-metadata">
|
||||
<?php if ( !empty($args['media_title']) ) :?>
|
||||
<span class="swiper-slide-metadata__name"><?php echo $args['media_title'] ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( !empty($args['media_description']) ) :?>
|
||||
<span class="swiper-slide-metadata__description"><?php echo $args['media_description'] ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( !empty($args['media_caption']) ) :?>
|
||||
<span class="swiper-slide-metadata__caption"><?php echo $args['media_caption'] ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php echo $args['after_slide_metadata'] ?>
|
||||
<?php if ($args['media_full_link']) : ?>
|
||||
</a>
|
||||
<?php else: ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php echo $args['after_slide_content'] ?>
|
||||
|
||||
<?php endif;
|
||||
|
||||
$content = ob_get_contents();
|
||||
ob_end_clean();
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Div with content necessay to render the photowipe modal
|
||||
*
|
||||
|
|
@ -307,8 +458,7 @@ function tainacan_get_the_media_component($media_items_thumbs = array(), $media_
|
|||
*/
|
||||
function tainacan_get_the_media_modal_layer() {
|
||||
?>
|
||||
<!-- add PhotoSwipe (.pswp) element to DOM -
|
||||
Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<!-- Root element of PhotoSwipe lightbox. Must have class pswp. -->
|
||||
<div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
|
||||
<!-- Background of PhotoSwipe.
|
||||
|
|
@ -481,9 +631,7 @@ function tainacan_is_view_mode_enabled($view_mode_slug) {
|
|||
*/
|
||||
function tainacan_the_faceted_search($args = array()) {
|
||||
$theme_helper = \Tainacan\Theme_Helper::get_instance();
|
||||
// echo $theme_helper->get_tainacan_items_list($args);
|
||||
$attachments = tainacan_get_the_attachments();
|
||||
tainacan_the_media_component($attachments, $attachments, ['render_main_gallery' => true, 'class_main_div' => 'teste']);
|
||||
echo $theme_helper->get_tainacan_items_list($args);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,83 +1,39 @@
|
|||
// TAINACAN MEDIA GALLERY --------------------------------------------------------
|
||||
// TAINACAN MEDIA COMPONENT --------------------------------------------------------
|
||||
//
|
||||
// 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 ----------------------------------------
|
||||
|
||||
<div class="swiper-container-thumbs swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide">
|
||||
<a href="link-to-full-image-or-file">
|
||||
<img href="link-to-thumbnail" alt..>
|
||||
<span class="swiper-slide-name>File name</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
new TainacanMediaGallery(.swiper-container-thumbs, null, {...});
|
||||
|
||||
|
||||
-- MODE 2 ---- Carousel of thumbnails with main slider ----------------------------
|
||||
|
||||
<div class="swiper-container-main swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide">
|
||||
<a href="link-to-full-image-or-file">
|
||||
<img href="link-to-medium-or-large" alt..>
|
||||
<span class="swiper-slide-name>File name</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="swiper-container-thumbs swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide">
|
||||
<img href="link-to-thumbnail" alt..>
|
||||
<span class="swiper-slide-name>File name</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
new TainacanMediaGallery(.swiper-container-thumbs, .swiper-container-main, {...});
|
||||
|
||||
*/
|
||||
// Counts on some HMTL markup to make a list of media link be displayed
|
||||
// as a carousel with a lightbox. Check examples in the end of the file
|
||||
import PhotoSwipe from 'photoswipe/dist/photoswipe.js';
|
||||
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
|
||||
|
||||
class TainacanMediaGallery {
|
||||
|
||||
/**
|
||||
* constructor initializes the instance
|
||||
* @param {String} thumbnailsGallerySelector html element to be queried containing the thumbnails list
|
||||
* @param {String} mainGallerySelector html element to be queried containing the main list
|
||||
* @param {Object} options several options to be tweaked
|
||||
* @param {Boolean} options.autoPlay sets swiper to autoplay
|
||||
* @param {Number} options.autoPlayDelay sets swiper to autoplay dealy in milisecs
|
||||
* @param {Boolean} options.showCarouselArrows shows swiper navigation arrows
|
||||
* @param {Boolean} options.showCarouselDots shows swiper naviagation dots
|
||||
* @param {Boolean} options.showShareButton shows share button on lightbox
|
||||
* @param {Boolean} options.showTitle shows file title on lightbox
|
||||
* @param {Boolean} options.showCaption shows file caption on lightbox
|
||||
* @param {Boolean} options.showDescription shows file description on
|
||||
* Constructor initializes the instance. Options are Snake Case because they come from PHP side
|
||||
* @param {String} thumbs_gallery_selector html element to be queried containing the thumbnails list
|
||||
* @param {String} main_gallery_selector html element to be queried containing the main list
|
||||
* @param {Object} options several options to be tweaked
|
||||
* @param {Boolean} options.auto_play sets swiper to autoplay
|
||||
* @param {Number} options.auto_play_delay sets swiper to autoplay delay in milisecs
|
||||
* @param {Boolean} options.show_arrows shows swiper navigation arrows
|
||||
* @param {Boolean} options.show_pagination shows swiper pagination
|
||||
* @param {Boolean} options.pagination_type swiper pagination type ('bullets', 'fraction', 'progressbar')
|
||||
* @param {Boolean} options.show_share_button shows share button on lightbox
|
||||
*
|
||||
* @return {Object} TainacanMediaGallery instance
|
||||
* @return {Object} TainacanMediaGallery instance
|
||||
*/
|
||||
constructor(thumbnailsGallerySelector, mainGallerySelector, options) {
|
||||
this.thumbnailsGallerySelector = thumbnailsGallerySelector;
|
||||
this.mainGallerySelector = mainGallerySelector;
|
||||
constructor(thumbs_gallery_selector, main_gallery_selector, options) {
|
||||
this.thumbs_gallery_selector = thumbs_gallery_selector;
|
||||
this.main_gallery_selector = main_gallery_selector;
|
||||
this.thumbsSwiper = null;
|
||||
this.mainSwiper = null;
|
||||
this.options = options;
|
||||
|
||||
this.initializeSwiper();
|
||||
|
||||
if (this.mainGallerySelector)
|
||||
this.initPhotoSwipeFromDOM(this.mainGallerySelector + " .swiper-wrapper");
|
||||
else if (this.thumbnailsGallerySelector)
|
||||
this.initPhotoSwipeFromDOM(this.thumbnailsGallerySelector + " .swiper-wrapper");
|
||||
if (this.main_gallery_selector)
|
||||
this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
|
||||
else if (this.thumbs_gallery_selector)
|
||||
this.initPhotoSwipeFromDOM(this.thumbs_gallery_selector + " .swiper-wrapper");
|
||||
}
|
||||
|
||||
/* Initializes Swiper JS instances of carousels */
|
||||
|
|
@ -85,45 +41,55 @@ class TainacanMediaGallery {
|
|||
|
||||
let autoPlay = false;
|
||||
|
||||
if (this.options.autoPlay) {
|
||||
if (this.options.auto_play) {
|
||||
autoPlay = {
|
||||
delay: this.options.autoPlayDelay ? this.options.autoPlayDelay : 3000
|
||||
delay: this.options.auto_play_delay ? this.options.auto_play_delay : 3000
|
||||
};
|
||||
}
|
||||
|
||||
if (this.thumbnailsGallerySelector) {
|
||||
|
||||
const thumbnailSwiperOptions = {
|
||||
spaceBetween: 16,
|
||||
slidesPerView: 'auto',
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
autoplay: autoPlay,
|
||||
centerInsufficientSlides: true
|
||||
if (this.thumbs_gallery_selector) {
|
||||
const thumbSwiperOptions = {
|
||||
spaceBetween: 16,
|
||||
slidesPerView: 'auto',
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'fraction',
|
||||
},
|
||||
autoplay: autoPlay,
|
||||
centerInsufficientSlides: true
|
||||
};
|
||||
this.thumbsSwiper = new Swiper(this.thumbnailsGallerySelector, thumbnailSwiperOptions);
|
||||
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbSwiperOptions);
|
||||
}
|
||||
|
||||
if (this.mainGallerySelector) {
|
||||
if (this.main_gallery_selector) {
|
||||
|
||||
let mainSwiperOptions = {
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
autoplay: autoPlay,
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'progressbar',
|
||||
},
|
||||
};
|
||||
if (this.thumbsSwiper) {
|
||||
mainSwiperOptions.thumbs = {
|
||||
swiper: this.thumbsSwiper,
|
||||
autoScrollOffset: 1
|
||||
mainSwiperOptions.thumbs = {
|
||||
swiper: this.thumbsSwiper,
|
||||
autoScrollOffset: 1
|
||||
}
|
||||
} else {
|
||||
mainSwiperOptions.thumbs = {
|
||||
autoplay: autoPlay,
|
||||
}
|
||||
}
|
||||
}
|
||||
this.mainSwiper = new Swiper(this.mainGallerySelector, mainSwiperOptions);
|
||||
this.mainSwiper = new Swiper(this.main_gallery_selector, mainSwiperOptions);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -218,7 +184,7 @@ class TainacanMediaGallery {
|
|||
captionEl: true,
|
||||
fullscreenEl: true,
|
||||
zoomEl: true,
|
||||
shareEl: this.options.showShareButton ? this.options.showShareButton : false,
|
||||
shareEl: this.options.show_share_button ? this.options.show_share_button : false,
|
||||
counterEl: true,
|
||||
arrowEl: true,
|
||||
preloaderEl: true,
|
||||
|
|
@ -364,8 +330,60 @@ class TainacanMediaGallery {
|
|||
}
|
||||
}
|
||||
|
||||
new TainacanMediaGallery(
|
||||
'.tainacan-media-component__swiper-thumbs',
|
||||
'.tainacan-media-component__swiper-main',
|
||||
{ autoPlay: true, autoPlayDelay: 7000 }
|
||||
);
|
||||
/* Loads and instantiates media components passed to the global variable */
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (tainacan_plugin.tainacan_media_components && tainacan_plugin.tainacan_media_components.length) {
|
||||
tainacan_plugin.tainacan_media_components.forEach((component) => {
|
||||
new TainacanMediaGallery(
|
||||
component.media_thumbs_id ? '#' + component.media_thumbs_id : null,
|
||||
component.media_main_id ? '#' + component.media_main_id : null,
|
||||
component
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
|
||||
---- Carousel of thumbnails only ----------------------------------------
|
||||
|
||||
<div class="swiper-container-thumbs swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide">
|
||||
<a href="link-to-full-image-or-file">
|
||||
<img href="link-to-thumbnail" alt..>
|
||||
<span class="swiper-slide-name>File name</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
new TainacanMediaGallery(.swiper-container-thumbs, null, {...});
|
||||
|
||||
|
||||
---- Carousel of thumbnails with main slider ----------------------------
|
||||
|
||||
<div class="swiper-container-main swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide">
|
||||
<a href="link-to-full-image-or-file">
|
||||
<img href="link-to-medium-or-large" alt..>
|
||||
<span class="swiper-slide-name>File name</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="swiper-container-thumbs swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide">
|
||||
<img href="link-to-thumbnail" alt..>
|
||||
<span class="swiper-slide-name>File name</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
new TainacanMediaGallery(.swiper-container-thumbs, .swiper-container-main, {...});
|
||||
|
||||
*/
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
let path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
|
|
@ -103,5 +104,11 @@ module.exports = {
|
|||
},
|
||||
performance: {
|
||||
hints: false
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
'Swiper': 'Swiper',
|
||||
'PhotoSwipe': 'PhotoSwipe'
|
||||
})
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue