Add support for images

card-sort.html

@@ -83,6 +83,8 @@
         width: 100%;
       }
       .card {
+        width: 190px;
+        max-width: calc(50vw - 45px);
         margin: 5px;
         padding: 5px 7px;
         border-radius: 3px;
@@ -91,6 +93,14 @@
         box-shadow: 0 2px 2px rgba(172, 121, 0, 0.58);
         cursor: grab;
       }
+      .card .card-image {
+        width: 100%;
+        border-radius: 4px;
+      }
+      .card .card-image-text:first-child {
+        display: inline-block;
+        margin-bottom: 4px;
+      }
       .muuri-item-placeholder .card {
         pointer-events: none;
         background: transparent;
@@ -99,6 +109,10 @@
         box-shadow: none;
         border-radius: 7px;
       }
+      .muuri-item-placeholder .card .card-image {
+        filter: grayscale(1);
+        opacity: .3;
+      }
       /* Categories */
       .category {
         margin: 5px 15px 30px 5px;
@@ -184,6 +198,7 @@
       const buttonExportResult = document.querySelector('.btn-export-result');
       const cardTemplate = document.querySelector('.card-template');
       const categoryTemplate = document.querySelector('.category-template');
+      const cardImageRegex = /\s*image\s*:\s*((?:https?|data):\S+)/i;
       const uncategorizedCardsGrid = new Muuri('.uncategorized-cards .grid', {
         dragEnabled: true,
         dragSort: () => cardGrids,
@@ -273,7 +288,32 @@
       function createCard(text, categoryGrid) {
         const targetGrid = categoryGrid || uncategorizedCardsGrid;
         const itemElement = document.importNode(cardTemplate.content.children[0], true);
-        itemElement.querySelector('.card').textContent = text;
+        const hasImage = text.match(cardImageRegex);
+        if (hasImage) {
+          const [textBefore, imageUrl, textAfter] = text.split(cardImageRegex);
+          const cardChildElements = [];
+          if (textBefore.trim()) {
+            const span = document.createElement('span');
+            span.className = 'card-image-text';
+            span.appendChild(document.createTextNode(textBefore));
+            cardChildElements.push(span);
+          }
+          const imageElement = document.createElement('img');
+          imageElement.className = 'card-image';
+          imageElement.onload = () => uncategorizedCardsGrid.refreshItems().layout();
+          imageElement.src = imageUrl;
+          cardChildElements.push(imageElement);
+          if (textAfter.trim()) {
+            const span = document.createElement('span');
+            span.className = 'card-image-text';
+            span.appendChild(document.createTextNode(textAfter));
+            cardChildElements.push(span);
+          }
+          itemElement.querySelector('.card').replaceChildren(...cardChildElements);
+        }
+        else {
+          itemElement.querySelector('.card').textContent = text;
+        }
         targetGrid.show(
           targetGrid.add([itemElement], {
             active: false,
@@ -315,6 +355,7 @@
                   enabled: true,
                   createElement: (item) => item.getElement().cloneNode(true),
                 },
+                dragContainer: document.body,
                 dragAutoScroll: {
                   targets: [window],
                   sortDuringScroll: false,