add/rm labels on drop

also allow a heading
CodeYourFuture · Jan 23, 2025 · 48d2bc6 · 48d2bc6
1 parent ee048e4
commit 48d2bc6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/common-theme/assets/scripts/label-items.js b/common-theme/assets/scripts/label-items.js
@@ -17,9 +17,12 @@ class LabelItems extends HTMLElement {
 
   render() {
     this.shadowRoot.innerHTML = `
+    <style>
+    .c-quiz { display: grid;gap: var(--theme-spacing--gutter)}
+    </style>
       <section class="c-quiz">
         <slot name="labels"></slot>
-        <h3>👆🏾 Drag the labels on to the items 👇🏽</h3>
+        <slot name="heading"></slot>
         <slot name="content"></slot>
         <h4 role="status" aria-live="polite">
           <slot name="feedback"></slot>
@@ -75,6 +78,14 @@ class LabelItems extends HTMLElement {
     });
   }
 
+  makeLabel(labelId) {
+    // make a label
+    const label = document.createElement("span");
+    label.textContent = labelId;
+    label.classList.add("c-label");
+    return label;
+  }
+
   handleDrop(labelId, itemElement) {
     const itemId = itemElement.dataset.item;
     const isCorrect = this.correctAnswers.get(itemId) === labelId;
@@ -83,6 +94,12 @@ class LabelItems extends HTMLElement {
     itemElement.classList.toggle("is-good", isCorrect);
     itemElement.classList.toggle("is-bad", !isCorrect);
 
+    // remove old labels
+    itemElement.querySelectorAll(".c-label").forEach((label) => label.remove());
+
+    // add this label
+    itemElement.appendChild(this.makeLabel(labelId));
+
     // Update feedback slot content
     const feedbackSlot = this.shadowRoot.querySelector('slot[name="feedback"]');
     const feedback = feedbackSlot.assignedElements()[0];

diff --git a/common-theme/assets/styles/04-components/label.scss b/common-theme/assets/styles/04-components/label.scss
@@ -4,6 +4,10 @@
   font: 600 var(--theme-type-size--6) system-ui;
   border: 1px solid;
   border-radius: 1em;
+
+  &:not(:has(.c-label__name)) {
+    padding: 0.125em 0.5em;
+  }
   &__name {
     display: inline-block;
     padding: 0.125em 0.5em;

diff --git a/common-theme/layouts/shortcodes/label-items.html b/common-theme/layouts/shortcodes/label-items.html
@@ -1,10 +1,11 @@
 {{/* example usage: attach a label to delimit each item
-  {{<label-items
+  {{<label-items heading="👆🏾 Drag the labels on to the items 👇🏽"
 >}}
 [LABEL=Label-1]Item here [LABEL=Label-2]Item here anything you like can be
 multiple lines [LABEL=Label-1] Another item here
 {{< /label-items >}}
 */}}
+{{ $heading := .Get "heading" | default "👆🏾 Drag the labels on to the items 👇🏽" }}
 {{/* Split content into items by label, using a similar pattern to TABS and COLUMNS */}}
 {{ $content := .Inner | strings.TrimSpace }}
 {{ $items := split $content "[LABEL=" }}
@@ -33,6 +34,7 @@
       <button class="c-label" data-label="{{ . | urlize }}">{{ . }}</button>
     {{ end }}
   </section>
+  <h3 slot="heading" class="e-heading__5">{{ $heading }}</h3>
   <section slot="content" aria-label="Items to label">
     {{ range $index, $item := $processedItems }}
       <div data-item="{{ add $index 1 }}" data-correct="{{ .label | urlize }}">