From 687ff02f2734c791beae0491b4c0128431cbc802 Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Tue, 12 Jul 2016 11:22:20 +0100 Subject: [PATCH] Renamed the new property (it's now negated). Added some selector caching. Re-added the 'toggleSpeed' var which had gone awol --- README.md | 2 +- js/adapt-contrib-accordion.js | 35 +++++++++++++++++++++++------------ properties.schema | 8 ++++---- 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 98bf8b6..ba3ea6c 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ guide the learner’s interaction with the component. >**_classes** (string): An optional class that will be applied to the Accordion Item. -**_preventItemAutoCollapse** (boolean): Used to prevent the auto-collapse of other expanded Accordion items whenever an item is clicked/expanded. Defaulted to 'false' +**_shouldCollapseItems** (boolean): Used to control the auto-collapse of other expanded Accordion items whenever an item is clicked/expanded. Defaulted to 'true' ### Accessibility **Accordion** has been assigned a label using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**. This label is not a visible element. It is utilized by assistive technology such as screen readers. Should the region's text need to be customised, it can be found within the **globals** object in [*properties.schema*](https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/properties.schema). diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index a1a4523..ec0975b 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -9,6 +9,8 @@ define(function(require) { 'click .accordion-item-title': 'toggleItem' }, + toggleSpeed: 200, + preRender: function() { // Checks to see if the accordion should be reset on revisit this.checkIfResetOnRevisit(); @@ -39,7 +41,7 @@ define(function(require) { var accordionItem = toggleButton.parent('.accordion-item'); var isCurrentlyExpanded = toggleButton.hasClass('selected'); - if (!this.model.get('_preventItemAutoCollapse')) { + if (this.model.get('_shouldCollapseItems')) { // Close and reset all Accordion items var allAccordionItems = this.$('.accordion-item'); var count = allAccordionItems.length; @@ -61,11 +63,15 @@ define(function(require) { return false; } - $(itemEl).find('.accordion-item-body').first().stop(true, true).slideUp(this.toggleSpeed); - $(itemEl).find('button').first().removeClass('selected'); - $(itemEl).find('button').first().attr('aria-expanded', false); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); + var body = $('.accordion-item-body', $(itemEl)).first(); + var button = $('button', $(itemEl)).first(); + var icon = $('.accordion-item-title-icon', $(itemEl)).first(); + + body.stop(true, true).slideUp(this.toggleSpeed); + button.removeClass('selected'); + button.attr('aria-expanded', false); + icon.addClass('icon-plus'); + icon.removeClass('icon-minus'); }, openItem: function(itemEl) { @@ -73,17 +79,22 @@ define(function(require) { return false; } - var body = $(itemEl).find('.accordion-item-body').first().stop(true, true).slideDown(this.toggleSpeed, function() { + var body = $('.accordion-item-body', $(itemEl)).first(); + var button = $('button', $(itemEl)).first(); + var icon = $('.accordion-item-title-icon', $(itemEl)).first(); + + body = body.stop(true, true).slideDown(this.toggleSpeed, function() { body.a11y_focus(); }); - $(itemEl).find('button').first().addClass('selected'); - $(itemEl).find('button').first().attr('aria-expanded', true); + button.first().addClass('selected'); + button.first().attr('aria-expanded', true); this.setVisited(itemEl.index()); - $(itemEl).find('button').first().addClass('visited'); - $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-minus'); + button.addClass('visited'); + + icon.removeClass('icon-plus'); + icon.first().addClass('icon-minus'); }, setVisited: function(index) { diff --git a/properties.schema b/properties.schema index c9e820c..f78356f 100644 --- a/properties.schema +++ b/properties.schema @@ -94,17 +94,17 @@ } } }, - "_preventItemAutoCollapse": { + "_shouldCollapseItems": { "type": "boolean", "required": false, - "default": false, - "title": "Prevent item auto-collapse", + "default": true, + "title": "Items should auto-collapse", "inputType": { "type": "Boolean", "options": [true, false] }, "validators": [], - "help": "If set to 'true', upon expansion of an accordion item, any previously expanded items will not be collapsed" + "help": "If set to 'false', upon expansion of an accordion item, any previously expanded items will not be collapsed" } } }