From 7c63bdc008d13a3f632f2d0249b835105f4db601 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Thu, 17 May 2018 17:12:35 +0000 Subject: [PATCH] WIP #1912 @7.5 --- .../physioassist/src/Elementor/Setup.php | 4 +- .../src/Elementor/Widgets/VideoGallery.php | 215 ++++++++++++++++++ wp-content/themes/physioassist/app/setup.php | 1 + .../physioassist/resources/assets/config.json | 3 + .../assets/scripts/video-carousel.js | 15 ++ .../resources/assets/styles/main.styl | 2 +- .../assets/styles/widgets/video-carousel.styl | 66 ++++++ .../assets/styles/widgets/video-gallery.styl | 27 +++ .../widgets/video-gallery-carousel.blade.php | 25 ++ .../widgets/video-gallery-grid.blade.php | 10 + 10 files changed, 365 insertions(+), 3 deletions(-) create mode 100644 wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php create mode 100644 wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl create mode 100644 wp-content/themes/physioassist/resources/assets/styles/widgets/video-gallery.styl create mode 100644 wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php create mode 100644 wp-content/themes/physioassist/resources/views/widgets/video-gallery-grid.blade.php diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php index 2ecd08dc..145f3a72 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php @@ -75,12 +75,12 @@ class Setup { $elementor->widgets_manager->register_widget_type( new Widgets\HeroBlock() ); $elementor->widgets_manager->register_widget_type( new Widgets\ProfileGrid() ); $elementor->widgets_manager->register_widget_type( new Widgets\ResourceGrid() ); + $elementor->widgets_manager->register_widget_type( new Widgets\VideoGallery() ); $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() ); } public function register_scripts() { - // Widgets\GoogleMaps::register_scripts(); - // Widgets\Carousel::register_scripts(); + Widgets\VideoGallery::register_scripts(); } diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php new file mode 100644 index 00000000..8239eddc --- /dev/null +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php @@ -0,0 +1,215 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Video Gallery', 'cube' ), + ] + ); + + $this->add_control( + 'type', + [ + 'label' => __('Gallery Type', 'cube'), + 'type' => Controls_Manager::SELECT, + 'options' => [ + 'grid' => __( 'Grid', 'cube' ), + 'carousel' => __( 'Carousel', 'cube' ), + ], + 'default' => 'grid', + 'render_type' => 'template', // Make editor re-render when this changes + 'prefix_class' => 'video-gallery-type-', + ] + ); + + $this->add_control( + 'videos', + [ + 'label' => __( 'Videos', 'cube' ), + 'type' => Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'url', + 'label' => __( 'Video URL', 'cube' ), + 'placeholder' => __( 'Enter YouTube link', 'cube' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + ], + [ + 'name' => 'title', + 'label' => __( 'Title', 'cube' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + ], + [ + 'name' => 'details', + 'label' => __( 'Additional Details', 'cube' ), + 'placeholder' => __( 'Extra information for slider view', 'cube' ), + 'type' => Controls_Manager::TEXT, + 'label_block' => true, + ], + [ + 'name' => 'image', + 'label' => __('Preview Image (optional)', 'cube'), + 'label_block' => true, + 'type' => Controls_Manager::MEDIA, + 'default' => [ + 'url' => Utils::get_placeholder_image_src(), + ], + ], + ], + 'title_field' => '{{{ title }}}', + ] + ); + $this->end_controls_section(); + + + } + /** + * Render the widget output on the frontend. + * Written in PHP and used to generate the final HTML. + * + * @since 1.0.0 + * @access protected + */ + protected function render() { + + $gallery_type = $this->get_settings('type'); + $videos = $this->get_settings('videos'); + + // First, filter out any items that don't have a video URL + $videos = array_filter($videos, function($v) { + return (!empty($v['url'])); + }); + + // Get videos and process each video URL so it can be used with Elementor lightbox + $videos = array_map(function($video) { + + // Video settings for lightbox embed + $embed_params = [ + 'rel' => 0, // Don't show related videos at the end of playback + 'showinfo' => 0 // Hide info + ]; + + $lightbox_options = [ + 'type' => 'video', + 'url' => Embed::get_embed_url($video['url'], $embed_params), + 'modalOptions' => [ + 'id' => 'elementor-lightbox-' . $this->get_id(), + 'entranceAnimation' => 'zoomIn', + 'videoAspectRatio' => '169', + ], + ]; + + $video['lightbox'] = wp_json_encode($lightbox_options); + + $video_properties = Embed::get_video_properties($video['url']); + + + // If no preview image is set, fetch the one from Youtube + if (empty($video['image']['id'])) { + $video['preview'] = $this->youtube_image($video_properties['video_id']); + } else { + $video['preview'] = wp_get_attachment_image_url($video['image']['id'], 'video-preview'); + } + + return $video; + }, $videos); + + if ($gallery_type == 'carousel') { + echo \App\template('widgets/video-gallery-carousel', compact('videos')); + } else { + echo \App\template('widgets/video-gallery-grid', compact('videos')); + } + + } + + + // We can't guarantee that the video's maxresdefault.jpg will exist (it's not created for non-HD uploads) + // So this function will find the highest res image available... + // Ref: https://stackoverflow.com/a/20655623 + function youtube_image($id) { + $resolution = [ + 'maxresdefault', + 'hqdefault', // Might have black bars + 'mqdefault', // No black bars on this size normally + 'sddefault', + 'default' + ]; + + for ($x = 0; $x < sizeof($resolution); $x++) { + $url = 'https://img.youtube.com/vi/' . $id . '/' . $resolution[$x] . '.jpg'; + // Make sure we get a 200 OK HTTP response + if (strpos(get_headers($url)[0], '200 OK') !== false) { + break; + } + } + return $url; + } + +} diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php index 265cfe76..4890390e 100644 --- a/wp-content/themes/physioassist/app/setup.php +++ b/wp-content/themes/physioassist/app/setup.php @@ -49,6 +49,7 @@ add_action('after_setup_theme', function () { */ add_theme_support('post-thumbnails'); set_post_thumbnail_size(237, 237, true); + add_image_size('video-preview', 640, 360, true); // 16:9 ratio cropped /** * Enable HTML5 markup support diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json index 4b3a8d4d..32f4a54a 100644 --- a/wp-content/themes/physioassist/resources/assets/config.json +++ b/wp-content/themes/physioassist/resources/assets/config.json @@ -4,6 +4,9 @@ "./scripts/main.js", "./styles/main.styl" ], + "video-carousel": [ + "./scripts/video-carousel.js" + ], "customizer": [ "./scripts/customizer.js" ] diff --git a/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js b/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js new file mode 100644 index 00000000..d4661056 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js @@ -0,0 +1,15 @@ +// ELEMENTOR Trigger +(function($) { + // Trigger handler when element ready + $(window).on( 'elementor/frontend/init', function() { + // eslint-disable-next-line + elementorFrontend.hooks.addAction('frontend/element_ready/cube-video-gallery.default', function ($scope) { + + // Only trigger if it is a carousel type gallery + if ($scope.hasClass('video-gallery-type-carousel')) { + console.log('CAROUSEL enabled') // eslint-disable-line + $scope.find('.video-carousel').slick(); // Note: settings come from data-attribute in HTML + } + }); + }); +})(jQuery); diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl index bb4e2aae..58f83daf 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/main.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl @@ -23,7 +23,7 @@ @import 'layouts/header' @import 'layouts/sidebar' @import 'layouts/footer' - @import 'layouts/sections' +@import 'layouts/sections' @import 'layouts/pages' @import 'layouts/posts' @import 'layouts/tinymce' diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl new file mode 100644 index 00000000..e64f0001 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl @@ -0,0 +1,66 @@ +.video-carousel + padding: 0 80px + + &-item + cursor: pointer + text-align: center + margin: 0 20px + outline: none + + &-image + display: block + width: 100% + position: relative + + &:before + content: '' + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + background: rgba(#000, 0.2) + + // Todo: Add play icon on image + + + &-title + color: $colors.headings + font-size: 18px + font-weight: 600 + text-transform: uppercase + line-height: 1.2 + margin-top: 1.5em + + &-details + color: $colors.sub-headings + + + // Slick overrides + .slick-arrow + width: auto + background: $colors.light-grey + border-radius: 50% + font-size: 56px + line-height: 1.25 + width: 1.25em + height: @width + text-align: center + + &:before + display: inline-block + color: $colors.headings + font-size: 1em + + &:hover + background: darken($colors.light-grey, 5%) + + + .slick-prev + left: 0 + &:before + margin-right: 0.1em + .slick-next + right: 0 + &:before + margin-left: 0.1em diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-gallery.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-gallery.styl new file mode 100644 index 00000000..1ce762a0 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-gallery.styl @@ -0,0 +1,27 @@ +.video-gallery + display: flex + flex-wrap: wrap + constrain(margin-bottom, -3vw) // Counteract space between rows for the last row + + &-item + constrain(margin-bottom, 3vw) + cursor: pointer + lost-column: 1/3 3 60px + + +below(768px) + lost-column: 1/2 + +below(500px) + lost-column: 1/1 + + &-image + display: block + width: 100% + + &-title + color: $colors.sub-headings + font-size: 16px + font-weight: 400 + text-transform: uppercase + text-align: center + line-height: 1.2 + margin-top: 1.5em diff --git a/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php new file mode 100644 index 00000000..23cb1489 --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/widgets/video-gallery-carousel.blade.php @@ -0,0 +1,25 @@ +{{--VIDEO GALLERY CAROUSEL--}} +@php + $settings = [ + 'slidesToShow' => 2, + 'slidesToScroll' => 1, + 'infinite' => true, + ]; + + $slick = json_encode($settings); + +@endphp + +
+ @foreach ($videos as $video) +
+
+
+ +
+

{{ $video['title'] }}

+

{{ $video['details'] }}

+
+
+ @endforeach +
diff --git a/wp-content/themes/physioassist/resources/views/widgets/video-gallery-grid.blade.php b/wp-content/themes/physioassist/resources/views/widgets/video-gallery-grid.blade.php new file mode 100644 index 00000000..f13e1e98 --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/widgets/video-gallery-grid.blade.php @@ -0,0 +1,10 @@ +{{--VIDEO GALLERY GRID--}} + +
+ @foreach ($videos as $video) +
+ +

{{ $video['title'] }}

+
+ @endforeach +
-- 2.39.5