SortableList Console Test v3

Details

Raw Data

{
  "id": "996073e5-10ab-4191-9c78-8f625e60b44b",
  "type": "general",
  "status": "completed",
  "title": "SortableList Console Test v3",
  "description": "Testing inline script execution fix in dashboard console",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 12px 0;\">🧪 SortableList Console Test v3</h2>\n<p style=\"color:#9ca3af;margin:0 0 16px 0;\">Testing that inline scripts now execute in dashboard console (after <code>appendHtml</code> fix).</p>\n\n<div class=\"sortable-list-container\" id=\"console-test-v3\">\n  <h4 class=\"sortable-title\">Priority Order</h4>\n  <p class=\"sortable-hint\">Drag to reorder (touch or mouse)</p>\n  <div class=\"sortable-list\" data-list-id=\"console-test-v3\">\n    <div class=\"sortable-item\" data-id=\"alpha\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">1</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">Alpha</span>\n        <span class=\"sortable-desc\">First item</span>\n      </div>\n    </div>\n    <div class=\"sortable-item\" data-id=\"beta\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">2</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">Beta</span>\n        <span class=\"sortable-desc\">Second item</span>\n      </div>\n    </div>\n    <div class=\"sortable-item\" data-id=\"gamma\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">3</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">Gamma</span>\n        <span class=\"sortable-desc\">Third item</span>\n      </div>\n    </div>\n  </div>\n  <button class=\"sortable-submit-btn\" onclick=\"submitSortableOrder_console_test_v3()\">Submit Order</button>\n</div>\n\n<script>\n(function() {\n  const listId = 'console-test-v3';\n  const container = document.querySelector('#' + listId + ' .sortable-list');\n  if (!container) { console.error('[SortableList] Container not found:', listId); return; }\n\n  let draggedItem = null;\n  let touchStartY = 0;\n  let touchCurrentY = 0;\n\n  container.querySelectorAll('.sortable-item').forEach(item => {\n    // Desktop drag events\n    item.addEventListener('dragstart', (e) => {\n      draggedItem = item;\n      item.classList.add('dragging');\n      e.dataTransfer.effectAllowed = 'move';\n    });\n    item.addEventListener('dragend', () => {\n      item.classList.remove('dragging');\n      draggedItem = null;\n      updateNumbers();\n    });\n    item.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      if (!draggedItem || draggedItem === item) return;\n      const rect = item.getBoundingClientRect();\n      const midY = rect.top + rect.height / 2;\n      if (e.clientY < midY) {\n        container.insertBefore(draggedItem, item);\n      } else {\n        container.insertBefore(draggedItem, item.nextSibling);\n      }\n    });\n\n    // Mobile touch events\n    item.addEventListener('touchstart', (e) => {\n      if (e.touches.length !== 1) return;\n      draggedItem = item;\n      touchStartY = e.touches[0].clientY;\n      touchCurrentY = touchStartY;\n      item.classList.add('dragging');\n      e.preventDefault();\n    }, { passive: false });\n\n    item.addEventListener('touchmove', (e) => {\n      if (!draggedItem || draggedItem !== item) return;\n      if (e.touches.length !== 1) return;\n      e.preventDefault();\n      touchCurrentY = e.touches[0].clientY;\n      const items = Array.from(container.querySelectorAll('.sortable-item'));\n      for (const targetItem of items) {\n        if (targetItem === draggedItem) continue;\n        const rect = targetItem.getBoundingClientRect();\n        const midY = rect.top + rect.height / 2;\n        if (touchCurrentY >= rect.top && touchCurrentY <= rect.bottom) {\n          if (touchCurrentY < midY) {\n            container.insertBefore(draggedItem, targetItem);\n          } else {\n            container.insertBefore(draggedItem, targetItem.nextSibling);\n          }\n          break;\n        }\n      }\n    }, { passive: false });\n\n    item.addEventListener('touchend', () => {\n      if (!draggedItem) return;\n      draggedItem.classList.remove('dragging');\n      draggedItem = null;\n      touchStartY = 0;\n      touchCurrentY = 0;\n      updateNumbers();\n    });\n\n    item.addEventListener('touchcancel', () => {\n      if (!draggedItem) return;\n      draggedItem.classList.remove('dragging');\n      draggedItem = null;\n    });\n  });\n\n  function updateNumbers() {\n    container.querySelectorAll('.sortable-item').forEach((item, idx) => {\n      item.querySelector('.sortable-number').textContent = idx + 1;\n    });\n  }\n\n  window['getSortableOrder_console_test_v3'] = function() {\n    return Array.from(container.querySelectorAll('.sortable-item')).map(item => item.getAttribute('data-id'));\n  };\n\n  window['submitSortableOrder_console_test_v3'] = function() {\n    const order = window['getSortableOrder_console_test_v3']();\n    alert('Order: ' + order.join(', '));\n  };\n\n  console.log('[SortableList] Initialized:', listId, '(touch enabled)');\n})();\n</script>\n<style>\n.sortable-list-container {\n  background: #2d2d2d;\n  padding: 16px;\n  border-radius: 8px;\n  margin: 12px 0;\n}\n.sortable-title {\n  color: #fff;\n  margin: 0 0 8px 0;\n  font-size: 1rem;\n}\n.sortable-hint {\n  color: #7f848e;\n  font-size: 0.85rem;\n  margin: 0 0 12px 0;\n}\n.sortable-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.sortable-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: #3d3d3d;\n  padding: 12px;\n  border-radius: 6px;\n  cursor: grab;\n  transition: background 0.2s, transform 0.2s;\n  user-select: none;\n  touch-action: none;\n  -webkit-touch-callout: none;\n}\n.sortable-item:hover {\n  background: #4d4d4d;\n}\n.sortable-item.dragging {\n  opacity: 0.5;\n  background: #5d5d5d;\n  cursor: grabbing;\n}\n.sortable-handle {\n  color: #7f848e;\n  font-size: 1.2rem;\n  cursor: grab;\n}\n.sortable-number {\n  background: #c99542;\n  color: #000;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: bold;\n  font-size: 0.85rem;\n}\n.sortable-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.sortable-label {\n  color: #e0e0e0;\n  font-weight: 500;\n}\n.sortable-desc {\n  color: #7f848e;\n  font-size: 0.85rem;\n}\n.sortable-submit-btn {\n  margin-top: 16px;\n  background: linear-gradient(135deg, #c99542 0%, #e3af5b 100%);\n  color: #000;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 6px;\n  font-weight: 600;\n  cursor: pointer;\n  width: 100%;\n}\n.sortable-submit-btn:hover {\n  filter: brightness(1.1);\n}\n</style>\n\n<div style=\"background:#2d2d2d;padding:12px;border-radius:6px;margin-top:16px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">Expected Behavior:</h4>\n<ul style=\"color:#9ca3af;margin:0;padding-left:20px;line-height:1.8;\">\n<li>Console should log: <code>[SortableList] Initialized: console-test-v3 (touch enabled)</code></li>\n<li>Items should be draggable on both desktop (mouse) and mobile (touch)</li>\n<li>Numbers should update after reordering</li>\n<li>Submit button should show alert with current order</li>\n</ul>\n</div>\n</div>",
    "choices": [
      {
        "label": "Touch works!",
        "value": "Touch drag now works in dashboard console! Continue to Step 5 (StepWizard)",
        "primary": true
      },
      {
        "label": "Still broken",
        "value": "Touch drag still not working in dashboard console - investigate further"
      },
      {
        "label": "Partial fix",
        "value": "Script executes but touch still has issues - need more investigation"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T06:12:21.955Z",
  "updatedAt": "2026-01-07T06:12:22.161Z",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "components",
    "testing"
  ],
  "targetUser": "claude"
}