Merge branch 'ad-modal-2024' into 'develop'
Added an advertising modal for the game See merge request ldc-web/projets/lionor!26
This commit is contained in:
Vincent BRIDIER
commit
7be8c8fc17
7 changed files with 142 additions and 29 deletions
BIN
resources/assets/images/2024-ad.png
Normal file
BIN
resources/assets/images/2024-ad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
1
resources/sass/fo/vendor/_bootstrap.scss
vendored
1
resources/sass/fo/vendor/_bootstrap.scss
vendored
|
|
@ -36,6 +36,7 @@
|
|||
@import "bootstrap/scss/utilities";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/modal";
|
||||
|
||||
// 6. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
&-modal .modal {
|
||||
&-modal {
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@ window.Fancybox = Fancyapps.Fancybox;
|
|||
// FSLIGHTBOX
|
||||
import "fslightbox";
|
||||
|
||||
// MODULES
|
||||
import "./modules/ad_modal";
|
||||
|
||||
// CUSTOM
|
||||
import "./base/common";
|
||||
import "./burgermenu";
|
||||
|
|
|
|||
79
resources/ts/fo/modules/ad_modal.ts
Normal file
79
resources/ts/fo/modules/ad_modal.ts
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { Modal } from "bootstrap";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const adModal = document.getElementById("adModal");
|
||||
|
||||
if (!adModal) {
|
||||
return;
|
||||
}
|
||||
|
||||
const callback = (mutationList: Array<MutationRecord>, observer: MutationObserver) => {
|
||||
for (const mutation of mutationList) {
|
||||
if (mutation.type === "attributes") {
|
||||
// Display only if the tiemstamp is correct and if no other modal is opened.
|
||||
if (getAdModalCache() && !this.body.classList.contains("cn-open") && !this.body.classList.contains("modal-open")) {
|
||||
displayAdModal(adModal);
|
||||
observer.disconnect();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const observer = new MutationObserver(callback);
|
||||
observer.observe(this.body, { attributes: true });
|
||||
|
||||
if (getAdModalCache() && !this.body.classList.contains("cn-open")) {
|
||||
displayAdModal(adModal);
|
||||
}
|
||||
|
||||
// Set the timer also if we click on the link
|
||||
const modalLink = document.getElementById("adModalLink");
|
||||
if (modalLink) {
|
||||
modalLink.addEventListener("click", function () {
|
||||
updateAdModalCache();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function displayAdModal(adModal: HTMLElement)
|
||||
{
|
||||
const myModal = new Modal(adModal);
|
||||
myModal.show();
|
||||
adModal.addEventListener("hidden.bs.modal", function () {
|
||||
updateAdModalCache();
|
||||
});
|
||||
}
|
||||
|
||||
/** Check if we need to show the modal according to the stored timer */
|
||||
function getAdModalCache(): boolean {
|
||||
const localAdModalTimer = localStorage.getItem("hideAdModalUntil");
|
||||
if (localAdModalTimer !== null) {
|
||||
const localAdModalTimerJson = JSON.parse(localAdModalTimer);
|
||||
const localStoredTime = new Date(localAdModalTimerJson.value);
|
||||
|
||||
if (isTimestampTooOld(localStoredTime)) {
|
||||
localStorage.removeItem("hideAdModalUntil");
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Update the local stored timestamp */
|
||||
function updateAdModalCache(): void {
|
||||
const time = { value: new Date() };
|
||||
localStorage.setItem("hideAdModalUntil", JSON.stringify(time));
|
||||
}
|
||||
|
||||
/** Check if the stored timestamp is older than yesterday */
|
||||
function isTimestampTooOld(timestamp: Date): boolean
|
||||
{
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
if (timestamp.getTime() - yesterday.getTime() > 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
|
@ -12,6 +12,26 @@
|
|||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Modal -->
|
||||
@if (!request()->routeIs('map'))
|
||||
<div class="modal fade" id="adModal" aria-labelledby="adModalLabel" aria-hidden="true" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<a id="adModalLink" href="{{ route('map') }}" title="{{ __('Où nous trouver ?') }}">
|
||||
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/2024-ad.png') }}"
|
||||
title="{{ __('Tentez de gagner un cadeau en achetant un produit Lionor') }}"
|
||||
alt="{{ __('Du 27 mai au 30 juin, tentez de gagner 1 brasero, 1 escapade culinaire, 1 plancha Tefal ou l\'un des 50 sets barbecue à l\'achat d\'un produit Lionor') }}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@include('fo.layouts.footer')
|
||||
@include('vendor.cn-cookies')
|
||||
|
||||
|
|
|
|||
|
|
@ -5,22 +5,21 @@
|
|||
@section('breadcrumb', request()->route()->getName())
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
|
||||
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
|
||||
crossorigin=""/>
|
||||
<link href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" rel="stylesheet" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
|
||||
crossorigin="" />
|
||||
@endpush
|
||||
|
||||
|
||||
@section('content')
|
||||
<div class="g-0 pb-md-5 position-relative hero">
|
||||
<img src="{{ Vite::asset('resources/assets/images/100LOCAL-V1.png') }}" alt="Logo 100% local" class="img-fluid">
|
||||
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/100LOCAL-V1.png') }}" alt="Logo 100% local">
|
||||
<div class="position-relative hero-fix-height">
|
||||
<img src="{{ Vite::asset('resources/assets/images/Panoramique7.jpg') }}" alt="Un plat de poulet rôti et ses accompagnements sortant du four" class="img-fluid">
|
||||
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/Panoramique7.jpg') }}"
|
||||
alt="Un plat de poulet rôti et ses accompagnements sortant du four">
|
||||
</div>
|
||||
<!-- breadcrumb -->
|
||||
<div class="container breadcrumb-obj small mt-3">
|
||||
<div class="breadcrumb-obj small container mt-3">
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex ">
|
||||
<div class="col-12 d-flex">
|
||||
<p class="fst-italic me-2">Vous êtes ici</p>
|
||||
@include('modules/breadcrumb/breadcrumb-body')
|
||||
</div>
|
||||
|
|
@ -29,17 +28,27 @@
|
|||
<!-- END breadcrumb -->
|
||||
</div>
|
||||
|
||||
<div class="container pt-5 position-relative">
|
||||
<div class="position-relative container pt-5">
|
||||
<div class="row">
|
||||
<section class="col-md-8 offset-md-2 stripes">
|
||||
<h1 class="text-uppercase text-center font-amatic font-amatic-48">{{ __('Retrouvez vos produits Lionor') }}<span class="font-amatic-red">{{ __('près de chez vous') }}</span></h1>
|
||||
<h1 class="text-uppercase font-amatic font-amatic-48 text-center">{{ __('Retrouvez vos produits Lionor') }}<span
|
||||
class="font-amatic-red">{{ __('près de chez vous') }}</span></h1>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="row my-4 search">
|
||||
<div class="row my-4">
|
||||
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/2024-ad.png') }}"
|
||||
title="{{ __('Tentez de gagner un cadeau en achetant un produit Lionor') }}"
|
||||
alt="{{ __('Du 27 mai au 30 juin, tentez de gagner 1 brasero, 1 escapade culinaire, 1 plancha Tefal ou l\'un des 50 sets barbecue à l\'achat d\'un produit Lionor') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row search my-4">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<form class="d-flex" id="address-form">
|
||||
<input class="form-control" type="search" placeholder="Poste Weg, Caëstre, Hauts-de-France, France" aria-label="Search" spellcheck="false" id="addressInputField">
|
||||
<input class="form-control" id="addressInputField" type="search" aria-label="Search"
|
||||
placeholder="Poste Weg, Caëstre, Hauts-de-France, France" spellcheck="false">
|
||||
<button class="btn" type="submit"><i class="fa fa-magnifying-glass"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -51,16 +60,18 @@
|
|||
<span class="shops-module-title text-uppercase">{{ __('Magasins') }}</span>
|
||||
|
||||
<div class="list-group shops-list" id="shops-list">
|
||||
<button class="list-group-item list-group-item-action d-flex align-items-center justify-content-between d-none" id="shop-list-item">
|
||||
<button class="list-group-item list-group-item-action d-flex align-items-center justify-content-between d-none"
|
||||
id="shop-list-item">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ Vite::asset('resources/assets/images/logo.png') }}" alt="Logo de la société" class="branding img-fluid">
|
||||
<img class="branding img-fluid" src="{{ Vite::asset('resources/assets/images/logo.png') }}"
|
||||
alt="Logo de la société">
|
||||
<div class="ms-3">
|
||||
<p>Enseigne</p>
|
||||
<p>Ville</p>
|
||||
<span><i class="fa fa-location-dot me-2"></i>3.92 km</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" title="{{ __('Itinéraire') }}" class="btn btn-primary">Itinéraire ></a>
|
||||
<a class="btn btn-primary" href="#" title="{{ __('Itinéraire') }}">Itinéraire ></a>
|
||||
</button>
|
||||
<div class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center my-3">
|
||||
|
|
@ -71,17 +82,17 @@
|
|||
</div>
|
||||
<div class="col-lg-6">
|
||||
@php
|
||||
$i = 1;
|
||||
foreach (App\Enums\SignsEnum::toStickers() as $key => $value) {
|
||||
// Set first index to 1 because enum start at 1.
|
||||
$stickersArray[$i] = Vite::asset('resources/assets/images/signs/' . $value);
|
||||
$i++;
|
||||
}
|
||||
$data = [
|
||||
'signsStickers' => $stickersArray,
|
||||
'signsLabels' => App\Enums\SignsEnum::toLabels(),
|
||||
'formId' => 'address-form'
|
||||
]
|
||||
$i = 1;
|
||||
foreach (App\Enums\SignsEnum::toStickers() as $key => $value) {
|
||||
// Set first index to 1 because enum start at 1.
|
||||
$stickersArray[$i] = Vite::asset('resources/assets/images/signs/' . $value);
|
||||
$i++;
|
||||
}
|
||||
$data = [
|
||||
'signsStickers' => $stickersArray,
|
||||
'signsLabels' => App\Enums\SignsEnum::toLabels(),
|
||||
'formId' => 'address-form',
|
||||
];
|
||||
@endphp
|
||||
<div class="geocodage" data-json='@json($data)'></div>
|
||||
{{-- <div class="grey small fst-italic">
|
||||
|
|
@ -97,6 +108,5 @@
|
|||
|
||||
@push('scripts')
|
||||
<script nonce="{{ $nonce }}" src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
|
||||
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
|
||||
crossorigin=""></script>
|
||||
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue