Fix: background and headerBackground undefined variable errors (fixes a…

…daptlearning#462) (adaptlearning#463)

* Exit early from setBackgroundImage() and setBackgroundStyles() if this. has not been set

* Exit early from setHeaderBackgroundImage() and setHeaderBackgroundStyles() if this. has not been set

* Fix deprecated Adapt.device references

js/themePageView.js

@@ -1,5 +1,5 @@
 import ThemeView from './themeView';
-import Adapt from 'core/js/adapt';
+import device from 'core/js/device';
 
 export default class ThemePageView extends ThemeView {
 
@@ -37,15 +37,17 @@ export default class ThemePageView extends ThemeView {
 
   setHeaderBackgroundImage(config, $header) {
     const backgroundImages = config._backgroundImage;
-    if (!backgroundImages) return;
-    const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small;
+    if (!backgroundImages || !this.$headerBackground) 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;
+    if (!styles || !this.$headerBackground) return;
+
     this.$headerBackground.css({
       'background-repeat': styles._backgroundRepeat,
       'background-size': styles._backgroundSize,
@@ -56,7 +58,7 @@ export default class ThemePageView extends ThemeView {
   setHeaderMinimumHeight(config, $header) {
     const minimumHeights = config._minimumHeights;
     if (!minimumHeights) return;
-    const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small;
+    const minimumHeight = minimumHeights[`_${device.screenSize}`] ?? minimumHeights._small;
     $header
       .toggleClass('has-min-height', Boolean(minimumHeight))
       .css('min-height', minimumHeight ? minimumHeight + 'px' : '');

js/themeView.js

@@ -1,4 +1,5 @@
 import Adapt from 'core/js/adapt';
+import device from 'core/js/device';
 
 export default class ThemeView extends Backbone.View {
 
@@ -54,16 +55,18 @@ export default class ThemeView extends Backbone.View {
 
   setBackgroundImage() {
     const backgroundImages = this.model.get('_backgroundImage');
-    if (!backgroundImages) return;
-    const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small;
+    if (!backgroundImages || !this.$background) 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 styles = this.model.get('_backgroundStyles');
-    if (!styles) return;
+    if (!styles || !this.$background) return;
+
     this.$background.css({
       'background-repeat': styles._backgroundRepeat,
       'background-size': styles._backgroundSize,
@@ -75,7 +78,7 @@ export default class ThemeView extends Backbone.View {
     const minimumHeights = this.model.get('_minimumHeights');
     if (!minimumHeights) return;
 
-    const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small;
+    const minimumHeight = minimumHeights[`_${device.screenSize}`] ?? minimumHeights._small;
     this.$el
       .toggleClass('has-min-height', Boolean(minimumHeight))
       .css('min-height', minimumHeight ? minimumHeight + 'px' : '');
@@ -87,7 +90,7 @@ export default class ThemeView extends Backbone.View {
 
     this.$el
       .removeClass(Object.values(responsiveClasses))
-      .addClass(responsiveClasses[`_${Adapt.device.screenSize}`]);
+      .addClass(responsiveClasses[`_${device.screenSize}`]);
   }
 
   setCustomStyles() {}