[Summary view] [Print] [Text view]

   1  // $Id: collapsible-div.js,v 1.6.2.2 2009/10/09 17:10:00 merlinofchaos Exp $
   2  /**
   3   * @file
   4   * Javascript required for a simple collapsible div.
   5   *
   6   * Creating a collapsible div with this doesn't take too much. There are
   7   * three classes necessary:
   8   *
   9   * - ctools-collapsible-container: This is the overall container that will be
  10   *   collapsible. This must be a div.
  11   * - ctools-collapsible-handle: This is the title area, and is what will be
  12   *   visible when it is collapsed. This can be any block element, such as div
  13   *   or h2.
  14   * - ctools-collapsible-content: This is the ocntent area and will only be
  15   *   visible when expanded. This must be a div.
  16   *
  17   * Adding 'ctools-collapsible-remember' to the container class will cause the
  18   * state of the container to be stored in a cookie, and remembered from page
  19   * load to page load. This will only work if the container has a unique ID, so
  20   * very carefully add IDs to your containers.
  21   *
  22   * If the class 'ctools-no-container' is placed on the container, the container
  23   * will be the handle. The content will be found by appending '-content' to the
  24   * id of the handle. The ctools-collapsible-handle and
  25   * ctools-collapsible-content classes will not be required in that case, and no
  26   * restrictions on what of data the container is are placed. Like
  27   * ctools-collapsible-remember this requires an id to eist.
  28   *
  29   * The content will be 'open' unless the container class has 'ctools-collapsed'
  30   * as a class, which will cause the container to draw collapsed.
  31   */
  32  
  33  (function ($) {
  34    // All CTools tools begin with this if they need to use the CTools namespace.
  35    if (!Drupal.CTools) {
  36      Drupal.CTools = {};
  37    }
  38  
  39    /**
  40     * Object to store state.
  41     *
  42     * This object will remember the state of collapsible containers. The first
  43     * time a state is requested, it will check the cookie and set up the variable.
  44     * If a state has been changed, when the window is unloaded the state will be
  45     * saved.
  46     */
  47    Drupal.CTools.Collapsible = {
  48      state: {},
  49      stateLoaded: false,
  50      stateChanged: false,
  51      cookieString: 'ctools-collapsible-state=',
  52  
  53      /**
  54       * Get the current collapsed state of a container.
  55       *
  56       * If set to 1, the container is open. If set to -1, the container is
  57       * collapsed. If unset the state is unknown, and the default state should
  58       * be used.
  59       */
  60      getState: function (id) {
  61        if (!this.stateLoaded) {
  62          this.loadCookie();
  63        }
  64  
  65        return this.state[id];
  66      },
  67  
  68      /**
  69       * Set the collapsed state of a container for subsequent page loads.
  70       *
  71       * Set the state to 1 for open, -1 for collapsed.
  72       */
  73      setState: function (id, state) {
  74        if (!this.stateLoaded) {
  75          this.loadCookie();
  76        }
  77  
  78        this.state[id] = state;
  79  
  80        if (!this.stateChanged) {
  81          this.stateChanged = true;
  82          $(window).unload(this.unload);
  83        }
  84      },
  85  
  86      /**
  87       * Check the cookie and load the state variable.
  88       */
  89      loadCookie: function () {
  90        // If there is a previous instance of this cookie
  91        if (document.cookie.length > 0) {
  92          // Get the number of characters that have the list of values
  93          // from our string index.
  94          offset = document.cookie.indexOf(this.cookieString);
  95  
  96          // If its positive, there is a list!
  97          if (offset != -1) {
  98            offset += this.cookieString.length;
  99            var end = document.cookie.indexOf(';', offset);
 100            if (end == -1) {
 101              end = document.cookie.length;
 102            }
 103  
 104            // Get a list of all values that are saved on our string
 105            var cookie = unescape(document.cookie.substring(offset, end));
 106  
 107            if (cookie != '') {
 108              var cookieList = cookie.split(',');
 109              for (var i = 0; i < cookieList.length; i++) {
 110                var info = cookieList[i].split(':');
 111                this.state[info[0]] = info[1];
 112              }
 113            }
 114          }
 115        }
 116  
 117        this.stateLoaded = true;
 118      },
 119  
 120      /**
 121       * Turn the state variable into a string and store it in the cookie.
 122       */
 123      storeCookie: function () {
 124        var cookie = '';
 125  
 126        // Get a list of IDs, saparated by comma
 127        for (i in this.state) {
 128          if (cookie != '') {
 129            cookie += ',';
 130          }
 131          cookie += i + ':' + this.state[i];
 132        }
 133  
 134        // Save this values on the cookie
 135        document.cookie = this.cookieString + escape(cookie) + ';path=/';
 136      },
 137  
 138      /**
 139       * Respond to the unload event by storing the current state.
 140       */
 141      unload: function() {
 142        Drupal.CTools.Collapsible.storeCookie();
 143      }
 144    };
 145  
 146    // Set up an array for callbacks.
 147    Drupal.CTools.CollapsibleCallbacks = [];
 148    Drupal.CTools.CollapsibleCallbacksAfterToggle = [];
 149  
 150    /**
 151     * Bind collapsible behavior to a given container.
 152     */
 153    Drupal.CTools.bindCollapsible = function () {
 154      var $container = $(this);
 155  
 156      // Allow the specification of the 'no container' class, which means the
 157      // handle and the container can be completely independent.
 158      if ($container.hasClass('ctools-no-container') && $container.attr('id')) {
 159        // In this case, the container *is* the handle and the content is found
 160        // by adding '-content' to the id. Obviously, an id is required.
 161        var handle = $container;
 162        var content = $('#' + $container.attr('id') + '-content');
 163      }
 164      else {
 165        var handle = $container.children('.ctools-collapsible-handle');
 166        var content = $container.children('div.ctools-collapsible-content');
 167      }
 168  
 169      if (content.length) {
 170        // Create the toggle item and place it in front of the toggle.
 171        var toggle = $('<span class="ctools-toggle"></span>');
 172        handle.before(toggle);
 173  
 174        // If the remember class is set, check to see if we have a remembered
 175        // state stored.
 176        if ($container.hasClass('ctools-collapsible-remember') && $container.attr('id')) {
 177          var state = Drupal.CTools.Collapsible.getState($container.attr('id'));
 178          if (state == 1) {
 179            $container.removeClass('ctools-collapsed');
 180          }
 181          else if (state == -1) {
 182            $container.addClass('ctools-collapsed');
 183          }
 184        }
 185  
 186        // If we should start collapsed, do so:
 187        if ($container.hasClass('ctools-collapsed')) {
 188          toggle.toggleClass('ctools-toggle-collapsed');
 189          content.hide();
 190        }
 191  
 192        var afterToggle = function () {
 193          if (Drupal.CTools.CollapsibleCallbacksAfterToggle) {
 194            for (i in Drupal.CTools.CollapsibleCallbacksAfterToggle) {
 195              Drupal.CTools.CollapsibleCallbacksAfterToggle[i]($container, handle, content, toggle);
 196            }
 197          }
 198        }
 199  
 200        var clickMe = function () {
 201          if (Drupal.CTools.CollapsibleCallbacks) {
 202            for (i in Drupal.CTools.CollapsibleCallbacks) {
 203              Drupal.CTools.CollapsibleCallbacks[i]($container, handle, content, toggle);
 204            }
 205          }
 206  
 207          // If the container is a table element slideToggle does not do what
 208          // we want, so use toggle() instead.
 209          if ($container.is('table')) {
 210            content.toggle(0, afterToggle);
 211          }
 212          else {
 213            content.slideToggle(100, afterToggle);
 214          }
 215  
 216          toggle.toggleClass('ctools-toggle-collapsed');
 217  
 218          // If we're supposed to remember the state of this class, do so.
 219          if ($container.hasClass('ctools-collapsible-remember') && $container.attr('id')) {
 220            var state = toggle.hasClass('ctools-toggle-collapsed') ? -1 : 1;
 221            Drupal.CTools.Collapsible.setState($container.attr('id'), state);
 222          }
 223        }
 224  
 225        // Let both the toggle and the handle be clickable.
 226        toggle.click(clickMe);
 227        handle.click(clickMe);
 228      }
 229    };
 230  
 231    /**
 232     * Support Drupal's 'behaviors' system for binding.
 233     */
 234    Drupal.behaviors.CToolsCollapsible = function(context) {
 235      $('.ctools-collapsible-container:not(.ctools-collapsible-processed)', context)
 236        .each(Drupal.CTools.bindCollapsible)
 237        .addClass('ctools-collapsible-processed');
 238    }
 239  })(jQuery);