Trigger events on show, click, and close

[straydogstudio]

This commit triggers three custom events on the original target element that is passed into the show function:

• basicContext:show: When the menu is opened.
• basicContext:click: When a menu item is clicked.
• basicContext:close: When the menu is closed.

It allows you to respond to all three events with any particular behavior. Also, in the case of the click, the item is passed with the event as detail data, so you can do something with it and pass in custom information. It also passes in the mouse event that triggered the click, and the index of the item that was clicked:

//Backbone/Marionette example
var vRow = app.M.View.extend({
    tagName: 'tr',
    template: tPressRow,
    events: {
        'click': 'toggleMenu'
    },
    toggleMenu: function(e) {
        var attr = this.options.model.attributes,
            el = this.$el,
            bc = require('basiccontext'),
            i = [
                { title: attr.shift + ' Shift Production', a: attr },
                { title: attr.shift + ' Shift Downtime', a: attr },
                { title: 'Product Run Downtime', a: attr },
            ];
        //handle the click event
        this.$el.on('basicContext:click', this.openLink );
        //highlight the row when the context menu opens
        this.$el.on('basicContext:show',function(e) { el.addClass('highlight') });
        //remove the highlight when it closes, for whatever reason
        this.$el.on('basicContext:close',function(e) { el.removeClass('highlight')});
        bc.show(i, e.originalEvent);
    },
    openLink: function(e) {
        var url
            detail = e.originalEvent.detail,
            a = detail.a;
        switch(detail.i) { //the link index is provided by the library
            case 0:
                url = 'DailyProductionDetail.asp?Press='+a.pressno
                        +'&starttime='+a.shiftstart+'&endtime='+a.shiftend;
                break;
            case 1:
                url = 'DailyDowntimeDetail.asp?Press='+a.pressno
                        +'&starttime='+a.shiftstart+'&endtime='+a.shiftend;
                break;
            case 2:
                url = 'DailyProductionDetail.asp?Press='+a.pressno
                        +'&starttime='+a.runstart+'&endtime='+a.runend;
        }
        window.open(encodeURI(url));
    }
});

It still handles passing in a fn with the link, so it won't break any existing setup. But, because fn won't be present with events, it doesn't keep from rendering a link if fn is missing.

The event creation is IE11 and newer. Other browsers should be ok. If you want older compatibility we can modify the trigger method with a few lines.

Last of all, I added a replace step to your gulp process so the "\n\t " strings are removed from the minified result. It's just a byproduct of your multi-line string templates. And it saves a few bits.

If you're accept this, I'll do another pull with documentation.

[straydogstudio]

It looks like I'll need to change the event code to support older browsers. IE11 doesn't like CustomEvent().

[straydogstudio]

This works now on IE9 - IE11.

[electerious]

Thanks for the work! I plan to rewrite basicContext and I consider adding this feature.