npm - theshtify - Versions diffs - 1.0.0 → 1.0.2 - Mend

theshtify 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/index.html +54 -0
package/lib/documentation.js +32 -0
package/lib/notif.js +69 -33
package/lib/theshtify.js +734 -0
package/lib/theshtifyCDN.js +663 -80
package/package.json +27 -27
package/readme.md +292 -27
package/lib/test.js +0 -11
package/test.html +0 -68
/package/css/{notif.css → theshtify.css} +0 -0

package/index.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/theshtify.css" />
+    <title>theshtify</title>
+</head>
+<body>
+    <button id="notif_button" onclick="notify()">theshtify</button>
+</body>
+<script src="./lib/theshtifyCDN.js"></script>
+<script>
+    function notify() {
+        let config = {
+            x_align: 'right',
+            y_align: 'top',
+            duration: 5000,
+            font: {
+                size: 15,
+                weight: 900,
+                family: 'arlon'
+            },
+            custom_colors: {
+                success: {
+                    bg: '#0C7059',
+                    color: '#E0BC29',
+                    border: {
+                        type: '#solid',
+                        color: '#E0BC29'
+                    },
+                    progress: {
+                        bg: '#E0BC29'
+                    }
+                },
+                /** you can also add other types configs */
+            },
+            radius: 20,
+            bordered: true,
+            border_width: 1,
+            closer: true,
+            progress: true,
+            progress_height: 2
+        }
+        theshtify({ message: 'welcome to theshtify', type: 'success', config: config });
+    }
+</script>
+</html>

package/lib/documentation.js ADDED Viewed

@@ -0,0 +1,32 @@
+let config = {
+    x_align: 'right',
+    y_align: 'top',
+    duration: 5000,
+    font: {
+        size: 15,
+        weight: 900,
+        family: 'arlon'
+    },
+    custom_colors: {
+        success: {
+            bg: '#0C7059',
+            color: '#E0BC29',
+            border: {
+                type: '#085241',
+                color: 'gray'
+            },
+            progress: {
+                bg: '#E0BC29'
+            }
+        },
+        /** you can also add other types configs */
+    },
+    radius: 20,
+    bordered: true,
+    border_width: 1,
+    closer: true,
+    progress: true,
+    progress_height: 2
+}
+theshtify({ message: 'welcome to theshtify', type: 'success', config: config });

package/lib/notif.js CHANGED Viewed

@@ -3,15 +3,17 @@ class Notif {
   #config = {
     x_pos: 'right',
     y_pos: 'top',
-    font:{
-      family:'arial',
-      size:14,
-      weight:''
+    font: {
+      family: 'arial',
+      size: 14,
+      weight: ''
     },
+    max_duration: 5000,
     duration: 5000,
     borderWidth: 2,
     bordered: false,
     progress: false,
+    progressHeight: 2,
     closer: false,
     trans: false,
     display: {
@@ -21,7 +23,7 @@ class Notif {
           color: 'white',
           bg: '#000',
           border: {
-            type:'solid',
+            type: 'solid',
             color: 'transparent',
           },
           progress: {
@@ -32,7 +34,7 @@ class Notif {
           color: 'white',
           bg: 'rgba(1, 191, 102, 0.822)',
           border: {
-            type:'solid',
+            type: 'solid',
             color: 'transparent',
           },
           progress: {
@@ -43,7 +45,7 @@ class Notif {
           bg: 'red',
           color: 'white',
           border: {
-            type:'solid',
+            type: 'solid',
             color: 'transparent',
           },
           progress: {
@@ -54,7 +56,7 @@ class Notif {
           bg: 'rgba(7, 133, 250, 0.822)',
           color: 'white',
           border: {
-            type:'solid',
+            type: 'solid',
             color: 'transparent',
           },
           progress: {
@@ -65,7 +67,7 @@ class Notif {
           bg: '#f89406',
           color: 'black',
           border: {
-            type:'solid',
+            type: 'solid',
             color: 'transparent',
           },
           progress: {
@@ -85,7 +87,7 @@ class Notif {
         top: 20,
         bottom: 20
       },
-      radius: 10,
+      radius: 5,
     }
   };
   #type;
@@ -105,11 +107,19 @@ class Notif {
       }
     }
   }
+  set duration(duration) {
+    let c_duration = parseInt(duration);
+    if (c_duration != NaN) {
+      c_duration <= this.config.max_duration ?
+        this.config.duration = c_duration :
+        console.error('the max duration has to be 5the duration of the notification provided is longer than the maximum posting duration and has therefore been set at the maximum value.');
+    }
+  }
   configure(config) {
     config.message ? this.message = config.message : '';
     config.type ? this.type = config.type : '';
     (config.colors != undefined && config.type == 'custom') ? this.config.display.colors.custom = config.colors : '';
-    config.duration ? this.config.duration = config.duration : '';
+    config.duration ? this.duration = config.duration : '';
     config.x_align ? this.config.x_pos = config.x_align : '';
     config.y_align ? this.config.y_pos = config.y_align : '';
     config.bordered ? this.config.bordered = config.bordered : '';
@@ -144,30 +154,53 @@ class Notif {
     this.config.y_pos == 'middle' ? retPos.y = (window.innerHeight - boxSize.height) / 2 : 0;
     return retPos;
   }
-  moveDisplayedNotifications(createdBox) {
+  moveDisplayedNotifications(createdBox, moveType = "add", startIndex = 0) {
     let notifBoxes = document.querySelectorAll('.Thesharsol-notifyer');
     let offset = createdBox.offsetHeight + 20;
     //
     let boxesCumulatedHeihgt = offset;
-    notifBoxes.forEach(box => {
-      if (createdBox != box) {
-        if (this.config.y_pos == 'bottom') {
-          box.style.top = `${box.offsetTop - offset}px`;
+    switch (moveType) {
+      case "add":
+        for (let i = startIndex; i < notifBoxes.length; i++) {
+          boxesCumulatedHeihgt = this.changeBoxPosition(notifBoxes, i, moveType, boxesCumulatedHeihgt, createdBox, offset);
         }
-        if (this.config.y_pos == 'top') {
-          box.style.top = `${box.offsetTop + offset}px`;
+        break;
+      case "remove":
+        console.log('remove')
+        let si = Array.prototype.indexOf.call(notifBoxes, createdBox);
+        for (let i = si; i >= 0; i--) {
+          boxesCumulatedHeihgt = this.changeBoxPosition(notifBoxes, i, moveType, boxesCumulatedHeihgt, createdBox, offset);
         }
-        boxesCumulatedHeihgt += box.offsetHeight;
-      }
-    });
-    console.log(boxesCumulatedHeihgt + '-----' + ((window.innerHeight * 70) / 100))
+        for (let j = (si + 1); j < notifBoxes.length; j++) {
+          notifBoxes[j].setAttribute('index', j - 1);
+          console.log((si))
+        }
+        break;
+      default:
+        break;
+    }
     if (boxesCumulatedHeihgt > ((window.innerHeight * 50) / 100)) {
-      console.log(boxesCumulatedHeihgt)
       notifBoxes[0].remove();
     }
   }
+  changeBoxPosition(notifBoxes, i, moveType, boxesCumulatedHeihgt, createdBox, offset) {
+    let box = notifBoxes[i];
+    if (createdBox != box && box != undefined) {
+      if (this.config.y_pos == 'bottom') {
+        box.style.top = moveType == "add" ? `${box.offsetTop - offset}px` : `${box.offsetTop + offset}px`;
+      }
+      if (this.config.y_pos == 'top') {
+        box.style.top = moveType == "add" ? `${box.offsetTop + offset}px` : `${box.offsetTop - offset}px`;
+      }
+      boxesCumulatedHeihgt += box.offsetHeight;
+    }
+    return boxesCumulatedHeihgt;
+  }
   get currentColor() {
     return this.config.display.colors[this.#type];
   }
@@ -217,8 +250,6 @@ class Notif {
     let box = document.createElement('div');
     let content = document.createElement('div');
     box.append(content);
     return box;
   }
@@ -232,11 +263,11 @@ class Notif {
     notif.style.fontFamily = `${this.config.font.family}`;
     notif.style.fontSize = `${this.config.font.size}px`;
-    notif.style.fontWeight= `${this.config.font.weight}`;
+    notif.style.fontWeight = `${this.config.font.weight}`;
     notif.style.borderRadius = `${this.config.display.radius}px`;
     notif.style.backgroundColor = this.config.display.colors[this.#type].bg;
+    notif.setAttribute('index', document.querySelectorAll('.Thesharsol-notifyer').length)
     if (this.config.bordered) {
       notif.style.border = `${this.config.borderWidth}px ${this.currentColor.border.type} ${this.currentColor.border.color}`
     }
@@ -260,14 +291,20 @@ class Notif {
   }
   dismiss() {
     let dismiss = document.createElement('div');
-    let dismissContent = document.createElement('div');
+    let dismissContent = document.createElement('button');
     // style
     dismissContent.classList.add('close-icon');
     dismissContent.fontSize = `22px`
     dismiss.setAttribute('style', `display:flex;padding:${this.config.display.padding.top}px ${this.config.display.padding.top}px 0px ${this.config.display.padding.top}px;`);
-    dismissContent.setAttribute('style', 'font-weight:bold;margin-left:auto');
+    dismissContent.setAttribute('style', 'font-weight:bold;margin-left:auto;background:transparent;border:0px');
     dismiss.append(dismissContent);
+    dismissContent.addEventListener('click', () => {
+      let boxToRemove = dismissContent.parentNode.parentNode;
+      this.moveDisplayedNotifications(boxToRemove, "remove", parseInt(boxToRemove.getAttribute("index")));
+      boxToRemove.remove()
+    })
     return dismiss;
   }
   progress() {
@@ -279,7 +316,7 @@ class Notif {
     progress.classList.add('progress');
     progressContent.setAttribute('style', 'height:2px;width:0px');
-    progressContent.style.minHeight = '10px';
+    progressContent.style.minHeight = `${this.config.progressHeight}px`;
     progressContent.style.width = '0px';
     progressContent.classList.add('content');
     progressContent.style.background = `${this.currentColor.progress ? this.currentColor.progress.bg : 'white'}`;
@@ -299,7 +336,6 @@ class Notif {
       width += increment;
       progressBoxContent.style.width = `${width}px`;
-      console.log(width);
       if (maxProgressContentWidth <= width) {
         clearInterval(incInt);
       }
@@ -308,4 +344,4 @@ class Notif {
   }
 }
 // alert()
-export let Notifier = new Notif();
+export let theshtify = new Notif();