Breaking: Convert indicator to jsx, add outer container (fixes 230)

js/PageLevelProgressIndicatorView.js

@@ -1,4 +1,7 @@
 import Adapt from 'core/js/adapt';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { templates } from 'core/js/reactHelpers';
 import ItemsComponentModel from 'core/js/models/itemsComponentModel';
 
 class PageLevelProgressIndicatorView extends Backbone.View {
@@ -17,37 +20,30 @@ class PageLevelProgressIndicatorView extends Backbone.View {
     this.setUpEventListeners();
     this.setPercentageComplete();
     this.render();
-    this.refresh();
   }
 
   addClasses() {
     this.$el.addClass([
-      'pagelevelprogress__indicator',
+      'pagelevelprogress__indicator-outer',
       'is-' + this.type
     ].join(' '));
   }
 
-  checkAria() {
-    if (!this.ariaLabel) {
-      this.$el.attr('aria-hidden', true);
-      return;
-    }
-    const data = this.getRenderData();
-    this.$('.js-indicator-aria-label').html(Handlebars.compile(this.ariaLabel)(data));
-  }
-
   setUpEventListeners() {
     if (this.parent) {
       this.listenToOnce(this.parent, 'postRemove', this.remove);
     } else {
       this.listenTo(Adapt, 'remove', this.remove);
     }
-    this.listenTo(Adapt.course, 'bubble:change:_isComplete bubble:change:_isVisited', this.refresh);
+    this.listenTo(Adapt.course, 'bubble:change:_isComplete bubble:change:_isVisited', this.render);
   }
 
   setPercentageComplete() {
     const percentage = this.calculatePercentage();
     this.model.set('percentageComplete', percentage);
+    this.$el.css({
+      '--adapt-pagelevelprogress-percentage': percentage + '%'
+    });
     return percentage;
   }
 
@@ -60,28 +56,19 @@ class PageLevelProgressIndicatorView extends Backbone.View {
       const visited = children.filter(child => child.get('_isVisited'));
       return Math.round(visited.length / children.length * 100);
     }
-    return 0
+    return 0;
   }
 
   render() {
+    this.checkCompletion();
+    this.checkAriaHidden();
     const data = this.getRenderData();
-    const template = Handlebars.templates[this.constructor.template];
-    this.$el.html(template(data));
-  }
-
-  getRenderData() {
-    const data = this.model.toJSON();
-    data.ariaLabel = this.ariaLabel;
-    data.type = this.type;
-    return data;
+    const Component = templates.pageLevelProgressIndicator;
+    ReactDOM.render(<Component {...data} />, this.el);
   }
 
   refresh() {
-    this.checkCompletion();
-    this.checkAria();
-    this.$('.js-indicator-bar').css({
-      width: this.calculatePercentage() + '%'
-    });
+    this.render();
   }
 
   checkCompletion() {
@@ -99,8 +86,20 @@ class PageLevelProgressIndicatorView extends Backbone.View {
       .toggleClass('is-incorrect', isIncorrect);
   }
 
+  checkAriaHidden() {
+    if (this.ariaLabel) return;
+    this.$el.attr('aria-hidden', true);
+  }
+
+  getRenderData() {
+    const data = this.model.toJSON();
+    data.ariaLabel = this.ariaLabel;
+    data.type = this.type;
+    return data;
+  }
+
 }
 
-PageLevelProgressIndicatorView.template = 'pageLevelProgressIndicator';
+PageLevelProgressIndicatorView.template = 'pageLevelProgressIndicator.jsx';
 
 export default PageLevelProgressIndicatorView;

js/PageLevelProgressNavigationView.js

@@ -39,12 +39,14 @@ export default class PageLevelProgressNavigationView extends NavigationButtonVie
     this.setUpEventListeners();
     this.render();
     this.addIndicator();
+    this.refreshProgressBar();
     this.deferredUpdate();
 
     tooltips.register({
       _id: 'pagelevelprogress',
       ...Adapt.course.get('_globals')?._extensions?._pageLevelProgress?._navTooltip || {}
     });
+    this.tooltip = tooltips.getTooltip('pagelevelprogress');
   }
 
   setUpEventListeners() {
@@ -58,8 +60,13 @@ export default class PageLevelProgressNavigationView extends NavigationButtonVie
   }
 
   addIndicator() {
+    const {
+      _useCourseProgressInNavigationButton = false
+    } = Adapt.course.get('_pageLevelProgress') ?? {};
     this.indicatorView = new PageLevelProgressIndicatorView({
-      model: this.pageModel,
+      model: _useCourseProgressInNavigationButton
+        ? Adapt.course
+        : this.pageModel,
       calculatePercentage: this._getPageCompletionPercentage.bind(this),
       ariaLabel: this.model.get('ariaLabel')
     });
@@ -68,13 +75,12 @@ export default class PageLevelProgressNavigationView extends NavigationButtonVie
   }
 
   _getPageCompletionPercentage() {
-    const courseConfig = Adapt.course.get('_pageLevelProgress');
-
-    if (courseConfig._useCourseProgressInNavigationButton) {
-      return completionCalculations.calculatePercentageComplete(Adapt.course);
-    }
-
-    return completionCalculations.calculatePercentageComplete(this.pageModel, true);
+    const {
+      _useCourseProgressInNavigationButton = false
+    } = Adapt.course.get('_pageLevelProgress') ?? {};
+    return _useCourseProgressInNavigationButton
+      ? completionCalculations.calculatePercentageComplete(Adapt.course)
+      : completionCalculations.calculatePercentageComplete(this.pageModel, true);
   }
 
   deferredUpdate() {
@@ -86,6 +92,9 @@ export default class PageLevelProgressNavigationView extends NavigationButtonVie
   }
 
   refreshProgressBar() {
+    const percentageComplete = this._getPageCompletionPercentage();
+    this.model.set('percentageComplete', percentageComplete);
+    this.tooltip.set('percentageComplete', percentageComplete);
     this.collection = getPageLevelProgressItemsJSON(this.pageModel);
     this.updateProgressBar();
   }

less/pageLevelProgressIndicator.less

@@ -25,6 +25,7 @@
     height: inherit;
     min-width: 15%;
     background-color: @black;
+    width: var(--adapt-pagelevelprogress-percentage);
   }
 
   &__indicator .js-indicator-aria-label {

templates/pageLevelProgressIndicator.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { compile } from 'core/js/reactHelpers';
+
+export default function PageLevelProgressIndicator (props) {
+  const {
+    ariaLabel
+  } = props;
+
+  return (
+    <span className='pagelevelprogress__indicator'>
+      <span className="pagelevelprogress__indicator-inner">
+
+        <span className="pagelevelprogress__indicator-bar"></span>
+
+        {ariaLabel &&
+        <span className="aria-label">
+          {compile(ariaLabel, props)}
+        </span>
+        }
+
+      </span>
+    </span>
+  );
+};