From 1badeef3b8e03bb969330882a53ffd27986a3b25 Mon Sep 17 00:00:00 2001 From: Thomas Wilkerling Date: Tue, 9 Aug 2022 17:33:14 +0200 Subject: [PATCH] add custom template + titlebar icon --- README.md | 116 ++++++++++++++++++++++++- demo/heart-filled.svg | 3 + demo/heart.svg | 3 + demo/wikipedia.svg | 4 + dist/css/winbox.min.css | 2 +- dist/js/winbox.min.js | 41 ++++----- dist/winbox.bundle.min.js | 43 +++++----- index.html | 119 +++++++++++++++++++++++++- package.json | 2 +- src/css/winbox.css | 15 +++- src/css/winbox.less | 16 +++- src/js/helper.js | 27 +++++- src/js/template.js | 6 +- src/js/webpack.js | 4 +- src/js/winbox.js | 175 ++++++++++++++++++++++---------------- 15 files changed, 444 insertions(+), 132 deletions(-) create mode 100644 demo/heart-filled.svg create mode 100644 demo/heart.svg create mode 100644 demo/wikipedia.svg diff --git a/README.md b/README.md index 141855a..25110c5 100644 --- a/README.md +++ b/README.md @@ -182,6 +182,7 @@ Instance member methods: - winbox.**unmount**(dest) - winbox.**setUrl**(string) - winbox.**setTitle**(string) +- winbox.**setIcon**(url) - winbox.**move**(x, y) - winbox.**resize**(width, height) - winbox.**close**(boolean) @@ -202,6 +203,7 @@ Instance member methods: Instance properties (editable): - winbox.**id** +- winbox.**window** - winbox.**body** - winbox.**x** - winbox.**y** @@ -337,6 +339,12 @@ Callback methods: Set the border width of the window (supports all css units, like px, %, em, rem, vh, vmax). + + icon + string + Make the titlebar icon visible and set the image source to this url. + + class string @@ -486,6 +494,26 @@ new WinBox({ }); ``` +#### Custom Titlebar Icon + +> Supports all datatypes which are also supported by the style-attribute "background-image", e.g. URL, base64 encoded data. The default icon size is 20 x 20 pixels. + +```js +new WinBox({ + title: "Custom Icon", + icon: "img/icon.svg" +}); +``` + +Alternatively: + +```js +var winbox = new WinBox("Custom Icon"); +winbox.setIcon("img/icon.svg"); +``` + +See below in the style section to find out how to customize the titlebar icon style via css. + #### Custom Viewport > Define the available area (relative to the document) in which the window can move or could be resized (supports units "px" and "%"). @@ -833,10 +861,25 @@ var winbox = new WinBox(); winbox.body.innerHTML = "

Lorem Ipsum

"; ``` -> The parent element of the window body `winbox.body.parentNode` points to the window most outer root element which also holds the window control and state classes: + +Get the DOM element from the window outer frame: +```js +var winbox = new WinBox(); +var root = winbox.window; +``` + +You also can get the window element by DOM id: +```js +var winbox = new WinBox(); +var root = document.getElementById(winbox.id); +``` + +> The window element points to the window most outer root element which also holds the window control and state classes: + +You can access and modify the window DOM element directly: ```js -const root = winbox.body.parentNode; +const root = winbox.window; const hidden = root.classList.contains("hide"); const focused = root.classList.contains("focus"); root.classList.remove("modal"); @@ -844,7 +887,7 @@ root.classList.add("my-theme"); root.classList.toggle("my-toggle"); ``` -Equivalent to the example above (by using the WinBox built-in methods): +Or as an equivalent to the example above by using the WinBox built-in methods respectively: ```js const hidden = winbox.hasClass("hide"); @@ -854,6 +897,15 @@ winbox.addClass("my-theme"); winbox.toggleClass("my-toggle"); ``` +You can grab the `winbox` instance from the window outer frame DOM element: +```js +var winbox = new WinBox(); +// assume you have a DOM reference to the winbox window: +var window_element = document.getElementById(winbox.id); +// grab corresponding instance from window element: +winbox = window_element.winbox; +``` + #### Controls ```js @@ -1175,6 +1227,56 @@ The splitscreen from above will look like this grid: You can set the values for the viewport dynamically, doing this makes it possible to size the grid dynamically and also change the grid schema. + +## Custom WinBox Template (Layout + Controls) + +You can fully customize the WinBox window layout by providing a custom `template` via the config during creation. This way you can add new controls to you window and re-arrange them. + +This example will add a custom control button `.wb-custom` to the window toolbar by using a custom template along some CSS: +```css +.wb-custom { + background-image: url(img/heart.svg); + background-size: 20px auto; +} +.wb-custom.active { + background-image: url(img/heart-filled.svg); +} +``` + +Create by using a custom template: +```js +const template = document.createElement("div"); +template.innerHTML = ` +
+
+ + +
+
+
+
+`; + +const winbox = new WinBox("Custom Template", { template }); +``` + +Attach click listener to the control: +```js +const root = winbox.window; +const button = root.querySelector(".wb-custom"); + +button.onclick = function(){ + // get the window element: + const root = this.closest(".winbox"); + // get the winbox instance: + const winbox = root.winbox; + // "this" refers to the button which was clicked on: + this.classList.toggle("active"); +}; +``` + +> The `.wb-title` needs to be existing when the user should be able to move the window. + ## Customize Window @@ -1243,6 +1345,14 @@ Style the header title: .wb-title { font-size: 12px } ``` +Style the titlebar icon: +```css +.wb-image { + width: 35px; + background-size: 35px 35px; +} +``` + Style the window background (frame): ```css .winbox { diff --git a/demo/heart-filled.svg b/demo/heart-filled.svg new file mode 100644 index 0000000..b7c59ca --- /dev/null +++ b/demo/heart-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/demo/heart.svg b/demo/heart.svg new file mode 100644 index 0000000..c02c6b0 --- /dev/null +++ b/demo/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/demo/wikipedia.svg b/demo/wikipedia.svg new file mode 100644 index 0000000..c3550c0 --- /dev/null +++ b/demo/wikipedia.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/dist/css/winbox.min.css b/dist/css/winbox.min.css index 265bbee..99bb86d 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}}.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{position:absolute;left:0;top:0;width:100%;height:35px;color:#fff;overflow:hidden;z-index:1}.wb-n,.wb-s{height:10px;left:0}.wb-body{top:35px;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}body>.wb-body{position:relative;display:inline-block;visibility:hidden;contain:none}.wb-body,.wb-e,.wb-n,.wb-nw,.wb-s,.wb-w,.winbox iframe{position:absolute}.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-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e,.wb-ne,.wb-se{right:-5px}.wb-e{top:0;bottom:0;width:10px;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-w{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}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;position:absolute}.wb-ne{top:-5px}.wb-sw{bottom:-5px;left:-5px}.wb-se{position:absolute;bottom:-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,.wb-body .wb-hide,.wb-show,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-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 12px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto;background-position:4px center}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.winbox.min .wb-body{overflow:hidden;height:0}.winbox.hide{visibility:hidden}.winbox.max .wb-body{margin:0!important}.winbox iframe{width:100%;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-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert} \ No newline at end of file +@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.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-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body{top:35px;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-icon *,.wb-image{background-position:center;background-repeat:no-repeat}body>.wb-body{position:relative;display:inline-block;visibility:hidden;contain:none}.wb-title{font-family:Arial,sans-serif;font-size:14px;line-height:35px;height:100%;padding-left:10px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-image{display:none;width:20px;height:100%;margin:0 8px 0-2px;float:left;background-size:100%}.wb-e,.wb-w{width:10px;top:0}.wb-n,.wb-s{height:10px;position:absolute;left:0}.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e,.wb-ne,.wb-se{right:-5px}.wb-e{position:absolute;bottom:0;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-w{position:absolute;left:-5px;bottom:0;cursor:w-resize;z-index:2}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px}.wb-sw{bottom:-5px;left:-5px}.wb-se{position:absolute;bottom:-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%;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,.wb-body .wb-hide,.wb-show,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-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 12px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto;background-position:5px center}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.winbox.min .wb-body{overflow:hidden;height:0}.winbox.hide{visibility:hidden}.winbox.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{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-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert} \ No newline at end of file diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js index a025bcf..be1684f 100644 --- a/dist/js/winbox.min.js +++ b/dist/js/winbox.min.js @@ -1,27 +1,28 @@ /** - * WinBox.js v0.2.2 + * WinBox.js v0.2.3 * Copyright 2021 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var e,l=document.createElement("div");l.innerHTML="
";function m(a,b,c,f){a.addEventListener(b,c,f||!1===f?f:!0)}function p(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function t(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var x=[],y,z=0,A=0,C,E,F,G,H,L,Q; -function R(a,b){if(!(this instanceof R))return new R(a);y||S();var c,f,d;if(a){if(b){var k=a;a=b}if("string"===typeof a)k=a;else{(d=a.oncreate)&&d.call(this,a);if(f=a.modal)var h=c="center";var q=a.id;var I=a.root;var g=a.template;k=k||a.title;var B=a.mount;var u=a.html;var D=a.url;var n=a.width;var r=a.height;var v=a.minwidth;var w=a.minheight;h=a.x||h;c=a.y||c;var aa=a.min;var ba=a.max;var ca=a.hidden;var J=a.top;var K=a.left;var M=a.bottom;var N=a.right;C=a.index||C;var W=a.background;var O=a.border|| -0;var P=a["class"];var da=a.autosize;var ea=a.onclose;var fa=a.onfocus;var ha=a.onblur;var ia=a.onmove;var ja=a.onresize;var ka=a.onfullscreen;var la=a.onmaximize;var ma=a.onminimize;var na=a.onrestore;var oa=a.onhide;var pa=a.onshow;var qa=a.onload}}this.dom=g||l.cloneNode(!0);this.body=this.dom.getElementsByClassName("wb-body")[0];W&&this.setBackground(W);O&&t(this.body,"margin",O+(isNaN(O)?"":"px"));C=C||10;B?this.mount(B):u?this.body.innerHTML=u:D&&this.setUrl(D,qa);this.setTitle(k||"");a=L;b= -Q;J=J?T(J,b):0;M=M?T(M,b):0;K=K?T(K,a):0;N=N?T(N,a):0;a-=K+N;b-=J+M;v=v?T(v,a):150;w=w?T(w,b):35;da?((I||y).appendChild(this.body),n=Math.max(Math.min(this.body.clientWidth+2*O,a),v),r=Math.min(this.body.clientHeight+w+O,b),this.dom.appendChild(this.body)):(n=n?T(n,a):a/2|0,r=r?T(r,b):b/2|0);h=h?T(h,a,n):K;c=c?T(c,b,r):J;this.x=h;this.y=c;this.width=n;this.height=r;this.i=v;this.h=w;this.top=J;this.right=N;this.bottom=M;this.left=K;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose= -ea;this.onfocus=fa;this.onblur=ha;this.onmove=ia;this.onresize=ja;this.onfullscreen=ka;this.onmaximize=la;this.onminimize=ma;this.onrestore=na;this.onhide=oa;this.onshow=pa;this.dom.id=this.id=q||"winbox-"+ ++z;this.dom.className="winbox"+(P?" "+("string"===typeof P?P:P.join(" ")):"")+(f?" modal":"");this.dom.winbox=this;ba?this.maximize():aa?this.minimize():this.move().resize();ca?this.hide():this.focus();ra(this);(I||y).appendChild(this.dom)}R["new"]=function(a){return new R(a)}; -function T(a,b,c){"string"===typeof a&&("center"===a?a=(b-c)/2|0:"right"===a||"bottom"===a?a=b-c:(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c|0:c));return a}function S(){y=document.body;y[G="requestFullscreen"]||y[G="msRequestFullscreen"]||y[G="webkitRequestFullscreen"]||y[G="mozRequestFullscreen"]||(G="");H=G&&G.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");m(window,"resize",function(){U();V()});U()} -function ra(a){X(a,"title");X(a,"n");X(a,"s");X(a,"w");X(a,"e");X(a,"nw");X(a,"ne");X(a,"se");X(a,"sw");m(a.dom.getElementsByClassName("wb-min")[0],"click",function(b){p(b);a.min?a.restore():a.minimize()});m(a.dom.getElementsByClassName("wb-max")[0],"click",function(b){p(b);a.max?a.restore():a.maximize();a.focus()});G?m(a.dom.getElementsByClassName("wb-full")[0],"click",function(b){p(b);a.focus().fullscreen()}):a.addClass("no-full");m(a.dom.getElementsByClassName("wb-close")[0],"click",function(b){p(b); -a.close()||(a=null)});m(a.dom,"click",function(){a.focus()},!1)}function Y(a){x.splice(x.indexOf(a),1);V();a.removeClass("min");a.min=!1;a.dom.title=""}function V(){for(var a=x.length,b={},c={},f=0,d;fu){a.max?a.restore():a.maximize();return}if(a.min){a.restore();return}}a.max||a.min||(y.classList.add("wb-drag"),(h=g.touches)&&(h=h[0])?(g=h,m(window,"touchmove",f),m(window,"touchend",d)):(m(window,"mousemove",f),m(window,"mouseup",d)),q=g.pageX,I=g.pageY,a.focus())}function f(g){p(g);h&&(g=g.touches[0]);var B=g.pageX;g=g.pageY;var u=B-q,D=g-I,n;if("title"===b){a.x+=u;a.y+=D;var r=n=1}else{if("e"===b||"se"===b|| -"ne"===b){a.width+=u;var v=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=u,a.width-=u,r=v=1;if("s"===b||"se"===b||"sw"===b){a.height+=D;var w=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=D,a.height-=D,n=w=1}if(v||w)v&&(a.width=Math.max(Math.min(a.width,L-a.x-a.right),a.i)),w&&(a.height=Math.max(Math.min(a.height,Q-a.y-a.bottom),a.h)),a.resize();if(r||n)r&&(a.x=Math.max(Math.min(a.x,L-a.width-a.right),a.left)),n&&(a.y=Math.max(Math.min(a.y,Q-a.height-a.bottom),a.top)),a.move();q=B;I=g}function d(g){p(g); -y.classList.remove("wb-drag");h?(window.removeEventListener("touchmove",f,!0),window.removeEventListener("touchend",d,!0)):(window.removeEventListener("mousemove",f,!0),window.removeEventListener("mouseup",d,!0))}var k=a.dom.getElementsByClassName("wb-"+b)[0],h,q,I;m(k,"mousedown",c);m(k,"touchstart",c,{passive:!1})}function U(){var a=document.documentElement;L=a.clientWidth;Q=a.clientHeight}e=R.prototype; -e.mount=function(a){this.unmount();a.g||(a.g=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.g;c&&c.appendChild(b);b.g=a}return this};e.setTitle=function(a){a=this.title=a;this.dom.getElementsByClassName("wb-title")[0].firstChild.nodeValue=a;return this};e.setBackground=function(a){t(this.dom,"background",a);return this}; -e.setUrl=function(a,b){this.body.innerHTML='';b&&(this.body.firstChild.onload=b);return this};e.focus=function(a){if(!1===a)return this.blur();F!==this&&(F&&F.blur(),t(this.dom,"z-index",C++),this.addClass("focus"),F=this,this.focused=!0,this.onfocus&&this.onfocus());return this};e.blur=function(a){if(!1===a)return this.focus();F===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),F=null);return this}; +(function(){'use strict';var e,l=document.createElement("div");l.innerHTML="
";function m(a,b,c,g){a&&a.addEventListener(b,c,g||!1)}function p(a,b){var c=window;c&&c.removeEventListener(a,b,!1)}function t(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function u(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var y=[],z,aa=0,A=10,B,D,G,H,I,P; +function Q(a,b){if(!(this instanceof Q))return new Q(a);z||ba();var c,g,d;if(a){if(b){var k=a;a=b}if("string"===typeof a)k=a;else{(d=a.oncreate)&&d.call(this,a);if(g=a.modal)var h=c="center";var q=a.id;var J=a.root;var R=a.template;k=k||a.title;var f=a.icon;var C=a.mount;var v=a.html;var E=a.url;var n=a.width;var r=a.height;var w=a.minwidth;var x=a.minheight;h=a.x||h;c=a.y||c;var ca=a.min;var da=a.max;var ea=a.hidden;var K=a.top;var L=a.left;var M=a.bottom;var N=a.right;var F=a.index;var Y=a.background; +var O=a.border||0;var S=a["class"];var fa=a.autosize;var ha=a.onclose;var ia=a.onfocus;var ja=a.onblur;var ka=a.onmove;var la=a.onresize;var ma=a.onfullscreen;var na=a.onmaximize;var oa=a.onminimize;var pa=a.onrestore;var qa=a.onhide;var ra=a.onshow;var sa=a.onload}}this.g=R||l.cloneNode(!0);this.g.id=this.id=q||"winbox-"+ ++aa;this.g.className="winbox"+(S?" "+("string"===typeof S?S:S.join(" ")):"")+(g?" modal":"");this.g.winbox=this;this.window=this.g;this.body=this.g.getElementsByClassName("wb-body")[0]; +Y&&this.setBackground(Y);O&&u(this.body,"margin",O+(isNaN(O)?"":"px"));k&&this.setTitle(k);f&&this.setIcon(f);C?this.mount(C):v?this.body.innerHTML=v:E&&this.setUrl(E,sa);a=I;b=P;K=K?T(K,b):0;M=M?T(M,b):0;L=L?T(L,a):0;N=N?T(N,a):0;a-=L+N;b-=K+M;w=w?T(w,a):150;x=x?T(x,b):35;fa?((J||z).appendChild(this.body),n=Math.max(Math.min(this.body.clientWidth+2*O,a),w),r=Math.min(this.body.clientHeight+x+O,b),this.g.appendChild(this.body)):(n=n?T(n,a):a/2|0,r=r?T(r,b):b/2|0);h=h?T(h,a,n):L;c=c?T(c,b,r):K;this.x= +h;this.y=c;this.width=n;this.height=r;this.j=w;this.i=x;this.top=K;this.right=N;this.bottom=M;this.left=L;this.index=F;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose=ha;this.onfocus=ia;this.onblur=ja;this.onmove=ka;this.onresize=la;this.onfullscreen=ma;this.onmaximize=na;this.onminimize=oa;this.onrestore=pa;this.onhide=qa;this.onshow=ra;da?this.maximize():ca?this.minimize():this.resize().move();if(ea)this.hide();else if(this.focus(),F||0===F)this.index=F,u(this.g,"z-index",F), +F>A&&(A=F);ta(this);(J||z).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 ba(){z=document.body;z[G="requestFullscreen"]||z[G="msRequestFullscreen"]||z[G="webkitRequestFullscreen"]||z[G="mozRequestFullscreen"]||(G="");H=G&&G.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");m(window,"resize",function(){U();V()});U()} +function ta(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){t(b);a.min?a.focus().restore():a.blur().minimize()});m(a.g.getElementsByClassName("wb-max")[0],"click",function(b){t(b);a.max?a.restore():a.maximize();a.focus()});G?m(a.g.getElementsByClassName("wb-full")[0],"click",function(b){t(b);a.focus().fullscreen()}):a.addClass("no-full");m(a.g.getElementsByClassName("wb-close")[0],"click",function(b){t(b); +a.close()||(a=null)});m(a.g,"click",function(){a.focus()},!1)}function X(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={},g=0,d;gv){a.max?a.restore():a.maximize();return}}a.max||a.min||(z.classList.add("wb-drag"),(h=f.touches)&&(h=h[0])?(f=h,m(window,"touchmove",g),m(window,"touchend",d)):(m(window,"mousemove",g),m(window,"mouseup",d)),q=f.pageX,J=f.pageY)}function g(f){t(f);h&&(f=f.touches[0]);var C=f.pageX;f=f.pageY;var v=C-q,E=f-J,n;if("title"===b){a.x+=v;a.y+=E;var r=n=1}else{if("e"===b||"se"===b|| +"ne"===b){a.width+=v;var w=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=v,a.width-=v,r=w=1;if("s"===b||"se"===b||"sw"===b){a.height+=E;var x=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=E,a.height-=E,n=x=1}if(w||x)w&&(a.width=Math.max(Math.min(a.width,I-a.x-a.right),a.j)),x&&(a.height=Math.max(Math.min(a.height,P-a.y-a.bottom),a.i)),a.resize();if(r||n)r&&(a.x=Math.max(Math.min(a.x,I-a.width-a.right),a.left)),n&&(a.y=Math.max(Math.min(a.y,P-a.height-a.bottom),a.top)),a.move();q=C;J=f}function d(f){t(f); +z.classList.remove("wb-drag");h?(p("touchmove",g),p("touchend",d)):(p("mousemove",g),p("mouseup",d))}var k=a.g.getElementsByClassName("wb-"+b)[0];if(k){var h,q,J,R=0;m(k,"mousedown",c);m(k,"touchstart",c)}}function U(){var a=document.documentElement;I=a.clientWidth;P=a.clientHeight}e=Q.prototype;e.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this}; +e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.h;c&&c.appendChild(b);b.h=a}return this};e.setTitle=function(a){var b=this.g.getElementsByClassName("wb-title")[0];b=b.lastChild||b;a=this.title=a;var c=b.firstChild;c?c.nodeValue=a:b.textContent=a;return this};e.setIcon=function(a){var b=this.g.getElementsByClassName("wb-image")[0];u(b,"background-image","url("+a+")");u(b,"display","inline-block");return this};e.setBackground=function(a){u(this.g,"background",a);return this}; +e.setUrl=function(a,b){this.body.innerHTML='';b&&(this.body.firstChild.onload=b);return this};e.focus=function(a){if(!1===a)return this.blur();D!==this&&(D&&D.blur(),u(this.g,"z-index",++A),this.index=A,this.addClass("focus"),D=this,this.focused=!0,this.onfocus&&this.onfocus());return this};e.blur=function(a){if(!1===a)return this.focus();D===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),D=null);return this}; e.hide=function(a){if(!1===a)return this.show();if(!this.hidden)return this.onhide&&this.onhide(),this.hidden=!0,this.addClass("hide")};e.show=function(a){if(!1===a)return this.hide();if(this.hidden)return this.onshow&&this.onshow(),this.hidden=!1,this.removeClass("hide")}; -e.minimize=function(a){if(!1===a)return this.restore();E&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(x.push(this),V(),this.dom.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this};e.restore=function(){E&&Z();this.min&&(Y(this),this.resize().move().focus(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move().focus(),this.onrestore&&this.onrestore());return this}; -e.maximize=function(a){if(!1===a)return this.restore();E&&Z();this.min&&Y(this);this.max||(this.addClass("max").resize(L-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};e.fullscreen=function(a){this.min&&(Y(this),this.resize().move());if(!E||!Z())this.body[G](),E=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this}; -function Z(){E.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[H](),!0}e.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&Y(this);this.unmount();this.dom.parentNode.removeChild(this.dom);F===this&&(F=null)}; -e.move=function(a,b,c){a||0===a?c||(this.x=a?a=T(a,L-this.left-this.right,this.width):0,this.y=b?b=T(b,Q-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);t(this.dom,"transform","translate("+a+"px,"+b+"px)");this.onmove&&this.onmove(a,b);return this}; -e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=T(a,L-this.left-this.right):0,this.height=b?b=T(b,Q-this.top-this.bottom):0,a=Math.max(a,this.i),b=Math.max(b,this.h)):(a=this.width,b=this.height);t(this.dom,"width",a+"px");t(this.dom,"height",b+"px");this.onresize&&this.onresize(a,b);return this};e.addClass=function(a){this.dom.classList.add(a);return this};e.removeClass=function(a){this.dom.classList.remove(a);return this}; -e.toggleClass=function(a){return this.dom.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=R;}).call(this); +e.minimize=function(a){if(!1===a)return this.restore();B&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(y.push(this),V(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this};e.restore=function(){B&&Z();this.min&&(X(this),this.resize().move(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move(),this.onrestore&&this.onrestore());return this}; +e.maximize=function(a){if(!1===a)return this.restore();B&&Z();this.min&&X(this);this.max||(this.addClass("max").resize(I-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};e.fullscreen=function(a){this.min&&(X(this),this.resize().move());if(!B||!Z())this.body[G](),B=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this}; +function Z(){B.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[H](),!0}e.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&X(this);this.unmount();this.g.parentNode.removeChild(this.g);this.g.textContent="";this.g=this.body=this.g.winbox=null;D===this&&(D=null)}; +e.move=function(a,b,c){a||0===a?c||(this.x=a?a=T(a,I-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);u(this.g,"transform","translate("+a+"px,"+b+"px)");this.onmove&&this.onmove(a,b);return this}; +e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=T(a,I-this.left-this.right):0,this.height=b?b=T(b,P-this.top-this.bottom):0,a=Math.max(a,this.j),b=Math.max(b,this.i)):(a=this.width,b=this.height);u(this.g,"width",a+"px");u(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this};e.addClass=function(a){this.g.classList.add(a);return this};e.removeClass=function(a){this.g.classList.remove(a);return this}; +e.toggleClass=function(a){return this.g.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=Q;}).call(this); diff --git a/dist/winbox.bundle.min.js b/dist/winbox.bundle.min.js index 1a82972..9bbf9b4 100644 --- a/dist/winbox.bundle.min.js +++ b/dist/winbox.bundle.min.js @@ -1,28 +1,29 @@ /** - * WinBox.js v0.2.2 (Bundle) + * WinBox.js v0.2.3 (Bundle) * Copyright 2021 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var e,l=document.createElement("style");l.innerHTML="@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.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{position:absolute;left:0;top:0;width:100%;height:35px;color:#fff;overflow:hidden;z-index:1}.wb-n,.wb-s{height:10px;left:0}.wb-body{top:35px;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}body>.wb-body{position:relative;display:inline-block;visibility:hidden;contain:none}.wb-body,.wb-e,.wb-n,.wb-nw,.wb-s,.wb-w,.winbox iframe{position:absolute}.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-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e,.wb-ne,.wb-se{right:-5px}.wb-e{top:0;bottom:0;width:10px;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-w{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}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;position:absolute}.wb-ne{top:-5px}.wb-sw{bottom:-5px;left:-5px}.wb-se{position:absolute;bottom:-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,.wb-body .wb-hide,.wb-show,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-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 12px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto;background-position:4px center}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.winbox.min .wb-body{overflow:hidden;height:0}.winbox.hide{visibility:hidden}.winbox.max .wb-body{margin:0!important}.winbox iframe{width:100%;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-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert}"; -var m=document.getElementsByTagName("head")[0];m.firstChild?m.insertBefore(l,m.firstChild):m.appendChild(l);var p=document.createElement("div");p.innerHTML="
";function t(a,b,c,f){a.addEventListener(b,c,f||!1===f?f:!0)}function x(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function y(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var z=[],A,aa=0,C=0,E,F,G,H,L,P,R; -function S(a,b){if(!(this instanceof S))return new S(a);A||ba();var c,f,d;if(a){if(b){var k=a;a=b}if("string"===typeof a)k=a;else{(d=a.oncreate)&&d.call(this,a);if(f=a.modal)var h=c="center";var q=a.id;var I=a.root;var g=a.template;k=k||a.title;var B=a.mount;var u=a.html;var D=a.url;var n=a.width;var r=a.height;var v=a.minwidth;var w=a.minheight;h=a.x||h;c=a.y||c;var ca=a.min;var da=a.max;var ea=a.hidden;var J=a.top;var K=a.left;var M=a.bottom;var N=a.right;E=a.index||E;var Y=a.background;var O=a.border|| -0;var Q=a["class"];var fa=a.autosize;var ha=a.onclose;var ia=a.onfocus;var ja=a.onblur;var ka=a.onmove;var la=a.onresize;var ma=a.onfullscreen;var na=a.onmaximize;var oa=a.onminimize;var pa=a.onrestore;var qa=a.onhide;var ra=a.onshow;var sa=a.onload}}this.dom=g||p.cloneNode(!0);this.body=this.dom.getElementsByClassName("wb-body")[0];Y&&this.setBackground(Y);O&&y(this.body,"margin",O+(isNaN(O)?"":"px"));E=E||10;B?this.mount(B):u?this.body.innerHTML=u:D&&this.setUrl(D,sa);this.setTitle(k||"");a=P;b= -R;J=J?T(J,b):0;M=M?T(M,b):0;K=K?T(K,a):0;N=N?T(N,a):0;a-=K+N;b-=J+M;v=v?T(v,a):150;w=w?T(w,b):35;fa?((I||A).appendChild(this.body),n=Math.max(Math.min(this.body.clientWidth+2*O,a),v),r=Math.min(this.body.clientHeight+w+O,b),this.dom.appendChild(this.body)):(n=n?T(n,a):a/2|0,r=r?T(r,b):b/2|0);h=h?T(h,a,n):K;c=c?T(c,b,r):J;this.x=h;this.y=c;this.width=n;this.height=r;this.i=v;this.h=w;this.top=J;this.right=N;this.bottom=M;this.left=K;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose= -ha;this.onfocus=ia;this.onblur=ja;this.onmove=ka;this.onresize=la;this.onfullscreen=ma;this.onmaximize=na;this.onminimize=oa;this.onrestore=pa;this.onhide=qa;this.onshow=ra;this.dom.id=this.id=q||"winbox-"+ ++aa;this.dom.className="winbox"+(Q?" "+("string"===typeof Q?Q:Q.join(" ")):"")+(f?" modal":"");this.dom.winbox=this;da?this.maximize():ca?this.minimize():this.move().resize();ea?this.hide():this.focus();ta(this);(I||A).appendChild(this.dom)}S["new"]=function(a){return new S(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 ba(){A=document.body;A[H="requestFullscreen"]||A[H="msRequestFullscreen"]||A[H="webkitRequestFullscreen"]||A[H="mozRequestFullscreen"]||(H="");L=H&&H.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");t(window,"resize",function(){U();V()});U()} -function ta(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");t(a.dom.getElementsByClassName("wb-min")[0],"click",function(b){x(b);a.min?a.restore():a.minimize()});t(a.dom.getElementsByClassName("wb-max")[0],"click",function(b){x(b);a.max?a.restore():a.maximize();a.focus()});H?t(a.dom.getElementsByClassName("wb-full")[0],"click",function(b){x(b);a.focus().fullscreen()}):a.addClass("no-full");t(a.dom.getElementsByClassName("wb-close")[0],"click",function(b){x(b); -a.close()||(a=null)});t(a.dom,"click",function(){a.focus()},!1)}function X(a){z.splice(z.indexOf(a),1);V();a.removeClass("min");a.min=!1;a.dom.title=""}function V(){for(var a=z.length,b={},c={},f=0,d;fu){a.max?a.restore():a.maximize();return}if(a.min){a.restore();return}}a.max||a.min||(A.classList.add("wb-drag"),(h=g.touches)&&(h=h[0])?(g=h,t(window,"touchmove",f),t(window,"touchend",d)):(t(window,"mousemove",f),t(window,"mouseup",d)),q=g.pageX,I=g.pageY,a.focus())}function f(g){x(g);h&&(g=g.touches[0]);var B=g.pageX;g=g.pageY;var u=B-q,D=g-I,n;if("title"===b){a.x+=u;a.y+=D;var r=n=1}else{if("e"===b||"se"===b|| -"ne"===b){a.width+=u;var v=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=u,a.width-=u,r=v=1;if("s"===b||"se"===b||"sw"===b){a.height+=D;var w=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=D,a.height-=D,n=w=1}if(v||w)v&&(a.width=Math.max(Math.min(a.width,P-a.x-a.right),a.i)),w&&(a.height=Math.max(Math.min(a.height,R-a.y-a.bottom),a.h)),a.resize();if(r||n)r&&(a.x=Math.max(Math.min(a.x,P-a.width-a.right),a.left)),n&&(a.y=Math.max(Math.min(a.y,R-a.height-a.bottom),a.top)),a.move();q=B;I=g}function d(g){x(g); -A.classList.remove("wb-drag");h?(window.removeEventListener("touchmove",f,!0),window.removeEventListener("touchend",d,!0)):(window.removeEventListener("mousemove",f,!0),window.removeEventListener("mouseup",d,!0))}var k=a.dom.getElementsByClassName("wb-"+b)[0],h,q,I;t(k,"mousedown",c);t(k,"touchstart",c,{passive:!1})}function U(){var a=document.documentElement;P=a.clientWidth;R=a.clientHeight}e=S.prototype; -e.mount=function(a){this.unmount();a.g||(a.g=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this};e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.g;c&&c.appendChild(b);b.g=a}return this};e.setTitle=function(a){a=this.title=a;this.dom.getElementsByClassName("wb-title")[0].firstChild.nodeValue=a;return this};e.setBackground=function(a){y(this.dom,"background",a);return this}; -e.setUrl=function(a,b){this.body.innerHTML='';b&&(this.body.firstChild.onload=b);return this};e.focus=function(a){if(!1===a)return this.blur();G!==this&&(G&&G.blur(),y(this.dom,"z-index",E++),this.addClass("focus"),G=this,this.focused=!0,this.onfocus&&this.onfocus());return this};e.blur=function(a){if(!1===a)return this.focus();G===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),G=null);return this}; +(function(){'use strict';var e,l=document.createElement("style");l.innerHTML="@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.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-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body{top:35px;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict}.wb-icon *,.wb-image{background-position:center;background-repeat:no-repeat}body>.wb-body{position:relative;display:inline-block;visibility:hidden;contain:none}.wb-title{font-family:Arial,sans-serif;font-size:14px;line-height:35px;height:100%;padding-left:10px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-image{display:none;width:20px;height:100%;margin:0 8px 0-2px;float:left;background-size:100%}.wb-e,.wb-w{width:10px;top:0}.wb-n,.wb-s{height:10px;position:absolute;left:0}.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e,.wb-ne,.wb-se{right:-5px}.wb-e{position:absolute;bottom:0;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-w{position:absolute;left:-5px;bottom:0;cursor:w-resize;z-index:2}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;position:absolute}.wb-nw{top:-5px;left:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px}.wb-sw{bottom:-5px;left:-5px}.wb-se{position:absolute;bottom:-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%;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,.wb-body .wb-hide,.wb-show,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.winbox.max .wb-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 12px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto;background-position:5px center}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,body.wb-drag iframe{pointer-events:none}.winbox.min .wb-body{overflow:hidden;height:0}.winbox.hide{visibility:hidden}.winbox.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.no-animation,body.wb-drag .winbox{transition:none}.winbox.modal:before{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-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert}"; +var m=document.getElementsByTagName("head")[0];m.firstChild?m.insertBefore(l,m.firstChild):m.appendChild(l);var p=document.createElement("div");p.innerHTML="
";function t(a,b,c,g){a&&a.addEventListener(b,c,g||!1)}function u(a,b){var c=window;c&&c.removeEventListener(a,b,!1)}function y(a){a.stopPropagation();a.cancelable&&a.preventDefault()}function z(a,b,c){c=""+c;a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)};var A=[],B,ba=0,D=10,G,H,I,P,Q,R; +function U(a,b){if(!(this instanceof U))return new U(a);B||ca();var c,g,d;if(a){if(b){var k=a;a=b}if("string"===typeof a)k=a;else{(d=a.oncreate)&&d.call(this,a);if(g=a.modal)var h=c="center";var q=a.id;var J=a.root;var S=a.template;k=k||a.title;var f=a.icon;var C=a.mount;var v=a.html;var E=a.url;var n=a.width;var r=a.height;var w=a.minwidth;var x=a.minheight;h=a.x||h;c=a.y||c;var ea=a.min;var fa=a.max;var ha=a.hidden;var K=a.top;var L=a.left;var M=a.bottom;var N=a.right;var F=a.index;var aa=a.background; +var O=a.border||0;var T=a["class"];var ia=a.autosize;var ja=a.onclose;var ka=a.onfocus;var la=a.onblur;var ma=a.onmove;var na=a.onresize;var oa=a.onfullscreen;var pa=a.onmaximize;var qa=a.onminimize;var ra=a.onrestore;var sa=a.onhide;var ta=a.onshow;var ua=a.onload}}this.g=S||p.cloneNode(!0);this.g.id=this.id=q||"winbox-"+ ++ba;this.g.className="winbox"+(T?" "+("string"===typeof T?T:T.join(" ")):"")+(g?" modal":"");this.g.winbox=this;this.window=this.g;this.body=this.g.getElementsByClassName("wb-body")[0]; +aa&&this.setBackground(aa);O&&z(this.body,"margin",O+(isNaN(O)?"":"px"));k&&this.setTitle(k);f&&this.setIcon(f);C?this.mount(C):v?this.body.innerHTML=v:E&&this.setUrl(E,ua);a=Q;b=R;K=K?V(K,b):0;M=M?V(M,b):0;L=L?V(L,a):0;N=N?V(N,a):0;a-=L+N;b-=K+M;w=w?V(w,a):150;x=x?V(x,b):35;ia?((J||B).appendChild(this.body),n=Math.max(Math.min(this.body.clientWidth+2*O,a),w),r=Math.min(this.body.clientHeight+x+O,b),this.g.appendChild(this.body)):(n=n?V(n,a):a/2|0,r=r?V(r,b):b/2|0);h=h?V(h,a,n):L;c=c?V(c,b,r):K;this.x= +h;this.y=c;this.width=n;this.height=r;this.j=w;this.i=x;this.top=K;this.right=N;this.bottom=M;this.left=L;this.index=F;this.focused=this.hidden=this.full=this.max=this.min=!1;this.onclose=ja;this.onfocus=ka;this.onblur=la;this.onmove=ma;this.onresize=na;this.onfullscreen=oa;this.onmaximize=pa;this.onminimize=qa;this.onrestore=ra;this.onhide=sa;this.onshow=ta;fa?this.maximize():ea?this.minimize():this.resize().move();if(ha)this.hide();else if(this.focus(),F||0===F)this.index=F,z(this.g,"z-index",F), +F>D&&(D=F);da(this);(J||B).appendChild(this.g)}U["new"]=function(a){return new U(a)};function V(a,b,c){"string"===typeof a&&("center"===a?a=(b-c)/2|0:"right"===a||"bottom"===a?a=b-c:(c=parseFloat(a),a="%"===(""+c!==a&&a.substring((""+c).length))?b/100*c|0:c));return a} +function ca(){B=document.body;B[I="requestFullscreen"]||B[I="msRequestFullscreen"]||B[I="webkitRequestFullscreen"]||B[I="mozRequestFullscreen"]||(I="");P=I&&I.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit");t(window,"resize",function(){va();W()});va()} +function da(a){X(a,"title");X(a,"n");X(a,"s");X(a,"w");X(a,"e");X(a,"nw");X(a,"ne");X(a,"se");X(a,"sw");t(a.g.getElementsByClassName("wb-min")[0],"click",function(b){y(b);a.min?a.focus().restore():a.blur().minimize()});t(a.g.getElementsByClassName("wb-max")[0],"click",function(b){y(b);a.max?a.restore():a.maximize();a.focus()});I?t(a.g.getElementsByClassName("wb-full")[0],"click",function(b){y(b);a.focus().fullscreen()}):a.addClass("no-full");t(a.g.getElementsByClassName("wb-close")[0],"click",function(b){y(b); +a.close()||(a=null)});t(a.g,"click",function(){a.focus()},!1)}function Y(a){A.splice(A.indexOf(a),1);W();a.removeClass("min");a.min=!1;a.g.title=""}function W(){for(var a=A.length,b={},c={},g=0,d;gv){a.max?a.restore():a.maximize();return}}a.max||a.min||(B.classList.add("wb-drag"),(h=f.touches)&&(h=h[0])?(f=h,t(window,"touchmove",g),t(window,"touchend",d)):(t(window,"mousemove",g),t(window,"mouseup",d)),q=f.pageX,J=f.pageY)}function g(f){y(f);h&&(f=f.touches[0]);var C=f.pageX;f=f.pageY;var v=C-q,E=f-J,n;if("title"===b){a.x+=v;a.y+=E;var r=n=1}else{if("e"===b||"se"===b|| +"ne"===b){a.width+=v;var w=1}else if("w"===b||"sw"===b||"nw"===b)a.x+=v,a.width-=v,r=w=1;if("s"===b||"se"===b||"sw"===b){a.height+=E;var x=1}else if("n"===b||"ne"===b||"nw"===b)a.y+=E,a.height-=E,n=x=1}if(w||x)w&&(a.width=Math.max(Math.min(a.width,Q-a.x-a.right),a.j)),x&&(a.height=Math.max(Math.min(a.height,R-a.y-a.bottom),a.i)),a.resize();if(r||n)r&&(a.x=Math.max(Math.min(a.x,Q-a.width-a.right),a.left)),n&&(a.y=Math.max(Math.min(a.y,R-a.height-a.bottom),a.top)),a.move();q=C;J=f}function d(f){y(f); +B.classList.remove("wb-drag");h?(u("touchmove",g),u("touchend",d)):(u("mousemove",g),u("mouseup",d))}var k=a.g.getElementsByClassName("wb-"+b)[0];if(k){var h,q,J,S=0;t(k,"mousedown",c);t(k,"touchstart",c)}}function va(){var a=document.documentElement;Q=a.clientWidth;R=a.clientHeight}e=U.prototype;e.mount=function(a){this.unmount();a.h||(a.h=a.parentNode);this.body.textContent="";this.body.appendChild(a);return this}; +e.unmount=function(a){var b=this.body.firstChild;if(b){var c=a||b.h;c&&c.appendChild(b);b.h=a}return this};e.setTitle=function(a){var b=this.g.getElementsByClassName("wb-title")[0];b=b.lastChild||b;a=this.title=a;var c=b.firstChild;c?c.nodeValue=a:b.textContent=a;return this};e.setIcon=function(a){var b=this.g.getElementsByClassName("wb-image")[0];z(b,"background-image","url("+a+")");z(b,"display","inline-block");return this};e.setBackground=function(a){z(this.g,"background",a);return this}; +e.setUrl=function(a,b){this.body.innerHTML='';b&&(this.body.firstChild.onload=b);return this};e.focus=function(a){if(!1===a)return this.blur();H!==this&&(H&&H.blur(),z(this.g,"z-index",++D),this.index=D,this.addClass("focus"),H=this,this.focused=!0,this.onfocus&&this.onfocus());return this};e.blur=function(a){if(!1===a)return this.focus();H===this&&(this.removeClass("focus"),this.focused=!1,this.onblur&&this.onblur(),H=null);return this}; e.hide=function(a){if(!1===a)return this.show();if(!this.hidden)return this.onhide&&this.onhide(),this.hidden=!0,this.addClass("hide")};e.show=function(a){if(!1===a)return this.hide();if(this.hidden)return this.onshow&&this.onshow(),this.hidden=!1,this.removeClass("hide")}; -e.minimize=function(a){if(!1===a)return this.restore();F&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(z.push(this),V(),this.dom.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this};e.restore=function(){F&&Z();this.min&&(X(this),this.resize().move().focus(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move().focus(),this.onrestore&&this.onrestore());return this}; -e.maximize=function(a){if(!1===a)return this.restore();F&&Z();this.min&&X(this);this.max||(this.addClass("max").resize(P-this.left-this.right,R-this.top-this.bottom,!0).move(this.left,this.top,!0),this.max=!0,this.onmaximize&&this.onmaximize());return this};e.fullscreen=function(a){this.min&&(X(this),this.resize().move());if(!F||!Z())this.body[H](),F=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this}; -function Z(){F.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[L](),!0}e.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&X(this);this.unmount();this.dom.parentNode.removeChild(this.dom);G===this&&(G=null)}; -e.move=function(a,b,c){a||0===a?c||(this.x=a?a=T(a,P-this.left-this.right,this.width):0,this.y=b?b=T(b,R-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);y(this.dom,"transform","translate("+a+"px,"+b+"px)");this.onmove&&this.onmove(a,b);return this}; -e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=T(a,P-this.left-this.right):0,this.height=b?b=T(b,R-this.top-this.bottom):0,a=Math.max(a,this.i),b=Math.max(b,this.h)):(a=this.width,b=this.height);y(this.dom,"width",a+"px");y(this.dom,"height",b+"px");this.onresize&&this.onresize(a,b);return this};e.addClass=function(a){this.dom.classList.add(a);return this};e.removeClass=function(a){this.dom.classList.remove(a);return this}; -e.toggleClass=function(a){return this.dom.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=S;}).call(this); +e.minimize=function(a){if(!1===a)return this.restore();G&&Z();this.max&&(this.removeClass("max"),this.max=!1);this.min||(A.push(this),W(),this.g.title=this.title,this.addClass("min"),this.min=!0,this.onminimize&&this.onminimize());return this};e.restore=function(){G&&Z();this.min&&(Y(this),this.resize().move(),this.onrestore&&this.onrestore());this.max&&(this.max=!1,this.removeClass("max").resize().move(),this.onrestore&&this.onrestore());return this}; +e.maximize=function(a){if(!1===a)return this.restore();G&&Z();this.min&&Y(this);this.max||(this.addClass("max").resize(Q-this.left-this.right,R-this.top-this.bottom,!0).move(this.left,this.top,!0),this.max=!0,this.onmaximize&&this.onmaximize());return this};e.fullscreen=function(a){this.min&&(Y(this),this.resize().move());if(!G||!Z())this.body[I](),G=this,this.full=!0,this.onfullscreen&&this.onfullscreen();else if(!1===a)return this.restore();return this}; +function Z(){G.full=!1;if(document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)return document[P](),!0}e.close=function(a){if(this.onclose&&this.onclose(a))return!0;this.min&&Y(this);this.unmount();this.g.parentNode.removeChild(this.g);this.g.textContent="";this.g=this.body=this.g.winbox=null;H===this&&(H=null)}; +e.move=function(a,b,c){a||0===a?c||(this.x=a?a=V(a,Q-this.left-this.right,this.width):0,this.y=b?b=V(b,R-this.top-this.bottom,this.height):0):(a=this.x,b=this.y);z(this.g,"transform","translate("+a+"px,"+b+"px)");this.onmove&&this.onmove(a,b);return this}; +e.resize=function(a,b,c){a||0===a?c||(this.width=a?a=V(a,Q-this.left-this.right):0,this.height=b?b=V(b,R-this.top-this.bottom):0,a=Math.max(a,this.j),b=Math.max(b,this.i)):(a=this.width,b=this.height);z(this.g,"width",a+"px");z(this.g,"height",b+"px");this.onresize&&this.onresize(a,b);return this};e.addClass=function(a){this.g.classList.add(a);return this};e.removeClass=function(a){this.g.classList.remove(a);return this}; +e.toggleClass=function(a){return this.g.classList.contains(a)?this.removeClass(a):this.addClass(a)};window.WinBox=U;}).call(this); diff --git a/index.html b/index.html index df46054..30ad275 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + @@ -95,6 +95,16 @@ filter: invert(1); } + /* WinBox Custom Control */ + + .wb-custom { + background-image: url(demo/heart.svg); + background-size: 20px auto; + } + .wb-custom.active { + background-image: url(demo/heart-filled.svg); + } + @@ -201,6 +211,20 @@

WinBox is a modern HTML5 window manager for the web. Lightweight, outstandin
Run Code


+
+
+ Custom Icon (Titlebar) +

+ 
new WinBox({
+
+    title: "Custom Icon",
+    icon: "demo/wikipedia.svg",
+    background: "#252b4e"
+});
+
+
Run Code
+

+

Limit Viewport @@ -486,7 +510,7 @@

WinBox is a modern HTML5 window manager for the web. Lightweight, outstandin }
- Custom Icons + Customize Control Icons 

.wb-icon * {
     opacity: 0.65;
@@ -590,6 +614,51 @@ 
WinBox is a modern HTML5 window manager for the web. Lightweight, outstandin
             
Run Code

             


 
+            

+            

+            Custom Template (Layout, Controls)
+            


+            
.wb-custom {
+    background-image: url(demo/heart.svg);
+    background-size: 20px auto;
+}
+.wb-custom.active {
+    background-image: url(demo/heart-filled.svg);
+}

+            

+            
const template = document.createElement("div");
+template.innerHTML = `
+    <div class=wb-header>
+        <div class=wb-icon>
+            <span class=wb-custom></span>
+            <span class=wb-close></span>
+        </div>
+        <div class=wb-title></div>
+    </div>
+    <div class=wb-body></div>
+`;
+
+const winbox = new WinBox("Custom Template", { template });

+            

+            
const root = winbox.window;
+const button = root.querySelector(".wb-custom");
+
+button.onclick = function(){
+
+    // get the window root element:
+    const root = this.closest(".winbox");
+
+    // get the winbox instance:
+    const winbox = root.winbox;
+    console.log(winbox.id);
+
+    // "this" refers to the button which was clicked on:
+    this.classList.toggle("active");
+};

+            

+            
Run Code

+            


+