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

Added the newsletter field in the footer

Browse source
This commit is contained in:
Noah Lancien 2024-05-06 18:02:23 +02:00
parent 86b5a0579c
commit ee86923ac2
8 changed files with 118 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
ts/base/common.ts
View file

@ -41,53 +41,4 @@ document.addEventListener("DOMContentLoaded", function () {
});
}, 300);
}
const scrollTop = (target: string, offset: number = 0) => {
const targetElement = document.getElementById(target);
if (!targetElement) throw new Error(`scrollTop requires ${target} to exist`);
const top = targetElement.getBoundingClientRect().top,
t = window.scrollY + top - offset;
scrollTo({
top: t,
behavior: "smooth"
});
};
const pageUp = document.getElementById("page-up");
if (pageUp) {
pageUp.addEventListener("click", () => scrollTop("content-container", 250)),
document.addEventListener("scroll", () => {
if (window.scrollY > 250) {
pageUp.classList.add("show");
return;
}
pageUp.classList.remove("show");
});
}
});
// * Input Validation.
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("input.is-invalid").forEach((input) => {
let timer: NodeJS.Timeout|null = null;
input.addEventListener("change", () => {
const parent = input.parentElement;
input.classList.remove("is-invalid");
if (parent && parent.classList.contains("is-invalid")) {
parent.classList.remove("is-invalid");
}
});
input.addEventListener("input", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
const parent = input.parentElement;
input.classList.remove("is-invalid");
if (parent && parent.classList.contains("is-invalid")) {
parent.classList.remove("is-invalid");
}
}, 250);
});
});
});

5
ts/fo.ts
View file

@ -10,6 +10,11 @@ import "./utilities/vue-fo";
// CUSTOM
import "./base/common";
// PARTIALS
import "./partials/input-errors-removal";
import "./partials/newsletter";
import "./partials/scroll-to-top";
// PAGES
import "./pages/home";
import "./pages/products";

25
ts/partials/input-errors-removal.ts Normal file
View file

@ -0,0 +1,25 @@
// * Input Validation.
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("input.is-invalid").forEach((input) => {
let timer: NodeJS.Timeout|null = null;
input.addEventListener("change", () => {
const parent = input.parentElement;
input.classList.remove("is-invalid");
if (parent && parent.classList.contains("is-invalid")) {
parent.classList.remove("is-invalid");
}
});
input.addEventListener("input", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
const parent = input.parentElement;
input.classList.remove("is-invalid");
if (parent && parent.classList.contains("is-invalid")) {
parent.classList.remove("is-invalid");
}
}, 250);
});
});
});

49
ts/partials/newsletter.ts Normal file
View file

@ -0,0 +1,49 @@
import route from "../../../../ts/modules/route";
const laravelRoute = route.methods.route;
document.addEventListener("DOMContentLoaded", function () {
// * NEWSLETTERS
// Subscribe to newsletter
const newsletterSubmitBtn = document.getElementById("newsletter-submit");
const newsletterEmailInput = document.getElementById("newsletter-email") as HTMLInputElement;
const newsletterMessageDiv = document.getElementById("newsletter-message");
if (newsletterSubmitBtn && newsletterEmailInput && newsletterMessageDiv) {
// Submit the request
newsletterSubmitBtn.addEventListener("click", function () {
// Reset error field
newsletterMessageDiv.classList.remove("bg-success-subtle", "border-success", "text-success");
newsletterMessageDiv.classList.remove("bg-danger-subtle", "border-danger", "text-danger");
newsletterMessageDiv.textContent = "";
const addSingleOptinRoute = laravelRoute("fo.add-single-optin");
if (addSingleOptinRoute === null) {
return;
}
window.axios.post(addSingleOptinRoute, {
email: newsletterEmailInput.value,
})
.then(function (response) {
newsletterMessageDiv.classList.remove("d-none");
newsletterMessageDiv.classList.add("bg-success-subtle", "border-success", "text-success");
newsletterMessageDiv.textContent = String(response.data);
newsletterEmailInput.value = "";
})
.catch(function (error) {
newsletterMessageDiv.classList.remove("d-none");
newsletterMessageDiv.classList.add("bg-danger-subtle", "border-danger", "text-danger");
if (error.response.status == 422) {
const errors = error.response.data.errors;
for (const errorKey in errors) {
const errorP = document.createElement("p");
errorP.classList.add("m-0");
errorP.textContent = errors[errorKey];
newsletterMessageDiv.appendChild(errorP);
}
} else {
newsletterMessageDiv.textContent = error.response.data;
}
});
});
}
});

25
ts/partials/scroll-to-top.ts Normal file
View file

@ -0,0 +1,25 @@
// * Scroll to top button.
document.addEventListener("DOMContentLoaded", function () {
const scrollTop = (target: string, offset: number = 0) => {
const targetElement = document.getElementById(target);
if (!targetElement) throw new Error(`scrollTop requires ${target} to exist`);
const top = targetElement.getBoundingClientRect().top,
t = window.scrollY + top - offset;
scrollTo({
top: t,
behavior: "smooth"
});
};
const pageUp = document.getElementById("page-up");
if (pageUp) {
pageUp.addEventListener("click", () => scrollTop("content-container", 250)),
document.addEventListener("scroll", () => {
if (window.scrollY > 250) {
pageUp.classList.add("show");
return;
}
pageUp.classList.remove("show");
});
}
});

12
views/layouts/footer-newsletter.blade.php Normal file
View file

@ -0,0 +1,12 @@
{{-- Newsletter form --}}
<div class="d-inline-block fs-3 p-3">
<span>{{ __('Inscrivez-vous à notre newsletter') }}</span>
<div class="d-inline-block">
<div class="d-flex">
<input class="form-control mx-2" id="newsletter-email" type="email" placeholder="mon@email.com">
<button class="btn btn-primary text-uppercase fs-4" id="newsletter-submit" type="submit">{{ __('Valider') }}</button>
{{-- Error/Success message container --}}
</div>
</div>
<div class="d-none fs-6 rounded-2 my-3 border p-3" id="newsletter-message"></div>
</div>

1
views/layouts/footer.blade.php
View file

@ -1,6 +1,7 @@
<div class="row text-bg-quad">
<div class="col-12 col-md-9 col-xl-10">
@include('theme::layouts.footer-links')
@include('theme::layouts.footer-newsletter')
{{-- LINKS --}}
<nav class="ms-md-5 footer-nav p-3">

1
views/layouts/teaser/footer.blade.php
View file

@ -1,6 +1,7 @@
<div class="row text-bg-quad">
<div class="col-12 col-md-9 col-xl-10">
@include('theme::layouts.footer-links')
@include('theme::layouts.footer-newsletter')
{{-- LINKS --}}
<ul class="list-inline ms-md-5 p-3">