From b48f0ff0c902085f21c948e7d8b6721ee09cc8f7 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 10 Mar 2021 09:20:12 -0300 Subject: [PATCH] More adjustments do media component --- package-lock.json | 37 ++- package.json | 3 +- src/classes/theme-helper/template-tags.php | 260 +++++++++++++++---- src/views/class-tainacan-admin.php | 2 +- src/views/media-component/media-component.js | 220 +++++++++------- webpack.common.js | 9 +- 6 files changed, 362 insertions(+), 169 deletions(-) diff --git a/package-lock.json b/package-lock.json index 75b370569..af3ab0fc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0227f7253..4c8804d99 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/classes/theme-helper/template-tags.php b/src/classes/theme-helper/template-tags.php index db70879e6..c50fca4fc 100644 --- a/src/classes/theme-helper/template-tags.php +++ b/src/classes/theme-helper/template-tags.php @@ -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 - * - * @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 + * 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_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(); - - //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 = 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); + $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 ); ?> - + + + -
+
+ +
  • - ID) ?> +
+ + + +
+ + + + +
+
+
- -
- -
    - -
  • - ID) ?> -
    • - -
- -
- + + + + +
+ + + +
    + +
  • + +
    • + +
+ + + + +
+ + + + +
+
+ +
+ + + + '', + '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']) ) : ?> + + + + + +
+ + + + + + +
+ + + + + + + + + +
+ + + + + + +
+ + + + - +