update notification

gigamaster · Jun 16, 2024 · 8660189 · 8660189
1 parent bd726ed
commit 8660189
Show file tree

Hide file tree

Showing 25 changed files with 1,682 additions and 99 deletions.
diff --git a/app/asset/lib/style.css → app/asset/css/style.css b/app/asset/lib/style.css → app/asset/css/style.css
diff --git a/app/asset/img/codemo-logo.png b/app/asset/img/codemo-logo.png
diff --git a/app/asset/lib/lib.module.js b/app/asset/lib/lib.module.js
@@ -3,3 +3,10 @@
 import * as FileSaver from "./filesaver.js";
 import * as JSZip from "./jszip.min.js";
 import * as api from "./api.js";
+
+window.notificationOptions = {
+    wrapperId: 'notificationWrapper',
+    templateFile: 'https://gigamaster.github.io/codemo/asset/notification.html',
+    autoClose: 3000,
+    autoRemove: 4000,
+  }
diff --git a/app/asset/notification.html b/app/asset/notification.html
@@ -0,0 +1,95 @@
+<template id="notificationAlert" class="notification">
+<div class="notify-box data-[notify-show=true]:notify-in data-[notify-show=false]:notify-out">
+    <div class="notify-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 50 50"><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="#6981ab" stroke-width="2" d="M25 18.75v8.333"/><path stroke="#6981ab" stroke-width="3" d="M25.104 35.417h-.208"/><path stroke="#306cfe" stroke-width="2" d="M21.354 8.73L5.48 37.5a4.166 4.166 0 0 0 3.646 6.25h31.75a4.167 4.167 0 0 0 3.646-6.25L28.646 8.73a4.166 4.166 0 0 0-7.292 0"/></g></svg>
+    </div>
+
+    <div role="alert" class="notify-text text-white bg-red-500 p-4">
+    {notificationText}
+    </div>
+
+    <button x-on:click="$root.setAttribute('data-notify-show', false)" 
+    class="notify-btn">
+    Close
+    </button>        
+</div>
+</template>
+<style>
+    .notify-box {
+    display: flex;
+    align-items: center;
+	animation: flyIn 0.3s ease-out;
+	background: hsl(210, 20%, 27%);
+    border: 1px solid hsl(210, 30%, 27%);
+	border-radius: 8px;
+	box-shadow: 0 0.5em 1em hsla(210,10%,10%,0.4);
+    margin: 1rem 0;
+	height: 4em;
+    width:18rem;
+}
+.notify-in {
+animation: flyIn 0.3s ease-out;
+}
+.notify-out {
+	animation: flyOut 0.5s ease-out forwards;
+}
+.notify-icon {
+	flex-shrink: 0;
+	margin: 0.5em;
+	width: 2em;
+	height: 2em;
+}
+.notify-icon > svg {
+    font-size: 2em;
+}
+.notify-text {
+	/* color:#ff9800; */
+	font-size: 0.85em;
+	font-weight: bold;
+    line-height: 1.5;
+	padding: 0.375em 1em;
+    place-content: center;
+    width: 100%;
+	height: 100%;  
+}
+button.notify-btn {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    min-width: 4em;
+    height: 100%;
+    place-content: center;
+
+    background-color: hsla(223, 70%, 45%, 0.5);
+    border: 1px solid hsl(223, 90%, 55%);
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    color: inherit;
+    font-size: .85em;
+    font-weight: 400;
+
+    padding: 1rem 0.5rem;
+    transition: all .5s ease-in-out;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+}
+button.notify-btn:hover {
+    background: hsl(223, 90%, 55%);
+    color:#f1f1f1;
+    border: 1px solid hsl(223, 90%, 55%);
+}
+.notify-btn-text {
+	display: inline-block;
+	pointer-events: none;
+}
+/* Animation */
+@keyframes flyIn {
+	from {transform: translateX(calc(100% + 1.5em));}
+	to {transform: translateX(0);}
+}
+@keyframes flyOut {
+	from {transform: translateX(0);}
+	to {transform: translateX(calc(100% + 1.5em));}
+}
+</style>
diff --git a/app/style.css b/app/style.css
diff --git a/app/asset/lib/LICENSE.md → app/test/LICENSE.md b/app/asset/lib/LICENSE.md → app/test/LICENSE.md
diff --git a/app/asset/lib/README.md → app/test/README.md b/app/asset/lib/README.md → app/test/README.md
diff --git a/app/test/alpine-notify.html b/app/test/alpine-notify.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notifications</title>
+    <script defer src="https://unpkg.com/alpinejs-notify@latest/dist/notifications.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body class="bg-yellow-50">
+    <div x-data>
+        <div id="topRight" class="fixed right-4 top-4 max-w-xs space-y-2"></div>
+        <div id="bottomLeft" class="fixed bottom-4 left-4 max-w-xs space-y-2"></div>
+
+        <div class="flex gap-2">
+          <button
+            @click="$notify('Nihil distinctio suscipit iste impedit magnam eius iure culpa mollitia tenetur', {
+            wrapperId: 'bottomLeft',
+            templateId: 'alertStandard',
+            autoRemove: 3000
+          })"
+            class="underline"
+          >
+            Standard
+          </button>
+
+          <button
+            @click="$notify('Earum aliquid quaerat officiis.', {
+              wrapperId: 'bottomLeft',
+              templateId: 'alertClose',
+            })"
+            class="underline"
+          >
+            Dismiss
+          </button>
+
+          <button
+            @click="$notify('Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, natus.', {
+            wrapperId: 'topRight',
+            templateId: 'alertAnimate',
+            autoClose: 3000,
+            autoRemove: true
+          })"
+            class="underline"
+          >
+            Animate
+          </button>
+        </div>
+
+        <template id="alertStandard">
+          <div role="alert" class="bg-gray-100 p-4">{notificationText}</div>
+        </template>
+      </div>
+
+      <template id="alertClose">
+        <div x-data role="alert" class="bg-gray-100 p-4 data-[notify-show=false]:hidden">
+          {notificationText}
+
+          <button @click="$root.setAttribute('data-notify-show', false)" class="underline">Close</button>
+        </div>
+      </template>
+
+      <template id="alertAnimate">
+        <div
+          x-data
+          role="alert"
+          class="data-[notify-show=true]:animate-slide-in data-[notify-show=false]:animate-slide-out bg-gray-100 p-4"
+        >
+          {notificationText}
+
+          <button @click="$root.setAttribute('data-notify-show', false)" class="underline">Close</button>
+        </div>
+      </template>
+</body>
+</html>
diff --git a/app/test/alpinejs-notification-promises/index.html b/app/test/alpinejs-notification-promises/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Alpinejs notification+promises</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<header>
+    <h1>Alpine.js Notification</h1>
+</header>
+
+<main>
+<h3>Button onclick triggers notification</h3>    
+<div x-data>
+  <div
+    id="notificationWrapper"
+    class="fixed top-4 w-64 right-4 space-y-2"
+  ></div>
+
+  <button
+    x-on:click="$notify('Hello there, I am a notification!', {
+    wrapperId: 'notificationWrapper',
+    templateId: 'notificationAlert',
+    autoClose: false,
+    autoRemove: false
+  })"
+    class="notify"
+  >
+    Notify
+  </button>
+
+  <a
+  x-on:click="$notify('Hello there, I am a href notification!', {
+  wrapperId: 'notificationWrapper',
+  templateId: 'notificationAlert',
+  autoClose: false,
+  autoRemove: false
+})"
+  class="notify"
+>
+  Href Notify
+</a>
+
+    <p>Note: Cannot use button close to dismiss Notification!</p>
+
+<template id="notificationAlert" class="notification">
+  <div class="notify-box data-[notify-show=true]:notify-in data-[notify-show=false]:notify-out">
+    <div class="notify-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 50 50"><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="#6981ab" stroke-width="2" d="M25 18.75v8.333"/><path stroke="#6981ab" stroke-width="3" d="M25.104 35.417h-.208"/><path stroke="#306cfe" stroke-width="2" d="M21.354 8.73L5.48 37.5a4.166 4.166 0 0 0 3.646 6.25h31.75a4.167 4.167 0 0 0 3.646-6.25L28.646 8.73a4.166 4.166 0 0 0-7.292 0"/></g></svg>
+    </div>
+
+    <div role="alert" class="notify-text text-white bg-red-500 p-4">
+      {notificationText}
+    </div>
+
+    <button x-on:click="$root.setAttribute('data-notify-show', false)" 
+      class="notify-btn">
+      Close
+    </button>
+
+   </div>
+</template>
+</div>
+<!-- /x-data --> 
+<hr>
+<h3>Second button using Promises</h3> 
+<p>$nextTick returns a promise, allowing the use of $nextTick to pause an async function until after pending dom updates. When used like this, $nextTick also does not require an argument to be passed.</p>    
+    <div x-data="{ title: 'Hello' }">
+    <button
+    @click="title = 'Hello World!';
+    await $nextTick(); 
+    $notify('Hello there, I am a notification!', {
+    wrapperId: 'notificationWrapper',
+    templateId: 'notificationAlert',
+    autoClose: false,
+    autoRemove: false
+    })"
+    class="notify"
+x-text="title"
+    ></button>
+</div>
+
+<xmp>
+  <button
+  @click="title = 'Hello World!';
+    await $nextTick(); 
+    $notify('Hello there, I am a notification!', {
+    wrapperId: 'notificationWrapper',
+    templateId: 'notificationAlert',
+    autoClose: false,
+    autoRemove: false
+    })"
+    x-text="title"
+    class="notify"
+    >
+  </button>
+</xmp>
+
+<hr>
+</main>
+<!-- partial -->
+  <script src='https://unpkg.com/alpinejs-notify@latest/dist/notifications.min.js'></script>
+<script src='https://unpkg.com/alpinejs@latest/dist/cdn.min.js'></script>
+</body>
+</html>
diff --git a/app/test/alpinejs-notification-promises/src/LICENSE.txt b/app/test/alpinejs-notification-promises/src/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Info Opensource (https://codepen.io/iopensource/pen/XWwVEOb)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/app/test/alpinejs-notification-promises/src/README.md b/app/test/alpinejs-notification-promises/src/README.md
@@ -0,0 +1,4 @@
+# Alpinejs notification+promises
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/iopensource/pen/XWwVEOb](https://codepen.io/iopensource/pen/XWwVEOb).
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# Alpinejs notification+promises

		A Pen created on CodePen.io. Original URL: [https://codepen.io/iopensource/pen/XWwVEOb](https://codepen.io/iopensource/pen/XWwVEOb).