issue/2808 convert to es6 classes modules

README.md

@@ -111,8 +111,8 @@ The following attributes, set within *contentObjects.json*, configure the defaul
 No known limitations.
 
 ----------------------------
-**Version number:**  5.2   <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.7+  
+**Version number:**  5.3.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.8+  
 **Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-boxmenu/graphs/contributors)  
 **Accessibility support:** WAI AA  
 **RTL support:** Yes  

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-boxMenu",
-  "version": "5.2.0",
-  "framework": ">=5.7",
+  "version": "5.3.0",
+  "framework": ">=5.8",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-boxMenu",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-boxMenu/issues",
   "menu": "boxMenu",

js/BoxMenuGroupView.js

@@ -0,0 +1,21 @@
+import MenuItemView from 'core/js/views/menuItemView';
+import BoxMenuItemView from './BoxMenuItemView';
+
+class BoxMenuGroupView extends MenuItemView {
+
+  className() {
+    return 'boxMenuGroup';
+  }
+
+  postRender() {
+    _.defer(this.addChildren.bind(this));
+    this.$el.imageready(this.setReadyStatus.bind(this));
+    this.$el.parents('.boxmenu__item-container').addClass('has-groups');
+  }
+}
+
+BoxMenuGroupView.template = 'boxmenu-group';
+BoxMenuGroupView.childContainer = '.js-group-children';
+BoxMenuGroupView.childView = BoxMenuItemView;
+
+export default BoxMenuGroupView;

js/BoxMenuItemView.js

@@ -0,0 +1,25 @@
+import MenuItemView from 'core/js/views/menuItemView';
+import router from 'core/js/router';
+
+class BoxMenuItemView extends MenuItemView {
+
+  className() {
+    return 'boxmenu-item';
+  }
+
+  events() {
+    return {
+      'click .js-btn-click': 'onClickMenuItemButton'
+    };
+  }
+
+  onClickMenuItemButton(event) {
+    if (event && event.preventDefault) event.preventDefault();
+    if (this.model.get('_isLocked')) return;
+    router.navigateToElement(this.model.get('_id'));
+  }
+}
+
+BoxMenuItemView.template = 'boxMenuItem';
+
+export default BoxMenuItemView;

js/BoxMenuView.js

@@ -0,0 +1,122 @@
+import Adapt from 'core/js/adapt';
+import MenuView from 'core/js/views/menuView';
+import BoxMenuItemView from './BoxMenuItemView';
+import BoxMenuGroupView from './BoxMenuGroupView';
+
+class BoxMenuView extends MenuView {
+
+  className() {
+    return 'boxmenu';
+  }
+
+  initialize() {
+    super.initialize();
+    this.setStyles();
+
+    this.listenTo(Adapt, 'device:changed', this.onDeviceResize);
+  }
+
+  onDeviceResize() {
+    this.setStyles();
+  }
+
+  addChildren() {
+    let nthChild = 0;
+    const models = this.model.getChildren().models;
+    const childViews = [];
+    models.forEach(model => {
+      if (!model.get('_isAvailable')) return;
+
+      nthChild++;
+      model.set('_nthChild', nthChild);
+
+      const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ?
+        BoxMenuGroupView :
+        BoxMenuItemView;
+
+      const $parentContainer = this.$(this.constructor.childContainer);
+      const childView = new ChildView({ model });
+
+      childViews.push(childView);
+
+      $parentContainer.append(childView.$el);
+    });
+
+    this.setChildViews(childViews);
+  }
+
+  setStyles() {
+    this.setBackgroundImage();
+    this.setBackgroundStyles();
+    this.processHeader();
+  }
+
+  setBackgroundImage() {
+    const config = this.model.get('_boxMenu');
+    const backgroundImages = config?._backgroundImage;
+    if (!backgroundImages) return;
+    const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small;
+    this.$el
+      .toggleClass('has-bg-image', Boolean(backgroundImage))
+      .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : '');
+  }
+
+  setBackgroundStyles() {
+    const config = this.model.get('_boxMenu');
+    const styles = config?._backgroundStyles;
+    if (!styles) return;
+    this.$el.css({
+      'background-repeat': styles._backgroundRepeat,
+      'background-size': styles._backgroundSize,
+      'background-position': styles._backgroundPosition
+    });
+  }
+
+  processHeader() {
+    const config = this.model.get('_boxMenu');
+    const header = config?._menuHeader;
+
+    if (!header) return;
+
+    const $header = this.$('.menu__header');
+
+    this.setHeaderBackgroundImage(header, $header);
+    this.setHeaderBackgroundStyles(header, $header);
+    this.setHeaderMinimumHeight(header, $header);
+  }
+
+  setHeaderBackgroundImage(config, $header) {
+    const backgroundImages = config._backgroundImage;
+    if (!backgroundImages) return;
+    const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small;
+    $header
+      .toggleClass('has-bg-image', Boolean(backgroundImage))
+      .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : '');
+  }
+
+  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;
+    const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small;
+    $header
+      .toggleClass('has-min-height', Boolean(minimumHeight))
+      .css('min-height', minimumHeight ? minimumHeight + 'px' : '');
+  }
+
+}
+
+BoxMenuView.template = 'boxMenu';
+
+export default BoxMenuView;