Make stay bands draggable to move stays between days
Dragging any week-segment of a stay band onto an in-range day moves the whole stay there, preserving its length (same one-PATCH date+end_date shift the multi-day chips use). Clicking a band still opens the editor.
This commit is contained in:
@@ -196,8 +196,9 @@ function chip(entry, currency) {
|
||||
? el('span', { class: 'chip-price' }, formatMoney(entry.price, currency, { compact: true }))
|
||||
: null,
|
||||
);
|
||||
// Regular chips are drag sources (move the entry to another day). The
|
||||
// "…continues" and "dropoff" ghost chips and stay bands stay non-draggable.
|
||||
// Regular chips are drag sources (move the entry to another day), same as
|
||||
// stay area bands (see stayBands.js). The "…continues" and "dropoff" ghost
|
||||
// chips stay non-draggable — they're derived markers, not the entry itself.
|
||||
makeChipDraggable(node, entry);
|
||||
return node;
|
||||
}
|
||||
|
||||
Vendored
+18
-2
@@ -1,6 +1,7 @@
|
||||
// HTML5 drag-and-drop helpers, no libraries. Three flows:
|
||||
// • Calendar — drag a day chip onto another in-range day to move that entry
|
||||
// (shifts end_date by the same delta so multi-day spans stay intact).
|
||||
// • Calendar — drag a day chip (or a stay area band) onto another in-range
|
||||
// day to move that entry (shifts end_date by the same delta so multi-day
|
||||
// spans / stay lengths stay intact).
|
||||
// • Day editor — drag a row's handle to reorder entries within one day.
|
||||
// • Trip dashboard — drag a card's handle to reorder trips (shares the day
|
||||
// editor's row-reorder machinery, see enableReorder below).
|
||||
@@ -30,6 +31,21 @@ export function makeChipDraggable(node, entry) {
|
||||
node.addEventListener('dragend', () => node.classList.remove('dragging'));
|
||||
}
|
||||
|
||||
// Mark a stay area band segment as a drag source carrying its entry id. Same
|
||||
// mechanics as makeChipDraggable — dropping on an in-range day moves the
|
||||
// whole stay to start there, preserving its length (end_date shifts by the
|
||||
// same delta in makeDayDropTarget below).
|
||||
export function makeBandDraggable(node, entry) {
|
||||
node.setAttribute('draggable', 'true');
|
||||
node.classList.add('cal-band-draggable');
|
||||
node.addEventListener('dragstart', (e) => {
|
||||
e.dataTransfer.setData(DND_MIME, String(entry.id));
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
node.classList.add('dragging');
|
||||
});
|
||||
node.addEventListener('dragend', () => node.classList.remove('dragging'));
|
||||
}
|
||||
|
||||
// Wire an in-range day cell as a drop target. On drop the dragged entry moves to
|
||||
// `targetDate` with sort_order = `targetCount` (appended after that day's
|
||||
// entries); an entry with an end_date has it shifted by the same day-delta in
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
// partitioning) so a stay keeps the same vertical position across weeks.
|
||||
import { el } from '../dom.js';
|
||||
import { parseYMD, daysBetweenInclusive, typeInfo, stayShortName, entrySpanDays } from '../format.js';
|
||||
import { makeBandDraggable } from './dragdrop.js';
|
||||
|
||||
// Per-instance band palette: each stay gets its own hue (not the generic stay
|
||||
// type colour) so overlapping/adjacent areas read apart. Muted-but-distinct
|
||||
@@ -97,6 +98,9 @@ export function renderWeekBands(weekYmd, layout, tctx) {
|
||||
band.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(e); }
|
||||
});
|
||||
// Standard HTML5 DnD doesn't fire click after a real drag, so a plain
|
||||
// click still opens the day editor with no extra guard needed.
|
||||
makeBandDraggable(band, s.entry);
|
||||
strip.appendChild(band);
|
||||
}
|
||||
return strip;
|
||||
|
||||
Reference in New Issue
Block a user