forge-joniko/ldc-volena
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: #60 - Added fancybox for the homepage video

Browse source
This commit is contained in:
Noah Lancien 2024-07-29 12:21:22 +02:00
parent d992ac4484
commit 64e481b63b
10 changed files with 55 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/Http/Middleware/SecureHeaders.php
View file

@ -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

7
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

6
resources/assets/images/misc/play-button.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="71" height="70" viewBox="0 0 71 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 13">
<circle id="Ellipse 2" cx="35.3284" cy="35" r="35" fill="#23628A"/>
<path id="Polygon 2" d="M52.0892 34.134C52.7559 34.5189 52.7559 35.4811 52.0892 35.866L27.6979 49.9484C27.0313 50.3333 26.1979 49.8521 26.1979 49.0823L26.1979 20.9177C26.1979 20.1479 27.0313 19.6668 27.6979 20.0517L52.0892 34.134Z" fill="white"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 441 B

1
resources/sass/fo/fo.scss
View file

@ -9,6 +9,7 @@
@import "./vendor/swiper";
@import "./vendor/cookie-notice";
@import "leaflet";
@import "./vendor/fancybox";
// * BASE
@import "./base/bootstrap-overload";

2
resources/sass/fo/vendor/_fancybox.scss vendored Normal file
View file

@ -0,0 +1,2 @@
// import Fancybox style
@import "~/@fancyapps/ui/dist/fancybox/fancybox.css";

3
resources/ts/fo/fo.ts
View file

@ -9,6 +9,9 @@ window.CookieNotice = CookieNotice;
// FANCYBOX
import "fslightbox";
// MODULES
import "./../modules/fancybox";
// UTILITIES
import "./utilities/bootstrap";
import "./utilities/fontawesome";

4
resources/ts/modules/fancybox.ts Normal file
View file

@ -0,0 +1,4 @@
import { Fancybox } from "@fancyapps/ui";
Fancybox.bind("[data-fancybox]", {
});

14
resources/views/fo/pages/home.blade.php
View file

@ -69,18 +69,14 @@
@endif
<div class="col-12">
<div class="d-flex justify-content-center w-100 w-lg-75 w-xl-50 mx-auto">
@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,
])
<div class="cn-youtube cn-fancybox w-100"
data-id="{{ $missionSection->data['bloc_string_i_d_de_la_video_youtube']['value'] }}"
data-img="{{ asset($missionSection->data['bloc_illustration_de_la_video']['value']) }}"
data-play-btn-img="{{ Vite::asset('resources/assets/images/misc/play-button.svg') }}">
</div>
</div>
</div>
</div>
</div>
</section>
{{-- AMBITION --}}
<section class="ambition my-5">

32
resources/views/vendor/cn-cookies.blade.php vendored
View file

@ -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);
}