lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

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 (143) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/lido-avatar_22.cjs.entry.js +199 -73
  3. package/dist/cjs/lido-player.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{utils-dc02d753.js → utils-3c1ce74e.js} +236 -101
  6. package/dist/collection/components/avatar/lido-avatar.js +1 -1
  7. package/dist/collection/components/canvas/lido-canvas.css +5 -8
  8. package/dist/collection/components/canvas/lido-canvas.js +2 -2
  9. package/dist/collection/components/cell/lido-cell.js +1 -1
  10. package/dist/collection/components/column/lido-col.js +1 -1
  11. package/dist/collection/components/container/lido-container.js +24 -2
  12. package/dist/collection/components/flashCard/lido-flash-card.js +1 -1
  13. package/dist/collection/components/home/lido-home.css +4 -0
  14. package/dist/collection/components/home/lido-home.js +27 -3
  15. package/dist/collection/components/mathMatrix/lido-math-matrix.js +14 -14
  16. package/dist/collection/components/position/lido-pos.js +1 -1
  17. package/dist/collection/components/random/lido-random.js +1 -1
  18. package/dist/collection/components/row/lido-row.js +1 -1
  19. package/dist/collection/components/shape/lido-shape.js +1 -1
  20. package/dist/collection/components/trace/lido-trace.js +122 -47
  21. package/dist/collection/components/wrap/lido-wrap.js +1 -1
  22. package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js +26 -25
  23. package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js +3 -1
  24. package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js +1 -1
  25. package/dist/collection/stories/Templates/arrangeLetters/arrangeLetters.stories.js +1 -1
  26. package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
  27. package/dist/collection/stories/Templates/blender/blender.stories.js +100 -0
  28. package/dist/collection/stories/Templates/bubbleType/bubbleType.stories.js +1 -1
  29. package/dist/collection/stories/Templates/calculator/calculator.stories.js +6 -2
  30. package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js +1 -1
  31. package/dist/collection/stories/Templates/checkerBlock/checkerBlock.stories.js +1 -1
  32. package/dist/collection/stories/Templates/create-sentence/createSentence.stories.js +1 -1
  33. package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js +3 -2
  34. package/dist/collection/stories/Templates/fillBlank/fill-blank.stories.js +1 -1
  35. package/dist/collection/stories/Templates/foodJar/food-jar.stories.js +3 -1
  36. package/dist/collection/stories/Templates/grid/grid.stories.js +5 -1
  37. package/dist/collection/stories/Templates/gridGame/grid-game.stories.js +1 -1
  38. package/dist/collection/stories/Templates/jumpSentence/jumpSentence.stories.js +4 -2
  39. package/dist/collection/stories/Templates/letterboard/letterboard.stories.js +1 -1
  40. package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js +3 -1
  41. package/dist/collection/stories/Templates/multipleOption/mcqWithQuestionImage.stories.js +4 -2
  42. package/dist/collection/stories/Templates/multipleOption/multiple-option.stories.js +1 -1
  43. package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js +1 -1
  44. package/dist/collection/stories/Templates/nimbleTable/nimbleTable.stories.js +1 -1
  45. package/dist/collection/stories/Templates/numberBoard/numberBoard.stories.js +1 -1
  46. package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +6 -4
  47. package/dist/collection/stories/Templates/numberPair/numberPair.stories.js +1 -1
  48. package/dist/collection/stories/Templates/openwindow/openwindow.stories.js +2 -2
  49. package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js +2 -2
  50. package/dist/collection/stories/Templates/order-tractor/order-tractor-ascending-order.stories.js +14 -13
  51. package/dist/collection/stories/Templates/order-tractor/order-tractor.stories.js +14 -13
  52. package/dist/collection/stories/Templates/phonic-tractor/phonic-tractor.stories.js +1 -1
  53. package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js +5 -1
  54. package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js +1 -1
  55. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracy.stories.js +1 -1
  56. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWithText.stories.js +1 -1
  57. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js +1 -1
  58. package/dist/collection/stories/Templates/reorder/reorder.stories.js +3 -1
  59. package/dist/collection/stories/Templates/rowBlocks/rowBlocks.stories.js +2 -2
  60. package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js +6 -6
  61. package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js +7 -6
  62. package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js +1 -1
  63. package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js +25 -21
  64. package/dist/collection/stories/Templates/spellDoor/spellDoor.stories.js +1 -1
  65. package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +8 -6
  66. package/dist/collection/stories/Templates/total/total.stories.js +1 -1
  67. package/dist/collection/stories/Templates/writeCard/writeCard.stories.js +1 -1
  68. package/dist/collection/stories/Templates/writeLetter/writeLetter.stories.js +2 -2
  69. package/dist/collection/stories/Templates/writeNumber/writeNumber.stories.js +6 -6
  70. package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +1 -1
  71. package/dist/collection/stories/Templates/writeWord/writeWord.stories.js +7 -6
  72. package/dist/collection/utils/utils.js +155 -27
  73. package/dist/collection/utils/utilsHandlers/animationHandler.js +38 -0
  74. package/dist/collection/utils/utilsHandlers/clickHandler.js +5 -1
  75. package/dist/collection/utils/utilsHandlers/dragDropHandler.js +29 -64
  76. package/dist/collection/utils/utilsHandlers/slideHandler.js +7 -6
  77. package/dist/collection/utils/utilsHandlers/sortHandler.js +3 -5
  78. package/dist/components/index.js +1 -1
  79. package/dist/components/lido-avatar.js +1 -1
  80. package/dist/components/lido-balance.js +1 -1
  81. package/dist/components/lido-calculator.js +1 -1
  82. package/dist/components/lido-canvas.js +2 -2
  83. package/dist/components/lido-cell.js +1 -1
  84. package/dist/components/lido-col.js +1 -1
  85. package/dist/components/lido-container.js +1 -1
  86. package/dist/components/lido-flash-card.js +1 -1
  87. package/dist/components/lido-float.js +1 -1
  88. package/dist/components/lido-home.js +1 -1
  89. package/dist/components/lido-image.js +1 -1
  90. package/dist/components/lido-keyboard.js +1 -1
  91. package/dist/components/lido-math-matrix.js +1 -1
  92. package/dist/components/lido-pos.js +1 -1
  93. package/dist/components/lido-random.js +1 -1
  94. package/dist/components/lido-root.js +23 -23
  95. package/dist/components/lido-row.js +1 -1
  96. package/dist/components/lido-shape.js +1 -1
  97. package/dist/components/lido-slide-fill.js +1 -1
  98. package/dist/components/lido-text.js +1 -1
  99. package/dist/components/lido-trace.js +1 -1
  100. package/dist/components/lido-wrap.js +1 -1
  101. package/dist/components/{p-56c8f3da.js → p-004adc43.js} +3 -3
  102. package/dist/components/{p-c8815e84.js → p-057fb7b8.js} +48 -24
  103. package/dist/components/{p-bb907e43.js → p-0733b277.js} +2 -2
  104. package/dist/components/{p-6ba0f1af.js → p-09b3b152.js} +1 -1
  105. package/dist/components/{p-74b90a9c.js → p-23549651.js} +8 -8
  106. package/dist/components/{p-d7693f47.js → p-3e8ae1c5.js} +123 -48
  107. package/dist/components/{p-6be6c5eb.js → p-3f0e4436.js} +2 -2
  108. package/dist/components/{p-d0131159.js → p-511377d2.js} +236 -102
  109. package/dist/components/{p-a8724f06.js → p-561908ec.js} +2 -2
  110. package/dist/components/{p-1c84cf65.js → p-567983a9.js} +13 -7
  111. package/dist/components/{p-b89371ac.js → p-6beee44b.js} +1 -1
  112. package/dist/components/{p-1f3c2783.js → p-71ded596.js} +2 -2
  113. package/dist/components/{p-0fbeb3a1.js → p-73e3f0f4.js} +12 -6
  114. package/dist/components/{p-b7efadad.js → p-875c1411.js} +2 -2
  115. package/dist/components/{p-4fd6b588.js → p-8774f517.js} +2 -2
  116. package/dist/components/{p-04e904b5.js → p-90f7dd48.js} +1 -1
  117. package/dist/components/{p-caa05d1e.js → p-92b9ae9e.js} +2 -2
  118. package/dist/components/{p-e9548986.js → p-9ea1a67d.js} +26 -4
  119. package/dist/components/{p-bef96764.js → p-b3e67e7f.js} +2 -2
  120. package/dist/components/{p-988477ad.js → p-cca545f9.js} +2 -2
  121. package/dist/components/{p-d3f7d561.js → p-d2fe2bb6.js} +2 -2
  122. package/dist/components/{p-12432f23.js → p-d568d595.js} +1 -1
  123. package/dist/components/{p-62d2a5b3.js → p-df1af62c.js} +2 -2
  124. package/dist/esm/index.js +1 -1
  125. package/dist/esm/lido-avatar_22.entry.js +199 -73
  126. package/dist/esm/lido-player.js +1 -1
  127. package/dist/esm/loader.js +1 -1
  128. package/dist/esm/{utils-b5eb2360.js → utils-eefe4a1c.js} +236 -102
  129. package/dist/lido-player/index.esm.js +1 -1
  130. package/dist/lido-player/lido-player.esm.js +1 -1
  131. package/dist/lido-player/p-4d9ad047.entry.js +1 -0
  132. package/dist/lido-player/{p-9fd87d44.js → p-589fc3b8.js} +2 -2
  133. package/dist/types/components/canvas/lido-canvas.d.ts +1 -1
  134. package/dist/types/components/container/lido-container.d.ts +1 -0
  135. package/dist/types/components/home/lido-home.d.ts +1 -0
  136. package/dist/types/components/mathMatrix/lido-math-matrix.d.ts +0 -1
  137. package/dist/types/components/trace/lido-trace.d.ts +1 -0
  138. package/dist/types/components.d.ts +0 -6
  139. package/dist/types/stories/Templates/blender/blender.stories.d.ts +4 -0
  140. package/dist/types/utils/utils.d.ts +1 -1
  141. package/dist/types/utils/utilsHandlers/animationHandler.d.ts +1 -0
  142. package/package.json +1 -1
  143. package/dist/lido-player/p-e1a9c26f.entry.js +0 -1
@@ -105,6 +105,7 @@ export const initEventsForElement = async (element, type) => {
105
105
  export const executeActions = async (actionsString, thisElement, element) => {
106
106
  var _a, _b, _c, _d, _e, _f, _g;
107
107
  const actions = parseActions(actionsString);
108
+ body.style.pointerEvents = 'none';
108
109
  for (let i = 0; i < actions.length; i++) {
109
110
  const action = actions[i];
110
111
  const queriedElement = document.querySelector(action.actor);
@@ -135,7 +136,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
135
136
  const container = document.getElementById(LidoContainer);
136
137
  const containerScale = getElementScale(container);
137
138
  dragElement.style.transform = 'translate(0,0)';
138
- console.log("logg alinmatch");
139
+ console.log('logg alinmatch');
139
140
  const dropRect = dropElement.getBoundingClientRect();
140
141
  const dragRect = dragElement.getBoundingClientRect();
141
142
  const dropCenterX = dropRect.left + dropRect.width / 2;
@@ -189,7 +190,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
189
190
  if (container.getAttribute('is-continue-on-correct') !== 'true') {
190
191
  targetElement.style.pointerEvents = 'none';
191
192
  }
192
- validateObjectiveStatus();
193
+ await validateObjectiveStatus();
193
194
  break;
194
195
  }
195
196
  case 'prevBtn': {
@@ -299,8 +300,53 @@ export const executeActions = async (actionsString, thisElement, element) => {
299
300
  }
300
301
  break;
301
302
  }
302
- case 'updatedAnswer': {
303
- updatedAnswer();
303
+ case 'disableType': {
304
+ const dragEle = document.querySelector('[type="drag"]');
305
+ dragEle.removeAttribute('type');
306
+ dragEle.style.pointerEvents = 'none';
307
+ break;
308
+ }
309
+ case 'updateCountBlender': {
310
+ const allDrags = document.querySelectorAll('[type="drag"]');
311
+ let units = 0;
312
+ let tens = 0;
313
+ let hundreds = 0;
314
+ allDrags.forEach(el => {
315
+ const dropTo = el.getAttribute("drop-to");
316
+ if (dropTo === "unitsDrop")
317
+ units++;
318
+ if (dropTo === "tensDrop")
319
+ tens++;
320
+ if (dropTo === "hundredsDrop")
321
+ hundreds++;
322
+ });
323
+ const unitsValue = units * 1;
324
+ const tensValue = tens * 10;
325
+ const hundredsValue = hundreds * 100;
326
+ const totalValue = unitsValue + tensValue + hundredsValue;
327
+ // ✅ Update Lido Text Boxes
328
+ const unitsBox = document.getElementById("units");
329
+ const tensBox = document.getElementById("tens");
330
+ const hundredsBox = document.getElementById("hundreds");
331
+ if (unitsBox) {
332
+ unitsBox.setAttribute("string", unitsValue.toString());
333
+ }
334
+ if (tensBox) {
335
+ tensBox.setAttribute("string", tensValue.toString());
336
+ }
337
+ if (hundredsBox) {
338
+ hundredsBox.setAttribute("string", hundredsValue.toString());
339
+ }
340
+ console.log(`Units = ${units} → ${unitsValue}`);
341
+ console.log(`Tens = ${tens} → ${tensValue}`);
342
+ console.log(`Hundreds = ${hundreds} → ${hundredsValue}`);
343
+ console.log(`✅ Total Value = ${totalValue}`);
344
+ break;
345
+ }
346
+ case 'updateCalculatorAnswer': {
347
+ if (targetElement) {
348
+ updateCalculatorAnswer(targetElement);
349
+ }
304
350
  break;
305
351
  }
306
352
  default: {
@@ -310,6 +356,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
310
356
  }
311
357
  }
312
358
  }
359
+ body.style.pointerEvents = 'auto';
313
360
  };
314
361
  const afterDropDragHandling = (dragElement, dropElement) => {
315
362
  const container = document.getElementById(LidoContainer);
@@ -319,6 +366,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
319
366
  const isInfinite = container.getAttribute('drop-action') === DropAction.InfiniteDrop;
320
367
  if (isAppend || isInfinite) {
321
368
  setTimeout(() => {
369
+ var _a, _b;
322
370
  dragElement.style.transform = 'translate(0,0)';
323
371
  dragElement.style.transition = '';
324
372
  let dummyElement = document.createElement('div');
@@ -352,6 +400,14 @@ const afterDropDragHandling = (dragElement, dropElement) => {
352
400
  dummyElement.style.margin = '0px';
353
401
  });
354
402
  }
403
+ const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
404
+ const rowAttr = dropElement.getAttribute('dropAttr');
405
+ const dropAttr = parseProp(rowAttr, orientation); // will return stackcascade or verticalstack
406
+ if (((_a = (dropAttr)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "stackcascade" || ((_b = (dropAttr)) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "verticalstack") {
407
+ dropElement.append(dragElement);
408
+ placeElementInDropZone(dropElement, dragElement, orientation, dropAttr);
409
+ return;
410
+ }
355
411
  dropElement.parentElement.append(element);
356
412
  dragElement.style.position = 'absolute';
357
413
  dragElement.style.zIndex = '1';
@@ -364,16 +420,41 @@ const afterDropDragHandling = (dragElement, dropElement) => {
364
420
  const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
365
421
  const scaledTop = (dropCenterY - dragCenterY) / containerScale;
366
422
  dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
367
- }, 500);
423
+ }, 100);
368
424
  }
369
425
  };
426
+ // function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
427
+ // let clone = document.createElement('div') as HTMLElement;
428
+ // clone.innerHTML = originalEl.outerHTML;
429
+ // clone = clone.firstChild as HTMLElement;
430
+ // clone.setAttribute('height', originalEl.style.height);
431
+ // clone.setAttribute('width', originalEl.style.width);
432
+ // clone.setAttribute('visible', 'true');
433
+ // return clone;
434
+ // }
370
435
  function cloneElementWithComputedStyles(originalEl) {
371
- let clone = document.createElement('div');
372
- clone.innerHTML = originalEl.outerHTML;
373
- clone = clone.firstChild;
374
- clone.setAttribute('height', originalEl.style.height);
375
- clone.setAttribute('width', originalEl.style.width);
376
- clone.setAttribute('visible', 'true');
436
+ const tag = originalEl.tagName.toLowerCase();
437
+ if (tag === "lido-text") {
438
+ let clone = document.createElement('div');
439
+ clone.innerHTML = originalEl.outerHTML;
440
+ clone = clone.firstChild;
441
+ clone.setAttribute('height', originalEl.style.height);
442
+ clone.setAttribute('width', originalEl.style.width);
443
+ clone.setAttribute('visible', 'true');
444
+ return clone;
445
+ }
446
+ // ✅ For ALL other types (INCLUDING lido-image & matrix) use your simple logic
447
+ const clone = originalEl.cloneNode(false);
448
+ clone.style.width = originalEl.style.width;
449
+ clone.style.height = originalEl.style.height;
450
+ clone.style.margin = originalEl.style.margin;
451
+ clone.style.opacity = originalEl.style.opacity;
452
+ clone.style.transform = originalEl.style.transform;
453
+ clone.setAttribute("visible", "true");
454
+ clone.setAttribute("data-dummy", "true");
455
+ if (tag === "lido-math-matrix") {
456
+ clone.setAttribute('clickable', "false");
457
+ }
377
458
  return clone;
378
459
  }
379
460
  // Function to parse actions string
@@ -592,6 +673,7 @@ export const handleShowCheck = () => {
592
673
  validateObjectiveStatus();
593
674
  }
594
675
  };
676
+ const body = document.body;
595
677
  let res;
596
678
  export const validateObjectiveStatus = async () => {
597
679
  var _a, _b;
@@ -656,6 +738,7 @@ export const validateObjectiveStatus = async () => {
656
738
  if (!isContinueOnCorrect) {
657
739
  triggerNextContainer();
658
740
  await calculateScore();
741
+ triggerNextContainer();
659
742
  }
660
743
  else {
661
744
  const onInCorrect = container.getAttribute('onInCorrect');
@@ -678,16 +761,16 @@ export const triggerPrevcontainer = () => {
678
761
  export function convertUrlToRelative(url) {
679
762
  const container = document.getElementById(LidoContainer);
680
763
  const baseUrl = container.getAttribute('baseUrl');
681
- if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
764
+ if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
682
765
  return url;
683
766
  }
684
- else if (baseUrl) {
685
- const newUrl = !url.startsWith('/') ? url : url.substring(1);
686
- return baseUrl + (baseUrl.endsWith('/') ? newUrl : '/' + newUrl);
687
- }
688
- else {
689
- return getAssetPath(url);
767
+ if (baseUrl) {
768
+ const newUrl = url.startsWith('/') ? url.slice(1) : url;
769
+ if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
770
+ return newUrl;
771
+ return baseUrl.endsWith('/') ? baseUrl + newUrl : `${baseUrl}/${newUrl}`;
690
772
  }
773
+ return getAssetPath(url);
691
774
  }
692
775
  /**
693
776
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -1160,9 +1243,6 @@ export const SumTogetherAnimation = async (element, value) => {
1160
1243
  return;
1161
1244
  if (!value)
1162
1245
  return;
1163
- const container = document.getElementById(LidoContainer);
1164
- if (!container)
1165
- return;
1166
1246
  // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
1167
1247
  const TopRow = Array.from(element.children)[1];
1168
1248
  const questionRow = Array.from(element.children)[2];
@@ -1257,14 +1337,62 @@ export const SumTogetherAnimation = async (element, value) => {
1257
1337
  elementAppearance(false);
1258
1338
  }
1259
1339
  };
1260
- export const updatedAnswer = () => {
1340
+ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr) {
1341
+ const dropRect = dropElement.getBoundingClientRect();
1342
+ const dragRect = dragElement.getBoundingClientRect();
1343
+ const scale = typeof calculateScale === "function" ? calculateScale() : 1;
1344
+ if (!dropElement.dataset.dropCount)
1345
+ dropElement.dataset.dropCount = "0";
1346
+ let dropCount = parseInt(dropElement.dataset.dropCount, 10);
1347
+ // === READ DROP ZONE SIZE ===
1348
+ const dropWidth = dropRect.width;
1349
+ const dropHeight = dropRect.height;
1350
+ let targetX, targetY;
1351
+ // ---------------- LANDSCAPE WATERFALL ----------------
1352
+ if (orientation === "landscape" && dropAttr.toLowerCase() === "stackcascade") {
1353
+ console.log("🌄 Landscape waterfall");
1354
+ const shiftX = dropWidth * 0.02; // proportional (5% of width)
1355
+ const shiftY = dropHeight * 0.02; // proportional (5% of height)
1356
+ const startX = dropRect.left + dropWidth * 0.36; // 10% inside
1357
+ const startY = dropRect.top + dropHeight * -0.09; // slightly above
1358
+ targetX = startX + (dropCount * shiftX);
1359
+ targetY = startY + (dropCount * shiftY);
1360
+ }
1361
+ // ---------------- PORTRAIT VERTICAL ----------------
1362
+ else {
1363
+ console.log("📱 Portrait vertical stack");
1364
+ let startX;
1365
+ const stepY = dropHeight * 0.05; // 8% vertical step
1366
+ if (dropElement.id === "unitsDrop") {
1367
+ startX = dropRect.left + dropWidth * 0.4; // special spacing
1368
+ }
1369
+ else if (dropElement.id === "tensDrop") {
1370
+ startX = dropRect.left + dropWidth * 0.25;
1371
+ }
1372
+ else {
1373
+ startX = dropRect.left + dropWidth * 0.16; // normal spacing
1374
+ }
1375
+ const startY = dropRect.top - dropHeight * 0.25; // above start
1376
+ targetX = startX;
1377
+ targetY = startY + (dropCount * stepY);
1378
+ }
1379
+ // ------------ APPLY TRANSFORM SMOOTHLY --------------
1380
+ const dx = (targetX - dragRect.left) / scale;
1381
+ const dy = (targetY - dragRect.top) / scale;
1382
+ dragElement.style.transition = "transform .2s ease-out";
1383
+ dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
1384
+ dropElement.dataset.dropCount = String(dropCount + 1);
1385
+ // reset size
1386
+ dragElement.style.width = "auto";
1387
+ dragElement.style.height = "auto";
1388
+ }
1389
+ export const updateCalculatorAnswer = (el) => {
1261
1390
  const container = document.getElementById(LidoContainer);
1262
1391
  if (!container)
1263
1392
  return;
1264
- const answerText = container.querySelector('#answer');
1265
- if (!answerText)
1393
+ const calci = document.querySelector('#lidoCalculator');
1394
+ if (!calci)
1266
1395
  return;
1267
- const equationAttr = container.getAttribute('equationCheck') || '';
1268
- const calculatedValue = equationCheck(equationAttr);
1269
- answerText.setAttribute('string', String(calculatedValue));
1396
+ const value = calci.getAttribute('value');
1397
+ el.setAttribute('string', value);
1270
1398
  };
@@ -0,0 +1,38 @@
1
+ export function dragDropAnimation(container, dragElement, dropElement) {
2
+ container.style.pointerEvents = 'none';
3
+ setTimeout(() => {
4
+ const div = document.createElement('div');
5
+ container.append(div);
6
+ div.classList.add('after-drop-popup-container');
7
+ dragElement.style.scale = `1`;
8
+ dropElement.style.scale = `1`;
9
+ const allDragElements = container.querySelectorAll('[type="drag"]');
10
+ const dragParents = Array.from(allDragElements).map(el => el.parentElement);
11
+ const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
12
+ // Remove from old parents
13
+ if (allSameParent) {
14
+ dragElement.remove();
15
+ dropElement.remove();
16
+ }
17
+ else {
18
+ dragElement.parentElement.parentElement.remove();
19
+ dropElement.parentElement.parentElement.remove();
20
+ }
21
+ // Add animation and popup classes
22
+ dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
23
+ dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
24
+ div.appendChild(dragElement);
25
+ div.appendChild(dropElement);
26
+ dropElement.classList.remove('empty');
27
+ setTimeout(() => {
28
+ dragElement.classList.remove('zoom-fade-in');
29
+ dropElement.classList.remove('zoom-fade-in');
30
+ dragElement.classList.add('zoom-fade-out');
31
+ dropElement.classList.add('zoom-fade-out');
32
+ setTimeout(() => {
33
+ div.remove();
34
+ container.style.pointerEvents = 'auto';
35
+ }, 800); // match animation duration
36
+ }, 2000); // stay for 2 seconds
37
+ }, 250);
38
+ }
@@ -88,7 +88,10 @@ export function addClickListenerForClickType(element) {
88
88
  dispatchClickEvent(element, isCorrect);
89
89
  if (isCorrect) {
90
90
  const onCorrect = element.getAttribute('onCorrect');
91
- // element.style.pointerEvents = 'none';
91
+ if (!(element.id && element.id.startsWith('key-button'))) {
92
+ element.style.pointerEvents = 'none';
93
+ }
94
+ document.body.style.pointerEvents = 'none';
92
95
  await executeActions(onCorrect, element);
93
96
  }
94
97
  else {
@@ -145,6 +148,7 @@ export function addClickListenerForClickType(element) {
145
148
  container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
146
149
  const isCorrect = objective.includes(element['value']);
147
150
  dispatchClickEvent(element, isCorrect);
151
+ AudioPlayer.getI().stop();
148
152
  if (isCorrect) {
149
153
  const onCorrect = element.getAttribute('onCorrect');
150
154
  await executeActions(onCorrect, element);
@@ -1,9 +1,10 @@
1
1
  import { calculateScale, countPatternWords, buildDragSelectedMapFromDOM, executeActions, handleShowCheck, handlingElementFlexibleWidth, onActivityComplete, storingEachActivityScore } from "../utils";
2
2
  import { updateBalanceOnDrop } from "./lidoBalanceHandler";
3
3
  import { AudioPlayer } from "../audioPlayer";
4
- import { DropLength, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, NextContainerKey, } from "../constants";
4
+ import { DropLength, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, } from "../constants";
5
5
  import { dispatchElementDropEvent } from "../customEvents";
6
6
  import { removeHighlight } from "./highlightHandler";
7
+ import { dragDropAnimation } from "./animationHandler";
7
8
  export function buildDropHasDragFromDOM() {
8
9
  const dropHasDrag = {};
9
10
  const dropElements = document.querySelectorAll("[type='drop']");
@@ -73,7 +74,7 @@ export function enableDraggingWithScaling(element) {
73
74
  isDragging = false;
74
75
  return;
75
76
  }
76
- // AudioPlayer.getI().stop();
77
+ AudioPlayer.getI().stop();
77
78
  removeHighlight(element);
78
79
  isDragging = true;
79
80
  isClicked = true;
@@ -181,6 +182,7 @@ export function enableDraggingWithScaling(element) {
181
182
  // Start observing the element
182
183
  observer.observe(container, observerConfig);
183
184
  const onMove = (event) => {
185
+ console.log('moved');
184
186
  if (!isDragging)
185
187
  return;
186
188
  if (isDraggingDisabled) {
@@ -189,7 +191,7 @@ export function enableDraggingWithScaling(element) {
189
191
  }
190
192
  isClicked = false;
191
193
  element.style.transition = 'none';
192
- const containerScale = getElementScale(container);
194
+ const containerScale = calculateScale();
193
195
  let dx = 0;
194
196
  let dy = 0;
195
197
  if (event instanceof MouseEvent) {
@@ -241,7 +243,9 @@ export function enableDraggingWithScaling(element) {
241
243
  mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
242
244
  }
243
245
  else {
244
- mostOverlappedElement.style.opacity = '0.3';
246
+ if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
247
+ mostOverlappedElement.style.opacity = '0.3';
248
+ }
245
249
  }
246
250
  }
247
251
  };
@@ -296,6 +300,7 @@ export function enableDraggingWithScaling(element) {
296
300
  // Check for overlaps and log the most overlapping element
297
301
  let mostOverlappedElement = findMostoverlappedElement(element, 'drop');
298
302
  onElementDropComplete(element, mostOverlappedElement);
303
+ executeActions("this.updateCountBlender='true'", container);
299
304
  if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
300
305
  if (mostOverlappedElement) {
301
306
  if (element) {
@@ -497,10 +502,10 @@ export async function onElementDropComplete(dragElement, dropElement) {
497
502
  let dropHasDrag = buildDropHasDragFromDOM();
498
503
  if (!dropElement) {
499
504
  handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
500
- return;
501
505
  }
502
506
  const dropTabIndex = dropElement.getAttribute('tab-index');
503
- if ((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) {
507
+ const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'false';
508
+ if (((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) && !isAllowOnlyOneDrop) {
504
509
  handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
505
510
  return;
506
511
  }
@@ -512,7 +517,6 @@ export async function onElementDropComplete(dragElement, dropElement) {
512
517
  handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
513
518
  return;
514
519
  }
515
- // let isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
516
520
  let isCorrect;
517
521
  const dragValue = ((_c = dragElement.getAttribute('value')) === null || _c === void 0 ? void 0 : _c.trim()) || "";
518
522
  const dropValue = ((_d = dropElement.getAttribute('value')) === null || _d === void 0 ? void 0 : _d.trim()) || "";
@@ -529,7 +533,8 @@ export async function onElementDropComplete(dragElement, dropElement) {
529
533
  }
530
534
  }
531
535
  else {
532
- isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
536
+ //strings
537
+ isCorrect = dropValue.toLowerCase().includes(dragValue.toLowerCase());
533
538
  }
534
539
  if (!isCorrect) {
535
540
  const localStorageKey = `${LidoContainer}_dropData`;
@@ -540,6 +545,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
540
545
  await executeActions(onInCorrect, dropElement, dragElement);
541
546
  setTimeout(() => {
542
547
  dragElement.style.transform = 'translate(0, 0)';
548
+ storingEachActivityScore(false);
543
549
  // const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
544
550
  // if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
545
551
  // dropHasDrag[oldDropIndex].isFull = false;
@@ -565,61 +571,18 @@ export async function onElementDropComplete(dragElement, dropElement) {
565
571
  else {
566
572
  const checkdropAttr = container.getAttribute('dropAttr');
567
573
  if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
568
- container.style.pointerEvents = "none";
569
- setTimeout(() => {
570
- var _a, _b, _c;
571
- const div = document.createElement('div');
572
- container.append(div);
573
- div.classList.add('after-drop-popup-container');
574
- dragElement.style.scale = `1`;
575
- dropElement.style.scale = `1`;
576
- const allDragElements = container.querySelectorAll('[type="drag"]');
577
- const dragParents = Array.from(allDragElements).map(el => el.parentElement);
578
- const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
579
- const selectedValues = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
580
- const vanishedValue = (_b = dragElement.getAttribute('value')) !== null && _b !== void 0 ? _b : (_c = dragElement.textContent) === null || _c === void 0 ? void 0 : _c.trim();
581
- if (vanishedValue) {
582
- tempVanishedValues.push(vanishedValue);
583
- }
584
- // Remove from old parents
585
- if (allSameParent) {
586
- dragElement.remove();
587
- dropElement.remove();
588
- }
589
- else {
590
- dragElement.parentElement.parentElement.remove();
591
- dropElement.parentElement.parentElement.remove();
592
- }
593
- // Add animation and popup classes
594
- dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
595
- dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
596
- div.appendChild(dragElement);
597
- div.appendChild(dropElement);
598
- dropElement.classList.remove('empty');
599
- setTimeout(() => {
600
- dragElement.classList.remove('zoom-fade-in');
601
- dropElement.classList.remove('zoom-fade-in');
602
- dragElement.classList.add('zoom-fade-out');
603
- dropElement.classList.add('zoom-fade-out');
604
- setTimeout(() => {
605
- div.remove();
606
- container.style.pointerEvents = 'auto';
607
- const objective = container.getAttribute('objective');
608
- if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
609
- (async () => {
610
- isCorrect = true;
611
- const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
612
- await executeActions(onCorrect, container);
613
- window.dispatchEvent(new CustomEvent(NextContainerKey));
614
- tempVanishedValues.length = 0;
615
- })();
616
- }
617
- }, 800); // match animation duration
618
- }, 2000); // stay for 2 seconds
619
- }, 250);
574
+ //This function coming from animationhandler.ts
575
+ dragDropAnimation(container, dragElement, dropElement);
620
576
  }
621
577
  }
622
578
  }
579
+ else {
580
+ const checkdropAttr = container.getAttribute('dropAttr');
581
+ if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
582
+ //This function coming from animationhandler.ts
583
+ dragDropAnimation(container, dragElement, dropElement);
584
+ }
585
+ }
623
586
  if (dropElement) {
624
587
  let selectedValues = JSON.parse((_e = container.getAttribute(SelectedValuesKey)) !== null && _e !== void 0 ? _e : "[]");
625
588
  const dragValue = dragElement.getAttribute('value');
@@ -637,7 +600,8 @@ export async function onElementDropComplete(dragElement, dropElement) {
637
600
  }
638
601
  if (!(((_f = dropElement.getAttribute('dropAttr')) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
639
602
  const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
640
- if (isisFull) {
603
+ const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
604
+ if (isAllowOnlyOneDrop && isisFull) {
641
605
  isisFull.isFull = true;
642
606
  dropElement.setAttribute('is-full', 'true');
643
607
  }
@@ -672,8 +636,8 @@ export async function onElementDropComplete(dragElement, dropElement) {
672
636
  // Check for overlaps and highlight only the most overlapping element
673
637
  if (dropElement && !((_g = dropHasDrag[dropTabIndex]) === null || _g === void 0 ? void 0 : _g.isFull)) {
674
638
  let mostOverlappedElement = findMostoverlappedElement(dragElement, 'drag');
675
- const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true' || '';
676
- if (mostOverlappedElement && isAllowOnlyOneDrop) {
639
+ const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
640
+ if (isAllowOnlyOneDrop && mostOverlappedElement) {
677
641
  dragElement.style.transform = 'translate(0,0)';
678
642
  dragElement.style.transition = 'transform 0.5s ease';
679
643
  const allElements = document.querySelectorAll("[type='drop']");
@@ -751,11 +715,12 @@ export async function onElementDropComplete(dragElement, dropElement) {
751
715
  // Add pulse and highlight effect for a successful match
752
716
  const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
753
717
  dispatchElementDropEvent(dragElement, dropElement, isCorrect);
754
- storingEachActivityScore(isCorrect);
718
+ // storingEachActivityScore(isCorrect);
755
719
  dragElement.style.opacity = '1';
756
720
  await onActivityComplete(dragElement, dropElement);
757
721
  const allDropElements = document.querySelectorAll('.drop-element');
758
722
  allDropElements.forEach(el => updateDropBorder(el));
723
+ await onActivityComplete(dragElement, dropElement);
759
724
  }
760
725
  export function updateDropBorder(element) {
761
726
  if (!element || !element.classList.contains('drop-element'))
@@ -1,7 +1,6 @@
1
1
  import { LidoContainer, SelectedValuesKey } from "../constants";
2
2
  import { findMostoverlappedElement, getElementScale } from "./dragDropHandler";
3
3
  import { calculateScale, handleShowCheck, matchStringPattern, storingEachActivityScore } from "../utils";
4
- import { onClickDropOrDragElement } from "./dragDropHandler";
5
4
  import { removeHighlight } from "./highlightHandler";
6
5
  let numberOfSlides = 0;
7
6
  const slideNumbers = (element) => {
@@ -237,9 +236,6 @@ export function slidingWithScaling(element) {
237
236
  element.style.transform = 'translate(0, 0)'; // Initialize transform for consistent dragging
238
237
  element.addEventListener('mousedown', onStart);
239
238
  element.addEventListener('touchstart', onStart);
240
- element.addEventListener('click', ev => {
241
- onClickDropOrDragElement(element, 'drag');
242
- });
243
239
  }
244
240
  const slideCompleted = (slideElement) => {
245
241
  var _a;
@@ -255,6 +251,11 @@ const slideCompleted = (slideElement) => {
255
251
  const objectiveArray = objectiveString.split(',');
256
252
  const elementIndex = slideArr.indexOf(slideElement['value']);
257
253
  const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
258
- storingEachActivityScore(isCorrect);
259
- handleShowCheck();
254
+ if (container.getAttribute('is-continue-on-correct') === 'true') {
255
+ storingEachActivityScore(true);
256
+ handleShowCheck();
257
+ }
258
+ else {
259
+ storingEachActivityScore(isCorrect);
260
+ }
260
261
  };
@@ -1,5 +1,5 @@
1
1
  import { LidoContainer, SelectedValuesKey, DropToAttr } from "../constants";
2
- import { buildDragSelectedMapFromDOM, executeActions, handleShowCheck, matchStringPattern, onActivityComplete, storingEachActivityScore } from "../utils";
2
+ import { calculateScale, buildDragSelectedMapFromDOM, executeActions, handleShowCheck, matchStringPattern, onActivityComplete, storingEachActivityScore } from "../utils";
3
3
  let preOverlap;
4
4
  function getElementScale(element) {
5
5
  const transform = window.getComputedStyle(element).transform;
@@ -106,7 +106,7 @@ export function enableReorderDrag(element) {
106
106
  isClicked = false;
107
107
  event.preventDefault();
108
108
  const containerRect = container.getBoundingClientRect();
109
- const containerScale = getElementScale(container);
109
+ const containerScale = calculateScale();
110
110
  const newLeft = (point.clientX - containerRect.left - offsetXInElement) / containerScale;
111
111
  const newTop = (point.clientY - containerRect.top - offsetYInElement) / containerScale;
112
112
  element.style.left = `${newLeft}px`;
@@ -173,9 +173,7 @@ export function enableReorderDrag(element) {
173
173
  else {
174
174
  if (element.parentElement['type'] !== 'category') {
175
175
  executeActions('this.alignMatch=true', divEl, element);
176
- setTimeout(() => {
177
- divEl.replaceWith(element);
178
- }, 500);
176
+ divEl.replaceWith(element);
179
177
  }
180
178
  else {
181
179
  const categoryElement = element.parentElement;
@@ -1 +1 @@
1
- export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-d0131159.js';
1
+ export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-511377d2.js';
@@ -1,4 +1,4 @@
1
- import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-62d2a5b3.js';
1
+ import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-df1af62c.js';
2
2
 
3
3
  const LidoAvatar = LidoAvatar$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-6ba0f1af.js';
1
+ import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-09b3b152.js';
2
2
 
3
3
  const LidoBalance = LidoBalance$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-56c8f3da.js';
1
+ import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-004adc43.js';
2
2
 
3
3
  const LidoCalculator = LidoCalculator$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,6 +1,6 @@
1
- import { W as WritingPad, d as defineCustomElement$1 } from './p-1c84cf65.js';
1
+ import { L as LidoCanvas$1, d as defineCustomElement$1 } from './p-567983a9.js';
2
2
 
3
- const LidoCanvas = WritingPad;
3
+ const LidoCanvas = LidoCanvas$1;
4
4
  const defineCustomElement = defineCustomElement$1;
5
5
 
6
6
  export { LidoCanvas, defineCustomElement };
@@ -1,4 +1,4 @@
1
- import { L as LidoCell$1, d as defineCustomElement$1 } from './p-d3f7d561.js';
1
+ import { L as LidoCell$1, d as defineCustomElement$1 } from './p-d2fe2bb6.js';
2
2
 
3
3
  const LidoCell = LidoCell$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoCol$1, d as defineCustomElement$1 } from './p-6be6c5eb.js';
1
+ import { L as LidoCol$1, d as defineCustomElement$1 } from './p-3f0e4436.js';
2
2
 
3
3
  const LidoCol = LidoCol$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-e9548986.js';
1
+ import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-9ea1a67d.js';
2
2
 
3
3
  const LidoContainer = LidoContainer$1;
4
4
  const defineCustomElement = defineCustomElement$1;