Breaking: Convert to JSX (fixes #146) (#194)

* JSX conversion - replace .hbs templates with .jsx - change view template filenames - create Boxmenu model - condense view background style functions that are dependant on background image * only add spaces between non-null text Co-authored-by: Oliver Foster <[email protected]> * only add spaces between non-null text Co-authored-by: Oliver Foster <[email protected]> * add missing backtick and remove space * move setBackgroundImage functionality into the boxMenu template * move setHeaderBackgroundImage functionality into the boxMenu template * move setHeaderMinimumHeight functionality into the boxMenu template * apply textAlignment classes via className function * revert removal of setBackgroundImage * rename minimumHeight variable to headerMinimumHeight for consistency with other heading vars * move setBackgroundImage functionality into the boxMenu template * indentation amends * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * split image attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * capitalise Menu to be consistent with schema Co-authored-by: Guy Willis <[email protected]> * add boxmenu class to be consistent with other classes Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * split attributes across multiple lines for readability Co-authored-by: Guy Willis <[email protected]> * indent fix * indent fix * indentation, spaces and closing tag amended --------- Co-authored-by: Oliver Foster <[email protected]> Co-authored-by: Guy Willis <[email protected]>
adaptlearning · Jun 7, 2024 · 7a1c911 · 7a1c911
1 parent 1fc32a3
commit 7a1c911
Show file tree

Hide file tree

Showing 11 changed files with 375 additions and 265 deletions.
diff --git a/js/BoxMenuGroupView.js b/js/BoxMenuGroupView.js
@@ -23,7 +23,7 @@ class BoxMenuGroupView extends MenuItemView {
   }
 }
 
-BoxMenuGroupView.template = 'boxMenuGroup';
+BoxMenuGroupView.template = 'boxMenuGroup.jsx';
 BoxMenuGroupView.childContainer = '.js-group-children';
 BoxMenuGroupView.childView = BoxMenuItemView;
 

diff --git a/js/BoxMenuItemView.js b/js/BoxMenuItemView.js
@@ -20,6 +20,6 @@ class BoxMenuItemView extends MenuItemView {
   }
 }
 
-BoxMenuItemView.template = 'boxMenuItem';
+BoxMenuItemView.template = 'boxMenuItem.jsx';
 
 export default BoxMenuItemView;
diff --git a/js/BoxMenuModel.js b/js/BoxMenuModel.js
@@ -0,0 +1,3 @@
+import MenuModel from 'core/js/models/menuModel';
+
+export default class BoxMenuModel extends MenuModel {}
diff --git a/js/BoxMenuView.js b/js/BoxMenuView.js
@@ -1,4 +1,3 @@
-import Adapt from 'core/js/adapt';
 import device from 'core/js/device';
 import MenuView from 'core/js/views/menuView';
 import BoxMenuItemView from './BoxMenuItemView';
@@ -7,18 +6,21 @@ import BoxMenuGroupView from './BoxMenuGroupView';
 class BoxMenuView extends MenuView {
 
   className() {
-    return `${super.className()} boxmenu`;
+    const backgroundImages = this.model.get('_boxMenu')?._backgroundImage;
+    const backgroundImage = backgroundImages[`_${device.screenSize}`] ?? backgroundImages._small;
+    const textAlignment = this.model.get('_boxMenu')?._menuHeader?._textAlignment;
+
+    return [
+      `${super.className()} boxmenu`,
+      backgroundImage && 'has-bg-image',
+      textAlignment._title && `title-align-${textAlignment._title}`,
+      textAlignment._body && `body-align-${textAlignment._body}`,
+      textAlignment._instruction && `instruction-align-${textAlignment._instruction}`
+    ].join(' ');
   }
 
   initialize() {
     super.initialize();
-    this.setStyles();
-
-    this.listenTo(Adapt, 'device:changed', this.onDeviceResize);
-  }
-
-  onDeviceResize() {
-    this.setStyles();
   }
 
   addChildren() {
@@ -40,7 +42,8 @@ class BoxMenuView extends MenuView {
       nthChild++;
       model.set({
         _nthChild: nthChild,
-        _totalChild: totalChild
+        _totalChild: totalChild,
+        _isRendered: true
       });
 
       const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ?
@@ -58,96 +61,8 @@ class BoxMenuView extends MenuView {
     this.setChildViews(childViews);
   }
 
-  setStyles() {
-    this.addBackgroundLayer();
-    this.setBackgroundImage();
-    this.setBackgroundStyles();
-    this.processHeader();
-  }
-
-  addBackgroundLayer() {
-    if (this.$el.find(' > .background').length) return;
-    this.$background = $('<div class="background" aria-hidden="true"></div>')
-      .prependTo(this.$el);
-  }
-
-  setBackgroundImage() {
-    const config = this.model.get('_boxMenu');
-    const backgroundImages = config?._backgroundImage;
-    if (!backgroundImages) return;
-    const backgroundImage = backgroundImages[`_${device.screenSize}`] ?? backgroundImages._small;
-    this.$el.toggleClass('has-bg-image', Boolean(backgroundImage));
-    this.$background
-      .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : '');
-  }
-
-  setBackgroundStyles() {
-    const config = this.model.get('_boxMenu');
-    const styles = config?._backgroundStyles;
-    if (!styles) return;
-    this.$background.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.setHeaderTextAlignment(header);
-    this.addHeaderBackgroundLayer($header);
-    this.setHeaderBackgroundImage(header, $header);
-    this.setHeaderBackgroundStyles(header, $header);
-    this.setHeaderMinimumHeight(header, $header);
-  }
-
-  setHeaderTextAlignment(config) {
-    const textAlignment = config._textAlignment;
-    if (!textAlignment) return;
-
-    if (textAlignment._title) this.$el.addClass(`title-align-${textAlignment._title}`);
-    if (textAlignment._body) this.$el.addClass(`body-align-${textAlignment._body}`);
-    if (textAlignment._instruction) this.$el.addClass(`instruction-align-${textAlignment._instruction}`);
-  }
-
-  addHeaderBackgroundLayer($header) {
-    if ($header.find(' > .background').length) return;
-    this.$headerBackground = $('<div class="background" aria-hidden="true"></div>')
-      .prependTo($header);
-  }
-
-  setHeaderBackgroundImage(config, $header) {
-    const backgroundImages = config._backgroundImage;
-    if (!backgroundImages) return;
-    const backgroundImage = backgroundImages[`_${device.screenSize}`] ?? backgroundImages._small;
-    $header.toggleClass('has-bg-image', Boolean(backgroundImage));
-    this.$headerBackground.css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : '');
-  }
-
-  setHeaderBackgroundStyles(config, $header) {
-    const styles = config._backgroundStyles;
-    if (!styles) return;
-    this.$headerBackground.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[`_${device.screenSize}`] ?? minimumHeights._small;
-    $header
-      .toggleClass('has-min-height', Boolean(minimumHeight))
-      .css('min-height', minimumHeight ? minimumHeight + 'px' : '');
-  }
-
 }
 
-BoxMenuView.template = 'boxMenu';
+BoxMenuView.template = 'boxMenu.jsx';
 
 export default BoxMenuView;
diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js
@@ -1,17 +1,18 @@
 import components from 'core/js/components';
-import MenuModel from 'core/js/models/menuModel';
 import BoxMenuView from './BoxMenuView';
+import BoxMenuModel from './BoxMenuModel';
 
 // Use as default "_type": "course" or "_type": "menu" view.
 // Note: This is necessary to maintain legacy behaviour in the AAT where
 // only one menu is usable per course and the course / menu is assumed to be
 // a core model and use the only installed MenuView.
 components.register('course menu', {
-  view: BoxMenuView
+  view: BoxMenuView,
+  model: BoxMenuModel
 });
 
 // Use for "_component": "boxMenu", or "_view": "boxMenu" and "_model": "boxMenu"
 components.register('boxMenu', {
   view: BoxMenuView,
-  model: MenuModel.extend({})
+  model: BoxMenuModel
 });
diff --git a/templates/boxMenu.hbs b/templates/boxMenu.hbs
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import MenuModel from 'core/js/models/menuModel';

		export default class BoxMenuModel extends MenuModel {}