Breaking: Moved background images into their own divs (#334)

adaptlearning · Jul 28, 2022 · 1a8a9b6 · 1a8a9b6
1 parent 147e32f
commit 1a8a9b6
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 34 deletions.
diff --git a/js/theme.js b/js/theme.js
@@ -20,11 +20,9 @@ class Theme extends Backbone.Controller {
   onPostRender(view) {
     const viewModel = view.model;
     const theme = viewModel.get('_vanilla');
+    if (!theme) return;
     const model = new Backbone.Model(theme);
     const el = view.$el;
-
-    if (!theme) return;
-
     switch (viewModel.get('_type')) {
       case 'page':
         new ThemePageView({ model, el });

diff --git a/js/themePageView.js b/js/themePageView.js
@@ -16,11 +16,18 @@ export default class ThemePageView extends ThemeView {
 
     const $header = this.$('.page__header');
 
+    this.addHeaderBackgroundLayer($header);
     this.setHeaderBackgroundImage(header, $header);
     this.setHeaderBackgroundStyles(header, $header);
     this.setHeaderMinimumHeight(header, $header);
   }
 
+  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;
 
@@ -40,27 +47,25 @@ export default class ThemePageView extends ThemeView {
     }
 
     if (backgroundImage) {
-      $header
-        .addClass('has-bg-image')
+      $header.addClass('has-bg-image');
+      this.$headerBackground
         .css('background-image', 'url(' + backgroundImage + ')');
       return;
     }
 
-    $header
-      .removeClass('has-bg-image')
-      .css('background-image', '');
+    $header.removeClass('has-bg-image');
+    this.$headerBackground.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
-    });
+    this.$headerBackground
+      .css({
+        'background-repeat': styles._backgroundRepeat,
+        'background-size': styles._backgroundSize,
+        'background-position': styles._backgroundPosition
+      });
   }
 
   setHeaderMinimumHeight(config, $header) {

diff --git a/js/themeView.js b/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 {
 
@@ -25,6 +26,7 @@ export default class ThemeView extends Backbone.View {
 
   setStyles() {
     this.setClasses();
+    this.addBackgroundLayer();
     this.setBackgroundImage();
     this.setBackgroundStyles();
     this.setMinimumHeight();
@@ -36,14 +38,20 @@ export default class ThemeView extends Backbone.View {
     this.$el.addClass(this.className());
   }
 
+  addBackgroundLayer() {
+    if (this.$el.find(' > .background').length) return;
+    this.$background = $('<div class="background" aria-hidden="true"></div>')
+      .prependTo(this.$el);
+  }
+
   setBackgroundImage() {
     const backgroundImages = this.model.get('_backgroundImage');
 
     if (!backgroundImages) return;
 
     let backgroundImage;
 
-    switch (Adapt.device.screenSize) {
+    switch (device.screenSize) {
       case 'large':
         backgroundImage = backgroundImages._large;
         break;
@@ -55,27 +63,25 @@ export default class ThemeView extends Backbone.View {
     }
 
     if (backgroundImage) {
-      this.$el
-        .addClass('has-bg-image')
+      this.$el.addClass('has-bg-image');
+      this.$background
         .css('background-image', 'url(' + backgroundImage + ')');
       return;
     }
 
-    this.$el
-      .removeClass('has-bg-image')
-      .css('background-image', '');
+    this.$el.removeClass('has-bg-image');
+    this.$background.css('background-image', '');
   }
 
   setBackgroundStyles() {
     const styles = this.model.get('_backgroundStyles');
-
     if (!styles) return;
-
-    this.$el.css({
-      'background-repeat': styles._backgroundRepeat,
-      'background-size': styles._backgroundSize,
-      'background-position': styles._backgroundPosition
-    });
+    this.$background
+      .css({
+        'background-repeat': styles._backgroundRepeat,
+        'background-size': styles._backgroundSize,
+        'background-position': styles._backgroundPosition
+      });
   }
 
   setMinimumHeight() {

diff --git a/less/core/article.less b/less/core/article.less
@@ -1,10 +1,21 @@
 .article {
-  &.has-bg-image {
+  position: relative;
+
+  &.has-bg-image > .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center top;
   }
 
+  &__inner {
+    position: relative;
+  }
+
   &__header-inner {
     .l-container-padding(@article-header-padding-ver, @article-header-padding-hoz);
   }

diff --git a/less/core/block.less b/less/core/block.less
@@ -1,11 +1,19 @@
 .block {
-  &.has-bg-image {
+  position: relative;
+
+  &.has-bg-image > .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center top;
   }
 
   &__inner {
+    position: relative;
     .l-container-padding(@block-padding-ver, @block-padding-hoz);
   }
 

diff --git a/less/core/page.less b/less/core/page.less
@@ -1,20 +1,40 @@
 .page {
+  position: relative;
   max-width: inherit;
   .l-container-padding(@page-padding-ver, @page-padding-hoz);
 
-  &.has-bg-image {
+  &.has-bg-image > .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center top;
   }
 
-  &__header.has-bg-image {
+  &__inner {
+    position: relative;
+  }
+
+  &__header {
+    position: relative;
+  }
+
+  &__header.has-bg-image > .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center top;
   }
 
   &__header-inner {
+    position: relative;
     .l-container-padding(@page-header-padding-ver, @page-header-padding-hoz);
   }
 

diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenu.less b/less/plugins/adapt-contrib-boxmenu/boxMenu.less
@@ -1,20 +1,40 @@
 .boxmenu {
+  position: relative;
   max-width: inherit;
   .l-container-padding(@menu-padding-ver, @menu-padding-hoz);
 
-  &.has-bg-image {
+  &.has-bg-image > .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center top;
   }
 
-  &__header.has-bg-image {
+  &__inner {
+    position: relative;
+  }
+
+  &__header {
+    position: relative;
+  }
+
+  &__header.has-bg-image > .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center top;
   }
 
   &__header-inner {
+    position: relative;
     .l-container-padding(@menu-header-padding-ver, @menu-header-padding-hoz);
   }