lido-player 0.0.2-beta-13 → 0.0.2-beta-15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/cjs/{decode-BunxKYHJ.js → decode-xNTgi2vl.js} +1 -1
  2. package/dist/cjs/{index-1rmY-0pT.js → index-BFTVvr1n.js} +32 -26
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/lido-avatar_22.cjs.entry.js +3 -3
  5. package/dist/collection/components/shape/lido-shape.css +34 -3
  6. package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js +5 -5
  7. package/dist/collection/utils/utils.js +7 -5
  8. package/dist/collection/utils/utilsHandlers/animationHandler.js +25 -21
  9. package/dist/components/index.js +1 -1
  10. package/dist/components/lido-home.js +1 -1
  11. package/dist/components/lido-root.js +1 -1
  12. package/dist/components/lido-shape.js +1 -1
  13. package/dist/components/{p-Dy_6oCxD.js → p-BSV5U72F.js} +1 -1
  14. package/dist/components/{p-D_Q6Oy7S.js → p-CbZUFX8q.js} +2 -2
  15. package/dist/esm/{decode-BbicjSTs.js → decode-DyBLrL5N.js} +1 -1
  16. package/dist/esm/{index-CpcvWGPL.js → index-B7s7KKj1.js} +32 -26
  17. package/dist/esm/index.js +1 -1
  18. package/dist/esm/lido-avatar_22.entry.js +3 -3
  19. package/dist/lido-player/index.esm.js +1 -1
  20. package/dist/lido-player/lido-player.esm.js +1 -1
  21. package/dist/lido-player/{p-db425c95.entry.js → p-05fff653.entry.js} +2 -2
  22. package/dist/lido-player/p-CofY42mG.js +1 -0
  23. package/dist/lido-player/{p-CuR9-3Sm.js → p-Detap4vV.js} +1 -1
  24. package/package.json +1 -1
  25. package/dist/lido-player/p-B1uwYUL1.js +0 -1
package/dist/cjs/{decode-BunxKYHJ.js → decode-xNTgi2vl.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-1rmY-0pT.js');
3
+ var index = require('./index-BFTVvr1n.js');
4
4
 
5
5
  function _mergeNamespaces(n, m) {
6
6
  m.forEach(function (e) {
package/dist/cjs/{index-1rmY-0pT.js → index-BFTVvr1n.js} RENAMED
@@ -263,7 +263,7 @@ function balanceResult(container, objectiveString) {
263
263
  const tempVanishedValues = [];
264
264
  function dragDropAnimation(container, dragElement, dropElement) {
265
265
  container.style.pointerEvents = "none";
266
- setTimeout(() => {
266
+ setTimeout(async () => {
267
267
  var _a, _b, _c;
268
268
  const div = document.createElement('div');
269
269
  container.append(div);
@@ -293,27 +293,31 @@ function dragDropAnimation(container, dragElement, dropElement) {
293
293
  div.appendChild(dragElement);
294
294
  div.appendChild(dropElement);
295
295
  dropElement.classList.remove('empty');
296
+ const objective = container.getAttribute('objective');
297
+ const isObjectiveComplete = !!objective &&
298
+ tempVanishedValues.map(v => v.trim()).sort().join(',') ===
299
+ objective.split(',').map(v => v.trim()).sort().join(',');
300
+ if (dropElement.getAttribute('type') === 'drop') {
301
+ const dropOnCorrect = dropElement.getAttribute('onCorrect') || '';
302
+ await executeActions(dropOnCorrect, dropElement, dragElement);
303
+ }
304
+ if (isObjectiveComplete) {
305
+ const containerOnCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
306
+ await executeActions(containerOnCorrect, container);
307
+ }
308
+ dragElement.classList.remove('zoom-fade-in');
309
+ dropElement.classList.remove('zoom-fade-in');
310
+ dragElement.classList.add('zoom-fade-out');
311
+ dropElement.classList.add('zoom-fade-out');
296
312
  setTimeout(() => {
297
- dragElement.classList.remove('zoom-fade-in');
298
- dropElement.classList.remove('zoom-fade-in');
299
- dragElement.classList.add('zoom-fade-out');
300
- dropElement.classList.add('zoom-fade-out');
301
- setTimeout(() => {
302
- div.remove();
303
- container.style.pointerEvents = 'auto';
304
- const objective = container.getAttribute('objective');
305
- if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
306
- (async () => {
307
- // isCorrect=true;
308
- const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
309
- await executeActions(onCorrect, container);
310
- calculateScore();
311
- triggerNextContainer();
312
- tempVanishedValues.length = 0;
313
- })();
314
- }
315
- }, 800); // match animation duration
316
- }, 2000); // stay for 2 seconds
313
+ div.remove();
314
+ container.style.pointerEvents = 'auto';
315
+ if (isObjectiveComplete) {
316
+ calculateScore();
317
+ triggerNextContainer();
318
+ tempVanishedValues.length = 0;
319
+ }
320
+ }, 800); // match animation duration
317
321
  }, 250);
318
322
  }
319
323
 
@@ -72957,7 +72961,7 @@ const calculateScore = () => {
72957
72961
  gameScore.wrongMoves = 0;
72958
72962
  };
72959
72963
  async function onActivityComplete(dragElement, dropElement) {
72960
- var _a;
72964
+ var _a, _b;
72961
72965
  const container = document.getElementById(LidoContainer);
72962
72966
  if (!container)
72963
72967
  return;
@@ -72972,7 +72976,9 @@ async function onActivityComplete(dragElement, dropElement) {
72972
72976
  console.log("Right Moves : ", gameScore.rightMoves);
72973
72977
  console.log("Wrong Moves : ", gameScore.wrongMoves);
72974
72978
  }
72975
- const onCorrect = dropElement.getAttribute('onCorrect');
72979
+ const onCorrect = ((_a = container.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
72980
+ ? ''
72981
+ : dropElement.getAttribute('onCorrect');
72976
72982
  if (onCorrect) {
72977
72983
  await executeActions(onCorrect, dropElement, dragElement);
72978
72984
  }
@@ -72997,7 +73003,7 @@ async function onActivityComplete(dragElement, dropElement) {
72997
73003
  const sortedValues = getSortedValuesArrayFromMap(dragScore);
72998
73004
  container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
72999
73005
  //localStorage
73000
- let drag = JSON.parse((_a = localStorage.getItem(DragMapKey)) !== null && _a !== void 0 ? _a : '{}');
73006
+ let drag = JSON.parse((_b = localStorage.getItem(DragMapKey)) !== null && _b !== void 0 ? _b : '{}');
73001
73007
  const index = dropElement.getAttribute('tab-index');
73002
73008
  if (!drag[index]) {
73003
73009
  drag[index] = [];
@@ -73081,7 +73087,7 @@ const storeActivityScore = (score) => {
73081
73087
  }
73082
73088
  };
73083
73089
  const handleShowCheck = () => {
73084
- var _a, _b;
73090
+ var _a, _b, _c;
73085
73091
  const container = document.getElementById(LidoContainer);
73086
73092
  const objectiveString = container['objective'];
73087
73093
  const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
@@ -73095,7 +73101,7 @@ const handleShowCheck = () => {
73095
73101
  (_b = checkButton === null || checkButton === void 0 ? void 0 : checkButton.classList) === null || _b === void 0 ? void 0 : _b.remove('lido-disable-check-button');
73096
73102
  }
73097
73103
  else {
73098
- if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && !container.querySelector("[type='category']")) {
73104
+ if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && !container.querySelector("[type='category']") && ((_c = container.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== DropMode.EnableAnimation.toLowerCase()) {
73099
73105
  validateObjectiveStatus();
73100
73106
  }
73101
73107
  }
package/dist/cjs/index.cjs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-1rmY-0pT.js');
3
+ var index = require('./index-BFTVvr1n.js');
4
4
  require('./index-Dy19zuTX.js');
5
5
 
6
6
 
package/dist/cjs/lido-avatar_22.cjs.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var index = require('./index-Dy19zuTX.js');
4
- var index$1 = require('./index-1rmY-0pT.js');
4
+ var index$1 = require('./index-BFTVvr1n.js');
5
5
 
6
6
  var rive$1 = {exports: {}};
7
7
 
@@ -12952,7 +12952,7 @@ const LidoHome = class {
12952
12952
  }
12953
12953
  // Pure-JS fallback (no wasm asset required)
12954
12954
  try {
12955
- const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BunxKYHJ.js'); }).then(function (n) { return n.decode; });
12955
+ const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-xNTgi2vl.js'); }).then(function (n) { return n.decode; });
12956
12956
  const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
12957
12957
  if (typeof brotliDecompressBuffer !== 'function') {
12958
12958
  throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');
@@ -17364,7 +17364,7 @@ const LidoRow = class {
17364
17364
  };
17365
17365
  LidoRow.style = lidoRowCss();
17366
17366
 
17367
- const lidoShapeCss = () => `.lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezoid{width:var(--trapezoidWidth);height:var(--trapezoidHeight);background-color:var(--bgColor);clip-path:polygon( 20% 0%, 80% 0%, 100% 100%, 0% 100% )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon( 15% 10%, 25% 4%, 35% 1%, 50% 0%, 65% 1%, 75% 4%, 85% 10%, 50% 100% )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY( 0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0), radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0), red}`;
17367
+ const lidoShapeCss = () => `.lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezium{width:var(--trapeziumWidth);height:var(--trapeziumHeight);background-color:var(--bgColor);clip-path:polygon( 20% 0%, 80% 0%, 100% 100%, 0% 100% )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon( 15% 10%, 25% 4%, 35% 1%, 50% 0%, 65% 1%, 75% 4%, 85% 10%, 50% 100% )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY( 0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0), radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0), red}.lido-sphere{position:relative;width:var(--width);height:var(--width);border-radius:50%;background:radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%), radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);box-shadow:inset -22px -26px 40px rgba(5, 0, 70, 0.38), inset 14px 14px 24px rgba(255, 255, 255, 0.05), 0 4px 2px rgba(0, 0, 0, 0.78);overflow:visible}.lido-sphere::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:16%;border-radius:50%;border-top:2px dashed rgba(0, 0, 0, 0.65);border-bottom:3px solid rgba(0, 0, 0, 0.85);box-sizing:border-box;transform:translate(-50%, -50%);pointer-events:none}`;
17368
17368
 
17369
17369
  const LidoShape = class {
17370
17370
  constructor(hostRef) {
package/dist/collection/components/shape/lido-shape.css CHANGED
@@ -55,9 +55,9 @@
55
55
  transform: skew(20deg);
56
56
  }
57
57
 
58
- .lido-trapezoid {
59
- width: var(--trapezoidWidth);
60
- height: var(--trapezoidHeight);
58
+ .lido-trapezium {
59
+ width: var(--trapeziumWidth);
60
+ height: var(--trapeziumHeight);
61
61
  background-color: var(--bgColor);
62
62
  clip-path: polygon(
63
63
  20% 0%, /* top left */
@@ -183,4 +183,35 @@
183
183
  radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),
184
184
  radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),
185
185
  red;
186
+ }
187
+
188
+ /* sphere */
189
+ .lido-sphere {
190
+ position: relative;
191
+ width: var(--width);
192
+ height: var(--width);
193
+ border-radius: 50%;
194
+ background:
195
+ radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),
196
+ radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);
197
+ box-shadow:
198
+ inset -22px -26px 40px rgba(5, 0, 70, 0.38),
199
+ inset 14px 14px 24px rgba(255, 255, 255, 0.05),
200
+ 0 4px 2px rgba(0, 0, 0, 0.78);
201
+ overflow: visible;
202
+ }
203
+
204
+ .lido-sphere::after {
205
+ content: '';
206
+ position: absolute;
207
+ top: 50%;
208
+ left: 50%;
209
+ width: 100%;
210
+ height: 16%;
211
+ border-radius: 50%;
212
+ border-top: 2px dashed rgba(0, 0, 0, 0.65);
213
+ border-bottom: 3px solid rgba(0, 0, 0, 0.85);
214
+ box-sizing: border-box;
215
+ transform: translate(-50%, -50%);
216
+ pointer-events: none;
186
217
  }
package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js CHANGED
@@ -149,7 +149,7 @@ function getContainerXml(args) {
149
149
 
150
150
  ${(args.dropimg1.length === 0 && args.droptext1.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
151
151
  <lido-cell layout="row" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
152
- <lido-cell id="image1" show-speak-icon="true" audio="${args.drop1Audio}" value="${args.correct1}" tab-index="1" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';">
152
+ <lido-cell id="image1" show-speak-icon="true" audio="${args.drop1Audio}" value="${args.correct1}" tab-index="1" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" onCorrect="this.speak='true';option1.speak='true';" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';">
153
153
  ${!args.dropimg1 || args.dropimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px" visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg1}"></lido-image>`}
154
154
 
155
155
  ${!args.droptext1 || args.droptext1 === "" ? '' : `<lido-text visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.36px,portrait.36px" string="${args.droptext1}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
@@ -160,7 +160,7 @@ function getContainerXml(args) {
160
160
 
161
161
  ${(args.dropimg2.length === 0 && args.droptext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
162
162
  <lido-cell layout="row" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
163
- <lido-cell id="image2" show-speak-icon="true" audio="${args.drop2Audio}" value="${args.correct2}" tab-index="2" isAllowOnlyOneDrop="true" disable-edit="true" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
163
+ <lido-cell id="image2" show-speak-icon="true" audio="${args.drop2Audio}" value="${args.correct2}" tab-index="2" isAllowOnlyOneDrop="true" disable-edit="true" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drop" onCorrect="this.speak='true';option2.speak='true';" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
164
164
  ${!args.dropimg2 || args.dropimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px" visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg2}"></lido-image>`}
165
165
 
166
166
  ${!args.droptext2 || args.droptext2 === "" ? '' : `<lido-text visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.36px,portrait.36px" string="${args.droptext2}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
@@ -170,7 +170,7 @@ function getContainerXml(args) {
170
170
 
171
171
  ${(args.dropimg3.length === 0 && args.droptext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.50px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='5px';">
172
172
  <lido-cell layout="row" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
173
- <lido-cell type="drop" show-speak-icon="true" audio="${args.drop3Audio}" id="image3" tab-index="3" isAllowOnlyOneDrop="true" disable-edit="true" value="${args.correct3}" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
173
+ <lido-cell type="drop" onCorrect="this.speak='true';option3.speak='true';" show-speak-icon="true" audio="${args.drop3Audio}" id="image3" tab-index="3" isAllowOnlyOneDrop="true" disable-edit="true" value="${args.correct3}" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
174
174
  ${!args.dropimg3 || args.dropimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px" visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg3}"></lido-image>`}
175
175
 
176
176
  ${!args.droptext3 || args.droptext3 === "" ? '' : `<lido-text visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.36px,portrait.36px" string="${args.droptext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
@@ -181,7 +181,7 @@ function getContainerXml(args) {
181
181
 
182
182
  ${(args.dropimg4.length === 0 && args.droptext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
183
183
  <lido-cell layout="row" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
184
- <lido-cell id="image4" show-speak-icon="true" audio="${args.drop4Audio}" value="${args.correct4}" isAllowOnlyOneDrop="true" disable-edit="true" tab-index="4" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.178px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
184
+ <lido-cell id="image4" show-speak-icon="true" audio="${args.drop4Audio}" value="${args.correct4}" isAllowOnlyOneDrop="true" disable-edit="true" tab-index="4" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.178px" type="drop" onCorrect="this.speak='true';option4.speak='true';" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
185
185
  ${!args.dropimg4 || args.dropimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px" visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg4}"></lido-image>`}
186
186
 
187
187
  ${!args.droptext4 || args.droptext4 === "" ? '' : `<lido-text visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.36px,portrait.36px" string="${args.droptext4}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
@@ -191,7 +191,7 @@ function getContainerXml(args) {
191
191
 
192
192
  ${(args.dropimg5.length === 0 && args.droptext5.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
193
193
  <lido-cell layout="row" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
194
- <lido-cell type="drop" show-speak-icon="true" audio="${args.drop5Audio}" id="image5" value="${args.correct5}" tab-index="5" isAllowOnlyOneDrop="true" disable-edit="true" width="landscape.200px,portrait.178px" height="landscape.268px,portrait.240px" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
194
+ <lido-cell type="drop" onCorrect="this.speak='true';option5.speak='true';" show-speak-icon="true" audio="${args.drop5Audio}" id="image5" value="${args.correct5}" tab-index="5" isAllowOnlyOneDrop="true" disable-edit="true" width="landscape.200px,portrait.178px" height="landscape.268px,portrait.240px" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';">
195
195
  ${!args.dropimg5 || args.dropimg5.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px" visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg5}"></lido-image>`}
196
196
 
197
197
  ${!args.droptext5 || args.droptext5 === "" ? '' : `<lido-text visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.36px,portrait.36px" string="${args.droptext5}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
package/dist/collection/utils/utils.js CHANGED
@@ -602,7 +602,7 @@ export const calculateScore = () => {
602
602
  gameScore.wrongMoves = 0;
603
603
  };
604
604
  export async function onActivityComplete(dragElement, dropElement) {
605
- var _a;
605
+ var _a, _b;
606
606
  const container = document.getElementById(LidoContainer);
607
607
  if (!container)
608
608
  return;
@@ -617,7 +617,9 @@ export async function onActivityComplete(dragElement, dropElement) {
617
617
  console.log("Right Moves : ", gameScore.rightMoves);
618
618
  console.log("Wrong Moves : ", gameScore.wrongMoves);
619
619
  }
620
- const onCorrect = dropElement.getAttribute('onCorrect');
620
+ const onCorrect = ((_a = container.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
621
+ ? ''
622
+ : dropElement.getAttribute('onCorrect');
621
623
  if (onCorrect) {
622
624
  await executeActions(onCorrect, dropElement, dragElement);
623
625
  }
@@ -642,7 +644,7 @@ export async function onActivityComplete(dragElement, dropElement) {
642
644
  const sortedValues = getSortedValuesArrayFromMap(dragScore);
643
645
  container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
644
646
  //localStorage
645
- let drag = JSON.parse((_a = localStorage.getItem(DragMapKey)) !== null && _a !== void 0 ? _a : '{}');
647
+ let drag = JSON.parse((_b = localStorage.getItem(DragMapKey)) !== null && _b !== void 0 ? _b : '{}');
646
648
  const index = dropElement.getAttribute('tab-index');
647
649
  if (!drag[index]) {
648
650
  drag[index] = [];
@@ -726,7 +728,7 @@ const storeActivityScore = (score) => {
726
728
  }
727
729
  };
728
730
  export const handleShowCheck = () => {
729
- var _a, _b;
731
+ var _a, _b, _c;
730
732
  const container = document.getElementById(LidoContainer);
731
733
  const objectiveString = container['objective'];
732
734
  const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
@@ -740,7 +742,7 @@ export const handleShowCheck = () => {
740
742
  (_b = checkButton === null || checkButton === void 0 ? void 0 : checkButton.classList) === null || _b === void 0 ? void 0 : _b.remove('lido-disable-check-button');
741
743
  }
742
744
  else {
743
- if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && !container.querySelector("[type='category']")) {
745
+ if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && !container.querySelector("[type='category']") && ((_c = container.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== DropMode.EnableAnimation.toLowerCase()) {
744
746
  validateObjectiveStatus();
745
747
  }
746
748
  }
package/dist/collection/utils/utilsHandlers/animationHandler.js CHANGED
@@ -3,7 +3,7 @@ import { calculateScore, executeActions, triggerNextContainer } from "../utils";
3
3
  const tempVanishedValues = [];
4
4
  export function dragDropAnimation(container, dragElement, dropElement) {
5
5
  container.style.pointerEvents = "none";
6
- setTimeout(() => {
6
+ setTimeout(async () => {
7
7
  var _a, _b, _c;
8
8
  const div = document.createElement('div');
9
9
  container.append(div);
@@ -33,26 +33,30 @@ export function dragDropAnimation(container, dragElement, dropElement) {
33
33
  div.appendChild(dragElement);
34
34
  div.appendChild(dropElement);
35
35
  dropElement.classList.remove('empty');
36
+ const objective = container.getAttribute('objective');
37
+ const isObjectiveComplete = !!objective &&
38
+ tempVanishedValues.map(v => v.trim()).sort().join(',') ===
39
+ objective.split(',').map(v => v.trim()).sort().join(',');
40
+ if (dropElement.getAttribute('type') === 'drop') {
41
+ const dropOnCorrect = dropElement.getAttribute('onCorrect') || '';
42
+ await executeActions(dropOnCorrect, dropElement, dragElement);
43
+ }
44
+ if (isObjectiveComplete) {
45
+ const containerOnCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
46
+ await executeActions(containerOnCorrect, container);
47
+ }
48
+ dragElement.classList.remove('zoom-fade-in');
49
+ dropElement.classList.remove('zoom-fade-in');
50
+ dragElement.classList.add('zoom-fade-out');
51
+ dropElement.classList.add('zoom-fade-out');
36
52
  setTimeout(() => {
37
- dragElement.classList.remove('zoom-fade-in');
38
- dropElement.classList.remove('zoom-fade-in');
39
- dragElement.classList.add('zoom-fade-out');
40
- dropElement.classList.add('zoom-fade-out');
41
- setTimeout(() => {
42
- div.remove();
43
- container.style.pointerEvents = 'auto';
44
- const objective = container.getAttribute('objective');
45
- if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
46
- (async () => {
47
- // isCorrect=true;
48
- const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
49
- await executeActions(onCorrect, container);
50
- calculateScore();
51
- triggerNextContainer();
52
- tempVanishedValues.length = 0;
53
- })();
54
- }
55
- }, 800); // match animation duration
56
- }, 2000); // stay for 2 seconds
53
+ div.remove();
54
+ container.style.pointerEvents = 'auto';
55
+ if (isObjectiveComplete) {
56
+ calculateScore();
57
+ triggerNextContainer();
58
+ tempVanishedValues.length = 0;
59
+ }
60
+ }, 800); // match animation duration
57
61
  }, 250);
58
62
  }