From d8dd7ab54237e7ae9ddb575e788c8b80d27c03f7 Mon Sep 17 00:00:00 2001 From: Daniel Vaca Araujo Date: Fri, 23 Jul 2021 13:34:29 +0200 Subject: [PATCH] Hide container when drawer is closed (#20) * Hide container when drawer is closed * Fixed build * minor change * minor fix --- dist/vt-augment.min.js | 2 +- src/vt-augment.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/dist/vt-augment.min.js b/dist/vt-augment.min.js index dcbe9c0..87256c8 100644 --- a/dist/vt-augment.min.js +++ b/dist/vt-augment.min.js @@ -64,7 +64,7 @@ J&&g.constructor===J?f=g.g:(u("expected object of type SafeStyle, got '"+g+"' of (g=g.j());e=e+'="'+C(String(g))+'"';c+=" "+e}}var p="":(h=Va(c),p+=">"+Q(h).toString()+"",h=h.g());(b=b&&b.dir)&&(/^(ltr|rtl|auto)$/i.test(b)?h=0:h=null);p=R(p,h);if(d.tagName&&Wa[d.tagName.toUpperCase()])throw Error("goog.dom.safe.setInnerHtml cannot be used to set content of "+d.tagName+".");if(Xa())for(;d.lastChild;)d.removeChild(d.lastChild);d.innerHTML=Q(p);d.firstChild.setAttribute("sandbox","allow-scripts allow-same-origin allow-popups"); a.appendChild(d.removeChild(d.firstChild))}return this};Z.prototype.preload=function(){return this};Z.prototype.u=function(){var a=this.g.querySelector("iframe");this.g.setAttribute("opened","");a&&a.removeAttribute("tabindex");return this};Z.prototype.m=function(){var a=this.g.querySelector("iframe");this.g.removeAttribute("opened");a&&(a.setAttribute("tabindex","-1"),a.style.display="none");return this}; Z.prototype.o=function(a){var b=this.g,c=b.querySelector("div.spinner");c||(c=document.createElement("div"),c.classList.add("spinner"),b.appendChild(c));b=this.g.querySelector("iframe");c.style.display=a?"block":"none";b&&(b.style.display=a?"none":"block",b.focus());return this}; -function mb(){var a=document.createElement("style");var b=x(new v(w,"\n .vt-augment {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .vt-augment.drawer {\n width: 700px;\n background: white;\n border: 1px solid #e6e6e6;\n text-align: left;\n z-index: 102;\n position: fixed;\n right: 0;\n top: 0;\n height: 100vh;\n box-shadow: -4px 5px 8px -3px rgba(17, 17, 17, .16);\n animation: slideToRight 0.5s 1 forwards;\n transform: translateX(100vw);\n }\n .vt-augment.drawer[opened] {\n animation: slideFromRight 0.2s 1 forwards;\n }\n .vt-augment > .spinner {\n position: absolute;\n z-index: 199;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n border: 8px solid rgba(0, 0, 0, 0.2);\n border-left-color: white;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1.2s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n @keyframes slideFromRight {\n 0% {\n transform: translateX(100vw);\n }\n 100% {\n transform: translateX(0);\n }\n }\n @keyframes slideToRight {\n 100% {\n transform: translateX(100vw);\n display: none;\n }\n }\n @media screen and (max-width: 700px) {\n .vt-augment.drawer {\n width: 100%;\n }\n }\n"));b= +function mb(){var a=document.createElement("style");var b=x(new v(w,"\n .vt-augment {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .vt-augment.drawer {\n display: none;\n width: 700px;\n background: white;\n border: 1px solid #e6e6e6;\n text-align: left;\n z-index: 102;\n position: fixed;\n right: 0;\n top: 0;\n height: 100vh;\n box-shadow: -4px 5px 8px -3px rgba(17, 17, 17, .16);\n animation: slideToRight 0.5s 1 forwards;\n transform: translateX(100vw);\n }\n .vt-augment.drawer[opened] {\n display: flex;\n animation: slideFromRight 0.2s 1 forwards;\n }\n .vt-augment > .spinner {\n position: absolute;\n z-index: 199;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n border: 8px solid rgba(0, 0, 0, 0.2);\n border-left-color: white;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1.2s linear infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n @keyframes slideFromRight {\n 0% {\n transform: translateX(100vw);\n }\n 100% {\n transform: translateX(0);\n }\n }\n @keyframes slideToRight {\n 100% {\n transform: translateX(100vw);\n display: none;\n }\n }\n @media screen and (max-width: 700px) {\n .vt-augment.drawer {\n width: 100%;\n }\n }\n"));b= 0===b.length?Na:new M(b,L);var c=a?new jb(9==a.nodeType?a:a.ownerDocument||a.document):da||(da=new jb),d=c.g;if(S&&d.createStyleSheet)d=d.createStyleSheet(),lb(d,b);else{d=kb(c,"HEAD")[0];if(!d){var e=kb(c,"BODY")[0];d=c.h("HEAD");e.parentNode.insertBefore(d,e)}c=c.h("STYLE");if(null===l)b:{e=k.document;if((e=e.querySelector&&e.querySelector("script[nonce]"))&&(e=e.nonce||e.getAttribute("nonce"))&&aa.test(e)){l=e;break b}l=""}(e=l)&&c.setAttribute("nonce",e);lb(c,b);d.appendChild(c)}document.body.appendChild(a)} Z.prototype.loading=Z.prototype.o;Z.prototype.closeDrawer=Z.prototype.m;Z.prototype.openDrawer=Z.prototype.u;Z.prototype.preload=Z.prototype.preload;Z.prototype.load=Z.prototype.load;window.VTAugment=Z; }.bind(this))); diff --git a/src/vt-augment.js b/src/vt-augment.js index 1512c0d..4eece50 100644 --- a/src/vt-augment.js +++ b/src/vt-augment.js @@ -54,6 +54,7 @@ const CSS_STYLESHEET = ` align-items: center; } .vt-augment.drawer { + display: none; width: 700px; background: white; border: 1px solid #e6e6e6; @@ -68,6 +69,7 @@ const CSS_STYLESHEET = ` transform: translateX(100vw); } .vt-augment.drawer[opened] { + display: flex; animation: slideFromRight 0.2s 1 forwards; } .vt-augment > .spinner {