BS 2.2.0 about bootstrap-modal

[jschr]

Thanks, glad to hear they are working for you! I didn't know 2.2.0 was out so I will definitely get on updating my code. It might take me a few days to complete as I will need to update my application to using 2.2.0 first because it serves as a good testing ground for the modals. If you don't mind waiting I will get an update out asap otherwise I will also gladly accept a pull request :)

Thanks

[lookfirst]

No hurry, I just patched your code locally.

By the way, the reason why you want focus called before shown is because it allows you to override the focus behavior. I have a 'ModalHelper' class that by default automatically selects the first form element as the focus when the shown event is called. If no form element is in there, it will also try to look for class="focus". Pretty much every form 'editor' on my site is done in a modal now so this makes it really easy to work with things.

[jschr]

Ah, makes sense. Your ModalHelper class sounds interesting, do you have any code I could take a look at by chance? I also incorporate similar, but manual behaviour in my application so I'd be curious to see how you've done it.

Thanks

[lookfirst]

This is the class. Apologies if you dislike CoffeeScript, but I'm a huge fan. ;-) https://gist.github.com/3983303

It is kind of specific to my application as it references a few helper classes that I've got and the way that I deal with the logic in the modals, but it should give you a general idea for how it works. The idea is that I can apply different decorators (features) depending on what the functionality of the modal is. For example, some modals need to remain open after clicking a button (to show an error) while others need to automatically close no matter what.

The modal features enable public methods and under the covers apply all sorts of crazy callbacks. I suspect I'll rewrite this whole class someday to be a lot cleaner, but the first pass enabled me to at least get the logic all into a single location / api.

If you go to the homepage of my site, click on the little icon in the bottom left corner of the map. This is the code which handles that modal.

define (require) ->
    util = require('app/util/common')
    forms = require('app/util/forms')

    ModalHelper = require('app/ModalHelper')
    HasFields = require('app/HasFields')
    FieldLocator = require('app/locator').FieldLocator

    return class PickLocationModal extends HasFields
        constructor: (@top) ->
            super()
            @modal = $('#pickLocationModal')
            fields = ['#location']
            @addFields(fields, @modal)

            @locator = new FieldLocator
                element: @d.location
                placeChanged: => @helper.validateSimple()

            @helper = new ModalHelper(@, @modal, ['oneSubmitButton', 'simpleSubmitButton'])
            @helper.validate = (dirty, event, data, formData) =>
                hasLoc = @locator.hasLoc()
                forms.controlError(@d.location, => hasLoc)
                dirty && hasLoc
            @helper.submit = (top, formData) =>
                @d.location.val(null)
                @modal.modal('hide')
                geo = @locator.getLoc().geo
                @top.map.panTo(new L.LatLng(geo.latitude, geo.longitude))

I also make heavy use of dirtyform to enable/disable the Save button in a modal. That is part of that validate function above.

It can be hard to read others code without full context. If you have any questions, feel free to ask. I'm happy to share.

[jschr]

Very cool, site looks really well done as well. Thanks for sharing, I always enjoy seeing how other people have solved some of these common UI problems. I hope to get around to writing some of these types of helper classes for my application as well.

[jschr]

Updated the files to reflect bootstraps 2.2 changes. I however had one problem with changing the order in which setFocus() is called. I was experiencing a weird problem where the 2nd time a modal is open, the background page would scroll all the way to to top. I could not figure out what was causing this so I instead just check for e.isDefaultPrevented() and do not focus if true.

Hope that is an adequate solution but let me know if you have any issues with that.

Thanks

[lookfirst]

Hmm... I think what you missed is around this line:

870fbe3#L4R121

You need to add .focus() in there so it looks like this:

                    transition ?
                        modal.$element.one($.support.transition.end, function () { modal.$element.focus().triggerHandler('shown') }) :
                        modal.$element.focus().triggerHandler('shown');

and I just commented out the handler for shown.modalmanager...

/*
                modal.$element.on('shown.modalmanager', function(e){
                    that.setFocus();
                })
*/

[jschr]

Yep that was it. I was setting focus before the transition had finished which caused the weird behaviour I was seeing.

Thanks

[lookfirst]

Thanks, it is working great now.