From 87f2f34326c5a6e2835e696e2c00077929f9cddd Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Wed, 6 Jul 2016 13:55:38 +0100 Subject: [PATCH 1/7] Added new '_persistExpansion' property to schema. Implemented logic to react to this new property, and ensuring that if persistence is enabled, that on click of an accordion item, other items do not close. Some JSCS code formatting and tidy-up. Version bump. --- bower.json | 2 +- js/adapt-contrib-accordion.js | 195 +++++++++++++++++++--------------- properties.schema | 9 ++ 3 files changed, 119 insertions(+), 87 deletions(-) diff --git a/bower.json b/bower.json index 6ac6dfb..9ba4406 100644 --- a/bower.json +++ b/bower.json @@ -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.", diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index d69be2f..1c589d9 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -1,90 +1,113 @@ define(function(require) { - var ComponentView = require('coreViews/componentView'); - var Adapt = require('coreJS/adapt'); - - var Accordion = ComponentView.extend({ - - events: { - 'click .accordion-item-title': 'toggleItem' - }, - - preRender: function() { - // Checks to see if the accordion should be reset on revisit - this.checkIfResetOnRevisit(); - }, - - postRender: function() { - this.setReadyStatus(); - }, - - // Used to check if the accordion should reset on revisit - checkIfResetOnRevisit: function() { - var isResetOnRevisit = this.model.get('_isResetOnRevisit'); - - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); - - _.each(this.model.get('_items'), function(item) { - item._isVisited = false; - }); - } - }, - - 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'); - - if ($(event.currentTarget).hasClass('accordion-item')) { - this.setVisited($(event.currentTarget).index()); - } else { - this.setVisited($(event.currentTarget).parent('.accordion-item').index()); - } - } else { - this.$('.accordion-item-title').removeClass('selected'); - $(event.currentTarget).removeClass('selected'); - $('.accordion-item-title-icon', event.currentTarget).removeClass('icon-minus').addClass('icon-plus'); - } - // 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); - } - }, - - setVisited: function(index) { - var item = this.model.get('_items')[index]; - item._isVisited = true; - this.checkCompletionStatus(); - }, - - getVisitedItems: function() { - return _.filter(this.model.get('_items'), function(item) { - return item._isVisited; - }); - }, - - checkCompletionStatus: function() { - if (this.getVisitedItems().length == this.model.get('_items').length) { - this.setCompletionStatus(); - } - } - - }); - - Adapt.register('accordion', Accordion); - - return Accordion; + var ComponentView = require('coreViews/componentView'); + var Adapt = require('coreJS/adapt'); + + var Accordion = ComponentView.extend({ + + toggleSpeed: 200, + + events: { + 'click .accordion-item-title': 'toggleItem' + }, + + preRender: function() { + // Checks to see if the accordion should be reset on revisit + this.checkIfResetOnRevisit(); + }, + + postRender: function() { + this.setReadyStatus(); + }, + + // Used to check if the accordion should reset on revisit + checkIfResetOnRevisit: function() { + var isResetOnRevisit = this.model.get('_isResetOnRevisit'); + + // If reset is enabled set defaults + if (isResetOnRevisit) { + this.model.reset(isResetOnRevisit); + + _.each(this.model.get('_items'), function(item) { + item._isVisited = false; + }); + } + }, + + toggleItem: function(event) { + event.preventDefault(); + + var toggleButton = $(event.currentTarget); + var accordionItem = toggleButton.parent('.accordion-item'); + var isCurrentlyExpanded = toggleButton.hasClass('selected'); + + if (!this.model.get('_persistExpansion')) { + // Close and reset all Accordion items + this.$('.accordion-item').each(_.bind(function(index, element) { + this.closeItem($(element)); + }, this)); + } else { + // Close and reset the selected Accordion items + this.closeItem(accordionItem); + } + + if (!isCurrentlyExpanded) { + this.openItem(accordionItem); + } + }, + + closeItem: function(itemEl) { + if (!itemEl) { + 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().removeClass('icon-plus'); + $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-minus'); + }, + + openItem: function(itemEl) { + if (!itemEl) { + return false; + } + + var body = $(itemEl).find('.accordion-item-body').first().stop(true, true).slideDown(this.toggleSpeed, function() { + body.a11y_focus(); + }); + + $(itemEl).find('button').first().addClass('selected'); + $(itemEl).find('button').first().attr('aria-expanded', true); + $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); + $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); + + this.setVisited(itemEl.index()); + $(itemEl).find('button').first().addClass('visited'); + }, + + setVisited: function(index) { + var item = this.model.get('_items')[index]; + item._isVisited = true; + this.checkCompletionStatus(); + }, + + getVisitedItems: function() { + return _.filter(this.model.get('_items'), function(item) { + return item._isVisited; + }); + }, + + checkCompletionStatus: function() { + if (this.getVisitedItems().length == this.model.get('_items').length) { + this.setCompletionStatus(); + } + } + + }); + + Adapt.register('accordion', Accordion); + + return Accordion; }); diff --git a/properties.schema b/properties.schema index 6d8c053..8cfcfc1 100644 --- a/properties.schema +++ b/properties.schema @@ -93,6 +93,15 @@ } } } + }, + "_persistExpansion": { + "type":"boolean", + "required": false, + "default": false, + "title": "Persist expansion of items", + "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" } } } From 6f86c0ed0b8963a21fdfa841ad93e60576ba401c Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Wed, 6 Jul 2016 14:32:00 +0100 Subject: [PATCH 2/7] Reverted code formatting to 4 space indents --- README.md | 42 +++---- js/adapt-contrib-accordion.js | 200 +++++++++++++++++----------------- 2 files changed, 120 insertions(+), 122 deletions(-) diff --git a/README.md b/README.md index 908995e..1e4d7b1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# adapt-contrib-accordion +# adapt-contrib-accordion -accordion in action **Accordion** is a *presentation component* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework). +accordion in action **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. @@ -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).
Back to Top
## Settings Overview @@ -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**. @@ -55,20 +55,20 @@ guide the learner’s interaction with the component. >**_classes** (string): An optional class that will be applied to the Accordion Item. ### 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).
Back to Top
## 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 adapt learning logo -**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 adapt learning logo +**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 diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index 1c589d9..538c84d 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -1,113 +1,111 @@ define(function(require) { - var ComponentView = require('coreViews/componentView'); - var Adapt = require('coreJS/adapt'); + var ComponentView = require('coreViews/componentView'); + var Adapt = require('coreJS/adapt'); + + var Accordion = ComponentView.extend({ + + events: { + 'click .accordion-item-title': 'toggleItem' + }, + + preRender: function() { + // Checks to see if the accordion should be reset on revisit + this.checkIfResetOnRevisit(); + }, + + postRender: function() { + this.setReadyStatus(); + }, + + // Used to check if the accordion should reset on revisit + checkIfResetOnRevisit: function() { + var isResetOnRevisit = this.model.get('_isResetOnRevisit'); + + // If reset is enabled set defaults + if (isResetOnRevisit) { + this.model.reset(isResetOnRevisit); + + _.each(this.model.get('_items'), function(item) { + item._isVisited = false; + }); + } + }, + + toggleItem: function(event) { + event.preventDefault(); + + var toggleButton = $(event.currentTarget); + var accordionItem = toggleButton.parent('.accordion-item'); + var isCurrentlyExpanded = toggleButton.hasClass('selected'); + + if (!this.model.get('_persistExpansion')) { + // Close and reset all Accordion items + this.$('.accordion-item').each(_.bind(function(index, element) { + this.closeItem($(element)); + }, this)); + } else { + // Close and reset the selected Accordion items + this.closeItem(accordionItem); + } + + if (!isCurrentlyExpanded) { + this.openItem(accordionItem); + } + }, + + closeItem: function(itemEl) { + if (!itemEl) { + 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().removeClass('icon-plus'); + $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-minus'); + }, + + openItem: function(itemEl) { + if (!itemEl) { + return false; + } + + var body = $(itemEl).find('.accordion-item-body').first().stop(true, true).slideDown(this.toggleSpeed, function() { + body.a11y_focus(); + }); - var Accordion = ComponentView.extend({ + $(itemEl).find('button').first().addClass('selected'); + $(itemEl).find('button').first().attr('aria-expanded', true); + $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); + $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); - toggleSpeed: 200, + this.setVisited(itemEl.index()); + $(itemEl).find('button').first().addClass('visited'); + }, - events: { - 'click .accordion-item-title': 'toggleItem' - }, + setVisited: function(index) { + var item = this.model.get('_items')[index]; + item._isVisited = true; + this.checkCompletionStatus(); + }, - preRender: function() { - // Checks to see if the accordion should be reset on revisit - this.checkIfResetOnRevisit(); - }, + getVisitedItems: function() { + return _.filter(this.model.get('_items'), function(item) { + return item._isVisited; + }); + }, - postRender: function() { - this.setReadyStatus(); - }, + checkCompletionStatus: function() { + if (this.getVisitedItems().length == this.model.get('_items').length) { + this.setCompletionStatus(); + } + } - // Used to check if the accordion should reset on revisit - checkIfResetOnRevisit: function() { - var isResetOnRevisit = this.model.get('_isResetOnRevisit'); + }); - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); + Adapt.register('accordion', Accordion); - _.each(this.model.get('_items'), function(item) { - item._isVisited = false; - }); - } - }, - - toggleItem: function(event) { - event.preventDefault(); - - var toggleButton = $(event.currentTarget); - var accordionItem = toggleButton.parent('.accordion-item'); - var isCurrentlyExpanded = toggleButton.hasClass('selected'); - - if (!this.model.get('_persistExpansion')) { - // Close and reset all Accordion items - this.$('.accordion-item').each(_.bind(function(index, element) { - this.closeItem($(element)); - }, this)); - } else { - // Close and reset the selected Accordion items - this.closeItem(accordionItem); - } - - if (!isCurrentlyExpanded) { - this.openItem(accordionItem); - } - }, - - closeItem: function(itemEl) { - if (!itemEl) { - 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().removeClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-minus'); - }, - - openItem: function(itemEl) { - if (!itemEl) { - return false; - } - - var body = $(itemEl).find('.accordion-item-body').first().stop(true, true).slideDown(this.toggleSpeed, function() { - body.a11y_focus(); - }); - - $(itemEl).find('button').first().addClass('selected'); - $(itemEl).find('button').first().attr('aria-expanded', true); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); - - this.setVisited(itemEl.index()); - $(itemEl).find('button').first().addClass('visited'); - }, - - setVisited: function(index) { - var item = this.model.get('_items')[index]; - item._isVisited = true; - this.checkCompletionStatus(); - }, - - getVisitedItems: function() { - return _.filter(this.model.get('_items'), function(item) { - return item._isVisited; - }); - }, - - checkCompletionStatus: function() { - if (this.getVisitedItems().length == this.model.get('_items').length) { - this.setCompletionStatus(); - } - } - - }); - - Adapt.register('accordion', Accordion); - - return Accordion; + return Accordion; }); From 9162c9b9798724810c35762924d4cefa7bffa39a Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Wed, 6 Jul 2016 14:54:00 +0100 Subject: [PATCH 3/7] Fixing code formatting (again) --- js/adapt-contrib-accordion.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index 538c84d..e55be54 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -52,9 +52,9 @@ define(function(require) { if (!isCurrentlyExpanded) { this.openItem(accordionItem); } - }, + }, - closeItem: function(itemEl) { + closeItem: function(itemEl) { if (!itemEl) { return false; } @@ -64,25 +64,25 @@ define(function(require) { $(itemEl).find('button').first().attr('aria-expanded', false); $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-plus'); $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-minus'); - }, + }, - openItem: function(itemEl) { - if (!itemEl) { - return false; - } + openItem: function(itemEl) { + if (!itemEl) { + return false; + } - var body = $(itemEl).find('.accordion-item-body').first().stop(true, true).slideDown(this.toggleSpeed, function() { - body.a11y_focus(); - }); + var body = $(itemEl).find('.accordion-item-body').first().stop(true, true).slideDown(this.toggleSpeed, function() { + body.a11y_focus(); + }); - $(itemEl).find('button').first().addClass('selected'); - $(itemEl).find('button').first().attr('aria-expanded', true); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); + $(itemEl).find('button').first().addClass('selected'); + $(itemEl).find('button').first().attr('aria-expanded', true); + $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); + $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); - this.setVisited(itemEl.index()); - $(itemEl).find('button').first().addClass('visited'); - }, + this.setVisited(itemEl.index()); + $(itemEl).find('button').first().addClass('visited'); + }, setVisited: function(index) { var item = this.model.get('_items')[index]; From 49b1b3a2bc2d661c3f2c0983880b03a19cb3840a Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Wed, 6 Jul 2016 15:00:16 +0100 Subject: [PATCH 4/7] Using a for loop instead of jQuery.each --- js/adapt-contrib-accordion.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index e55be54..b634e2d 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -41,11 +41,12 @@ define(function(require) { if (!this.model.get('_persistExpansion')) { // Close and reset all Accordion items - this.$('.accordion-item').each(_.bind(function(index, element) { - this.closeItem($(element)); - }, this)); + var allAccordionItems = this.$('.accordion-item'); + for (var i = 0; i < allAccordionItems.length; i++) { + this.closeItem($(allAccordionItems[i])); + } } else { - // Close and reset the selected Accordion items + // Close and reset the selected Accordion item this.closeItem(accordionItem); } From 5dee8f9add88b07cdaee3fb7b566a35caba88064 Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Thu, 7 Jul 2016 10:37:35 +0100 Subject: [PATCH 5/7] Plus/minus icons were being shown/hidden in the wrong (opposite) function. Gave the new property a more appropriate name. Updated the readme file with information on this new property --- README.md | 2 ++ js/adapt-contrib-accordion.js | 13 +++++++------ properties.schema | 21 ++++++++++++--------- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 1e4d7b1..98bf8b6 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,8 @@ 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' + ### 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 b634e2d..a1a4523 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -39,10 +39,11 @@ define(function(require) { var accordionItem = toggleButton.parent('.accordion-item'); var isCurrentlyExpanded = toggleButton.hasClass('selected'); - if (!this.model.get('_persistExpansion')) { + if (!this.model.get('_preventItemAutoCollapse')) { // Close and reset all Accordion items var allAccordionItems = this.$('.accordion-item'); - for (var i = 0; i < allAccordionItems.length; i++) { + var count = allAccordionItems.length; + for (var i = 0; i < count; i++) { this.closeItem($(allAccordionItems[i])); } } else { @@ -63,8 +64,8 @@ define(function(require) { $(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().removeClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-minus'); + $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); + $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); }, openItem: function(itemEl) { @@ -78,11 +79,11 @@ define(function(require) { $(itemEl).find('button').first().addClass('selected'); $(itemEl).find('button').first().attr('aria-expanded', true); - $(itemEl).find('.accordion-item-title-icon').first().addClass('icon-plus'); - $(itemEl).find('.accordion-item-title-icon').first().removeClass('icon-minus'); 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'); }, setVisited: function(index) { diff --git a/properties.schema b/properties.schema index 8cfcfc1..c9e820c 100644 --- a/properties.schema +++ b/properties.schema @@ -94,14 +94,17 @@ } } }, - "_persistExpansion": { - "type":"boolean", - "required": false, - "default": false, - "title": "Persist expansion of items", - "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" - } + "_preventItemAutoCollapse": { + "type": "boolean", + "required": false, + "default": false, + "title": "Prevent item 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" + } } } From 687ff02f2734c791beae0491b4c0128431cbc802 Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Tue, 12 Jul 2016 11:22:20 +0100 Subject: [PATCH 6/7] 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" } } } From a903206a38d3953b3e546bea361dd2f227909110 Mon Sep 17 00:00:00 2001 From: Barry McKay Date: Wed, 13 Jul 2016 15:00:13 +0100 Subject: [PATCH 7/7] Renamed any jQuery object variables so they're prefixed with a '$'. Tweaked the logic around checking the '_shouldCollapseItems' property to correctly handle the case where the property is undefined --- js/adapt-contrib-accordion.js | 62 +++++++++++++++++------------------ 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index ec0975b..487bbca 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -37,64 +37,64 @@ define(function(require) { toggleItem: function(event) { event.preventDefault(); - var toggleButton = $(event.currentTarget); - var accordionItem = toggleButton.parent('.accordion-item'); - var isCurrentlyExpanded = toggleButton.hasClass('selected'); + var $toggleButton = $(event.currentTarget); + var $accordionItem = $toggleButton.parent('.accordion-item'); + var isCurrentlyExpanded = $toggleButton.hasClass('selected'); - if (this.model.get('_shouldCollapseItems')) { + if (this.model.get('_shouldCollapseItems') === false) { + // Close and reset the selected Accordion item only + this.closeItem($accordionItem); + } else { // 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])); } - } else { - // Close and reset the selected Accordion item - this.closeItem(accordionItem); } if (!isCurrentlyExpanded) { - this.openItem(accordionItem); + this.openItem($accordionItem); } }, - closeItem: function(itemEl) { - if (!itemEl) { + 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(); + 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'); + $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) { + 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(); + 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(); + $body = $body.stop(true, true).slideDown(this.toggleSpeed, function() { + $body.a11y_focus(); }); - button.first().addClass('selected'); - button.first().attr('aria-expanded', true); + $button.addClass('selected'); + $button.attr('aria-expanded', true); - this.setVisited(itemEl.index()); - button.addClass('visited'); + this.setVisited($itemEl.index()); + $button.addClass('visited'); - icon.removeClass('icon-plus'); - icon.first().addClass('icon-minus'); + $icon.removeClass('icon-plus'); + $icon.addClass('icon-minus'); }, setVisited: function(index) {