@operato/event-view 10.29.76 → 10.29.79

package/test/selectable.test.ts

@@ -0,0 +1,62 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+
+/**
+ * A calendar picks dates only when the host says it is a picker.
+ *
+ * Every calendar used to take a press or drag over its days as a range selection, and set
+ * touch-action: none on them so the browser would not read the drag as a scroll. On a phone that
+ * left screens which only show a calendar unable to scroll past it.
+ */
+
+async function grid(mode: 'monthly' | 'weekly', selectable: boolean) {
+  const el = (await fixture(
+    html`<ox-event-view mode=${mode} ?selectable=${selectable}></ox-event-view>`
+  )) as OxEventView
+  await el.updateComplete
+  await new Promise(resolve => setTimeout(resolve, 50))
+
+  const view = el.renderRoot.querySelector(mode === 'monthly' ? 'calendar-monthly' : 'calendar-weekly')!
+  const days = Array.from(view.shadowRoot!.querySelectorAll('li[date]')) as HTMLElement[]
+  return { el, days }
+}
+
+function drag(from: HTMLElement, to: HTMLElement) {
+  const init = { bubbles: true, composed: true, cancelable: true, pointerId: 1, pointerType: 'touch' }
+  const down = new PointerEvent('pointerdown', init)
+  from.dispatchEvent(down)
+  to.dispatchEvent(new PointerEvent('pointermove', init))
+  to.dispatchEvent(new PointerEvent('pointerup', init))
+  return down
+}
+
+for (const mode of ['monthly', 'weekly'] as const) {
+  describe(`${mode} calendar selection`, () => {
+    it('a calendar that only shows leaves touch to the page and selects nothing', async () => {
+      const { el, days } = await grid(mode, false)
+      let selected = 0
+      el.addEventListener('select-date', () => selected++)
+
+      expect(getComputedStyle(days[1]).touchAction).to.equal('auto')
+
+      const down = drag(days[1], days[3])
+      expect(down.defaultPrevented).to.be.false
+      expect(selected).to.equal(0)
+      expect(days.some(day => day.hasAttribute('selected'))).to.be.false
+    })
+
+    it('a picker takes touch and reports the dragged range', async () => {
+      const { el, days } = await grid(mode, true)
+      let detail: Date[] | undefined
+      el.addEventListener('select-date', e => (detail = (e as CustomEvent).detail))
+
+      expect(getComputedStyle(days[1]).touchAction).to.equal('none')
+
+      const down = drag(days[3], days[1])
+      expect(down.defaultPrevented).to.be.true
+      expect(detail).to.deep.equal([(days[1] as any).date, (days[3] as any).date])
+    })
+  })
+}

package/themes/calendar-theme.css

@@ -3,7 +3,7 @@ body {
 
   /* monthly common color */
   --calendar-monthly-text-color: var(--md-sys-color-secondary);
-  --calendar-monthly-border: 1px solid rgba(0, 0, 0, 0.1);
+  --calendar-monthly-border: 1px solid var(--md-sys-color-outline-variant);
   --calendar-monthly-border-width: 0 1px 1px 0px;
 
   /* monthly layout */
@@ -21,16 +21,17 @@ body {
   --calendar-monthly-date-label-color: var(--md-sys-color-on-primary);
   --calendar-monthly-date-min-height: 120px;
 
-  --calendar-monthly-background-color: #f4f4f4;
+  --calendar-monthly-background-color: var(--md-sys-color-surface-container-low);
+  --calendar-monthly-color: var(--md-sys-color-on-surface);
   --calendar-monthly-event-border-radius: var(--border-radius);
   --calendar-monthly-event-margin: var(--padding-narrow) 0 0 0;
   --calendar-monthly-event-padding: 2px var(--padding-default);
-  --calendar-monthly-event-border: 3px solid #ccc;
+  --calendar-monthly-event-border: 3px solid var(--md-sys-color-outline);
   --calendar-monthly-event-border-width: 0 0 0 3px;
 
   /* weekly common color */
   --calendar-weekly-text-color: var(--md-sys-color-secondary);
-  --calendar-weekly-border: 1px solid rgba(0, 0, 0, 0.1);
+  --calendar-weekly-border: 1px solid var(--md-sys-color-outline-variant);
   --calendar-weekly-border-width: 0 1px 1px 0px;
 
   /* weekly layout */
@@ -47,11 +48,11 @@ body {
   --calendar-weekly-date-label-padding: 0px 6px;
   --calendar-weekly-date-label-color: var(--md-sys-color-on-primary);
 
-  --calendar-weekly-background-color: #f4f4f4;
+  --calendar-weekly-background-color: var(--md-sys-color-surface-container-low);
   --calendar-weekly-event-border-radius: var(--border-radius);
   --calendar-weekly-event-margin: var(--padding-narrow) 0 0 0;
   --calendar-weekly-event-padding: 2px var(--padding-default);
-  --calendar-weekly-event-border: 3px solid #ccc;
+  --calendar-weekly-event-border: 3px solid var(--md-sys-color-outline);
   --calendar-weekly-event-border-width: 0 0 0 3px;
 }