mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
7d6e9b46b8
Implement consistent event dispatching across Noty, Notyf, Toastr adapters and
themes, following the existing SweetAlert pattern. This enables Livewire
integration for all notification types.
JavaScript Events:
- Noty: flasher:noty:show, flasher:noty:click, flasher:noty:close, flasher:noty:hover
- Notyf: flasher:notyf:click, flasher:notyf:dismiss
- Toastr: flasher:toastr:show, flasher:toastr:click, flasher:toastr:close, flasher:toastr:hidden
- Themes: flasher:theme:click (generic), flasher:theme:{name}:click (specific)
PHP Livewire Listeners:
- LivewireListener for each adapter (Noty, Notyf, Toastr)
- ThemeLivewireListener for theme click events
- Registered in service providers when Livewire is bound
This allows Livewire users to listen for notification events and react
accordingly (e.g., noty:click, theme:flasher:click).
2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).notyf=e(t.flasher)}(this,(function(t){"use strict";class e{success(t,e,i){this.flash("success",t,e,i)}error(t,e,i){this.flash("error",t,e,i)}info(t,e,i){this.flash("info",t,e,i)}warning(t,e,i){this.flash("warning",t,e,i)}flash(t,e,i,n){let o,s,a,r={};if("object"==typeof t?(r=Object.assign({},t),o=r.type,s=r.message,a=r.title,delete r.type,delete r.message,delete r.title):"object"==typeof e?(r=Object.assign({},e),o=t,s=r.message,a=r.title,delete r.message,delete r.title):(o=t,s=e,null==i?(a=void 0,r=n||{}):"string"==typeof i?(a=i,r=n||{}):"object"==typeof i&&(r=Object.assign({},i),"title"in r?(a=r.title,delete r.title):a=void 0,n&&"object"==typeof n&&(r=Object.assign(Object.assign({},r),n)))),!o)throw new Error("Type is required for notifications");if(null==s)throw new Error("Message is required for notifications");null==a&&(a=o.charAt(0).toUpperCase()+o.slice(1));const c={type:o,message:s,title:a,options:r,metadata:{plugin:""}};this.renderOptions({}),this.renderEnvelopes([c])}}var i,n=function(){return n=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},n.apply(this,arguments)},o=function(){function t(t){this.options=t,this.listeners={}}return t.prototype.on=function(t,e){var i=this.listeners[t]||[];this.listeners[t]=i.concat([e])},t.prototype.triggerEvent=function(t,e){var i=this;(this.listeners[t]||[]).forEach((function(t){return t({target:i,event:e})}))},t}();!function(t){t[t.Add=0]="Add",t[t.Remove=1]="Remove"}(i||(i={}));var s,a=function(){function t(){this.notifications=[]}return t.prototype.push=function(t){this.notifications.push(t),this.updateFn(t,i.Add,this.notifications)},t.prototype.splice=function(t,e){var n=this.notifications.splice(t,e)[0];return this.updateFn(n,i.Remove,this.notifications),n},t.prototype.indexOf=function(t){return this.notifications.indexOf(t)},t.prototype.onUpdate=function(t){this.updateFn=t},t}();!function(t){t.Dismiss="dismiss",t.Click="click"}(s||(s={}));var r={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:!0,position:{x:"right",y:"bottom"},dismissible:!1},c=function(){function t(){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(),e=this._createHTMLElement({tagName:"div",className:"notyf"});t.appendChild(e),document.body.appendChild(t),this.container=e,this.animationEndEventName=this._getAnimationEndEventName(),this._createA11yContainer()}return t.prototype.on=function(t,e){var i;this.events=n(n({},this.events),((i={})[t]=e,i))},t.prototype.update=function(t,e){e===i.Add?this.addNotification(t):e===i.Remove&&this.removeNotification(t)},t.prototype.removeNotification=function(t){var e,i,n=this,o=this._popRenderedNotification(t);o&&((e=o.node).classList.add("notyf__toast--disappear"),e.addEventListener(this.animationEndEventName,i=function(t){t.target===e&&(e.removeEventListener(n.animationEndEventName,i),n.container.removeChild(e))}))},t.prototype.addNotification=function(t){var e=this._renderNotification(t);this.notifications.push({notification:t,node:e}),this._announce(t.options.message||"Notification")},t.prototype._renderNotification=function(t){var e,i=this._buildNotificationCard(t),n=t.options.className;return n&&(e=i.classList).add.apply(e,n.split(" ")),this.container.appendChild(i),i},t.prototype._popRenderedNotification=function(t){for(var e=-1,i=0;i<this.notifications.length&&e<0;i++)this.notifications[i].notification===t&&(e=i);if(-1!==e)return this.notifications.splice(e,1)[0]},t.prototype.getXPosition=function(t){var e;return(null===(e=null==t?void 0:t.position)||void 0===e?void 0:e.x)||"right"},t.prototype.getYPosition=function(t){var e;return(null===(e=null==t?void 0:t.position)||void 0===e?void 0:e.y)||"bottom"},t.prototype.adjustContainerAlignment=function(t){var e=this.X_POSITION_FLEX_MAP[this.getXPosition(t)],i=this.Y_POSITION_FLEX_MAP[this.getYPosition(t)],n=this.container.style;n.setProperty("justify-content",i),n.setProperty("align-items",e)},t.prototype._buildNotificationCard=function(t){var e=this,i=t.options,n=i.icon;this.adjustContainerAlignment(i);var o=this._createHTMLElement({tagName:"div",className:"notyf__toast"}),a=this._createHTMLElement({tagName:"div",className:"notyf__ripple"}),r=this._createHTMLElement({tagName:"div",className:"notyf__wrapper"}),c=this._createHTMLElement({tagName:"div",className:"notyf__message"});c.innerHTML=i.message||"";var p=i.background||i.backgroundColor;if(n){var f=this._createHTMLElement({tagName:"div",className:"notyf__icon"});if(("string"==typeof n||n instanceof String)&&(f.innerHTML=new String(n).valueOf()),"object"==typeof n){var l=n.tagName,d=void 0===l?"i":l,u=n.className,h=n.text,y=n.color,m=void 0===y?p:y,v=this._createHTMLElement({tagName:d,className:u,text:h});m&&(v.style.color=m),f.appendChild(v)}r.appendChild(f)}if(r.appendChild(c),o.appendChild(r),p&&(i.ripple?(a.style.background=p,o.appendChild(a)):o.style.background=p),i.dismissible){var g=this._createHTMLElement({tagName:"div",className:"notyf__dismiss"}),_=this._createHTMLElement({tagName:"button",className:"notyf__dismiss-btn"});g.appendChild(_),r.appendChild(g),o.classList.add("notyf__toast--dismissible"),_.addEventListener("click",(function(i){var n,o;null===(o=(n=e.events)[s.Dismiss])||void 0===o||o.call(n,{target:t,event:i}),i.stopPropagation()}))}o.addEventListener("click",(function(i){var n,o;return null===(o=(n=e.events)[s.Click])||void 0===o?void 0:o.call(n,{target:t,event:i})}));var N="top"===this.getYPosition(i)?"upper":"lower";return o.classList.add("notyf__toast--"+N),o},t.prototype._createHTMLElement=function(t){var e=t.tagName,i=t.className,n=t.text,o=document.createElement(e);return i&&(o.className=i),o.textContent=n||null,o},t.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},t.prototype._announce=function(t){var e=this;this.a11yContainer.textContent="",setTimeout((function(){e.a11yContainer.textContent=t}),100)},t.prototype._getAnimationEndEventName=function(){var t,e=document.createElement("_fake"),i={MozTransition:"animationend",OTransition:"oAnimationEnd",WebkitTransition:"webkitAnimationEnd",transition:"animationend"};for(t in i)if(void 0!==e.style[t])return i[t];return"animationend"},t}(),p=function(){function t(t){var e=this;this.dismiss=this._removeNotification,this.notifications=new a,this.view=new c;var i=this.registerTypes(t);this.options=n(n({},r),t),this.options.types=i,this.notifications.onUpdate((function(t,i){return e.view.update(t,i)})),this.view.on(s.Dismiss,(function(t){var i=t.target,n=t.event;e._removeNotification(i),i.triggerEvent(s.Dismiss,n)})),this.view.on(s.Click,(function(t){var e=t.target,i=t.event;return e.triggerEvent(s.Click,i)}))}return t.prototype.error=function(t){var e=this.normalizeOptions("error",t);return this.open(e)},t.prototype.success=function(t){var e=this.normalizeOptions("success",t);return this.open(e)},t.prototype.open=function(t){var e=this.options.types.find((function(e){return e.type===t.type}))||{},i=n(n({},e),t);this.assignProps(["ripple","position","dismissible"],i);var s=new o(i);return this._pushNotification(s),s},t.prototype.dismissAll=function(){for(;this.notifications.splice(0,1););},t.prototype.assignProps=function(t,e){var i=this;t.forEach((function(t){e[t]=null==e[t]?i.options[t]:e[t]}))},t.prototype._pushNotification=function(t){var e=this;this.notifications.push(t);var i=void 0!==t.options.duration?t.options.duration:this.options.duration;i&&setTimeout((function(){return e._removeNotification(t)}),i)},t.prototype._removeNotification=function(t){var e=this.notifications.indexOf(t);-1!==e&&this.notifications.splice(e,1)},t.prototype.normalizeOptions=function(t,e){var i={type:t};return"string"==typeof e?i.message=e:"object"==typeof e&&(i=n(n({},i),e)),i},t.prototype.registerTypes=function(t){var e=(t&&t.types||[]).slice();return r.types.map((function(t){var i=-1;e.forEach((function(e,n){e.type===t.type&&(i=n)}));var o=-1!==i?e.splice(i,1)[0]:{};return n(n({},t),o)})).concat(e)},t}();const f=new class extends e{renderEnvelopes(t){this.notyf||this.initializeNotyf(),t.forEach((t=>{var e;try{const i=Object.assign(Object.assign({},t),t.options),n=null===(e=this.notyf)||void 0===e?void 0:e.open(i);n&&this.attachEventListeners(n,t)}catch(e){console.error("PHPFlasher Notyf: Error rendering notification",e,t)}}));try{if(this.notyf){const t=this.notyf.view,e=t.container,i=t.a11yContainer;e&&e.dataset&&(e.dataset.turboTemporary=""),i&&i.dataset&&(i.dataset.turboTemporary="")}}catch(t){console.error("PHPFlasher Notyf: Error setting Turbo compatibility",t)}}renderOptions(t){if(!t)return;const e=Object.assign({duration:t.duration||1e4},t);e.types=e.types||[],this.addTypeIfNotExists(e.types,{type:"info",className:"notyf__toast--info",background:"#5784E5",icon:{className:"notyf__icon--info",tagName:"i"}}),this.addTypeIfNotExists(e.types,{type:"warning",className:"notyf__toast--warning",background:"#E3A008",icon:{className:"notyf__icon--warning",tagName:"i"}}),this.notyf=this.notyf||new p(e)}initializeNotyf(){this.notyf||this.renderOptions({duration:1e4,position:{x:"right",y:"top"},dismissible:!0})}addTypeIfNotExists(t,e){t.some((t=>t.type===e.type))||t.push(e)}attachEventListeners(t,e){if(!this.notyf)return;const i=this.notyf;i.on("click",(({target:i,event:n})=>{i===t&&this.dispatchEvent("flasher:notyf:click",e,{event:n})})),i.on("dismiss",(({target:i,event:n})=>{i===t&&this.dispatchEvent("flasher:notyf:dismiss",e,{event:n})}))}dispatchEvent(t,e,i={}){window.dispatchEvent(new CustomEvent(t,{detail:Object.assign({envelope:e},i)}))}};return t.addPlugin("notyf",f),f}));
|