os-js / osjs-dialogs

OS.js Dialogs Module
https://manual.os-js.org/v3/
Other
4 stars 7 forks source link

How can define close event for a dialog? #10

Closed miladhashemi closed 3 years ago

miladhashemi commented 3 years ago

Is it possible to use window event in a dialog? For example defining on close or destroy event for a dialog.

andersevenrud commented 3 years ago

Sure! This should help you out :)

const dialog = core.make('osjs/dialog', 'name', {}, () => {})
dialog.win.on('close', () => {})
andersevenrud commented 3 years ago

Note that the callback you define when you construct a dialog is technically a "close" event (it's called either via the destroy event or an event from a button selection called dialog:button), so you can just use that to determine if the window was closed.

miladhashemi commented 3 years ago
> const dialog = core.make('osjs/dialog', 'name', {}, () => {})
> dialog.win.on('close', () => {})

At first, I had tested this approach according to documentation and surce code on github:

const dialog = this.core
      .make('osjs/dialogs').create(options, callbackValue, callbackButton);
    dialog.win.on('close',()=>console.log('closed'));
    dialog.render(callbackRender);

But I get bellow error: Uncaught TypeError: Cannot read property 'on' of null

Note that the callback you define when you construct a dialog is technically a "close" event (it's called either via the destroy event or an event from a button selection called dialog:button), so you can just use that to determine if the window was closed.

How can i use it?

andersevenrud commented 3 years ago

Ah, you're using a custom dialog there.

Then you have to call .win.on after the .render!

How can i use it?

In your case this would be the callbackButton callback function.

miladhashemi commented 3 years ago

Ah, you're using a custom dialog there.

Then you have to call .win.on after the .render!

Yes, I'm using custom dialog, i changed code to below:

const dialog = this.core
      .make('osjs/dialogs').create(options, callbackValue, callbackButton).render(callbackRender);
    dialog.win.on('close',()=>console.log('closed'));

I'm expecting console.log prints 'closed', but console.log is clear!

andersevenrud commented 3 years ago

I think you might have to use the destroy event here. The close event is usually called when the close button in the window titlebar is clicked.

miladhashemi commented 3 years ago

I think you might have to use the destroy event here. The close event is usually called when the close button in the window titlebar is clicked.

Exactly I want something happens as i'm clicking close on titlebar. But something special happens to me! :D The functionality i was looking for with implementing this event, now works. I dont know why!!! but works! even it doesn't print closed, but i attain my purpose! :-D

andersevenrud commented 3 years ago

Sweet!

It could be that you just hit some cache in the browser and was not served the correct changes. It happens from time to time. I always use CtrlShiftR to hard refresh the page when doing changes as a habit. Even though having devtools open and checking the "disable cache" in the network tab should be enough.

miladhashemi commented 3 years ago

> const dialog = this.core
>       .make('osjs/dialogs').create(options, callbackValue, callbackButton).render(callbackRender);
>     dialog.win.on('close',()=>console.log('closed'));

index.js:415 Uncaught TypeError: Cannot read property 'win' of undefined

In fact making this error, helps me to get my functionality which isn't nice. :( When i use .win.on after render i get this error.

andersevenrud commented 3 years ago

This is because the render method does not return self.

This will work:

const dialog = OSjs.make('osjs/dialogs')
  .create(options, callbackValue, callbackButton)

dialog.render(callbackRender);
dialog.win.on(...)

However, I'm going to update this library now so that you can chain that properly. Stand by!

andersevenrud commented 3 years ago

Aaaand it's out!

npm notice name:          @osjs/dialogs
npm notice version:       3.0.21

the following should now work:

const dialog = core.make('osjs/dialogs')
  .create(options, callbackValue, callbackButton)
  .render(callbackRender);

dialog.win.on(...)
miladhashemi commented 3 years ago

Hooorayyy Viking 🥇 Thanks a lot. Exactly I was looking for this.

andersevenrud commented 3 years ago

Woh! :tada: