[Summary view] [Print] [Text view]

   1  YUI.add('gallery-bootstrap-collapse', function(Y) {
   2  
   3  /**
   4  A Plugin which provides collapsing/expanding behaviors on a Node with
   5  compatible syntax and markup from Twitter's Bootstrap project.
   6  
   7  @module gallery-bootstrap-collapse
   8  **/
   9  
  10  /**
  11  A Plugin which provides collapsing and expanding behaviors on a Node with
  12  compatible syntax and markup from Twitter's Bootstrap project.
  13  
  14  It possible to have dynamic behaviors without incorporating any
  15  JavaScript by setting <code>data-toggle=collapse</code> on any element.
  16  
  17  However, it can be manually plugged into any node or node list.
  18  
  19  @example
  20  
  21      var node = Y.one('.someNode');
  22      node.plug( Y.Bootstrap.Collapse, config );
  23  
  24      node.collapse.show();
  25  
  26  @class Bootstrap.Collapse
  27  **/
  28  
  29  function CollapsePlugin() {
  30      CollapsePlugin.superclass.constructor.apply(this, arguments);
  31  }
  32  
  33  CollapsePlugin.NAME = 'Bootstrap.Collapse';
  34  CollapsePlugin.NS   = 'collapse';
  35  
  36  Y.extend(CollapsePlugin, Y.Plugin.Base, {
  37      defaults : {
  38          duration  : 0.25,
  39          easing    : 'ease-in',
  40          showClass : 'in',
  41          hideClass : 'out',
  42  
  43          groupSelector : '> .accordion-group > .in'
  44      },
  45  
  46      transitioning: false,
  47  
  48      initializer : function(config) {
  49          this._node = config.host;
  50  
  51          this.config = Y.mix( config, this.defaults );
  52  
  53          this.publish('show', { preventable : true, defaultFn : this.show });
  54          this.publish('hide', { preventable : true, defaultFn : this.hide });
  55  
  56          this._node.on('click', this.toggle, this);
  57      },
  58  
  59      _getTarget: function() {
  60          var node = this._node,
  61              container;
  62  
  63          if ( node.getData('target') ) {
  64              container = Y.one( node.getData('target') );
  65          }
  66          else if ( node.getAttribute('href').indexOf('#') >= 0 ) {
  67              Y.log('No target, looking at href: ' + node.getAttribute('href'), 'debug', 'Bootstrap.Collapse');
  68              container = Y.one( node.getAttribute('href').substr( node.getAttribute('href').indexOf('#') ) );
  69          }
  70          return container;
  71      },
  72  
  73      /**
  74      * @method hide
  75      * @description Hide the collapsible target, specified by the host's
  76      * <code>data-target</code> or <code>href</code> attribute.
  77      */
  78      hide: function() {
  79          var node      = this._getTarget();
  80  
  81          if ( this.transitioning ) {
  82              return;
  83          }
  84  
  85          if ( node ) {
  86              this._hideElement(node);
  87          }
  88      },
  89  
  90      /**
  91      * @method show
  92      * @description Show the collapsible target, specified by the host's
  93      * <code>data-target</code> or <code>href</code> attribute.
  94      */
  95      show: function() {
  96          var node      = this._getTarget(),
  97              host      = this._node,
  98              self      = this,
  99              parent,
 100              group_selector = this.config.groupSelector;
 101  
 102          if ( this.transitioning ) {
 103              return;
 104          }
 105  
 106          if ( host.getData('parent') ) {
 107              parent = Y.one( host.getData('parent') );
 108              if ( parent ) {
 109                  parent.all(group_selector).each( function(el) {
 110                      Y.log('Hiding element: ' + el, 'debug', 'Bootstrap.Collapse');
 111                      self._hideElement(el);
 112                  });
 113              }
 114          }
 115          this._showElement(node);
 116      },
 117  
 118      /**
 119      @method toggle
 120      @description Toggle the state of the collapsible target, specified
 121      by the host's <code>data-target</code> or <code>href</code>
 122      attribute. Calls the <code>show</code> or <code>hide</code> method.
 123      **/
 124      toggle : function(e) {
 125          if ( e && Y.Lang.isFunction(e.preventDefault) ) {
 126              e.preventDefault();
 127          }
 128  
 129          var target = this._getTarget();
 130  
 131          if ( target.hasClass( this.config.showClass ) ) {
 132              this.fire('hide');
 133          } else {
 134              this.fire('show');
 135          }
 136      },
 137  
 138      /**
 139      @method _transition
 140      @description Handles the transition between showing and hiding.
 141      @protected
 142      @param node {Node} node to apply transitions to
 143      @param method {String} 'hide' or 'show'
 144      **/
 145      _transition : function(node, method) {
 146          var self        = this,
 147              config      = this.config,
 148              duration    = config.duration,
 149              easing      = config.easing,
 150              // If we are hiding, then remove the show class.
 151              removeClass = method === 'hide' ? config.showClass : config.hideClass,
 152              // And if we are hiding, add the hide class.
 153              addClass    = method === 'hide' ? config.hideClass : config.showClass,
 154  
 155              to_height   = method === 'hide' ? 0 : null,
 156              event       = method === 'hide' ? 'hidden' : 'shown',
 157  
 158              complete = function() {
 159                  node.removeClass(removeClass);
 160                  node.addClass(addClass);
 161                  self.transitioning = false;
 162                  this.fire( event );
 163              };
 164  
 165          if ( to_height === null ) {
 166              to_height = 0;
 167              node.all('> *').each(function(el) {
 168                  to_height += el.get('scrollHeight');
 169              });
 170          }
 171  
 172          this.transitioning = true;
 173  
 174          node.transition({
 175              height   : to_height +'px',
 176              duration : duration,
 177              easing   : easing
 178          }, complete);
 179      },
 180  
 181      /**
 182      @method _hideElement
 183      @description Calls the <code>_transition</code> method to hide a node.
 184      @protected
 185      @param node {Node} node to hide.
 186      **/
 187      _hideElement : function(node) {
 188          this._transition(node, 'hide');
 189  /*
 190          var showClass = this.showClass,
 191              hideClass = this.hideClass;
 192  
 193          node.removeClass(showClass);
 194          node.addClass(hideClass);
 195  */
 196      },
 197  
 198      /**
 199      @method _showElement
 200      @description Calls the <code>_transition</code> method to show a node.
 201      @protected
 202      @param node {Node} node to show.
 203      **/
 204      _showElement : function(node) {
 205          this._transition(node, 'show');
 206  /*
 207          var showClass = this.showClass,
 208              hideClass = this.hideClass;
 209          node.removeClass(hideClass);
 210          node.addClass(showClass);
 211  */
 212      }
 213  });
 214  
 215  Y.namespace('Bootstrap').Collapse = CollapsePlugin;
 216  
 217  
 218  
 219  }, '@VERSION@' ,{requires:['plugin','transition','event','event-delegate']});