From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Oct 2023 15:51:30 +0000 (+0200)
Subject: wait #6352 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1e1fbe006b02d1a1c3fa5d63b61de0b92778b83f;p=fluidbook-toolbox-quiz.git

wait #6352 @1
---

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 7dde747..e21b394 100644
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -1,4 +1,5 @@
 import gsap from "gsap";
+
 const lottie = require("lottie-web");
 
 function QuizAnimations(quiz) {
@@ -19,8 +20,14 @@ QuizAnimations.prototype = {
     },
 
     // Load the animation "name" in container
-    load: function (name, container, replace, loop = false) {
+    load: function (name, container, replace, loop = false, fit = 'default') {
         let json = this.quiz.data.animations[name];
+        let renderSettings = {};
+        if (fit === 'cover') {
+            renderSettings.preserveAspectRatio = 'xMidYMid slice';
+        } else if (fit === 'fill') {
+            renderSettings.preserveAspectRatio = 'none';
+        }
         if (json) {
             for (const k in replace) {
                 json = json.replace(new RegExp(k, 'g'), replace[k]);
@@ -30,6 +37,7 @@ QuizAnimations.prototype = {
                 renderer: 'svg',
                 loop: loop,
                 autoplay: true,
+                rendererSettings: renderSettings,
                 animationData: JSON.parse(json),
             });
         }
@@ -90,36 +98,30 @@ QuizAnimations.prototype = {
         })
     },
 
-    setAnimItemMultiple: function(tl) {
+    setAnimItemMultiple: function (tl) {
         tl.to(".active-screen .list-item", {
-            opacity: 1,
-            ease: "power1.inOut",
-            stagger: .15
+            opacity: 1, ease: "power1.inOut", stagger: .15
         }, .7)
-        .to(".active-screen .list-item .content", {
-            autoAlpha: 1,
-            stagger: .1
-        }, "<+=.3")
+            .to(".active-screen .list-item .content", {
+                autoAlpha: 1, stagger: .1
+            }, "<+=.3")
     },
 
-    animateDragAndDropCarrousel: function(tl) {
+    animateDragAndDropCarrousel: function (tl) {
         $(".active-screen .list-item").removeClass("complete");
         tl.to(".active-screen .list-item", {
-            opacity: function(index) {
+            opacity: function (index) {
                 let opacity = 1
-                if(index === 1) {
+                if (index === 1) {
                     opacity = 0.64
-                }else if(index === 2) {
+                } else if (index === 2) {
                     opacity = 0.4
-                }else if(index === 3) {
+                } else if (index === 3) {
                     opacity = 0.16
                 }
 
                 return opacity
-            },
-            ease: "power1.inOut",
-            stagger: .15,
-            onComplete: function() {
+            }, ease: "power1.inOut", stagger: .15, onComplete: function () {
                 $(".active-screen .list-item").addClass("complete")
             }
         }, .7)
diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index 7c343b7..bfddaf4 100644
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -119,6 +119,9 @@ QuizResize.prototype = {
         let $this = this;
         $('[data-bg]').each(function () {
             var v = $this.isMobile() ? $(this).attr('data-bg-m') : $(this).attr('data-bg-d');
+            if (v === undefined || v === null) {
+                v = $(this).attr('data-bg-d');
+            }
 
             if ($(this).attr('data-bg') === v) {
                 return;
@@ -130,9 +133,12 @@ QuizResize.prototype = {
     updateBackground: function (b, v) {
         let c = '';
 
+        if (v === undefined) {
+            return;
+        }
         if (v.toLowerCase().indexOf('.json') >= 0) {
             $(b).html('');
-            this.quiz.animations.load(v, b, undefined, true);
+            this.quiz.animations.load(v, b, undefined, true, $(b).attr('data-bg-fit'));
         } else {
             $(b).html('<img src="' + v + '" />');
         }
diff --git a/style/100-global.sass b/style/100-global.sass
index ea8fd94..23e0e71 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -17,11 +17,6 @@ body
         transition: opacity 200ms
         opacity: 1
 
-    .bg
-        background-color: $background-color
-        object-fit: cover
-        object-position: 50% 50%
-
     min-width: 1200px
     max-width: 1200px
 
@@ -269,3 +264,12 @@ body
 
     &.simplebar-horizontal
         display: none
+
+[data-bg-fit="cover"]
+    img
+        object-fit: cover
+        object-position: 50% 50%
+
+[data-bg-fit="fill"]
+    img
+        object-fit: fill
diff --git a/views/components/background.blade.php b/views/components/background.blade.php
index aeb1b21..bc3c623 100644
--- a/views/components/background.blade.php
+++ b/views/components/background.blade.php
@@ -6,4 +6,4 @@
         $m=false;
     }
 @endphp
-<div data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
+<div data-bg-fit="{{$fit}}" 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 c214473..794f9c6 100644
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -17,7 +17,7 @@
 @endphp
 <div class="container">
     <div id="quiz">
-        @include('components.background',['data'=>$data,'name'=>'mainBackground'])
+        @include('components.background',['data'=>$data,'name'=>'mainBackground','fit'=>'cover'])
         @include('screens.intro', ['data'=> $data])
         @foreach($data->questions as $key => $question)
             @php($coundown_enabled = $question["countdown_enable"])