Created
April 2, 2014 03:39
-
-
Save clrockwell/80458f3f49f7274b6652 to your computer and use it in GitHub Desktop.
Had a seemingly rare requirement for an accordion that the designer could specify which sections were open and closed by default -- requires the accordion to calculate height of several elements rather than just, for example, a heading
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @file | |
* | |
* | |
* | |
*/ | |
(function ($) { | |
Drupal.behaviors.listen_to_open = function (item) { | |
item.find('.accordion-trigger a').click( | |
function () { | |
var closedOpen = false; | |
// if this one is open, just close it | |
if (item.hasClass('accordion-open')) { | |
Drupal.behaviors.smoothAccordionCloseItems(); | |
} else { | |
// close all others, then open this one | |
Drupal.behaviors.smoothAccordionCloseItems(); | |
Drupal.behaviors.smoothAccordionOpenItems(item); | |
} | |
return false; | |
} | |
) | |
} | |
Drupal.behaviors.smoothAccordionCloseItems = function () { | |
$('.accordion-open').each( | |
function () { | |
$this = $(this); | |
$this.animate({ | |
height: $this.attr('data-close-height'), | |
}) | |
.removeClass('accordion-open').addClass('accordion-closed'); | |
} | |
) | |
} | |
Drupal.behaviors.smoothAccordionOpenItems = function (item) { | |
if (item == undefined) { | |
// @todo open all | |
//$('.multi-image-wrapper, .accordion-item-body'); | |
} | |
else { | |
Drupal.behaviors.smoothAccordionAnimateOpen(item); | |
} | |
} | |
Drupal.behaviors.smoothAccordionAnimateOpen = function(items) { | |
// loop through each and open | |
var bodyHeight; | |
var targetHeight; | |
for (var i = 0; i < items.length; i++) { | |
$item = $(items[i]); | |
$item.animate({ | |
height: $item.attr('data-open-height') | |
}).removeClass('accordion-closed').addClass('accordion-open'); | |
} | |
} | |
Drupal.behaviors.smoothAccordionAddDataHeight = function (accordions) { | |
// for each accordion, get the aggregate height of all elements | |
// that should not be closed and store them for use later | |
// meh. check for product showcase | |
// @todo clean up | |
$ps = $('.product-showcase-accordion'); | |
$pro = $('.promotions-accordion'); | |
var $this; | |
accordions.each( | |
function() { | |
$this = $(this); | |
if ($ps.length > 0 || $pro.length > 0) { | |
var bodyHeight = $this.find('.product-showcase-copy-container').height(); | |
} else { | |
var bodyHeight = $this.height(); | |
} | |
var imgHeight = $this.find('img:first').height()*1.25; | |
var closedHeight = 0; | |
//var openHeight = $this.height() + $this.find('img:first').height()*1.25; | |
var openHeight = bodyHeight > imgHeight ? bodyHeight : imgHeight; | |
$this.find('.accordion-no-close').each( | |
function () { | |
closedHeight += $(this).height(); | |
console.log(closedHeight); | |
if($ps.length > 0) { | |
closedHeight += 15; | |
} | |
if( $pro.length > 0) { | |
closedHeight += 5; | |
} | |
} | |
) | |
$this.attr('data-close-height', closedHeight).attr('data-open-height', openHeight); | |
} | |
) | |
// with all set, close the accordions | |
accordions.addClass('accordion-open'); | |
Drupal.behaviors.smoothAccordionCloseItems(); | |
} | |
Drupal.behaviors.smoothAccordion = { | |
attach: function (context, settings) { | |
// close everything | |
var $accordions = $('.accordion-group'); | |
$(window).load(function() { | |
Drupal.behaviors.smoothAccordionAddDataHeight($accordions); | |
$accordions.each( | |
function() { | |
Drupal.behaviors.listen_to_open($(this)); | |
} | |
) | |
}) | |
} | |
} | |
}(jQuery)); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment