DataVis 👁️ UX 🍭 PWA 👁️ ThreeJS ✨ Vue 🚀 Svelte

snackbar_toast.js

// 🌑🌒🌓🌔🌕🌖🌗🌘🌑 Infographics UX PWA Typescript Svelte ThreeJS Vue ✨
let neodigmToast = (function(_d, eID, _q) {
  let _nTimeout = 5800, _aQ = [], _eSb, _eSbText, _sTheme
  let bIsInit = bIsPause = false 
  let _fOpen = function() {
      _eSbText.innerHTML = _aQ[0].sMsg.replace("|", "<br>").replace("##", "")
      _eSb.style.left = ((_d.body.clientWidth / 2) - (_eSb.clientWidth / 2)) + "px"
      if( _aQ[0].sTheme ) _eSb.dataset.n55Theme = _aQ[0].sTheme
      if( _sTheme ) {
        _eSb.dataset.n55Theme = _sTheme
        _sTheme = ""
      }
      _eSb.classList.remove("snackbar__cont--hide")
      if( neodigmOpt.neodigmWired4Sound && neodigmOpt.EVENT_SOUNDS ) neodigmWired4Sound.sound( 1 )
    _eSb.classList.add("snackbar__cont--show")
    if("vibrate" in navigator) window.navigator.vibrate([48, 56])
    setTimeout(_fClose, _nTimeout)
  };
  return {
      init: function(){
          _eSb = _d.getElementById(eID)
          if( _eSb ){
              _eSbText  = _eSb.querySelector("p")
              _fClose = function() {
                  _aQ.shift()
                  _eSb.classList.remove("snackbar__cont--show")
                  _eSb.classList.add("snackbar__cont--hide")
                  if(_aQ.length != 0) {
                      setTimeout(_fOpen, 1200)
                  }
                  _eSb.classList.remove("snackbar__cont--alt")
              }
          }
          _d.body.addEventListener("click", ( ev )=>{
            let evToast = ev?.target?.dataset.n55Toast || ev?.srcElement?.parentNode?.dataset.n55Toast
            let evTheme = ev?.target?.dataset.n55Theme || ev?.srcElement?.parentNode?.dataset.n55Theme
            if( evToast && (evTheme != "disabled") ) neodigmToast.q( evToast )
          }, true)
          bIsInit = true
      },
      q: function( sMsg, sTheme ) {
          if( bIsInit && !bIsPause ){ 
            if( sMsg && sMsg != _aQ[0]?.sMsg ) _aQ.push( {"sMsg": sMsg, "sTheme":sTheme} ) // temporal debounce
            if( window.dataLayer && neodigmOpt.N55_GTM_DL_TOAST ) window.dataLayer.push( {"event": neodigmOpt.N55_GTM_DL_TOAST, "msg": sMsg } )
            if(_aQ.length == 1) _fOpen()
          }
          return neodigmToast
      },
      setTheme: function( sTheme ){
        if( bIsInit && !bIsPause ){ _sTheme = sTheme }
        return neodigmToast
      },
      getQ: function(){ return _aQ; },
      pause: function(){ bIsPause = true;  return neodigmToast; },
      play:  function(){ bIsPause = false; return neodigmToast; }
  }
})(document, "js-snackbar__id", "[data-n55-toast]");

//  Neodigm 55 Soda Pop Begin  //
class NeodigmSodaPop {
    constructor(_d, _aQ) {  //  Flux Capacitor
        this._d = _d; this._aQ = _aQ
        this.eSoda = this.eScrim = this.eClose = this.fOnBeforeOpen = this.fOnAfterOpen = this.fOnClose = null
        this.bIsOpen = this.bIsModal = this.bIsInit = false
    }
    init() {
        this.eScrim = this._d.querySelector(this._aQ[0])
        this.eClose = this._d.querySelector(this._aQ[0] + "-close")
        this._d.body.addEventListener("click", (ev) => {
          let evAtr = ev?.target?.dataset?.n55SodapopId || ev?.srcElement?.parentNode?.dataset?.n55SodapopId 
          let evTheme = ev?.target?.dataset.n55Theme || ev?.srcElement?.parentNode?.dataset.n55Theme
          if( evAtr && (evTheme != "disabled") ) {
              ev.preventDefault()
              neodigmSodaPop.open( evAtr )
          }
          if("NEODIGM-SODAPOP-SCRIM" == ev.target.tagName) {
              if(this.bIsModal) {
                  this.shake()
              } else {
                  this.close()
              }
          }
          if("NEODIGM-SODAPOP-SCRIM-CLOSE" == ev.target.tagName) {
              this.close()
          }
        }, false)
        this.bIsInit = true
        return this
    }
    open(_sId) {
      if(this.bIsOpen) this.close(true)
      this.eTmpl = this._d.getElementById(_sId)
      if(this.bIsInit && this.eTmpl && this.eScrim) {
          if(this.fOnBeforeOpen) this.fOnBeforeOpen()
          this.bIsModal = (this.eTmpl.dataset.n55SodapopModal == "true")
          if(this.bIsModal) {
            this.eClose.classList.add("ndsp__modal")
          }else{
            this.eClose.classList.remove("ndsp__modal")
          }
          this.eScrim.dataset.n55SodapopScrim = "opened"
          this.eClose.dataset.n55SodapopScrim = "opened"
          this.eSoda = this._d.createElement(this._aQ[1])
          setTimeout(function() {
              neodigmSodaPop.eScrim.classList.add("ndsp__blur");
          }, 96)
          if(this.bIsModal) this.eSoda.classList.add("ndsp__modal")
          this.eSoda.classList.add("ndsp__size--" + this.eTmpl.dataset.n55SodapopSize ) 
          setTimeout(function() {
              neodigmSodaPop.eSoda.classList.add("ndsp__opened");
          }, 4)
          this.eSoda.innerHTML = this.eTmpl.innerHTML
          this._d.body.appendChild(this.eSoda)
          if("vibrate" in navigator) window.navigator.vibrate([16, 8]) 
          if(neodigmOpt.neodigmWired4Sound && neodigmOpt.EVENT_SOUNDS) neodigmWired4Sound.sound(7)
          this.bIsOpen = true;
          if(this.fOnAfterOpen) this.fOnAfterOpen()
          if( window.dataLayer && neodigmOpt.N55_GTM_DL_POP_OPEN ) window.dataLayer.push( {"event": neodigmOpt.N55_GTM_DL_POP_OPEN, "id": _sId } )
      }
      return neodigmSodaPop
    }
    close(_bFast) {
        if(this.bIsInit && this.bIsOpen) {
            this.eClose.dataset.n55SodapopScrim = "closed"
            if(_bFast) {
                this.eSoda.remove()
                this.eScrim.dataset.n55SodapopScrim = "closed"
                this.eScrim.classList.remove("ndsp__blur", "ndsp__modal")
            } else {
                setTimeout(function() {
                    neodigmSodaPop.eSoda.remove()
                    setTimeout(function() {
                        neodigmSodaPop.eScrim.dataset.n55SodapopScrim = "closed"
                        neodigmSodaPop.eScrim.classList.remove("ndsp__blur", "ndsp__modal")
                    }, 304)
                }, 176)
            }
            if(this.fOnClose) this.fOnClose()
            if("vibrate" in navigator) window.navigator.vibrate([8, 16])
            if(neodigmOpt.neodigmWired4Sound && neodigmOpt.EVENT_SOUNDS) neodigmWired4Sound.sound(3)
            this.bIsOpen = false
            if( window.dataLayer && neodigmOpt.N55_GTM_DL_POP_CLOSE ) window.dataLayer.push( {"event": neodigmOpt.N55_GTM_DL_POP_CLOSE } )
        }
        return this
    }
    shake() {
        if(this.bIsInit && this.bIsOpen) {
            if("vibrate" in navigator) window.navigator.vibrate([8, 32, 48])
            neodigmSodaPop.eSoda.classList.add("ndsp__opened--shake1");
            setTimeout(function(){
                neodigmSodaPop.eSoda.classList.remove("ndsp__opened--shake1");
            }, 460)
            if( neodigmOpt.neodigmWired4Sound && neodigmOpt.EVENT_SOUNDS ) neodigmWired4Sound.sound(9)
            if("vibrate" in navigator) window.navigator.vibrate([48, 32, 8])
        }
        return this
    }
    autoOpen(_sId) {
        setTimeout(function() {
            neodigmSodaPop.open(_sId)
        }, 256);
        return this
    }
    isOpen() {
        return this.bIsOpen
    }
    setOnBeforeOpen(_f) {
        this.fOnBeforeOpen = _f
    }
    setOnAfterOpen(_f) {
        this.fOnAfterOpen = _f
    }
    setOnClose(_f) {
        this.fOnClose = _f
    }
}
let neodigmSodaPop = new NeodigmSodaPop( document, ["neodigm-sodapop-scrim", "neodigm-sodapop", "data-n55-sodapop-modal"] )

Now part of the Neodigm 55 UX micro-library