From 3bdd8e5096f12eb45a8c4fe0b31b8c7fdd9820d0 Mon Sep 17 00:00:00 2001
From: indigane <indigane@users.noreply.github.com>
Date: Mon, 8 Aug 2022 19:28:07 +0300
Subject: [PATCH] Add support for images

---
 card-sort.html | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/card-sort.html b/card-sort.html
index e6a6b03..27695e0 100644
--- a/card-sort.html
+++ b/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,