From 150c289741eec118f2c3e68a723d376de8b97d4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?William=20Bouzour=C3=A8ne?= Date: Fri, 17 Jan 2025 00:05:34 +0100 Subject: [PATCH] Toggle light and dark modes + header color --- controllers/misc.go | 31 +++++++++++++++++++++ main.go | 3 +++ middlewares/templates.go | 7 +++++ static/functions.js | 55 +++++++++++++++++++++++++++++++++++++- views/layouts/main.html | 2 +- views/partials/header.html | 30 +++++++++++++++------ 6 files changed, 118 insertions(+), 10 deletions(-) create mode 100644 controllers/misc.go diff --git a/controllers/misc.go b/controllers/misc.go new file mode 100644 index 0000000..b82c128 --- /dev/null +++ b/controllers/misc.go @@ -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, + )) +} diff --git a/main.go b/main.go index a43a06d..7475139 100644 --- a/main.go +++ b/main.go @@ -88,6 +88,9 @@ func main() { app.Use(loggerMiddleware.New()) app.Use(helmet.New()) + // Misc endpoints without auth + app.Post("/set-color-mode", controllers.SetColorMode) + // Security middlewares app.Use(middlewares.SavedSessionMiddleware) app.Use(middlewares.AuthMiddleware) diff --git a/middlewares/templates.go b/middlewares/templates.go index 25a8784..cfef2e5 100644 --- a/middlewares/templates.go +++ b/middlewares/templates.go @@ -17,6 +17,7 @@ type TemplatesGlobals struct { UserFullname string UserIsAdmin bool TimeStart time.Time + ColorMode string } func TemplatesMiddleware(c *fiber.Ctx) error { @@ -28,6 +29,12 @@ func TemplatesMiddleware(c *fiber.Ctx) error { return err } + globals.ColorMode = "auto" + colorMode := sess.Get("color-mode") + if colorMode == "dark" || colorMode == "light" { + globals.ColorMode = colorMode.(string) + } + userid := sess.Get("userid") if userid != nil { switch userid.(type) { diff --git a/static/functions.js b/static/functions.js index fe83145..c45f537 100644 --- a/static/functions.js +++ b/static/functions.js @@ -3,5 +3,58 @@ $(document).ready(function() { if(!confirm("Êtes-vous sûr ?")) { 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)) +}); \ No newline at end of file diff --git a/views/layouts/main.html b/views/layouts/main.html index c6ec6fb..c93efd6 100644 --- a/views/layouts/main.html +++ b/views/layouts/main.html @@ -1,5 +1,5 @@ - + {% include "partials/easter_egg.html" %} diff --git a/views/partials/header.html b/views/partials/header.html index 306dec5..6a1b28a 100644 --- a/views/partials/header.html +++ b/views/partials/header.html @@ -1,4 +1,4 @@ -