From bf44352fd7b8093a4ef8c24dcd39733ebb3bdedd Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@lanl.gov>
Date: Tue, 10 Sep 2019 00:31:34 +0000
Subject: [PATCH] New draggable list helper

---
 devel/devel-server.py                  |  1 -
 example-puzzles/example/5/draggable.js | 75 ++++++++++++++++++++++++++
 example-puzzles/example/5/helpers.js   |  1 +
 example-puzzles/example/5/puzzle.moth  |  8 +++
 src/instance.go                        |  1 +
 theme/basic.css                        | 17 ++++++
 6 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 example-puzzles/example/5/draggable.js

diff --git a/devel/devel-server.py b/devel/devel-server.py
index 7f35e33..acde401 100755
--- a/devel/devel-server.py
+++ b/devel/devel-server.py
@@ -210,7 +210,6 @@ sessionStorage.setItem("id", "devel-server")
         self.end_headers()
         self.wfile.write(body.encode('utf-8'))
     endpoints.append((r"/", handle_index))
-    endpoints.append((r"/{ignored}", handle_index))
 
 
     def handle_theme_file(self):
diff --git a/example-puzzles/example/5/draggable.js b/example-puzzles/example/5/draggable.js
new file mode 100644
index 0000000..65390e9
--- /dev/null
+++ b/example-puzzles/example/5/draggable.js
@@ -0,0 +1,75 @@
+// jshint asi:true
+
+var dragSrcEl_
+
+function draggableHandleDragStart(e) {
+  e.target.dataset.moveId = e.timeStamp.toString()
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('text/plain', e.target.dataset.moveId)
+
+  // this/e.target is the source node.
+  e.target.classList.add('moving')
+}
+
+function draggableHandleDragOver(e) {
+  if (e.target.attributes.draggable) {
+    e.preventDefault() // Allows us to drop.
+  }
+
+  e.dataTransfer.dropEffect = 'move'
+
+  return false
+}
+
+function draggableHandleDragEnter(e) {
+  e.target.classList.add('over')
+}
+
+function draggableHandleDragLeave(e) {
+  // this/e.target is previous target element.
+  e.target.classList.remove('over')
+}
+
+function draggableHandleDrop(e) {
+  // this/e.target is current target element.
+  let tgt = e.target
+  let src = document.querySelector("[data-move-id=\"" + e.dataTransfer.getData("text/plain") + "\"]")
+
+  // Don't do anything if we're dropping on the same column we're dragging.
+  if (src == tgt) {
+    return false
+  }
+  
+  let tgtPrev = tgt.previousSibling
+  src.replaceWith(tgt)
+  tgtPrev.after(src)
+  
+  tgt.dispatchEvent(new InputEvent("input", {bubbles: true}))
+}
+
+function draggableHandleDragEnd(e) {
+  // this/e.target is the source node.
+  for (e of document.querySelectorAll("[draggable].over")) {
+    e.classList.remove("over")
+  }
+  for (e of document.querySelectorAll("[draggable].moving")) {
+    e.classList.remove("moving")
+  }
+}
+
+function sortableInit(event) {
+  for (let e of document.querySelectorAll("[draggable]")) {
+    e.addEventListener('dragstart', draggableHandleDragStart, false)
+    e.addEventListener('dragenter', draggableHandleDragEnter, false)
+    e.addEventListener('dragover', draggableHandleDragOver, false)
+    e.addEventListener('dragleave', draggableHandleDragLeave, false)
+    e.addEventListener('drop', draggableHandleDrop, false)
+    e.addEventListener('dragend', draggableHandleDragEnd, false)
+  }
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", sortableInit)
+} else {
+  sortableInit()
+}
diff --git a/example-puzzles/example/5/helpers.js b/example-puzzles/example/5/helpers.js
index 39f4231..f8cf28a 100644
--- a/example-puzzles/example/5/helpers.js
+++ b/example-puzzles/example/5/helpers.js
@@ -78,6 +78,7 @@ function helperActivate(e) {
   }
 }
 
+
 function helperInit(event) {
   for (let e of document.querySelectorAll(".answer")) {
     helperActivate(e)
diff --git a/example-puzzles/example/5/puzzle.moth b/example-puzzles/example/5/puzzle.moth
index 9455156..1cbdffb 100644
--- a/example-puzzles/example/5/puzzle.moth
+++ b/example-puzzles/example/5/puzzle.moth
@@ -1,6 +1,7 @@
 Summary: Using JavaScript Input Helpers
 Author: neale
 Script: helpers.js
+Script: draggable.js
 Answer: helper
 
 MOTH only takes static answers:
@@ -42,6 +43,13 @@ Free input, sorted, concatenated values
   <li><button class="expand" title="Add another input">➕</button><l/i>
 </ul>
 
+User-draggable values
+<ul class="answer">
+  <li draggable="true"><input value="First" readonly></li>
+  <li draggable="true"><input value="Third" readonly></li>
+  <li draggable="true"><input value="Second" readonly></li>
+</ul>
+
 Select from an ordered list of options
 <ul class="answer">
   <li><input type="checkbox" value="horn">Horns</li>
diff --git a/src/instance.go b/src/instance.go
index 1d3a26f..28f9fa0 100644
--- a/src/instance.go
+++ b/src/instance.go
@@ -24,6 +24,7 @@ type Instance struct {
 
 	categories       map[string]*Mothball
 	update           chan bool
+	puzzleList       map[string]int{}
 	jPuzzleList      []byte
 	jPointsLog       []byte
 	nextAttempt      map[string]time.Time
diff --git a/theme/basic.css b/theme/basic.css
index 9614028..1cbed97 100644
--- a/theme/basic.css
+++ b/theme/basic.css
@@ -116,3 +116,20 @@ input:invalid {
     transform: rotate(360deg);
   }
 }
+
+li[draggable]::before {
+  content: "↕";
+  padding: 0.5em;
+  cursor: move;
+}
+li[draggable] {
+  list-style: none;
+}
+
+[draggable].moving {
+  opacity: 0.4;
+}
+
+[draggable].over {
+  border: 1px white dashed;
+}