Generate small modal with Blockly

[Denis Jovic]

Hello all,

I have a simple block with a text input. My goal is to simply grab the text from it and when the code runs, show a simple popup modal with that text. Something similar to

the code below, but instead of an alert I would like to add a 'real' js/react modal with some styling and functionality. But I am not really sure where to start. Is it possible to somehow embed 3rd party modal or at least create one in JS and use it? Did anyone try something similar?

Thanks!

[jimmy]

you might want to try this one - 

https://codeseven.github.io/toastr/

https://codeseven.github.io/toastr/demo.html

Thanks
_____________________
Jimmy

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/39cde4b4-ff71-4299-aba9-78d0a5fc6bb9n%40googlegroups.com.

[Maribeth Bottorff]

Hi,

Blockly's role is to generate code from blocks. Running the code, and what that code does, is purely up to you. So yes, you can have it call a 3rd party library if you'd like, or create the modal itself, etc. That is really outside the scope of Blockly itself, but you may find some ideas from others here on the forum. Or, what may be easier, is to think about this problem outside the scope of Blockly. If you were writing code in text and there are no blocks involved, how would you create a modal? You may want to search elsewhere for help with that since it's a more general topic. Then, once you know what code to write, how do you get a block to generate that code? If you need help with that step, definitely post here again with more specifics about the code you'd like to generate.

I hope that helps! Good luck,

Maribeth

[Denis Jovic]

Thanks, Jimmy, I like toastr, but unfortunately, they seem to want a 'real' modal :)

Maribeth, you're right, I am aware that is a bit out of the scope, but at the same time it is possible that someone has already done something similar. I am waiting for further feedback on this so I will get back here when I get it and when I am sure what the actual goal is.

Thanks again both!

[Uwe K]

I recently added dialogs to our runtime and these are the libraries I looked into:

https://micromodal.vercel.app/

https://github.com/KittyGiraudel/a11y-dialog

https://github.com/KaneCohen/modal-vanilla

https://github.com/robinparisi/tingle

I chose micromodal and it works well for our case.

[Denis Jovic]

Thanks Uwe, micromodal looks great! Could you maybe share some tips on how did you approach it?

[Uwe K]

Sure. I defined a wrapper module around micromodal, which handles the creation of DOM elements and event handling. I needed a confirmation dialog, so the module exposes a method called IsConfirmed(). Our runtime HTML document first loads that module and then loads the user's blockly-generated code. A block could generate something like "await IsConfirmed()". Thats pretty much it. This is the wrapper module: https://pastebin.com/mP6bBj2p

[Denis Jovic]

Thanks Uwe, that sounds good, I will give it a try!