From d6695f691ede55ff7ef602da400c75c59f17d3de Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Mon, 6 Jul 2020 00:01:04 +0100 Subject: [PATCH 01/21] issue/2824-jsx React version of accordion --- js/accordionView.js | 132 ++++++++++++++-------------------- js/adapt-contrib-accordion.js | 16 ++--- templates/accordion.hbs | 59 --------------- templates/accordion.jsx | 60 ++++++++++++++++ 4 files changed, 119 insertions(+), 148 deletions(-) delete mode 100644 templates/accordion.hbs create mode 100644 templates/accordion.jsx diff --git a/js/accordionView.js b/js/accordionView.js index b617efd..39c3636 100644 --- a/js/accordionView.js +++ b/js/accordionView.js @@ -1,84 +1,58 @@ -define([ - 'core/js/views/componentView' -], function(ComponentView) { - - var AccordionView = ComponentView.extend({ - - events: { - 'click .js-toggle-item': 'onClick' - }, - - preRender: function() { - this.checkIfResetOnRevisit(); - - this.model.resetActiveItems(); - - this.listenTo(this.model.get('_children'), { - 'change:_isActive': this.onItemsActiveChange, - 'change:_isVisited': this.onItemsVisitedChange - }); - }, - - postRender: function() { - this.setReadyStatus(); - - if (this.model.get('_setCompletionOn') === 'inview') { - this.setupInviewCompletion(); - } - }, - - checkIfResetOnRevisit: function() { - var isResetOnRevisit = this.model.get('_isResetOnRevisit'); - - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); - } - }, - - onClick: function(event) { - event.preventDefault(); - - this.model.toggleItemsState($(event.currentTarget).parent().data('index')); - }, - - onItemsActiveChange: function(item, isActive) { - this.toggleItem(item, isActive); - }, - - onItemsVisitedChange: function(item, isVisited) { - if (!isVisited) return; - - var $item = this.getItemElement(item); - - $item.children('.accordion__item-btn').addClass('is-visited'); - }, - - toggleItem: function(item, shouldExpand) { - var $item = this.getItemElement(item); - var $body = $item.children('.accordion__item-content').stop(true, true); - - $item.children('.accordion__item-btn') - .toggleClass('is-selected is-open', shouldExpand) - .toggleClass('is-closed', !shouldExpand) - .attr('aria-expanded', shouldExpand); - - if (!shouldExpand) { - $body.slideUp(this.model.get('_toggleSpeed')); - return; - } - - $body.slideDown(this.model.get('_toggleSpeed')); - }, - - getItemElement: function(item) { - var index = item.get('_index'); +import ComponentView from 'core/js/views/componentView'; + +class AccordionView extends ComponentView { + + preRender() { + this.checkIfResetOnRevisit(); + this.model.resetActiveItems(); + this.listenTo(this.model.get('_children'), { + 'change:_isActive': this.onItemsActiveChange, + 'change:_isVisited': this.onItemsVisitedChange, + 'all': this.changed + }); + } + + postRender() { + this.setReadyStatus(); + if (this.model.get('_setCompletionOn') === 'inview') { + this.setupInviewCompletion(); + } + } - return this.$('.accordion__item').filter('[data-index="' + index +'"]'); + checkIfResetOnRevisit() { + var isResetOnRevisit = this.model.get('_isResetOnRevisit'); + // If reset is enabled set defaults + if (isResetOnRevisit) { + this.model.reset(isResetOnRevisit); } + } + + onClick(event) { + event.preventDefault(); + this.model.toggleItemsState($(event.currentTarget).parent().data('index')); + } + + onItemsActiveChange(item, isActive) { + this.toggleItem(item, isActive); + } + + toggleItem(item, shouldExpand) { + var $item = this.getItemElement(item); + var $body = $item.children('.accordion__item-content').stop(true, true); + if (!shouldExpand) { + $body.slideUp(this.model.get('_toggleSpeed')); + return; + } + $body.slideDown(this.model.get('_toggleSpeed')); + } + + getItemElement(item) { + var index = item.get('_index'); + return this.$('.accordion__item').filter('[data-index="' + index +'"]'); + } - }); +} - return AccordionView; +AccordionView.template = 'accordion.jsx'; -}); +export default AccordionView; diff --git a/js/adapt-contrib-accordion.js b/js/adapt-contrib-accordion.js index 9ba82d4..4680ade 100644 --- a/js/adapt-contrib-accordion.js +++ b/js/adapt-contrib-accordion.js @@ -1,12 +1,8 @@ -define([ - 'core/js/adapt', - './accordionModel', - './accordionView' -], function(Adapt, AccordionModel, AccordionView) { - - return Adapt.register('accordion', { - model: AccordionModel, - view: AccordionView - }); +import Adapt from 'core/js/adapt'; +import AccordionModel from './accordionModel'; +import AccordionView from './accordionView'; +export default Adapt.register('accordion', { + model: AccordionModel, + view: AccordionView }); diff --git a/templates/accordion.hbs b/templates/accordion.hbs deleted file mode 100644 index fb651c4..0000000 --- a/templates/accordion.hbs +++ /dev/null @@ -1,59 +0,0 @@ -
- - {{> component this}} - -
- - {{#each _items}} -
- - - -
-
- - {{#if body}} -
-
- {{{compile body}}} -
-
- {{/if}} - - {{#if _graphic.src}} -
- - - {{#if _graphic.attribution}} -
-
- {{{_graphic.attribution}}} -
-
- {{/if}} - -
- {{/if}} - -
-
- -
- {{/each}} - -
-
diff --git a/templates/accordion.jsx b/templates/accordion.jsx new file mode 100644 index 0000000..84e7173 --- /dev/null +++ b/templates/accordion.jsx @@ -0,0 +1,60 @@ +import { compile, classes, templates, html } from 'core/js/reactHelpers'; + +export default function (view, data) { + return
+ {templates.component(view, data)} +
+ {data._items.map(({ _id, _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { + return
+ +
+
+ {body && +
+
+ {html(compile(body))} +
+
+ } + {_graphic.src && +
+ + {_graphic.attribution && +
+
+ {html(_graphic.attribution)} +
+
+ } +
+ } +
+
+
+ })} +
+
+} From a88494f82d2717caffbae30c0dfac4c1b1dfef8c Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 14 Jul 2020 14:26:59 +0100 Subject: [PATCH 02/21] issue/2824-jsx var to const --- js/accordionView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/accordionView.js b/js/accordionView.js index 39c3636..324b619 100644 --- a/js/accordionView.js +++ b/js/accordionView.js @@ -20,7 +20,7 @@ class AccordionView extends ComponentView { } checkIfResetOnRevisit() { - var isResetOnRevisit = this.model.get('_isResetOnRevisit'); + const isResetOnRevisit = this.model.get('_isResetOnRevisit'); // If reset is enabled set defaults if (isResetOnRevisit) { this.model.reset(isResetOnRevisit); @@ -37,8 +37,8 @@ class AccordionView extends ComponentView { } toggleItem(item, shouldExpand) { - var $item = this.getItemElement(item); - var $body = $item.children('.accordion__item-content').stop(true, true); + const $item = this.getItemElement(item); + const $body = $item.children('.accordion__item-content').stop(true, true); if (!shouldExpand) { $body.slideUp(this.model.get('_toggleSpeed')); return; @@ -47,7 +47,7 @@ class AccordionView extends ComponentView { } getItemElement(item) { - var index = item.get('_index'); + const index = item.get('_index'); return this.$('.accordion__item').filter('[data-index="' + index +'"]'); } From 263186579d55a7a7e9b023b8d3cb25e2dad58622 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 15 Jul 2020 11:13:21 +0100 Subject: [PATCH 03/21] issue/2824-jsx Converted model to import/export directives --- js/accordionModel.js | 40 +++++++++++++++++----------------------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/js/accordionModel.js b/js/accordionModel.js index 3c6f6a1..0c65151 100644 --- a/js/accordionModel.js +++ b/js/accordionModel.js @@ -1,30 +1,24 @@ -define([ - 'core/js/models/itemsComponentModel' -], function(ItemsComponentModel) { +import ItemsComponentModel from 'core/js/models/itemsComponentModel'; - var AccordionModel = ItemsComponentModel.extend({ +export default class AccordionModel extends ItemsComponentModel { - defaults: function() { - return _.extend({}, _.result(ItemsComponentModel.prototype, 'defaults'), { - _shouldCollapseItems: true, - _toggleSpeed: 200 - }); - }, + defaults() { + return ItemsComponentModel.resultExtend('defaults', { + _shouldCollapseItems: true, + _toggleSpeed: 200 + }); + } - toggleItemsState: function(index) { - var item = this.getItem(index); - var previousActiveItem = this.getActiveItem(); + toggleItemsState(index) { + const item = this.getItem(index); + const previousActiveItem = this.getActiveItem(); - item.toggleActive(); - item.toggleVisited(true); + item.toggleActive(); + item.toggleVisited(true); - if (previousActiveItem && this.get('_shouldCollapseItems')) { - previousActiveItem.toggleActive(false); - } + if (previousActiveItem && this.get('_shouldCollapseItems')) { + previousActiveItem.toggleActive(false); } + } - }); - - return AccordionModel; - -}); +} From 2efb976c3995ea6b91db0433e1c41212f32ff779 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Thu, 16 Jul 2020 21:52:12 +0100 Subject: [PATCH 04/21] issue/2824-jsx switch to template string Co-authored-by: Matt Leathes --- js/accordionView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/accordionView.js b/js/accordionView.js index 324b619..9e93cf3 100644 --- a/js/accordionView.js +++ b/js/accordionView.js @@ -48,7 +48,7 @@ class AccordionView extends ComponentView { getItemElement(item) { const index = item.get('_index'); - return this.$('.accordion__item').filter('[data-index="' + index +'"]'); + return this.$('.accordion__item').filter(`[data-index="${index}"]`); } } From 8a4848a60534d37b9100e2dcfa6f6884da6eda36 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Thu, 16 Jul 2020 21:52:55 +0100 Subject: [PATCH 05/21] issue/2824-jsx removed preventDefault --- js/accordionView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/accordionView.js b/js/accordionView.js index 9e93cf3..372443a 100644 --- a/js/accordionView.js +++ b/js/accordionView.js @@ -28,7 +28,6 @@ class AccordionView extends ComponentView { } onClick(event) { - event.preventDefault(); this.model.toggleItemsState($(event.currentTarget).parent().data('index')); } From 17e2da0a7f23038040758a5608df8600ef72ee71 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Fri, 31 Jul 2020 13:47:40 +0100 Subject: [PATCH 06/21] issue/2824-jsx classes > array syntax, fixed typo in _id reference --- templates/accordion.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index 84e7173..a6db890 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -5,17 +5,17 @@ export default function (view, data) { {templates.component(view, data)}
{data._items.map(({ _id, _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { - return
- -
+
{body &&
@@ -37,10 +37,10 @@ export default function (view, data) {
} {_graphic.src && -
+ ])}> {_graphic.attribution &&
From 36a871d3fc089ea836dd04fb00c35aa8c7b411cd Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Fri, 31 Jul 2020 13:50:09 +0100 Subject: [PATCH 07/21] issue/2824-jsx Removed unused variable --- templates/accordion.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index a6db890..64c9462 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -4,7 +4,7 @@ export default function (view, data) { return
{templates.component(view, data)}
- {data._items.map(({ _id, _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { + {data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { return
Date: Fri, 14 Aug 2020 16:41:17 +0100 Subject: [PATCH 08/21] issue/2824-jsx Switched to altered syntax --- templates/accordion.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index 64c9462..ac5003c 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -1,8 +1,11 @@ +import Adapt from 'core/js/adapt'; import { compile, classes, templates, html } from 'core/js/reactHelpers'; -export default function (view, data) { +export default function (model, view) { + const data = model.toJSON(); + data._globals = Adapt.course.get('_globals'); return
- {templates.component(view, data)} + {templates.component(model, view)}
{data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { return
Date: Mon, 17 Aug 2020 13:18:09 +0100 Subject: [PATCH 09/21] issue/2824-jsx Fixed indentation to eslint rules --- templates/accordion.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index ac5003c..f5bc2cd 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -9,10 +9,10 @@ export default function (model, view) {
{data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { return
+ 'accordion__item', + _graphic.src && 'has-image', + _classes && _classes + ])} data-index={_index}>
-
+
; })}
-
+
; } From 2ef524ff1e92caf63cc40877f527685524a23dbe Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 18 Aug 2020 16:24:21 +0100 Subject: [PATCH 10/21] issue/2824-jsx Added whitespace and changed block styling --- templates/accordion.jsx | 113 ++++++++++++++++++++++++---------------- 1 file changed, 67 insertions(+), 46 deletions(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index f5bc2cd..c715743 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -4,60 +4,81 @@ import { compile, classes, templates, html } from 'core/js/reactHelpers'; export default function (model, view) { const data = model.toJSON(); data._globals = Adapt.course.get('_globals'); - return
- {templates.component(model, view)} -
- {data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => { - return
-
- -
-
- {body && -
-
- {html(compile(body))} + +
+
+ {html(title)} +
+
- } - {_graphic.src && -
- - {_graphic.attribution && -
-
- {html(_graphic.attribution)} + + + +
+
+ + {body && +
+
+ {html(compile(body))}
} + + {_graphic.src && +
+ + + + {_graphic.attribution && +
+
+ {html(_graphic.attribution)} +
+
+ } + +
+ } +
- }
+
-
; - })} + )} + +
+
-
; + ); } From 56d7fcb01758907038e93e4b6748cd15ec0cc221 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 18 Aug 2020 16:40:45 +0100 Subject: [PATCH 11/21] issue/2824-jsx Added more whitespace --- templates/accordion.jsx | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index c715743..3f75aef 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -12,18 +12,24 @@ export default function (model, view) {
{data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => +
- -
+
+
{body && @@ -58,7 +69,12 @@ export default function (model, view) { _graphic.attribution && 'has-attribution' ])}> - + {_graphic.attribution &&
From 40d1a1e70900ab16601d4590dcdf3a6f251464d9 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 18 Aug 2020 16:42:52 +0100 Subject: [PATCH 12/21] issue/2824-jsx Added more whitespace --- templates/accordion.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index 3f75aef..0ddc182 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -13,11 +13,15 @@ export default function (model, view) { {data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => -
+
From be95d9b897192e19dbda4e4505eef122f1525000 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Mon, 10 May 2021 11:52:33 +0100 Subject: [PATCH 20/21] issue/3105 Added missing onClick bind --- js/accordionView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/accordionView.js b/js/accordionView.js index af5bb44..4b9027a 100644 --- a/js/accordionView.js +++ b/js/accordionView.js @@ -3,6 +3,7 @@ import ComponentView from 'core/js/views/componentView'; class AccordionView extends ComponentView { preRender() { + this.onClick = this.onClick.bind(this); this.listenTo(this.model.getChildren(), 'change:_isActive', this.onItemsActiveChange); } From 5fa44f900a972d5936119076ade9492e1b416739 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Mon, 10 May 2021 13:34:40 +0100 Subject: [PATCH 21/21] issue/3105 Switched to image template --- templates/accordion.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/accordion.jsx b/templates/accordion.jsx index ee88404..bda292b 100644 --- a/templates/accordion.jsx +++ b/templates/accordion.jsx @@ -69,7 +69,7 @@ export default function Accordion (props) {
} -