From 35b28f665166e5c4d4ea7188c7014a692d3197b3 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 3 Oct 2023 18:35:05 +0200
Subject: [PATCH] wip #6363 @0.5

---
 js/quiz.resize.js                     | 25 ++++++++++++++++++++
 js/quiz.utils.js                      |  2 ++
 style/100-global.sass                 | 34 +++++++++++++++------------
 views/components/background.blade.php |  9 +++++++
 views/index.blade.php                 |  1 +
 5 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 views/components/background.blade.php

diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index 625d782..7c343b7 100644
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -37,6 +37,7 @@ QuizResize.prototype = {
 
     resize: function () {
         this.measureSizes();
+        this.updateBackgrounds();
         this.updateViewport();
 
         if (this.isMobile()) {
@@ -114,6 +115,30 @@ QuizResize.prototype = {
         }
     },
 
+    updateBackgrounds: function () {
+        let $this = this;
+        $('[data-bg]').each(function () {
+            var v = $this.isMobile() ? $(this).attr('data-bg-m') : $(this).attr('data-bg-d');
+
+            if ($(this).attr('data-bg') === v) {
+                return;
+            }
+            $this.updateBackground($(this), v);
+        });
+    },
+
+    updateBackground: function (b, v) {
+        let c = '';
+
+        if (v.toLowerCase().indexOf('.json') >= 0) {
+            $(b).html('');
+            this.quiz.animations.load(v, b, undefined, true);
+        } else {
+            $(b).html('<img src="' + v + '" />');
+        }
+        $(b).attr('data-bg', v);
+    },
+
     isMobile: function () {
         return this.ww <= 600 && this.ratio < 0.7;
     },
diff --git a/js/quiz.utils.js b/js/quiz.utils.js
index 66a3215..805a6a1 100644
--- a/js/quiz.utils.js
+++ b/js/quiz.utils.js
@@ -3,6 +3,7 @@ function QuizUtils() {
 }
 
 QuizUtils.prototype = {
+
     isVisible(e) {
         if ($(e).length === 0) {
             return false;
@@ -14,6 +15,7 @@ QuizUtils.prototype = {
 
         return elt.offsetWidth || elt.offsetHeight || elt.getClientRects().length;
     },
+
     isEnabled: function (e) {
         if (!this.isVisible(e)) {
             return false;
diff --git a/style/100-global.sass b/style/100-global.sass
index de90351..a22bf75 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -16,21 +16,16 @@ body
         transition: opacity 200ms
         opacity: 1
 
-    background-color: $background-color
-
-    @if ($background-custom)
-        background-image: url($background-desktop-image)
-        background-repeat: $background-desktop-repeat
-        background-size: $background-desktop-size
-        background-position-x: $background-desktop-position-x
-        background-position-y: $background-desktop-position-y
-
-        .m &
-            background-image: url($background-mobile-image)
-            background-repeat: $background-mobile-repeat
-            background-size: $background-mobile-size
-            background-position-x: $background-mobile-position-x
-            background-position-y: $background-mobile-position-y
+    .bg
+        background-color: $background-color
+
+        @if ($background-custom)
+            object-fit: $background-desktop-size
+            object-position: $background-desktop-position-x $background-desktop-position-y
+
+            .m &
+                object-fit: $background-mobile-size
+                object-position: $background-mobile-position-x $background-mobile-position-y
 
     min-width: 1200px
     max-width: 1200px
@@ -249,3 +244,12 @@ body
     top: 0
     left: 0
     width: 100%
+
+[data-bg]
+    position: absolute
+    display: block
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    pointer-events: none
diff --git a/views/components/background.blade.php b/views/components/background.blade.php
new file mode 100644
index 0000000..aeb1b21
--- /dev/null
+++ b/views/components/background.blade.php
@@ -0,0 +1,9 @@
+@php
+    $d=$data[$name];
+    if(isset($data[$name.'Mobile']) && $data[$name.'Mobile'] && $d!==$data[$name.'Mobile']){
+        $m=$data[$name.'Mobile'];
+    }else{
+        $m=false;
+    }
+@endphp
+<div data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
diff --git a/views/index.blade.php b/views/index.blade.php
index 5111c3c..4f085e3 100644
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -17,6 +17,7 @@
 @endphp
 <div class="container">
     <div id="quiz">
+        @include('components.background',['data'=>$data,'name'=>'mainBackground'])
         @include('screens.intro', ['data'=> $data])
         @foreach($data->questions as $key => $question)
             @include('screens.question_'.$question['type'], ['theme' => $data->theme,'data'=> $data, 'question' => $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet])
-- 
2.39.5