Popup Plugin

Popup Plugin - Y.Plugin.Popup

A popup container for any plugin host.

API Considerations

• Ability to hide/show on a trigger element's event or any system event

Options

Module as a plugin

Using the popup as a plugin would allow the widget or element to be constructed in the usual manner but add the popup functionality as needed. This would wrap around the widgets bounding box or the element in question.

It can be plugged into anything that is a plugin host.

• target: Anything that can fire an event
• event: The event to listen for

var calendar = new Y.Calendar(),
    myNode = Y.one('#myNode'),
    config = {
        hideOn: {
            target: Y.one('button'),
            event: 'click'
        },
        showOn: {
            target: sliderInstance,
            event: 'move'
        },
        visibility: false
    };

calendar.plug(Y.Plugin.Popup, config );

myNode.plug(Y.Plugin.popup, config);

---

I'm strangely uncomfortable with this config. It's kind of reminiscent of an on: {hide: "_defHideHandler"} type of config option, but it's obviously doing the reverse (the event subscription is by the plugin, not to it). I sort of think it should be something like

doWhen: {
    "show": sliderInstance.on("move"),
    "hide": Y.one("button").on("click")
}

except I don't think you can do that.

You'd also want a positioning config here too, I guess. [MattAtL]

---

To remove the popup functionality, simply unplug the plugin

Module as a container

This method would be instantiated as such:

var popup = new Y.WidgetPopup({ 
    widget: Y.Calendar, 
    widgetConfig: {},
    hideOn: {
        node: Y.one('button'),
        event: 'click'
    },
    showOn: {
        node: Y.one('button'),
        event: 'click'
    }
});

Access to internal widget would be allowed as a direct property popup.widget.after('dateChange', function() {});

Module as a mix in for any widget

As a mixin for any widget, simply use()ing the widget-popup would add the popup functionality to any widget.

---

I can see a use for a mixin, although not automatically adding it. But I might well be extending Calendar in my app to repeatedly use it as a popup, and so want to extend/mixin for that, but leave other widgets alone. The mixin also seems to fit with the general Widget* approach of mixing in YUI3. [MattAtL]

---

YUI().use('calendar', 'widget-popup', function(Y){
    var calendar = new Y.Calendar({
        popup: true,
        hideOn: {
            node: Y.one('button'),
            event: 'click'
        },
        showOn: {
            node: Y.one('button'),
            event: 'click'
        },
        popupVisible: false
    });
});