From 0fcb5453e0253a2d62575aea9351985ebe832363 Mon Sep 17 00:00:00 2001 From: Thomas Wilkerling Date: Tue, 20 Apr 2021 00:23:18 +0200 Subject: [PATCH] support toggle of modal state --- README.md | 14 +++++ dist/css/winbox.min.css | 2 +- dist/img/exit.svg | 2 +- dist/img/full.svg | 2 +- dist/js/winbox.min.js | 14 ++--- dist/winbox.bundle.js | 16 +++--- index.html | 5 ++ package.json | 4 +- src/css/control.less | 39 ++++++++++++++ src/css/winbox.css | 28 ++++++---- src/css/winbox.less | 29 ++++++----- src/img/exit.svg | 2 +- src/img/full.svg | 2 +- src/js/winbox.js | 110 +++++++++++++++++++--------------------- task/bundle.js | 3 +- 15 files changed, 168 insertions(+), 104 deletions(-) create mode 100644 src/css/control.less diff --git a/README.md b/README.md index 7d59d49..358d5ef 100644 --- a/README.md +++ b/README.md @@ -940,6 +940,20 @@ const winbox = WinBox({ }); ``` +## Custom Builds + +Go to the root directory of WinBox and run: +```cmd +npm install +``` + +Perform a build: +```cmd +npm run build +``` + +The final build is located in the `dist/` folder. + --- diff --git a/dist/css/winbox.min.css b/dist/css/winbox.min.css index 47659da..4488de8 100644 --- a/dist/css/winbox.min.css +++ b/dist/css/winbox.min.css @@ -1 +1 @@ -@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox{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:strict;text-align:left}.wb-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important;box-sizing:border-box}.wb-title{font-size:14px;padding-left:10px;cursor:move;line-height:35px;width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n,.wb-s{left:0;cursor:n-resize;position:absolute;height:10px}.winbox.min .wb-title{width:calc(100% - 65px)}.wb-n{top:-5px;right:0}.wb-e{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:w-resize}.wb-s{bottom:-5px;right:0}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-ne,.wb-nw,.wb-sw,.wb-w{width:10px;position:absolute}.wb-w{top:0;bottom:0;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{height:10px}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-sw{bottom:-5px}.wb-icon,.wb-se{position:absolute}.wb-se{bottom:-5px;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon{top:0;bottom:0;right:1px}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-title,.winbox.max>div,.winbox.min .wb-title,.winbox.min>div,.winbox.modal .wb-title,.winbox.modal>div{cursor:default}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.winbox.modal:after,.winbox.modal:before{content:'';position:fixed}.winbox.modal{contain:layout size}.winbox.modal:before{top:0;left:0;right:0;bottom:0;background:inherit}.winbox.modal:after{top:-50%;left:-50%;right:-50%;bottom:-50%;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1} \ No newline at end of file +@keyframes 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,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:strict;text-align:left}.wb-body,.wb-header,.wb-n{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important;box-sizing:border-box}.wb-title{font-size:14px;padding-left:10px;cursor:move;line-height:35px;width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winbox.min .wb-title{width:calc(100% - 65px)}.wb-n{top:-5px;right:0;height:10px;cursor:n-resize}.wb-e,.wb-w{top:0;position:absolute;width:10px}.wb-e{right:-5px;bottom:0;cursor:w-resize}.wb-s{position:absolute;bottom:-5px;left:0;right:0;height:10px;cursor:n-resize}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{bottom:0;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{position:absolute;width:10px;height:10px}.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:10px;height:10px;cursor:nw-resize}.wb-icon,.winbox.modal:before{top:0;bottom:0;position:absolute}.wb-icon{right:1px}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox.min .wb-title{cursor:default}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.winbox.modal{contain:layout size}.winbox.modal:before{content:'';left:0;right:0;background:inherit}.winbox.modal:after{content:'';position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1} \ No newline at end of file diff --git a/dist/img/exit.svg b/dist/img/exit.svg index e8b8aa6..633d756 100644 --- a/dist/img/exit.svg +++ b/dist/img/exit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/img/full.svg b/dist/img/full.svg index 1b838ff..a20964b 100644 --- a/dist/img/full.svg +++ b/dist/img/full.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js index 67ec663..7eb74b1 100644 --- a/dist/js/winbox.min.js +++ b/dist/js/winbox.min.js @@ -7,14 +7,14 @@ */ (function(){'use strict';var f,h=document.createElement("div");h.innerHTML="
";function p(a,b,c){a.addEventListener(b,c)}function q(a,b,c){a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)}function t(a){a.preventDefault();a.stopImmediatePropagation()};var u=document.documentElement,v=[],w=0,x,z,A,B,C,D,K; function L(a,b){if(!(this instanceof L))return new L(a);x||N();this.g=h.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];var c,g;if(a){if(b){var e=a;a=b}if("string"===typeof a)e=a;else{if(g=a.modal)var r=c="center";var E=a.id;var F=a.root;e=e||a.title;var d=a.mount;var G=a.html;var y=a.url;var k=a.width;var l=a.height;r=a.x||r;c=a.y||c;var H=a.max;var m=a.top;var n=a.left;var I=a.bottom;var J=a.right;x=a.index;var V=a.onclose;var W=a.onfocus;var X=a.onblur;var Y=a.onmove;var Z= -a.onresize;b=a.background;var R=a.border;var M=a["class"];b&&this.setBackground(b);R&&q(this.body,"margin",R+"px")}}this.setTitle(e||"");a=D;e=K;m=m?O(m,e):0;I=I?O(I,e):0;n=n?O(n,a):0;J=J?O(J,a):0;a-=n+J;e-=m+I;k=k?O(k,a):a/2;l=l?O(l,e):e/2;r=r?O(r,a,k):n;c=c?O(c,e,l):m;x=x||10;this.g.className="winbox"+(g?" modal":"")+(M?" "+("string"===typeof M?M:M.join(" ")):"");this.g.id=this.id=E||"winbox-"+ ++w;this.x=r;this.y=c;this.width=k;this.height=l;this.top=m;this.right=J;this.bottom=I;this.left=n;this.max= -this.min=!1;this.j=V;this.l=W;this.i=X;this.o=Y;this.m=Z;H?this.maximize().focus():this.move().resize().focus();d?this.mount(d):G?this.body.innerHTML=G:y&&this.setUrl(y);aa(this,g);(F||document.body).appendChild(this.g)}L["new"]=function(a){return new L(a)};function O(a,b,c){"center"===a?a=(b-c)/2:"string"===typeof a&&(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c:c);return a} +a.onresize;b=a.background;var R=a.border;var M=a["class"];b&&this.setBackground(b);R&&q(this.body,"margin",R+"px")}}this.setTitle(e||"");a=D;e=K;m=m?O(m,e):0;I=I?O(I,e):0;n=n?O(n,a):0;J=J?O(J,a):0;a-=n+J;e-=m+I;k=k?O(k,a):a/2;l=l?O(l,e):e/2;r=r?O(r,a,k):n;c=c?O(c,e,l):m;x=x||10;this.g.id=this.id=E||"winbox-"+ ++w;this.g.className="winbox"+(M?" "+("string"===typeof M?M:M.join(" ")):"")+(g?" modal":"");this.x=r;this.y=c;this.width=k;this.height=l;this.top=m;this.right=J;this.bottom=I;this.left=n;this.max= +this.min=!1;this.j=V;this.l=W;this.i=X;this.o=Y;this.m=Z;H?this.maximize().focus():this.move().resize().focus();d?this.mount(d):G?this.body.innerHTML=G:y&&this.setUrl(y);aa(this);(F||document.body).appendChild(this.g)}L["new"]=function(a){return new L(a)};function O(a,b,c){"center"===a?a=(b-c)/2:"string"===typeof a&&(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c:c);return a} function N(){var a=document.body;a[B="requestFullscreen"]||a[B="msRequestFullscreen"]||a[B="webkitRequestFullscreen"]||a[B="mozRequestFullscreen"]||(B="");C=B&&B.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");p(window,"resize",function(){P();Q()});P()} -function aa(a,b){b||(S(a,"title"),S(a,"n"),S(a,"s"),S(a,"w"),S(a,"e"),S(a,"nw"),S(a,"ne"),S(a,"se"),S(a,"sw"),p(a.g.getElementsByClassName("wb-min")[0],"click",function(c){P();a.minimize();t(c)}),p(a.g.getElementsByClassName("wb-max")[0],"click",function(c){P();a.maximize();t(c)}),B?p(a.g.getElementsByClassName("wb-full")[0],"click",function(c){a.fullscreen();t(c)}):q(a.g.getElementsByClassName("wb-full")[0],"display","none"),p(a.g,"mousedown",function(){a.focus()}));p(a.g.getElementsByClassName("wb-close")[0], -"click",function(c){a.close();a=null;t(c)})}function T(a){v.splice(v.indexOf(a),1);Q();a.g.classList.remove("min");a.min=!1;a.g.title=""}function Q(){for(var a=v.length,b=Math.min(D/a,250),c=0,g;c';return this}; f.focus=function(){A!==this&&(q(this.g,"z-index",x++),this.g.classList.add("focus"),A&&(A.g.classList.remove("focus"),A.i&&A.i()),A=this,this.l&&this.l());return this};f.minimize=function(a){z&&U();!a&&this.min?(T(this),this.resize().move()):!1===a||this.min||(v.push(this),this.g.classList.add("min"),Q(),this.g.title=this.title,this.min=!0);this.max&&(this.g.classList.remove("max"),this.max=!1);return this}; f.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&T(this),(this.max=!this.max)?(this.g.classList.add("max"),this.resize(D-this.left-this.right,K-this.top-this.bottom-1,!0).move(this.left,this.top,!0)):(this.resize().move(),this.g.classList.remove("max"));return this};f.fullscreen=function(a){if("undefined"===typeof a||a!==z)this.min&&(this.resize().move(),T(this)),z&&U()||(this.body[B](),z=!0);return this}; diff --git a/dist/winbox.bundle.js b/dist/winbox.bundle.js index 1a8183f..99935ab 100644 --- a/dist/winbox.bundle.js +++ b/dist/winbox.bundle.js @@ -5,17 +5,17 @@ * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var f,h=document.createElement("style");h.innerHTML="@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.wb-header,.wb-title{width:100%;height:35px;vertical-align:middle}.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;z-index:10;text-align:left}.wb-body,.wb-header,.wb-n{position:absolute;right:0;left:0}.wb-header{display:table;table-layout:fixed;top:0;color:#fff}.wb-body{top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important;box-sizing:border-box}.wb-title{display:table-cell;font-size:14px;padding-left:10px;cursor:move}.wb-title span{display:block;width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winbox.min .wb-title span{width:calc(100% - 65px)}.wb-n{top:-45px;height:50px;cursor:n-resize}.wb-e,.wb-w{top:0;width:10px}.wb-nw,.wb-s,.winbox iframe{position:absolute;height:10px}.wb-e{position:absolute;right:-5px;bottom:0;cursor:w-resize}.wb-s{bottom:-5px;left:0;right:0;cursor:n-resize}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{position:absolute;bottom:0;cursor:w-resize}.wb-nw{top:-5px;width:10px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;width:10px;height:10px;position:absolute}.wb-ne{top:-5px;right:-5px}.wb-sw{bottom:-5px}.wb-icon,.wb-se{position:absolute}.wb-se{bottom:-5px;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon{top:0;bottom:0;right:0;padding-right:2px}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-title,.winbox.max>div,.winbox.min .wb-title,.winbox.min>div,.winbox.modal .wb-title,.winbox.modal>div{cursor:default}.winbox iframe{width:100%;height:100%;border:0}.winbox.modal:after,.winbox.modal:before{content:'';position:fixed}.winbox.modal{overflow:visible;contain:layout size style}.winbox.modal:before{top:0;left:0;right:0;bottom:0;background:inherit}.winbox.modal:after{top:-50%;left:-50%;right:-50%;bottom:-50%;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}"; +(function(){'use strict';var f,h=document.createElement("style");h.innerHTML="@keyframes 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,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:strict;text-align:left}.wb-body,.wb-header,.wb-n{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important;box-sizing:border-box}.wb-title{font-size:14px;padding-left:10px;cursor:move;line-height:35px;width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winbox.min .wb-title{width:calc(100% - 65px)}.wb-n{top:-5px;right:0;height:10px;cursor:n-resize}.wb-e,.wb-w{top:0;position:absolute;width:10px}.wb-e{right:-5px;bottom:0;cursor:w-resize}.wb-s{position:absolute;bottom:-5px;left:0;right:0;height:10px;cursor:n-resize}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{bottom:0;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{position:absolute;width:10px;height:10px}.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:10px;height:10px;cursor:nw-resize}.wb-icon,.winbox.modal:before{top:0;bottom:0;position:absolute}.wb-icon{right:1px}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox.min .wb-title{cursor:default}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.winbox.modal{contain:layout size}.winbox.modal:before{content:'';left:0;right:0;background:inherit}.winbox.modal:after{content:'';position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}"; var p=document.getElementsByTagName("head")[0];p.firstChild?p.insertBefore(h,p.firstChild):p.appendChild(h);var q=document.createElement("div");q.innerHTML="
";function t(a,b,c){a.addEventListener(b,c)}function u(a,b,c){a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)}function v(a){a.preventDefault();a.stopImmediatePropagation()};var w=document.documentElement,x=[],z=0,A,B,C,D,K,L,M; function O(a,b){if(!(this instanceof O))return new O(a);A||P();this.g=q.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];var c,g;if(a){if(b){var e=a;a=b}if("string"===typeof a)e=a;else{if(g=a.modal)var r=c="center";var E=a.id;var F=a.root;e=e||a.title;var d=a.mount;var G=a.html;var y=a.url;var k=a.width;var l=a.height;r=a.x||r;c=a.y||c;var H=a.max;var m=a.top;var n=a.left;var I=a.bottom;var J=a.right;A=a.index;var X=a.onclose;var Y=a.onfocus;var Z=a.onblur;var aa=a.onmove;var ba= -a.onresize;b=a.background;var T=a.border;var N=a["class"];b&&this.setBackground(b);T&&u(this.body,"margin",T+"px")}}this.setTitle(e||"");a=L;e=M;m=m?Q(m,e):0;I=I?Q(I,e):0;n=n?Q(n,a):0;J=J?Q(J,a):0;a-=n+J;e-=m+I;k=k?Q(k,a):a/2;l=l?Q(l,e):e/2;r=r?Q(r,a,k):n;c=c?Q(c,e,l):m;A=A||10;this.g.className="winbox"+(g?" modal":"")+(N?" "+("string"===typeof N?N:N.join(" ")):"");this.g.id=this.id=E||"winbox-"+ ++z;this.x=r;this.y=c;this.width=k;this.height=l;this.top=m;this.right=J;this.bottom=I;this.left=n;this.max= -this.min=!1;this.j=X;this.l=Y;this.i=Z;this.o=aa;this.m=ba;H?this.maximize().focus():this.move().resize().focus();d?this.mount(d):G?this.body.innerHTML=G:y&&this.setUrl(y);ca(this,g);(F||document.body).appendChild(this.g)}O["new"]=function(a){return new O(a)};function Q(a,b,c){"center"===a?a=(b-c)/2:"string"===typeof a&&(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c:c);return a} +a.onresize;b=a.background;var T=a.border;var N=a["class"];b&&this.setBackground(b);T&&u(this.body,"margin",T+"px")}}this.setTitle(e||"");a=L;e=M;m=m?Q(m,e):0;I=I?Q(I,e):0;n=n?Q(n,a):0;J=J?Q(J,a):0;a-=n+J;e-=m+I;k=k?Q(k,a):a/2;l=l?Q(l,e):e/2;r=r?Q(r,a,k):n;c=c?Q(c,e,l):m;A=A||10;this.g.id=this.id=E||"winbox-"+ ++z;this.g.className="winbox"+(N?" "+("string"===typeof N?N:N.join(" ")):"")+(g?" modal":"");this.x=r;this.y=c;this.width=k;this.height=l;this.top=m;this.right=J;this.bottom=I;this.left=n;this.max= +this.min=!1;this.j=X;this.l=Y;this.i=Z;this.o=aa;this.m=ba;H?this.maximize().focus():this.move().resize().focus();d?this.mount(d):G?this.body.innerHTML=G:y&&this.setUrl(y);ca(this);(F||document.body).appendChild(this.g)}O["new"]=function(a){return new O(a)};function Q(a,b,c){"center"===a?a=(b-c)/2:"string"===typeof a&&(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c:c);return a} function P(){var a=document.body;a[D="requestFullscreen"]||a[D="msRequestFullscreen"]||a[D="webkitRequestFullscreen"]||a[D="mozRequestFullscreen"]||(D="");K=D&&D.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");t(window,"resize",function(){R();S()});R()} -function ca(a,b){b||(U(a,"title"),U(a,"n"),U(a,"s"),U(a,"w"),U(a,"e"),U(a,"nw"),U(a,"ne"),U(a,"se"),U(a,"sw"),t(a.g.getElementsByClassName("wb-min")[0],"click",function(c){R();a.minimize();v(c)}),t(a.g.getElementsByClassName("wb-max")[0],"click",function(c){R();a.maximize();v(c)}),D?t(a.g.getElementsByClassName("wb-full")[0],"click",function(c){a.fullscreen();v(c)}):u(a.g.getElementsByClassName("wb-full")[0],"display","none"),t(a.g,"mousedown",function(){a.focus()}));t(a.g.getElementsByClassName("wb-close")[0], -"click",function(c){a.close();a=null;v(c)})}function V(a){x.splice(x.indexOf(a),1);S();a.g.classList.remove("min");a.min=!1;a.g.title=""}function S(){for(var a=x.length,b=Math.min(L/a,250),c=0,g;c';return this}; f.focus=function(){C!==this&&(u(this.g,"z-index",A++),this.g.classList.add("focus"),C&&(C.g.classList.remove("focus"),C.i&&C.i()),C=this,this.l&&this.l());return this};f.minimize=function(a){B&&W();!a&&this.min?(V(this),this.resize().move()):!1===a||this.min||(x.push(this),this.g.classList.add("min"),S(),this.g.title=this.title,this.min=!0);this.max&&(this.g.classList.remove("max"),this.max=!1);return this}; f.maximize=function(a){if("undefined"===typeof a||a!==this.max)this.min&&V(this),(this.max=!this.max)?(this.g.classList.add("max"),this.resize(L-this.left-this.right,M-this.top-this.bottom-1,!0).move(this.left,this.top,!0)):(this.resize().move(),this.g.classList.remove("max"));return this};f.fullscreen=function(a){if("undefined"===typeof a||a!==B)this.min&&(this.resize().move(),V(this)),B&&W()||(this.body[D](),B=!0);return this}; diff --git a/index.html b/index.html index 57d08fa..7077e19 100644 --- a/index.html +++ b/index.html @@ -565,6 +565,7 @@

Lorem Ipsum

+ @@ -778,6 +779,10 @@

Lorem Ipsum

(Math.random() * 255 | 0) + ")" ); }, + modal: function(){ + + winbox.body.parentNode.classList.toggle("modal"); + }, close: function(){ winbox.close(); diff --git a/package.json b/package.json index e7f1d6f..770bf32 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,12 @@ "copy": "cpx \"src/img/*.*\" dist/img/", "clean": "if exist dist rmdir dist /s /q && mkdir dist", "build:css": "lessc --autoprefix=\">=1%\" src/css/winbox.less src/css/winbox.css", - "build:css:bundle": "cpx \"src/css/winbox.less\" tmp/ && lessc --autoprefix=\">=1%\" --csswring=\"--sourcemap --preserve-hacks\" --clean-css=\"--s1 --advanced --rebase\" tmp/winbox.less tmp/winbox.min.css && csso tmp/winbox.min.css --output tmp/winbox.min.css && cpx \"tmp/winbox.min.css\" dist/css/", + "build:css:bundle": "node task/bundle --image && lessc --autoprefix=\">=1%\" --csswring=\"--sourcemap --preserve-hacks\" --clean-css=\"--s1 --advanced --rebase\" tmp/bundle.less dist/css/winbox.min.css && csso dist/css/winbox.min.css --output dist/css/winbox.min.css", "build:css:themes": "lessc --autoprefix=\">=1%\" --csswring=\"--sourcemap --preserve-hacks\" --clean-css=\"--s1 --advanced --rebase\" src/css/themes/modern.less dist/css/themes/modern.min.css && csso dist/css/themes/modern.min.css --output dist/css/themes/modern.min.css", "build:js": "node task/build", "build:bundle": "node task/build --bundle", "build:svg": "node task/svgo", - "build": "npm run clean && npm run copy && npm run build:svg && node task/bundle --image && npm run build:css && npm run build:css:bundle && npm run build:css:themes && node task/bundle --style && npm run build:js && npm run build:bundle && echo Build Complete. && exit 0", + "build": "npm run clean && npm run copy && npm run build:svg && npm run build:css && npm run build:css:bundle && npm run build:css:themes && node task/bundle --style && npm run build:js && npm run build:bundle && echo Build Complete. && exit 0", "server": "node task/server.js", "update": "npm install svgo@latest && npm install base64-img@latest && npm install cpx@latest && npm install csso@latest && npm install csso-cli@latest && npm install google-closure-compiler@nightly && npm install less@latest && npm install less-plugin-autoprefix@latest && npm install less-plugin-clean-css@latest && npm install web-servo@latest" }, diff --git a/src/css/control.less b/src/css/control.less new file mode 100644 index 0000000..53753e0 --- /dev/null +++ b/src/css/control.less @@ -0,0 +1,39 @@ +.winbox.no-animation { + transition: none +} + +.winbox.no-shadow { + box-shadow: none +} + +.winbox.no-header .wb-header { + display: none +} + +.winbox.no-header .wb-body { + top: 0 +} + +.winbox.no-min .wb-min { + display: none +} + +.winbox.no-max .wb-max { + display: none +} + +.winbox.no-full .wb-full { + display: none +} + +.winbox.no-close .wb-close { + display: none +} + +.winbox.no-resize .wb-body ~ div { + display: none +} + +.winbox.no-move:not(.min) .wb-title { + pointer-events: none +} \ No newline at end of file diff --git a/src/css/winbox.css b/src/css/winbox.css index 3b786dc..47f09d7 100644 --- a/src/css/winbox.css +++ b/src/css/winbox.css @@ -161,12 +161,14 @@ .winbox:fullscreen > div, .winbox:fullscreen .wb-title, */ -.winbox.modal > div, +.winbox.modal .wb-body ~ div, .winbox.modal .wb-title, -.winbox.min > div, -.winbox.min .wb-title, -.winbox.max > div, +.winbox.min .wb-body ~ div, +.winbox.max .wb-body ~ div, .winbox.max .wb-title { + pointer-events: none; +} +.winbox.min .wb-title { cursor: default; } .winbox iframe { @@ -177,10 +179,16 @@ } .winbox.modal { contain: layout size; + /* + .wb-body ~ div, + .wb-title { + pointer-events: none; + } + */ } .winbox.modal:before { content: ''; - position: fixed; + position: absolute; top: 0; left: 0; right: 0; @@ -189,11 +197,11 @@ } .winbox.modal:after { content: ''; - position: fixed; - top: -50%; - left: -50%; - right: -50%; - bottom: -50%; + position: absolute; + top: -100vh; + left: -100vw; + right: -100vw; + bottom: -100vh; background: #0d1117; animation: fade-in 0.2s ease-out forwards; z-index: -1; diff --git a/src/css/winbox.less b/src/css/winbox.less index 6928b20..5823290 100644 --- a/src/css/winbox.less +++ b/src/css/winbox.less @@ -1,4 +1,5 @@ @import "images.less"; +//@import "control.less"; .winbox { position: fixed; @@ -12,7 +13,6 @@ transition-timing-function: cubic-bezier(0.3, 1, 0.3, 1); will-change: transform, width, height; contain: strict; - //z-index: 10; /* explicitly set text align to left fixes an issue with iframes alignment when centered */ text-align: left; } @@ -185,12 +185,17 @@ .winbox:fullscreen > div, .winbox:fullscreen .wb-title, */ -.winbox.modal > div, + +.winbox.modal .wb-body ~ div, .winbox.modal .wb-title, -.winbox.min > div, -.winbox.min .wb-title, -.winbox.max > div, -.winbox.max .wb-title{ +.winbox.min .wb-body ~ div, +//.winbox.min .wb-title, +.winbox.max .wb-body ~ div, +.winbox.max .wb-title { + pointer-events: none; +} + +.winbox.min .wb-title{ cursor: default; } @@ -208,7 +213,7 @@ } &:before{ content: ''; - position: fixed; + position: absolute; top: 0; left: 0; right: 0; @@ -217,11 +222,11 @@ } &:after{ content: ''; - position: fixed; - top: -50%; - left: -50%; - right: -50%; - bottom: -50%; + position: absolute; + top: -100vh; + left: -100vw; + right: -100vw; + bottom: -100vh; background: #0d1117; animation: fade-in 0.2s ease-out forwards; z-index: -1; diff --git a/src/img/exit.svg b/src/img/exit.svg index 21fb686..5b5952c 100644 --- a/src/img/exit.svg +++ b/src/img/exit.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/img/full.svg b/src/img/full.svg index 5123491..0f1b007 100644 --- a/src/img/full.svg +++ b/src/img/full.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/js/winbox.js b/src/js/winbox.js index a0a9c63..a14a1d5 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -142,11 +142,10 @@ function WinBox(params, _title){ index = index || 10; - this.dom.className = "winbox" + (modal ? " modal" : "") + - (classname ? " " + (typeof classname === "string" ? classname : classname.join(" ")) : ""); this.dom.id = this.id = id || ("winbox-" + (++id_counter)); - + this.dom.className = "winbox" + (classname ? " " + (typeof classname === "string" ? classname : classname.join(" ")) : "") + + (modal ? " modal" : ""); this.x = x; this.y = y; this.width = width; @@ -189,7 +188,7 @@ function WinBox(params, _title){ this.setUrl(url); } - register(this, modal); + register(this); (root || document.body).appendChild(this.dom); } @@ -263,55 +262,46 @@ function setup(){ /** * @param {WinBox} self - * @param {boolean=} modal */ -function register(self, modal){ - - if(!modal){ +function register(self){ - addWindowListener(self, "title"); - addWindowListener(self, "n"); - addWindowListener(self, "s"); - addWindowListener(self, "w"); - addWindowListener(self, "e"); - addWindowListener(self, "nw"); - addWindowListener(self, "ne"); - addWindowListener(self, "se"); - addWindowListener(self, "sw"); + addWindowListener(self, "title"); + addWindowListener(self, "n"); + addWindowListener(self, "s"); + addWindowListener(self, "w"); + addWindowListener(self, "e"); + addWindowListener(self, "nw"); + addWindowListener(self, "ne"); + addWindowListener(self, "se"); + addWindowListener(self, "sw"); - addListener(getByClass(self.dom, "wb-min"), "click", function(event){ + addListener(getByClass(self.dom, "wb-min"), "click", function(event){ - init(); - self.minimize(); - preventEvent(event); - }); - - addListener(getByClass(self.dom, "wb-max"), "click", function(event){ - - init(); - self.maximize(); - preventEvent(event); - }); - - if(prefix_request){ + init(); + self.minimize(); + preventEvent(event); + }); - addListener(getByClass(self.dom, "wb-full"), "click", function(event){ + addListener(getByClass(self.dom, "wb-max"), "click", function(event){ - self.fullscreen(); - preventEvent(event); - }); - } - else{ + init(); + self.maximize(); + preventEvent(event); + }); - setStyle(getByClass(self.dom, "wb-full"), "display", "none"); - } + if(prefix_request){ - addListener(self.dom, "mousedown", function(event){ + addListener(getByClass(self.dom, "wb-full"), "click", function(event){ - self.focus(); + self.fullscreen(); + preventEvent(event); }); } + else{ + + setStyle(getByClass(self.dom, "wb-full"), "display", "none"); + } addListener(getByClass(self.dom, "wb-close"), "click", function(event){ @@ -320,6 +310,11 @@ function register(self, modal){ preventEvent(event); }); + + addListener(self.dom, "mousedown", function(event){ + + self.focus(); + }); } /** @@ -389,31 +384,28 @@ function addWindowListener(self, dir){ remove_min_stack(self); self.resize().move(); } - else{ - - if(!self.min && !self.max){ + else /*if(!self.min && !self.max)*/ { // already disabled by css - disable_animation(self); + disable_animation(self); - addListener(window, "mousemove", handler_mousemove); - addListener(window, "mouseup", handler_mouseup); - addListener(window, "touchmove", handler_mousemove); - addListener(window, "touchend", handler_mouseup); + addListener(window, "mousemove", handler_mousemove); + addListener(window, "mouseup", handler_mouseup); + addListener(window, "touchmove", handler_mousemove); + addListener(window, "touchend", handler_mouseup); - if(event.touches){ + if(event.touches){ - event = event.touches[0] || event; - } + event = event.touches[0] || event; + } - x = event.pageX; - y = event.pageY; + x = event.pageX; + y = event.pageY; - // appearing scrollbars on the root element does not trigger "window.onresize", - // force refresh window size via init() + // appearing scrollbars on the root element does not trigger "window.onresize", + // force refresh window size via init() - init(); - self.focus(); - } + init(); + self.focus(); } } diff --git a/task/bundle.js b/task/bundle.js index a2f8c48..4673ca6 100644 --- a/task/bundle.js +++ b/task/bundle.js @@ -31,6 +31,7 @@ const style = process.argv[2] === "--style"; } writeFileSync("tmp/images.less", tmp); + writeFileSync("tmp/bundle.less", '@import "../src/css/winbox.less"; @import "images.less";'); } // ---------------------- @@ -47,7 +48,7 @@ const style = process.argv[2] === "--style"; writeFileSync("tmp/style.js", 'const style = document.createElement("style");' + - 'style.innerHTML = "' + readFileSync("tmp/winbox.css", "utf8") + '";' + + 'style.innerHTML = "' + readFileSync("dist/css/winbox.min.css", "utf8") + '";' + 'const head = document.getElementsByTagName("head")[0];' + 'if(head.firstChild) head.insertBefore(style, head.firstChild); else head.appendChild(style);' );