widget-autohide-debug.js revision 10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo MitraYUI.add('widget-autohide', function(Y) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra/**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * A widget-level extension that provides ability to hide widget when
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * certain events occur.
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra *
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * @module widget-autohide
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * @author eferraiuolo, tilomitra
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra * @since 3.4.0
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra */
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitravar WIDGET_AUTOHIDE = 'widgetAutohide',
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra AUTOHIDE = 'autohide',
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra CLICK_OUTSIDE = 'clickoutside',
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra FOCUS_OUTSIDE = 'focusoutside',
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra DOCUMENT = 'document',
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra KEY = 'key',
4f4ba013cd866a655a896f39f944674d19ad1387Tilo Mitra PRESS_ESCAPE = 'esc',
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra BIND_UI = 'bindUI',
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra SYNC_UI = "syncUI",
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra RENDERED = "rendered",
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra BOUNDING_BOX = "boundingBox",
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra VISIBLE = "visible",
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra CHANGE = 'Change',
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra getCN = Y.ClassNameManager.getClassName;
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra/**
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * The WidgetAutohide class provides the hideOn attribute which can
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * be used to hide the widget when certain events occur.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @class WidgetAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @param {Object} config User configuration object
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitrafunction WidgetAutohide(config) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra Y.after(this._bindUIAutohide, this, BIND_UI);
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra Y.after(this._syncUIAutohide, this, SYNC_UI);
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra if (this.get(RENDERED)) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._bindUIAutohide();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._syncUIAutohide();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra}
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra/**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra* Static property used to define the default attribute
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra* configuration introduced by WidgetAutohide.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra*
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith* @property ATTRS
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra* @static
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra* @type Object
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra*/
60e5271418c47637445291f3120af2a30d144471Tilo MitraWidgetAutohide.ATTRS = {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @attribute hideOn
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @type array
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @description An array of objects corresponding to the nodes, events, and keycodes to hide the widget on.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * The implementer can supply an array of objects, with each object having the following properties:
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * <p>eventName: (string, required): The eventName to listen to.</p>
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * <p>node: (Y.Node, optional): The Y.Node that will fire the event (defaults to the boundingBox of the widget)</p>
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * <p>keyCode: (string, optional): If listening for key events, specify the keyCode</p>
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * <p>By default, this attribute consists of one object which will cause the widget to hide if the
2cbd03cf7d25ed7f8942ecaf21a4b58d7f41ff11Tilo Mitra * escape key is pressed.</p>
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra hideOn: {
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra valueFn: function() {
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra return [
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra {
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra node: Y.one(DOCUMENT),
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra eventName: KEY,
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra keyCode: PRESS_ESCAPE
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra }
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra ];
d9311c9547eb9d58cdf0b0453313755cb37c4155Tilo Mitra },
60e5271418c47637445291f3120af2a30d144471Tilo Mitra validator: Y.Lang.isArray
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra};
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo MitraWidgetAutohide.prototype = {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra // *** Instance Members *** //
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra _uiHandlesAutohide : null,
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra // *** Lifecycle Methods *** //
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra destructor : function () {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._detachUIHandlesAutohide();
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Binds event listeners to the widget.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * <p>
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * This method in invoked after bindUI is invoked for the Widget class
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * using YUI's aop infrastructure.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * </p>
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _bindUIAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @protected
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _bindUIAutohide : function () {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this.after(VISIBLE+CHANGE, this._afterHostVisibleChangeAutohide);
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this.after("hideOnChange", this._afterHideOnChange);
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Syncs up the widget based on its current state. In particular, removes event listeners if
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * widget is not visible, and attaches them otherwise.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * <p>
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * This method in invoked after syncUI is invoked for the Widget class
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * using YUI's aop infrastructure.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * </p>
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _syncUIAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @protected
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _syncUIAutohide : function () {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._uiSetHostVisibleAutohide(this.get(VISIBLE));
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra // *** Private Methods *** //
897547688bb5907542df4114fc4a55979ad7ec12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Removes event listeners if widget is not visible, and attaches them otherwise.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _uiSetHostVisibleAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @protected
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _uiSetHostVisibleAutohide : function (visible) {
897547688bb5907542df4114fc4a55979ad7ec12Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra if (visible) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra //this._attachUIHandlesAutohide();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra Y.later(1, this, '_attachUIHandlesAutohide');
60e5271418c47637445291f3120af2a30d144471Tilo Mitra } else {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._detachUIHandlesAutohide();
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Iterates through all objects in the hideOn attribute and creates event listeners.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _attachUIHandlesAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @protected
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _attachUIHandlesAutohide : function () {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra if (this._uiHandlesAutohide) { return; }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra var bb = this.get(BOUNDING_BOX),
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra hide = Y.bind(this.hide,this),
60e5271418c47637445291f3120af2a30d144471Tilo Mitra uiHandles = [],
60e5271418c47637445291f3120af2a30d144471Tilo Mitra self = this,
60e5271418c47637445291f3120af2a30d144471Tilo Mitra hideOn = this.get('hideOn'),
60e5271418c47637445291f3120af2a30d144471Tilo Mitra i = 0,
60e5271418c47637445291f3120af2a30d144471Tilo Mitra o = {node: undefined, ev: undefined, keyCode: undefined};
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra //push all events on which the widget should be hidden
60e5271418c47637445291f3120af2a30d144471Tilo Mitra for (; i < hideOn.length; i++) {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra o.node = hideOn[i].node;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra o.ev = hideOn[i].eventName;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra o.keyCode = hideOn[i].keyCode;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra //no keycode or node defined
60e5271418c47637445291f3120af2a30d144471Tilo Mitra if (!o.node && !o.keyCode && o.ev) {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra uiHandles.push(bb.on(o.ev, hide));
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra //node defined, no keycode (not a keypress)
60e5271418c47637445291f3120af2a30d144471Tilo Mitra else if (o.node && !o.keyCode && o.ev) {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra uiHandles.push(o.node.on(o.ev, hide));
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra //node defined, keycode defined, event defined (its a key press)
60e5271418c47637445291f3120af2a30d144471Tilo Mitra else if (o.node && o.keyCode && o.ev) {
60e5271418c47637445291f3120af2a30d144471Tilo Mitra uiHandles.push(o.node.on(o.ev, hide, o.keyCode));
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra else {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra Y.log('The event with name "'+o.ev+'" could not be attached.');
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra }
c714ee41455a161bf18197074d7e205b9d03b377Tilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra this._uiHandlesAutohide = uiHandles;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Detaches all event listeners created by this extension
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _detachUIHandlesAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @protected
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _detachUIHandlesAutohide : function () {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra Y.each(this._uiHandlesAutohide, function(h){
60e5271418c47637445291f3120af2a30d144471Tilo Mitra h.detach();
60e5271418c47637445291f3120af2a30d144471Tilo Mitra });
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra this._uiHandlesAutohide = null;
60e5271418c47637445291f3120af2a30d144471Tilo Mitra },
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Default function called when the visibility of the widget changes. Determines
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * whether to attach or detach event listeners based on the visibility of the widget.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _afterHostVisibleChangeAutohide
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @protected
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
60e5271418c47637445291f3120af2a30d144471Tilo Mitra _afterHostVisibleChangeAutohide : function (e) {
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo Mitra this._uiSetHostVisibleAutohide(e.newVal);
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra },
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra /**
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * Default function called when hideOn Attribute is changed. Remove existing listeners and create new listeners.
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra *
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra * @method _afterHideOnChange
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra */
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra _afterHideOnChange : function(e) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._detachUIHandlesAutohide();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra if (this.get(VISIBLE)) {
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra this._attachUIHandlesAutohide();
c3db5f41661b8fee6566b38dbffeabe56e4dce12Tilo Mitra }
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra }
60e5271418c47637445291f3120af2a30d144471Tilo Mitra}
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
60e5271418c47637445291f3120af2a30d144471Tilo MitraY.WidgetAutohide = WidgetAutohide;
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
853244a9af0549d584b80ac65d4fcb92de7c58bcTilo Mitra
dc02f346c16a47973a2f3f375bf43937b86b3e75Tilo Mitra}, '@VERSION@' ,{requires:['base-build','widget','event-outside','event-key']});