[Summary view] [Print] [Text view]

   1  YUI.add('gallery-bootstrap-dropdown', function(Y) {
   2  
   3  /**
   4  A Plugin which provides dropdown behaviors for dropdown buttons and menu
   5  groups. This utilizes the markup from the Twitter Bootstrap Project.
   6  
   7  @module gallery-bootstrap-dropdown
   8  **/
   9  
  10  /**
  11  A Plugin which provides dropdown behaviors for dropdown buttons and menu
  12  groups. This utilizes the markup from the Twitter Bootstrap Project.
  13  
  14  To automatically gain this functionality, you can simply add the
  15  <code>data-toggle=dropdown</code> attribute to any element.
  16  
  17  It can also be plugged into any node or node list.
  18  
  19  @example
  20  
  21    var node = Y.one('.someNode');
  22    node.plug( Y.Bootstrap.Dropdown );
  23    node.dropdown.show();
  24  
  25  @class Bootstrap.Dropdown
  26  **/
  27  
  28  var NS = Y.namespace('Bootstrap');
  29  
  30  function DropdownPlugin() {
  31    DropdownPlugin.superclass.constructor.apply(this, arguments);
  32  }
  33  
  34  DropdownPlugin.NAME = 'Bootstrap.Dropdown';
  35  DropdownPlugin.NS   = 'dropdown';
  36  
  37  Y.extend( DropdownPlugin, Y.Plugin.Base, {
  38      defaults : {
  39          className : 'open',
  40          target    : 'target',
  41          selector  : ''
  42      },
  43      initializer : function(config) {
  44          this._node = config.host;
  45  
  46          this.config = Y.mix( config, this.defaults );
  47  
  48          this.publish('show', { preventable : true, defaultFn : this.show });
  49          this.publish('hide', { preventable : true, defaultFn : this.hide });
  50  
  51          this._node.on('click', this.toggle, this);
  52      },
  53  
  54      toggle : function() {
  55          var target    = this.getTarget(),
  56              className = this.config.className;
  57  
  58          target.toggleClass( className );
  59          target.once('clickoutside', function() {
  60              target.toggleClass( className );
  61          });
  62      },
  63  
  64      show : function() {
  65          this.getTarget().addClass( this.config.className );
  66      },
  67      hide : function() {
  68          this.getTarget().removeClass( this.config.className );
  69      },
  70      open : function() {
  71          this.getTarget().addClass( this.config.className );
  72      },
  73      close : function() {
  74          this.getTarget().removeClass( this.config.className );
  75      },
  76  
  77      /**
  78      @method getTarget
  79      @description Fetches a Y.NodeList or Y.Node that should be used to modify class names
  80      **/
  81      getTarget : function() {
  82          var node     = this._node,
  83              selector = node.getData( this.config.target ),
  84              target;
  85  
  86          if ( !selector ) {
  87              selector = node.getAttribute('href');
  88              selector = target && target.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
  89          }
  90  
  91          target = Y.all(selector);
  92          if ( target.size() === 0 ) {
  93              target = node.get('parentNode');
  94          }
  95  
  96          return target;
  97      }
  98  });
  99  
 100  NS.Dropdown = DropdownPlugin;
 101  NS.dropdown_delegation = function() {
 102      Y.delegate('click', function(e) {
 103          var target = e.currentTarget;
 104          e.preventDefault();
 105  
 106          if ( typeof e.target.dropdown === 'undefined' ) {
 107              target.plug( DropdownPlugin );
 108              target.dropdown.toggle();
 109          }
 110      }, document.body, '*[data-toggle=dropdown]' );
 111  };
 112  
 113  
 114  }, '@VERSION@' ,{requires:['plugin','event','event-outside']});