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

More adjustments do media component

This commit is contained in:
mateuswetah 2021-03-10 09:20:12 -03:00
parent 7d5cd72add
commit b48f0ff0c9
6 changed files with 362 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
package-lock.json generated
View File

@ -3513,18 +3513,32 @@
"dev": true "dev": true
}, },
"elliptic": { "elliptic": {
"version": "6.5.3", "version": "6.5.4",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
"integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==", "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"bn.js": "^4.4.0", "bn.js": "^4.11.9",
"brorand": "^1.0.1", "brorand": "^1.1.0",
"hash.js": "^1.0.0", "hash.js": "^1.0.0",
"hmac-drbg": "^1.0.0", "hmac-drbg": "^1.0.1",
"inherits": "^2.0.1", "inherits": "^2.0.4",
"minimalistic-assert": "^1.0.0", "minimalistic-assert": "^1.0.1",
"minimalistic-crypto-utils": "^1.0.0" "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": { "emoji-regex": {
@ -7539,6 +7553,11 @@
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" "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": { "pify": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",

3
package.json
View File

@ -8,14 +8,15 @@
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules" "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"blurhash": "^1.1.3",
"axios": "^0.21.1", "axios": "^0.21.1",
"blurhash": "^1.1.3",
"buefy": "^0.9.4", "buefy": "^0.9.4",
"bulma": "^0.9.1", "bulma": "^0.9.1",
"css-vars-ponyfill": "^2.3.1", "css-vars-ponyfill": "^2.3.1",
"mdi": "^2.2.43", "mdi": "^2.2.43",
"moment": "^2.25.3", "moment": "^2.25.3",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"photoswipe": "^4.1.3",
"qs": "^6.9.4", "qs": "^6.9.4",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",

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

@ -218,88 +218,239 @@ function tainacan_the_collection_description() {
* *
* @return string * @return string
*/ */
function tainacan_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_items, $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 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_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 $media_items_main Array of media items to be rendered inside main, bigger the carousel. Default to empty array
* @param array|string $args { * @param array|string $args {
* Optional. Array of arguments. * Optional. Array of arguments.
* * @type string before_main_div String to be added before the main gallery div
* @type bool $render_main_gallery Render a main gallery bellow the thumbnails carousel. Default false. * @type string after_main_div String to be added after the main gallery div
* @type string $before_main_div String to be added before the main gallery div * @type string before_thumbs_div String to be added before the thumbs gallery div
* @type string $after_main_div String to be added after the main gallery div * @type string after_thumbs_div String to be added after the thumbs gallery div
* @type string $before_thumbs_div String to be added before the thumbs gallery div * @type string before_main_ul String to be added before the main gallery ul
* @type string $after_thumbs_div String to be added after the thumbs gallery div * @type string after_main_ul String to be added after the main gallery ul
* @type string $before_main_ul String to be added before the main gallery ul * @type string before_thumbs_ul String to be added before the thumbs gallery ul
* @type string $after_main_ul String to be added after the main gallery ul * @type string after_thumbs_ul String to be added after the thumbs gallery ul
* @type string $before_thumbs_ul String to be added before the thumbs gallery ul * @type string class_main_div Class to be added to the main gallery div
* @type string $after_thumbs_ul String to be added after the thumbs gallery ul * @type string class_main_ul Class to be added to the main gallery ul
* @type string $class_main_div Class to be added to the main gallery div * @type string class_main_li Class to be added to the main gallery li
* @type string $class_main_ul Class to be added to the main gallery ul * @type string class_thumbs_div Class to be added to the thumbs gallery div
* @type string $class_main_li Class to be added to the main gallery li * @type string class_thumbs_ul Class to be added to the thumbs gallery ul
* @type string $class_thumbs_div Class to be added to the thumbs gallery div * @type string class_thumbs_li Class to be added to the thumbs gallery li
* @type string $class_thumbs_ul Class to be added to the thumbs gallery ul * @type bool auto_play Sets swiper to autoplay
* @type string $class_thumbs_li Class to be added to the thumbs gallery li * @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 * @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; global $TAINACAN_BASE_URL;
// Modal layer for rendering photoswipe $args = array_merge(array(
echo tainacan_get_the_media_modal_layer(); '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 $args['has_media_main'] = $media_items_main && is_array($media_items_main) && count($media_items_main);
wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), TAINACAN_VERSION); $args['has_media_thumbs'] = $media_items_thumbs && is_array($media_items_thumbs) && count($media_items_thumbs);
wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), TAINACAN_VERSION, true ); $args['media_main_id'] = $args['has_media_thumbs'] ? ( $media_id . '-main' ) : $media_id;
wp_enqueue_style( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css', array(), TAINACAN_VERSION); $args['media_thumbs_id'] = $args['has_media_main'] ? ( $media_id . '-thumbs' ) : $media_id;
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 ); // Modal lightbox layer for rendering photoswipe
wp_enqueue_script( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js', array(), TAINACAN_VERSION, true ); 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_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'] ?> <?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'] ?> <?php echo $args['before_main_ul'] ?>
<ul class="swiper-wrapper <?php echo $args['class_main_ul'] ?>"> <ul class="swiper-wrapper <?php echo $args['class_main_ul'] ?>">
<?php foreach($media_items_main as $media_item) { ?> <?php foreach($media_items_main as $media_item) { ?>
<li class="swiper-slide <?php echo $args['class_main_li'] ?>"> <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> </li>
<?php }; ?> <?php }; ?>
</ul> </ul>
<?php echo $args['before_main_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> </div>
<?php echo $args['after_main_div'] ?> <?php echo $args['after_main_div'] ?>
<?php endif; ?> <?php endif; ?>
<?php if ( $args['has_media_thumbs'] ) : ?>
<!-- Slider main container -->
<?php echo $args['before_thumbs_div'] ?> <?php echo $args['before_thumbs_div'] ?>
<div class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_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'] ?> <?php echo $args['before_thumbs_ul'] ?>
<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>"> <ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
<?php foreach($media_items_thumbs as $media_item) { ?> <?php foreach($media_items_thumbs as $media_item) { ?>
<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>"> <li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
<?php echo wp_get_attachment_image($media_item->ID) ?> <?php echo $media_item ?>
</li> </li>
<?php }; ?> <?php }; ?>
</ul> </ul>
<?php echo $args['before_thumbs_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> </div>
<?php echo $args['after_thumbs_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 <?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 * 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() { function tainacan_get_the_media_modal_layer() {
?> ?>
<!-- add PhotoSwipe (.pswp) element to DOM - <!-- Root element of PhotoSwipe lightbox. Must have class pswp. -->
Root element of PhotoSwipe. Must have class pswp. -->
<div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe. <!-- Background of PhotoSwipe.
@ -481,9 +631,7 @@ function tainacan_is_view_mode_enabled($view_mode_slug) {
*/ */
function tainacan_the_faceted_search($args = array()) { function tainacan_the_faceted_search($args = array()) {
$theme_helper = \Tainacan\Theme_Helper::get_instance(); $theme_helper = \Tainacan\Theme_Helper::get_instance();
// echo $theme_helper->get_tainacan_items_list($args); 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']);
} }
/** /**

178
src/views/media-component/media-component.js
View File

@ -1,83 +1,39 @@
// TAINACAN MEDIA GALLERY -------------------------------------------------------- // TAINACAN MEDIA COMPONENT --------------------------------------------------------
// //
// Counts on some markup to make a list of media link be displayed // Counts on some HMTL markup to make a list of media link be displayed
// as a carousel with a lightbox. It can be used in two modes: // 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';
-- 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, {...});
*/
class TainacanMediaGallery { class TainacanMediaGallery {
/** /**
* constructor initializes the instance * Constructor initializes the instance. Options are Snake Case because they come from PHP side
* @param {String} thumbnailsGallerySelector html element to be queried containing the thumbnails list * @param {String} thumbs_gallery_selector html element to be queried containing the thumbnails list
* @param {String} mainGallerySelector html element to be queried containing the main list * @param {String} main_gallery_selector html element to be queried containing the main list
* @param {Object} options several options to be tweaked * @param {Object} options several options to be tweaked
* @param {Boolean} options.autoPlay sets swiper to autoplay * @param {Boolean} options.auto_play sets swiper to autoplay
* @param {Number} options.autoPlayDelay sets swiper to autoplay dealy in milisecs * @param {Number} options.auto_play_delay sets swiper to autoplay delay in milisecs
* @param {Boolean} options.showCarouselArrows shows swiper navigation arrows * @param {Boolean} options.show_arrows shows swiper navigation arrows
* @param {Boolean} options.showCarouselDots shows swiper naviagation dots * @param {Boolean} options.show_pagination shows swiper pagination
* @param {Boolean} options.showShareButton shows share button on lightbox * @param {Boolean} options.pagination_type swiper pagination type ('bullets', 'fraction', 'progressbar')
* @param {Boolean} options.showTitle shows file title on lightbox * @param {Boolean} options.show_share_button shows share button on lightbox
* @param {Boolean} options.showCaption shows file caption on lightbox
* @param {Boolean} options.showDescription shows file description on
* *
* @return {Object} TainacanMediaGallery instance * @return {Object} TainacanMediaGallery instance
*/ */
constructor(thumbnailsGallerySelector, mainGallerySelector, options) { constructor(thumbs_gallery_selector, main_gallery_selector, options) {
this.thumbnailsGallerySelector = thumbnailsGallerySelector; this.thumbs_gallery_selector = thumbs_gallery_selector;
this.mainGallerySelector = mainGallerySelector; this.main_gallery_selector = main_gallery_selector;
this.thumbsSwiper = null; this.thumbsSwiper = null;
this.mainSwiper = null; this.mainSwiper = null;
this.options = options; this.options = options;
this.initializeSwiper(); this.initializeSwiper();
if (this.mainGallerySelector) if (this.main_gallery_selector)
this.initPhotoSwipeFromDOM(this.mainGallerySelector + " .swiper-wrapper"); this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
else if (this.thumbnailsGallerySelector) else if (this.thumbs_gallery_selector)
this.initPhotoSwipeFromDOM(this.thumbnailsGallerySelector + " .swiper-wrapper"); this.initPhotoSwipeFromDOM(this.thumbs_gallery_selector + " .swiper-wrapper");
} }
/* Initializes Swiper JS instances of carousels */ /* Initializes Swiper JS instances of carousels */
@ -85,28 +41,31 @@ class TainacanMediaGallery {
let autoPlay = false; let autoPlay = false;
if (this.options.autoPlay) { if (this.options.auto_play) {
autoPlay = { autoPlay = {
delay: this.options.autoPlayDelay ? this.options.autoPlayDelay : 3000 delay: this.options.auto_play_delay ? this.options.auto_play_delay : 3000
}; };
} }
if (this.thumbnailsGallerySelector) { if (this.thumbs_gallery_selector) {
const thumbSwiperOptions = {
const thumbnailSwiperOptions = {
spaceBetween: 16, spaceBetween: 16,
slidesPerView: 'auto', slidesPerView: 'auto',
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}, },
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
autoplay: autoPlay, autoplay: autoPlay,
centerInsufficientSlides: true 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 = { let mainSwiperOptions = {
slidesPerView: 1, slidesPerView: 1,
@ -115,15 +74,22 @@ class TainacanMediaGallery {
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}, },
autoplay: autoPlay, pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
}; };
if (this.thumbsSwiper) { if (this.thumbsSwiper) {
mainSwiperOptions.thumbs = { mainSwiperOptions.thumbs = {
swiper: this.thumbsSwiper, swiper: this.thumbsSwiper,
autoScrollOffset: 1 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, captionEl: true,
fullscreenEl: true, fullscreenEl: true,
zoomEl: 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, counterEl: true,
arrowEl: true, arrowEl: true,
preloaderEl: true, preloaderEl: true,
@ -364,8 +330,60 @@ class TainacanMediaGallery {
} }
} }
new TainacanMediaGallery( /* Loads and instantiates media components passed to the global variable */
'.tainacan-media-component__swiper-thumbs', document.addEventListener('DOMContentLoaded', function() {
'.tainacan-media-component__swiper-main', if (tainacan_plugin.tainacan_media_components && tainacan_plugin.tainacan_media_components.length) {
{ autoPlay: true, autoPlayDelay: 7000 } 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, {...});
*/

9
webpack.common.js
View File

@ -1,4 +1,5 @@
let path = require('path'); let path = require('path');
const webpack = require('webpack');
module.exports = { module.exports = {
entry: { entry: {
@ -103,5 +104,11 @@ module.exports = {
}, },
performance: { performance: {
hints: false hints: false
} },
plugins: [
new webpack.ProvidePlugin({
'Swiper': 'Swiper',
'PhotoSwipe': 'PhotoSwipe'
})
]
}; };