From: Vincent Vanwaelscappel Date: Mon, 23 Sep 2024 17:26:22 +0000 (+0200) Subject: wait #7077 @8 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3d0a25fbbd86b23c90cd18dffc442f43ab703dfc;p=Animations.git wait #7077 @8 --- diff --git a/PPD/Map2/Map2.zip b/PPD/Map2/Map2.zip index ce78429..ed9b4a3 100644 Binary files a/PPD/Map2/Map2.zip and b/PPD/Map2/Map2.zip differ diff --git a/PPD/Map2/index.html b/PPD/Map2/index.html index 019e5f7..dd5a8d9 100644 --- a/PPD/Map2/index.html +++ b/PPD/Map2/index.html @@ -11352,11 +11352,11 @@ -
- - + + \ No newline at end of file diff --git a/PPD/Map2/map2.css b/PPD/Map2/map2.css index 5836df5..402e8f0 100644 --- a/PPD/Map2/map2.css +++ b/PPD/Map2/map2.css @@ -16,9 +16,15 @@ .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; @@ -30,6 +36,17 @@ opacity: 0.3; } } +@keyframes flashingquiz { + from { + fill: #54585a; + } + 50% { + fill: #bbbcbd; + } + to { + fill: #54585a; + } +} #mainsteps { width: 1190.55px; height: 419.528px; @@ -43,22 +60,63 @@ 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 diff --git a/PPD/Map2/map2.css.map b/PPD/Map2/map2.css.map index 7ff8d69..f451cd5 100644 --- a/PPD/Map2/map2.css.map +++ b/PPD/Map2/map2.css.map @@ -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 diff --git a/PPD/Map2/map2.js b/PPD/Map2/map2.js index 2875b4b..ebcc39c 100644 --- a/PPD/Map2/map2.js +++ b/PPD/Map2/map2.js @@ -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(''); + }) + + 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; + }); +} + diff --git a/PPD/Map2/map2.less b/PPD/Map2/map2.less index cf3e794..2cb21eb 100644 --- a/PPD/Map2/map2.less +++ b/PPD/Map2/map2.less @@ -23,10 +23,20 @@ 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 @@ -39,6 +49,19 @@ } } +@keyframes flashingquiz { + from { + fill: #54585a; + } + 50% { + fill: #bbbcbd; + } + to { + fill: #54585a; + } +} + + #mainsteps { width: @w; height: @h; @@ -52,25 +75,80 @@ 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