wait #6352 @1

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 7dde747a9b7654801da018b6edb23d94e27370bc..e21b394df6bb5409888f6a669c2c36523c2bf572 100644 (file)
--- 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 7c343b700e981ff4bb6436253c3adb289d693e9d..bfddaf494e1622e7479caad850c8e20f088ebf63 100644 (file)
--- 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 ea8fd94b2cb3a2e4deac9f0d54f8b55c531d969f..23e0e71fcf02ef1aab54c72c4bfd1834557e21a7 100644 (file)
--- 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 aeb1b21aaa3c6e5674ea850313c1f5cb2fff4ed1..bc3c623c8f33636101ff9919117819c10b10305d 100644 (file)
--- 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 c2144730a7129d800d88de959a0f640bbd6417a5..794f9c605328559a9ec538eb78f0475ad987afb5 100644 (file)
--- 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"])