convert to ES6 class

README.md

@@ -61,8 +61,8 @@ guide the learner’s interaction with the component.
 No known limitations.
 
 ----------------------------
-**Version number:**  4.0.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>  
-**Framework versions:** 5+  
+**Version number:**  4.1.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>  
+**Framework versions:** 5.5+  
 **Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-graphic/graphs/contributors)  
 **Accessibility support:** WAI AA  
 **RTL support:** Yes  

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-graphic",
-  "version": "4.0.1",
-  "framework": ">=5",
+  "version": "4.1.0",
+  "framework": ">=5.5",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-graphic",
   "issues": "https://github.com/adaptlearning/adapt_framework/issues/new",
   "component" : "graphic",

js/adapt-contrib-graphic.js

@@ -4,40 +4,42 @@ define([
   'core/js/models/componentModel'
 ], function(Adapt, ComponentView, ComponentModel) {
 
-  var GraphicView = ComponentView.extend({
+  class GraphicView extends ComponentView {
 
-    preRender: function() {
+    preRender() {
       this.listenTo(Adapt, 'device:changed', this.resizeImage);
 
       this.checkIfResetOnRevisit();
-    },
+    }
 
-    postRender: function() {
+    postRender() {
       this.resizeImage(Adapt.device.screenSize, true);
-    },
+    }
 
-    checkIfResetOnRevisit: function() {
-      var isResetOnRevisit = this.model.get('_isResetOnRevisit');
+    checkIfResetOnRevisit() {
+      const isResetOnRevisit = this.model.get('_isResetOnRevisit');
 
       if (isResetOnRevisit) {
         this.model.reset(isResetOnRevisit);
       }
-    },
+    }
 
-    resizeImage: function(width, setupInView) {
-      var imageWidth = width === 'medium' ? 'small' : width;
-      var imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[imageWidth] : '';
+    resizeImage(width, setupInView) {
+      const imageWidth = width === 'medium' ? 'small' : width;
+      const imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[imageWidth] : '';
       this.$('.js-graphic-set-image-src').attr('src', imageSrc);
 
-      this.$('.graphic__widget').imageready(function() {
+      this.$('.graphic__widget').imageready(() => {
         this.setReadyStatus();
 
         if (setupInView) {
           this.setupInviewCompletion('.graphic__widget');
         }
-      }.bind(this));
+      });
     }
-  });
+  }
+
+  GraphicView.template = 'graphic';
 
   return Adapt.register('graphic', {
     model: ComponentModel.extend({}),// create a new class in the inheritance chain so it can be extended per component type if necessary later