2808 - convert to es6 classes, added imports/exports and return early

README.md

@@ -111,8 +111,8 @@ Visit the [**Vanilla** wiki](https://github.com/adaptlearning/adapt-contrib-vani
 No known limitations.
 
 ----------------------------
-**Version number:**  5.7.1  <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><br>
-**Framework versions:**  5.3+<br>
+**Version number:**  5.8.0  <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><br>
+**Framework versions:**  5.8+<br>
 **Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-vanilla/graphs/contributors)<br>
 **Accessibility support:** WAI AA<br>
 **RTL support:** Yes<br>

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-vanilla",
-  "version": "5.7.1",
-  "framework": ">=5.3",
+  "version": "5.8.0",
+  "framework": ">=5.8",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-vanilla/issues",
   "theme": "vanilla",

js/theme.js

@@ -1,38 +1,43 @@
-define([
-  'core/js/adapt',
-  './themePageView',
-  './themeArticleView',
-  './themeBlockView',
-  './themeView'
-], function(Adapt, ThemePageView, ThemeArticleView, ThemeBlockView, ThemeView) {
+import Adapt from 'core/js/adapt';
+import ThemePageView from './themePageView';
+import ThemeArticleView from './themeArticleView';
+import ThemeBlockView from './themeBlockView';
+import ThemeView from './themeView';
 
-  function onDataReady() {
+export default class Theme extends Backbone.Controller {
+
+  initialize() {
+    this.listenTo(Adapt, {
+      'app:dataReady': this.onDataReady,
+      'pageView:postRender articleView:postRender blockView:postRender': this.onPostRender
+    });
+  }
+
+  onDataReady() {
     $('html').addClass(Adapt.course.get('_courseStyle'));
   }
 
-  function onPostRender(view) {
-    var model = view.model;
-    var theme = model.get('_vanilla');
+  onPostRender(view) {
+    const viewModel = view.model;
+    const theme = viewModel.get('_vanilla');
+    const model = new Backbone.Model(theme);
+    const el = view.$el;
 
     if (!theme) return;
 
-    switch (model.get('_type')) {
+    switch (viewModel.get('_type')) {
       case 'page':
-        new ThemePageView({ model: new Backbone.Model(theme), el: view.$el });
+        new ThemePageView({ model, el });
         break;
       case 'article':
-        new ThemeArticleView({ model: new Backbone.Model(theme), el: view.$el });
+        new ThemeArticleView({ model, el });
         break;
       case 'block':
-        new ThemeBlockView({ model: new Backbone.Model(theme), el: view.$el });
+        new ThemeBlockView({ model, el });
         break;
       default:
-        new ThemeView({ model: new Backbone.Model(theme), el: view.$el });
+        new ThemeView({ model, el });
     }
   }
 
-  Adapt.on({
-    'app:dataReady': onDataReady,
-    'pageView:postRender articleView:postRender blockView:postRender': onPostRender
-  });
-});
+}

js/themeArticleView.js

@@ -1,17 +1,11 @@
-define([
-  './themeView'
-], function(ThemeView) {
+import ThemeView from './themeView';
 
-  var ThemeArticleView = ThemeView.extend({
+export default class ThemeArticleView extends ThemeView {
 
-    className: function() {},
+  className() {}
 
-    setCustomStyles: function() {},
+  setCustomStyles() {}
 
-    onRemove: function() {}
+  onRemove() {}
 
-  });
-
-  return ThemeArticleView;
-
-});
+}

js/themeBlockView.js

@@ -1,19 +1,13 @@
-define([
-  './themeView'
-], function(ThemeView) {
+import ThemeView from './themeView';
 
-  var ThemeBlockView = ThemeView.extend({
+export default class ThemeBlockView extends ThemeView {
 
-    className: function() {
-      return this.model.get('_isDividerBlock') ? 'is-divider-block' : '';
-    },
+  className() {
+    return this.model.get('_isDividerBlock') ? 'is-divider-block' : '';
+  }
 
-    setCustomStyles: function() {},
+  setCustomStyles() {}
 
-    onRemove: function() {}
+  onRemove() {}
 
-  });
-
-  return ThemeBlockView;
-
-});
+}

js/themePageView.js

@@ -1,102 +1,98 @@
-define([
-  './themeView',
-  'core/js/adapt'
-], function(ThemeView, Adapt) {
-
-  var ThemePageView = ThemeView.extend({
-
-    className: function() {},
-
-    setCustomStyles: function() {
-      this.processHeader();
-    },
-
-    processHeader: function() {
-      var header = this.model.get('_pageHeader');
-
-      if (!header) return;
-
-      var $header = this.$('.page__header');
-
-      this.setHeaderBackgroundImage(header, $header);
-      this.setHeaderBackgroundStyles(header, $header);
-      this.setHeaderMinimumHeight(header, $header);
-    },
-
-    setHeaderBackgroundImage: function(config, $header) {
-      var backgroundImages = config._backgroundImage;
-
-      if (!backgroundImages) return;
-
-      var backgroundImage;
-
-      switch (Adapt.device.screenSize) {
-        case 'large':
-          backgroundImage = backgroundImages._large;
-          break;
-        case 'medium':
-          backgroundImage = backgroundImages._medium;
-          break;
-        default:
-          backgroundImage = backgroundImages._small;
-      }
-
-      if (backgroundImage) {
-        $header
-          .addClass('has-bg-image')
-          .css('background-image', 'url(' + backgroundImage + ')');
-      } else {
-        $header
-          .removeClass('has-bg-image')
-          .css('background-image', '');
-      }
-    },
-
-    setHeaderBackgroundStyles: function (config, $header) {
-      var styles = config._backgroundStyles;
-
-      if (!styles) return;
-
-      $header.css({
-        'background-repeat': styles._backgroundRepeat,
-        'background-size': styles._backgroundSize,
-        'background-position': styles._backgroundPosition
-      });
-    },
-
-    setHeaderMinimumHeight: function(config, $header) {
-      var minimumHeights = config._minimumHeights;
-
-      if (!minimumHeights) return;
-
-      var minimumHeight;
-
-      switch (Adapt.device.screenSize) {
-        case 'large':
-          minimumHeight = minimumHeights._large;
-          break;
-        case 'medium':
-          minimumHeight = minimumHeights._medium;
-          break;
-        default:
-          minimumHeight = minimumHeights._small;
-      }
-
-      if (minimumHeight) {
-        $header
-          .addClass('has-min-height')
-          .css('min-height', minimumHeight + 'px');
-      } else {
-        $header
-          .removeClass('has-min-height')
-          .css('min-height', '');
-      }
-    },
-
-    onRemove: function() {}
-
-  });
-
-  return ThemePageView;
-
-});
+import ThemeView from './themeView';
+import Adapt from 'core/js/adapt';
+
+export default class ThemePageView extends ThemeView {
+
+  className() {}
+
+  setCustomStyles() {
+    this.processHeader();
+  }
+
+  processHeader() {
+    const header = this.model.get('_pageHeader');
+
+    if (!header) return;
+
+    const $header = this.$('.page__header');
+
+    this.setHeaderBackgroundImage(header, $header);
+    this.setHeaderBackgroundStyles(header, $header);
+    this.setHeaderMinimumHeight(header, $header);
+  }
+
+  setHeaderBackgroundImage(config, $header) {
+    const backgroundImages = config._backgroundImage;
+
+    if (!backgroundImages) return;
+
+    let backgroundImage;
+
+    switch (Adapt.device.screenSize) {
+      case 'large':
+        backgroundImage = backgroundImages._large;
+        break;
+      case 'medium':
+        backgroundImage = backgroundImages._medium;
+        break;
+      default:
+        backgroundImage = backgroundImages._small;
+    }
+
+    if (backgroundImage) {
+      $header
+        .addClass('has-bg-image')
+        .css('background-image', 'url(' + backgroundImage + ')');
+      return;
+    }
+
+    $header
+      .removeClass('has-bg-image')
+      .css('background-image', '');
+  }
+
+  setHeaderBackgroundStyles(config, $header) {
+    const styles = config._backgroundStyles;
+
+    if (!styles) return;
+
+    $header.css({
+      'background-repeat': styles._backgroundRepeat,
+      'background-size': styles._backgroundSize,
+      'background-position': styles._backgroundPosition
+    });
+  }
+
+  setHeaderMinimumHeight(config, $header) {
+    const minimumHeights = config._minimumHeights;
+
+    if (!minimumHeights) return;
+
+    let minimumHeight;
+
+    switch (Adapt.device.screenSize) {
+      case 'large':
+        minimumHeight = minimumHeights._large;
+        break;
+      case 'medium':
+        minimumHeight = minimumHeights._medium;
+        break;
+      default:
+        minimumHeight = minimumHeights._small;
+    }
+
+    if (minimumHeight) {
+      $header
+        .addClass('has-min-height')
+        .css('min-height', minimumHeight + 'px');
+      return;
+    }
+
+    $header
+      .removeClass('has-min-height')
+      .css('min-height', '');
+  }
+
+  onRemove() {}
+
+}