API tools faq
paste
Advertisement
nrzmalik

Floating Notification in Lectora

nrzmalik
Oct 15th, 2024
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.66 KB | Source Code | 0 0
raw download clone embed print report
  1. <script>
  2. (function(window) {
  3.     const NrzNotif = {
  4.       container: null,
  5.       options: {
  6.         position: 'top-right',
  7.         maxNotifications: 5,
  8.         animationDuration: 300
  9.       },
  10.       notifications: [],
  11.  
  12.       init() {
  13.         this.container = this.createContainer();
  14.         document.body.appendChild(this.container);
  15.         this.addStyles();
  16.       },
  17.  
  18.       createContainer() {
  19.         const container = document.createElement('div');
  20.         container.className = `nrz-notif-container ${this.options.position}`;
  21.         return container;
  22.       },
  23.  
  24.       addStyles() {
  25.         const style = document.createElement('style');
  26.         style.textContent = `
  27.           .nrz-notif-container {
  28.             position: fixed;
  29.             z-index: 9999;
  30.             display: flex;
  31.             flex-direction: column;
  32.             gap: 10px;
  33.             max-width: 350px;
  34.             width: 100%;
  35.             padding: 10px;
  36.           }
  37.           .nrz-notif-container.top-right { top: 0; right: 0; }
  38.           .nrz-notif-container.top-left { top: 0; left: 0; }
  39.           .nrz-notif-container.bottom-right { bottom: 0; right: 0; }
  40.           .nrz-notif-container.bottom-left { bottom: 0; left: 0; }
  41.           .nrz-notif {
  42.             background: #fff;
  43.             border-radius: 8px;
  44.             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  45.             display: flex;
  46.             overflow: hidden;
  47.             transition: all ${this.options.animationDuration}ms ease-in-out;
  48.             max-height: 0;
  49.             opacity: 0;
  50.           }
  51.           .nrz-notif.show {
  52.             max-height: 200px;
  53.             opacity: 1;
  54.           }
  55.           .nrz-notif-icon {
  56.             display: flex;
  57.             align-items: center;
  58.             justify-content: center;
  59.             width: 50px;
  60.             color: #fff;
  61.           }
  62.           .nrz-notif-content {
  63.             flex-grow: 1;
  64.             padding: 12px;
  65.           }
  66.           .nrz-notif-title {
  67.             font-weight: bold;
  68.             font-size: 16px;
  69.             margin-bottom: 5px;
  70.           }
  71.           .nrz-notif-message {
  72.             font-size: 14px;
  73.           }
  74.           .nrz-notif-close {
  75.             background: none;
  76.             border: none;
  77.             color: #999;
  78.             cursor: pointer;
  79.             font-size: 20px;
  80.             padding: 5px;
  81.             align-self: flex-start;
  82.           }
  83.         `;
  84.         document.head.appendChild(style);
  85.       },
  86.  
  87.       show(message, type = 'info', timeout = 5000) {
  88.         if (!this.container) {
  89.           this.init();
  90.         }
  91.  
  92.         if (this.notifications.length >= this.options.maxNotifications) {
  93.           this.close(this.notifications[0]);
  94.         }
  95.  
  96.         const notif = document.createElement('div');
  97.         notif.className = 'nrz-notif';
  98.         const data = this.getTypeData(type);
  99.  
  100.         notif.innerHTML = `
  101.           <div class="nrz-notif-icon" style="background-color: ${data.color}">
  102.             ${this.getIcon(type)}
  103.           </div>
  104.           <div class="nrz-notif-content">
  105.             <div class="nrz-notif-title">${data.title}</div>
  106.             <div class="nrz-notif-message">${message}</div>
  107.           </div>
  108.           <button class="nrz-notif-close">&times;</button>
  109.         `;
  110.  
  111.         this.container.appendChild(notif);
  112.         this.notifications.push(notif);
  113.  
  114.         setTimeout(() => notif.classList.add('show'), 10);
  115.  
  116.         const closeBtn = notif.querySelector('.nrz-notif-close');
  117.         closeBtn.addEventListener('click', () => this.close(notif));
  118.  
  119.         if (timeout > 0) {
  120.           setTimeout(() => this.close(notif), timeout);
  121.         }
  122.       },
  123.  
  124.       close(notif) {
  125.         notif.classList.remove('show');
  126.         setTimeout(() => {
  127.           notif.remove();
  128.           this.notifications = this.notifications.filter(n => n !== notif);
  129.         }, this.options.animationDuration);
  130.       },
  131.  
  132.       getTypeData(type) {
  133.         const types = {
  134.           success: { color: '#28a745', title: 'Success' },
  135.           error: { color: '#dc3545', title: 'Error' },
  136.           warning: { color: '#ffc107', title: 'Warning' },
  137.           question: { color: '#6c757d', title: 'Question' },
  138.           info: { color: '#17a2b8', title: 'Information' }
  139.         };
  140.         return types[type] || types.info;
  141.       },
  142.  
  143.       getIcon(type) {
  144.         const icons = {
  145.           success: '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
  146.           error: '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>',
  147.           warning: '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>',
  148.           question: '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>',
  149.           info: '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'
  150.         };
  151.         return icons[type] || icons.info;
  152.       }
  153.     };
  154.  
  155.     window.nrzNotif = NrzNotif.show.bind(NrzNotif);
  156.   })(window);
  157. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!