From c73288b71f9a69b98d4ce1214c2d4982813ea5fd Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 21 Apr 2020 18:12:17 +0200 Subject: [PATCH] WIP #3053 @8 --- .../src/Elementor/Widgets/BackgroundImage.php | 70 ++++++++++++++++++- .../cube/src/Forms/Consultation.php | 10 +-- wp-content/themes/CCV/package.json | 1 + .../resources/assets/styles/common/admin.styl | 37 ++++++++++ .../assets/styles/common/global.styl | 4 ++ .../styles/components/lity-lightbox.styl | 8 +++ .../styles/widgets/background-image.styl | 1 + .../styles/widgets/header-slideshow.styl | 3 +- .../assets/styles/widgets/text-block.styl | 2 + .../styles/widgets/timeline-horizontal.styl | 4 +- .../views/forms/consultation.blade.php | 6 +- wp-content/themes/CCV/webpack.mix.js | 4 ++ wp-content/themes/CCV/yarn.lock | 5 ++ 13 files changed, 141 insertions(+), 14 deletions(-) create mode 100644 wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php index 7bf2b64..a46dc85 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php @@ -3,6 +3,7 @@ namespace Cube\Elementor\Widgets; use Elementor\Controls_Manager; +use Elementor\Embed; use Elementor\Utils; @@ -80,6 +81,19 @@ class BackgroundImage extends _Base { ], ] ); + + $this->add_control( + 'link', + [ + 'label' => __('Lien', 'cube'), + 'type' => Controls_Manager::URL, + 'default' => [ + 'url' => '', + 'is_external' => false, + ], + 'show_external' => true + ] + ); $this->end_controls_section(); @@ -96,6 +110,10 @@ class BackgroundImage extends _Base { $image = $this->get_settings('image'); $bg_position = $this->get_settings('background_position'); + $link = $this->get_settings('link'); + $tag = 'div'; // Default tag for widget - will change when we need a non-lightbox link + $attributes = ''; + $class = ''; if (is_numeric($image['id'])) { $meta = wp_get_attachment_metadata($image['id']); @@ -106,7 +124,57 @@ class BackgroundImage extends _Base { $ratio = '80%'; } - echo '
'; + // Handle links / video + if (!empty( $link['url'])) { + + // If the link is to a youtube video, we want this to open in a lightbox instead + // For now only supporting links that start with https://www.youtube.com or https://youtu.be... + if (strpos($link['url'], 'https://www.youtube.com') === 0 || strpos($link['url'], 'https://youtu.be') === 0) { + + $attributes = "data-elementor-lightbox='". $this->lightbox($link['url'], $this->get_id()) ."'"; + $attributes .= ' data-elementor-open-lightbox="yes"'; + $class = 'cursor-pointer'; + + } else { // Normal link + + $tag = 'a'; + $attributes = 'href="'. $link['url'] .'"'; + + if ($link['is_external']) { + $attributes .= ' target="_blank"'; + } + + if ($link['nofollow']) { + $attributes .= ' rel="nofollow"'; + } + } + + } + + echo '<'. $tag .' class="bg-image '. $class .'" '. $attributes .' style="background-image: url('. $image['url'] .'); background-position: '. $bg_position .'">
'; + + } + + + // Generate Elementor lightbox settings + public static function lightbox($url, $element_ID) { + + // 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($url, $embed_params), + 'modalOptions' => [ + 'id' => 'elementor-lightbox-' . $element_ID, + 'entranceAnimation' => 'zoomIn', + 'videoAspectRatio' => '169', + ], + ]; + return wp_json_encode($lightbox_options); } } diff --git a/wp-content/mu-plugins/cube/src/Forms/Consultation.php b/wp-content/mu-plugins/cube/src/Forms/Consultation.php index d079510..92ff4ee 100644 --- a/wp-content/mu-plugins/cube/src/Forms/Consultation.php +++ b/wp-content/mu-plugins/cube/src/Forms/Consultation.php @@ -10,13 +10,9 @@ class Consultation extends Base parent::register_scripts(); - wp_enqueue_script( - 'ccv-consultation', - asset('scripts/consultation.js'), - ['jquery'], // Dependencies - null, // Version - true // In footer? - ); + wp_enqueue_script('ccv-consultation', asset('scripts/consultation.js'), ['jquery'], null, true); + wp_enqueue_script('lity', asset('scripts/lity.js'), ['jquery'], null, true); + wp_enqueue_style('lity-css', asset('styles/lity.min.css')); } diff --git a/wp-content/themes/CCV/package.json b/wp-content/themes/CCV/package.json index 915a58d..88e8d1d 100644 --- a/wp-content/themes/CCV/package.json +++ b/wp-content/themes/CCV/package.json @@ -26,6 +26,7 @@ "flatpickr": "^4.6.3", "laravel-mix": "^5.0.4", "laravel-mix-purgecss": "^4.2.0", + "lity": "^2.4.0", "lodash.debounce": "^4.0.8", "lost": "^8.3.1", "mix-tailwindcss": "^1.0.2", diff --git a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl index 9d6db74..51dd41c 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl @@ -10,3 +10,40 @@ // visible while editing... ul margin-left: 1.3em + +//===== Admin bar tweaks +$breakpoint-admin-bar = 783px +$admin-bar-height = 32px +$admin-bar-height-mobile = 46px + +#wpadminbar + overflow: hidden + +#wp-toolbar + display: flex + justify-content: space-between + + > * + display: flex + white-space: nowrap + + // Wrap/hide extra toolbar items on the left when there's not enough space + #wp-admin-bar-root-default + flex-wrap: wrap + + #wp-admin-bar-top-secondary + flex-shrink: 0 + +body.admin-bar + +above($breakpoint-admin-bar) + position: relative + + #mobile-menu, .lity-close + top: $admin-bar-height + + +below($breakpoint-admin-bar) + #mobile-menu + top: $admin-bar-height-mobile + + .mobile-menu-trigger + top: 30px + $admin-bar-height-mobile diff --git a/wp-content/themes/CCV/resources/assets/styles/common/global.styl b/wp-content/themes/CCV/resources/assets/styles/common/global.styl index fec93e3..36c168c 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/global.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/global.styl @@ -20,3 +20,7 @@ body .wrapper @apply mx-auto max-width: $content-max-width + +//-- Elementor Lightbox customisations +.dialog-type-lightbox + background-color: rgba(#2E2C40, 0.8) diff --git a/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl b/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl new file mode 100644 index 0000000..6dfa755 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl @@ -0,0 +1,8 @@ +//=== Lity Lightbox customisations +.lity + background-color: rgba(#2E2C40, 0.8) + +// Prevent scrolling in background when lightbox is open +.lity-active body + overflow: hidden + height: 100vw diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/background-image.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/background-image.styl index 24955f2..09bdaaa 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/background-image.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/background-image.styl @@ -1,4 +1,5 @@ .bg-image + display: block background-size: cover background-repeat: no-repeat background-position: center diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl index 35c7ce4..4bb4d44 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/header-slideshow.styl @@ -14,7 +14,8 @@ $title_bg = rgba(#fff, 0.88) left: 0 width: 100% height: 100% - background-image: linear-gradient(to bottom, #fff 10%, transparent 50%) + //background-image: linear-gradient(to bottom, #fff 10%, transparent 50%) + //background-image: linear-gradient(180deg, rgba(255,255,255,1) -5%,rgba(255,255,255,0.9) 17%, transparent 55%) z-index: 5 // Change to portrait oriented images for small screens diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl index ba3e70c..9e2ec58 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl @@ -15,6 +15,8 @@ .text-block .text-block-align-center & text-align: center + margin-left: auto + margin-right: auto > * + * // Automatic spacing between direct child elements margin-top: 1.5em diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl index e72d7ce..bdba007 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl @@ -2,7 +2,7 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view .timeline-horizontal +below($breakpoint-timeline-horizontal) - @apply flex flex-row-reverse + @apply flex flex-row // Scale all em children font-size: 22px fixed @@ -66,7 +66,7 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view &-mobile width: 100% max-width: 250px !important; - padding-right: 2em; + padding-left: 2em; +above($breakpoint-timeline-horizontal) display: none diff --git a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php index bcbce10..3f81f07 100644 --- a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php +++ b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php @@ -133,10 +133,10 @@ {{ __('Vos images sont sur un CD ?', 'ccv') }}

- {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD en cliquant sur le lien ci-dessous :", "ccv") }} + {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD :", "ccv") }}

- {{ __('Envoyer vos fichiers', 'ccv') }} + {{ __('Parcourir', 'ccv') }} @@ -164,7 +164,7 @@ {{ __('Vous remplissez cette demande depuis votre téléphone ?', 'ccv') }}

- {{ __('Prenez vos images en photo et envoyez-les directement depuis votre téléphone.', 'ccv') }} + {{ __('Prenez vos images en photo et envoyez-les directement depuis votre téléphone :', 'ccv') }}

{{ __('Parcourir') }} diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js index 5d6d3e2..6b84e37 100644 --- a/wp-content/themes/CCV/webpack.mix.js +++ b/wp-content/themes/CCV/webpack.mix.js @@ -60,6 +60,10 @@ mix.js(src`scripts/app.js`, 'scripts') .js(src`scripts/customizer.js`, 'scripts') .extract(['mmenu-light']); // Extract any libraries that will rarely change to a vendor.js file +// Lity lightbox +mix.copy('node_modules/lity/dist/lity.js', publicPath`scripts`); +mix.copy('node_modules/lity/dist/lity.min.css', publicPath`styles`); + // Assets mix.copyDirectory(src`images`, publicPath`images`) .copyDirectory(src`fonts`, publicPath`fonts`); diff --git a/wp-content/themes/CCV/yarn.lock b/wp-content/themes/CCV/yarn.lock index 32e583d..0393836 100644 --- a/wp-content/themes/CCV/yarn.lock +++ b/wp-content/themes/CCV/yarn.lock @@ -4838,6 +4838,11 @@ limiter@^1.0.5: resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.4.tgz#87c9c3972d389fdb0ba67a45aadbc5d2f8413bc1" integrity sha512-XCpr5bElgDI65vVgstP8TWjv6/QKWm9GU5UG0Pr5sLQ3QLo8NVKsioe+Jed5/3vFOe3IQuqE7DKwTvKQkjTHvg== +lity@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/lity/-/lity-2.4.0.tgz#af7eb0c33efe3b21c31ab22848e608eca432e819" + integrity sha512-6sj/IjJ6bDWdWcvo15r12erzVkVQFx8xA5dWT3WjuJxCns8o7PEkDAjfTjaoy6wbR2KDxAfxBWqY9YNnpAUWPQ== + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" -- 2.39.5