lido-player 0.0.2-beta-16-dev → 0.0.2-beta-17

package/dist/collection/utils/utilsHandlers/lidoCalculatorHandler.js

@@ -4,27 +4,24 @@ const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 /* ------------------ animation ------------------ */
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, container) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
-      }`;
-        const styleSheet = document.styleSheets[0];
-        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
-        activeCell.style.animation = `widthDecrease 0s`;
-        activeCell.addEventListener("animationend", () => {
-            activeCell.remove();
+        let removed = false;
+        const removeActiveCell = () => {
+            if (removed)
+                return;
+            removed = true;
+            if (activeCell.isConnected) {
+                activeCell.remove();
+            }
             // Trigger next container only after the last calculate cell is removed
             const remainingCalculateTypes = container.querySelectorAll("[type='calculate']");
             if (remainingCalculateTypes.length === 0) {
                 setTimeout(() => triggerNextContainer(), 2000);
             }
             resolve();
-        }, { once: true });
+        };
+        // Nimble uses a zero-duration removal; remove synchronously so progression
+        // does not depend on a browser animationend event.
+        removeActiveCell();
     });
 };
 /* ------------------ PRACTICE MODE ------------------ */

package/dist/collection/utils/utilsHandlers/slideHandler.js

@@ -21,6 +21,12 @@ const slideNumbers = (element) => {
     }
 };
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
+const syncSlideOrder = (container) => {
+    const slideOrder = Array.from(container.querySelectorAll("[type='slide']"))
+        .map(item => item['value']);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
+    return slideOrder;
+};
 export const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -81,6 +87,9 @@ export function slidingWithScaling(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    // Slide activities can start in the correct order. Keep their initial DOM
+    // order available to the Next/check validation before the first swap occurs.
+    syncSlideOrder(container);
     let verticalDistance;
     let horizontalDistance;
     const onStart = (event) => {
@@ -260,15 +269,8 @@ export function slidingWithScaling(element) {
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
 const slideCompleted = (slideElement) => {
-    var _a;
     const container = document.getElementById(LidoContainer);
-    const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-    const allSlideElements = document.querySelectorAll("[type='slide']");
-    let index = 0;
-    allSlideElements.forEach(item => {
-        slideArr[index++] = item['value'];
-    });
-    container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
+    const slideArr = syncSlideOrder(container);
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
     const elementIndex = slideArr.indexOf(slideElement['value']);

package/dist/collection/utils/utilsHandlers/sortHandler.js

@@ -161,11 +161,11 @@ export function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -378,11 +378,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');