Semantic-ui: Alert/Confirm/Prompt

[brigand]

Example of a confirm

I think a simple we'll-do-the-html alert/confirm/prompt would be vastly useful.

$(document).alert({
   text: {
       header: "You removed a post",
       positive: "Okay"
   }
}, function (){
    console.log("the user closed the alert");
});

$(document).confirm({
   text: {
       header: "Remove that post?",
       positive: "Yup",
       negative: "Cancel"
   }
}, function (trueOrFalse){
    console.log("the user responded " + trueOrFalse);
});

$(document).prompt({
   text: {
       header: "What would you like to share?",
       positive: "Submit",
       negative: "Cancel"
   },
   validation: {
      // borrow code from form validation rules
   },
}, function (theText){
    console.log("the user typed the text " + theText);
});

What happens:

• You run one of those
• elements are added to the DOM and animated in
• the user clicks a button; element starts fading out
• callback is called; after fade remove DOM.

Clicking on the dimmer or pressing escape...

• is the same as the only button in an alert
• is the same as the negative button in a confirm
• is the same as not inputting any text into a prompt
  
  
  
  • but must respect validation rules
  
  
  • any text in the input is ignored
  
  

[jlukic]

Immediately I think we can add callbacks like onApprove onDeny, which match on actions to .positive.button, .confirm.button and .negative.button, .cancel.button

This is a great idea, but to keep the project from spawning too much new UI components we have to consider it in terms of our current roadmap.

I could see this as a standalone component that extends modal/dimmer.

I also think it will be useful to eventually to add template generators for all major UI components using a UI behavior called generate. This would have basic template definitions of each component using handlebars or the likes and allow you to generate a DOM element to match.

That way instead of having to create html you can do things like

$
  .generate({
    element: 'modal',
    data: {
      title : 'Awesome',
      image : 'http://whatever.jpg',
      yes   : 'Ok',
      no    : 'Cancel'
    }
  })
  .modal()
;

[brigand]

I'm doing something similar in Knockout-Semantic.

<div class="ui modal sample" data-bind="modal: myModal"></div>
<div class="ui button" data-bind="click: showModal">Show the Modal</div>

viewModel = {
    myModal: {
        title: 'My Modal',
        content: 'I am a <strong>MODAL!!!</strong>',
        show: false,
        buttons: [
        new semantic.Action("Close me with jQuery", function () {
            $(this).modal("hide dimmer");
        }), new semantic.Action("Close me by setting show to false", function () {
            viewModel.myModal.show = false;
        })]
    },
    showModal: function () {
        viewModel.myModal.show = true;
    }
};

It uses Browserify and a plugin which lets you read files into variables.

var template = fs.readFileSync(__dirname + "/templates/modal.html");
// compiles into
var template = "<div ...>";

---

For this project, you might want to checkout handlebars' grunt task, which basically turns the templates into a JavaScript object, and uses a very small version of handlebars (1kb) to compile them.

[setthase]

@jlukic said:

Immediately I think we can add callbacks like onApprove onDeny, which match on actions to .positive.button, .confirm.button and .negative.button, .cancel.button

I think that onDeny and onApprove should have possibility to prevent modal to be closed (i.e. to validate user input and provide possibility for entering some corrections) and this functionality could be build on top of return value of callback passed to that functions (i.e. return true/false).

I suppose that this functionality will bring joy to more users than only me :sparkles:

[jlukic]

Yeah that's easy enough to add, can check the return value of onSuccess and onFailure to decide whether module.hide() should be called.

[jlukic]

Closing, onDeny and onApprove will do as @codename- describes. Not sure when fixed.