widget-autohide-debug.js revision 4f4ba013cd866a655a896f39f944674d19ad1387
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo MitraYUI.add('widget-autohide', function(Y) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra/**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * "widget-autohide" is a widget-level plugin that allows widgets to be hidden
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * when certain events occur.
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * By default, the widget will be hidden when the following events occur
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * <ul>
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * <li>something is clicked outside the widget's bounding box</li>
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * <li>something is focussed outside the widget's bounding box</li>
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * <li>the escape key is pressed</li>
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * </ul>
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra *
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra * Events can be added or removed from this list through the "hideOn" attribute.
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra * The following code demonstrates how to do this. Suppose I want to close the widget when
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra * another node is resized.
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * <code>widget.plug(Y.Plugin.Autohide, {hideOn: [{node: resize, eventName: 'resize:end'}]});</code>.
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * The hideOn attribute must be an array of objects. For more details on this attribute, refer to the API docs for it.
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra *
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra * This module was originally part of the overlay-extras package by Eric Ferraiuolo but was promoted and abstracted
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra * into the core library.
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra *
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra * @module widget-autohide
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra * @author eferraiuolo, tilomitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra * @since 3.4.0
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra */
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitravar WIDGET_AUTOHIDE = 'widgetAutohide',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra AUTOHIDE = 'autohide',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra CLICK_OUTSIDE = 'clickoutside',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra FOCUS_OUTSIDE = 'focusoutside',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra DOCUMENT = 'doc',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra KEY = 'key',
60e5271418c47637445291f3120af2a30d144471Tilo Mitra PRESS_ESCAPE = 'esc',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra BIND_UI = 'bindUI',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra SYNC_UI = "syncUI",
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra RENDERED = "rendered",
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra BOUNDING_BOX = "boundingBox",
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra VISIBLE = "visible",
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra HOST = "host",
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra CHANGE = 'Change',
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra getCN = Y.ClassNameManager.getClassName;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo MitraWidgetAutohide = Y.Base.create(WIDGET_AUTOHIDE, Y.Plugin.Base, [], {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra // *** Instance Members *** //
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra _uiHandles : null,
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra // *** Lifecycle Methods *** //
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra initializer : function (config) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this.afterHostMethod(BIND_UI, this.bindUI);
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this.afterHostMethod(SYNC_UI, this.syncUI);
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra if (this.get(HOST).get(RENDERED)) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this.bindUI();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this.syncUI();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra },
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra destructor : function () {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._detachUIHandles();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra },
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra bindUI : function () {
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra this.afterHostEvent(VISIBLE+CHANGE, this._afterHostVisibleChange);
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra },
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra syncUI : function () {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._uiSetHostVisible(this.get(HOST).get(VISIBLE));
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra // *** Private Methods *** //
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra _uiSetHostVisible : function (visible) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra if (visible) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra //this._attachUIHandles();
60e5271418c47637445291f3120af2a30d144471Tilo Mitra Y.later(1, this, '_attachUIHandles');
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra } else {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._detachUIHandles();
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra _attachUIHandles : function () {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra if (this._uiHandles) { return; }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra var host = this.get(HOST),
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra bb = host.get(BOUNDING_BOX),
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra hide = Y.bind(host.hide, host),
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra uiHandles = [],
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra self = this,
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra hideOn = this.get('hideOn'),
60e5271418c47637445291f3120af2a30d144471Tilo Mitra i = 0,
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra o = {node: undefined, ev: undefined, keyCode: undefined};
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra //push all events on which the widget should be hidden
60e5271418c47637445291f3120af2a30d144471Tilo Mitra for (; i < hideOn.length; i++) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra o.node = hideOn[i].node;
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra o.ev = hideOn[i].eventName;
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra o.keyCode = hideOn[i].keyCode;
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra //no keycode or node defined
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra if (!o.node && !o.keyCode && o.ev) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra uiHandles.push(bb.on(o.ev, hide));
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra //node defined, no keycode (not a keypress)
60e5271418c47637445291f3120af2a30d144471Tilo Mitra else if (o.node && !o.keyCode && o.ev) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra uiHandles.push(o.node.on(o.ev, hide));
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra //node defined, keycode defined, event defined (its a key press)
60e5271418c47637445291f3120af2a30d144471Tilo Mitra else if (o.node && o.keyCode && o.ev) {
897547688bb5907542df4114fc4a55979ad7ec12Tilo Mitra uiHandles.push(o.node.on(o.ev, hide, o.keyCode));
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra else {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra Y.Log('The event with name "'+o.ev+'" could not be attached.');
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
897547688bb5907542df4114fc4a55979ad7ec12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._uiHandles = uiHandles;
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra },
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _detachUIHandles : function () {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra Y.each(this._uiHandles, function(h){
60e5271418c47637445291f3120af2a30d144471Tilo Mitra h.detach();
60e5271418c47637445291f3120af2a30d144471Tilo Mitra });
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._uiHandles = null;
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra },
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra _afterHostVisibleChange : function (e) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._uiSetHostVisible(e.newVal);
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra}, {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra // *** Static *** //
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra NS : AUTOHIDE,
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra ATTRS : {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra /*
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * @description An array of events that will cause the widget to hide.
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * Each index in the array should be an object literal with the following properties:
60e5271418c47637445291f3120af2a30d144471Tilo Mitra *
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * eventName (required, string): Refers to the event to listen to. If no other properties are
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * provided, it listens to this event on the widget's boundingBox. (ex: "clickoutside", "focusoutside")
60e5271418c47637445291f3120af2a30d144471Tilo Mitra *
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * node (optional, Y.Node): Refers to the node on which the "eventName" event should be listening.
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * For example, to close the widget when a resize on "#someDiv" occurs, pass in "Y.one("#someDiv")" to node, and "resize:end" to eventName
60e5271418c47637445291f3120af2a30d144471Tilo Mitra *
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * keyCode (optional, string): When listening to "key" events, this property can be filled with a keyCode such as "esc" or "down:27"
60e5271418c47637445291f3120af2a30d144471Tilo Mitra *
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * By default, this attribute has 3 objects within its array, clicking outside the widget, focussing outside the widget, and pressing the escape key
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * @attribute hideOn
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * @public
60e5271418c47637445291f3120af2a30d144471Tilo Mitra * @type array
60e5271418c47637445291f3120af2a30d144471Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra hideOn: {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra value: [
60e5271418c47637445291f3120af2a30d144471Tilo Mitra {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra eventName: CLICK_OUTSIDE
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
60e5271418c47637445291f3120af2a30d144471Tilo Mitra {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra eventName: FOCUS_OUTSIDE
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra node: Y.one(DOCUMENT),
60e5271418c47637445291f3120af2a30d144471Tilo Mitra eventName: KEY,
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra keyCode: PRESS_ESCAPE
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra ],
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra validator: Y.Lang.isArray
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra});
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo MitraY.namespace("Plugin").Autohide = WidgetAutohide;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra}, '@VERSION@' ,{requires:['base-build', 'widget', 'plugin', 'event-outside']});
60e5271418c47637445291f3120af2a30d144471Tilo Mitra