/* ************************************************************************** */ /* */ /* ::: :::::::: */ /* main.js :+: :+: :+: */ /* +:+ +:+ +:+ */ /* By: madegryc +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/04 23:32:52 by edbernar #+# #+# */ /* Updated: 2024/09/30 19:07:35 by madegryc ### ########.fr */ /* */ /* ************************************************************************** */ function createHeader(title, img) { const divHeader = document.createElement("div"); const icon = document.createElement("img"); const h1Title = document.createElement("h1"); const cross = document.createElement("span"); const titleTextNode = document.createTextNode(title); divHeader.classList.add("header"); if (img) { icon.style.width = "20px"; icon.style.height = "20px"; icon.style.position = 'absolute'; icon.src = img; } h1Title.appendChild(titleTextNode); h1Title.style.textAlign = "center"; h1Title.style.width = "100%"; h1Title.style.marginTop = "5px"; cross.innerHTML = "×"; cross.style.position = 'absolute'; cross.style.cursor = 'pointer'; cross.style.margin = '0'; cross.style.right = '10px'; cross.style.fontSize = '25px'; cross.addEventListener("click", () => { divHeader.parentNode.style.animation = "slideOut 0.21s"; setTimeout(() => { divHeader.parentNode.remove(); }, 199); }); if (img) divHeader.appendChild(icon); divHeader.appendChild(h1Title); divHeader.appendChild(cross); return (divHeader); } function createContent(message) { const divContent = document.createElement("div"); const pMessage = document.createElement("p"); const pMessageNode = document.createTextNode(message); const limit = 100; divContent.classList.add("content"); pMessage.style.textAlign = "center"; if (message.length > limit) message = message.substring(0, limit) + "..."; pMessage.appendChild(pMessageNode); divContent.appendChild(pMessage); return (divContent); } function createLoadBar(newNotification, timer) { const divLoadBar = document.createElement("div"); const progress = document.createElement("div"); let interval = null; const intervalTimer = timer / 100; let i = 1; progress.classList.add("progress"); divLoadBar.classList.add("loadBar"); divLoadBar.appendChild(progress); progress.style.height = '5px'; progress.style.width = '0px'; progress.style.backgroundColor = 'black'; newNotification.addEventListener("mouseover", () => { clearInterval(interval); progress.style.width = "100%"; }); interval = setInterval(() => { progress.style.width = (intervalTimer * i) * 100 / timer + "%"; i++; }, intervalTimer); setTimeout(() => { clearInterval(interval); }, timer); newNotification.appendChild(divLoadBar); return (interval); } function createFooter(action, actionText) { const newButton = document.createElement("div"); const textNode = document.createTextNode(actionText); if (action == null) return (null); newButton.style.cursor = "pointer"; if (actionText.length > 20) actionText = actionText.substring(0, 20) + "..."; newButton.appendChild(textNode); newButton.setAttribute("onclick", action); newButton.classList.add("footer"); if (typeof(action) !== "function") throw new Error("Action must be a function"); newButton.addEventListener("click", action); return (newButton); } function newNotification(title, message, img, action, timer, actionText) { const divNotification = document.getElementById("divNotification"); const newNotification = document.createElement("div"); const header = createHeader(title, img); const content = createContent(message); const footer = createFooter(action, actionText); let intervalLoadBar = null; let timeoutInTimout = null; console.log("New notification: " + message); if (divNotification == null) { console.warn("No div for display notification here. Add div in html template for display it."); return ; } newNotification.classList.add("notification"); newNotification.style.width = "100%"; newNotification.appendChild(header); divNotification.appendChild(newNotification); newNotification.appendChild(content); if (footer) newNotification.appendChild(footer); intervalLoadBar = createLoadBar(newNotification, timer); const timeout = setTimeout(() => { timeoutInTimout = setTimeout(() => { divNotification.removeChild(newNotification); }, 199); newNotification.style.animation = "slideOut 0.21s"; }, timer); newNotification.addEventListener("mouseover", () => { clearTimeout(timeout); clearTimeout(timeoutInTimout); clearInterval(intervalLoadBar); }); } class notification { defaultIcon = { "warning": "/static/img/notification/ico/warning.png", "error": "/static/img/notification/ico/error.png", "success": "/static/img/notification/ico/success.png", "info": "/static/img/notification/ico/info.png" }; constructor() {} new(title, message, img=null, action=null, actionText="Confirm", timer=5000) { newNotification(title, message, img, action, timer, actionText); } } const createNotification = new notification(); export { createNotification };