defectivebydesign.org/20120615/files/misc/collapse.js

   1 (function ($) {
   2
   3 /**
   4  * Toggle the visibility of a fieldset using smooth animations.
   5  */
   6 Drupal.toggleFieldset = function (fieldset) {
   7   var $fieldset = $(fieldset);
   8   if ($fieldset.is('.collapsed')) {
   9     var $content = $('> .fieldset-wrapper', fieldset).hide();
  10     $fieldset
  11       .removeClass('collapsed')
  12       .trigger({ type: 'collapsed', value: false })
  13       .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
  14     $content.slideDown({
  15       duration: 'fast',
  16       easing: 'linear',
  17       complete: function () {
  18         Drupal.collapseScrollIntoView(fieldset);
  19         fieldset.animating = false;
  20       },
  21       step: function () {
  22         // Scroll the fieldset into view.
  23         Drupal.collapseScrollIntoView(fieldset);
  24       }
  25     });
  26   }
  27   else {
  28     $fieldset.trigger({ type: 'collapsed', value: true });
  29     $('> .fieldset-wrapper', fieldset).slideUp('fast', function () {
  30       $fieldset
  31         .addClass('collapsed')
  32         .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
  33       fieldset.animating = false;
  34     });
  35   }
  36 };
  37
  38 /**
  39  * Scroll a given fieldset into view as much as possible.
  40  */
  41 Drupal.collapseScrollIntoView = function (node) {
  42   var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
  43   var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
  44   var posY = $(node).offset().top;
  45   var fudge = 55;
  46   if (posY + node.offsetHeight + fudge > h + offset) {
  47     if (node.offsetHeight > h) {
  48       window.scrollTo(0, posY);
  49     }
  50     else {
  51       window.scrollTo(0, posY + node.offsetHeight - h + fudge);
  52     }
  53   }
  54 };
  55
  56 Drupal.behaviors.collapse = {
  57   attach: function (context, settings) {
  58     $('fieldset.collapsible', context).once('collapse', function () {
  59       var $fieldset = $(this);
  60       // Expand fieldset if there are errors inside, or if it contains an
  61       // element that is targeted by the uri fragment identifier.
  62       var anchor = location.hash && location.hash != '#' ? ', ' + location.hash : '';
  63       if ($('.error' + anchor, $fieldset).length) {
  64         $fieldset.removeClass('collapsed');
  65       }
  66
  67       var summary = $('<span class="summary"></span>');
  68       $fieldset.
  69         bind('summaryUpdated', function () {
  70           var text = $.trim($fieldset.drupalGetSummary());
  71           summary.html(text ? ' (' + text + ')' : '');
  72         })
  73         .trigger('summaryUpdated');
  74
  75       // Turn the legend into a clickable link, but retain span.fieldset-legend
  76       // for CSS positioning.
  77       var $legend = $('> legend .fieldset-legend', this);
  78
  79       $('<span class="fieldset-legend-prefix element-invisible"></span>')
  80         .append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
  81         .prependTo($legend)
  82         .after(' ');
  83
  84       // .wrapInner() does not retain bound events.
  85       var $link = $('<a class="fieldset-title" href="#"></a>')
  86         .prepend($legend.contents())
  87         .appendTo($legend)
  88         .click(function () {
  89           var fieldset = $fieldset.get(0);
  90           // Don't animate multiple times.
  91           if (!fieldset.animating) {
  92             fieldset.animating = true;
  93             Drupal.toggleFieldset(fieldset);
  94           }
  95           return false;
  96         });
  97
  98       $legend.append(summary);
  99     });
 100   }
 101 };
 102
 103 })(jQuery);