From: Vincent Vanwaelscappel Date: Mon, 9 May 2022 17:15:26 +0000 (+0200) Subject: wip #5228 @6 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=08d60895ed1d5e94416aec93c2ad041a82df032a;p=Animations.git wip #5228 @6 --- diff --git a/PPD/Map2/Map2.zip b/PPD/Map2/Map2.zip new file mode 100644 index 0000000..af19b81 Binary files /dev/null and b/PPD/Map2/Map2.zip differ diff --git a/PPD/Map2/_doc/publish.bat b/PPD/Map2/_doc/publish.bat new file mode 100644 index 0000000..97a40d6 --- /dev/null +++ b/PPD/Map2/_doc/publish.bat @@ -0,0 +1,3 @@ +@echo off +"C:\Program Files\7-Zip\7z.exe" a -tzip ../Map2.zip ../ -xr0!_doc -xr0!*.zip -xr0!*.less -xr0!*.map +scp ../Map2.zip extranet@workshop.fluidbook.com:/data1/extranet/www/fluidbook/books/working/21046 \ No newline at end of file diff --git a/PPD/Map2/guide-1.svg b/PPD/Map2/guide-1.svg deleted file mode 100644 index 49291f5..0000000 --- a/PPD/Map2/guide-1.svg +++ /dev/null @@ -1,15589 +0,0 @@ - - diff --git a/PPD/Map2/index.html b/PPD/Map2/index.html index 987a1af..757f951 100644 --- a/PPD/Map2/index.html +++ b/PPD/Map2/index.html @@ -1,15 +1,14920 @@ - - + +

diff --git a/PPD/Map2/map2.css b/PPD/Map2/map2.css index 84998fa..9c2c108 100644 --- a/PPD/Map2/map2.css +++ b/PPD/Map2/map2.css @@ -1,16 +1,40 @@ -#guide, +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +#illu, #mainsteps { position: absolute; top: 0; left: 0; - width: 1190.55px; - height: 419.528px; } -#guide { +#illu { z-index: 0; + transition: opacity 300ms; +} +.hidden { + opacity: 0 !important; +} +.flashing { + animation: flashing 2s linear infinite; +} +@keyframes flashing { + from { + opacity: 0.3; + } + 50% { + opacity: 1; + } + to { + opacity: 0.3; + } } #mainsteps { + width: 1190.55px; + height: 419.528px; z-index: 1; + pointer-events: none; } #mainsteps > div { position: absolute; @@ -19,6 +43,18 @@ transform-origin: 0 0; transform: scale(0.31); } +#mainsteps > div .red { + display: block; + position: absolute; + width: 80px; + height: 80px; + bottom: -26px; + left: calc(50% - 20px); + background-position: 0 0; + background-size: 100% 100%; + background-image: url("red.svg"); + z-index: 2; +} #mainsteps > div img { display: block; } @@ -34,6 +70,10 @@ left: 744px; top: 383px; } +#mainsteps > div#s6 .red { + bottom: 9px; + left: calc(50% - 74px); +} #mainsteps > div#s8 { left: 881px; top: 342px; diff --git a/PPD/Map2/map2.css.map b/PPD/Map2/map2.css.map index eba13af..234d4e3 100644 --- a/PPD/Map2/map2.css.map +++ b/PPD/Map2/map2.css.map @@ -1 +1 @@ -{"version":3,"sources":["map2.less"],"names":[],"mappings":"AAEA;AAAQ;EACN,kBAAA;EACA,MAAA;EACA,OAAA;EACA,gBAAA;EACA,iBAAA;;AAGF;EACE,UAAA;;AAGF;EACE,UAAA;;AADF,UAGE;EACE,kBAAA;EACA,SAAA;EACA,QAAA;EACA,qBAAA;EACA,WAAW,WAAX;;AARJ,UAGE,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;EACA,WAAW,kBAAX;;AAGF,UArCF,MAqCG;EACC,WAAA;EACA,UAAA;EACA,WAAW,WAAX;;AAGF,UA3CF,MA2CG;EACC,YAAA;EACA,UAAA;;AAIF,UAjDF,MAiDG;EACC,YAAA;EACA,UAAA","file":"map2.css"} \ No newline at end of file +{"version":3,"sources":["map2.less"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;;AAKF;AAAO;EACL,kBAAA;EACA,MAAA;EACA,OAAA;;AAGF;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;;AAvBN,UAME,MAoBE;EACE,cAAA;;AAGF,UAxBF,MAwBG;EACC,WAAA;EACA,UAAA;;AAGF,UA7BF,MA6BG;EACC,WAAA;EACA,UAAA;;AAGF,UAlCF,MAkCG;EACC,WAAA;EACA,UAAA;;AAFF,UAlCF,MAkCG,GAIC;EACE,WAAA;EACA,MAAM,gBAAN;;AAIJ,UA5CF,MA4CG;EACC,WAAA;EACA,UAAA;;AAGF,UAjDF,MAiDG;EACC,WAAA;EACA,UAAA;EACA,WAAW,kBAAX;;AAGF,UAvDF,MAuDG;EACC,WAAA;EACA,UAAA;EACA,WAAW,WAAX;;AAGF,UA7DF,MA6DG;EACC,YAAA;EACA,UAAA;;AAIF,UAnEF,MAmEG;EACC,YAAA;EACA,UAAA","file":"map2.css"} \ No newline at end of file diff --git a/PPD/Map2/map2.js b/PPD/Map2/map2.js index ff0c8c2..557b966 100644 --- a/PPD/Map2/map2.js +++ b/PPD/Map2/map2.js @@ -1,30 +1,110 @@ var fluidbook = window.parent.fluidbook; var pJquery = window.parent.jQuery; -$(function () { +var mainSteps = [1, 4, 6, 8, 10, 12, 14, 16]; + + +var NB_STEPS = 25; + +var currentFlashing = 1; +var completedSteps = []; +var completedPart1 = false; + +var STEPS = { + 1: {"layers": [], 'e': 's1', 'show': '9125-9134,9319-9325'}, + 2: {"layers": '9347,9348,9349,9350'}, + 3: {"layers": '9000'}, + 4: {"layers": [], 'e': 's4', 'show': '9135-9139,9325-9326'}, + 5: {"layers": '9003'}, + 6: {"layers": [], 'e': 's6', 'show': '9140-9144,9327-9329'}, + 7: {"layers": '9006'}, + 8: {"layers": [], 'e': 's8', 'show': '9145-9150,9330-9333'}, + 9: {"layers": '9009'}, + 10: {"layers": [], 'e': 's10', 'show': '9151-9191,9334-9335'}, + 11: {"layers": '9012'}, + 12: {"layers": [], 'e': 's12', 'show': '9192-9280,9336-9339'}, + 13: {"layers": '9015'}, + 14: {"layers": [], 'e': 's14', 'show': '9281-9301,9340-9341'}, + 15: {"layers": '9018'}, + 16: {"layers": [], 'e': 's16', 'show': '9302-9314,9342-9346'}, + 17: {"layers": '9021'}, + 19: {"layers": '8874-8877', 'flashing': '8878', 'show': []}, + 20: {"layers": '8917-8920', 'flashing': '8921', 'show': []}, + 21: {"layers": '8832-8840', 'flashing': '8841', 'show': []}, + 22: {"layers": '9107,9110', 'flashing': '9108', 'show': []}, + 23: {"layers": '8934-8941', 'flashing': '8942', 'show': []}, + 24: {"layers": '9035-9038,9040', 'flashing': '9061', 'show': []}, + 25: {"layers": '8744-8745', 'flashing': '8788', 'show': []}, + 26: {"layers": '8944-8946', 'flashing': '8949', 'show': []}, +}; + +var congratSteps = parseList('1-17'); - var mainSteps=[1,4,6,8,10,12,14,16]; - $.each(mainSteps,function(k,v){ - $("#mainsteps").append('

'); +$(function () { + $.each(mainSteps, function (k, v) { + $("#mainsteps").append(''); }) + + setTimeout(function () { + $.each(parseList('9315-9318'), function (k, v) { + $("#e-" + v).remove(); + }) + + $.each(parseList('8603,8601,3795,3807,8598,8594'), function (k, v) { + $("#e-" + v).css({transform: 'translateY(140px)'}); + }); + + for (var i = 19; i <= 26; i++) { + $.each(parseList(STEPS[i].layers), function (k, v) { + $("#e-" + v).css('fill', '#666'); + }); + } + }, 200); + + pJquery(fluidbook).on('fluidbook.link.click', function (e, linkId) { - if (linkId.toString().indexOf('m1s') === -1) { + if (linkId.toString().indexOf('m2s') === -1) { return; } var enabledStep = parseFloat(linkId.toString().substring(3)); setStep(enabledStep); }); - if (currentFlashing == 1) { - try { - fluidbook.links.triggerLinkById('m1start'); - } catch (e) { - console.log(e); + + try { + currentFlashing = parseInt(fluidbook.cache.get('map2_current_flashing', 1).toString()); + completedSteps = fluidbook.cache.get('map2_completed_steps', []).sort(); + if (completedSteps.length === NB_STEPS) { + _end(); + } else if (congratSteps.diff(completedSteps).length === 0) { + completedPart1 = true; + _congratulations(); } + } catch (e) { + console.log(e); } + $.each(STEPS, function (step, data) { + $.each(parseList(data.show), function (k, id) { + $("#e-" + id).addClass('hidden'); + }); + $.each(parseList(data.layers), function (k, id) { + $("#e-" + id).addClass('disabled'); + }); + }); + + + setFlashing(currentFlashing); + + $.each(completedSteps, function (k, s) { + setStep(s); + }) + + setTimeout(function () { + $("#illu").css('opacity', 1); + }, 300) }); function setStep(s) { @@ -32,17 +112,172 @@ function setStep(s) { if (STEPS[s] === undefined || STEPS[s] === null) { return; } + $.each(parseList(STEPS[s].layers), function (k, id) { + $("#e-" + id).removeClass('disabled').removeClass('flashing'); + }); + $.each(parseList(STEPS[s].show), function (k, id) { + $("#e-" + id).removeClass('hidden'); + }); + if (STEPS[s].e !== undefined) { + $("#" + STEPS[s].e).removeClass('hidden').removeClass('flashing').addClass('enabled'); + } + + if (completedSteps.indexOf(s) === -1) { + completedSteps.push(s); + + try { + fluidbook.cache.set('map2_completed_steps', completedSteps); + } catch (e) { + console.log(e); + } + if (completedSteps.length === NB_STEPS) { + end(s); + } else if (congratSteps.diff(completedSteps).length === 0) { + congratulations(s); + } + } + + + if (currentFlashing === s) { + for (var i = s + 1; s <= 27; i++) { + if (i === 18 || i === 27 || completedSteps.indexOf(i) >= 0) { + continue; + } + setFlashing(i); + break; + } + + } + } -function approved() { +function end(s) { + if (!isPopupStep(s)) { + return _end(); + } else { + pJquery(fluidbook).one('fluidbook.view.close.all', function () { + _end(); + }); + } +} +function _end() { + setTimeout(function () { + fluidbook.links.triggerLinkById('m2end'); + }, 1000); } -function congratulations() { +function setFlashing(s, cancel) { + if (cancel === undefined) { + cancel = true; + } + if (cancel === true) { + $(".flashing").removeClass('.flashing'); + } + currentFlashing = s; + try { + fluidbook.cache.set('map2_current_flashing', s); + } catch (e) { + console.log(e); + } + + if (STEPS[s] === undefined || STEPS[s] === null) { + return; + } + + $.each(parseList(STEPS[s].layers), function (k, id) { + $("#e-" + id).removeClass('disabled').addClass('flashing'); + }); + + + $.each(parseList(STEPS[s].flashing), function (k, id) { + $("#e-" + id).removeClass('disabled').addClass('flashing'); + }); + if (STEPS[s].e !== undefined) { + $("#" + STEPS[s].e).removeClass('hidden').addClass('flashing'); + } } -function setFlashing(s) { -} \ No newline at end of file +function isPopupStep(s) { + return [2, 3, 5, 6, 7, 9, 11, 13, 15, 17].indexOf(s) >= 0; +} + +function congratulations(s) { + if (!isPopupStep(s)) { + _congratulations(); + } else { + pJquery(fluidbook).one('fluidbook.view.close.all', function () { + _congratulations(); + + }); + } +} + +function _congratulations() { + if (fluidbook.cache.get('congratSeen', 0) == 1) { + return; + } + setTimeout(function () { + try { + fluidbook.cache.set('congratSeen', 1) + fluidbook.links.triggerLinkById('m2congrats'); + } catch (e) { + + } + console.log('trigger m2congrats'); + }, 500); + + +} + +function parseList(list) { + if (typeof list === 'number') { + return [list]; + } + if (typeof list === "string") { + return parseRange(list); + } + var res = []; + $.each(list, function (k, v) { + res = res.concat(parseRange(v)); + }); + return res; +} + +Array.prototype.diff = function (a) { + return this.filter(function (i) { + return a.indexOf(i) < 0; + }); +}; + +function parseRange(string) { + let res = []; + let m; + + for (let str of string.split(",").map((str) => str.trim())) { + // just a number + if (/^-?\d+$/.test(str)) { + res.push(parseInt(str, 10)); + } else if ((m = str.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/))) { + // 1-5 or 1..5 (equivalent) or 1...5 (doesn't include 5) + let [_, lhs, sep, rhs] = m; + + if (lhs && rhs) { + lhs = parseInt(lhs); + rhs = parseInt(rhs); + const incr = lhs < rhs ? 1 : -1; + + // Make it inclusive by moving the right 'stop-point' away by one. + if (sep === "-" || sep === ".." || sep === "\u2025") rhs += incr; + + for (let i = lhs; i !== rhs; i += incr) res.push(i); + } + } + } + + return res; +} + diff --git a/PPD/Map2/map2.less b/PPD/Map2/map2.less index d4decc5..31cd9a0 100644 --- a/PPD/Map2/map2.less +++ b/PPD/Map2/map2.less @@ -1,19 +1,47 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + @w: 1190.55px; @h: 419.528px; -#guide, #mainsteps { +#illu, #mainsteps { position: absolute; top: 0; left: 0; - width: @w; - height: @h; } -#guide { +#illu { z-index: 0; + transition: opacity 300ms; +} + +.hidden { + opacity: 0 !important; +} + +.flashing { + animation: flashing 2s linear infinite; +} + +@keyframes flashing { + from { + opacity: 0.3 + } + 50% { + opacity: 1 + } + to { + opacity: 0.3; + } } #mainsteps { + width: @w; + height: @h; z-index: 1; + pointer-events: none; > div { position: absolute; @@ -22,49 +50,67 @@ transform-origin: 0 0; transform: scale(0.31); + .red { + display: block; + position: absolute; + width: 80px; + height: 80px; + bottom: -26px; + left: calc(50% - 20px); + background-position: 0 0; + background-size: 100% 100%; + background-image: url("red.svg"); + z-index: 2; + } + img { display: block; } - &#s1{ + &#s1 { left: 541px; top: 338px; } - &#s4{ + &#s4 { left: 658px; top: 302px; } - &#s6{ + &#s6 { left: 744px; top: 383px; + + .red{ + bottom: 9px; + left: calc(50% - 74px); + } } - &#s8{ + &#s8 { left: 881px; top: 342px; } - &#s10{ + &#s10 { left: 806px; top: 231px; transform: scale(0.325, 0.31); } - &#s12{ + &#s12 { left: 907px; top: 163px; transform: scale(0.29); } - &#s14{ + &#s14 { left: 1019px; top: 236px; } - &#s16{ + &#s16 { left: 1115px; top: 310px; } diff --git a/PPD/Map2/red.svg b/PPD/Map2/red.svg new file mode 100644 index 0000000..5523872 --- /dev/null +++ b/PPD/Map2/red.svg @@ -0,0 +1,29 @@ + + +