From b364e0ddfc583dc05d45b1069b8bde7a3513f4f8 Mon Sep 17 00:00:00 2001 From: Thomas Wilkerling Date: Thu, 4 Nov 2021 08:57:47 +0100 Subject: [PATCH] new release and hotfix --- dist/css/winbox.min.css | 2 +- dist/js/winbox.min.js | 34 +++++++++++++++++----------------- dist/winbox.bundle.js | 36 ++++++++++++++++++------------------ package.json | 2 +- src/css/winbox.css | 5 +++-- src/css/winbox.less | 6 ++++-- src/js/winbox.js | 6 +++--- 7 files changed, 47 insertions(+), 44 deletions(-) diff --git a/dist/css/winbox.min.css b/dist/css/winbox.min.css index 313f47d..b3e0029 100644 --- a/dist/css/winbox.min.css +++ b/dist/css/winbox.min.css @@ -1 +1 @@ -@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox.modal:after,.winbox.modal:before{content:''}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.max,.no-shadow{box-shadow:none}.wb-header{top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;height:35px;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n,.wb-s{height:10px;position:absolute;left:0}.wb-n{top:-5px;right:0;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{right:0;cursor:n-resize}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-title,.winbox.min .wb-title{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none} \ No newline at end of file +@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.no-move:not(.min) .wb-title,.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none;min-height:35px}.wb-header,.wb-icon{height:35px}.wb-n,.wb-s{left:0;height:10px;position:absolute}.wb-body{top:35px}.wb-header,.winbox iframe{position:absolute;width:100%}.wb-header{left:0;top:0;color:#fff;overflow:hidden;z-index:1}.wb-body{position:absolute;left:0;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-title{line-height:35px;font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;right:0;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{right:0;cursor:n-resize}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize}.wb-icon{float:right;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-title,.winbox.min .wb-title{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.hide{visibility:hidden}.max{box-shadow:none}.max .wb-body{margin:0!important}.winbox iframe{height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{content:'';position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:wb-fade-in .2s ease-out forwards;z-index:-1}.no-shadow{box-shadow:none}.no-header .wb-body{top:0} \ No newline at end of file diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js index 403dbf5..88870c1 100644 --- a/dist/js/winbox.min.js +++ b/dist/js/winbox.min.js @@ -1,24 +1,24 @@ /** - * WinBox.js v0.2.01 + * WinBox.js v0.2.1 * Copyright 2021 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var g,k=document.createElement("div");k.innerHTML="
";function l(a,b,c,e){a.addEventListener(b,c,e||!1===e?e:!0)}function m(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function n(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var r=[],v,x=0,y=0,B,C,D,E,F,I,O; -function Q(a,b){if(!(this instanceof Q))return new Q(a);B||R();this.g=k.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];var c,e;if(a){if(b){var d=a;a=b}if("string"===typeof a)d=a;else{if(e=a.modal)var h=c="center";var p=a.id;var J=a.root;d=d||a.title;var G=a.mount;var f=a.html;var z=a.url;var q=a.width;var t=a.height;var w=a.minwidth;var A=a.minheight;h=a.x||h;c=a.y||c;var K=a.max;var u=a.top;var H=a.left;var L=a.bottom;var M=a.right;B=a.index||B;var X=a.onclose;var Y=a.onfocus; -var Z=a.onblur;var aa=a.onmove;var ba=a.onresize;b=a.background;var P=a.border;var N=a["class"];var ca=a.splitscreen;b&&this.setBackground(b);P&&n(this.body,"margin",P+(isNaN(P)?"":"px"))}}this.setTitle(d||"");a=I;d=O;u=u?S(u,d):0;L=L?S(L,d):0;H=H?S(H,a):0;M=M?S(M,a):0;a-=H+M;d-=u+L;q=q?S(q,a):a/2|0;t=t?S(t,d):d/2|0;w=w?S(w,a):0;A=A?S(A,d):0;h=h?S(h,a,q):H;c=c?S(c,d,t):u;B=B||10;this.g.id=this.id=p||"winbox-"+ ++x;this.g.className="winbox"+(N?" "+("string"===typeof N?N:N.join(" ")):"")+(e?" modal": -"");this.x=h;this.y=c;this.width=q;this.height=t;this.u=w;this.s=A;this.top=u;this.right=M;this.bottom=L;this.left=H;this.max=this.min=!1;this.j=X;this.l=Y;this.i=Z;this.o=aa;this.m=ba;this.v=ca;K?this.maximize():this.move().resize();this.focus();G?this.mount(G):f?this.body.innerHTML=f:z&&this.setUrl(z);da(this);(J||v).appendChild(this.g)}Q["new"]=function(a){return new Q(a)}; -function S(a,b,c){"string"===typeof a&&("center"===a?a=(b-c)/2|0:"right"===a||"bottom"===a?a=b-c:(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c|0:c));return a} -function R(){v=document.body;v[E="requestFullscreen"]||v[E="msRequestFullscreen"]||v[E="webkitRequestFullscreen"]||v[E="mozRequestFullscreen"]||(E="");F=E&&E.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");l(window,"resize",function(){I=v.clientWidth;O=v.clientHeight;T()});I=v.clientWidth;O=v.clientHeight} -function da(a){U(a,"title");U(a,"n");U(a,"s");U(a,"w");U(a,"e");U(a,"nw");U(a,"ne");U(a,"se");U(a,"sw");l(a.g.getElementsByClassName("wb-min")[0],"click",function(b){m(b);a.minimize()});l(a.g.getElementsByClassName("wb-max")[0],"click",function(b){m(b);a.focus().maximize()});E?l(a.g.getElementsByClassName("wb-full")[0],"click",function(b){m(b);a.focus().fullscreen()}):a.addClass("no-full");l(a.g.getElementsByClassName("wb-close")[0],"click",function(b){m(b);a.close()||(a=null)});l(a.g,"click",function(){a.focus()}, -!1)}function V(a){r.splice(r.indexOf(a),1);T();a.removeClass("min");a.min=!1;a.g.title=""}function T(){for(var a=r.length,b={},c={},e=0,d;eq){a.maximize();return}}a.max||(v.classList.add("wb-drag"),(p=f.touches)&&(p=p[0])?(f=p,l(window,"touchmove",e),l(window,"touchend",d)):(l(window,"mousemove",e),l(window,"mouseup",d)),J=f.pageX,G=f.pageY,a.focus())}}function e(f){m(f);p&&(f=f.touches[0]);var z=f.pageX;f=f.pageY;var q=z-J,t=f-G,w;if("title"===b){a.x+=q;a.y+=t;var A=w=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=q;var K= -1}else if("w"===b||"sw"===b||"nw"===b)a.x+=q,a.width-=q,A=K=1;if("s"===b||"se"===b||"sw"===b){a.height+=t;var u=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=t,a.height-=t,w=u=1}if(K||u)K&&(a.width=Math.max(Math.min(a.width,I-a.x-a.right),150)),u&&(a.height=Math.max(Math.min(a.height,O-a.y-a.bottom),35)),a.resize();if(A||w)A&&(a.x=Math.max(Math.min(a.x,I-a.width-a.right),a.left)),w&&(a.y=Math.max(Math.min(a.y,O-a.height-a.bottom),a.top)),a.move();J=z;G=f}function d(f){m(f);v.classList.remove("wb-drag"); -p?(window.removeEventListener("touchmove",e,!0),window.removeEventListener("touchend",d,!0)):(window.removeEventListener("mousemove",e,!0),window.removeEventListener("mouseup",d,!0))}var h=a.g.getElementsByClassName("wb-"+b)[0],p,J,G;l(h,"mousedown",c);l(h,"touchstart",c,{passive:!1})}g=Q.prototype;g.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this}; +(function(){'use strict';var g,k=document.createElement("div");k.innerHTML="
";function l(a,b,c,e){a.addEventListener(b,c,e||!1===e?e:!0)}function m(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function n(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var r=[],w,y=0,z=0,C,D,E,F,G,K,P; +function R(a,b){if(!(this instanceof R))return new R(a);C||S();var c,e;if(a){if(b){var d=a;a=b}if("string"===typeof a)d=a;else{if(e=a.modal)var h=c="center";var p=a.id;var t=a.root;var H=a.template;d=d||a.title;var f=a.mount;var q=a.html;var x=a.url;var u=a.width;var v=a.height;var A=a.minwidth;var B=a.minheight;h=a.x||h;c=a.y||c;var L=a.max;var Z=a.hidden;var I=a.top;var J=a.left;var M=a.bottom;var N=a.right;C=a.index||C;var aa=a.onclose;var ba=a.onfocus;var ca=a.onblur;var da=a.onmove;var ea=a.onresize; +var V=a.background;var Q=a.border;var O=a["class"];var fa=a.splitscreen}}this.g=H?H:k.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];V&&this.setBackground(V);Q&&n(this.body,"margin",Q+(isNaN(Q)?"":"px"));this.setTitle(d||"");a=K;b=P;I=I?T(I,b):0;M=M?T(M,b):0;J=J?T(J,a):0;N=N?T(N,a):0;a-=J+N;b-=I+M;u=u?T(u,a):a/2|0;v=v?T(v,b):b/2|0;A=A?T(A,a):0;B=B?T(B,b):0;h=h?T(h,a,u):J;c=c?T(c,b,v):I;C=C||10;this.g.id=this.id=p||"winbox-"+ ++y;this.g.className="winbox"+(O?" "+("string"===typeof O? +O:O.join(" ")):"")+(e?" modal":"");this.x=h;this.y=c;this.width=u;this.height=v;this.j=A;this.i=B;this.top=I;this.right=N;this.bottom=M;this.left=J;this.max=this.min=!1;this.onclose=aa;this.onfocus=ba;this.onblur=ca;this.onmove=da;this.onresize=ea;this.l=fa;L?this.maximize():this.move().resize();f?this.mount(f):q?this.body.innerHTML=q:x&&this.setUrl(x);Z?this.hide():this.focus();this.g.winbox=this;ha(this);(t||w).appendChild(this.g)}R["new"]=function(a){return new R(a)}; +function T(a,b,c){"string"===typeof a&&("center"===a?a=(b-c)/2|0:"right"===a||"bottom"===a?a=b-c:(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c|0:c));return a} +function S(){w=document.body;w[F="requestFullscreen"]||w[F="msRequestFullscreen"]||w[F="webkitRequestFullscreen"]||w[F="mozRequestFullscreen"]||(F="");G=F&&F.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");l(window,"resize",function(){K=w.clientWidth;P=w.clientHeight;U()});K=w.clientWidth;P=w.clientHeight} +function ha(a){W(a,"title");W(a,"n");W(a,"s");W(a,"w");W(a,"e");W(a,"nw");W(a,"ne");W(a,"se");W(a,"sw");l(a.g.getElementsByClassName("wb-min")[0],"click",function(b){m(b);a.minimize()});l(a.g.getElementsByClassName("wb-max")[0],"click",function(b){m(b);a.focus().maximize()});F?l(a.g.getElementsByClassName("wb-full")[0],"click",function(b){m(b);a.focus().fullscreen()}):a.addClass("no-full");l(a.g.getElementsByClassName("wb-close")[0],"click",function(b){m(b);a.close()||(a=null)});l(a.g,"click",function(){a.focus()}, +!1)}function X(a){r.splice(r.indexOf(a),1);U();a.removeClass("min");a.min=!1;a.g.title=""}function U(){for(var a=r.length,b={},c={},e=0,d;ex){a.maximize();return}}a.max||(w.classList.add("wb-drag"),(p=f.touches)&&(p=p[0])?(f=p,l(window,"touchmove",e),l(window,"touchend",d)):(l(window,"mousemove",e),l(window,"mouseup",d)),t=f.pageX,H=f.pageY,a.focus())}}function e(f){m(f);p&&(f=f.touches[0]);var q=f.pageX;f=f.pageY;var x=q-t,u=f-H,v;if("title"===b){a.x+=x;a.y+=u;var A=v=1}else{if("e"=== +b||"se"===b||"ne"===b){a.width+=x;var B=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=x,a.width-=x,A=B=1;if("s"===b||"se"===b||"sw"===b){a.height+=u;var L=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=u,a.height-=u,v=L=1}if(B||L)B&&(a.width=Math.max(Math.min(a.width,K-a.x-a.right),150)),L&&(a.height=Math.max(Math.min(a.height,P-a.y-a.bottom),0)),a.resize();if(A||v)A&&(a.x=Math.max(Math.min(a.x,K-a.width-a.right),a.left)),v&&(a.y=Math.max(Math.min(a.y,P-a.height-a.bottom),a.top)),a.move();t=q;H=f}function d(f){m(f); +w.classList.remove("wb-drag");p?(window.removeEventListener("touchmove",e,!0),window.removeEventListener("touchend",d,!0)):(window.removeEventListener("mousemove",e,!0),window.removeEventListener("mouseup",d,!0))}var h=a.g.getElementsByClassName("wb-"+b)[0],p,t,H;l(h,"mousedown",c);l(h,"touchstart",c,{passive:!1})}g=R.prototype;g.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this}; g.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.h;c&&c.appendChild(b);b.h=a}return this};g.setTitle=function(a){a=this.title=a;this.g.getElementsByClassName("wb-title")[0].firstChild.nodeValue=a;return this};g.setBackground=function(a){n(this.g,"background",a);return this};g.setUrl=function(a){this.body.innerHTML='';return this}; -g.focus=function(){D!==this&&(n(this.g,"z-index",B++),this.addClass("focus"),D&&(D.removeClass("focus"),D.i&&D.i()),D=this,this.l&&this.l());return this};g.hide=function(){return this.addClass("hide")};g.show=function(){return this.removeClass("hide")};g.minimize=function(a){C&&W();!a&&this.min?(V(this),this.resize().move().focus()):!1===a||this.min||(r.push(this),T(),this.g.title=this.title,this.addClass("min"),this.min=!0);this.max&&(this.removeClass("max"),this.max=!1);return this}; -g.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&V(this),(this.max=!this.max)?this.addClass("max").resize(I-this.left-this.right,O-this.top-this.bottom,!0).move(this.left,this.top,!0):this.resize().move().removeClass("max");return this};g.fullscreen=function(a){if("undefined"===typeof a||a!==C)this.min&&(this.resize().move(),V(this)),C&&W()||(this.body[E](),C=!0);return this}; -function W(){C=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[F](),!0}g.close=function(a){if(this.j&&this.j(a))return!0;this.min&&V(this);this.unmount();this.g.parentNode.removeChild(this.g);D===this&&(D=null)}; -g.move=function(a,b,c){a||0===a?c||(this.x=a?a=S(a,I-this.left-this.right,this.width):0,this.y=b?b=S(b,O-this.top-this.bottom,this.height):0):(a=this.x,b=this.y,this.v&&(0===a?this.resize(I/2,O):a===I-this.width&&this.resize(I/2,O)));n(this.g,"transform","translate("+a+"px,"+b+"px)");this.o&&this.o(a,b);return this}; -g.resize=function(a,b,c){a||0===a?c||(this.width=a?a=S(a,I-this.left-this.right):0,this.height=b?b=S(b,O-this.top-this.bottom):0):(a=this.width,b=this.height);a=Math.max(a,this.u);b=Math.max(b,this.s);n(this.g,"width",a+"px");n(this.g,"height",b+"px");this.m&&this.m(a,b);return this};g.addClass=function(a){this.g.classList.add(a);return this};g.removeClass=function(a){this.g.classList.remove(a);return this};window.WinBox=Q;}).call(this); +g.focus=function(){E!==this&&(n(this.g,"z-index",C++),this.addClass("focus"),E&&(E.removeClass("focus"),E.onblur&&E.onblur()),E=this,this.onfocus&&this.onfocus());return this};g.hide=function(){return this.addClass("hide")};g.show=function(){return this.removeClass("hide")};g.minimize=function(a){D&&Y();!a&&this.min?(X(this),this.resize().move().focus()):!1===a||this.min||(r.push(this),U(),this.g.title=this.title,this.addClass("min"),this.min=!0);this.max&&(this.removeClass("max"),this.max=!1);return this}; +g.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&X(this),(this.max=!this.max)?this.addClass("max").resize(K-this.left-this.right,P-this.top-this.bottom,!0).move(this.left,this.top,!0):this.resize().move().removeClass("max");return this};g.fullscreen=function(a){if("undefined"===typeof a||a!==D)this.min&&(this.resize().move(),X(this)),D&&Y()||(this.body[F](),D=!0);return this}; +function Y(){D=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[G](),!0}g.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&X(this);this.unmount();this.g.parentNode.removeChild(this.g);E===this&&(E=null)}; +g.move=function(a,b,c){a||0===a?c||(this.x=a?a=T(a,K-this.left-this.right,this.width):0,this.y=b?b=T(b,P-this.top-this.bottom,this.height):0):(a=this.x,b=this.y,this.l&&(0===a?this.resize(K/2,P):a===K-this.width&&this.resize(K/2,P)));n(this.g,"transform","translate("+a+"px,"+b+"px)");this.onmove&&this.onmove(a,b);return this}; +g.resize=function(a,b,c){a||0===a?c||(this.width=a?a=T(a,K-this.left-this.right):0,this.height=b?b=T(b,P-this.top-this.bottom):0):(a=this.width,b=this.height);a=Math.max(a,this.j);b=Math.max(b,this.i);n(this.g,"width",a+"px");n(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this};g.addClass=function(a){this.g.classList.add(a);return this};g.removeClass=function(a){this.g.classList.remove(a);return this};window.WinBox=R;}).call(this); diff --git a/dist/winbox.bundle.js b/dist/winbox.bundle.js index 604e4cc..d3379a8 100644 --- a/dist/winbox.bundle.js +++ b/dist/winbox.bundle.js @@ -1,25 +1,25 @@ /** - * WinBox.js v0.2.01 (Bundle) + * WinBox.js v0.2.1 (Bundle) * Copyright 2021 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var g,k=document.createElement("style");k.innerHTML="@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox.modal:after,.winbox.modal:before{content:''}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.max,.no-shadow{box-shadow:none}.wb-header{top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;height:35px;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n,.wb-s{height:10px;position:absolute;left:0}.wb-n{top:-5px;right:0;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{right:0;cursor:n-resize}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-title,.winbox.min .wb-title{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}"; -var l=document.getElementsByTagName("head")[0];l.firstChild?l.insertBefore(k,l.firstChild):l.appendChild(k);var m=document.createElement("div");m.innerHTML="
";function n(a,b,c,e){a.addEventListener(b,c,e||!1===e?e:!0)}function r(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function v(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var x=[],y,B=0,C=0,D,E,F,I,N,P,Q; -function S(a,b){if(!(this instanceof S))return new S(a);D||T();this.g=m.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];var c,e;if(a){if(b){var d=a;a=b}if("string"===typeof a)d=a;else{if(e=a.modal)var h=c="center";var p=a.id;var J=a.root;d=d||a.title;var G=a.mount;var f=a.html;var z=a.url;var q=a.width;var t=a.height;var w=a.minwidth;var A=a.minheight;h=a.x||h;c=a.y||c;var K=a.max;var u=a.top;var H=a.left;var L=a.bottom;var M=a.right;D=a.index||D;var Z=a.onclose;var aa=a.onfocus; -var ba=a.onblur;var ca=a.onmove;var da=a.onresize;b=a.background;var R=a.border;var O=a["class"];var ea=a.splitscreen;b&&this.setBackground(b);R&&v(this.body,"margin",R+(isNaN(R)?"":"px"))}}this.setTitle(d||"");a=P;d=Q;u=u?U(u,d):0;L=L?U(L,d):0;H=H?U(H,a):0;M=M?U(M,a):0;a-=H+M;d-=u+L;q=q?U(q,a):a/2|0;t=t?U(t,d):d/2|0;w=w?U(w,a):0;A=A?U(A,d):0;h=h?U(h,a,q):H;c=c?U(c,d,t):u;D=D||10;this.g.id=this.id=p||"winbox-"+ ++B;this.g.className="winbox"+(O?" "+("string"===typeof O?O:O.join(" ")):"")+(e?" modal": -"");this.x=h;this.y=c;this.width=q;this.height=t;this.u=w;this.s=A;this.top=u;this.right=M;this.bottom=L;this.left=H;this.max=this.min=!1;this.j=Z;this.l=aa;this.i=ba;this.o=ca;this.m=da;this.v=ea;K?this.maximize():this.move().resize();this.focus();G?this.mount(G):f?this.body.innerHTML=f:z&&this.setUrl(z);fa(this);(J||y).appendChild(this.g)}S["new"]=function(a){return new S(a)}; +(function(){'use strict';var g,k=document.createElement("style");k.innerHTML="@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.no-move:not(.min) .wb-title,.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none;min-height:35px}.wb-header,.wb-icon{height:35px}.wb-n,.wb-s{left:0;height:10px;position:absolute}.wb-body{top:35px}.wb-header,.winbox iframe{position:absolute;width:100%}.wb-header{left:0;top:0;color:#fff;overflow:hidden;z-index:1}.wb-body{position:absolute;left:0;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-title{line-height:35px;font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;right:0;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{right:0;cursor:n-resize}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize}.wb-icon{float:right;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-title,.winbox.min .wb-title{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.hide{visibility:hidden}.max{box-shadow:none}.max .wb-body{margin:0!important}.winbox iframe{height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{content:'';position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:wb-fade-in .2s ease-out forwards;z-index:-1}.no-shadow{box-shadow:none}.no-header .wb-body{top:0}"; +var l=document.getElementsByTagName("head")[0];l.firstChild?l.insertBefore(k,l.firstChild):l.appendChild(k);var m=document.createElement("div");m.innerHTML="
";function n(a,b,c,e){a.addEventListener(b,c,e||!1===e?e:!0)}function r(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function w(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var y=[],z,C=0,D=0,E,F,G,K,O,Q,R; +function T(a,b){if(!(this instanceof T))return new T(a);E||aa();var c,e;if(a){if(b){var d=a;a=b}if("string"===typeof a)d=a;else{if(e=a.modal)var h=c="center";var p=a.id;var t=a.root;var H=a.template;d=d||a.title;var f=a.mount;var q=a.html;var x=a.url;var u=a.width;var v=a.height;var A=a.minwidth;var B=a.minheight;h=a.x||h;c=a.y||c;var L=a.max;var ba=a.hidden;var I=a.top;var J=a.left;var M=a.bottom;var N=a.right;E=a.index||E;var ca=a.onclose;var da=a.onfocus;var ea=a.onblur;var fa=a.onmove;var ha= +a.onresize;var X=a.background;var S=a.border;var P=a["class"];var ia=a.splitscreen}}this.g=H?H:m.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];X&&this.setBackground(X);S&&w(this.body,"margin",S+(isNaN(S)?"":"px"));this.setTitle(d||"");a=Q;b=R;I=I?U(I,b):0;M=M?U(M,b):0;J=J?U(J,a):0;N=N?U(N,a):0;a-=J+N;b-=I+M;u=u?U(u,a):a/2|0;v=v?U(v,b):b/2|0;A=A?U(A,a):0;B=B?U(B,b):0;h=h?U(h,a,u):J;c=c?U(c,b,v):I;E=E||10;this.g.id=this.id=p||"winbox-"+ ++C;this.g.className="winbox"+(P?" "+("string"=== +typeof P?P:P.join(" ")):"")+(e?" modal":"");this.x=h;this.y=c;this.width=u;this.height=v;this.j=A;this.i=B;this.top=I;this.right=N;this.bottom=M;this.left=J;this.max=this.min=!1;this.onclose=ca;this.onfocus=da;this.onblur=ea;this.onmove=fa;this.onresize=ha;this.l=ia;L?this.maximize():this.move().resize();f?this.mount(f):q?this.body.innerHTML=q:x&&this.setUrl(x);ba?this.hide():this.focus();this.g.winbox=this;ja(this);(t||z).appendChild(this.g)}T["new"]=function(a){return new T(a)}; function U(a,b,c){"string"===typeof a&&("center"===a?a=(b-c)/2|0:"right"===a||"bottom"===a?a=b-c:(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c|0:c));return a} -function T(){y=document.body;y[I="requestFullscreen"]||y[I="msRequestFullscreen"]||y[I="webkitRequestFullscreen"]||y[I="mozRequestFullscreen"]||(I="");N=I&&I.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");n(window,"resize",function(){P=y.clientWidth;Q=y.clientHeight;V()});P=y.clientWidth;Q=y.clientHeight} -function fa(a){W(a,"title");W(a,"n");W(a,"s");W(a,"w");W(a,"e");W(a,"nw");W(a,"ne");W(a,"se");W(a,"sw");n(a.g.getElementsByClassName("wb-min")[0],"click",function(b){r(b);a.minimize()});n(a.g.getElementsByClassName("wb-max")[0],"click",function(b){r(b);a.focus().maximize()});I?n(a.g.getElementsByClassName("wb-full")[0],"click",function(b){r(b);a.focus().fullscreen()}):a.addClass("no-full");n(a.g.getElementsByClassName("wb-close")[0],"click",function(b){r(b);a.close()||(a=null)});n(a.g,"click",function(){a.focus()}, -!1)}function X(a){x.splice(x.indexOf(a),1);V();a.removeClass("min");a.min=!1;a.g.title=""}function V(){for(var a=x.length,b={},c={},e=0,d;eq){a.maximize();return}}a.max||(y.classList.add("wb-drag"),(p=f.touches)&&(p=p[0])?(f=p,n(window,"touchmove",e),n(window,"touchend",d)):(n(window,"mousemove",e),n(window,"mouseup",d)),J=f.pageX,G=f.pageY,a.focus())}}function e(f){r(f);p&&(f=f.touches[0]);var z=f.pageX;f=f.pageY;var q=z-J,t=f-G,w;if("title"===b){a.x+=q;a.y+=t;var A=w=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=q;var K= -1}else if("w"===b||"sw"===b||"nw"===b)a.x+=q,a.width-=q,A=K=1;if("s"===b||"se"===b||"sw"===b){a.height+=t;var u=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=t,a.height-=t,w=u=1}if(K||u)K&&(a.width=Math.max(Math.min(a.width,P-a.x-a.right),150)),u&&(a.height=Math.max(Math.min(a.height,Q-a.y-a.bottom),35)),a.resize();if(A||w)A&&(a.x=Math.max(Math.min(a.x,P-a.width-a.right),a.left)),w&&(a.y=Math.max(Math.min(a.y,Q-a.height-a.bottom),a.top)),a.move();J=z;G=f}function d(f){r(f);y.classList.remove("wb-drag"); -p?(window.removeEventListener("touchmove",e,!0),window.removeEventListener("touchend",d,!0)):(window.removeEventListener("mousemove",e,!0),window.removeEventListener("mouseup",d,!0))}var h=a.g.getElementsByClassName("wb-"+b)[0],p,J,G;n(h,"mousedown",c);n(h,"touchstart",c,{passive:!1})}g=S.prototype;g.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this}; -g.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.h;c&&c.appendChild(b);b.h=a}return this};g.setTitle=function(a){a=this.title=a;this.g.getElementsByClassName("wb-title")[0].firstChild.nodeValue=a;return this};g.setBackground=function(a){v(this.g,"background",a);return this};g.setUrl=function(a){this.body.innerHTML='';return this}; -g.focus=function(){F!==this&&(v(this.g,"z-index",D++),this.addClass("focus"),F&&(F.removeClass("focus"),F.i&&F.i()),F=this,this.l&&this.l());return this};g.hide=function(){return this.addClass("hide")};g.show=function(){return this.removeClass("hide")};g.minimize=function(a){E&&Y();!a&&this.min?(X(this),this.resize().move().focus()):!1===a||this.min||(x.push(this),V(),this.g.title=this.title,this.addClass("min"),this.min=!0);this.max&&(this.removeClass("max"),this.max=!1);return this}; -g.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&X(this),(this.max=!this.max)?this.addClass("max").resize(P-this.left-this.right,Q-this.top-this.bottom,!0).move(this.left,this.top,!0):this.resize().move().removeClass("max");return this};g.fullscreen=function(a){if("undefined"===typeof a||a!==E)this.min&&(this.resize().move(),X(this)),E&&Y()||(this.body[I](),E=!0);return this}; -function Y(){E=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[N](),!0}g.close=function(a){if(this.j&&this.j(a))return!0;this.min&&X(this);this.unmount();this.g.parentNode.removeChild(this.g);F===this&&(F=null)}; -g.move=function(a,b,c){a||0===a?c||(this.x=a?a=U(a,P-this.left-this.right,this.width):0,this.y=b?b=U(b,Q-this.top-this.bottom,this.height):0):(a=this.x,b=this.y,this.v&&(0===a?this.resize(P/2,Q):a===P-this.width&&this.resize(P/2,Q)));v(this.g,"transform","translate("+a+"px,"+b+"px)");this.o&&this.o(a,b);return this}; -g.resize=function(a,b,c){a||0===a?c||(this.width=a?a=U(a,P-this.left-this.right):0,this.height=b?b=U(b,Q-this.top-this.bottom):0):(a=this.width,b=this.height);a=Math.max(a,this.u);b=Math.max(b,this.s);v(this.g,"width",a+"px");v(this.g,"height",b+"px");this.m&&this.m(a,b);return this};g.addClass=function(a){this.g.classList.add(a);return this};g.removeClass=function(a){this.g.classList.remove(a);return this};window.WinBox=S;}).call(this); +function aa(){z=document.body;z[K="requestFullscreen"]||z[K="msRequestFullscreen"]||z[K="webkitRequestFullscreen"]||z[K="mozRequestFullscreen"]||(K="");O=K&&K.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");n(window,"resize",function(){Q=z.clientWidth;R=z.clientHeight;V()});Q=z.clientWidth;R=z.clientHeight} +function ja(a){W(a,"title");W(a,"n");W(a,"s");W(a,"w");W(a,"e");W(a,"nw");W(a,"ne");W(a,"se");W(a,"sw");n(a.g.getElementsByClassName("wb-min")[0],"click",function(b){r(b);a.minimize()});n(a.g.getElementsByClassName("wb-max")[0],"click",function(b){r(b);a.focus().maximize()});K?n(a.g.getElementsByClassName("wb-full")[0],"click",function(b){r(b);a.focus().fullscreen()}):a.addClass("no-full");n(a.g.getElementsByClassName("wb-close")[0],"click",function(b){r(b);a.close()||(a=null)});n(a.g,"click",function(){a.focus()}, +!1)}function Y(a){y.splice(y.indexOf(a),1);V();a.removeClass("min");a.min=!1;a.g.title=""}function V(){for(var a=y.length,b={},c={},e=0,d;ex){a.maximize();return}}a.max||(z.classList.add("wb-drag"),(p=f.touches)&&(p=p[0])?(f=p,n(window,"touchmove",e),n(window,"touchend",d)):(n(window,"mousemove",e),n(window,"mouseup",d)),t=f.pageX,H=f.pageY,a.focus())}}function e(f){r(f);p&&(f=f.touches[0]);var q=f.pageX;f=f.pageY;var x=q-t,u=f-H,v;if("title"===b){a.x+=x;a.y+=u;var A=v=1}else{if("e"=== +b||"se"===b||"ne"===b){a.width+=x;var B=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=x,a.width-=x,A=B=1;if("s"===b||"se"===b||"sw"===b){a.height+=u;var L=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=u,a.height-=u,v=L=1}if(B||L)B&&(a.width=Math.max(Math.min(a.width,Q-a.x-a.right),150)),L&&(a.height=Math.max(Math.min(a.height,R-a.y-a.bottom),0)),a.resize();if(A||v)A&&(a.x=Math.max(Math.min(a.x,Q-a.width-a.right),a.left)),v&&(a.y=Math.max(Math.min(a.y,R-a.height-a.bottom),a.top)),a.move();t=q;H=f}function d(f){r(f); +z.classList.remove("wb-drag");p?(window.removeEventListener("touchmove",e,!0),window.removeEventListener("touchend",d,!0)):(window.removeEventListener("mousemove",e,!0),window.removeEventListener("mouseup",d,!0))}var h=a.g.getElementsByClassName("wb-"+b)[0],p,t,H;n(h,"mousedown",c);n(h,"touchstart",c,{passive:!1})}g=T.prototype;g.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this}; +g.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.h;c&&c.appendChild(b);b.h=a}return this};g.setTitle=function(a){a=this.title=a;this.g.getElementsByClassName("wb-title")[0].firstChild.nodeValue=a;return this};g.setBackground=function(a){w(this.g,"background",a);return this};g.setUrl=function(a){this.body.innerHTML='';return this}; +g.focus=function(){G!==this&&(w(this.g,"z-index",E++),this.addClass("focus"),G&&(G.removeClass("focus"),G.onblur&&G.onblur()),G=this,this.onfocus&&this.onfocus());return this};g.hide=function(){return this.addClass("hide")};g.show=function(){return this.removeClass("hide")};g.minimize=function(a){F&&Z();!a&&this.min?(Y(this),this.resize().move().focus()):!1===a||this.min||(y.push(this),V(),this.g.title=this.title,this.addClass("min"),this.min=!0);this.max&&(this.removeClass("max"),this.max=!1);return this}; +g.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&Y(this),(this.max=!this.max)?this.addClass("max").resize(Q-this.left-this.right,R-this.top-this.bottom,!0).move(this.left,this.top,!0):this.resize().move().removeClass("max");return this};g.fullscreen=function(a){if("undefined"===typeof a||a!==F)this.min&&(this.resize().move(),Y(this)),F&&Z()||(this.body[K](),F=!0);return this}; +function Z(){F=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[O](),!0}g.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&Y(this);this.unmount();this.g.parentNode.removeChild(this.g);G===this&&(G=null)}; +g.move=function(a,b,c){a||0===a?c||(this.x=a?a=U(a,Q-this.left-this.right,this.width):0,this.y=b?b=U(b,R-this.top-this.bottom,this.height):0):(a=this.x,b=this.y,this.l&&(0===a?this.resize(Q/2,R):a===Q-this.width&&this.resize(Q/2,R)));w(this.g,"transform","translate("+a+"px,"+b+"px)");this.onmove&&this.onmove(a,b);return this}; +g.resize=function(a,b,c){a||0===a?c||(this.width=a?a=U(a,Q-this.left-this.right):0,this.height=b?b=U(b,R-this.top-this.bottom):0):(a=this.width,b=this.height);a=Math.max(a,this.j);b=Math.max(b,this.i);w(this.g,"width",a+"px");w(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this};g.addClass=function(a){this.g.classList.add(a);return this};g.removeClass=function(a){this.g.classList.remove(a);return this};window.WinBox=T;}).call(this); diff --git a/package.json b/package.json index 797c84a..cdf70c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "winbox", - "version": "0.2.01", + "version": "0.2.1", "description": "Modern HTML5 window manager for the web.", "homepage": "https://nextapps-de.github.io/winbox/", "author": "Thomas Wilkerling", diff --git a/src/css/winbox.css b/src/css/winbox.css index c4303a4..cdebd2c 100644 --- a/src/css/winbox.css +++ b/src/css/winbox.css @@ -35,6 +35,7 @@ width: 100%; color: #fff; overflow: hidden; + z-index: 1; } .wb-body { position: absolute; @@ -224,7 +225,7 @@ body.wb-drag iframe { right: -100vw; bottom: -100vh; background: #0d1117; - animation: fade-in 0.2s ease-out forwards; + animation: wb-fade-in 0.2s ease-out forwards; z-index: -1; } .winbox.modal .wb-min, @@ -232,7 +233,7 @@ body.wb-drag iframe { .winbox.modal .wb-full { display: none; } -@keyframes fade-in { +@keyframes wb-fade-in { 0% { opacity: 0; } diff --git a/src/css/winbox.less b/src/css/winbox.less index 79d0e9f..5a6981d 100644 --- a/src/css/winbox.less +++ b/src/css/winbox.less @@ -40,6 +40,7 @@ width: 100%; color: #fff; overflow: hidden; + z-index: 1; } .wb-body { @@ -57,6 +58,7 @@ /* always hide top border visually */ margin-top: 0 !important; contain: strict; + //content-visibility: auto; } .wb-title{ @@ -260,7 +262,7 @@ body.wb-drag iframe { right: -100vw; bottom: -100vh; background: #0d1117; - animation: fade-in 0.2s ease-out forwards; + animation: wb-fade-in 0.2s ease-out forwards; z-index: -1; } .wb-min, @@ -270,7 +272,7 @@ body.wb-drag iframe { } } -@keyframes fade-in { +@keyframes wb-fade-in { 0%{ opacity: 0; } diff --git a/src/js/winbox.js b/src/js/winbox.js index 8f6e33a..31deeee 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -447,7 +447,7 @@ function addWindowListener(self, dir){ } else { - if(dir === "title" && !this.hasClass(self.dom, "no-max")){ + if(dir === "title" && !self.hasClass("no-max")){ const now = Date.now(); const diff = now - dblclick_timer; @@ -984,6 +984,7 @@ WinBox.prototype.removeClass = function(classname){ return this; }; + /** * @param {string} classname * @this WinBox @@ -991,6 +992,5 @@ WinBox.prototype.removeClass = function(classname){ WinBox.prototype.hasClass = function(classname){ - hasClass(this.dom, classname); - return this; + return hasClass(this.dom, classname); };