lido-player 0.0.2-beta-22-dev → 0.0.2-beta-24-dev

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

@@ -62,6 +62,19 @@ export function enableDraggingWithScaling(element) {
     let clone = null;
     let duplicateElement = null;
     let mutationFlag = false;
+    let pendingMoveFrame = null;
+    let latestClientX = 0;
+    let latestClientY = 0;
+    let hasPendingMove = false;
+    let touchTransformUpdated = false;
+    let touchDragScale = 1;
+    let touchDragScaleY = 1;
+    let touchOffsetX = 0;
+    let touchOffsetY = 0;
+    let touchStartElementLeft = 0;
+    let touchStartElementTop = 0;
+    let touchStartRect = null;
+    let isTouchDragging = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
     if (!container) {
@@ -74,6 +87,33 @@ export function enableDraggingWithScaling(element) {
     let verticalDistance;
     let horizontalDistance;
     let dragingElementTransform;
+    const getContainerScale = () => {
+        const transform = window.getComputedStyle(container).transform;
+        const matrix3dMatch = transform.match(/matrix3d\(([^)]+)\)/);
+        const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+        if (matrix3dMatch) {
+            const values = matrix3dMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[4] ** 2 + values[5] ** 2) || 1,
+            };
+        }
+        if (matrixMatch) {
+            const values = matrixMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[2] ** 2 + values[3] ** 2) || 1,
+            };
+        }
+        return { scaleX: 1, scaleY: 1 };
+    };
+    const updateTouchDragScale = () => {
+        if (isTouchDragging) {
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+        }
+    };
     const onStart = (event) => {
         var _a, _b;
         if (container && container.getAttribute("game-completed") === "true")
@@ -90,17 +130,29 @@ export function enableDraggingWithScaling(element) {
         if (event instanceof MouseEvent) {
             startX = event.clientX;
             startY = event.clientY;
+            touchStartRect = null;
         }
         else {
             startX = event.touches[0].clientX;
             startY = event.touches[0].clientY;
+            isTouchDragging = true;
+            touchStartRect = element.getBoundingClientRect();
+            touchOffsetX = startX - touchStartRect.left;
+            touchOffsetY = startY - touchStartRect.top;
+            touchStartElementLeft = touchStartRect.left;
+            touchStartElementTop = touchStartRect.top;
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+            element.style.willChange = 'transform';
+            window.addEventListener('resize', updateTouchDragScale);
         }
         // Apply dragging styles to the element
         element.style.opacity = '1';
         element.style.cursor = 'grabbing';
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!clone) {
                 clone = element.cloneNode(true);
                 clone.style.left = `${rect.left}px`;
@@ -119,7 +171,7 @@ export function enableDraggingWithScaling(element) {
             const imgElement = element.querySelector('img');
             const src = imgElement === null || imgElement === void 0 ? void 0 : imgElement.getAttribute('src');
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!duplicateElement) {
                 duplicateElement = element.cloneNode(false);
                 duplicateElement.setAttribute('src', src);
@@ -196,31 +248,31 @@ export function enableDraggingWithScaling(element) {
             target.style.opacity = value;
         }
     };
-    const onMove = (event) => {
-        if (!isDragging)
+    const processMove = () => {
+        pendingMoveFrame = null;
+        if (!isDragging || !hasPendingMove)
             return;
+        hasPendingMove = false;
+        const deferTouchDropValidation = touchTransformUpdated;
         if (isDraggingDisabled) {
             isDragging = false;
+            touchTransformUpdated = false;
             return;
         }
-        isClicked = false;
         element.style.transition = 'none';
-        const containerScale = calculateScale();
-        let dx = 0;
-        let dy = 0;
-        if (event instanceof MouseEvent) {
-            dx = (event.clientX - startX) / containerScale;
-            dy = (event.clientY - startY) / containerScale;
+        if (!touchTransformUpdated) {
+            const containerScale = calculateScale();
+            const dx = (latestClientX - startX) / containerScale;
+            const dy = (latestClientY - startY) / containerScale;
+            // Calculate the new position considering scaling
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            // Apply transform with translation without boundaries
+            element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
         }
-        else {
-            dx = (event.touches[0].clientX - startX) / containerScale;
-            dy = (event.touches[0].clientY - startY) / containerScale;
-        }
-        // Calculate the new position considering scaling
-        const newLeft = initialX + dx;
-        const newTop = initialY + dy;
-        // Apply transform with translation without boundaries
-        element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        touchTransformUpdated = false;
+        if (deferTouchDropValidation)
+            return;
         // Check for overlaps and highlight only the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement(element, 'drop');
         const allElements = document.querySelectorAll("[type='drop']");
@@ -259,6 +311,44 @@ export function enableDraggingWithScaling(element) {
             }
         }
     };
+    const onMove = (event) => {
+        if (!isDragging)
+            return;
+        if (isDraggingDisabled) {
+            isDragging = false;
+            return;
+        }
+        if (event instanceof MouseEvent) {
+            touchTransformUpdated = false;
+            latestClientX = event.clientX;
+            latestClientY = event.clientY;
+        }
+        else {
+            const touch = event.touches[0];
+            if (!touch)
+                return;
+            latestClientX = touch.clientX;
+            latestClientY = touch.clientY;
+        }
+        if (!(event instanceof MouseEvent)) {
+            element.style.transition = 'none';
+            const desiredLeft = latestClientX - touchOffsetX;
+            const desiredTop = latestClientY - touchOffsetY;
+            const dx = (desiredLeft - touchStartElementLeft) / touchDragScale;
+            const dy = (desiredTop - touchStartElementTop) / touchDragScaleY;
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            element.style.transform = `translate3d(${newLeft}px, ${newTop}px, 0)`;
+            touchTransformUpdated = true;
+        }
+        isClicked = false;
+        if (event instanceof MouseEvent) {
+            hasPendingMove = true;
+            if (pendingMoveFrame === null) {
+                pendingMoveFrame = requestAnimationFrame(processMove);
+            }
+        }
+    };
     let lastOverlappedElement = null;
     const removeDocumentDragListeners = () => {
         document.removeEventListener('mousemove', onMove);
@@ -266,9 +356,19 @@ export function enableDraggingWithScaling(element) {
         document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onEnd);
     };
+    const flushPendingMove = () => {
+        if (pendingMoveFrame === null)
+            return;
+        cancelAnimationFrame(pendingMoveFrame);
+        processMove();
+    };
     const onEnd = (endEv) => {
         var _a, _b, _c;
+        flushPendingMove();
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
         removeDocumentDragListeners();
         if (isClicked) {
             if (clone) {
@@ -374,6 +474,15 @@ export function enableDraggingWithScaling(element) {
     };
     const cleanup = () => {
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
+        if (pendingMoveFrame !== null) {
+            cancelAnimationFrame(pendingMoveFrame);
+            pendingMoveFrame = null;
+        }
+        hasPendingMove = false;
+        touchTransformUpdated = false;
         observer.disconnect();
         removeDocumentDragListeners();
         element.removeEventListener('mousedown', onStart);
@@ -861,14 +970,14 @@ export async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }

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

@@ -8,32 +8,32 @@ export function showWrongAnswerAnimation(elements) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-          @keyframes enhanced-shake {
-              0% { left: 0; }
-              10% { left: -8px; }
-              20% { left: 8px; }
-              30% { left: -8px; }
-              40% { left: 8px; }
-              50% { left: -6px; }
-              60% { left: 6px; }
-              70% { left: -4px; }
-              80% { left: 4px; }
-              90% { left: -2px; }
-              100% { left: 0; }
-          }
-
-          
-          .wrong-answer {
-              position: relative; /* Enable relative positioning to move the element */
-              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
-              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
-
-              border: 4px solid red;
-          }
-
-          
+        style.innerHTML = `
+          @keyframes enhanced-shake {
+              0% { left: 0; }
+              10% { left: -8px; }
+              20% { left: 8px; }
+              30% { left: -8px; }
+              40% { left: 8px; }
+              50% { left: -6px; }
+              60% { left: 6px; }
+              70% { left: -4px; }
+              80% { left: 4px; }
+              90% { left: -2px; }
+              100% { left: 0; }
+          }
+
+          
+          .wrong-answer {
+              position: relative; /* Enable relative positioning to move the element */
+              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
+              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
+
+              border: 4px solid red;
+          }
+
+          
       `;
         document.head.appendChild(style);
     }
@@ -61,34 +61,34 @@ export function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -105,10 +105,10 @@ export function stopHighlightForSpeakingElement(element) {
 }
 export function highlightElement() {
     const container = document.querySelector(LidoContainer);
-    if (container.getAttribute("template-id") === "blender")
-        return;
     if (!container)
         return;
+    if (container.getAttribute("template-id") === "blender")
+        return;
     const dropElements = buildDropHasDragFromDOM();
     const dropEls = container.querySelectorAll(`[type="drop"]`);
     dropEls.forEach(dropEl => {

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

@@ -21,6 +21,20 @@ const slideNumbers = (element) => {
     }
 };
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
+const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
+const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
+export const getSlideValuesForValidation = (container, slideElements) => {
+    if (isReorderContainer(container)) {
+        return slideElements.map(element => element.id);
+    }
+    return slideElements.map(element => element['value']);
+};
+const syncSlideOrder = (container) => {
+    const slideElements = Array.from(container.querySelectorAll("[type='slide']"));
+    const slideOrder = getSlideValuesForValidation(container, slideElements);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
+    return slideOrder;
+};
 export const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -81,6 +95,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) => {
@@ -262,14 +279,6 @@ export function slidingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
-const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
-const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
-export const getSlideValuesForValidation = (container, slideElements) => {
-    if (isReorderContainer(container)) {
-        return slideElements.map(element => element.id);
-    }
-    return slideElements.map(element => element['value']);
-};
 export const updateArrangeLettersCorrectness = (container, slideValues, objectiveValues) => {
     const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
     slideElements.forEach((element, index) => {

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

@@ -163,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);
@@ -390,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');