theshtify 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 thesharsol
+
+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.

package/css/notif.css

@@ -0,0 +1,41 @@
+.notif {
+  width: 30%;
+  position: absolute;
+  padding: 10px 20px;
+  background-color: white;
+  font-family: "nunito";
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px silver;
+  opacity: 0;
+  color: white;
+  z-index: 2000;
+}
+
+.notif.warning {
+  background-color: #f89406;
+}
+
+.notif.danger {
+  background-color: red;
+}
+
+.notif.info {
+  background-color: rgba(7, 133, 250, 0.822);
+}
+
+.notif.success {
+  background-color: rgba(1, 191, 102, 0.822);
+}
+
+.close-icon:after {
+  display: inline-block;
+  content: "\00d7";
+  /* This will render the 'X' */
+
+}
+
+.Thesharsol-notifyer {
+  overflow: hidden;
+  padding: 2px;
+  transition: top linear 0.2s;
+}

package/lib/notif.js

@@ -0,0 +1,311 @@
+
+class Notif {
+  #config = {
+    x_pos: 'right',
+    y_pos: 'top',
+    font:{
+      family:'arial',
+      size:14,
+      weight:''
+    },
+    duration: 5000,
+    borderWidth: 2,
+    bordered: false,
+    progress: false,
+    closer: false,
+    trans: false,
+    display: {
+      width: 300,
+      colors: {
+        custom: {
+          color: 'white',
+          bg: '#000',
+          border: {
+            type:'solid',
+            color: 'transparent',
+          },
+          progress: {
+            bg: '#fff'
+          }
+        },
+        success: {
+          color: 'white',
+          bg: 'rgba(1, 191, 102, 0.822)',
+          border: {
+            type:'solid',
+            color: 'transparent',
+          },
+          progress: {
+            bg: '#fff'
+          }
+        },
+        danger: {
+          bg: 'red',
+          color: 'white',
+          border: {
+            type:'solid',
+            color: 'transparent',
+          },
+          progress: {
+            bg: '#fff'
+          }
+        },
+        info: {
+          bg: 'rgba(7, 133, 250, 0.822)',
+          color: 'white',
+          border: {
+            type:'solid',
+            color: 'transparent',
+          },
+          progress: {
+            bg: '#fff'
+          }
+        },
+        warning: {
+          bg: '#f89406',
+          color: 'black',
+          border: {
+            type:'solid',
+            color: 'transparent',
+          },
+          progress: {
+            bg: '#fff'
+          }
+        },
+      },
+      padding: {
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      },
+      margin: {
+        left: 20,
+        right: 20,
+        top: 20,
+        bottom: 20
+      },
+      radius: 10,
+    }
+  };
+  #type;
+  #message;
+  constructor(config) {
+    this.config = config;
+    this.type = "danger";
+    this.message = "notification";
+  }
+  get config() {
+    return this.#config;
+  }
+  set config(config) {
+    for (const key in config) {
+      if (Object.hasOwnProperty.call(this.#config, key)) {
+        this.#config[key] == config[key];
+      }
+    }
+  }
+  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.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 : '';
+    config.closer ? this.config.closer = config.closer : '';
+    config.progress ? this.config.progress = config.progress : '';
+    (config.bordered && config.colors != undefined && config.type == 'custom' && config.colors.border != undefined) ? this.config.display.colors.custom.border = config.colors.border : '';
+
+  }
+  get message() {
+    return this.#message;
+  }
+  set message(message) {
+    this.#message = message;
+  }
+  get type() {
+    return this.#type;
+  }
+  set type(type) {
+    this.#type = type;
+  }
+
+  getPosition(boxSize) {
+    let retPos = {
+      x: 0,
+      y: 0
+    }
+    this.config.x_pos == 'left' ? retPos.x = this.config.display.margin.left : 0;
+    this.config.x_pos == 'right' ? retPos.x = window.innerWidth - (boxSize.width + this.config.display.margin.right) : 0;
+    this.config.x_pos == 'middle' ? retPos.x = (window.innerWidth - boxSize.width) / 2 : 0;
+    this.config.y_pos == 'top' ? retPos.y = 0 + this.config.display.margin.top : 0;
+    this.config.y_pos == 'bottom' ? retPos.y = window.innerHeight - (boxSize.height + this.config.display.margin.bottom) : 0;
+    this.config.y_pos == 'middle' ? retPos.y = (window.innerHeight - boxSize.height) / 2 : 0;
+    return retPos;
+  }
+  moveDisplayedNotifications(createdBox) {
+    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`;
+        }
+        if (this.config.y_pos == 'top') {
+          box.style.top = `${box.offsetTop + offset}px`;
+        }
+        boxesCumulatedHeihgt += box.offsetHeight;
+      }
+    });
+    console.log(boxesCumulatedHeihgt + '-----' + ((window.innerHeight * 70) / 100))
+    if (boxesCumulatedHeihgt > ((window.innerHeight * 50) / 100)) {
+      console.log(boxesCumulatedHeihgt)
+      notifBoxes[0].remove();
+    }
+  }
+  get currentColor() {
+    return this.config.display.colors[this.#type];
+  }
+  notify(infos) {
+    let notif = this.buildBox(infos);
+    document.querySelector("body").before(notif);
+
+    let pos = this.getPosition({ width: notif.offsetWidth, height: notif.offsetHeight });
+    notif.style.left = `${pos.x}px`;
+    notif.style.top = `${pos.y}px`;
+    this.animProgress(notif);
+    this.moveDisplayedNotifications(notif)
+
+    var op = 0;
+    var it = setInterval(function () {
+      op = op + 0.01;
+      notif.style.opacity = op;
+      // console.log(notif)
+      if (op > 0.9) {
+        clearInterval(it);
+      }
+    }, 1);
+
+    setTimeout(function () {
+      var op = 1;
+      var it = setInterval(function () {
+        op = op - 0.01;
+        notif.style.opacity = op;
+        // console.log(notif)
+        if (op < 0.01) {
+          notif.remove();
+          clearInterval(it);
+        }
+      }, 1);
+    }, this.config.duration);
+  }
+  buildBox(infos) {
+    this.configure(infos);
+    let box = this.mainContainer();
+    this.config.closer ? box.append(this.dismiss()) : '';
+    box.append(this.body());
+    this.config.progress ? box.append(this.progress()) : '';
+
+    return box;
+  }
+  container() {
+    let box = document.createElement('div');
+    let content = document.createElement('div');
+
+
+
+    box.append(content);
+    return box;
+  }
+  mainContainer() {
+    var notif = document.createElement("div");
+
+    notif.setAttribute("class", "Thesharsol-notifyer");
+    notif.style.width = `${this.config.display.width}px`;
+    notif.style.position = 'absolute';
+    notif.style.opacity = 0;
+
+    notif.style.fontFamily = `${this.config.font.family}`;
+    notif.style.fontSize = `${this.config.font.size}px`;
+    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;
+
+    if (this.config.bordered) {
+      notif.style.border = `${this.config.borderWidth}px ${this.currentColor.border.type} ${this.currentColor.border.color}`
+    }
+
+    return notif;
+  }
+  body() {
+    let body = document.createElement('div');
+    let bodyContent = document.createElement('div');
+    body.setAttribute('style', 'width:100%')
+    // bodyContent.setAttribute('style','width:100%')    
+
+    bodyContent.style.color = this.config.display.colors[this.#type].color;
+    bodyContent.style.paddingLeft = `${this.config.display.padding.left}px`;
+    bodyContent.style.paddingRight = `${this.config.display.padding.right}px`;
+    bodyContent.style.paddingTop = `${this.config.display.padding.top}px`;
+    bodyContent.style.paddingBottom = `${this.config.display.padding.bottom}px`;
+    bodyContent.innerText = this.message;
+    body.append(bodyContent);
+    return body;
+  }
+  dismiss() {
+    let dismiss = document.createElement('div');
+    let dismissContent = document.createElement('div');
+    // 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');
+
+    dismiss.append(dismissContent);
+    return dismiss;
+  }
+  progress() {
+    let progress = document.createElement('div');
+    let progressContent = document.createElement('div');
+    progress.style.width = '100%';
+    progress.style.borderRadius = `${this.config.display.radius}px`;
+    progress.style.overflow = 'hidden'
+    progress.classList.add('progress');
+    progressContent.setAttribute('style', 'height:2px;width:0px');
+
+    progressContent.style.minHeight = '10px';
+    progressContent.style.width = '0px';
+    progressContent.classList.add('content');
+    progressContent.style.background = `${this.currentColor.progress ? this.currentColor.progress.bg : 'white'}`;
+    progress.append(progressContent);
+    return progress;
+  }
+
+  animProgress(box) {
+    let progressBar = box.querySelector('.progress');
+    let progressBoxContent = box.querySelector('.content');
+
+    // 
+    let maxProgressContentWidth = progressBar.offsetWidth;
+    let increment = maxProgressContentWidth / (this.config.duration / 30);
+    let width = 0;
+    let incInt = setInterval(() => {
+      width += increment;
+      progressBoxContent.style.width = `${width}px`;
+
+      console.log(width);
+      if (maxProgressContentWidth <= width) {
+        clearInterval(incInt);
+      }
+    }, 30);
+
+  }
+}
+// alert()
+export let Notifier = new Notif();

package/lib/test.js

@@ -0,0 +1,11 @@
+"function" != typeof
+    Object.create && (
+        Object.create = function (t) {
+            function o() {
+
+            } return o.prototype = t, new o
+        }),
+    function (t, o, i, s) {
+        "use strict";
+        var n = { _positionClasses: ["bottom-left", "bottom-right", "top-right", "top-left", "bottom-center", "top-center", "mid-center"], _defaultIcons: ["success", "error", "info", "warning"], init: function (o, i) { this.prepareOptions(o, t.toast.options), this.process() }, prepareOptions: function (o, i) { var s = {}; "string" == typeof o || o instanceof Array ? s.text = o : s = o, this.options = t.extend({}, i, s) }, process: function () { this.setup(), this.addToDom(), this.position(), this.bindToast(), this.animate() }, setup: function () { var o = ""; if (this._toastEl = this._toastEl || t("<div></div>", { "class": "jq-toast-single" }), o += '<span class="jq-toast-loader"></span>', this.options.allowToastClose && (o += '<span class="close-jq-toast-single">&times;</span>'), this.options.text instanceof Array) { this.options.heading && (o += '<h2 class="jq-toast-heading">' + this.options.heading + "</h2>"), o += '<ul class="jq-toast-ul">'; for (var i = 0; i < this.options.text.length; i++)o += '<li class="jq-toast-li" id="jq-toast-item-' + i + '">' + this.options.text[i] + "</li>"; o += "</ul>" } else this.options.heading && (o += '<h2 class="jq-toast-heading">' + this.options.heading + "</h2>"), o += this.options.text; this._toastEl.html(o), this.options.bgColor !== !1 && this._toastEl.css("background-color", this.options.bgColor), this.options.textColor !== !1 && this._toastEl.css("color", this.options.textColor), this.options.textAlign && this._toastEl.css("text-align", this.options.textAlign), this.options.icon !== !1 && (this._toastEl.addClass("jq-has-icon"), -1 !== t.inArray(this.options.icon, this._defaultIcons) && this._toastEl.addClass("jq-icon-" + this.options.icon)), this.options["class"] !== !1 && this._toastEl.addClass(this.options["class"]) }, position: function () { "string" == typeof this.options.position && -1 !== t.inArray(this.options.position, this._positionClasses) ? "bottom-center" === this.options.position ? this._container.css({ left: t(o).outerWidth() / 2 - this._container.outerWidth() / 2, bottom: 20 }) : "top-center" === this.options.position ? this._container.css({ left: t(o).outerWidth() / 2 - this._container.outerWidth() / 2, top: 20 }) : "mid-center" === this.options.position ? this._container.css({ left: t(o).outerWidth() / 2 - this._container.outerWidth() / 2, top: t(o).outerHeight() / 2 - this._container.outerHeight() / 2 }) : this._container.addClass(this.options.position) : "object" == typeof this.options.position ? this._container.css({ top: this.options.position.top ? this.options.position.top : "auto", bottom: this.options.position.bottom ? this.options.position.bottom : "auto", left: this.options.position.left ? this.options.position.left : "auto", right: this.options.position.right ? this.options.position.right : "auto" }) : this._container.addClass("bottom-left") }, bindToast: function () { var t = this; this._toastEl.on("afterShown", function () { t.processLoader() }), this._toastEl.find(".close-jq-toast-single").on("click", function (o) { o.preventDefault(), "fade" === t.options.showHideTransition ? (t._toastEl.trigger("beforeHide"), t._toastEl.fadeOut(function () { t._toastEl.trigger("afterHidden") })) : "slide" === t.options.showHideTransition ? (t._toastEl.trigger("beforeHide"), t._toastEl.slideUp(function () { t._toastEl.trigger("afterHidden") })) : (t._toastEl.trigger("beforeHide"), t._toastEl.hide(function () { t._toastEl.trigger("afterHidden") })) }), "function" == typeof this.options.beforeShow && this._toastEl.on("beforeShow", function () { t.options.beforeShow() }), "function" == typeof this.options.afterShown && this._toastEl.on("afterShown", function () { t.options.afterShown() }), "function" == typeof this.options.beforeHide && this._toastEl.on("beforeHide", function () { t.options.beforeHide() }), "function" == typeof this.options.afterHidden && this._toastEl.on("afterHidden", function () { t.options.afterHidden() }) }, addToDom: function () { var o = t(".jq-toast-wrap"); if (0 === o.length ? (o = t("<div></div>", { "class": "jq-toast-wrap" }), t("body").append(o)) : (!this.options.stack || isNaN(parseInt(this.options.stack, 10))) && o.empty(), o.find(".jq-toast-single:hidden").remove(), o.append(this._toastEl), this.options.stack && !isNaN(parseInt(this.options.stack), 10)) { var i = o.find(".jq-toast-single").length, s = i - this.options.stack; s > 0 && t(".jq-toast-wrap").find(".jq-toast-single").slice(0, s).remove() } this._container = o }, canAutoHide: function () { return this.options.hideAfter !== !1 && !isNaN(parseInt(this.options.hideAfter, 10)) }, processLoader: function () { if (!this.canAutoHide() || this.options.loader === !1) return !1; var t = this._toastEl.find(".jq-toast-loader"), o = (this.options.hideAfter - 400) / 1e3 + "s", i = this.options.loaderBg, s = t.attr("style") || ""; s = s.substring(0, s.indexOf("-webkit-transition")), s += "-webkit-transition: width " + o + " ease-in;                       -o-transition: width " + o + " ease-in;                       transition: width " + o + " ease-in;                       background-color: " + i + ";", t.attr("style", s).addClass("jq-toast-loaded") }, animate: function () { var t = this; if (this._toastEl.hide(), this._toastEl.trigger("beforeShow"), "fade" === this.options.showHideTransition.toLowerCase() ? this._toastEl.fadeIn(function () { t._toastEl.trigger("afterShown") }) : "slide" === this.options.showHideTransition.toLowerCase() ? this._toastEl.slideDown(function () { t._toastEl.trigger("afterShown") }) : this._toastEl.show(function () { t._toastEl.trigger("afterShown") }), this.canAutoHide()) { var t = this; o.setTimeout(function () { "fade" === t.options.showHideTransition.toLowerCase() ? (t._toastEl.trigger("beforeHide"), t._toastEl.fadeOut(function () { t._toastEl.trigger("afterHidden") })) : "slide" === t.options.showHideTransition.toLowerCase() ? (t._toastEl.trigger("beforeHide"), t._toastEl.slideUp(function () { t._toastEl.trigger("afterHidden") })) : (t._toastEl.trigger("beforeHide"), t._toastEl.hide(function () { t._toastEl.trigger("afterHidden") })) }, this.options.hideAfter) } }, reset: function (o) { "all" === o ? t(".jq-toast-wrap").remove() : this._toastEl.remove() }, update: function (t) { this.prepareOptions(t, this.options), this.setup(), this.bindToast() } }; t.toast = function (t) { var o = Object.create(n); return o.init(t, this), { reset: function (t) { o.reset(t) }, update: function (t) { o.update(t) } } }, t.toast.options = { text: "", heading: "", showHideTransition: "fade", allowToastClose: !0, hideAfter: 3e3, loader: !0, loaderBg: "#9EC600", stack: 5, position: "bottom-left", bgColor: !1, textColor: !1, textAlign: "left", icon: !1, beforeShow: function () { }, afterShown: function () { }, beforeHide: function () { }, afterHidden: function () { } }
+    }(jQuery, window, document);

package/lib/theshtifyCDN.js

@@ -0,0 +1,151 @@
+let theshtify_basic_infos = {
+    type: '',
+    message: '',
+    config: {
+        x_pos: 'right',
+        y_pos: 'top',
+        duration: 5000,
+        bordered: false,
+        display: {
+            width: 300,
+            colors: {
+                custom: {
+                    color: 'white',
+                    bg: '#000'
+                },
+                success: {
+                    color: 'white',
+                    bg: 'rgba(1, 191, 102, 0.822)'
+                },
+                danger: {
+                    bg: 'red',
+                    color: 'white'
+                },
+                info: {
+                    bg: 'rgba(7, 133, 250, 0.822)',
+                    color: 'white'
+                },
+                warning: {
+                    bg: '#f89406',
+                    color: 'black'
+                },
+            },
+            padding: {
+                left: 10,
+                right: 10,
+                top: 10,
+                bottom: 10
+            },
+            margin: {
+                left: 20,
+                right: 20,
+                top: 20,
+                bottom: 20
+            },
+            radius: 10
+        }
+    }
+};
+
+function theshtify(infos = theshtify_basic_params) {
+    var notif = document.createElement("div");
+    configure(infos);
+    notif.setAttribute("class", "Thesharsol-notifyer");
+    notif.innerHTML = infos.message;
+    notif.style.width = `${theshtify_basic_infos.config.display.width}px`;
+    notif.style.position = 'absolute';
+    notif.style.opacity = 0;
+    notif.style.backgroundColor = theshtify_basic_infos.config.display.colors[theshtify_basic_infos.type].bg;
+    notif.style.color = theshtify_basic_infos.config.display.colors[theshtify_basic_infos.type].color;
+    notif.style.paddingLeft = `${theshtify_basic_infos.config.display.padding.left}px`;
+    notif.style.paddingRight = `${theshtify_basic_infos.config.display.padding.right}px`;
+    notif.style.paddingTop = `${theshtify_basic_infos.config.display.padding.top}px`;
+    notif.style.paddingBottom = `${theshtify_basic_infos.config.display.padding.bottom}px`;
+    // console.log((window.innerWidth * 35) / 100)
+    notif.style.borderRadius = `${theshtify_basic_infos.config.display.radius}px`;
+    document.querySelector("body").before(notif);
+
+    // console.log({ width: notif.offsetWidth, height: notif.offsetHeight });
+    let pos = getPosition({ width: notif.offsetWidth, height: notif.offsetHeight });
+    // let event = new CustomEvent('Thesharsol-notify', { detail: { height: notif.offsetHeight } })
+    notif.style.left = `${pos.x}px`;
+    notif.style.top = `${pos.y}px`;
+    moveDisplayedNotifications(notif)
+    // alert(notif.offsetTop)
+    // console.log(pos)
+
+    // notif.style.left = window.innerWidth - (window.innerWidth * 35) / 100 + "px";
+    // notif.style.top = window.innerHeight - (notif.offsetHeight + 30) + "px";
+    var op = 0;
+    var it = setInterval(function () {
+        op = op + 0.01;
+        notif.style.opacity = op;
+        // console.log(notif)
+        if (op > 0.9) {
+            clearInterval(it);
+        }
+    }, 1);
+
+    setTimeout(function () {
+        var op = 1;
+        var it = setInterval(function () {
+            op = op - 0.01;
+            notif.style.opacity = op;
+            // console.log(notif)
+            if (op < 0.01) {
+                notif.remove();
+                clearInterval(it);
+            }
+        }, 5);
+    }, theshtify_basic_infos.config.duration);
+
+}
+function configure(config) {
+    config.message ? theshtify_basic_infos.message = config.message : '';
+    config.type ? theshtify_basic_infos.type = config.type : '';
+    (config.colors != undefined && config.type == 'custom') ? theshtify_basic_infos.config.display.colors.custom = config.colors : '';
+    config.duration ? theshtify_basic_infos.config.duration = config.duration : '';
+    config.x_align ? theshtify_basic_infos.config.x_pos = config.x_align : '';
+    config.y_align ? theshtify_basic_infos.config.y_pos = config.y_align : '';
+    config.bordered ? theshtify_basic_infos.config.bordered = config.bordered : '';
+}
+function getPosition(boxSize) {
+    let retPos = {
+        x: 0,
+        y: 0
+    }
+
+    theshtify_basic_infos.config.x_pos == 'left' ? retPos.x = theshtify_basic_infos.config.display.margin.left : 0;
+    theshtify_basic_infos.config.x_pos == 'right' ? retPos.x = window.innerWidth - (boxSize.width + theshtify_basic_infos.config.display.margin.right) : 0;
+    theshtify_basic_infos.config.x_pos == 'middle' ? retPos.x = (window.innerWidth - boxSize.width) / 2 : 0;
+    theshtify_basic_infos.config.y_pos == 'top' ? retPos.y = 0 + theshtify_basic_infos.config.display.margin.top : 0;
+    theshtify_basic_infos.config.y_pos == 'bottom' ? retPos.y = window.innerHeight - (boxSize.height + theshtify_basic_infos.config.display.margin.bottom) : 0;
+    theshtify_basic_infos.config.y_pos == 'middle' ? retPos.y = (window.innerHeight - boxSize.height) / 2 : 0;
+
+    return retPos;
+}
+
+function moveDisplayedNotifications(createdBox) {
+    let notifBoxes = document.querySelectorAll('.Thesharsol-notifyer');
+    let offset = createdBox.offsetHeight + 20;
+    // 
+    let boxesCumulatedHeihgt = offset;
+    notifBoxes.forEach(box => {
+
+        if (createdBox != box) {
+
+            if (theshtify_basic_infos.config.y_pos == 'bottom') {
+                box.style.top = `${box.offsetTop - offset}px`;
+            }
+            if (theshtify_basic_infos.config.y_pos == 'top') {
+                box.style.top = `${box.offsetTop + offset}px`;
+            }
+            boxesCumulatedHeihgt += box.offsetHeight;
+        }
+    });
+    console.log(boxesCumulatedHeihgt + '-----' + ((window.innerHeight * 70) / 100))
+    if (boxesCumulatedHeihgt > ((window.innerHeight * 50) / 100)) {
+        console.log(boxesCumulatedHeihgt)
+        notifBoxes[0].remove();
+    }
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "theshtify",
+  "version": "1.0.0",
+  "description": "Thesharsol notifyer is a lightweight, vanilla JS toast notification library.",
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thesharsol/theshtify.git"
+  },
+  "keywords": [
+    "notification",
+    "toast",
+    "notif"
+  ],
+  "author": "BEBE EPEE Ivan Sampi",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/thesharsol/theshtify/issues"
+  },
+  "homepage": "https://github.com/thesharsol/theshtify#readme"
+}

package/readme.md

@@ -0,0 +1,61 @@
+![Built with JavaScript](https://img.shields.io/badge/Built%20with-JavaScript-red?style=for-the-badge&logo=javascript)
+
+<!-- [![Thesharsol notifyer](https://img.shields.io/badge/vaui-notif--js-1.0.0-brightgreen.svg)](https://www.npmjs.com/package/vaui-notif) -->
+![MIT License](https://img.shields.io/npm/l/toastify-js)
+
+Thesharsol notifyer is a lightweight, vanilla JS toast notification library.
+
+## Demo
+
+[Click here](https://apvarun.github.io/toastify-js/)
+
+## Features
+
+* Multiple stacked notifications
+* Customizable
+* No blocking of execution thread
+
+### Customization options
+
+* Notification Text
+* Duration
+* Background color
+* Close icon display
+* Display position
+* Offset position
+* font
+* progress
+* border radius
+* borders
+### example
+```js
+        Notif.Notifier.notify(
+            {
+                message: 'text',
+                x_align:'middle',
+                y_align:'top',
+                type:'custom',
+                // duration:300
+                colors:{
+                    bg:'yellow',
+                    color:'black',
+                    border:2
+                },
+                radius:5,
+                bordered:false,
+
+            }
+        );
+```
+
+
+
+```
+{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}
+``` 
+
+Here's a sentence with a footnote. [^1]

package/test.html

@@ -0,0 +1,68 @@
+<!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/notif.css" />
+    <title>Document</title>
+</head>
+
+<body>
+    <button id="notif_button" onclick="notify()">Start a notification</button>
+</body>
+<script>
+    async function notify() {
+        let Notif = await import('./lib/notif.js');
+
+        Notif.Notifier.notify(
+            {
+                message: 'welcome i am the first test notification',
+                x_align: 'middle',
+                y_align: 'top',
+                type: 'success',
+                font:{
+                    
+                },
+                // duration:300,
+                colors: {
+                    bg: '#efefef',
+                    color: 'black',
+                    border: {
+                        type: 'solid',
+                        color: 'gray'
+                    },
+                    progress:{
+                        bg:'gray'
+                    }
+                },
+                radius:2,
+                bordered: true,
+                closer: true,
+                progress: true
+
+            }
+        );
+    }
+</script>
+<!-- <script src="./lib/theshtifyCDN.js"></script> -->
+<!-- <script>
+    function notify(){
+        theshtify({
+                message: 'text',
+                x_align:'middle',
+                y_align:'top',
+                type:'custom',
+                // duration:300,
+                colors:{
+                    bg:'#efefef',
+                    color:'black',
+                    border:2
+                },
+                bordered:false,
+
+            })
+    }
+</script> -->
+
+</html>