]> _ Git - Animations.git/commitdiff
wait #7077 @8
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 23 Sep 2024 17:26:22 +0000 (19:26 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 23 Sep 2024 17:26:22 +0000 (19:26 +0200)
PPD/Map2/Map2.zip
PPD/Map2/index.html
PPD/Map2/map2.css
PPD/Map2/map2.css.map
PPD/Map2/map2.js
PPD/Map2/map2.less

index ce784291ff97f722840873297083120496f4f0fe..ed9b4a32103f01c0d8bc3a588a429dc68fbca4bd 100644 (file)
Binary files a/PPD/Map2/Map2.zip and b/PPD/Map2/Map2.zip differ
index 019e5f7fd26f62ef71cbbea6f4dcc2a664d531ff..dd5a8d9a7ee54b1575077a70077c5b1dadfee26b 100644 (file)
                        </g>
                        <path style="fill:none;stroke-width:0.294;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(89.019775%,89.019775%,89.019775%);stroke-opacity:1;stroke-miterlimit:10;" d="M -0.00116178 0.00178717 L -12.753775 0.00178717 L -12.753775 -5.238477 L 0.0496766 -5.238477 C 1.473151 -5.211102 2.61897 -4.049641 2.61897 -2.618345 C 2.61897 -1.171406 1.445777 0.00178717 -0.00116178 0.00178717 Z M -0.00116178 0.00178717 " transform="matrix(0.998876,0,0,-0.998876,1087.372254,237.064285)" id="e-6696"/>
                </g>
-       </svg
+       </svg>
        <div id="mainsteps"></div>
 </main>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-<!--<script src="../../../data/jquery.js"></script>-->
+<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
+<script src="../../../data/jquery.js"></script>
 <script src="map2.js"></script>
 </body>
 </html>
\ No newline at end of file
index 5836df5c64bad229eace51646b93be49c8bfa1a5..402e8f05e59bc9194673ebc1189a5ae10d3dc071 100644 (file)
 .hidden {
   opacity: 0 !important;
 }
+.quiz.hidden {
+  opacity: 1 !important;
+}
 .flashing {
   animation: flashing 2s linear infinite;
 }
+.quizback.flashing {
+  animation: flashingquiz 2s linear infinite;
+}
 @keyframes flashing {
   from {
     opacity: 0.3;
     opacity: 0.3;
   }
 }
+@keyframes flashingquiz {
+  from {
+    fill: #54585a;
+  }
+  50% {
+    fill: #bbbcbd;
+  }
+  to {
+    fill: #54585a;
+  }
+}
 #mainsteps {
   width: 1190.55px;
   height: 419.528px;
   transform-origin: 0 0;
   transform: scale(0.31);
 }
+#mainsteps > div img {
+  display: block;
+}
+#mainsteps > div#s1 {
+  left: 561px;
+  top: 429px;
+}
+#mainsteps > div#s4 {
+  left: 663px;
+  top: 367px;
+}
+#mainsteps > div#s6 {
+  left: 801px;
+  top: 431px;
+}
+#mainsteps > div#s8 {
+  left: 886px;
+  top: 412px;
+}
+#mainsteps > div#s10 {
+  left: 854px;
+  top: 325px;
+}
+#mainsteps > div#s12 {
+  left: 917px;
+  top: 258px;
+}
+#mainsteps > div#s14 {
+  left: 1013px;
+  top: 291px;
+}
+#mainsteps > div#s16 {
+  left: 1129px;
+  top: 359px;
+}
 #mainsteps > div .red {
   display: block;
   position: absolute;
   width: 80px;
   height: 80px;
-  bottom: -26px;
-  left: calc(50% - 20px);
+  bottom: 0;
+  left: 0;
   background-position: 0 0;
   background-size: 100% 100%;
   background-image: url("red.svg");
   z-index: 2;
 }
-.questionfaded {
-  fill: #bbbcbd !important;
-}
 .disabled {
-  filter: grayscale(1);
+  opacity: 0;
+}
+.extra.disabled {
+  opacity: 0.3 !important;
+}
+.quiz.disabled {
+  opacity: 1;
+}
+.quizback.disabled {
+  fill: #bbbcbd !important;
 }
 /*# sourceMappingURL=map2.css.map */
\ No newline at end of file
index 7ff8d697d316e964bca9d6e9e22d3d0f6f1316ec..f451cd52d184b92f160df469062253f3878940dc 100644 (file)
@@ -1 +1 @@
-{"version":3,"sources":["map2.less"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;;AAMF;AAAO;EACL,kBAAA;EACA,MAAA;EACA,OAAA;;AAIF;EACE,UAAA;EACA,yBAAA;;AAGF;EACE,qBAAA;;AAGF;EACE,sCAAA;;AAGF;EACE;IACE,YAAA;;EAEF;IACE,UAAA;;EAEF;IACE,YAAA;;;AAIJ;EACE,gBAAA;EACA,iBAAA;EACA,UAAA;EACA,oBAAA;;AAJF,UAME;EACE,kBAAA;EACA,SAAA;EACA,QAAA;EACA,qBAAA;EACA,WAAW,WAAX;;AAXJ,UAME,MAOE;EACE,cAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,MAAM,gBAAN;EACA,wBAAA;EACA,0BAAA;EACA,sBAAsB,UAAtB;EACA,UAAA;;AAKN;EACE,aAAA;;AAGF;EACE,QAAQ,YAAR","file":"map2.css"}
\ No newline at end of file
+{"version":3,"sources":["map2.less"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;;AAMF;AAAO;EACL,kBAAA;EACA,MAAA;EACA,OAAA;;AAIF;EACE,UAAA;EACA,yBAAA;;AAGF;EACE,qBAAA;;AAGF,KAAK;EACH,qBAAA;;AAIF;EACE,sCAAA;;AAGF,SAAS;EACP,0CAAA;;AAIF;EACE;IACE,YAAA;;EAEF;IACE,UAAA;;EAEF;IACE,YAAA;;;AAIJ;EACE;IACE,aAAA;;EAEF;IACE,aAAA;;EAEF;IACE,aAAA;;;AAKJ;EACE,gBAAA;EACA,iBAAA;EACA,UAAA;EACA,oBAAA;;AAJF,UAME;EACE,kBAAA;EACA,SAAA;EACA,QAAA;EACA,qBAAA;EACA,WAAW,WAAX;;AAXJ,UAME,MAOE;EACE,cAAA;;AAGF,UAXF,MAWG;EACC,WAAA;EACA,UAAA;;AAGF,UAhBF,MAgBG;EACC,WAAA;EACA,UAAA;;AAGF,UArBF,MAqBG;EACC,WAAA;EACA,UAAA;;AAGF,UA1BF,MA0BG;EACC,WAAA;EACA,UAAA;;AAGF,UA/BF,MA+BG;EACC,WAAA;EACA,UAAA;;AAGF,UApCF,MAoCG;EACC,WAAA;EACA,UAAA;;AAGF,UAzCF,MAyCG;EACC,YAAA;EACA,UAAA;;AAIF,UA/CF,MA+CG;EACC,YAAA;EACA,UAAA;;AAvDN,UAME,MAoDE;EACE,cAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,OAAA;EACA,wBAAA;EACA,0BAAA;EACA,sBAAsB,UAAtB;EACA,UAAA;;AAON;EACE,UAAA;;AAGF,MAAM;EACJ,YAAA;;AAGF,KAAK;EACH,UAAA;;AAGF,SAAS;EACP,aAAA","file":"map2.css"}
\ No newline at end of file
index 2875b4b9e9fb3f6ab29e71ac65ce983ec7e05372..ebcc39cd333814e73f4004bcde6c7ba9292e72bc 100644 (file)
@@ -1,10 +1,10 @@
 var fluidbook = window.parent.fluidbook;
-var pJquery = jQuery;
+var pJquery = window.parent.jQuery;
 
 var mainSteps = [1, 4, 6, 8, 10, 12, 14, 16];
 
 
-var NB_STEPS = 27;
+var NB_STEPS = 21;
 
 var currentFlashing = 1;
 var completedSteps = [];
@@ -22,7 +22,7 @@ var STEPS = {
     7: {"layers": '6515-6517', 'prefix': 'e', 'show': '6680-6682,3339-3350', 'type': 'question'}, //? after feasibility
     8: {"layers": '3656-3686,3575-3583,3589,6088-6107', 'prefix': 'e', 'e': 's8', 'type': 'mainstep'}, // Startup activities
     9: {"layers": '6518-6520', 'prefix': 'e', 'show': '6683-6685,3351-3363', 'type': 'question'}, // ? after Startup activities
-    10: {"layers":'3620-3628,6266-6345', 'prefix': 'e', 'e': 's10', 'type': 'mainstep'}, // Activation
+    10: {"layers": '3620-3628,6266-6345', 'prefix': 'e', 'e': 's10', 'type': 'mainstep'}, // Activation
     11: {"layers": '6521-6523', 'prefix': 'e', 'show': '6686-6687,3364-3416', 'type': 'question'}, // ? after activation
     12: {"layers": '3598-3606,6107-6265,', 'prefix': 'e', 'e': 's12', 'type': 'mainstep'}, //study conduct
     13: {"layers": '6524-6526', 'prefix': 'e', 'show': '6688-6689,3417-3499', 'type': 'question'}, // ? after study conduct
@@ -30,25 +30,30 @@ var STEPS = {
     15: {"layers": '6527-6529', 'prefix': 'e', 'show': '6690-6691,3500-3519', 'type': 'question'},
     16: {"layers": '3647-3655,3879-4014', 'prefix': 'e', 'e': 's16', 'type': 'mainstep'}, // reporting
     17: {"layers": '6530-6532', 'prefix': 'e', 'show': '6692-6696,3520-3528', 'type': 'question'}, // ? after reporting
-    19: {"layers": '6503-6506', 'flashing': '6507,6508', 'prefix': 'f', 'show': [], 'type': 'extra'}, // OK Analytical services division
-    20: {"layers": '6596-6598', 'flashing': '6599,6600', 'prefix': 'f', 'show': [], 'type': 'extra'}, // OK Patient and advisory
-    21: {"layers": '6535-6539', 'flashing': '6560-6561', 'prefix': 'f', 'show': [], 'type': 'extra'}, // OK Support function
+    19: {"layers": '6503-6506', 'flashing': '6507,6508', 'prefix': 'e', 'show': [], 'type': 'extra'}, // OK Analytical services division
+    20: {"layers": '6596-6598', 'flashing': '6599,6600', 'prefix': 'e', 'show': [], 'type': 'extra'}, // OK Patient and advisory
+    21: {"layers": '6535-6539', 'flashing': '6560-6561', 'prefix': 'e', 'show': [], 'type': 'extra'}, // OK Support function
 };
 
 var congratSteps = parseList('1-17');
 
 $(function () {
-
+    $("#e-6533,#e-6534").remove();
 
     setTimeout(function () {
-        for (var i = 1; i <= 21; i++) {
-            if(STEPS[i]===undefined){
+
+        $.each(mainSteps, function (k, v) {
+            $("#mainsteps").append('<div id="s' + v + '" class="hidden"><span class="red"></span></div>');
+        })
+
+        for (var i = 1; i <= NB_STEPS; i++) {
+            if (STEPS[i] === undefined) {
                 continue;
             }
             let type = STEPS[i].type;
             if (type === 'extra') {
                 $.each(parseList(STEPS[i].layers), function (k, v) {
-                    $("#" + STEPS[i].prefix + "-" + v).css('fill', '#666');
+                    $("#" + STEPS[i].prefix + "-" + v).css('fill', '#666').addClass('extra');
                 });
             } else if (type == 'mainstep') {
                 $.each(parseList(STEPS[i].layers), function (k, v) {
@@ -56,14 +61,55 @@ $(function () {
                 });
             } else if (type == 'question') {
                 $.each(parseList(STEPS[i].layers), function (k, v) {
-                    let e=$("#" + STEPS[i].prefix + "-" + v);
-                    if(e.css('fill')!=='rgb(255, 255, 255)' && e.css('fill')!=='rgb(100%, 100%, 100%)') {
-                        e.addClass('questionfaded');
+                    let e = $("#" + STEPS[i].prefix + "-" + v);
+                    e.addClass('quiz');
+                    if (e.css('fill') !== 'rgb(255, 255, 255)' && e.css('fill') !== 'rgb(100%, 100%, 100%)') {
+                        e.addClass('quizback');
                     }
                 });
+            } else if (type == 'side') {
+                $.each(parseList(STEPS[i].layers), function (k, v) {
+                    $("#" + STEPS[i].prefix + "-" + v).css('fill', '#f1b433');
+                });
             }
+        }
 
+
+        try {
+            currentFlashing = parseInt(fluidbook.cache.get('map2_current_flashing', 1).toString());
+            completedSteps = sortNumber(fluidbook.cache.get('map2_completed_steps', []));
+            lastPassedStep = parseInt(fluidbook.cache.get('map2_last_passed_step', 0));
+            let firstPartOk = congratSteps.diff(completedSteps).length === 0;
+            console.log(firstPartOk, congratSteps, completedSteps);
+            if (lastPassedStep === NB_STEPS) {
+                _end();
+            } else if (firstPartOk) {
+                completedPart1 = true;
+                _congratulations();
+            }
+        } catch (e) {
+            console.log(e);
         }
+
+
+        $.each(STEPS, function (step, data) {
+            $.each(parseList(data.show), function (k, id) {
+                $("#" + data.prefix + "-" + id).addClass('hidden');
+            });
+            $.each(parseList(data.layers), function (k, id) {
+                $("#" + data.prefix + "-" + id).addClass('disabled');
+            });
+        });
+
+
+        setFlashing(currentFlashing);
+
+        completedSteps = sortNumber(completedSteps);
+
+        $.each(completedSteps, function (k, s) {
+            setStep(s);
+        })
+
     }, 200);
 
 
@@ -71,44 +117,12 @@ $(function () {
         if (linkId.toString().indexOf('m2s') === -1) {
             return;
         }
-        var enabledStep = parseFloat(linkId.toString().substring(3));
+        var enabledStep = parseInt(linkId.toString().substring(3));
+        console.log(enabledStep);
         setStep(enabledStep);
     });
 
 
-    try {
-        currentFlashing = parseInt(fluidbook.cache.get('map2_current_flashing', 1).toString());
-        completedSteps = fluidbook.cache.get('map2_completed_steps', []).sort();
-        lastPassedStep = fluidbook.cache.get('map2_last_passed_step', 0);
-        let firstPartOk = congratSteps.diff(completedSteps).length === 0;
-        console.log(firstPartOk, congratSteps, completedSteps);
-        if (lastPassedStep === 20) {
-            _end();
-        } else if (firstPartOk) {
-            completedPart1 = true;
-            _congratulations();
-        }
-    } catch (e) {
-        console.log(e);
-    }
-
-
-    $.each(STEPS, function (step, data) {
-        $.each(parseList(data.show), function (k, id) {
-            $("#" + data.prefix + "-" + id).addClass('hidden');
-        });
-        $.each(parseList(data.layers), function (k, id) {
-            $("#" + data.prefix + "-" + id).addClass('disabled');
-        });
-    });
-
-
-    setFlashing(currentFlashing);
-
-    $.each(completedSteps, function (k, s) {
-        setStep(s);
-    })
-
     setTimeout(function () {
         $("#illu").css('opacity', 1);
     }, 300)
@@ -123,10 +137,10 @@ function setStep(s) {
         $("#" + STEPS[s].prefix + "-" + id).removeClass('disabled').removeClass('flashing').removeClass('questionfaded');
     });
     $.each(parseList(STEPS[s].show), function (k, id) {
-        $("#" + STEPS[s].prefix + "-" + id).removeClass('hidden');
+        $("#" + STEPS[s].prefix + "-" + id).removeClass('hidden').removeClass('disabled');
     });
     if (STEPS[s].e !== undefined) {
-        $("#" + STEPS[s].e).removeClass('hidden').removeClass('flashing').addClass('enabled');
+        $("#" + STEPS[s].e).removeClass('hidden').removeClass('flashing').addClass('enabled').removeClass('disabled');
     }
 
     if (completedSteps.indexOf(s) === -1) {
@@ -134,12 +148,12 @@ function setStep(s) {
 
         try {
             fluidbook.cache.set('map2_completed_steps', completedSteps);
-            fluidbook.cache.set('map2_last_passed_step', s);
+            fluidbook.cache.set('map2_last_passed_step', lastPassedStep);
         } catch (e) {
             console.log(e);
         }
         if (completedSteps.length === NB_STEPS) {
-
+            _end();
         } else if (congratSteps.diff(completedSteps).length === 0) {
             congratulations(s);
         }
@@ -211,7 +225,7 @@ function setFlashing(s, cancel) {
 
 
 function isPopupStep(s) {
-    return [2, 3, 5, 6, 7, 9, 11, 13, 15, 17].indexOf(s) >= 0;
+    return [2, 3, 5, 7, 9, 11, 13, 15, 17].indexOf(s) >= 0;
 }
 
 function congratulations(s) {
@@ -229,6 +243,7 @@ function _congratulations() {
     if (fluidbook.cache.get('congratSeen', 0) == 1) {
         return;
     }
+
     setTimeout(function () {
         try {
             fluidbook.cache.set('congratSeen', 1)
@@ -290,3 +305,9 @@ function parseRange(string) {
     return res;
 }
 
+function sortNumber(a) {
+    return a.sort(function (a, b) {
+        return a - b;
+    });
+}
+
index cf3e794d63c0032143046e2de86155c2ff452b03..2cb21eb6c7ee12279038a5cc6e392f0d38df9be0 100644 (file)
   opacity: 0 !important;
 }
 
+.quiz.hidden {
+  opacity: 1 !important;
+}
+
+
 .flashing {
   animation: flashing 2s linear infinite;
 }
 
+.quizback.flashing {
+  animation: flashingquiz 2s linear infinite;
+}
+
+
 @keyframes flashing {
   from {
     opacity: 0.3
   }
 }
 
+@keyframes flashingquiz {
+  from {
+    fill: #54585a;
+  }
+  50% {
+    fill: #bbbcbd;
+  }
+  to {
+    fill: #54585a;
+  }
+}
+
+
 #mainsteps {
   width: @w;
   height: @h;
     transform-origin: 0 0;
     transform: scale(0.31);
 
+    img {
+      display: block;
+    }
+
+    &#s1 {
+      left: 561px;
+      top: 429px;
+    }
+
+    &#s4 {
+      left: 663px;
+      top: 367px;
+    }
+
+    &#s6 {
+      left: 801px;
+      top: 431px;
+    }
+
+    &#s8 {
+      left: 886px;
+      top: 412px;
+    }
+
+    &#s10 {
+      left: 854px;
+      top: 325px;
+    }
+
+    &#s12 {
+      left: 917px;
+      top: 258px;
+    }
+
+    &#s14 {
+      left: 1013px;
+      top: 291px;
+    }
+
+
+    &#s16 {
+      left: 1129px;
+      top: 359px;
+    }
+
     .red {
       display: block;
       position: absolute;
       width: 80px;
       height: 80px;
-      bottom: -26px;
-      left: calc(50% - 20px);
+      bottom: 0;
+      left: 0;
       background-position: 0 0;
       background-size: 100% 100%;
       background-image: url("red.svg");
       z-index: 2;
+
+
     }
   }
 }
 
-.questionfaded {
-  fill: #bbbcbd !important;
+.disabled {
+  opacity: 0;
 }
 
-.disabled{
-  filter: grayscale(1);
+.extra.disabled {
+  opacity: 0.3 !important;
+}
+
+.quiz.disabled {
+  opacity: 1;
+}
+
+.quizback.disabled {
+  fill: #bbbcbd !important;
 }
\ No newline at end of file