Add drag-and-drop

diff --git a/index.php b/index.php
index 359c72007d109470b035d3f9f01cdea55c81aba0..a2e94ba8f7d88490c06e34d1445e86c3df616227 100644 (file)
--- a/index.php
+++ b/index.php
@@ -100,7 +100,7 @@ function create_new_poll($title, $options, $enddate)
     $qid = $q['qid'];
 
     // Create options (splitting input into lines)
-    foreach(preg_split("/((\r?\n)|(\r\n?))/", $options) as $o)
+    foreach(preg_split("/((\r?\n)|(\r\n?))/", trim($options)) as $o)
     {
         query_db(
             "INSERT INTO options(qid, name) VALUES (?, ?)",
@@ -153,10 +153,14 @@ if (isset($qid) && isset($_GET['count'])) {
 }
 
 $ended = false;
-if (isset($qid)) {
+if (isset($qid))
+{
     $enddate = get_end_date($qid);
-    $nowdate = gmdate("Y-m-d\TH:i");
-    $ended = $nowdate > $enddate;
+    if ($enddate)
+    {
+        $nowdate = gmdate("Y-m-d\TH:i");
+        $ended = $nowdate > $enddate;
+    }
 }
 
 ?>
@@ -178,6 +182,9 @@ if (isset($qid)) {
     input, textarea {
         font-family: sans-serif;
         font-size: 1em;
+        box-sizing: border-box;
+        width: 100%;
+        margin-bottom: 0.5em;
     }
     input[type=submit] {
         background: #fdf;
@@ -194,6 +201,12 @@ if (isset($qid)) {
         border: none;
         color: #434;
     }
+    input[type=number] {
+        width: unset;
+    }
+    form {
+        line-height: 1.5em;
+    }
     ul {
         list-style-type: none;
         padding: 0px;
@@ -202,6 +215,11 @@ if (isset($qid)) {
         margin: 10px 0px;
         line-height: 1.1em;
     }
+    li[draggable=true] {
+        cursor: grab;
+        padding: 0.8em;
+        border: 1px solid #cca;
+    }
     hr {
         border: none;
         border-top: 1px solid #cca;
@@ -234,27 +252,72 @@ if (isset($qid)) {
 if (isset($qid) && $view == "vote" && !$ended): ?>
 
     <h2><?= get_title($qid) ?></h2>
-<?php if (isset($enddate)): ?>
+<?php if ($enddate): ?>
     <p>Closes: <input type="datetime-local" value="<?= $enddate ?>" disabled> (UTC)</p>
 <?php endif ?>
+    <!--
     <p>
         The option with the most points wins!
         Give your favorite option 5 points, second favorite 4 points, etc.
         Or give them all 5 points if you really can't decide.
     </p> 
+    -->
     
     <hr>
     <form method="post">
         <input name="qid" type="hidden" value="<?= $qid ?>">
         <ul>
-        <?php foreach (get_options($qid) as $opt): ?>
-            <li><input name="opt-<?= $opt ?>" type="number" min="0" max="5">
-                <b><?= $opt ?></b></li>
+        <?php
+        $options = get_options($qid);
+        $num_opts = count($options);
+        foreach ($options as $index => $opt):
+            $points = $num_opts - $index;
+        ?>
+            <li draggable="true">
+                <input hidden name="opt-<?= $opt ?>" type="number"
+                        min="1" max="<?= $num_opts ?>" value="<?= $points ?>">
+                <b><?= $opt ?></b>
+            </li>
         <?php endforeach ?>
         </ul>
         <input type="submit" value="Cast Vote!">
     </form>
 
+    <script>
+    // Drag-and-drop
+    var draggedElement;
+    document.querySelectorAll("li[draggable='true']").forEach((item) => {
+        item.addEventListener("dragstart", (e) => {
+            draggedElement = item;
+        });
+
+        item.addEventListener("dragenter", (e) => {
+
+            // No need to replace item with itself
+            if (draggedElement === item) return;
+
+            const list = draggedElement.parentElement;
+            var listItems = Array.from(list.children)
+                .filter((i) => (i.tagName == "LI"));
+
+            // Move draggedElement to position of the currently hovered one
+            var oldIndex = listItems.indexOf(draggedElement);
+            var newIndex = listItems.indexOf(item);
+            listItems.splice(oldIndex, 1);
+            listItems.splice(newIndex, 0, draggedElement);
+            list.replaceChildren(...listItems);
+
+            // Update point values based on new positions
+            var points = listItems.length;
+            listItems.forEach((i) => {
+                var input = i.querySelector("input");
+                input.value = points.toString();
+                points --;
+            });
+        });
+    });
+    </script>
+
     <hr>
     <br><a href="<?= poll_url($qid, "results") ?>">Show Results</a>
     <br><br><a href="/">New Poll</a>