Use Bootstrap modal dialogue box instead of alert() and confirm()

[Jaifroid]

Although using JS alert() and confirm() is simple to code for, they have some issues:

• They block the main thread
• They do not show up in frameworks that disallow thread blocking (notable example I'm aware of is UWP)
• The user can block the page from showing further dialogue boxes

We should instead have a re-usable Bootstrap alert modal and a function to call it easily in uiUtil.js. The simple, first example from https://getbootstrap.com/docs/4.0/components/modal/ would suffice (live demo here). This would be universally compatible and non-blocking. We could Promisify it for ease of use.

Obviously this would entail some minor rewriting of functions where we use alert or confirm, to make them asynchronous.

[ankur12-1610]

@Jaifroid I don't know if this is okay, but I have an already assigned issue. But this is a quick fix and I do have a lot of prior experience using bootstrap. Am I allowed to work on this issue? 😅

[Jaifroid]

@ankur12-1610 If you have Bootstrap experience, this helps a lot. Let's just wait to see if @mossroy agrees with this issue, and if so, I can assign it to you.

[ankur12-1610]

@ankur12-1610 If you have Bootstrap experience, this helps a lot. Let's just wait to see if @mossroy agrees with this issue, and if so, I can assign it to you.

Sure :) np!

[gaurava05]

@Jaifroid @ankur12-1610 I too have a lot of experience in bootstrap and am relatively new to open source so it would be really helpful for me I can work on this. I have a solution in mind which I can share if this issue is approved.

[ankur12-1610]

@Jaifroid @ankur12-1610 I too have a lot of experience in bootstrap and am relatively new to open source so it would be really helpful for me I can work on this. I have a solution in mind which I can share if this issue is approved.

@Jaifroid since I'm already working on an issue and @gaurav7019 is new to oss I'll like @gaurav7019 to claim this issue :)

[gaurava05]

@Jaifroid @ankur12-1610 I too have a lot of experience in bootstrap and am relatively new to open source so it would be really helpful for me I can work on this. I have a solution in mind which I can share if this issue is approved.

@Jaifroid since I'm already working on an issue and @gaurav7019 is new to oss I'll like @gaurav7019 to claim this issue :)

Thanks!

[ankur12-1610]

@Jaifroid @ankur12-1610 I too have a lot of experience in bootstrap and am relatively new to open source so it would be really helpful for me I can work on this. I have a solution in mind which I can share if this issue is approved.

@Jaifroid since I'm already working on an issue and @gaurav7019 is new to oss I'll like @gaurav7019 to claim this issue :)

Thanks!

Anytime :)

[mossroy]

Good idea.
I approve

[Jaifroid]

@gaurav7019 I've assigned this to you now, as requested.

Because I suggest this is implemented as a function in uiUtil.js, you will need to define uiUtil in the modules where alert() and confirm() are currently used. Just add uiUtil to the define() statement at the very top of each relevant file, unless it's already there (you can follow the example at the top of app.js). You have to be sure that the order of the define array is the same as the order of the function list).

When you make the new function in uiUtil, you will need to add it to the return object at the footer of uiUtil.js. Just follow the example already there. I suggest you make a single function in uiUtil.js which you could name systemAlert(). You don't need separate functions for alert() and confirm(), as a single Bootstrap modal dialogue can serve both functions: you just call it with more options to get confirmation from the user.

[gaurava05]

Thanks @Jaifroid. Will do that and raise a PR for review.

[Jaifroid]

One more thing. Avoid using Bootsrap's jQuery way of closing a modal. It destroys the whole modal and you have to rebuild it in code from scratch each time you want to use it. Instead, simply hide the modal so you can re-use it, when the user clicks on one of the dismiss options. Just do something like document.getElementById('modalAlert').style.display = 'none';. Then you can re-use the html without having to rebuild.

Also, I suggest you make the new function and dialogue box and implement it only in one example first, and then submit that for review, before you then implement it everywhere that 'alert()' and 'confirm()' are used, because changing the synchronous code to asynchronous in all the examples could be a bit tricky and make a PR that looks larger than it actually is.

If you wait for merge of #797 , there will be a very obvious example of a confirm() dialogue that you can use for testing (the App Reset button).

[gaurava05]

Thanks, @Jaifroid for the heads up. So, I'll be making the following changes.

• Declare a function systemAlert() in uiUtli.js and add it to the return object of uiUtil.js so other modules can call it
• The function will have options to call simply an alert pop up(alert()) or one which asks for confirmation(confirm())
• I can see that alert and confirm are currently used in app.js, zimArchive.js, and zimArchiveLoader.js where uiUtil is not defined in the latter 2 modules.
• I'll wait before raising a PR until Provide methods for resetting the app and bypassing appCache #797 is merged to test the confirm() popup. BTW, is there any other place where I can test either of the 2 popups?
• Also, I'll take care of the flags that you've raised.