From cfe9ef17e2319cf5f877b7cde9d7dba12687195f Mon Sep 17 00:00:00 2001
From: pvincent <pvincent@artcode.re>
Date: Mon, 29 Jan 2024 21:26:21 +0400
Subject: [PATCH] toastify only

---
 .../stylesheets/application.toastify.css      | 101 ++++++++++++++++++
 app/javascript/application.js                 |  14 +--
 app/views/layouts/_notification.html.erb      |  20 +++-
 app/views/layouts/application.html.erb        |   3 -
 bin/importmap                                 |   6 +-
 bin/rake                                      |   4 +-
 config/importmap.rb                           |   1 -
 vendor/javascript/notyf.js                    |  13 ---
 8 files changed, 130 insertions(+), 32 deletions(-)
 create mode 100644 app/assets/stylesheets/application.toastify.css
 delete mode 100644 vendor/javascript/notyf.js

diff --git a/app/assets/stylesheets/application.toastify.css b/app/assets/stylesheets/application.toastify.css
new file mode 100644
index 0000000..f2d6e5b
--- /dev/null
+++ b/app/assets/stylesheets/application.toastify.css
@@ -0,0 +1,101 @@
+/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * customized by: pvincent
+ */
+
+ 
+ .toastify {
+    padding: 12px 20px;
+    color: #ffffff;
+    display: inline-block;
+    box-shadow: 0 6px 6px 3px rgba(0, 0, 0, 0.3), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
+    background: linear-gradient(135deg, #73a5ff, #5477f5);
+    position: fixed;
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    border-radius: 2px;
+    cursor: text;
+    text-decoration: none;
+    max-width: calc(50% - 20px);
+    z-index: 50;
+}
+
+.toastify-notice {
+    background: linear-gradient(135deg, darkgreen, green);
+}
+
+.toastify-alert {
+    background: linear-gradient(135deg, darkred, red)
+}
+.toastify.on {
+    opacity: 1;
+    top: 0;
+}
+
+.toastify .toast-close {
+    background: transparent;
+    color: transparent;
+    margin-left: 1em;
+    padding: 0 5px;
+    border-radius: 25%;
+    border: 0;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1em;
+    opacity: 0;
+}
+
+.toastify:hover .toast-close {
+    background: white;
+    color: black;
+    opacity: 0.5;
+    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.toastify-right {
+    right: 15px;
+}
+
+.toastify-left {
+    left: 15px;
+}
+
+.toastify-top {
+    top: -150px;
+}
+
+.toastify-bottom {
+    bottom: -150px;
+}
+
+.toastify-rounded {
+    border-radius: 25px;
+}
+
+.toastify-avatar {
+    width: 1.5em;
+    height: 1.5em;
+    margin: -7px 5px;
+    border-radius: 2px;
+}
+
+.toastify-center {
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    max-width: fit-content;
+}
+
+@media only screen and (max-width: 360px) {
+    .toastify-right, .toastify-left {
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
+        max-width: fit-content;
+    }
+}
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 1c44cf7..b8cbcf1 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,10 +1,10 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+// Turbo
 import "@hotwired/turbo-rails"
-import "controllers"
+Turbo.setProgressBarDelay(300)
 
-// Notyf
-import { Notyf } from 'notyf'
-window.Notyf=Notyf
+// Toastify
+import Toastify from 'toastify-js'
+window.Toastify=Toastify
 
-// Customize Turbo default behaviour
-Turbo.setProgressBarDelay(300)
\ No newline at end of file
+// Js Controllers
+import "controllers"
\ No newline at end of file
diff --git a/app/views/layouts/_notification.html.erb b/app/views/layouts/_notification.html.erb
index d88e46d..af3e5f0 100644
--- a/app/views/layouts/_notification.html.erb
+++ b/app/views/layouts/_notification.html.erb
@@ -2,9 +2,23 @@
   <script data-turbo-temporary>
     document.addEventListener('turbo:load',(e)=>{
 
-      const notyf=new Notyf({ duration: 5000, position: { x: 'center', y: 'top' } })
-      <% if flash.notice%> notyf.success('<%=flash.notice%>') <%end%>
-      <% if flash.alert%> notyf.error('<%=flash.alert%>') <%end%>
+      const common={
+        gravity: 'top',
+        position: 'center',
+        duration: 4000,
+        offset: { y: '1em' },
+        close: true
+      }
+      const notice={ className: 'toastify-notice text-black', ...common }
+      const alert={ className: 'text-black toastify-alert', ...common }
+
+      <% if flash.notice%>
+        Toastify({ text: '<%=flash.notice%>', ...notice}).showToast();
+      <%end%>
+
+      <% if flash.alert%>
+        Toastify({ text: '<%=flash.alert%>', ...alert}).showToast();
+      <%end%>
 
       // useful to prevent flickering from turbo preview
       Turbo.cache.exemptPageFromPreview()
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 58c7c1a..3349ed7 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -6,9 +6,6 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
-
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
diff --git a/bin/importmap b/bin/importmap
index 36502ab..6fcdec8 100755
--- a/bin/importmap
+++ b/bin/importmap
@@ -1,4 +1,6 @@
 #!/usr/bin/env ruby
+require 'rackup'
+module Rack; Handler = ::Rackup::Handler; end
 
-require_relative "../config/application"
-require "importmap/commands"
+require_relative '../config/application'
+require 'importmap/commands'
diff --git a/bin/rake b/bin/rake
index 30f51d0..2600e18 100755
--- a/bin/rake
+++ b/bin/rake
@@ -2,8 +2,6 @@
 require_relative '../config/boot'
 require 'rake'
 require 'rackup'
-module Rack
-  Handler = ::Rackup::Handler
-end
+module Rack; Handler = ::Rackup::Handler; end
 
 Rake.application.run
diff --git a/config/importmap.rb b/config/importmap.rb
index a04618f..6ee0304 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -6,5 +6,4 @@ pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 pin_all_from 'app/javascript/controllers', under: 'controllers'
 
-pin 'notyf' # @3.10.0
 pin 'toastify-js' # @1.12.0
diff --git a/vendor/javascript/notyf.js b/vendor/javascript/notyf.js
deleted file mode 100644
index 2c6545c..0000000
--- a/vendor/javascript/notyf.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var __assign=function(){__assign=Object.assign||function __assign(t){for(var i,e=1,n=arguments.length;e<n;e++){i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t};return __assign.apply(this,arguments)};var t=function(){function NotyfNotification(t){this.options=t;this.listeners={}}NotyfNotification.prototype.on=function(t,i){var e=this.listeners[t]||[];this.listeners[t]=e.concat([i])};NotyfNotification.prototype.triggerEvent=function(t,i){var e=this;var n=this.listeners[t]||[];n.forEach((function(t){return t({target:e,event:i})}))};return NotyfNotification}();var i;(function(t){t[t.Add=0]="Add";t[t.Remove=1]="Remove"})(i||(i={}));var e=function(){function NotyfArray(){this.notifications=[]}NotyfArray.prototype.push=function(t){this.notifications.push(t);this.updateFn(t,i.Add,this.notifications)};NotyfArray.prototype.splice=function(t,e){var n=this.notifications.splice(t,e)[0];this.updateFn(n,i.Remove,this.notifications);return n};NotyfArray.prototype.indexOf=function(t){return this.notifications.indexOf(t)};NotyfArray.prototype.onUpdate=function(t){this.updateFn=t};return NotyfArray}();var n;(function(t){t.Dismiss="dismiss";t.Click="click"})(n||(n={}));var o={types:[{type:"success",className:"notyf__toast--success",backgroundColor:"#3dc763",icon:{className:"notyf__icon--success",tagName:"i"}},{type:"error",className:"notyf__toast--error",backgroundColor:"#ed3d3d",icon:{className:"notyf__icon--error",tagName:"i"}}],duration:2e3,ripple:true,position:{x:"right",y:"bottom"},dismissible:false};var a=function(){function NotyfView(){this.notifications=[];this.events={};this.X_POSITION_FLEX_MAP={left:"flex-start",center:"center",right:"flex-end"};this.Y_POSITION_FLEX_MAP={top:"flex-start",center:"center",bottom:"flex-end"};var t=document.createDocumentFragment();var i=this._createHTMLElement({tagName:"div",className:"notyf"});t.appendChild(i);document.body.appendChild(t);this.container=i;this.animationEndEventName=this._getAnimationEndEventName();this._createA11yContainer()}NotyfView.prototype.on=function(t,i){var e;this.events=__assign(__assign({},this.events),(e={},e[t]=i,e))};NotyfView.prototype.update=function(t,e){e===i.Add?this.addNotification(t):e===i.Remove&&this.removeNotification(t)};NotyfView.prototype.removeNotification=function(t){var i=this;var e=this._popRenderedNotification(t);var n;if(e){n=e.node;n.classList.add("notyf__toast--disappear");var o;n.addEventListener(this.animationEndEventName,o=function(t){if(t.target===n){n.removeEventListener(i.animationEndEventName,o);i.container.removeChild(n)}})}};NotyfView.prototype.addNotification=function(t){var i=this._renderNotification(t);this.notifications.push({notification:t,node:i});this._announce(t.options.message||"Notification")};NotyfView.prototype._renderNotification=function(t){var i;var e=this._buildNotificationCard(t);var n=t.options.className;n&&(i=e.classList).add.apply(i,n.split(" "));this.container.appendChild(e);return e};NotyfView.prototype._popRenderedNotification=function(t){var i=-1;for(var e=0;e<this.notifications.length&&i<0;e++)this.notifications[e].notification===t&&(i=e);if(-1!==i)return this.notifications.splice(i,1)[0]};NotyfView.prototype.getXPosition=function(t){var i;return(null===(i=null===t||void 0===t?void 0:t.position)||void 0===i?void 0:i.x)||"right"};NotyfView.prototype.getYPosition=function(t){var i;return(null===(i=null===t||void 0===t?void 0:t.position)||void 0===i?void 0:i.y)||"bottom"};NotyfView.prototype.adjustContainerAlignment=function(t){var i=this.X_POSITION_FLEX_MAP[this.getXPosition(t)];var e=this.Y_POSITION_FLEX_MAP[this.getYPosition(t)];var n=this.container.style;n.setProperty("justify-content",e);n.setProperty("align-items",i)};NotyfView.prototype._buildNotificationCard=function(t){var i=this;var e=t.options;var o=e.icon;this.adjustContainerAlignment(e);var a=this._createHTMLElement({tagName:"div",className:"notyf__toast"});var s=this._createHTMLElement({tagName:"div",className:"notyf__ripple"});var r=this._createHTMLElement({tagName:"div",className:"notyf__wrapper"});var c=this._createHTMLElement({tagName:"div",className:"notyf__message"});c.innerHTML=e.message||"";var f=e.background||e.backgroundColor;if(o){var p=this._createHTMLElement({tagName:"div",className:"notyf__icon"});("string"===typeof o||o instanceof String)&&(p.innerHTML=new String(o).valueOf());if("object"===typeof o){var d=o.tagName,l=void 0===d?"i":d,u=o.className,v=o.text,y=o.color,h=void 0===y?f:y;var m=this._createHTMLElement({tagName:l,className:u,text:v});h&&(m.style.color=h);p.appendChild(m)}r.appendChild(p)}r.appendChild(c);a.appendChild(r);if(f)if(e.ripple){s.style.background=f;a.appendChild(s)}else a.style.background=f;if(e.dismissible){var N=this._createHTMLElement({tagName:"div",className:"notyf__dismiss"});var _=this._createHTMLElement({tagName:"button",className:"notyf__dismiss-btn"});N.appendChild(_);r.appendChild(N);a.classList.add("notyf__toast--dismissible");_.addEventListener("click",(function(e){var o,a;null===(a=(o=i.events)[n.Dismiss])||void 0===a?void 0:a.call(o,{target:t,event:e});e.stopPropagation()}))}a.addEventListener("click",(function(e){var o,a;return null===(a=(o=i.events)[n.Click])||void 0===a?void 0:a.call(o,{target:t,event:e})}));var g="top"===this.getYPosition(e)?"upper":"lower";a.classList.add("notyf__toast--"+g);return a};NotyfView.prototype._createHTMLElement=function(t){var i=t.tagName,e=t.className,n=t.text;var o=document.createElement(i);e&&(o.className=e);o.textContent=n||null;return o};NotyfView.prototype._createA11yContainer=function(){var t=this._createHTMLElement({tagName:"div",className:"notyf-announcer"});t.setAttribute("aria-atomic","true");t.setAttribute("aria-live","polite");t.style.border="0";t.style.clip="rect(0 0 0 0)";t.style.height="1px";t.style.margin="-1px";t.style.overflow="hidden";t.style.padding="0";t.style.position="absolute";t.style.width="1px";t.style.outline="0";document.body.appendChild(t);this.a11yContainer=t};NotyfView.prototype._announce=function(t){var i=this;this.a11yContainer.textContent="";setTimeout((function(){i.a11yContainer.textContent=t}),100)};NotyfView.prototype._getAnimationEndEventName=function(){var t=document.createElement("_fake");var i={MozTransition:"animationend",OTransition:"oAnimationEnd",WebkitTransition:"webkitAnimationEnd",transition:"animationend"};var e;for(e in i)if(void 0!==t.style[e])return i[e];return"animationend"};return NotyfView}();var s=function(){function Notyf(t){var i=this;this.dismiss=this._removeNotification;this.notifications=new e;this.view=new a;var s=this.registerTypes(t);this.options=__assign(__assign({},o),t);this.options.types=s;this.notifications.onUpdate((function(t,e){return i.view.update(t,e)}));this.view.on(n.Dismiss,(function(t){var e=t.target,o=t.event;i._removeNotification(e);e.triggerEvent(n.Dismiss,o)}));this.view.on(n.Click,(function(t){var i=t.target,e=t.event;return i.triggerEvent(n.Click,e)}))}Notyf.prototype.error=function(t){var i=this.normalizeOptions("error",t);return this.open(i)};Notyf.prototype.success=function(t){var i=this.normalizeOptions("success",t);return this.open(i)};Notyf.prototype.open=function(i){var e=this.options.types.find((function(t){var e=t.type;return e===i.type}))||{};var n=__assign(__assign({},e),i);this.assignProps(["ripple","position","dismissible"],n);var o=new t(n);this._pushNotification(o);return o};Notyf.prototype.dismissAll=function(){while(this.notifications.splice(0,1));};
-/**
-     * Assigns properties to a config object based on two rules:
-     * 1. If the config object already sets that prop, leave it as so
-     * 2. Otherwise, use the default prop from the global options
-     *
-     * It's intended to build the final config object to open a notification. e.g. if
-     * 'dismissible' is not set, then use the value from the global config.
-     *
-     * @param props - properties to be assigned to the config object
-     * @param config - object whose properties need to be set
-     */Notyf.prototype.assignProps=function(t,i){var e=this;t.forEach((function(t){i[t]=null==i[t]?e.options[t]:i[t]}))};Notyf.prototype._pushNotification=function(t){var i=this;this.notifications.push(t);var e=void 0!==t.options.duration?t.options.duration:this.options.duration;e&&setTimeout((function(){return i._removeNotification(t)}),e)};Notyf.prototype._removeNotification=function(t){var i=this.notifications.indexOf(t);-1!==i&&this.notifications.splice(i,1)};Notyf.prototype.normalizeOptions=function(t,i){var e={type:t};"string"===typeof i?e.message=i:"object"===typeof i&&(e=__assign(__assign({},e),i));return e};Notyf.prototype.registerTypes=function(t){var i=(t&&t.types||[]).slice();var e=o.types.map((function(t){var e=-1;i.forEach((function(i,n){i.type===t.type&&(e=n)}));var n=-1!==e?i.splice(e,1)[0]:{};return __assign(__assign({},t),n)}));return e.concat(i)};return Notyf}();export{o as DEFAULT_OPTIONS,s as Notyf,e as NotyfArray,i as NotyfArrayEvent,n as NotyfEvent,t as NotyfNotification,a as NotyfView};
-