[Summary view] [Print] [Text view]

   1  /**
   2  The Moodle Bootstrap theme's bootstrap JavaScript
   3  
   4  @namespace Moodle
   5  @module theme_bootstrapbase-bootstrap
   6  **/
   7  
   8  /**
   9  The Moodle Bootstrap theme's bootstrap JavaScript
  10  
  11  @class Moodle.theme_bootstrapbase.bootstrap
  12  @uses node
  13  @uses selector-css3
  14  @constructor
  15  **/
  16  var CSS = {
  17          ACTIVE: 'active'
  18      },
  19      SELECTORS = {
  20          NAVBAR_BUTTON: '.btn-navbar',
  21          // FIXME This is deliberately wrong because of a breaking issue in the upstream library.
  22          TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]'
  23      },
  24      NS = Y.namespace('Moodle.theme_bootstrapbase.bootstrap');
  25  
  26  /**
  27   * Initialise the Moodle Bootstrap theme JavaScript
  28   *
  29   * @method init
  30   */
  31  NS.init = function() {
  32      // We must use these here and *must not* add them to the list of dependencies until
  33      // Moodle fully supports the gallery.
  34      // When debugging is disabled and we seed the Loader with out configuration, if these
  35      // are in the requires array, then the Loader will try to load them from the CDN. It
  36      // does not know that we have added them to the module rollup.
  37      Y.use('gallery-bootstrap-dropdown',
  38              'gallery-bootstrap-collapse',
  39              'gallery-bootstrap-engine', function() {
  40  
  41          // Set up expandable and show.
  42          NS.setup_toggle_expandable();
  43          NS.setup_toggle_show();
  44  
  45          // Set up upstream dropdown delegation.
  46          Y.Bootstrap.dropdown_delegation();
  47      });
  48  };
  49  
  50  /**
  51   * Setup toggling of the Toggle Collapse
  52   *
  53   * @method setup_toggle_expandable
  54   * @private
  55   */
  56  NS.setup_toggle_expandable = function() {
  57      Y.delegate('click', this.toggle_expandable, Y.config.doc, SELECTORS.TOGGLECOLLAPSE, this);
  58  };
  59  
  60  /**
  61   * Use the Y.Bootstrap.Collapse plugin to toggle collapse.
  62   *
  63   * @method toggle_expandable
  64   * @private
  65   * @param {EventFacade} e
  66   */
  67  NS.toggle_expandable = function(e) {
  68      if (typeof e.currentTarget.collapse === 'undefined') {
  69          // Only plug if we haven't already.
  70          e.currentTarget.plug(Y.Bootstrap.Collapse);
  71  
  72          // The plugin will now catch the click and handle the toggle.
  73          // We only need to do this when we plug the node for the first
  74          // time.
  75          e.currentTarget.collapse.toggle();
  76          e.preventDefault();
  77      }
  78  };
  79  
  80  /**
  81   * Set up the show toggler for activating the navigation bar
  82   *
  83   * @method setup_toggle_show
  84   * @private
  85   */
  86  NS.setup_toggle_show = function() {
  87      Y.delegate('click', this.toggle_show, Y.config.doc, SELECTORS.NAVBAR_BUTTON);
  88  };
  89  
  90  /**
  91   * Toggle hiding of the navigation bar
  92   *
  93   * @method toggle_show
  94   * @private
  95   * @param {EventFacade} e
  96   */
  97  NS.toggle_show = function(e) {
  98      // Toggle the active class on both the clicked .btn-navbar and the
  99      // associated target, defined by a CSS selector string set as the
 100      // data-target attribute on the .btn-navbar element in question.
 101      //
 102      // This will allow for us to have multiple .btn-navbar elements
 103      // each with their own collapse/expand targets - these targets
 104      // should be of class .nav-collapse.
 105      var myTarget = this.get('parentNode').one(this.getAttribute('data-target'));
 106      if (myTarget) {
 107          this.siblings(".btn-navbar").removeClass(CSS.ACTIVE);
 108          myTarget.siblings(".nav-collapse").removeClass(CSS.ACTIVE);
 109          myTarget.toggleClass(CSS.ACTIVE);
 110      }
 111      e.currentTarget.toggleClass(CSS.ACTIVE);
 112  };