fnagel / jquery-ui

A fork of jQuery UI: WIP branches, legacy Selectmenu Widget (branch: selectmenu) and an accessible version of jQuery UI Tabs (outdated, branch: tabs accessability)
Other
588 stars 141 forks source link

Patch to allow suppressing of open event #208

Open michaelcaplan opened 12 years ago

michaelcaplan commented 12 years ago

Hi there,

I found myself needing a way to suppress the opening selectmenu (do optionally allow the opening of a full screen dialog window with advanced tools for navigating the select options). I did this by adding a beforeOpen event that can be used to cancel the open event.

The patch looks like this:

    open: function(event) {
        var self = this, o = this.options;
        if ( self.newelement.attr("aria-disabled") != 'true' ) {
            self._closeOthers(event);

            if (self._trigger("beforeOpen", event, self._uiHash()) === false) {
                return;
            }

            self.newelement.addClass('ui-state-active');

            self.listWrap.appendTo( o.appendTo );
            self.list.attr('aria-hidden', false);           
            self.listWrap.addClass( self.widgetBaseClass + '-open' );

            var selected = this._selectedOptionLi();
            if ( o.style == "dropdown" ) {
                self.newelement.removeClass('ui-corner-all').addClass('ui-corner-top');
            } else {                
                // center overflow and avoid flickering
                this.list
                    .css("left", -5000)
                    .scrollTop( this.list.scrollTop() + selected.position().top - this.list.outerHeight()/2 + selected.outerHeight()/2 )
                    .css("left","auto");
            }

            self._refreshPosition();    

            var link = selected.find("a");
            if (link.length) link[0].focus();       

            self.isOpen = true;
            self._trigger("open", event, self._uiHash());
        }
    },

I'm including it here for consideration.

Thanks,

Mike

fnagel commented 12 years ago

Did you try to remove the events? Something like this: http://jsfiddle.net/GXtpC/267/

Why do you want the selectmenu not to open?

michaelcaplan commented 12 years ago

I did not try anything like that. I'm needing greater flexibility (sometimes I'd like selectmenu to open natively, and other times not), and unbinding and rebinding events (not sure I can do the latter) seems tough.

The use case is this:

At times, my select options can get very length and complicated. Using the native selectmenu scrollable list panel is not enough. With this volume of information, the user will want to search through the list and maybe apply filters to get at what they want -- functionality that doesn't fit in and is not part of the selectmenu open panel.

So I give my users choice. They can view the list natively in the selectmenu list panel, or choose to launch the list is a full screen modal dialogue that has search and filtering options. They can also choose to always have this modal dialogue open instead of the native selectmenu list panel.

Technically speaking, to implement this dynamic choice, I needed a way to on the fly suppress or allow the selectmenu list panel before it opens so I can open the model dialogue box instead. The beforeOpen event patch does this very nicely.

Make sense?

Thanks,

Mike

andreykl commented 7 years ago

plus one to this patch