Workshop Kit · referencia del widget

Publicado

drag-rank

Un ordenador forzado con teclado primero. Los operadores reorganizan una lista de tarjetas haciendo clic en botones arriba/abajo; el widget guarda el nuevo orden de ids en una clave de contexto con cada cambio. La coloración de severidad opcional resalta el tercio superior (rojo, urgente) y atenúa el tercio inferior — útil para el diagnóstico de "qué está perdiendo" y los patrones de priorización forzada de "qué importa más".

Demo en vivo

Dos variantes — un ordenador neutral (sin coloración de severidad) y un ordenador de severidad que marca visualmente el tercio superior como urgente. Los dos escriben en MuntinContext; reordena, recarga, tu orden persiste.

Neutral · data-context-key="demoSiteJobs"

Coloración de severidad · data-severity="true"

MuntinContext actual (las dos claves de demo arriba, arreglos de ids ordenados) Reordena algo arriba…

Contrato

El widget lee sus elementos desde un bloque de configuración JSON en línea. El autor de la lección nombra la clave de contexto + (opcional) instrucción + (opcional) bandera de severidad vía atributos data. El motor de widgets se encarga del descubrimiento, hidratación y commit.

Atributo	Tipo	Propósito
`data-widget`Requerido	literal	Siempre `"drag-rank"`.
`data-context-key`Requerido	cadena	Dónde aterriza el arreglo de ids ordenados en `MuntinContext`. La forma es `["id1", "id2", …]` — un arreglo de los ids de los elementos en el orden actual.
`data-instruction`	cadena	Indicación renderizada encima de la lista. `data-instruction-es` para la copia en español en la misma instancia del widget.
`data-severity`	booleano	Pon `"true"` para marcar visualmente el tercio superior como urgente (borde rojo) y atenuar el tercio inferior. Útil para diagnósticos; apagado por defecto.
`<script class="drag-rank-items" type="application/json">`Requerido	arreglo JSON	Configuración de elementos en línea — arreglo de objetos `{id, label, label-es, desc, desc-es}`. `id` es el identificador estable que se escribe al contexto; `label`/`desc` se renderizan visualmente. El widget renderiza los elementos en el orden actual (del contexto si existe, si no, el orden de origen).

Qué escribe: en cada reordenamiento, el widget guarda el arreglo de ids en la clave de contexto nombrada, emite mtn:context-change, y anuncia el movimiento vía una región de aria-live polite (por ej., "El teléfono manda a buzón movido al puesto 1 de 6"). La hidratación al montar restaura el orden guardado; los elementos nuevos agregados a la configuración pero ausentes del orden guardado aterrizan al final.

Marcado

<section class="course-widget" data-widget="drag-rank" data-context-key="siteJobsRank" data-severity="true" data-instruction="What's a site for? Rank from most to least important." data-instruction-es="¿Para qué sirve un sitio? Ordena de más a menos importante."> <script class="drag-rank-items" type="application/json"> /* id es estable; label / desc son visibles; variantes -es por locale */ [ {"id":"book","label":"Book a table","label-es":"Reservar una mesa", "desc":"Diners arriving via OpenTable.","desc-es":"Comensales llegando vía OpenTable."}, /* … */ ] </script> </section>

Modelo de teclado

Sin arrastrar y soltar de HTML5. Cada reordenamiento pasa por los botones arriba/abajo en cada fila, lo que significa:

Tab recorre la lista. Cada elemento es enfocable; las flechas se mueven dentro de los botones.
Los botones arriba/abajo son <button> reales. Presionar uno mueve el elemento un puesto. El foco se queda en el mismo botón después de reordenar (para que puedas seguir presionando para mover varios puestos).
La región de aria-live polite anuncia el nuevo puesto a los lectores de pantalla ("El teléfono movido al puesto 1 de 6") para que los usuarios de tecnología de asistencia escuchen el cambio estructural.
El primer y último elemento tienen su botón arriba / abajo desactivado apropiadamente — sin objetivo de teclado huérfano en los bordes.

Esto es deliberado. El arrastrar y soltar de HTML5 es poco confiable en móvil, hostil a la navegación por teclado, e históricamente inaccesible. Botones + región en vivo le gana en cada eje que le importa al operador.

Dónde se publica

Código fuente

/tools/_shared/workshop/drag-rank.js — ~250 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Lee el JSON de elementos en línea, renderiza la lista, conecta los botones arriba/abajo, maneja el foco + región de aria-live polite, guarda el arreglo de ids con cada reordenamiento.

Orden de hidratación: el estado guardado (desde MuntinContext[contextKey]) gana, luego los ids desconocidos de la configuración de elementos se agregan al final. Los ids de elementos renombrados (un cambio de configuración) dejan el id viejo huérfano en el estado guardado — el widget registra una advertencia en la consola y renderiza los elementos restantes en su orden canónico.

← Volver al Workshop Kit