From 64e481b63be0170481235fbdb08a381d58bfabe8 Mon Sep 17 00:00:00 2001 From: Noah Lancien Date: Mon, 29 Jul 2024 12:21:22 +0200 Subject: [PATCH] feat: #60 - Added fancybox for the homepage video --- app/Http/Middleware/SecureHeaders.php | 1 + package-lock.json | 7 +++++ package.json | 1 + resources/assets/images/misc/play-button.svg | 6 ++++ resources/sass/fo/fo.scss | 1 + resources/sass/fo/vendor/_fancybox.scss | 2 ++ resources/ts/fo/fo.ts | 3 ++ resources/ts/modules/fancybox.ts | 4 +++ resources/views/fo/pages/home.blade.php | 14 +++------ resources/views/vendor/cn-cookies.blade.php | 32 +++++++++++++++----- 10 files changed, 55 insertions(+), 16 deletions(-) create mode 100644 resources/assets/images/misc/play-button.svg create mode 100644 resources/sass/fo/vendor/_fancybox.scss create mode 100644 resources/ts/modules/fancybox.ts diff --git a/app/Http/Middleware/SecureHeaders.php b/app/Http/Middleware/SecureHeaders.php index 37ae290..4411171 100644 --- a/app/Http/Middleware/SecureHeaders.php +++ b/app/Http/Middleware/SecureHeaders.php @@ -71,6 +71,7 @@ class SecureHeaders 'https://www.google.com/recaptcha/', 'https://recaptcha.google.com/recaptcha/', 'https://www.youtube.com', + 'https://www.youtube-nocookie.com/embed/', ]) . ';', "font-src 'self' data: " . \implode(' ', [ // * VITE DEV diff --git a/package-lock.json b/package-lock.json index 183ff2e..70537d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "@babel/core": "^7.22.11", "@babel/types": "^7.21.2", "@erbelion/vite-plugin-laravel-purgecss": "^0.2.3", + "@fancyapps/ui": "^5.0.36", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", @@ -912,6 +913,12 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fancyapps/ui": { + "version": "5.0.36", + "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.36.tgz", + "integrity": "sha512-GMygQzp1MBTFNTT6AzpbL6pXTD6bTxwjmmpI1fe8Ozmmiseu8/g82Sudl1YhcbZmS4bJgaBOF5THDFGpXQ1fDw==", + "dev": true + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", diff --git a/package.json b/package.json index 21dad18..99d26f0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@babel/core": "^7.22.11", "@babel/types": "^7.21.2", "@erbelion/vite-plugin-laravel-purgecss": "^0.2.3", + "@fancyapps/ui": "^5.0.36", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", diff --git a/resources/assets/images/misc/play-button.svg b/resources/assets/images/misc/play-button.svg new file mode 100644 index 0000000..e1006f9 --- /dev/null +++ b/resources/assets/images/misc/play-button.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss index a3b749f..2ca8f39 100644 --- a/resources/sass/fo/fo.scss +++ b/resources/sass/fo/fo.scss @@ -9,6 +9,7 @@ @import "./vendor/swiper"; @import "./vendor/cookie-notice"; @import "leaflet"; +@import "./vendor/fancybox"; // * BASE @import "./base/bootstrap-overload"; diff --git a/resources/sass/fo/vendor/_fancybox.scss b/resources/sass/fo/vendor/_fancybox.scss new file mode 100644 index 0000000..9294492 --- /dev/null +++ b/resources/sass/fo/vendor/_fancybox.scss @@ -0,0 +1,2 @@ +// import Fancybox style +@import "~/@fancyapps/ui/dist/fancybox/fancybox.css"; diff --git a/resources/ts/fo/fo.ts b/resources/ts/fo/fo.ts index 9b5c7b6..f4610e4 100644 --- a/resources/ts/fo/fo.ts +++ b/resources/ts/fo/fo.ts @@ -9,6 +9,9 @@ window.CookieNotice = CookieNotice; // FANCYBOX import "fslightbox"; +// MODULES +import "./../modules/fancybox"; + // UTILITIES import "./utilities/bootstrap"; import "./utilities/fontawesome"; diff --git a/resources/ts/modules/fancybox.ts b/resources/ts/modules/fancybox.ts new file mode 100644 index 0000000..3979bb7 --- /dev/null +++ b/resources/ts/modules/fancybox.ts @@ -0,0 +1,4 @@ +import { Fancybox } from "@fancyapps/ui"; + +Fancybox.bind("[data-fancybox]", { +}); diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php index 60650ba..7fee923 100644 --- a/resources/views/fo/pages/home.blade.php +++ b/resources/views/fo/pages/home.blade.php @@ -69,18 +69,14 @@ @endif
- @include('fo.modules.video-frame', [ - 'type' => 'youtube', - 'title' => __('Visionner la vidéo'), - 'videoId' => $missionSection->data['bloc_string_i_d_de_la_video_youtube']['value'], - 'picture' => asset($missionSection->data['bloc_illustration_de_la_video']['value']), - 'alt' => __('Video_about_who_we_are'), - 'linkNewTab' => $missionSection->data['bloc_link_new_tab']['value'] ? true : false, - ]) +
+
- {{-- AMBITION --}}
diff --git a/resources/views/vendor/cn-cookies.blade.php b/resources/views/vendor/cn-cookies.blade.php index ce56651..04a99df 100644 --- a/resources/views/vendor/cn-cookies.blade.php +++ b/resources/views/vendor/cn-cookies.blade.php @@ -120,13 +120,31 @@ function () { let id = item.dataset.id; let width = item.dataset.width ?? "640"; let height = item.dataset.height ?? "360"; - let e = document.createElement('iframe'); - e.src = "https://www.youtube.com/embed/" + id; - e.width = width; - e.height = height; - e.frameBorder = "0"; - e.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"; - e.allowFullscreen = true; + let e; + if (item.classList.contains('cn-fancybox')) { + e = document.createElement('a'); + e.target = "_blank"; + e.classList.add('position-relative'); + e.href = "https://www.youtube.com/embed/" + id; + e.dataset.fancybox = ""; + let img = document.createElement('img'); + img.src = item.dataset.img; + img.classList.add('w-100', 'h-100', 'object-fit-cover'); + let btnImg = document.createElement('img'); + btnImg.src = item.dataset.playBtnImg; + btnImg.classList.add('z-1', 'position-absolute', 'top-50', 'start-50', 'translate-middle'); + + e.appendChild(img); + e.appendChild(btnImg); + } else { + e = document.createElement('iframe'); + e.src = "https://www.youtube.com/embed/" + id; + e.width = width; + e.height = height; + e.frameBorder = "0"; + e.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"; + e.allowFullscreen = true; + }; item.innerHTML = ""; item.appendChild(e); }