lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

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

@@ -1,5 +1,7 @@
 import { LidoContainer, SelectedValuesKey, DropToAttr } from "../constants";
 import { calculateScale, buildDragSelectedMapFromDOM, executeActions, handleShowCheck, matchStringPattern, onActivityComplete, storingEachActivityScore, getSortedValuesArrayFromMap } from "../utils";
+import { animateDragToTarget } from "./dragDropHandler";
+import { AudioPlayer } from "../audioPlayer";
 let preOverlap;
 function getElementScale(element) {
     const transform = window.getComputedStyle(element).transform;
@@ -161,11 +163,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);
@@ -174,11 +176,16 @@ export function enableReorderDrag(element) {
                         divEl.remove();
                     });
                 }
+                resetElementStyles(element);
             }
             else {
                 if (element.parentElement['type'] !== 'category') {
-                    executeActions('this.alignMatch=true', divEl, element);
-                    divEl.replaceWith(element);
+                    animateDragToTarget(element, divEl, container);
+                    // executeActions('this.alignMatch=true', divEl, element);
+                    setTimeout(() => {
+                        divEl.replaceWith(element);
+                        resetElementStyles(element);
+                    }, 500);
                 }
                 else {
                     const categoryElement = element.parentElement;
@@ -197,13 +204,16 @@ export function enableReorderDrag(element) {
                     });
                     optionArea.appendChild(element);
                     element.classList.remove('dropped');
+                    element.classList.remove("category-dropped-onCorrect");
+                    element.classList.remove("category-dropped-onInCorrect");
                     element.removeAttribute('drop-to');
                     if (dummy) {
                         dummy.remove();
                     }
+                    resetElementStyles(element);
                 }
             }
-            resetElementStyles(element);
+            // resetElementStyles(element);
             return;
         }
         if (findMostoverlappedElement(element, 'blank')) {
@@ -258,6 +268,8 @@ export function enableReorderDrag(element) {
                     resetElementStyles(element);
                     dummy.replaceWith(element);
                     element.classList.remove('dropped');
+                    element.classList.remove("category-dropped-onCorrect");
+                    element.classList.remove("category-dropped-onInCorrect");
                     element.removeAttribute('drop-to');
                 }, 100);
                 return;
@@ -306,7 +318,7 @@ export function enableReorderDrag(element) {
     element.classList.add('drag-element');
     element.addEventListener('pointerdown', onStart);
 }
-const resetElementStyles = (el) => {
+export const resetElementStyles = (el) => {
     el.style.opacity = '';
     el.style.cursor = 'move';
     el.style.zIndex = '';
@@ -378,11 +390,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');
@@ -427,8 +439,34 @@ const wordDropComplete = (block, element) => {
         handleShowCheck();
     }
 };
+const categoryPlayback = new WeakMap();
+export const categoriseCompleted = (container) => {
+    const pendingPlayback = categoryPlayback.get(container);
+    if (pendingPlayback)
+        return pendingPlayback;
+    const playback = playCategories(container).finally(() => {
+        categoryPlayback.delete(container);
+    });
+    categoryPlayback.set(container, playback);
+    return playback;
+};
+const playCategories = async (container) => {
+    const allCategoriseBox = container.querySelectorAll('[type="category"]');
+    const audioPlayer = AudioPlayer.getI();
+    for (const categoryBox of Array.from(allCategoriseBox)) {
+        const headingElement = categoryBox.parentElement.children[0];
+        await audioPlayer.play(headingElement);
+        for (const child of Array.from(categoryBox.children)) {
+            child.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end' // Aligns the bottom of the child with the bottom of the container
+            });
+            await audioPlayer.play(child);
+        }
+    }
+};
 async function onDropToCategory(dragElement, categoryElement) {
-    dragElement.classList.add('dropped');
+    // dragElement.classList.add('dropped');
     let dragSelected = buildDragSelectedMapFromDOM();
     let elementArr = dragSelected[categoryElement.getAttribute('tab-index')];
     if (Array.isArray(elementArr)) {