From 2503b9935e3ecc82e85f80d695e4f7d42770e88a Mon Sep 17 00:00:00 2001 From: Thomas Wilkerling Date: Tue, 6 Sep 2022 11:58:01 +0200 Subject: [PATCH] use passive listeners --- README.md | 24 ++++++++++---------- dist/js/winbox.min.js | 46 ++++++++++++++++++------------------- dist/winbox.bundle.min.js | 48 +++++++++++++++++++-------------------- package.json | 2 +- src/js/winbox.js | 29 ++++++++++++----------- 5 files changed, 74 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 8984bcf..a283821 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,8 @@ __Get Latest Stable Build (Recommended):__ winbox.bundle.min.js - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.5/dist/winbox.bundle.min.js + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.6/dist/winbox.bundle.min.js @@ -44,14 +44,14 @@ __Get Latest Stable Build (Recommended):__ winbox.min.js - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.5/dist/js/winbox.min.js + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.6/dist/js/winbox.min.js winbox.min.css - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.5/dist/css/winbox.min.css + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.6/dist/css/winbox.min.css @@ -60,25 +60,25 @@ __Get Latest Stable Build (Recommended):__ ES6 Modules - Download + Download The /src/js folder of this Github repository LESS Files (source) - Download + Download The /src/css folder of this Github repository winbox.css (compiled) - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.5/src/css/winbox.css + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.6/src/css/winbox.css src.zip - Download + Download Download all source files including image original resources. @@ -152,7 +152,7 @@ You can also load modules via CDN, e.g.: ```html ``` diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js index b018935..40a025b 100644 --- a/dist/js/winbox.min.js +++ b/dist/js/winbox.min.js @@ -1,29 +1,29 @@ /** - * WinBox.js v0.2.5 + * WinBox.js v0.2.6 * Copyright 2022 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var e,aa=document.createElement("div");aa.innerHTML="
";function k(a,b,c){a&&a.addEventListener(b,c,!1)}function l(a,b){var c=window;c&&c.removeEventListener(a,b,!1)}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 w=[],x,ba=0,y=10,A,B,I,da,J,K; -function O(a,b){if(!(this instanceof O))return new O(a);x||ea();var c,f,d,m;if(a){if(b){var g=a;a=b}if("string"===typeof a)g=a;else{var F=a.id;var u=a.index;var P=a.root;var h=a.template;g=g||a.title;var t=a.icon;var z=a.mount;var G=a.html;var V=a.url;var C=a.width;var D=a.height;var E=a.minwidth;var q=a.minheight;var n=a.maxwidth;var p=a.maxheight;var H=a.autosize;var ha=a.min;var ia=a.max;var ja=a.hidden;(d=a.modal)&&(c=f="center");c=a.x||c;f=a.y||f;var L=a.top;var M=a.left;var Q=a.bottom;var R= -a.right;var ca=a.background;var N=a.border;var S=a.header;var W=a["class"];var ka=a.onclose;var la=a.onfocus;var ma=a.onblur;var na=a.onmove;var oa=a.onresize;var pa=a.onfullscreen;var qa=a.onmaximize;var ra=a.onminimize;var sa=a.onrestore;var ta=a.onhide;var ua=a.onshow;var va=a.onload}}this.g=(h||aa).cloneNode(!0);this.g.id=this.id=F||"winbox-"+ ++ba;this.g.className="winbox"+(W?" "+("string"===typeof W?W:W.join(" ")):"")+(d?" modal":"");this.g.winbox=this;this.window=this.g;this.body=this.g.getElementsByClassName("wb-body")[0]; -this.h=S||35;ca&&this.setBackground(ca);N?v(this.body,"margin",N+(isNaN(N)?"":"px")):N=0;S&&(b=this.g.getElementsByClassName("wb-header")[0],v(b,"height",S+"px"),v(b,"line-height",S+"px"),v(this.body,"top",S+"px"));g&&this.setTitle(g);t&&this.setIcon(t);z?this.mount(z):G?this.body.innerHTML=G:V&&this.setUrl(V,va);L=L?T(L,K):0;Q=Q?T(Q,K):0;M=M?T(M,J):0;R=R?T(R,J):0;g=J-M-R;t=K-L-Q;n=n?T(n,g):g;p=p?T(p,t):t;E=E?T(E,n):150;q=q?T(q,p):this.h;H?((P||x).appendChild(this.body),C=Math.max(Math.min(this.body.clientWidth+ -2*N+1,n),E),D=Math.max(Math.min(this.body.clientHeight+this.h+N+1,p),q),this.g.appendChild(this.body)):(C=C?T(C,n):Math.max(n/2,E)|0,D=D?T(D,p):Math.max(p/2,q)|0);c=c?T(c,g,C):M;f=f?T(f,t,D):L;this.x=c;this.y=f;this.width=C;this.height=D;this.o=E;this.m=q;this.l=n;this.j=p;this.top=L;this.right=R;this.bottom=Q;this.left=M;this.index=u;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose=ka;this.onfocus=la;this.onblur=ma;this.onmove=na;this.onresize=oa;this.onfullscreen=pa;this.onmaximize= -qa;this.onminimize=ra;this.onrestore=sa;this.onhide=ta;this.onshow=ua;ia?this.maximize():ha?this.minimize():this.resize().move();if(ja)this.hide();else if(this.focus(),u||0===u)this.index=u,v(this.g,"z-index",u),u>y&&(y=u);fa(this);(P||x).appendChild(this.g);(m=a.oncreate)&&m.call(this,a)}O["new"]=function(a){return new O(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 ea(){x=document.body;x[I="requestFullscreen"]||x[I="msRequestFullscreen"]||x[I="webkitRequestFullscreen"]||x[I="mozRequestFullscreen"]||(I="");da=I&&I.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");k(window,"resize",function(){wa();U()});wa()} -function fa(a){X(a,"drag");X(a,"n");X(a,"s");X(a,"w");X(a,"e");X(a,"nw");X(a,"ne");X(a,"se");X(a,"sw");k(a.g.getElementsByClassName("wb-min")[0],"click",function(b){r(b);a.min?a.focus().restore():a.blur().minimize()});k(a.g.getElementsByClassName("wb-max")[0],"click",function(){a.max?a.restore():a.maximize()});I?k(a.g.getElementsByClassName("wb-full")[0],"click",function(){a.fullscreen()}):a.addClass("no-full");k(a.g.getElementsByClassName("wb-close")[0],"click",function(b){r(b);a.close()||(a=null)}); -k(a.g,"click",function(){a.focus()})}function Y(a){w.splice(w.indexOf(a),1);U();a.removeClass("min");a.min=!1;a.g.title=""}function U(){for(var a=w.length,b={},c={},f=0,d;fz){a.max?a.restore():a.maximize();return}}a.max||a.min||(x.classList.add("wb-lock"),(g=h.touches)&&(g=g[0])?(h=g,k(window,"touchmove",f),k(window,"touchend",d)):(k(window,"mousemove",f),k(window,"mouseup",d)),F=h.pageX,u=h.pageY)}function f(h){r(h);g&&(h=h.touches[0]);var t=h.pageX;h=h.pageY;var z=t-F,G=h-u,V=a.width,C=a.height,D=a.x,E=a.y,q;if("drag"===b){a.x+=z;a.y+=G;var n= -q=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=z;var p=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=z,a.width-=z,n=p=1;if("s"===b||"se"===b||"sw"===b){a.height+=G;var H=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=G,a.height-=G,q=H=1}p&&(a.width=Math.max(Math.min(a.width,a.l,J-a.x-a.right),a.o),p=a.width!==V);H&&(a.height=Math.max(Math.min(a.height,a.j,K-a.y-a.bottom),a.m),H=a.height!==C);(p||H)&&a.resize();n&&(a.x=Math.max(Math.min(a.x,J-a.width-a.right),a.left),n=a.x!==D);q&&(a.y=Math.max(Math.min(a.y, -K-a.height-a.bottom),a.top),q=a.y!==E);(n||q)&&a.move();if(p||n)F=t;if(H||q)u=h}function d(h){r(h);x.classList.remove("wb-lock");g?(l("touchmove",f),l("touchend",d)):(l("mousemove",f),l("mouseup",d))}var m=a.g.getElementsByClassName("wb-"+b)[0];if(m){var g,F,u,P=0;k(m,"mousedown",c);k(m,"touchstart",c)}}function wa(){var a=document.documentElement;J=a.clientWidth;K=a.clientHeight}e=O.prototype; -e.mount=function(a){this.unmount();a.i||(a.i=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.i;c&&c.appendChild(b);b.i=a}return this};e.setTitle=function(a){var b=this.g.getElementsByClassName("wb-title")[0];a=this.title=a;var c=b.firstChild;c?c.nodeValue=a:b.textContent=a;return this}; -e.setIcon=function(a){var b=this.g.getElementsByClassName("wb-icon")[0];v(b,"background-image","url("+a+")");v(b,"display","inline-block");return this};e.setBackground=function(a){v(this.g,"background",a);return this};e.setUrl=function(a,b){var c=this.body.firstChild;c&&"iframe"===c.tagName.toLowerCase()?c.src=a:(this.body.innerHTML='',b&&(this.body.firstChild.onload=b));return this}; -e.focus=function(a){if(!1===a)return this.blur();B!==this&&this.g&&(B&&B.blur(),v(this.g,"z-index",++y),this.index=y,this.addClass("focus"),B=this,this.focused=!0,this.onfocus&&this.onfocus());return this};e.blur=function(a){if(!1===a)return this.focus();B===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),B=null);return this};e.hide=function(a){if(!1===a)return this.show();if(!this.hidden)return this.onhide&&this.onhide(),this.hidden=!0,this.addClass("hide")}; -e.show=function(a){if(!1===a)return this.hide();if(this.hidden)return this.onshow&&this.onshow(),this.hidden=!1,this.removeClass("hide")};e.minimize=function(a){if(!1===a)return this.restore();A&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(w.push(this),U(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this}; -e.restore=function(){A&&Z();this.min&&(Y(this),this.resize().move(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move(),this.onrestore&&this.onrestore());return this};e.maximize=function(a){if(!1===a)return this.restore();A&&Z();this.min&&Y(this);this.max||(this.addClass("max").resize(J-this.left-this.right,K-this.top-this.bottom,!0).move(this.left,this.top,!0),this.max=!0,this.onmaximize&&this.onmaximize());return this}; -e.fullscreen=function(a){this.min&&(Y(this),this.resize().move());if(!A||!Z())this.body[I](),A=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this};function Z(){A.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[da](),!0} -e.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&Y(this);this.unmount();this.g.remove();this.g.textContent="";this.g=this.body=this.g.winbox=null;B===this&&(B=null)};e.move=function(a,b,c){a||0===a?c||(this.x=a?a=T(a,J-this.left-this.right,this.width):0,this.y=b?b=T(b,K-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);v(this.g,"left",a+"px");v(this.g,"top",b+"px");this.onmove&&this.onmove(a,b);return this}; -e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=T(a,this.l):0,this.height=b?b=T(b,this.j):0,a=Math.max(a,this.o),b=Math.max(b,this.m)):(a=this.width,b=this.height);v(this.g,"width",a+"px");v(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this}; -e.addControl=function(a){var b=a["class"],c=a.image,f=a.click;a=a.index;var d=document.createElement("span"),m=this.g.getElementsByClassName("wb-control")[0],g=this;b&&(d.className=b);c&&v(d,"background-image","url("+c+")");f&&(d.onclick=function(F){f.call(this,F,g)});m.insertBefore(d,m.childNodes[a||0]);return this};e.removeControl=function(a){(a=this.g.getElementsByClassName(a)[0])&&a.remove();return this};e.addClass=function(a){this.g.classList.add(a);return this}; -e.removeClass=function(a){this.g.classList.remove(a);return this};e.toggleClass=function(a){return this.g.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=O;}).call(this); +(function(){'use strict';var f,aa=document.createElement("div");aa.innerHTML="
";function k(a,b,c,e){a&&a.addEventListener(b,c,e||!1)}function m(a,b,c){var e=window;e&&e.removeEventListener(a,b,c||!1)}function p(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function r(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var w=[],x={capture:!0,passive:!0},y,ba=0,z=10,A,J,K,da,L,P; +function Q(a,b){if(!(this instanceof Q))return new Q(a);y||ea();var c;if(a){if(b){var e=a;a=b}if("string"===typeof a)e=a;else{var d=a.id;var g=a.index;var l=a.root;var F=a.template;e=e||a.title;var t=a.icon;var R=a.mount;var h=a.html;var B=a.url;var n=a.width;var q=a.height;var C=a.minwidth;var D=a.minheight;var u=a.maxwidth;var v=a.maxheight;var E=a.autosize;var G=a.min;var H=a.max;var I=a.hidden;var ca=a.modal;var X=a.x||(ca?"center":0);var Y=a.y||(ca?"center":0);var M=a.top;var N=a.left;var S= +a.bottom;var T=a.right;var ha=a.background;var O=a.border;var U=a.header;var Z=a["class"];var la=a.onclose;var ma=a.onfocus;var na=a.onblur;var oa=a.onmove;var pa=a.onresize;var qa=a.onfullscreen;var ra=a.onmaximize;var sa=a.onminimize;var ta=a.onrestore;var ua=a.onhide;var va=a.onshow;var wa=a.onload}}this.g=(F||aa).cloneNode(!0);this.g.id=this.id=d||"winbox-"+ ++ba;this.g.className="winbox"+(Z?" "+("string"===typeof Z?Z:Z.join(" ")):"")+(ca?" modal":"");this.g.winbox=this;this.window=this.g;this.body= +this.g.getElementsByClassName("wb-body")[0];this.h=U||35;ha&&this.setBackground(ha);O?r(this.body,"margin",O+(isNaN(O)?"":"px")):O=0;U&&(b=this.g.getElementsByClassName("wb-header")[0],r(b,"height",U+"px"),r(b,"line-height",U+"px"),r(this.body,"top",U+"px"));e&&this.setTitle(e);t&&this.setIcon(t);R?this.mount(R):h?this.body.innerHTML=h:B&&this.setUrl(B,wa);M=M?V(M,P):0;S=S?V(S,P):0;N=N?V(N,L):0;T=T?V(T,L):0;e=L-N-T;t=P-M-S;u=u?V(u,e):e;v=v?V(v,t):t;C=C?V(C,u):150;D=D?V(D,v):this.h;E?((l||y).appendChild(this.body), +n=Math.max(Math.min(this.body.clientWidth+2*O+1,u),C),q=Math.max(Math.min(this.body.clientHeight+this.h+O+1,v),D),this.g.appendChild(this.body)):(n=n?V(n,u):Math.max(u/2,C)|0,q=q?V(q,v):Math.max(v/2,D)|0);X=X?V(X,e,n):N;Y=Y?V(Y,t,q):M;this.x=X;this.y=Y;this.width=n;this.height=q;this.o=C;this.m=D;this.l=u;this.j=v;this.top=M;this.right=T;this.bottom=S;this.left=N;this.index=g;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose=la;this.onfocus=ma;this.onblur=na;this.onmove=oa;this.onresize= +pa;this.onfullscreen=qa;this.onmaximize=ra;this.onminimize=sa;this.onrestore=ta;this.onhide=ua;this.onshow=va;H?this.maximize():G?this.minimize():this.resize().move();if(I)this.hide();else if(this.focus(),g||0===g)this.index=g,r(this.g,"z-index",g),g>z&&(z=g);fa(this);(l||y).appendChild(this.g);(c=a.oncreate)&&c.call(this,a)}Q["new"]=function(a){return new Q(a)}; +function V(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 ea(){y=document.body;y[K="requestFullscreen"]||y[K="msRequestFullscreen"]||y[K="webkitRequestFullscreen"]||y[K="mozRequestFullscreen"]||(K="");da=K&&K.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");k(window,"resize",function(){ia();ja()});ia()} +function fa(a){W(a,"drag");W(a,"n");W(a,"s");W(a,"w");W(a,"e");W(a,"nw");W(a,"ne");W(a,"se");W(a,"sw");k(a.g.getElementsByClassName("wb-min")[0],"click",function(b){p(b);a.min?a.focus().restore():a.blur().minimize()});k(a.g.getElementsByClassName("wb-max")[0],"click",function(){a.max?a.restore():a.maximize()});K?k(a.g.getElementsByClassName("wb-full")[0],"click",function(){a.fullscreen()}):a.addClass("no-full");k(a.g.getElementsByClassName("wb-close")[0],"click",function(b){p(b);a.close()||(a=null)}); +k(a.g,"click",function(){a.focus()})}function ka(a){w.splice(w.indexOf(a),1);ja();a.removeClass("min");a.min=!1;a.g.title=""}function ja(){for(var a=w.length,b={},c={},e=0,d;en){a.max?a.restore():a.maximize();return}}a.max||a.min||(y.classList.add("wb-lock"),(l=h.touches)&&(l=l[0])?(h=l,k(window,"touchmove",e,x),k(window,"touchend",d,x)):(k(window,"mousemove",e),k(window,"mouseup",d)),F=h.pageX,t=h.pageY)}function e(h){p(h);l&&(h=h.touches[0]);var B=h.pageX;h=h.pageY;var n=B-F,q=h-t,C=a.width,D=a.height,u=a.x,v=a.y,E;if("drag"===b){a.x+=n;a.y+=q;var G= +E=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=n;var H=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=n,a.width-=n,G=H=1;if("s"===b||"se"===b||"sw"===b){a.height+=q;var I=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=q,a.height-=q,E=I=1}H&&(a.width=Math.max(Math.min(a.width,a.l,L-a.x-a.right),a.o),H=a.width!==C);I&&(a.height=Math.max(Math.min(a.height,a.j,P-a.y-a.bottom),a.m),I=a.height!==D);(H||I)&&a.resize();G&&(a.x=Math.max(Math.min(a.x,L-a.width-a.right),a.left),G=a.x!==u);E&&(a.y=Math.max(Math.min(a.y, +P-a.height-a.bottom),a.top),E=a.y!==v);(G||E)&&a.move();if(H||G)F=B;if(I||E)t=h}function d(h){p(h);y.classList.remove("wb-lock");l?(m("touchmove",e,x),m("touchend",d,x)):(m("mousemove",e),m("mouseup",d))}var g=a.g.getElementsByClassName("wb-"+b)[0];if(g){var l,F,t,R=0;k(g,"mousedown",c);k(g,"touchstart",c,x)}}function ia(){var a=document.documentElement;L=a.clientWidth;P=a.clientHeight}f=Q.prototype; +f.mount=function(a){this.unmount();a.i||(a.i=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};f.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.i;c&&c.appendChild(b);b.i=a}return this};f.setTitle=function(a){var b=this.g.getElementsByClassName("wb-title")[0];a=this.title=a;var c=b.firstChild;c?c.nodeValue=a:b.textContent=a;return this}; +f.setIcon=function(a){var b=this.g.getElementsByClassName("wb-icon")[0];r(b,"background-image","url("+a+")");r(b,"display","inline-block");return this};f.setBackground=function(a){r(this.g,"background",a);return this};f.setUrl=function(a,b){var c=this.body.firstChild;c&&"iframe"===c.tagName.toLowerCase()?c.src=a:(this.body.innerHTML='',b&&(this.body.firstChild.onload=b));return this}; +f.focus=function(a){if(!1===a)return this.blur();J!==this&&this.g&&(J&&J.blur(),r(this.g,"z-index",++z),this.index=z,this.addClass("focus"),J=this,this.focused=!0,this.onfocus&&this.onfocus());return this};f.blur=function(a){if(!1===a)return this.focus();J===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),J=null);return this};f.hide=function(a){if(!1===a)return this.show();if(!this.hidden)return this.onhide&&this.onhide(),this.hidden=!0,this.addClass("hide")}; +f.show=function(a){if(!1===a)return this.hide();if(this.hidden)return this.onshow&&this.onshow(),this.hidden=!1,this.removeClass("hide")};f.minimize=function(a){if(!1===a)return this.restore();A&&xa();this.max&&(this.removeClass("max"),this.max=!1);this.min||(w.push(this),ja(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this}; +f.restore=function(){A&&xa();this.min&&(ka(this),this.resize().move(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move(),this.onrestore&&this.onrestore());return this};f.maximize=function(a){if(!1===a)return this.restore();A&&xa();this.min&&ka(this);this.max||(this.addClass("max").resize(L-this.left-this.right,P-this.top-this.bottom,!0).move(this.left,this.top,!0),this.max=!0,this.onmaximize&&this.onmaximize());return this}; +f.fullscreen=function(a){this.min&&(ka(this),this.resize().move());if(!A||!xa())this.body[K](),A=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this};function xa(){A.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[da](),!0} +f.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&ka(this);this.unmount();this.g.remove();this.g.textContent="";this.g=this.body=this.g.winbox=null;J===this&&(J=null)};f.move=function(a,b,c){a||0===a?c||(this.x=a?a=V(a,L-this.left-this.right,this.width):0,this.y=b?b=V(b,P-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);r(this.g,"left",a+"px");r(this.g,"top",b+"px");this.onmove&&this.onmove(a,b);return this}; +f.resize=function(a,b,c){a||0===a?c||(this.width=a?a=V(a,this.l):0,this.height=b?b=V(b,this.j):0,a=Math.max(a,this.o),b=Math.max(b,this.m)):(a=this.width,b=this.height);r(this.g,"width",a+"px");r(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this}; +f.addControl=function(a){var b=a["class"],c=a.image,e=a.click;a=a.index;var d=document.createElement("span"),g=this.g.getElementsByClassName("wb-control")[0],l=this;b&&(d.className=b);c&&r(d,"background-image","url("+c+")");e&&(d.onclick=function(F){e.call(this,F,l)});g.insertBefore(d,g.childNodes[a||0]);return this};f.removeControl=function(a){(a=this.g.getElementsByClassName(a)[0])&&a.remove();return this};f.addClass=function(a){this.g.classList.add(a);return this}; +f.removeClass=function(a){this.g.classList.remove(a);return this};f.toggleClass=function(a){return this.g.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=Q;}).call(this); diff --git a/dist/winbox.bundle.min.js b/dist/winbox.bundle.min.js index 94d6647..f3cf17e 100644 --- a/dist/winbox.bundle.min.js +++ b/dist/winbox.bundle.min.js @@ -1,30 +1,30 @@ /** - * WinBox.js v0.2.5 (Bundle) + * WinBox.js v0.2.6 (Bundle) * Copyright 2022 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var e,aa=document.createElement("style");aa.innerHTML="@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.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,left .3s,top .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;line-height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body{top:35px;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict;z-index:0}.wb-control *,.wb-icon{background-repeat:no-repeat}body>.wb-body{position:relative;display:inline-block;visibility:hidden;contain:none}.wb-drag{height:100%;padding-left:10px;cursor:move}.wb-title{font-family:Arial,sans-serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-icon{display:none;width:20px;height:100%;margin:-1px 8px 0-3px;float:left;background-size:100%;background-position:center}.wb-e,.wb-w{width:10px;top:0}.wb-n,.wb-s{left:0;height:10px;position:absolute}.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e{position:absolute;right:-5px;bottom:0;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{position:absolute;bottom:0;cursor:w-resize;z-index:2}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;position:absolute}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-se,.wb-sw{bottom:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize;z-index:2}.wb-control{float:right;height:100%;max-width:100%;text-align:center}.wb-control *{display:inline-block;width:30px;height:100%;max-width:100%;background-position:center;cursor:pointer}.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,.wb-body .wb-hide,.wb-show,.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-drag,.winbox.min .wb-drag{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center calc(50% + 6px)}.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;background-position:5px center}.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-drag,body.wb-lock iframe{pointer-events:none}.winbox.max{box-shadow:none}.winbox.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}body.wb-lock .winbox{will-change:left,top,width,height;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:-50vh;left:-50vw;right:-50vw;bottom:-50vh;background:#0d1117;animation:wb-fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-shadow{box-shadow:none}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert}"; -var k=document.getElementsByTagName("head")[0];k.firstChild?k.insertBefore(aa,k.firstChild):k.appendChild(aa);var ba=document.createElement("div");ba.innerHTML="
";function l(a,b,c){a&&a.addEventListener(b,c,!1)}function r(a,b){var c=window;c&&c.removeEventListener(a,b,!1)}function v(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 x=[],y,ca=0,A=10,B,I,J,da,K,O; -function T(a,b){if(!(this instanceof T))return new T(a);y||fa();var c,f,d,m;if(a){if(b){var g=a;a=b}if("string"===typeof a)g=a;else{var F=a.id;var u=a.index;var P=a.root;var h=a.template;g=g||a.title;var t=a.icon;var z=a.mount;var G=a.html;var W=a.url;var C=a.width;var D=a.height;var E=a.minwidth;var q=a.minheight;var n=a.maxwidth;var p=a.maxheight;var H=a.autosize;var ja=a.min;var ka=a.max;var la=a.hidden;(d=a.modal)&&(c=f="center");c=a.x||c;f=a.y||f;var L=a.top;var M=a.left;var Q=a.bottom;var R= -a.right;var ea=a.background;var N=a.border;var S=a.header;var X=a["class"];var ma=a.onclose;var na=a.onfocus;var oa=a.onblur;var pa=a.onmove;var qa=a.onresize;var ra=a.onfullscreen;var sa=a.onmaximize;var ta=a.onminimize;var ua=a.onrestore;var va=a.onhide;var wa=a.onshow;var xa=a.onload}}this.g=(h||ba).cloneNode(!0);this.g.id=this.id=F||"winbox-"+ ++ca;this.g.className="winbox"+(X?" "+("string"===typeof X?X:X.join(" ")):"")+(d?" modal":"");this.g.winbox=this;this.window=this.g;this.body=this.g.getElementsByClassName("wb-body")[0]; -this.h=S||35;ea&&this.setBackground(ea);N?w(this.body,"margin",N+(isNaN(N)?"":"px")):N=0;S&&(b=this.g.getElementsByClassName("wb-header")[0],w(b,"height",S+"px"),w(b,"line-height",S+"px"),w(this.body,"top",S+"px"));g&&this.setTitle(g);t&&this.setIcon(t);z?this.mount(z):G?this.body.innerHTML=G:W&&this.setUrl(W,xa);L=L?U(L,O):0;Q=Q?U(Q,O):0;M=M?U(M,K):0;R=R?U(R,K):0;g=K-M-R;t=O-L-Q;n=n?U(n,g):g;p=p?U(p,t):t;E=E?U(E,n):150;q=q?U(q,p):this.h;H?((P||y).appendChild(this.body),C=Math.max(Math.min(this.body.clientWidth+ -2*N+1,n),E),D=Math.max(Math.min(this.body.clientHeight+this.h+N+1,p),q),this.g.appendChild(this.body)):(C=C?U(C,n):Math.max(n/2,E)|0,D=D?U(D,p):Math.max(p/2,q)|0);c=c?U(c,g,C):M;f=f?U(f,t,D):L;this.x=c;this.y=f;this.width=C;this.height=D;this.o=E;this.m=q;this.l=n;this.j=p;this.top=L;this.right=R;this.bottom=Q;this.left=M;this.index=u;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose=ma;this.onfocus=na;this.onblur=oa;this.onmove=pa;this.onresize=qa;this.onfullscreen=ra;this.onmaximize= -sa;this.onminimize=ta;this.onrestore=ua;this.onhide=va;this.onshow=wa;ka?this.maximize():ja?this.minimize():this.resize().move();if(la)this.hide();else if(this.focus(),u||0===u)this.index=u,w(this.g,"z-index",u),u>A&&(A=u);ha(this);(P||y).appendChild(this.g);(m=a.oncreate)&&m.call(this,a)}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 fa(){y=document.body;y[J="requestFullscreen"]||y[J="msRequestFullscreen"]||y[J="webkitRequestFullscreen"]||y[J="mozRequestFullscreen"]||(J="");da=J&&J.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");l(window,"resize",function(){ia();ya()});ia()} -function ha(a){V(a,"drag");V(a,"n");V(a,"s");V(a,"w");V(a,"e");V(a,"nw");V(a,"ne");V(a,"se");V(a,"sw");l(a.g.getElementsByClassName("wb-min")[0],"click",function(b){v(b);a.min?a.focus().restore():a.blur().minimize()});l(a.g.getElementsByClassName("wb-max")[0],"click",function(){a.max?a.restore():a.maximize()});J?l(a.g.getElementsByClassName("wb-full")[0],"click",function(){a.fullscreen()}):a.addClass("no-full");l(a.g.getElementsByClassName("wb-close")[0],"click",function(b){v(b);a.close()||(a=null)}); -l(a.g,"click",function(){a.focus()})}function Y(a){x.splice(x.indexOf(a),1);ya();a.removeClass("min");a.min=!1;a.g.title=""}function ya(){for(var a=x.length,b={},c={},f=0,d;fz){a.max?a.restore():a.maximize();return}}a.max||a.min||(y.classList.add("wb-lock"),(g=h.touches)&&(g=g[0])?(h=g,l(window,"touchmove",f),l(window,"touchend",d)):(l(window,"mousemove",f),l(window,"mouseup",d)),F=h.pageX,u=h.pageY)}function f(h){v(h);g&&(h=h.touches[0]);var t=h.pageX;h=h.pageY;var z=t-F,G=h-u,W=a.width,C=a.height,D=a.x,E=a.y,q;if("drag"===b){a.x+=z;a.y+=G;var n= -q=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=z;var p=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=z,a.width-=z,n=p=1;if("s"===b||"se"===b||"sw"===b){a.height+=G;var H=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=G,a.height-=G,q=H=1}p&&(a.width=Math.max(Math.min(a.width,a.l,K-a.x-a.right),a.o),p=a.width!==W);H&&(a.height=Math.max(Math.min(a.height,a.j,O-a.y-a.bottom),a.m),H=a.height!==C);(p||H)&&a.resize();n&&(a.x=Math.max(Math.min(a.x,K-a.width-a.right),a.left),n=a.x!==D);q&&(a.y=Math.max(Math.min(a.y, -O-a.height-a.bottom),a.top),q=a.y!==E);(n||q)&&a.move();if(p||n)F=t;if(H||q)u=h}function d(h){v(h);y.classList.remove("wb-lock");g?(r("touchmove",f),r("touchend",d)):(r("mousemove",f),r("mouseup",d))}var m=a.g.getElementsByClassName("wb-"+b)[0];if(m){var g,F,u,P=0;l(m,"mousedown",c);l(m,"touchstart",c)}}function ia(){var a=document.documentElement;K=a.clientWidth;O=a.clientHeight}e=T.prototype; -e.mount=function(a){this.unmount();a.i||(a.i=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.i;c&&c.appendChild(b);b.i=a}return this};e.setTitle=function(a){var b=this.g.getElementsByClassName("wb-title")[0];a=this.title=a;var c=b.firstChild;c?c.nodeValue=a:b.textContent=a;return this}; -e.setIcon=function(a){var b=this.g.getElementsByClassName("wb-icon")[0];w(b,"background-image","url("+a+")");w(b,"display","inline-block");return this};e.setBackground=function(a){w(this.g,"background",a);return this};e.setUrl=function(a,b){var c=this.body.firstChild;c&&"iframe"===c.tagName.toLowerCase()?c.src=a:(this.body.innerHTML='',b&&(this.body.firstChild.onload=b));return this}; -e.focus=function(a){if(!1===a)return this.blur();I!==this&&this.g&&(I&&I.blur(),w(this.g,"z-index",++A),this.index=A,this.addClass("focus"),I=this,this.focused=!0,this.onfocus&&this.onfocus());return this};e.blur=function(a){if(!1===a)return this.focus();I===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),I=null);return this};e.hide=function(a){if(!1===a)return this.show();if(!this.hidden)return this.onhide&&this.onhide(),this.hidden=!0,this.addClass("hide")}; -e.show=function(a){if(!1===a)return this.hide();if(this.hidden)return this.onshow&&this.onshow(),this.hidden=!1,this.removeClass("hide")};e.minimize=function(a){if(!1===a)return this.restore();B&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(x.push(this),ya(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this}; -e.restore=function(){B&&Z();this.min&&(Y(this),this.resize().move(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move(),this.onrestore&&this.onrestore());return this};e.maximize=function(a){if(!1===a)return this.restore();B&&Z();this.min&&Y(this);this.max||(this.addClass("max").resize(K-this.left-this.right,O-this.top-this.bottom,!0).move(this.left,this.top,!0),this.max=!0,this.onmaximize&&this.onmaximize());return this}; -e.fullscreen=function(a){this.min&&(Y(this),this.resize().move());if(!B||!Z())this.body[J](),B=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this};function Z(){B.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[da](),!0} -e.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&Y(this);this.unmount();this.g.remove();this.g.textContent="";this.g=this.body=this.g.winbox=null;I===this&&(I=null)};e.move=function(a,b,c){a||0===a?c||(this.x=a?a=U(a,K-this.left-this.right,this.width):0,this.y=b?b=U(b,O-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);w(this.g,"left",a+"px");w(this.g,"top",b+"px");this.onmove&&this.onmove(a,b);return this}; -e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=U(a,this.l):0,this.height=b?b=U(b,this.j):0,a=Math.max(a,this.o),b=Math.max(b,this.m)):(a=this.width,b=this.height);w(this.g,"width",a+"px");w(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this}; -e.addControl=function(a){var b=a["class"],c=a.image,f=a.click;a=a.index;var d=document.createElement("span"),m=this.g.getElementsByClassName("wb-control")[0],g=this;b&&(d.className=b);c&&w(d,"background-image","url("+c+")");f&&(d.onclick=function(F){f.call(this,F,g)});m.insertBefore(d,m.childNodes[a||0]);return this};e.removeControl=function(a){(a=this.g.getElementsByClassName(a)[0])&&a.remove();return this};e.addClass=function(a){this.g.classList.add(a);return this}; -e.removeClass=function(a){this.g.classList.remove(a);return this};e.toggleClass=function(a){return this.g.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=T;}).call(this); +(function(){'use strict';var f,ba=document.createElement("style");ba.innerHTML="@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.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,left .3s,top .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;line-height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body{top:35px;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict;z-index:0}.wb-control *,.wb-icon{background-repeat:no-repeat}body>.wb-body{position:relative;display:inline-block;visibility:hidden;contain:none}.wb-drag{height:100%;padding-left:10px;cursor:move}.wb-title{font-family:Arial,sans-serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-icon{display:none;width:20px;height:100%;margin:-1px 8px 0-3px;float:left;background-size:100%;background-position:center}.wb-e,.wb-w{width:10px;top:0}.wb-n,.wb-s{left:0;height:10px;position:absolute}.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e{position:absolute;right:-5px;bottom:0;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{position:absolute;bottom:0;cursor:w-resize;z-index:2}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;position:absolute}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-se,.wb-sw{bottom:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize;z-index:2}.wb-control{float:right;height:100%;max-width:100%;text-align:center}.wb-control *{display:inline-block;width:30px;height:100%;max-width:100%;background-position:center;cursor:pointer}.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,.wb-body .wb-hide,.wb-show,.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-drag,.winbox.min .wb-drag{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center calc(50% + 6px)}.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;background-position:5px center}.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-drag,body.wb-lock iframe{pointer-events:none}.winbox.max{box-shadow:none}.winbox.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}body.wb-lock .winbox{will-change:left,top,width,height;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:-50vh;left:-50vw;right:-50vw;bottom:-50vh;background:#0d1117;animation:wb-fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-shadow{box-shadow:none}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert}"; +var k=document.getElementsByTagName("head")[0];k.firstChild?k.insertBefore(ba,k.firstChild):k.appendChild(ba);var ca=document.createElement("div");ca.innerHTML="
";function m(a,b,c,e){a&&a.addEventListener(b,c,e||!1)}function p(a,b,c){var e=window;e&&e.removeEventListener(a,b,c||!1)}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 x=[],y={capture:!0,passive:!0},z,da=0,A=10,J,K,L,fa,P,Q; +function V(a,b){if(!(this instanceof V))return new V(a);z||ha();var c;if(a){if(b){var e=a;a=b}if("string"===typeof a)e=a;else{var d=a.id;var g=a.index;var l=a.root;var F=a.template;e=e||a.title;var t=a.icon;var R=a.mount;var h=a.html;var B=a.url;var n=a.width;var q=a.height;var C=a.minwidth;var D=a.minheight;var u=a.maxwidth;var v=a.maxheight;var E=a.autosize;var G=a.min;var H=a.max;var I=a.hidden;var ea=a.modal;var Y=a.x||(ea?"center":0);var Z=a.y||(ea?"center":0);var M=a.top;var N=a.left;var S= +a.bottom;var T=a.right;var ja=a.background;var O=a.border;var U=a.header;var aa=a["class"];var na=a.onclose;var oa=a.onfocus;var pa=a.onblur;var qa=a.onmove;var ra=a.onresize;var sa=a.onfullscreen;var ta=a.onmaximize;var ua=a.onminimize;var va=a.onrestore;var wa=a.onhide;var xa=a.onshow;var ya=a.onload}}this.g=(F||ca).cloneNode(!0);this.g.id=this.id=d||"winbox-"+ ++da;this.g.className="winbox"+(aa?" "+("string"===typeof aa?aa:aa.join(" ")):"")+(ea?" modal":"");this.g.winbox=this;this.window=this.g; +this.body=this.g.getElementsByClassName("wb-body")[0];this.h=U||35;ja&&this.setBackground(ja);O?w(this.body,"margin",O+(isNaN(O)?"":"px")):O=0;U&&(b=this.g.getElementsByClassName("wb-header")[0],w(b,"height",U+"px"),w(b,"line-height",U+"px"),w(this.body,"top",U+"px"));e&&this.setTitle(e);t&&this.setIcon(t);R?this.mount(R):h?this.body.innerHTML=h:B&&this.setUrl(B,ya);M=M?W(M,Q):0;S=S?W(S,Q):0;N=N?W(N,P):0;T=T?W(T,P):0;e=P-N-T;t=Q-M-S;u=u?W(u,e):e;v=v?W(v,t):t;C=C?W(C,u):150;D=D?W(D,v):this.h;E?((l|| +z).appendChild(this.body),n=Math.max(Math.min(this.body.clientWidth+2*O+1,u),C),q=Math.max(Math.min(this.body.clientHeight+this.h+O+1,v),D),this.g.appendChild(this.body)):(n=n?W(n,u):Math.max(u/2,C)|0,q=q?W(q,v):Math.max(v/2,D)|0);Y=Y?W(Y,e,n):N;Z=Z?W(Z,t,q):M;this.x=Y;this.y=Z;this.width=n;this.height=q;this.o=C;this.m=D;this.l=u;this.j=v;this.top=M;this.right=T;this.bottom=S;this.left=N;this.index=g;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose=na;this.onfocus=oa;this.onblur= +pa;this.onmove=qa;this.onresize=ra;this.onfullscreen=sa;this.onmaximize=ta;this.onminimize=ua;this.onrestore=va;this.onhide=wa;this.onshow=xa;H?this.maximize():G?this.minimize():this.resize().move();if(I)this.hide();else if(this.focus(),g||0===g)this.index=g,w(this.g,"z-index",g),g>A&&(A=g);ia(this);(l||z).appendChild(this.g);(c=a.oncreate)&&c.call(this,a)}V["new"]=function(a){return new V(a)}; +function W(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 ha(){z=document.body;z[L="requestFullscreen"]||z[L="msRequestFullscreen"]||z[L="webkitRequestFullscreen"]||z[L="mozRequestFullscreen"]||(L="");fa=L&&L.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");m(window,"resize",function(){ka();la()});ka()} +function ia(a){X(a,"drag");X(a,"n");X(a,"s");X(a,"w");X(a,"e");X(a,"nw");X(a,"ne");X(a,"se");X(a,"sw");m(a.g.getElementsByClassName("wb-min")[0],"click",function(b){r(b);a.min?a.focus().restore():a.blur().minimize()});m(a.g.getElementsByClassName("wb-max")[0],"click",function(){a.max?a.restore():a.maximize()});L?m(a.g.getElementsByClassName("wb-full")[0],"click",function(){a.fullscreen()}):a.addClass("no-full");m(a.g.getElementsByClassName("wb-close")[0],"click",function(b){r(b);a.close()||(a=null)}); +m(a.g,"click",function(){a.focus()})}function ma(a){x.splice(x.indexOf(a),1);la();a.removeClass("min");a.min=!1;a.g.title=""}function la(){for(var a=x.length,b={},c={},e=0,d;en){a.max?a.restore():a.maximize();return}}a.max||a.min||(z.classList.add("wb-lock"),(l=h.touches)&&(l=l[0])?(h=l,m(window,"touchmove",e,y),m(window,"touchend",d,y)):(m(window,"mousemove",e),m(window,"mouseup",d)),F=h.pageX,t=h.pageY)}function e(h){r(h);l&&(h=h.touches[0]);var B=h.pageX;h=h.pageY;var n=B-F,q=h-t,C=a.width,D=a.height,u=a.x,v=a.y,E;if("drag"===b){a.x+=n;a.y+=q;var G= +E=1}else{if("e"===b||"se"===b||"ne"===b){a.width+=n;var H=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=n,a.width-=n,G=H=1;if("s"===b||"se"===b||"sw"===b){a.height+=q;var I=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=q,a.height-=q,E=I=1}H&&(a.width=Math.max(Math.min(a.width,a.l,P-a.x-a.right),a.o),H=a.width!==C);I&&(a.height=Math.max(Math.min(a.height,a.j,Q-a.y-a.bottom),a.m),I=a.height!==D);(H||I)&&a.resize();G&&(a.x=Math.max(Math.min(a.x,P-a.width-a.right),a.left),G=a.x!==u);E&&(a.y=Math.max(Math.min(a.y, +Q-a.height-a.bottom),a.top),E=a.y!==v);(G||E)&&a.move();if(H||G)F=B;if(I||E)t=h}function d(h){r(h);z.classList.remove("wb-lock");l?(p("touchmove",e,y),p("touchend",d,y)):(p("mousemove",e),p("mouseup",d))}var g=a.g.getElementsByClassName("wb-"+b)[0];if(g){var l,F,t,R=0;m(g,"mousedown",c);m(g,"touchstart",c,y)}}function ka(){var a=document.documentElement;P=a.clientWidth;Q=a.clientHeight}f=V.prototype; +f.mount=function(a){this.unmount();a.i||(a.i=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};f.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.i;c&&c.appendChild(b);b.i=a}return this};f.setTitle=function(a){var b=this.g.getElementsByClassName("wb-title")[0];a=this.title=a;var c=b.firstChild;c?c.nodeValue=a:b.textContent=a;return this}; +f.setIcon=function(a){var b=this.g.getElementsByClassName("wb-icon")[0];w(b,"background-image","url("+a+")");w(b,"display","inline-block");return this};f.setBackground=function(a){w(this.g,"background",a);return this};f.setUrl=function(a,b){var c=this.body.firstChild;c&&"iframe"===c.tagName.toLowerCase()?c.src=a:(this.body.innerHTML='',b&&(this.body.firstChild.onload=b));return this}; +f.focus=function(a){if(!1===a)return this.blur();K!==this&&this.g&&(K&&K.blur(),w(this.g,"z-index",++A),this.index=A,this.addClass("focus"),K=this,this.focused=!0,this.onfocus&&this.onfocus());return this};f.blur=function(a){if(!1===a)return this.focus();K===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),K=null);return this};f.hide=function(a){if(!1===a)return this.show();if(!this.hidden)return this.onhide&&this.onhide(),this.hidden=!0,this.addClass("hide")}; +f.show=function(a){if(!1===a)return this.hide();if(this.hidden)return this.onshow&&this.onshow(),this.hidden=!1,this.removeClass("hide")};f.minimize=function(a){if(!1===a)return this.restore();J&&za();this.max&&(this.removeClass("max"),this.max=!1);this.min||(x.push(this),la(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this}; +f.restore=function(){J&&za();this.min&&(ma(this),this.resize().move(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move(),this.onrestore&&this.onrestore());return this};f.maximize=function(a){if(!1===a)return this.restore();J&&za();this.min&&ma(this);this.max||(this.addClass("max").resize(P-this.left-this.right,Q-this.top-this.bottom,!0).move(this.left,this.top,!0),this.max=!0,this.onmaximize&&this.onmaximize());return this}; +f.fullscreen=function(a){this.min&&(ma(this),this.resize().move());if(!J||!za())this.body[L](),J=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this};function za(){J.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[fa](),!0} +f.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&ma(this);this.unmount();this.g.remove();this.g.textContent="";this.g=this.body=this.g.winbox=null;K===this&&(K=null)};f.move=function(a,b,c){a||0===a?c||(this.x=a?a=W(a,P-this.left-this.right,this.width):0,this.y=b?b=W(b,Q-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);w(this.g,"left",a+"px");w(this.g,"top",b+"px");this.onmove&&this.onmove(a,b);return this}; +f.resize=function(a,b,c){a||0===a?c||(this.width=a?a=W(a,this.l):0,this.height=b?b=W(b,this.j):0,a=Math.max(a,this.o),b=Math.max(b,this.m)):(a=this.width,b=this.height);w(this.g,"width",a+"px");w(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this}; +f.addControl=function(a){var b=a["class"],c=a.image,e=a.click;a=a.index;var d=document.createElement("span"),g=this.g.getElementsByClassName("wb-control")[0],l=this;b&&(d.className=b);c&&w(d,"background-image","url("+c+")");e&&(d.onclick=function(F){e.call(this,F,l)});g.insertBefore(d,g.childNodes[a||0]);return this};f.removeControl=function(a){(a=this.g.getElementsByClassName(a)[0])&&a.remove();return this};f.addClass=function(a){this.g.classList.add(a);return this}; +f.removeClass=function(a){this.g.classList.remove(a);return this};f.toggleClass=function(a){return this.g.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=V;}).call(this); diff --git a/package.json b/package.json index 00f4ce2..91d485a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "winbox", - "version": "0.2.5", + "version": "0.2.6", "description": "Modern HTML5 window manager for the web.", "homepage": "https://nextapps-de.github.io/winbox/", "author": "Thomas Wilkerling", diff --git a/src/js/winbox.js b/src/js/winbox.js index 0ff166c..870be9b 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -13,7 +13,8 @@ import { addListener, removeListener, setStyle, setText, getByClass, addClass, r const use_raf = false; const stack_min = []; -//const eventOptions = { "capture": true, "passive": false }; +// use passive for touch and mouse wheel +const eventOptions = { "capture": true, "passive": true }; let body; let id_counter = 0; let index_counter = 10; @@ -126,10 +127,8 @@ function WinBox(params, _title){ hidden = params["hidden"]; modal = params["modal"]; - if(modal) x = y = "center"; - - x = params["x"] || x; - y = params["y"] || y; + x = params["x"] || (modal ? "center" : 0); + y = params["y"] || (modal ? "center" : 0); top = params["top"]; left = params["left"]; @@ -492,8 +491,8 @@ function addWindowListener(self, dir){ let raf_timer, raf_move, raf_resize; let dblclick_timer = 0; - addListener(node, "mousedown", mousedown/*, eventOptions*/); - addListener(node, "touchstart", mousedown/*, eventOptions*/); + addListener(node, "mousedown", mousedown); + addListener(node, "touchstart", mousedown, eventOptions); function loop(){ @@ -549,14 +548,14 @@ function addWindowListener(self, dir){ // TODO: fix when touch events bubbles up to the document body //addListener(self.dom, "touchmove", preventEvent); - addListener(window, "touchmove", handler_mousemove/*, eventOptions*/); - addListener(window, "touchend", handler_mouseup/*, eventOptions*/); + addListener(window, "touchmove", handler_mousemove, eventOptions); + addListener(window, "touchend", handler_mouseup, eventOptions); } else{ //addListener(this, "mouseleave", handler_mouseup); - addListener(window, "mousemove", handler_mousemove/*, eventOptions*/); - addListener(window, "mouseup", handler_mouseup/*, eventOptions*/); + addListener(window, "mousemove", handler_mousemove); + addListener(window, "mouseup", handler_mouseup); } x = event.pageX; @@ -680,14 +679,14 @@ function addWindowListener(self, dir){ if(touch){ //removeListener(self.dom, "touchmove", preventEvent); - removeListener(window, "touchmove", handler_mousemove/*, eventOptions*/); - removeListener(window, "touchend", handler_mouseup/*, eventOptions*/); + removeListener(window, "touchmove", handler_mousemove, eventOptions); + removeListener(window, "touchend", handler_mouseup, eventOptions); } else{ //removeListener(this, "mouseleave", handler_mouseup); - removeListener(window, "mousemove", handler_mousemove/*, eventOptions*/); - removeListener(window, "mouseup", handler_mouseup/*, eventOptions*/); + removeListener(window, "mousemove", handler_mousemove); + removeListener(window, "mouseup", handler_mouseup); } } }