[Modules] Add user prompt

[baterflyrity]

Feature Request

Since Fomantic UI presents not only UI but some interactive modules it would be great to add a user prompt module.

The module should ask user for some decision like "File 1.txt already exists. Would you like to overwrite this file?" And also can be invoked from js with text, label and buttons (actions) with callbacks.

Example

From one hand poor prompt is already can be constructed via toast actions but it displays only toast but prompt (no dimmer, no visual highlights). From another hand prompt can be displayed via modal but with no dynamic content, actions and callbacks.
So I suggest to merge modal UI with toast actions.

Example

Run confirm('Implement this?') in browser console to see default implementation.

[jamessampford]

Unless I’ve totally missed something, these are both covered in the docs....

Modal has callbacks for approving and denying
https://fomantic-ui.com/modules/modal.html#approve--deny-callbacks

Toast also has the same callbacks
https://fomantic-ui.com/modules/toast.html#approve--deny-callbacks

[baterflyrity]

@jamessampford I think u've missed the main idea))

1. Toast is a small box in corner of page that notifies user about something. Prompt (user dialog) is big overlay with emphasized text and buttons. Just like modal.

2. So u suggest to use modal? Ok, one has to execute something like this to show promt via modal:

   function prompt(label,text,yes,no) {
       $('.modal .header').html(label);
       $('.modal.content').html(text);
       $('.modal').modal({
           closable  : false,
           onDeny  : no,
           onApprove : yes
       })
       .modal('show');
   }

As you can see this is not so hard to implement but this is not actually in modal module scope now.

[jamessampford]

In my mind, what you have in your example is easier (and quicker) than adding a whole new module/feature that will bloat the underlining Fomantic JS to do essentially the same thing but with a different name

If something, on the other hand, can be made easier where logic is needed to do various calculations, take into account other various things to stitch different aspects together, then that would be cool (like my Sidebar idea #1243)

Perhaps some kind of widget/extension factory/thingamajig could be useful to define/repurpose what you’re looking for 🤔

[baterflyrity]

@jamessampford as you've mentioned in #1370 both the jQuery and HTML approaches are used for small size user dialogs. But why for large size user dialogs can't jQuery exists?

Ok, but the same applies to other modules (modal, popup, dropdown) as well 😉

Contributors would better decide whether Fomantic is UI or Framework then to not make others confused.

[prudho]

Hello, I have started a discussion about an eventual alert plugin that may be relevant for you: #1716 !

[lubber-de]

I added the same functionality from toast to modal to create them out of JS properties or reuse existing modals as templates
See #1774

[baterflyrity]

I added the same functionality from toast to modal to create them out of JS properties or reuse existing modals as templates
See #1774

Very nice, thank you for well done work.

But what about more simplification like above? Just to be more convenient as in JS, C# and other popular message.

[lubber-de]

@baterflyrity Maybe, once my PR is approved and merged, we can think about how/if additional and configurable templates for a prompt/alert could work/make sense. The fui-alert plugin by @prudho is currently a much better approach using promises

[baterflyrity]

@lubber-de, no problems until you close this issue with wrong PR.
Btw current state of the project has messed up semantic, dynamic, static, modern JS-like approaches. So users always be confused without strict architecture guidelines through whole modules.

[lubber-de]

My current PR solves what you initially suggested

From another hand prompt can be displayed via modal but with no dynamic content, actions and callbacks.
So I suggest to merge modal UI with toast actions.

Dynamic content and actions with callbacks are now possible using js given properties just as in toast

title: 'MyTitle',
content: 'MyContent'
actions: [{
  text: 'Alright',
  class: 'green',
  click: function() {
    // do something when clicked
  } 
}]  

We definately won't create a completely additional module such as .alert() or .prompt() in the current state of 2.x as this is all doable easily with the current modal module as already discussed earlier.

The only thing i can think of is an alert, confirm or prompt behavior with a predefined layout (customizable as templates as we have in dropdown as well)) to somehow provide what you want.

However, it would still be

$('body').modal('alert','MyTitle','MyText',function(){/* my callback code*/});
$('body').modal('confirm','MyTitle','MyText',function(confirmed){/* my callback code depending if confirmed is true/false*/});
$('body').modal('prompt','MyTitle','MyText',function(inputValue){/* my callback code using the entered value from an input field*/});

which matches the base functionaliy of existing JS confirm/prompt/alert methods.

btw, i was also thinking of adding a centered and dimmer option to the toast module, which should then satisfy most use cases

[baterflyrity]

@lubber-de ,

However, it would still be

$('body').modal('alert','MyTitle','MyText',function(){/* my callback code*/});
$('body').modal('confirm','MyTitle','MyText',function(confirmed){/* my callback code depending if confirmed is true/false*/});
$('body').modal('prompt','MyTitle','MyText',function(inputValue){/* my callback code using the entered value from an input field*/});

which matches the base functionaliy of existing JS confirm/prompt/alert methods.

This is closer to correct user dialog box. I'd be great to also see save and load predefined dialogs.

p.s.

We definately won't create a completely additional module such as .alert() or .prompt() in the current state of 2.x as this is all doable easily with the current modal module as already discussed earlier.

All things can be done easily but think what about writing 5 more higher level lines to save 5 minutes in future scaled by projects and users.

[lubber-de]

alert, confirm, prompt and any custom predefined modal are now possible by #1869. For examples and explanation see the PR.

[baterflyrity]

@lubber-de great job, i like it!