Skip to content

Commit

Permalink
Merge pull request #77 from barry-learningpool/add-support-for-preven…
Browse files Browse the repository at this point in the history 
…ting-item-collapse

Add support for preventing the collapse of items
  • Loading branch information
@brian-learningpool
brian-learningpool authored Jul 19, 2016
2 parents a04bc11 + a903206 commit 893b592
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 45 deletions.
44 changes: 23 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# adapt-contrib-accordion
# adapt-contrib-accordion

<img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/accordion01.gif" alt="accordion in action" align="right"> **Accordion** is a *presentation component* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework).
<img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/accordion01.gif" alt="accordion in action" align="right"> **Accordion** is a *presentation component* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework).

The component displays a vertically stacked list of headings. Each heading is associated with a collapsible content panel. Clicking a heading toggles the visibility of its content panel. Content panels may contain text and/or an image.

Expand All @@ -11,16 +11,16 @@ The component displays a vertically stacked list of headings. Each heading is as
As one of Adapt's *[core components](https://github.com/adaptlearning/adapt_framework/wiki/Core-Plug-ins-in-the-Adapt-Learning-Framework#components),* **Accordion** is included with the [installation of the Adapt framework](https://github.com/adaptlearning/adapt_framework/wiki/Manual-installation-of-the-Adapt-framework#installation) and the [installation of the Adapt authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-Adapt-Origin).

* If **Accordion** has been uninstalled from the Adapt framework, it may be reinstalled.
With the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line:
With the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line:
`adapt install adapt-contrib-accordion`

Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file:
`"adapt-contrib-accordion": "*"`
Then running the command:
`adapt install`
(This second method will reinstall all plug-ins listed in *adapt.json*.)
Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file:
`"adapt-contrib-accordion": "*"`
Then running the command:
`adapt install`
(This second method will reinstall all plug-ins listed in *adapt.json*.)

* If **Accordion** has been uninstalled from the Adapt authoring tool, it may be reinstalled using the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager).
* If **Accordion** has been uninstalled from the Adapt authoring tool, it may be reinstalled using the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager).
<div float align=right><a href="#top">Back to Top</a></div>

## Settings Overview
Expand All @@ -35,16 +35,16 @@ The attributes listed below are used in *components.json* to configure **Accordi

**_classes** (string): CSS class name to be applied to **Accordion**’s containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space. A predefined CSS class can be applied to an Accordion Item.

**_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.
**_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.

**instruction** (string): This optional text appears above the component. It is frequently used to
guide the learner’s interaction with the component.
guide the learner’s interaction with the component.

**_items** (array): Multiple items may be created. Each _item_ represents one element of the accordion and contains values for **title**, **body**, and **_graphic**.
**_items** (array): Multiple items may be created. Each _item_ represents one element of the accordion and contains values for **title**, **body**, and **_graphic**.

>**title** (string): This text is displayed as the element's header. It is displayed at all times, even when the **body** has been collapsed.
>**body** (string): This content will be displayed when the learner opens this accordion element. It may contain HTML.
>**body** (string): This content will be displayed when the learner opens this accordion element. It may contain HTML.
>**_graphic** (object): An optional image which is displayed below the item body when the learner opens this accordion element. It contains values for **src** and **alt**.
Expand All @@ -54,21 +54,23 @@ guide the learner’s interaction with the component.
>**_classes** (string): An optional class that will be applied to the Accordion Item.
**_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).
**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).
<div float align=right><a href="#top">Back to Top</a></div>


## Limitations

Body graphics are displayed only when `"layout": "full"`. On a mobile device, a fully spanned **Accordion** will be reduced to single-width. At this smaller size the graphic will not be displayed.
Body graphics are displayed only when `"layout": "full"`. On a mobile device, a fully spanned **Accordion** will be reduced to single-width. At this smaller size the graphic will not be displayed.


----------------------------

**Version number:** 2.0.4 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
**Framework versions:** 2.0
**Author / maintainer:** Adapt Core Team
**Accessibility support:** WAI AA
**RTL support:** yes
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge 12, IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 8+9), Safari for iPad (iOS 8+9), Safari 8, Opera
**Version number:** 2.0.5 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
**Framework versions:** 2.0
**Author / maintainer:** Adapt Core Team
**Accessibility support:** WAI AA
**RTL support:** yes
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge 12, IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 8+9), Safari for iPad (iOS 8+9), Safari 8, Opera
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "adapt-contrib-accordion",
"version": "2.0.4",
"version": "2.0.5",
"framework": "^2.0.0",
"homepage": "https://github.com/adaptlearning/adapt-contrib-accordion",
"issues": "https://github.com/adaptlearning/adapt_framework/issues/new?title=contrib-accordion%3A%20please%20enter%20a%20brief%20summary%20of%20the%20issue%20here&body=please%20provide%20a%20full%20description%20of%20the%20problem,%20including%20steps%20on%20how%20to%20replicate,%20what%20browser(s)/device(s)%20the%20problem%20occurs%20on%20and,%20where%20helpful,%20screenshots.",
Expand Down
78 changes: 56 additions & 22 deletions js/adapt-contrib-accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -34,33 +36,65 @@ define(function(require) {

toggleItem: function(event) {
event.preventDefault();
this.$('.accordion-item-body').stop(true, true).slideUp(200);

if (!$(event.currentTarget).hasClass('selected')) {
this.$('.accordion-item-title').removeClass('selected');
var body = $(event.currentTarget).addClass('selected visited').siblings('.accordion-item-body').slideToggle(200, function() {
$(body).a11y_focus();
});
this.$('.accordion-item-title-icon').removeClass('icon-minus').addClass('icon-plus');
$('.accordion-item-title-icon', event.currentTarget).removeClass('icon-plus').addClass('icon-minus');
var $toggleButton = $(event.currentTarget);
var $accordionItem = $toggleButton.parent('.accordion-item');
var isCurrentlyExpanded = $toggleButton.hasClass('selected');

if ($(event.currentTarget).hasClass('accordion-item')) {
this.setVisited($(event.currentTarget).index());
} else {
this.setVisited($(event.currentTarget).parent('.accordion-item').index());
}
if (this.model.get('_shouldCollapseItems') === false) {
// Close and reset the selected Accordion item only
this.closeItem($accordionItem);
} else {
this.$('.accordion-item-title').removeClass('selected');
$(event.currentTarget).removeClass('selected');
$('.accordion-item-title-icon', event.currentTarget).removeClass('icon-minus').addClass('icon-plus');
// Close and reset all Accordion items
var allAccordionItems = this.$('.accordion-item');
var count = allAccordionItems.length;
for (var i = 0; i < count; i++) {
this.closeItem($(allAccordionItems[i]));
}
}
// set aria-expanded value
if ($(event.currentTarget).hasClass('selected')) {
$('.accordion-item-title').attr('aria-expanded', false);
$(event.currentTarget).attr('aria-expanded', true);
} else {
$(event.currentTarget).attr('aria-expanded', false);

if (!isCurrentlyExpanded) {
this.openItem($accordionItem);
}
},

closeItem: function($itemEl) {
if (!$itemEl) {
return false;
}

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) {
if (!$itemEl) {
return false;
}

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();
});

$button.addClass('selected');
$button.attr('aria-expanded', true);

this.setVisited($itemEl.index());
$button.addClass('visited');

$icon.removeClass('icon-plus');
$icon.addClass('icon-minus');
},

setVisited: function(index) {
Expand Down
14 changes: 13 additions & 1 deletion properties.schema
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,18 @@
}
}
}
}
},
"_shouldCollapseItems": {
"type": "boolean",
"required": false,
"default": true,
"title": "Items should auto-collapse",
"inputType": {
"type": "Boolean",
"options": [true, false]
},
"validators": [],
"help": "If set to 'false', upon expansion of an accordion item, any previously expanded items will not be collapsed"
}
}
}

0 comments on commit 893b592

Please sign in to comment.