diff --git a/.gitignore b/.gitignore index 0c65a5f..594d177 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,14 @@ node_modules /log /tmp +.idea +.nyc_output +.db +coverage +perf +server +!*.keep +package-lock.json +misc +vorlage +test diff --git a/README.md b/README.md index b4b3c5f..169baf0 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,8 @@ __Get Latest Stable Build (Recommended):__ winbox.bundle.min.js - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/winbox.bundle.min.js + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.2/dist/winbox.bundle.min.js @@ -41,14 +41,14 @@ __Get Latest Stable Build (Recommended):__ winbox.min.js - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/js/winbox.min.js + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.2/dist/js/winbox.min.js winbox.min.css - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/css/winbox.min.css + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.2/dist/css/winbox.min.css @@ -57,25 +57,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.0/src/css/winbox.css + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.2.2/src/css/winbox.css src.zip - Download + Download Download all source files including image original resources. @@ -88,7 +88,7 @@ npm install winbox __Get Latest Nightly (Do not use for production!):__ -Just exchange the version number from the URLs above with "master", e.g.: "/winbox/__0.2.0__/dist/" into "/winbox/__master__/dist". +Just exchange the version number from the URLs above with "master", e.g.: "/winbox/__0.2.2__/dist/" into "/winbox/__master__/dist". ### Use Bundled Version @@ -166,7 +166,7 @@ You can also load modules via CDN, e.g.: ```html ``` @@ -348,7 +348,7 @@ Instance properties: - onwindowize + onrestore function() Callback triggered when the window returns to a windowed state from a Fullscreen, Minimized or Maximized state. @@ -928,7 +928,7 @@ var winbox = WinBox({ onmaximize: function(){ this.setBackground("#AAA"); }, - onwindowize: function(){ + onrestore: function(){ this.setBackground("#DDD"); }, onmove: function(x, y){ diff --git a/dist/css/winbox.min.css b/dist/css/winbox.min.css index cc5ddad..7e7afe0 100644 --- a/dist/css/winbox.min.css +++ b/dist/css/winbox.min.css @@ -1 +1 @@ -@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}.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-e,.wb-n,.wb-s,.wb-w{z-index:2;position:absolute}.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{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{top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;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;z-index:2}.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 +@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;min-height:35px;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-header,.winbox iframe{position:absolute;width:100%}.wb-header{left:0;top:0;height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body,.wb-n,.wb-s{position:absolute;left:0}.wb-n,.wb-s{height:10px}.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}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;line-height:35px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-e,.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.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;z-index:2}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;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;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;z-index:2}.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.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}.winbox.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,.winbox.max{box-shadow:none}.no-header .wb-body{top:0} \ No newline at end of file diff --git a/dist/img/restore.svg b/dist/img/restore.svg new file mode 100644 index 0000000..d5fc821 --- /dev/null +++ b/dist/img/restore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js index 77677de..30b5311 100644 --- a/dist/js/winbox.min.js +++ b/dist/js/winbox.min.js @@ -1,26 +1,26 @@ /** - * WinBox.js v0.2.1 + * WinBox.js v0.2.2 * 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 m(a,b,c,e){a.addEventListener(b,c,e||!1===e?e:!0)}function n(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function p(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var u=[],w,y=0,z=0,A,D,E,F,G,K,P; -function R(a,b){if(!(this instanceof R))return new R(a);A||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 q=a.id;var v=a.root;var H=a.template;d=d||a.title;var f=a.mount;var r=a.html;var x=a.url;var l=a.width;var t=a.height;var B=a.minwidth;var C=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;A=a.index||A;var aa=a.onclose;var ba=a.onfocus;var ca=a.onblur;var da=a.onmove;var ea=a.onresize; -var fa=a.onfullscreen;var ha=a.onmaximize;var ia=a.onminimize;var ja=a.onwindowize;var ka=a.onhide;var la=a.onshow;var V=a.background;var Q=a.border;var O=a["class"];var ma=a.splitscreen;var na=a.autosize}}this.g=H?H:k.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];V&&this.setBackground(V);Q&&p(this.body,"margin",Q+(isNaN(Q)?"":"px"));A=A||10;f?this.mount(f):r?this.body.innerHTML=r:x&&this.setUrl(x);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;if(na&&(!l||!t)){l&&p(this.body,"width",T(l,a)+"px");t&&p(this.body,"height",T(l,a)+"px");(v||w).appendChild(this.body);var oa=Math.min(this.body.clientWidth,a);var pa=Math.min(this.body.clientHeight,b);this.g.appendChild(this.body)}l=l?T(l,a):oa||a/2|0;t=t?T(t,b):pa||b/2|0;B=B?T(B,a):0;C=C?T(C,b):0;h=h?T(h,a,l):J;c=c?T(c,b,t):I;this.x=h;this.y=c;this.width=l;this.height=t;this.j=B;this.i=C;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.onfullscreen=fa;this.onmaximize=ha;this.onminimize=ia;this.onwindowize=ja;this.onhide=ka;this.onshow=la;this.l=ma;this.g.id=this.id=q||"winbox-"+ ++y;this.g.className="winbox"+(O?" "+("string"===typeof O?O:O.join(" ")):"")+(e?" modal":"");L?this.maximize():this.move().resize();Z?this.hide():this.focus();this.g.winbox=this;qa(this);(v||w).appendChild(this.g)}R["new"]=function(a){return new R(a)}; +(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 q=[],v,x=0,y=0,z,D,E,F,G,J,P; +function Q(a,b){if(!(this instanceof Q))return new Q(a);v||R();var c,e;if(a){if(b){var d=a;a=b}if("string"===typeof a)d=a;else{a.oncreate&&a.oncreate.call(this,a);if(e=a.modal)var h=c="center";var p=a.id;var r=a.root;var K=a.template;d=d||a.title;var f=a.mount;var A=a.html;var w=a.url;var t=a.width;var u=a.height;var B=a.minwidth;var C=a.minheight;h=a.x||h;c=a.y||c;var L=a.max;var aa=a.hidden;var H=a.top;var I=a.left;var M=a.bottom;var N=a.right;z=a.index||z;var X=a.background;var S=a.border;var O= +a["class"];var ba=a.splitscreen;var ca=a.autosize;var da=a.onclose;var ea=a.onfocus;var fa=a.onblur;var ha=a.onmove;var ia=a.onresize;var ja=a.onfullscreen;var ka=a.onmaximize;var la=a.onminimize;var ma=a.onrestore;var na=a.onhide;var oa=a.onshow;var pa=a.onload}}this.g=K||k.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];X&&this.setBackground(X);S&&n(this.body,"margin",S+(isNaN(S)?"":"px"));z=z||10;f?this.mount(f):A?this.body.innerHTML=A:w&&this.setUrl(w,pa);this.setTitle(d|| +"");a=J;b=P;H=H?T(H,b):0;M=M?T(M,b):0;I=I?T(I,a):0;N=N?T(N,a):0;a-=I+N;b-=H+M;if(ca&&(!t||!u)){n(this.body,"visibility","hidden");(r||v).appendChild(this.body);var qa=Math.min(this.body.clientWidth,a);var ra=Math.min(this.body.clientHeight,b);this.g.appendChild(this.body);n(this.body,"visibility","")}t=t?T(t,a):qa||a/2|0;u=u?T(u,b):ra||b/2|0;B=B?T(B,a):0;C=C?T(C,b):0;h=h?T(h,a,t):I;c=c?T(c,b,u):H;this.x=h;this.y=c;this.width=t;this.height=u;this.j=B;this.i=C;this.top=H;this.right=N;this.bottom=M; +this.left=I;this.max=this.min=!1;this.onclose=da;this.onfocus=ea;this.onblur=fa;this.onmove=ha;this.onresize=ia;this.onfullscreen=ja;this.onmaximize=ka;this.onminimize=la;this.onrestore=ma;this.onhide=na;this.onshow=oa;this.l=ba;this.g.id=this.id=p||"winbox-"+ ++x;this.g.className="winbox"+(O?" "+("string"===typeof O?O:O.join(" ")):"")+(e?" modal":"");this.g.winbox=this;L?this.maximize():this.move().resize();aa?this.hide():this.focus();sa(this);(r||v).appendChild(this.g)}Q["new"]=function(a){return new Q(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");m(window,"resize",function(){K=w.clientWidth;P=w.clientHeight;U()});K=w.clientWidth;P=w.clientHeight} -function qa(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");m(a.g.getElementsByClassName("wb-min")[0],"click",function(b){n(b);a.minimize()});m(a.g.getElementsByClassName("wb-max")[0],"click",function(b){n(b);a.focus().maximize()});F?m(a.g.getElementsByClassName("wb-full")[0],"click",function(b){n(b);a.focus().fullscreen()}):a.addClass("no-full");m(a.g.getElementsByClassName("wb-close")[0],"click",function(b){n(b);a.close()||(a=null)});m(a.g,"click",function(){a.focus()}, -!1)}function X(a){u.splice(u.indexOf(a),1);U();a.removeClass("min");a.min=!1;a.g.title=""}function U(){for(var a=u.length,b={},c={},e=0,d;ex){a.maximize();return}}a.max||(w.classList.add("wb-drag"),(q=f.touches)&&(q=q[0])?(f=q,m(window,"touchmove",e),m(window,"touchend",d)):(m(window,"mousemove",e),m(window,"mouseup",d)),v=f.pageX,H=f.pageY,a.focus())}}function e(f){n(f);q&&(f=f.touches[0]);var r=f.pageX;f=f.pageY;var x=r-v,l=f-H,t;if("title"===b){a.x+=x;a.y+=l;var B=t=1}else{if("e"=== -b||"se"===b||"ne"===b){a.width+=x;var C=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=x,a.width-=x,B=C=1;if("s"===b||"se"===b||"sw"===b){a.height+=l;var L=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=l,a.height-=l,t=L=1}if(C||L)C&&(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(B||t)B&&(a.x=Math.max(Math.min(a.x,K-a.width-a.right),a.left)),t&&(a.y=Math.max(Math.min(a.y,P-a.height-a.bottom),a.top)),a.move();v=r;H=f}function d(f){n(f); -w.classList.remove("wb-drag");q?(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],q,v,H;m(h,"mousedown",c);m(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){p(this.g,"background",a);return this};g.setUrl=function(a){this.body.innerHTML='';return this}; -g.focus=function(){E!==this&&(p(this.g,"z-index",A++),this.addClass("focus"),E&&(E.removeClass("focus"),E.onblur&&E.onblur()),E=this,this.onfocus&&this.onfocus());return this};g.hide=function(){this.onhide&&this.onhide();return this.addClass("hide")};g.show=function(){this.onshow&&this.onshow();return this.removeClass("hide")}; -g.minimize=function(a){D&&Y();!a&&this.min?(X(this),this.resize().move().focus(),this.onwindowize&&this.onwindowize()):!1===a||this.min||(u.push(this),U(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());this.max&&(this.removeClass("max"),this.max=!1,this.onminimize&&this.onminimize());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.onmaximize&&this.onmaximize()):(this.resize().move().removeClass("max"),this.onwindowize&&this.onwindowize());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,this.onfullscreen&&this.onfullscreen());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)));p(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);p(this.g,"width",a+"px");p(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); +function R(){v=document.body;v[F="requestFullscreen"]||v[F="msRequestFullscreen"]||v[F="webkitRequestFullscreen"]||v[F="mozRequestFullscreen"]||(F="");G=F&&F.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");l(window,"resize",function(){J=v.clientWidth;P=v.clientHeight;U()});J=v.clientWidth;P=v.clientHeight} +function sa(a){V(a,"title");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){m(b);a.min?W(a):a.minimize()});l(a.g.getElementsByClassName("wb-max")[0],"click",function(b){m(b);a.max?W(a):a.maximize();a.focus()});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 Y(a){q.splice(q.indexOf(a),1);U();a.removeClass("min");a.min=!1;a.g.title=""}function U(){for(var a=q.length,b={},c={},e=0,d;ew){a.max?W(a):a.maximize();return}if(a.min){W(a);return}}a.max||a.min||(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)),r=f.pageX,K=f.pageY,a.focus())}function e(f){m(f);p&&(f=f.touches[0]);var A=f.pageX;f=f.pageY;var w=A-r,t=f-K,u;if("title"===b){a.x+=w;a.y+=t;var B=u=1}else{if("e"===b||"se"===b||"ne"===b){a.width+= +w;var C=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=w,a.width-=w,B=C=1;if("s"===b||"se"===b||"sw"===b){a.height+=t;var L=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=t,a.height-=t,u=L=1}if(C||L)C&&(a.width=Math.max(Math.min(a.width,J-a.x-a.right),150)),L&&(a.height=Math.max(Math.min(a.height,P-a.y-a.bottom),0)),a.resize();if(B||u)B&&(a.x=Math.max(Math.min(a.x,J-a.width-a.right),a.left)),u&&(a.y=Math.max(Math.min(a.y,P-a.height-a.bottom),a.top)),a.move();r=A;K=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,r,K;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}; +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,b){this.body.innerHTML='';b&&(this.body.firstChild.onload=b);return this}; +g.focus=function(){E!==this&&(n(this.g,"z-index",z++),this.addClass("focus"),E&&(E.removeClass("focus"),E.onblur&&E.onblur()),E=this,this.onfocus&&this.onfocus());return this};g.hide=function(){this.onhide&&this.onhide();return this.addClass("hide")};g.show=function(){this.onshow&&this.onshow();return this.removeClass("hide")}; +g.minimize=function(){D&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(q.push(this),U(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this};function W(a){D&&Z();a.min&&(Y(a),a.resize().move().focus(),a.onrestore&&a.onrestore());a.max&&(a.max=!1,a.removeClass("max").resize().move().focus(),a.onrestore&&a.onrestore())} +g.maximize=function(){D&&Z();this.min&&Y(this);this.max||(this.addClass("max").resize(J-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};g.fullscreen=function(){this.min&&(Y(this),this.resize().move());D&&Z()||(this.body[F](),D=!0,this.onfullscreen&&this.onfullscreen());return this}; +function Z(){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&&Y(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,J-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(J/2,P):a===J-this.width&&this.resize(J/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,J-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=Q;}).call(this); diff --git a/dist/winbox.bundle.min.js b/dist/winbox.bundle.min.js index 52bcaee..cb775f6 100644 --- a/dist/winbox.bundle.min.js +++ b/dist/winbox.bundle.min.js @@ -1,27 +1,27 @@ /** - * WinBox.js v0.2.1 (Bundle) + * WinBox.js v0.2.2 (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 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}.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-e,.wb-n,.wb-s,.wb-w{z-index:2;position:absolute}.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{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{top:0;left:-5px;bottom:0;width:10px;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;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;z-index:2}.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 m=document.getElementsByTagName("head")[0];m.firstChild?m.insertBefore(k,m.firstChild):m.appendChild(k);var n=document.createElement("div");n.innerHTML="
";function p(a,b,c,e){a.addEventListener(b,c,e||!1===e?e:!0)}function u(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,A=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 q=a.id;var v=a.root;var H=a.template;d=d||a.title;var f=a.mount;var r=a.html;var x=a.url;var l=a.width;var t=a.height;var B=a.minwidth;var C=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 ia=a.onfullscreen;var ja=a.onmaximize;var ka=a.onminimize;var la=a.onwindowize;var ma=a.onhide;var na=a.onshow;var X=a.background;var S=a.border;var P=a["class"];var oa=a.splitscreen;var pa=a.autosize}}this.g=H?H:n.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];X&&this.setBackground(X);S&&w(this.body,"margin",S+(isNaN(S)?"":"px"));E=E||10;f?this.mount(f):r?this.body.innerHTML=r:x&&this.setUrl(x);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;if(pa&&(!l||!t)){l&&w(this.body,"width",U(l,a)+"px");t&&w(this.body,"height",U(l,a)+"px");(v||z).appendChild(this.body);var qa=Math.min(this.body.clientWidth,a);var ra=Math.min(this.body.clientHeight,b);this.g.appendChild(this.body)}l=l?U(l,a):qa||a/2|0;t=t?U(t,b):ra||b/2|0;B=B?U(B,a):0;C=C?U(C,b):0;h=h?U(h,a,l):J;c=c?U(c,b,t):I;this.x=h;this.y=c;this.width=l;this.height=t;this.j=B;this.i=C;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.onfullscreen=ia;this.onmaximize=ja;this.onminimize=ka;this.onwindowize=la;this.onhide=ma;this.onshow=na;this.l=oa;this.g.id=this.id=q||"winbox-"+ ++A;this.g.className="winbox"+(P?" "+("string"===typeof P?P:P.join(" ")):"")+(e?" modal":"");L?this.maximize():this.move().resize();ba?this.hide():this.focus();this.g.winbox=this;sa(this);(v||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 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");p(window,"resize",function(){Q=z.clientWidth;R=z.clientHeight;V()});Q=z.clientWidth;R=z.clientHeight} -function sa(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");p(a.g.getElementsByClassName("wb-min")[0],"click",function(b){u(b);a.minimize()});p(a.g.getElementsByClassName("wb-max")[0],"click",function(b){u(b);a.focus().maximize()});K?p(a.g.getElementsByClassName("wb-full")[0],"click",function(b){u(b);a.focus().fullscreen()}):a.addClass("no-full");p(a.g.getElementsByClassName("wb-close")[0],"click",function(b){u(b);a.close()||(a=null)});p(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"),(q=f.touches)&&(q=q[0])?(f=q,p(window,"touchmove",e),p(window,"touchend",d)):(p(window,"mousemove",e),p(window,"mouseup",d)),v=f.pageX,H=f.pageY,a.focus())}}function e(f){u(f);q&&(f=f.touches[0]);var r=f.pageX;f=f.pageY;var x=r-v,l=f-H,t;if("title"===b){a.x+=x;a.y+=l;var B=t=1}else{if("e"=== -b||"se"===b||"ne"===b){a.width+=x;var C=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=x,a.width-=x,B=C=1;if("s"===b||"se"===b||"sw"===b){a.height+=l;var L=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=l,a.height-=l,t=L=1}if(C||L)C&&(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(B||t)B&&(a.x=Math.max(Math.min(a.x,Q-a.width-a.right),a.left)),t&&(a.y=Math.max(Math.min(a.y,R-a.height-a.bottom),a.top)),a.move();v=r;H=f}function d(f){u(f); -z.classList.remove("wb-drag");q?(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],q,v,H;p(h,"mousedown",c);p(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(){this.onhide&&this.onhide();return this.addClass("hide")};g.show=function(){this.onshow&&this.onshow();return this.removeClass("hide")}; -g.minimize=function(a){F&&Z();!a&&this.min?(Y(this),this.resize().move().focus(),this.onwindowize&&this.onwindowize()):!1===a||this.min||(y.push(this),V(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());this.max&&(this.removeClass("max"),this.max=!1,this.onminimize&&this.onminimize());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.onmaximize&&this.onmaximize()):(this.resize().move().removeClass("max"),this.onwindowize&&this.onwindowize());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,this.onfullscreen&&this.onfullscreen());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); +(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;min-height:35px;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-header,.winbox iframe{position:absolute;width:100%}.wb-header{left:0;top:0;height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body,.wb-n,.wb-s{position:absolute;left:0}.wb-n,.wb-s{height:10px}.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}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;line-height:35px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-e,.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.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;z-index:2}.wb-w{position:absolute;top:0;left:-5px;bottom:0;width:10px;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;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;z-index:2}.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.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}.winbox.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,.winbox.max{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 q(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,aa=0,z=0,D,E,F,G,J,O,Q; +function R(a,b){if(!(this instanceof R))return new R(a);y||ba();var c,e;if(a){if(b){var d=a;a=b}if("string"===typeof a)d=a;else{a.oncreate&&a.oncreate.call(this,a);if(e=a.modal)var h=c="center";var p=a.id;var r=a.root;var K=a.template;d=d||a.title;var f=a.mount;var A=a.html;var w=a.url;var t=a.width;var u=a.height;var B=a.minwidth;var C=a.minheight;h=a.x||h;c=a.y||c;var L=a.max;var ca=a.hidden;var H=a.top;var I=a.left;var M=a.bottom;var N=a.right;D=a.index||D;var Z=a.background;var U=a.border;var P= +a["class"];var da=a.splitscreen;var ea=a.autosize;var fa=a.onclose;var ha=a.onfocus;var ia=a.onblur;var ja=a.onmove;var ka=a.onresize;var la=a.onfullscreen;var ma=a.onmaximize;var na=a.onminimize;var oa=a.onrestore;var pa=a.onhide;var qa=a.onshow;var ra=a.onload}}this.g=K||m.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];Z&&this.setBackground(Z);U&&v(this.body,"margin",U+(isNaN(U)?"":"px"));D=D||10;f?this.mount(f):A?this.body.innerHTML=A:w&&this.setUrl(w,ra);this.setTitle(d|| +"");a=O;b=Q;H=H?S(H,b):0;M=M?S(M,b):0;I=I?S(I,a):0;N=N?S(N,a):0;a-=I+N;b-=H+M;if(ea&&(!t||!u)){v(this.body,"visibility","hidden");(r||y).appendChild(this.body);var sa=Math.min(this.body.clientWidth,a);var ta=Math.min(this.body.clientHeight,b);this.g.appendChild(this.body);v(this.body,"visibility","")}t=t?S(t,a):sa||a/2|0;u=u?S(u,b):ta||b/2|0;B=B?S(B,a):0;C=C?S(C,b):0;h=h?S(h,a,t):I;c=c?S(c,b,u):H;this.x=h;this.y=c;this.width=t;this.height=u;this.j=B;this.i=C;this.top=H;this.right=N;this.bottom=M; +this.left=I;this.max=this.min=!1;this.onclose=fa;this.onfocus=ha;this.onblur=ia;this.onmove=ja;this.onresize=ka;this.onfullscreen=la;this.onmaximize=ma;this.onminimize=na;this.onrestore=oa;this.onhide=pa;this.onshow=qa;this.l=da;this.g.id=this.id=p||"winbox-"+ ++aa;this.g.className="winbox"+(P?" "+("string"===typeof P?P:P.join(" ")):"")+(e?" modal":"");this.g.winbox=this;L?this.maximize():this.move().resize();ca?this.hide():this.focus();ua(this);(r||y).appendChild(this.g)}R["new"]=function(a){return new R(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 ba(){y=document.body;y[G="requestFullscreen"]||y[G="msRequestFullscreen"]||y[G="webkitRequestFullscreen"]||y[G="mozRequestFullscreen"]||(G="");J=G&&G.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");n(window,"resize",function(){O=y.clientWidth;Q=y.clientHeight;T()});O=y.clientWidth;Q=y.clientHeight} +function ua(a){V(a,"title");V(a,"n");V(a,"s");V(a,"w");V(a,"e");V(a,"nw");V(a,"ne");V(a,"se");V(a,"sw");n(a.g.getElementsByClassName("wb-min")[0],"click",function(b){q(b);a.min?W(a):a.minimize()});n(a.g.getElementsByClassName("wb-max")[0],"click",function(b){q(b);a.max?W(a):a.maximize();a.focus()});G?n(a.g.getElementsByClassName("wb-full")[0],"click",function(b){q(b);a.focus().fullscreen()}):a.addClass("no-full");n(a.g.getElementsByClassName("wb-close")[0],"click",function(b){q(b);a.close()||(a=null)}); +n(a.g,"click",function(){a.focus()},!1)}function X(a){x.splice(x.indexOf(a),1);T();a.removeClass("min");a.min=!1;a.g.title=""}function T(){for(var a=x.length,b={},c={},e=0,d;ew){a.max?W(a):a.maximize();return}if(a.min){W(a);return}}a.max||a.min||(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)),r=f.pageX,K=f.pageY,a.focus())}function e(f){q(f);p&&(f=f.touches[0]);var A=f.pageX;f=f.pageY;var w=A-r,t=f-K,u;if("title"===b){a.x+=w;a.y+=t;var B=u=1}else{if("e"===b||"se"===b||"ne"===b){a.width+= +w;var C=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=w,a.width-=w,B=C=1;if("s"===b||"se"===b||"sw"===b){a.height+=t;var L=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=t,a.height-=t,u=L=1}if(C||L)C&&(a.width=Math.max(Math.min(a.width,O-a.x-a.right),150)),L&&(a.height=Math.max(Math.min(a.height,Q-a.y-a.bottom),0)),a.resize();if(B||u)B&&(a.x=Math.max(Math.min(a.x,O-a.width-a.right),a.left)),u&&(a.y=Math.max(Math.min(a.y,Q-a.height-a.bottom),a.top)),a.move();r=A;K=f}function d(f){q(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,r,K;n(h,"mousedown",c);n(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){v(this.g,"background",a);return this};g.setUrl=function(a,b){this.body.innerHTML='';b&&(this.body.firstChild.onload=b);return this}; +g.focus=function(){F!==this&&(v(this.g,"z-index",D++),this.addClass("focus"),F&&(F.removeClass("focus"),F.onblur&&F.onblur()),F=this,this.onfocus&&this.onfocus());return this};g.hide=function(){this.onhide&&this.onhide();return this.addClass("hide")};g.show=function(){this.onshow&&this.onshow();return this.removeClass("hide")}; +g.minimize=function(){E&&Y();this.max&&(this.removeClass("max"),this.max=!1);this.min||(x.push(this),T(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this};function W(a){E&&Y();a.min&&(X(a),a.resize().move().focus(),a.onrestore&&a.onrestore());a.max&&(a.max=!1,a.removeClass("max").resize().move().focus(),a.onrestore&&a.onrestore())} +g.maximize=function(){E&&Y();this.min&&X(this);this.max||(this.addClass("max").resize(O-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};g.fullscreen=function(){this.min&&(X(this),this.resize().move());E&&Y()||(this.body[G](),E=!0,this.onfullscreen&&this.onfullscreen());return this}; +function Y(){E=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[J](),!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);F===this&&(F=null)}; +g.move=function(a,b,c){a||0===a?c||(this.x=a?a=S(a,O-this.left-this.right,this.width):0,this.y=b?b=S(b,Q-this.top-this.bottom,this.height):0):(a=this.x,b=this.y,this.l&&(0===a?this.resize(O/2,Q):a===O-this.width&&this.resize(O/2,Q)));v(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=S(a,O-this.left-this.right):0,this.height=b?b=S(b,Q-this.top-this.bottom):0):(a=this.width,b=this.height);a=Math.max(a,this.j);b=Math.max(b,this.i);v(this.g,"width",a+"px");v(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/package.json b/package.json index f0b4c38..44e2b9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "winbox", - "version": "0.2.1", + "version": "0.2.2", "description": "Modern HTML5 window manager for the web.", "homepage": "https://nextapps-de.github.io/winbox/", "author": "Thomas Wilkerling", diff --git a/src/css/images.less b/src/css/images.less index e6c86a8..44864c0 100644 --- a/src/css/images.less +++ b/src/css/images.less @@ -2,3 +2,4 @@ @close: "../img/close.svg"; @full: "../img/full.svg"; @min: "../img/min.svg"; +@restore: "../img/restore.svg"; diff --git a/src/css/winbox.css b/src/css/winbox.css index 6a54ae5..9b4f279 100644 --- a/src/css/winbox.css +++ b/src/css/winbox.css @@ -2,6 +2,7 @@ position: fixed; left: 0; top: 0; + min-height: 35px; background: #0050ff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); transition: width 0.3s, height 0.3s, transform 0.3s; @@ -14,31 +15,19 @@ /* workaround for using passive listeners */ touch-action: none; } -/* Header height */ -.winbox { - min-height: 35px; -} -.wb-header, -.wb-icon { - height: 35px; -} -.wb-title { - line-height: 35px; -} -.wb-body { - top: 35px; -} .wb-header { position: absolute; left: 0; top: 0; width: 100%; + height: 35px; color: #fff; overflow: hidden; z-index: 1; } .wb-body { position: absolute; + top: 35px; left: 0; right: 0; bottom: 0; @@ -56,6 +45,7 @@ font-family: Arial, sans-serif; font-size: 14px; padding-left: 10px; + line-height: 35px; cursor: move; white-space: nowrap; overflow: hidden; @@ -135,6 +125,7 @@ } .wb-icon { float: right; + height: 35px; max-width: 100%; text-align: center; } @@ -165,6 +156,13 @@ background-size: 16px auto; } /* +.winbox:not(.max) .wb-max { + background-image: url(@restore); + background-size: 20px auto; + background-position: center bottom 5px; +} +*/ +/* .winbox:fullscreen{ transition: none !important; } @@ -197,10 +195,10 @@ display: none; visibility: hidden; } -.max { +.winbox.max { box-shadow: none; } -.max .wb-body { +.winbox.max .wb-body { margin: 0 !important; } .winbox iframe { diff --git a/src/css/winbox.less b/src/css/winbox.less index 4a134ca..10366a2 100644 --- a/src/css/winbox.less +++ b/src/css/winbox.less @@ -1,9 +1,11 @@ @import "images.less"; +@winbox-header-height: 35px; .winbox { position: fixed; left: 0; top: 0; + min-height: @winbox-header-height; background: #0050ff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); transition: width .3s, height .3s, transform .3s; @@ -17,27 +19,12 @@ touch-action: none; } -/* Header height */ -@winbox-header-height: 35px; -.winbox { - min-height: @winbox-header-height; -} -.wb-header, -.wb-icon { - height: @winbox-header-height; -} -.wb-title { - line-height: @winbox-header-height; -} -.wb-body { - top: @winbox-header-height; -} - .wb-header { position: absolute; left: 0; top: 0; width: 100%; + height: @winbox-header-height; color: #fff; overflow: hidden; z-index: 1; @@ -45,6 +32,7 @@ .wb-body { position: absolute; + top: @winbox-header-height; left: 0; right: 0; bottom: 0; @@ -65,6 +53,7 @@ font-family : Arial, sans-serif; font-size: 14px; padding-left: 10px; + line-height: @winbox-header-height; cursor: move; white-space: nowrap; overflow: hidden; @@ -153,6 +142,7 @@ .wb-icon{ float: right; + height: @winbox-header-height; max-width: 100%; text-align: center; } @@ -170,7 +160,7 @@ .wb-min { background-image: url(@min); background-size: 14px auto; - background-position: center bottom 11px; + background-position: center bottom 12px; } .wb-max { @@ -188,6 +178,14 @@ background-size: 16px auto; } +/* +.winbox:not(.max) .wb-max { + background-image: url(@restore); + background-size: 20px auto; + background-position: center bottom 5px; +} +*/ + /* .winbox:fullscreen{ transition: none !important; @@ -229,11 +227,11 @@ visibility: hidden; } -&.max { +.winbox.max { box-shadow: none; } -&.max .wb-body { +.winbox.max .wb-body { margin: 0 !important; } diff --git a/src/img/restore.svg b/src/img/restore.svg new file mode 100644 index 0000000..c5de671 --- /dev/null +++ b/src/img/restore.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/js/webpack.js b/src/js/webpack.js index 7de2f76..7fde289 100644 --- a/src/js/webpack.js +++ b/src/js/webpack.js @@ -39,7 +39,7 @@ import WinBox from "./winbox.js"; /** @export */ WinBox.onfullscreen; /** @export */ WinBox.onmaximize; /** @export */ WinBox.onminimize; -/** @export */ WinBox.onwindowize; +/** @export */ WinBox.onrestore; /** @export */ WinBox.onhide; /** @export */ WinBox.onshow; /** @export */ WinBox.winbox; diff --git a/src/js/winbox.js b/src/js/winbox.js index 9ba4d82..6c6650e 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -38,7 +38,7 @@ function WinBox(params, _title){ return new WinBox(params); } - index || setup(); + body || setup(); let id, root, @@ -60,6 +60,14 @@ function WinBox(params, _title){ bottom, right, modal, + background, + border, + classname, + splitscreen, + autosize, + contentWidth, + contentHeight, + onclose, onfocus, onblur, @@ -68,17 +76,10 @@ function WinBox(params, _title){ onfullscreen, onmaximize, onminimize, - onwindowize, + onrestore, onhide, onshow, - background, - border, - classname, - splitscreen, - autosize, - clonedBody, - contentWidth, - contentHeight; + onload; if(params){ @@ -94,6 +95,8 @@ function WinBox(params, _title){ } else{ + params["oncreate"] && params["oncreate"].call(this, params); + if((modal = params["modal"])){ x = y = "center"; @@ -119,6 +122,12 @@ function WinBox(params, _title){ bottom = params["bottom"]; right = params["right"]; index = params["index"] || index; + background = params["background"]; + border = params["border"]; + classname = params["class"]; + splitscreen = params["splitscreen"]; + autosize = params["autosize"]; + onclose = params["onclose"]; onfocus = params["onfocus"]; onblur = params["onblur"]; @@ -127,26 +136,14 @@ function WinBox(params, _title){ onfullscreen = params["onfullscreen"]; onmaximize = params["onmaximize"]; onminimize = params["onminimize"]; - onwindowize = params["onwindowize"]; + onrestore = params["onrestore"]; onhide = params["onhide"]; onshow = params["onshow"]; - background = params["background"]; - border = params["border"]; - classname = params["class"]; - splitscreen = params["splitscreen"]; - autosize = params["autosize"]; + onload = params["onload"]; } } - if(customTemplate){ - - this.dom = customTemplate; - } - else{ - - this.dom = template(); - } - + this.dom = customTemplate || template(); this.body = getByClass(this.dom, "wb-body"); if(background){ @@ -171,7 +168,7 @@ function WinBox(params, _title){ } else if(url){ - this.setUrl(url); + this.setUrl(url, onload); } this.setTitle(title || ""); @@ -187,30 +184,16 @@ function WinBox(params, _title){ max_width -= left + right; max_height -= top + bottom; - // TODO: finalize autosize feature if(autosize && (!width || !height)){ - // clonedBody = this.body.cloneNode(true); - - // setStyle(clonedBody, "contain", "unset"); - // setStyle(clonedBody, "margin", ""); - // setStyle(clonedBody, "position", "relative"); - // setStyle(clonedBody, "visibility", "hidden"); - - // if(!hasClass(this.dom, "no-header")){ - // - // clonedBody.insertAdjacentElement("afterbegin", getByClass(this.dom, "wb-title").cloneNode(true)); - // } - - if(width) setStyle(this.body, "width", parse(width, max_width) + "px"); - if(height) setStyle(this.body, "height", parse(width, max_width) + "px"); - + setStyle(this.body, "visibility", "hidden"); (root || body).appendChild(this.body); contentWidth = Math.min(this.body.clientWidth, max_width); contentHeight = Math.min(this.body.clientHeight, max_height); this.dom.appendChild(this.body); + setStyle(this.body, "visibility", ""); } width = width ? parse(width, max_width) : contentWidth || (max_width / 2) | 0; @@ -244,13 +227,15 @@ function WinBox(params, _title){ this.onfullscreen = onfullscreen; this.onmaximize = onmaximize; this.onminimize = onminimize; - this.onwindowize = onwindowize; + this.onrestore = onrestore; this.onhide = onhide; this.onshow = onshow; this.splitscreen = splitscreen; this.dom.id = this.id = id || ("winbox-" + (++id_counter)); this.dom.className = "winbox" + (classname ? " " + (typeof classname === "string" ? classname : classname.join(" ")) : "") + (modal ? " modal" : ""); + this.dom["winbox"] = this; + //this.plugins = []; if(max){ @@ -261,21 +246,6 @@ function WinBox(params, _title){ this.move().resize(); } - /* - if(mount){ - - this.mount(mount); - } - else if(html){ - - this.body.innerHTML = html; - } - else if(url){ - - this.setUrl(url); - } - */ - if(hidden){ this.hide(); @@ -284,8 +254,7 @@ function WinBox(params, _title){ this.focus(); } - - this.dom.winbox = this; + register(this); (root || body).appendChild(this.dom); } @@ -380,13 +349,14 @@ function register(self){ addListener(getByClass(self.dom, "wb-min"), "click", function(event){ preventEvent(event); - self.minimize(); + self.min ? self.restore() : self.minimize(); }); addListener(getByClass(self.dom, "wb-max"), "click", function(event){ preventEvent(event); - self.focus().maximize(); + self.max ? self.restore() : self.maximize(); + self.focus(); }); if(prefix_request){ @@ -502,13 +472,13 @@ function addWindowListener(self, dir){ // prevent the full iteration through the fallback chain of a touch event (touch > mouse > click) preventEvent(event, true); - if(self.min){ - - self.minimize(); - } - else { + // if(self.min){ + // + // self.minimize(); + // } + // else { - if(dir === "title" && !self.hasClass("no-max")){ + if(dir === "title" /*&& !self.hasClass("no-max")*/){ const now = Date.now(); const diff = now - dblclick_timer; @@ -517,12 +487,18 @@ function addWindowListener(self, dir){ if(diff < 250){ - self.maximize(); + self.max ? self.restore() : self.maximize(); + return; + } + + if(self.min){ + + self.restore(); return; } } - if(!self.max){ + if(!self.max && !self.min){ addClass(body, "wb-drag"); use_raf && loop(); @@ -553,7 +529,7 @@ function addWindowListener(self, dir){ //init(); self.focus(); } - } + //} } function handler_mousemove(event){ @@ -743,9 +719,10 @@ WinBox.prototype.setBackground = function(background){ * @this WinBox */ -WinBox.prototype.setUrl = function(url){ +WinBox.prototype.setUrl = function(url, onload){ this.body.innerHTML = ''; + onload && (this.body.firstChild.onload = onload); return this; }; @@ -778,6 +755,7 @@ WinBox.prototype.focus = function(){ */ WinBox.prototype.hide = function(){ + this.onhide && this.onhide(); return this.addClass("hide"); }; @@ -787,29 +765,29 @@ WinBox.prototype.hide = function(){ */ WinBox.prototype.show = function(){ + this.onshow && this.onshow(); return this.removeClass("hide"); }; /** * @this WinBox - * @param {boolean=} state */ -WinBox.prototype.minimize = function(state){ +WinBox.prototype.minimize = function(){ if(is_fullscreen){ cancel_fullscreen(this); } - if(!state && this.min){ + if(this.max){ - remove_min_stack(this); - this.resize().move().focus(); - this.onwindowize && this.onwindowize(); + this.removeClass("max"); + this.max = false; } - else if((state !== false) && !this.min){ + + if(!this.min){ stack_min.push(this); update_min_stack(); @@ -819,11 +797,32 @@ WinBox.prototype.minimize = function(state){ this.onminimize && this.onminimize(); } + return this; +}; + +/** + * @this WinBox + */ + +WinBox.prototype.restore = function(){ + + if(is_fullscreen){ + + cancel_fullscreen(this); + } + + if(this.min){ + + remove_min_stack(this); + this.resize().move().focus(); + this.onrestore && this.onrestore(); + } + if(this.max){ - this.removeClass("max"); this.max = false; - this.onminimize && this.onminimize(); + this.removeClass("max").resize().move().focus(); + this.onrestore && this.onrestore(); } return this; @@ -831,39 +830,37 @@ WinBox.prototype.minimize = function(state){ /** * @this WinBox - * @param {boolean=} state */ -WinBox.prototype.maximize = function(state){ +WinBox.prototype.maximize = function(){ - if(typeof state === "undefined" || (state !== this.max)){ + if(is_fullscreen){ - if(this.min){ + cancel_fullscreen(this); + } - remove_min_stack(this); - } + if(this.min){ - if((this.max = !this.max)){ + remove_min_stack(this); + } - this.addClass("max").resize( + if(!this.max){ - root_w - this.left - this.right, - root_h - this.top - this.bottom /* - 1 */, - true + this.addClass("max").resize( - ).move( + root_w - this.left - this.right, + root_h - this.top - this.bottom /* - 1 */, + true - this.left, - this.top, - true - ); - this.onmaximize && this.onmaximize(); - } - else{ + ).move( - this.resize().move().removeClass("max"); - this.onwindowize && this.onwindowize(); - } + this.left, + this.top, + true + ); + + this.max = true; + this.onmaximize && this.onmaximize(); } return this; @@ -871,33 +868,28 @@ WinBox.prototype.maximize = function(state){ /** * @this WinBox - * @param {boolean=} state */ -WinBox.prototype.fullscreen = function(state){ - - if(typeof state === "undefined" || (state !== is_fullscreen)){ - - if(this.min){ +WinBox.prototype.fullscreen = function(){ - this.resize().move(); - remove_min_stack(this); - } + if(this.min){ - // fullscreen could be changed by user manually! + remove_min_stack(this); + this.resize().move(); + } - if(!is_fullscreen || !cancel_fullscreen(this)){ + // fullscreen could be changed by user manually! - // requestFullscreen is executed as async and returns promise. - // in this case it is better to set the state to "this.full" after the requestFullscreen was fired, - // because it may break when browser does not support fullscreen properly and bypass it silently. + if(!is_fullscreen || !cancel_fullscreen(this)){ - //this.dom[prefix_request](); - this.body[prefix_request](); - is_fullscreen = true; - this.onfullscreen && this.onfullscreen(); - } + // requestFullscreen is executed as async and returns promise. + // in this case it is better to set the state to "this.full" after the requestFullscreen was fired, + // because it may break when browser does not support fullscreen properly and bypass it silently. + //this.dom[prefix_request](); + this.body[prefix_request](); + is_fullscreen = true; + this.onfullscreen && this.onfullscreen(); } return this; @@ -956,6 +948,8 @@ WinBox.prototype.close = function(force) { if(last_focus === this){ last_focus = null; + + // TODO focus next window } }; @@ -1059,7 +1053,7 @@ WinBox.prototype.hasClass = function(classname){ /* WinBox.prototype.use = function(plugin){ - plugin(this); + this.plugins.push(plugin); return this; }; -*/ +*/ \ No newline at end of file diff --git a/task/bundle.js b/task/bundle.js index 0346393..9206fe0 100644 --- a/task/bundle.js +++ b/task/bundle.js @@ -21,6 +21,7 @@ const style = process.argv[2] === "--style"; max: base64Sync('dist/img/max.svg'), close: base64Sync('dist/img/close.svg'), full: base64Sync('dist/img/full.svg'), + restore: base64Sync('dist/img/restore.svg'), //exit: base64Sync('dist/img/exit.svg'), min: base64Sync('dist/img/min.svg') };