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
  • +User-draggable values + + Select from an ordered list of options