bootboxjs/bootbox

5.0.0 roadmap

makeusabrew opened this issue · 16 comments

makeusabrew commented

At the moment this is just a placeholder for features / changes which may be implemented for the next major release. This will probably coincide with the release of Bootstrap 4.0.0 as and when that sees the light of day.

Collaborators, feel free to add to this list. Everyone else, feel free to comment / link to existing issues if you want something added to the list.

  • add support for vertically-centered modals (Bootstrap 4 only)
  • add code to detect Bootstrap version and adjust accordingly
  • refactor / split out locales into separate files
  • refactor / split out dialog templates into separate files
  • add dist/ folder for more idiomatic bower support
  • buttons argument to array instead of object (debatable - I object)
  • re-introduce icon support?
  • re-work button order?
  • allow message option for prompt
  • add radio as an input type for prompt
  • add range as an input type for prompt
  • add options for min, max, and step for the input types that support them (number, date, time, and range)
  • automatically enforce pattern validation if pattern option is set
  • add a required option and enforce validation - prompt should not close if required is true and the prompt value is null, empty, or otherwise invalid
  • Add label tags and ARIA attributes for screen reader support Pushing this off to a later release
tiesont commented

Definitely a fan of splitting out the locales - it might be worth thinking of if and/or how things like the error messages could be localized as well. I'll see if I can find some good examples of plugins that already do this.

For the button order, I think a simple reverse option would be good enough to allow the developer to match their primary audience; someone's going to be unhappy regardless, so pick a plugin default and go with it.

Would it be worth adding a task for refactoring dialog construction again? I know the prompt needs custom code, so maybe task # 1 should be figuring out how to build a base dialog that works with all three functions.

Modals don't seem to have changed much (if at all) in the current alpha for Bootstrap 4 - there's plans for eventually switching to the <modal> element, but since there is next to no browser support for it yet, it's a ways off.

DJmRek commented

I would suggest adding the basic functionalities for the different prompt types. E.g. the min-max value option for number-prompts.

tarlepp commented

Imho buttons should be array of button objects, because object order is not guaranteed. And with that everyone can changes those as they like.

@DJmRek and also step

emileber commented

@tarlepp See Does JavaScript Guarantee Object Property Order?

Current Language Spec: technically, order is unspecified.

Current Browsers: order is preserved with the major exception of keys like "7" that parse as integers and are handled differently by Chrome/V8.

Future Language Spec (>ES2015): Generally, you can expect that things ordered today will not become unordered. New APIs will guarantee order

An object cannot be re-ordered, but it keeps the order it was set in.

That being said, I would really like a way to pass the context on modal construction.

Something like:

bootbox.prompt({
    title: "This is a prompt with a textarea!",
    context: this,
    callback: this.promptCallback
});

This is rather rare with jQuery plugins, but common with Backbone for example.

I made a wrapper around Bootbox for my Backbone app to bind the context on each callbacks before passing the options to the original function because I don't like calling .bind(this) everywhere.

tarlepp commented

@emileber "Current Language Spec: technically, order is unspecified."

emileber commented

@tarlepp Yes, and that's where the myth comes from since it's only in theory. In practice, every browser implements it with preserved order and the future spec made it a guaranty. Backbone is just one example of a lib who depends on object key ordering in their router since like 2010.

ericscheid commented

I have two requests/suggestions

  1. detect if the element supplied for message is a <template> element, and if so do all the cloning/etc automatically.

  2. some way of passing in a div/template containing form fields, and the callback result is an array of the named inputs/selects/etc .. the dialog would otherwise act the same as prompt, with the same buttons, escape key behaviour, etc

tiesont commented

I've introduced a v5.x branch and pushed in my work for Bootstrap 4, now that it's in Beta. You can find the (somewhat) updated documentation for 5x in the gh-pages for my fork. The examples page also has some updated examples.

Please note, if you are new to Bootstrap 4, that there are extra dependencies (Popper.js or Tether.js, depending on whether you're using the Beta or Alpha releases, respectively) that need to be loaded.

mvastola commented

Extremely tiny thing, but in case it's an oversight, the current README.md states:

There is no new major (e.g. 5.x) release on the roadmap at present.

In light of this issue (ironically titled "5.0.0 roadmap") you may or may not want to remove that line.

tiesont commented

@mvastola Yeah, at some point I will update that. The README hasn't been updated in a while. I'm also working somewhat as a lone-wolf at this point - @makeusabrew hasn't really defined a set roadmap, but I've been using Bootstrap 4 for most of my projects and needed to update Bootbox anyway because of that. Since I assumed I'm not the only one doing so, I figured I might as well fix other things and then push a new branch into this repo.

  • 👍2
mvastola commented

Totally understandable. Just noticed it and thought I'd remind you because I imagine you don't have any particular need to read your own README very often, knowing your project as you do. :-)

tiesont commented

Implemented option, in #631, to allow developers to swap the default button order, if so desired:

Globably:

bootbox.setDefaults({ swapButtonOrder: true });

Per dialog:

bootbox.confirm({
    message: 'Is this what you wanted?!',
    callback: function(result){ console.log(result); },
    swapButtonOrder: true
});
  • 👍1
ray73864 commented

Started using the v5.x branch the other day (https://github.com/makeusabrew/bootbox/tree/v5.x).

Cloned the v5.x repo to my local system, ran 'npm install', then ran 'gulp' to create the necessary bootbox.js file.

A lot seems OK, the biggest issue I have is that the 'title' for dialogs is all messed up with Bootstrap 4.

The 'x' for closing the dialog is not right aligned anymore, the title is not left aligned, the title appears to the right of the 'x'.

I took a screenshot of the issue: http://puu.sh/zjItd/cc8ec24a25.png

The markup for the dialog (according to the devtools) appears to be:

<div class="bootbox modal show" tabindex="-1" role="dialog" style="display: block;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="bootbox-close-button close" aria-hidden="true">×</button>
        <h4 class="modal-title">Test Title for Bootbox Dialog</h4>
      </div>
      <div class="modal-body">
        <div class="bootbox-body">
          Test body for Bootbox Dialog
        </div>
      </div>
    </div>
  </div>
</div>

So far, that is the only issue I have come across with the v5.x branch of Bootbox.

tiesont commented

@ray73864 Not sure about all of that. I'm not a node user. The src folder has a bootbox.js file that you should be able to use, if that is possible for you.

You might be actually getting a built version of the v4 code (the current master). If nothing else, the H4 title tells me that, since the v5 templates have the H5 that Bootstrap 4 expects.

The v5 branch is supposed to be smart enough to detect the version of Bootstrap in use (reading the VERSION property) and build the header in the correct order. It worked through the last Beta - I haven't had time since Bootstrap 4 went final to make sure everything still works the same.

This the generated markup from one of the v5 examples:

<div class="bootbox modal fade bootbox-confirm show" tabindex="-1" role="dialog" style="padding-right: 17px; display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Destroy planet?</h5>
                <button type="button" class="bootbox-close-button close" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Do you want to activate the Deathstar now? This cannot be undone.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-default bootbox-cancel"><i class="fa fa-times"></i> Cancel</button>
                <button type="button" class="btn btn-primary bootbox-accept"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>
ray73864 commented

I've only got node installed for building Bootstrap 4 and Bootbox.

I did this to get v5.x:

git clone https://github.com/makeusabrew/bootbox.git bootbox
cd bootbox
git fetch origin
git checkout -b v5.x origin

After doing that, I checked with 'git status' and it came back with "On branch v5.x".

Though looking at the header.txt file, it shows as v4.4.0.

Have deleted my bootbox clone and now done

git clone -b v5.x https://github.com/makeusabrew/bootbox.git bootbox

Checked the header.txt and it now shows v5.0.0.

Ran 'grunt' and then 'grunt uglify', 'grunt' on its own created src/bootbox.js, however I needed to edit the 'Gruntfile.js' and add 'src/' before 'bootbox.js' and 'locale.js' to get 'uglify' to run.

Did a force-refresh on my webpage to get the new file, checked the dialog, and all is good again.

tiesont commented

Closing this as "complete" - see #665 for ship list for releasing 5.0.