bouzoure/pop-camarades
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Toggle light and dark modes + header color

Browse source
This commit is contained in:
William Bouzourène 2025-01-17 00:05:34 +01:00
parent b1f7777c3e
commit 150c289741
6 changed files with 118 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

31
controllers/misc.go Normal file
View file

@ -0,0 +1,31 @@
package controllers
import (
"fmt"
"git.readonly.ch/bouzoure/pop-camarades/helpers"
"github.com/gofiber/fiber/v2"
)
func SetColorMode(c *fiber.Ctx) error {
colorMode := "light"
if c.FormValue("color_mode") == "dark" {
colorMode = "dark"
}
sess, err := helpers.GetSessionStore(c)
if err != nil {
return err
}
sess.Set("color-mode", colorMode)
err = sess.Save()
if err != nil {
return err
}
return c.SendString(fmt.Sprintf(
"New color mode: %s",
colorMode,
))
}

3
main.go
View file

@ -88,6 +88,9 @@ func main() {
app.Use(loggerMiddleware.New()) app.Use(loggerMiddleware.New())
app.Use(helmet.New()) app.Use(helmet.New())
// Misc endpoints without auth
app.Post("/set-color-mode", controllers.SetColorMode)
// Security middlewares // Security middlewares
app.Use(middlewares.SavedSessionMiddleware) app.Use(middlewares.SavedSessionMiddleware)
app.Use(middlewares.AuthMiddleware) app.Use(middlewares.AuthMiddleware)

7
middlewares/templates.go
View file

@ -17,6 +17,7 @@ type TemplatesGlobals struct {
UserFullname string UserFullname string
UserIsAdmin bool UserIsAdmin bool
TimeStart time.Time TimeStart time.Time
ColorMode string
} }
func TemplatesMiddleware(c *fiber.Ctx) error { func TemplatesMiddleware(c *fiber.Ctx) error {
@ -28,6 +29,12 @@ func TemplatesMiddleware(c *fiber.Ctx) error {
return err return err
} }
globals.ColorMode = "auto"
colorMode := sess.Get("color-mode")
if colorMode == "dark" || colorMode == "light" {
globals.ColorMode = colorMode.(string)
}
userid := sess.Get("userid") userid := sess.Get("userid")
if userid != nil { if userid != nil {
switch userid.(type) { switch userid.(type) {

55
static/functions.js
View file

@ -3,5 +3,58 @@ $(document).ready(function() {
if(!confirm("Êtes-vous sûr ?")) { if(!confirm("Êtes-vous sûr ?")) {
e.preventDefault(); e.preventDefault();
} }
}) });
});
$(document).ready(function() {
$(".toggle-dark-mode").on("click", function() {
var currentState = $("html").attr("data-bs-theme");
var newState = "dark";
if (currentState === "dark") {
newState = "light";
}
setColorMode(newState);
});
});
$(document).ready(function() {
var currentState = $("html").attr("data-bs-theme");
var storedState = localStorage.getItem("color-mode");
if (storedState && storedState !== currentState) {
return setColorMode(storedState);
}
if (currentState === "auto") {
var newState = "light";
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
newState = "dark";
}
return setColorMode(newState);
}
});
function setColorMode(color) {
if (color == "dark") {
$(".toggle-dark-mode").children("i").removeClass("bi-moon");
$(".toggle-dark-mode").children("i").addClass("bi-sun");
} else {
$(".toggle-dark-mode").children("i").removeClass("bi-sun");
$(".toggle-dark-mode").children("i").addClass("bi-moon");
}
$("html").attr("data-bs-theme", color);
localStorage.setItem("color-mode", color);
$.post("/set-color-mode", {color_mode: color});
}
$(document).ready(function() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
}); });

2
views/layouts/main.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="fr" class="h-100" data-bs-theme="dark"> <html lang="fr" class="h-100" data-bs-theme="{{ Globals.ColorMode }}">
{% include "partials/easter_egg.html" %} {% include "partials/easter_egg.html" %}
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

30
views/partials/header.html
View file

@ -1,4 +1,4 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <nav class="navbar navbar-expand-lg bg-danger" data-bs-theme="dark">
<div class="container-fluid"> <div class="container-fluid">
<a href="/" class="navbar-brand"> <a href="/" class="navbar-brand">
<img <img
@ -9,7 +9,6 @@
> >
</a> </a>
{% if Globals.LoggedIn %}
<button <button
class="navbar-toggler" class="navbar-toggler"
type="button" type="button"
@ -24,12 +23,12 @@
{% if Globals.TotpVerified %} {% if Globals.TotpVerified %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/members"> <a class="nav-link active" href="/members">
<i class="bi-people me-2"></i>Membres <i class="bi-people acti me-2"></i>Membres
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/contacts"> <a class="nav-link active" href="/contacts">
<i class="bi-telephone me-2"></i>Contacts <i class="bi-telephone me-2"></i>Contacts
</a> </a>
</li> </li>
@ -38,7 +37,7 @@
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a <a
class="nav-link dropdown-toggle" class="nav-link active dropdown-toggle"
href="javascript:;" href="javascript:;"
role="button" role="button"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
@ -80,9 +79,24 @@
</ul> </ul>
<div class="d-flex"> <div class="d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a
class="nav-link toggle-dark-mode active"
href="javascript:;"
data-bs-toggle="tooltip"
data-bs-title="Basculer entre le mode jour et le mode nuit"
>
{% if Globals.ColorMode == "dark" %}
<i class="bi-sun"></i>
{% else %}
<i class="bi-moon"></i>
{% endif %}
</a>
{% if Globals.LoggedIn %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a <a
class="nav-link dropdown-toggle" class="nav-link active dropdown-toggle"
href="javascript:;" href="javascript:;"
role="button" role="button"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
@ -113,10 +127,10 @@
</li> </li>
</ul> </ul>
</li> </li>
{% endif %}
</ul> </ul>
</div> </div>
</div> </div>
{% endif %}
</div> </div>
</nav> </nav>