issue/2824-jsx JSX version of accordion

js/accordionModel.js

@@ -1,30 +1,23 @@
-define([
-  'core/js/models/itemsComponentModel'
-], function(ItemsComponentModel) {
+import ItemsComponentModel from 'core/js/models/itemsComponentModel';
 
-  class AccordionModel extends ItemsComponentModel {
+export default class AccordionModel extends ItemsComponentModel {
 
-    defaults() {
-      return ItemsComponentModel.resultExtend('defaults', {
-        _shouldCollapseItems: true,
-        _toggleSpeed: 200
-      }, this);
-    }
-
-    toggleItemsState(index) {
-      const item = this.getItem(index);
-      const previousActiveItem = this.getActiveItem();
+  defaults() {
+    return ItemsComponentModel.resultExtend('defaults', {
+      _shouldCollapseItems: true,
+      _toggleSpeed: 200
+    });
+  }
 
-      item.toggleActive();
-      item.toggleVisited(true);
+  toggleItemsState(index) {
+    const item = this.getItem(index);
+    const previousActiveItem = this.getActiveItem();
 
-      if (previousActiveItem && this.get('_shouldCollapseItems')) {
-        previousActiveItem.toggleActive(false);
-      }
-    }
+    item.toggleActive();
+    item.toggleVisited(true);
 
+    if (!previousActiveItem || !this.get('_shouldCollapseItems')) return;
+    previousActiveItem.toggleActive(false);
   }
 
-  return AccordionModel;
-
-});
+}

js/accordionView.js

@@ -1,86 +1,55 @@
-define([
-  'core/js/views/componentView'
-], function(ComponentView) {
-
-  class AccordionView extends ComponentView {
-
-    events() {
-      return {
-        'click .js-toggle-item': 'onClick'
-      };
-    }
-
-    preRender() {
-      this.checkIfResetOnRevisit();
-
-      this.model.resetActiveItems();
-
-      this.listenTo(this.model.get('_children'), {
-        'change:_isActive': this.onItemsActiveChange,
-        'change:_isVisited': this.onItemsVisitedChange
-      });
-    }
-
-    postRender() {
-      this.setReadyStatus();
-
-      if (this.model.get('_setCompletionOn') === 'inview') {
-        this.setupInviewCompletion();
-      }
-    }
-
-    checkIfResetOnRevisit() {
-      const isResetOnRevisit = this.model.get('_isResetOnRevisit');
-
-      // If reset is enabled set defaults
-      if (isResetOnRevisit) {
-        this.model.reset(isResetOnRevisit);
-      }
-    }
-
-    onClick(event) {
-      this.model.toggleItemsState($(event.currentTarget).parent().data('index'));
-    }
-
-    onItemsActiveChange(item, isActive) {
-      this.toggleItem(item, isActive);
-    }
-
-    onItemsVisitedChange(item, isVisited) {
-      if (!isVisited) return;
-
-      const $item = this.getItemElement(item);
-
-      $item.children('.accordion__item-btn').addClass('is-visited');
-    }
-
-    toggleItem(item, shouldExpand) {
-      const $item = this.getItemElement(item);
-      const $body = $item.children('.accordion__item-content').stop(true, true);
+import ComponentView from 'core/js/views/componentView';
+
+class AccordionView extends ComponentView {
+
+  preRender() {
+    this.checkIfResetOnRevisit();
+    this.model.resetActiveItems();
+    this.listenTo(this.model.getChildren(), {
+      'change:_isActive': this.onItemsActiveChange,
+      'change:_isVisited': this.onItemsVisitedChange,
+      'all': this.changed
+    });
+  }
 
-      $item.children('.accordion__item-btn')
-        .toggleClass('is-selected is-open', shouldExpand)
-        .toggleClass('is-closed', !shouldExpand)
-        .attr('aria-expanded', shouldExpand);
+  postRender() {
+    this.setReadyStatus();
+    if (this.model.get('_setCompletionOn') !== 'inview') return;
+    this.setupInviewCompletion();
+  }
 
-      if (!shouldExpand) {
-        $body.slideUp(this.model.get('_toggleSpeed'));
-        return;
-      }
+  checkIfResetOnRevisit() {
+    const isResetOnRevisit = this.model.get('_isResetOnRevisit');
+    // If reset is enabled set defaults
+    if (!isResetOnRevisit) return;
+    this.model.reset(isResetOnRevisit);
+  }
 
-      $body.slideDown(this.model.get('_toggleSpeed'));
-    }
+  onClick(event) {
+    this.model.toggleItemsState($(event.currentTarget).parent().data('index'));
+  }
 
-    getItemElement(item) {
-      const index = item.get('_index');
+  onItemsActiveChange(item, isActive) {
+    this.toggleItem(item, isActive);
+  }
 
-      return this.$('.accordion__item').filter(`[data-index="${index}"]`);
+  toggleItem(item, shouldExpand) {
+    const $item = this.getItemElement(item);
+    const $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) {
+    const index = item.get('_index');
+    return this.$('.accordion__item').filter(`[data-index="${index}"]`);
   }
 
-  AccordionView.template = 'accordion';
+}
 
-  return AccordionView;
+AccordionView.template = 'accordion.jsx';
 
-});
+export default AccordionView;

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

templates/accordion.jsx

@@ -0,0 +1,104 @@
+import Adapt from 'core/js/adapt';
+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 (
+    <div className="component__inner accordion__inner">
+
+      {templates.component(model, view)}
+
+      <div className="component__widget accordion__widget">
+
+        {data._items.map(({ _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) =>
+
+          <div
+            className={classes([
+              'accordion__item',
+              _graphic.src && 'has-image',
+              _classes && _classes
+            ])}
+            key={_index}
+            data-index={_index}
+          >
+
+            <button
+              id={`${data._id}-${index}-accordion-button`}
+              className={classes([
+                'accordion__item-btn',
+                'js-toggle-item',
+                _isVisited && 'is-visited',
+                _isActive ? 'is-open is-selected' : 'is-closed'
+              ])}
+              onClick={view.onClick.bind(view)}
+              aria-expanded={_isActive ? 'true' : 'false'}
+            >
+
+              <div className="accordion__item-btn-inner">
+
+                <div className="accordion__item-icon">
+                  <div className="icon"></div>
+                </div>
+
+                <div className="accordion__item-title">
+                  <div className="accordion__item-title-inner">
+                    {html(title)}
+                  </div>
+                </div>
+
+              </div>
+
+            </button>
+
+            <div
+              className="accordion__item-content"
+              role="region"
+              aria-labelledby={`${data._id}-${index}-accordion-button`}
+            >
+
+              <div className="accordion__item-content-inner">
+
+                {body &&
+                <div className="accordion__item-body">
+                  <div className="accordion__item-body-inner">
+                    {html(compile(body))}
+                  </div>
+                </div>
+                }
+
+                {_graphic.src &&
+                <div className={classes([
+                  'accordion__item-image-container',
+                  _graphic.attribution && 'has-attribution'
+                ])}>
+
+                  <img
+                    className="accordion__item-image"
+                    src={_graphic.src}
+                    aria-label={_graphic.alt ? Adapt.a11y.normalize(_graphic.alt) : ''}
+                    aria-hidden={!_graphic.alt}
+                  />
+
+                  {_graphic.attribution &&
+                  <div className="component__attribution accordion__attribution">
+                    <div className="component__attribution-inner accordion__attribution-inner">
+                      {html(_graphic.attribution)}
+                    </div>
+                  </div>
+                  }
+
+                </div>
+                }
+
+              </div>
+            </div>
+
+          </div>
+        )}
+
+      </div>
+
+    </div>
+  );
+}