Last active
January 17, 2024 06:20
-
-
Save neodigm/ffa4a9e22a5da14e2472274d476eaa55 to your computer and use it in GitHub Desktop.
DataVis 👁️ UX 🍭 PWA 👁️ ThreeJS ✨ Vue 🚀 Svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 🌑🌒🌓🌔🌕🌖🌗🌘🌑 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"] ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This might be the most used JS that I've ever written. It's on like 13 live sites now. Anyway, I added debounce because people got all clickity click click.