@fc3/mmcadi 0.1.55 → 0.1.57

package/dist/.last-compile-time

@@ -1 +1 @@
-1767658924
+1767736645

package/dist/.last-publish-time

@@ -1 +1 @@
-1767659000
+1767736776

package/dist/client.js

@@ -2283,17 +2283,21 @@
       this.drag_delay_timer = null;
     }
     attach() {
-      document.addEventListener("pointerdown", (event) => {
-        this.handlePointerDown(event);
+      if (!this.isTouchDevice()) {
+        return;
+      }
+      this.applyNonInteractiveClasses();
+      document.addEventListener("touchstart", (event) => {
+        this.handleTouchStart(event);
       }, { capture: true });
-      document.addEventListener("pointermove", (event) => {
-        this.handlePointerMove(event);
+      document.addEventListener("touchmove", (event) => {
+        this.handleTouchMove(event);
       }, { capture: true, passive: false });
-      document.addEventListener("pointerup", (event) => {
-        this.handlePointerUp(event);
+      document.addEventListener("touchend", (event) => {
+        this.handleTouchEnd(event);
       }, { capture: true });
-      document.addEventListener("pointercancel", (event) => {
-        this.handlePointerCancel(event);
+      document.addEventListener("click", (event) => {
+        this.handleGenericClick(event);
       }, { capture: true });
       document.addEventListener("dragstart", (event) => {
         this.handleNativeDragStart(event);
@@ -2303,14 +2307,29 @@
       const elements = Array.from(document.querySelectorAll(".dragging"));
       return elements.length > 0;
     }
-    handlePointerDown(event) {
+    applyNonInteractiveClasses() {
+      const raw_elements = document.querySelectorAll("section.block");
+      const elements = Array.from(raw_elements);
+      elements.forEach((element) => {
+        element.classList.add("no-interaction");
+      });
+    }
+    isTouchDevice() {
+      if (Math.random() > 0) {
+        return true;
+      }
+      const pointer_matches = window.matchMedia("(pointer: coarse)").matches;
+      const hover_none_matches = window.matchMedia("(hover: none)").matches;
+      return pointer_matches && hover_none_matches;
+    }
+    handleTouchStart(event) {
       const { target } = event;
       if (target === null) {
         return;
       }
       const target_element = target;
       let current_element = target_element;
-      while (current_element) {
+      while (current_element instanceof HTMLElement) {
         const attribute = current_element.getAttribute("data-role");
         if (attribute === "block_activation") {
           break;
@@ -2319,15 +2338,12 @@
           return;
         }
         current_element = current_element.parentNode;
-        if (!(current_element instanceof HTMLElement)) {
-          break;
-        }
       }
       const block = target_element.closest("section.block");
       if (block === null) {
         return;
       }
-      if (target_element.closest("button, input, textarea, select, label, form")) {
+      if (target_element.closest("input, textarea, select, label, form")) {
         return;
       }
       const coordinate = this.getEventCoordinate(event);
@@ -2337,6 +2353,7 @@
       this.drag_start_coordinate = coordinate;
       block.classList.add("drag-candidate");
       this.scheduleDelayedDrag();
+      event.preventDefault();
     }
     scheduleDelayedDrag() {
       this.cancelDelayedDrag();
@@ -2348,7 +2365,8 @@
         clearTimeout(this.drag_delay_timer);
       }
     }
-    removeClassFromAllElements(class_name) {
+    demoteAllDragCandidates() {
+      const class_name = "drag-candidate";
       const raw_elements = document.querySelectorAll(`.${class_name}`);
       const elements = Array.from(raw_elements);
       elements.forEach((element) => {
@@ -2356,7 +2374,22 @@
       });
       return elements;
     }
+    createDragMask() {
+      const mask = document.createElement("div");
+      mask.classList.add("drag-mask");
+      document.body.appendChild(mask);
+      document.body.style.overflow = "hidden";
+    }
+    hideDragMask() {
+      const raw_elements = document.querySelectorAll(".drag-mask");
+      const elements = Array.from(raw_elements);
+      elements.forEach((element) => {
+        document.body.removeChild(element);
+      });
+      document.body.style.overflow = "auto";
+    }
     beginDelayedDrag() {
+      this.createDragMask();
       const raw_candidates = document.querySelectorAll(".drag-candidate");
       const candidates = Array.from(raw_candidates);
       candidates.forEach((candidate) => {
@@ -2380,6 +2413,7 @@
         });
         candidate.setAttribute("data-drag-start-x", rect.left.toString());
         candidate.setAttribute("data-drag-start-y", rect.top.toString());
+        candidate.setAttribute("data-dragging", "true");
         candidate.classList.add("dragging");
         parentNode.insertBefore(ghost, candidate);
       });
@@ -2394,28 +2428,13 @@
         event.preventDefault();
       }
     }
-    handlePointerMove(event) {
+    handleTouchMove(event) {
       const current_coordinate = this.getEventCoordinate(event);
       const start_coordinate = this.getDragStartCoordinate();
       if (start_coordinate === null || current_coordinate === null) {
         return;
       }
-      const { target } = event;
-      if (target !== null) {
-        const target_element = target;
-        const block = target_element.closest("section.block");
-        if (block) {
-          if (!block.classList.contains("dragging")) {
-            block.classList.add("drag-candidate");
-          }
-        }
-      }
-      const { x: start_x, y: start_y } = start_coordinate;
-      const { x: current_x, y: current_y } = current_coordinate;
-      const distance = Math.hypot(current_x - start_x, current_y - start_y);
-      if (distance > 25) {
-        this.removeClassFromAllElements("drag-candidate");
-      }
+      this.demoteAllDragCandidates();
       this.scheduleDelayedDrag();
       const raw_targets = document.querySelectorAll(".dragging");
       const drag_target_blocks = Array.from(raw_targets);
@@ -2547,26 +2566,36 @@
       }
       return null;
     }
-    handlePointerUp(event) {
+    handleTouchEnd(event) {
       this.stopDragging();
     }
-    handlePointerCancel(event) {
-      this.stopDragging();
+    handleGenericClick(event) {
+      const { target } = event;
+      if (target === null) {
+        return;
+      }
+      const target_element = target;
+      const block = target_element.closest("section.block");
+      if (block === null) {
+        return;
+      }
+      const attribute = block.getAttribute("data-dragging");
+      if (attribute === "true") {
+        block.removeAttribute("data-dragging");
+        event.preventDefault();
+        event.stopPropagation();
+      }
     }
     stopDragging() {
-      this.showFullscreenBlockingOverlay();
       this.stopDraggingAsync().then(() => {
-        this.hideFullscreenBlockingOverlay();
+        this.hideDragMask();
       });
     }
-    showFullscreenBlockingOverlay() {
-    }
-    hideFullscreenBlockingOverlay() {
-    }
     async stopDraggingAsync() {
       this.cancelDelayedDrag();
-      this.removeClassFromAllElements("drag-candidate");
-      const dragging_elements = this.removeClassFromAllElements("dragging");
+      this.demoteAllDragCandidates();
+      const raw_elements = document.querySelectorAll(".dragging");
+      const dragging_elements = Array.from(raw_elements);
       let index = 0;
       while (index < dragging_elements.length) {
         const element = dragging_elements[index++];
@@ -2574,8 +2603,8 @@
         const source_index_path = get_index_path_for_element_default(element);
         const target_index_path = this.getIndexPathForGhost(ghost);
         await this.submitReposition(source_index_path, target_index_path);
-        ghost.replaceWith(element);
         Object.assign(element.style, {
+          opacity: "0",
           left: "",
           top: "",
           right: "",
@@ -2583,39 +2612,55 @@
           width: "",
           height: ""
         });
+        element.classList.remove("dragging");
+        ghost.replaceWith(element);
+        element.style.opacity = "1";
       }
+      this.recomputeIndexPaths();
     }
-    getIndexPathSafe(element) {
-      const is_block = element.classList.contains("block");
-      if (!is_block) {
-        return null;
-      }
-      const is_ghost = element.classList.contains("ghost");
-      if (is_ghost) {
-        return null;
-      }
-      return get_index_path_for_element_default(element);
+    recomputeIndexPaths() {
+      const raw_blocks = document.querySelectorAll("section.block");
+      const blocks = Array.from(raw_blocks);
+      let index = 0;
+      blocks.forEach((block) => {
+        const block_parent = block.parentNode;
+        if (block_parent === null) {
+          throw new import_errors8.InvariantViolation(`
+					Tried to read block parent element, but it was not set
+				`);
+        }
+        const multicolumn_ancestor = block_parent.closest("section.block.multi_column");
+        if (multicolumn_ancestor === null) {
+          const index_path = index.toString();
+          block.setAttribute("data-index-path", index_path);
+          index++;
+        }
+      });
     }
     getIndexPathForGhost(ghost) {
-      let current_child = ghost;
-      while (current_child) {
-        const index_path = this.getIndexPathSafe(current_child);
-        if (index_path !== null) {
-          return index_path;
-        }
-        current_child = current_child.nextElementSibling;
+      const parent_element = ghost.parentNode;
+      if (parent_element === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to read parent element for ghost, but it was not set
+			`);
       }
-      current_child = ghost;
-      while (current_child) {
-        const index_path = this.getIndexPathSafe(current_child);
-        if (index_path !== null) {
-          const index_major_version = parseInt(index_path);
-          const next_version = index_major_version + 1;
-          return next_version.toString();
+      const siblings = Array.from(parent_element.children);
+      let index = 0;
+      let effective_index = 0;
+      while (index < siblings.length) {
+        const sibling = siblings[index++];
+        if (!sibling.classList.contains("block")) {
+          continue;
+        }
+        if (sibling.classList.contains("dragging")) {
+          continue;
+        }
+        if (sibling === ghost) {
+          break;
         }
-        current_child = current_child.previousElementSibling;
+        effective_index++;
       }
-      return "0";
+      return effective_index.toString();
     }
     async submitReposition(source_index_path, target_index_path) {
       const form = new FormData();
@@ -2637,9 +2682,17 @@
       }
     }
     getEventCoordinate(event) {
+      const { touches } = event;
+      if (touches === void 0) {
+        return null;
+      }
+      const touch = touches[0];
+      if (touch === void 0) {
+        return null;
+      }
       return {
-        x: event.clientX,
-        y: event.clientY
+        x: touch.clientX,
+        y: touch.clientY
       };
     }
     getDragStartCoordinate() {
@@ -3079,13 +3132,21 @@
       window.location.href = href;
     }
     activateAudioBlock(block_element) {
-      const audio_element = block_element.querySelectorAll("audio")[0];
-      if (audio_element === void 0) {
+      const audio_element = block_element.querySelector("audio");
+      if (audio_element === null) {
         throw new import_errors9.InvariantViolation(`
 				Tried to read audio element for block, but it was not present
 			`);
       }
-      this.enqueueMedia(audio_element);
+      const persistent_element = document.getElementById("persistent-audio");
+      const persistent_audio = persistent_element;
+      const is_toggling = persistent_audio.src === audio_element.src;
+      const is_playing = this.hasActiveMedia();
+      if (is_toggling && is_playing) {
+        this.pauseActiveMedia();
+      } else {
+        this.enqueueMedia(audio_element);
+      }
     }
     enqueueMedia(element) {
       this.pauseActiveMedia();
@@ -3111,15 +3172,19 @@
       this.focusCurrentBlockElement();
       const persistent_element = document.getElementById("persistent-audio");
       const persistent_audio = persistent_element;
-      const track_target = document.getElementById("persistent-track-name");
-      const artist_target = document.getElementById("persistent-artist-name");
-      const track_source = media_block.querySelector('[data-role="track_name"]');
-      const artist_source = media_block.querySelector('[data-role="artist_name"]');
       if (persistent_audio === null) {
         throw new import_errors9.InvariantViolation(`
 				Tried to access persistent audio element, but it was not found
 			`);
       }
+      if (persistent_audio.src === element.src) {
+        persistent_audio.play();
+        return;
+      }
+      const track_target = document.getElementById("persistent-track-name");
+      const artist_target = document.getElementById("persistent-artist-name");
+      const track_source = media_block.querySelector('[data-role="track_name"]');
+      const artist_source = media_block.querySelector('[data-role="artist_name"]');
       if (track_target === null) {
         throw new import_errors9.InvariantViolation(`
 				Tried to access persistent track name element, but it was not found
@@ -3140,12 +3205,51 @@
 				Tried to read artist name source, but it was not found
 			`);
       }
+      const track_name = track_source.innerHTML;
+      const artist_name = artist_source.innerHTML;
+      const album_name = "";
       persistent_audio.src = element.src;
-      track_target.innerHTML = track_source.innerHTML;
-      artist_target.innerHTML = artist_source.innerHTML;
+      track_target.innerHTML = track_name;
+      artist_target.innerHTML = artist_name;
       document.body.classList.add("media-visible");
       persistent_audio.currentTime = 0;
       persistent_audio.play();
+      if (typeof navigator.mediaSession === void 0) {
+        return;
+      }
+      this.determineMediaSessionArtworkUrl().then((artwork_url) => {
+        const artwork = (() => {
+          if (artwork_url === null) {
+            return [];
+          }
+          return [
+            { src: artwork_url, sizes: "256x256", type: "image/png" }
+          ];
+        })();
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: track_name,
+          artist: artist_name,
+          album: album_name,
+          artwork
+        });
+      }).catch((error) => {
+        throw error;
+      });
+    }
+    async determineMediaSessionArtworkUrl() {
+      const elements = Array.from(document.querySelectorAll("section.block"));
+      const blocks = elements;
+      let index = 0;
+      while (index < blocks.length) {
+        const block = blocks[index++];
+        if (block.classList.contains("image")) {
+          const img = block.querySelector("img");
+          if (img !== null) {
+            return img.src;
+          }
+        }
+      }
+      return null;
     }
     handleMediaCanPlay(event) {
       const target = event.target;
@@ -3209,15 +3313,18 @@
       const elements = document.querySelectorAll("audio,video");
       const media_elements = Array.from(elements);
       return media_elements.filter((media_element) => {
-        if (media_element.paused || media_element.ended) {
-          return false;
-        }
-        if (media_element.readyState < media_ready_state_default.HAVE_CURRENT_DATA) {
-          return false;
-        }
-        return true;
+        return this.mediaIsActive(media_element);
       });
     }
+    mediaIsActive(media_element) {
+      if (media_element.paused || media_element.ended) {
+        return false;
+      }
+      if (media_element.readyState < media_ready_state_default.HAVE_CURRENT_DATA) {
+        return false;
+      }
+      return true;
+    }
     pauseActiveMedia() {
       this.setQueuedMedia(null);
       const active_media = this.getActiveMedia();

package/dist/src/client/helper/interaction.d.ts

@@ -4,24 +4,26 @@ declare class InteractionHelper {
     constructor();
     attach(): void;
     isDragging(): boolean;
-    private handlePointerDown;
+    private applyNonInteractiveClasses;
+    private isTouchDevice;
+    private handleTouchStart;
     private scheduleDelayedDrag;
     private cancelDelayedDrag;
-    private removeClassFromAllElements;
+    private demoteAllDragCandidates;
+    private createDragMask;
+    private hideDragMask;
     private beginDelayedDrag;
     private handleNativeDragStart;
-    private handlePointerMove;
+    private handleTouchMove;
     private translateDragTargetBlock;
     private getGhostForBlock;
     private getPreviousBlock;
     private getNextBlock;
-    private handlePointerUp;
-    private handlePointerCancel;
+    private handleTouchEnd;
+    private handleGenericClick;
     private stopDragging;
-    private showFullscreenBlockingOverlay;
-    private hideFullscreenBlockingOverlay;
     private stopDraggingAsync;
-    private getIndexPathSafe;
+    private recomputeIndexPaths;
     private getIndexPathForGhost;
     private submitReposition;
     private getEventCoordinate;