takin/project-minnesota
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Takin v/o Oliver Göldi
2024-06-12 19:51:59 +02:00
parent 0ce904a7d8
commit 813874a847
16 changed files with 2113 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/notification/helpers.js Normal file
View File

@@ -0,0 +1,6 @@
export function genId() {
return (
Date.now().toString(36) +
Math.random().toString(36).substring(2, 12).padStart(12, 0)
);
}

41
resources/js/notification/icons.js Normal file
View File

@@ -0,0 +1,41 @@
const SuccessIcon = `
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
</svg>
<span class="sr-only">Check icon</span>
</div>`;
const WarningIcon = `
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
</svg>
<span class="sr-only">Warning icon</span>
</div>`;
const InfoIcon = `
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.408-5.5a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1h-2Z" clip-rule="evenodd"/>
</svg>
<span class="sr-only">Error icon</span>
</div>`;
const ErrorIcon = `
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
</svg>
<span class="sr-only">Error icon</span>
</div>`;
export default function getIcon(type) {
switch (type) {
case "success": return SuccessIcon;
case "info": return InfoIcon;
case "warning": return WarningIcon;
case "error": return ErrorIcon;
default: return null;
}
};

57
resources/js/notification/touch.js Normal file
View File

@@ -0,0 +1,57 @@
const SWIPE_THRESHOLD = 50;
export default function registerSwipe(id) {
const el = document.querySelector(`[data-toast-id="${id}"]`);
if (!el) {
return;
}
let dragStartTime = null;
let pointerStart = null;
el.addEventListener("pointerdown", function (event) {
dragStartTime = new Date();
event.target.setPointerCapture(event.pointerId);
if (event.target.tagName === "BUTTON") {
return;
}
el.dataset.swiping = true;
pointerStart = { x: event.clientX, y: event.clientY };
});
el.addEventListener("pointerup", function (event) {
pointerStart = null;
const swipeAmount = Number(
el.style.getPropertyValue("--swipe-amount").replace("px", "") || 0,
);
const timeTaken = new Date().getTime() - dragStartTime.getTime();
const velocity = Math.abs(swipeAmount) / timeTaken;
// Remove only if threshold is met
if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
ToastinTakin.remove(id);
return;
}
el.style.setProperty("--swipe-amount", "0px");
el.dataset.swiping = false;
});
el.addEventListener("pointermove", function (event) {
if (!pointerStart) {
return;
}
const yPosition = event.clientY - pointerStart.y;
const xPosition = event.clientX - pointerStart.x;
const clampedX = Math.max(0, xPosition);
const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
const isAllowedToSwipe = Math.abs(clampedX) > swipeStartThreshold;
if (isAllowedToSwipe) {
el.style.setProperty("--swipe-amount", `${xPosition}px`);
} else if (Math.abs(yPosition) > swipeStartThreshold) {
// Swipe is heading into the wrong direction, possibly the user wants to abort.
pointerStart = null;
}
});
}

55
resources/js/notification/ui.js Normal file
View File

@@ -0,0 +1,55 @@
import getIcon from './icons';
import { genId } from './helpers';
export function renderToaster() {
const toaster = document.createElement("div");
document.body.appendChild(toaster);
toaster.outerHTML = `
<div
aria-label="Notifications alt+T"
tabindex="-1"
data-expanded="false"
class="fixed right-4 top-4 z-50 w-80"
id="toaster"
></div>`;
return toaster;
}
export function renderToast(list, msg, type) {
const toast = document.createElement("div");
const id = genId();
const count = list.children.length;
const icon = getIcon(type);
list.prepend(toast);
toast.outerHTML = `
<div
aria-live="polite"
aria-atomic="true"
role="alert"
class="absolute select-none transition-opacity transition-transform flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
tabindex="0"
data-toast-id="${id}"
data-removed="false"
data-hidden="true"
data-index="${0}"
data-front="true"
data-swiping="false"
data-swipe-out="false"
style="--index: 0; --offset: 0px; --initial-height: 0px;"
>
${ icon ? icon : ""}
<div class="ms-3 text-sm font-normal">
${msg}
</div>
<button onclick="ToastinTakin.remove('${id}')" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
</button>
</div>`;
return {id, toast};
}