toggle.js

/*
 * toggle.js
 */
var logger = require('./logger'),
    log = logger.log,
    $ = require('jquery');

var toggle = function() {

  /**
   * Get Panel from toggle.
   */
  function getTogglePanel($toggle) {
    var $panel = $('#' + $toggle.attr('aria-controls'));
    return $panel.length > 0 ? $panel : false;
  };

  /**
   * Click Handler.
   */
  function onToggleClick(event) {
    var $target = $(event.target);
    $target.trigger($target.attr('aria-expanded') === 'true' ? 'collapse' : 'expand');
    //event.preventDefault();
    return false;
  };

  /**
   * Collapse Handler.
   */
  function onToggleCollapse(event) {
    var $target = $(event.target),
        $panel = getTogglePanel($target);

    // Update this toggle's state.
    $target.attr('aria-expanded', 'false');
    // Collapse this panel.
    if ($panel) {
      $panel.trigger('collapse');
    };
  };

  /**
   * Expand Handler.
   */
   function onToggleExpand(event) {
    var $target = $(event.target),
        $panel = getTogglePanel($target);

    // Update this toggle's state.
    $target.attr('aria-expanded', 'true');
    // Expand this panel.
    if ($panel) {
     $panel.trigger('expand');
    };
  };

  /**
   * Bind Toggles.
   */
  function bindUi() {
    var toggle = this,
        $body = $('body');

    $body.on('click.toggle', '.toggle[aria-controls]', onToggleClick);
    $body.on('expand.toggle', onToggleExpand);
    $body.on('collapse.toggle', onToggleCollapse);
  };

  return {
    init: function() {
      log('toggle.init()');
      bindUi();
    }
  };
};

module.exports = toggle();