nextapps-de / winbox Goto Github PK

See this, the resize sometimes get stucked.

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?

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,

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

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

• It would be nice with a simple api to subscribe, unsubscribe for any published events. Maybe be adding methods such as 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.
• It might be considered another issue, but events that occur before and after is very convenient such as 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);
  });
}

saving windows? Then restoring them?
With local-storage? 🤔

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.

1. The first time I click to have it open a new WinBox it's blank
2. I close this WinBox
3. Click a different link
4. The new WinBox will open showing the previously clicked link.

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.

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>

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.

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?

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.

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;

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
});

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.

in case of mobile visitor click full screen button, how to return back to normal mode ?

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

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

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?

Windows has two icon for maximize and unmaximize a window

winbox has just one icon

why don't use two different icon?

Actually the workaround is:

.winbox:not(.max) .wb-max {
  background-image: url("maximize.svg") !important;
}

Thanks! your lib is awersome!

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.

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!

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)
    });
}

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

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.

👋 Hello, @ts-thomas - a potential high severity Cross-site Scripting (XSS) - Generic (CWE-79) vulnerability in your repository has been disclosed to us.

Next Steps

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.

Confused or need more help?

• 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.

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?

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?

After I close the winbox, i want to use "show()". it seems not work, or is there any method like "open()"?

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

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!

Simple, no-max does not prevent maximization by double clicking the title bar.

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

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 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!

I added Winbox to my vue app,

Everything works well functionally however, i have the control icons do not show up. I can maximize, minimize etc but the icons just doesn't show up.

I checked the css in dev tools and I see a strange issue

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:

1. are you fine with the current name?
2. do you prefer the name "Scalebox"?
3. do you have another suggestion?

Thanks a lot.

Hi, i want suggest ti add a min-width and min-heigth options for block at that size the resize

WinBox is already great. Here comes my suggestions after working with it for a few days:

1. Some events can be added to enhance the look and feel of the UI, such as beforeMove or afterMove, so that one can for example decrease the opacity during move. This was pointed out in another issue as well.
2. Snapping to other windows edges can be great. See an example here: https://davidfig.github.io/window-manager
3. One window always remains focused, even if you click outside all windows. I think there should be a workaround for this. If you make two windows and minimize them, then close the focused one, the other one doesn't get focused, which is inconsistent.
4. Some window presets can be great.
5. RTL support can be great, though I could do that using CSS. This could be integrated in WinBox.
6. Support for other shapes for minimized windows could be great; see the picture below. The green button is in fact a minized window (like the one on the right). It is even movable. At least the shape part can be done using CSS, if things are not hard-coded in JS.
   

Thanks!

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?

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"?

Would it be possible to add an optional footer area? basically where it says .wb-body{ margin } in the picture? The use case would be to have a space to easily add additional nav elements or a status bar without having to build a more complicated layout inside the wb-body yourself.

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