nextapps-de / winbox Goto Github PK
View Code? Open in Web Editor NEWWinBox is a modern HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!
License: Apache License 2.0
WinBox is a modern HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!
License: Apache License 2.0
on
, once
and off
so clients can add multiple handlers to the same event, listen only once and stop listening at any time. It will also probably be easier for you to publish existing and new events later on as you only need to provide a list of whats observable.before:move
and after:move
, before:resize
, after:resize
etc. I client could then for example return a promise when something is complete, like:myMoveFunction(x, y) {
return new Promise((resolve, reject) => {
winboxInstance.once('after:move', _ => resolve()); // <-- Finished moving
winboxInstance.move(x, y);
});
}
WinBox
is already great. Here comes my suggestions after working with it for a few days:
beforeMove
or afterMove
, so that one can for example decrease the opacity during move. This was pointed out in another issue as well.WinBox
.Thanks!
Hi all,
Does anybody know how can I set onclose
after the instance has been initialized? If it is not possible, then I think it can be very useful.
TIA
I appreciate this nice package, which helps me a lot.
A bug was found concerning specifying the width in relative unit i.e. %. It is converted into px unit instead keeping as %. For example, below is the inline style even though I have specified width and height to be 80%.
style="transform: translate(192px, 58px); width: 1536px; height: 462px; z-index: 15;"
Any idea about how to get around this?
Hi,
its a great tool, I use it already everyday. Implementation was very easy and it works out of the box :)
I catched myself doubleclicking on the title-bar and expecting the winbox to go into fullscreen as well as expecting it to become smaller if its already in fullscreen. Handy would be as well if the ESC-button would minimize the winbox.
Those would be nice features, but really the dot on the i, because its already great. :)
Thank you
On the demo site, you can click to 'Open URI/URL' which displays the page in the windowed box. From this box clicking to 'Open URI/URL' displays an empty window box
Should I be able to click 'Open URI/URL' all the way down?
Hi,
Love what you're doing here!
Not an issue per se, but any chance we could get some options, or CSS guidance, for expanded control over the header, specifically changing the color of the control buttons? I'm trying to achieve a "modern" Material look, so the header should be white, which obviously means the title and controls need to be a dark color, black most likely. Changing the header color is of course easy with the background option, and I can create a CSS rule to color the text black no problem, but I can't seem to do the same with the controls. I tried messing around with masks, but the results were not good.
I see that you're doing some things with themes, so maybe you're already thinking along these lines, just figured I'd ask.
Thanks and keep up the great work!
Frank
First, very nice work! I would consider this the best implementation of a web window manager.
I seem to be having issues with inputs using Angular. I'm using cloneNode, but the url is always one WinBox behind.
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(url);
new WinBox({
mount: document.getElementById("iframeContent").cloneNode(true),
});
<div id="iframeContent" style="width:100%;height:100%">
<iframe [src]='url' frameborder="0" style="height:100%;width:100%"></iframe>
</div>
I have noticed, I can wrap the new WinBox in a timeout and then everything works correctly, but that's not really a solution. Any idea how inputs can be updated, and html content cloned, w/o using the timeout?
setTimeout(() => {
new WinBox({
mount: document.getElementById("iframeContent").cloneNode(true),
});
}, 200);
I could of course change the way I'm using inputs with this iframe, but I would like to do something similar with an actual component, and then I would just run into the issue again because I need to pass the component input parameters.
I do not believe the mouse should continue to scroll if you are dragging a window frame, seems like a strange UX, and I am pretty sure that you can use pointer locking to solve this.
After I close the winbox, i want to use "show()". it seems not work, or is there any method like "open()"?
Hi, i want suggest ti add a min-width and min-heigth options for block at that size the resize
Hi!
I really loved your project I have planned to integrate this within my project. We have implemented a similar window, but it is not much feature rich and extensible like yours.
Please add an API to add icon before title. that will be make this more good.
I want suggest to move the project to a modern environment like Node 14 and Typescript for help open souce developer to work with Winbox. Currently Winbox "tasks script" aren't compatible with "Node 14" and the absence of typescript make the code obscure.
Bonus suggestion: add "unit test" for check the "pull request".
Thaks for your lib!
Hi there,
what is the correct usage in Next.js
and React.js
?
I have added dependency to my Next.js project by executing npm install winbox
However, when I try to use it in my index.js
import WinBox from 'winbox'
export default function Home() {
const handleClick = () => {
new WinBox("Window Title");
}
return (
<div>
<button onClick={handleClick}>Open Winbox</button>
</div>
)
}
It gives me following error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/hans/git/Next/winbox-test/node_modules/winbox/src/js/winbox.js require() of ES modules is not supported. require() of /Users/hans/git/Next/winbox-test/node_modules/winbox/src/js/winbox.js from /Users/hans/git/Next/winbox-test/.next/server/pages/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename winbox.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/hans/git/Next/winbox-test/node_modules/winbox/package.json.
Changing import
to require
does not solve the issue.
I have tried to import the ES6 version by import WinBox from 'winbox/src/js/winbox'
as well, which didn't help either
Hi - this is a superb library, thank you!
I love the url
feature and the way it automatically creates an iframe, but it'd be great if I could specify the allow / feature-policy conditions somehow, too. In my case specifically, the iframe sandbox values are essential.
I can work around this by using the html
property instead and creating my iframe with all its feature policies ahead of time, then setting it that way, but it would feel cleaner to keep it all within a single Winbox object config.
I appreciate you may consider this out of scope, in which case perhaps it would just be worth adding a note to the documentation instead, explaining that it's a basic iframe with no additional permissions?
Hello! First of all, thanks for working on this library, it's beautiful and fun to use. I'm trying to use Winbox to create a grid of draggable and resizable items in my VueJS application.
I managed to create the windows quite easily, but the problem is that if i try to load anything dynamic or a Vue component, i can't interact with it, it looks like just the HTML is being loaded, so for example if i click on a button nothing works. Am i missing something or is this not supported by Winbox yet?
I'm importing the non bundled version: import WinBox from "winbox/src/js/winbox.js";
<div id="backstore" style="display: none">
<div id="content">
<someComponent/>
</div>
</div>
...
mounted() {
new WinBox("Mount DOM", {
mount: document.getElementById("content").cloneNode(true)
});
}
This looks like something worth contributing to, but I'm wary of the way you've abandoned your other repos and not kept your promises to the contributors there.
[flexsearch Announcement: New release is coming during Dez 2020] #199
nextapps-de/flexsearch#199
Is it possible to render React component inside winbox?
I tried to use a component inside innerHtml, html, body, and mount options but to no avail. Is it possible to render a component inside the winbox element or am I out of luck? Code below renders nothing
<a
style={{ cursor: "pointer" }}
onClick={() => {
new WinBox({
title: "About Me",
modal: false,
x: "20%",
y: "20%",
onfocus: function () {
this.setBackground("#00aa00")
},
onblur: function () {
this.setBackground("#777")
},
innerHtml: <About></About>,
})
}}
>
/About
</a>
Simple, no-max
does not prevent maximization by double clicking the title bar.
For mobile I like to have smaller titlebar.
I tried with following css:
.wb-body {
top: 15px;
}
.wb-icon {
height: 15px;
}
.wb-title {
line-height: 15px;
}
It almost worked, but when minimized, the element height is still fixed 35px so that is somewhere hard coded?
I just found out this library and i think it's magic, it's impressive how good it looks and how easy to use it is.
I don't know if Winbox has another purpose compared to what i'm trying to do, but basically i'm trying to setup a page where i have a grid of more boxes in the same page, two for each row. In order to avoid the boxes to scroll when i scroll the page, i set .winbox {position: absolute}
. The problem with this, is that when the position is absolute i can't drag the boxes.
I was wondering if it's possible to have the boxes in absolute position, so that they won't scroll along with the page, while i can drag them too. Keep up the awesome work!
Hi,
i have problem with WinBox
when i create a new window i obtain this
style="transform: translate(0px, 0px); width: 207px; height: 0px; z-index: 11;"
with hegth 0
and i'm not able to transalte it on the y axes.
can you help me?
Before I chose the name WinBox I made some search, but probably not good enough. I've never heard about the router manufacture which uses the same name for one of their toolkit. Personally I'm totally fine with it. But there was another naming candidate for this window manager called "Scalebox" which I did not picked.
Which one would you choose:
Thanks a lot.
First of all, this is an awesome library and I am not downplaying that.
But if the mouse is moved out of the draggable area on one "frame" the window ignores any input until the user brings the mouse back, upon which it'll snap which is highly annoying.
saving windows? Then restoring them?
With local-storage? ๐ค
This is an amazing library, and it so much better than what I have made for windows. I'm making a Windows 3.1-like look (See the first image) and I need to reorder the title and the buttons. Maybe when you make the box, you can specify what order you want them in. (See example code)
Example Code:
new WinBox("Program Manager", {
header_order: ["close", "title", "max", "min"]
});
Also having windows inside windows would be a good feature too, as this is done with the program manager inside Windows 3.1
I am trying to call a site using the url tag, however I keep getting the following error:
Refused to frame 'x' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'"
Is there a way to turn "frame-ancestors to 'none'?
new WinBox(menuItem.title, {
background: "#000",
border: 4,
width: "75%",
height: "65%",
x: "center",
y: "center",
id: menuItem.menuID,
title: menuItem.title,
url: menuItem.path
});
Would there be any API / documentation or ability for the parent window to somehow use window.postmessage ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ) or something like that to communicate with the window inside?
Win 10, Chrome Version 91.0.4472.77 (Official Build) (64-bit) - (Very latest version)
When the right pane of a split pane minimizes (In the online demo), its title bar shrinks to 1px in width. The left pane minimizes correctly. This makes it very difficult to restore the right pane.
Using Chrome Dev Tools:
When both split panes are minimized:
left pane:
<div id="winbox-1" class="winbox focus min" style="width: 251px;
right pane:
<div id="winbox-2" class="winbox min" style="width: 1px;
Would it make sense to add a way to make a new window find the best available spot in the remaining space? Basically calculate the lease overlap somehow?
Hello, first of all, thx for this lib it works like a charm
I saw little bug (or maybe that's a feature idk), when I don't provide any title or give an empty one, the winbox is not draggable.
Hi,
if i have two window with two differents id and if i close one of this, the on focus event on the second window does not fire so i can not set rigth variables . is it rigth? how i can do?
regards Paolo
Basically have a little pin icon which when pressed causes the window to always be on top of all other windows. This is useful for pop-out video players or audio controls for example.
I'm trying to use your lib in a React project. When importing it with: import WinBox from "winbox"
, I receive an empty object. So trying to instantiate a new winbox triggers the error: winbox.default is not a constructor
.
Here is the test code I wrote:
import React from "react";
import WinBox from "winbox";
export default function App() {
const createModal = () => {
const modal = new WinBox({
title: "Set innerHTML",
html: "<h1>hello</h1>"
});
return modal
};
console.log("WinBox", WinBox) // returns {}
return (
<div>
<button onClick={createModal}>new modal</button>
</div>
);
}
Here is a codesandbox: https://codesandbox.io/s/pedantic-bush-lplpl?file=/src/App.tsx
If I use mobile and drag window to bottom of page and turn mobile to landscape the
window does not show. Sometimes it would be idea to measure the position from
bottom of screen instead top.
If I create the window with y: "bottom" and turn the mobile landscape, the window does not show either.
Would it be idea to measure y-coordinate from bottom of screen if started by y: "bottom"?
hide()
and show()
do not work. The reason is that they add the class hide
to the WinBox
instance, and the rule .winbox.hide
is not defined in CSS. There is a .winbox.wb-hide
rule, but it is commented out. Also it would be nice to have an option to create a hidden window that can be shown later.
Thank you!
Thank you for this gorgeous package,
Is it possible to remove the size of the window from style so we can add fit content through css?
Currently, when we add a video player or any text, it has some issues regarding width and height, it doesn't calculate content's width and height, we have to define it by hand. Previously we were using our own modal and we could add CSS attributes for fit content. But it's impossible with this package because width and height are setting programmatically with the style attributes.
Any suggestions?
Thank you
๐ Hello, @ts-thomas - a potential high severity Cross-site Scripting (XSS) - Generic (CWE-79) vulnerability in your repository has been disclosed to us.
1๏ธโฃ Visit https://huntr.dev/bounties/1-other-nextapps-de/winbox for more advisory information.
2๏ธโฃ Sign-up to validate or speak to the researcher for more assistance.
3๏ธโฃ Propose a patch or outsource it to our community - whoever fixes it gets paid.
โ๏ธ NOTE: If we don't hear from you in 14 days, we will proactively source a fix for this vulnerability (and open a PR) to ensure community safety.
Join us on our Discord and a member of our team will be happy to help! ๐ค
Speak to a member of our team: @JamieSlome
This issue was automatically generated by huntr.dev - a bug bounty board for securing open source code.
in case of mobile visitor click full screen button, how to return back to normal mode ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.