@hidemikimura/chit-ui 0.2.0 → 0.3.1

package/src/controllers/scroll-lock-controller.js

@@ -0,0 +1,185 @@
+// @ts-check
+
+/** @import { ReactiveController, LitElement } from 'lit' */
+
+/** How far a finger must travel before the gesture's direction is trusted. */
+const THRESHOLD = 3;
+
+/** Slack on the "is there anywhere left to scroll" reading, in pixels. */
+const EDGE_SLACK = 1;
+
+/** Overflow values that make an element a scroll container. */
+const SCROLLABLE = /^(auto|scroll|overlay)$/;
+
+/**
+ * Keeps a touch that lands on the open panel from scrolling the page behind
+ * it.
+ *
+ * `overscroll-behavior: contain` is on the message list already, and it does
+ * the job for the case it covers: a list that can scroll, dragged past its
+ * own end. It has nothing to say about the cases that actually leak. A short
+ * conversation does not overflow, so the list is not a scroll container at
+ * all and the touch goes straight through to the document — which is what a
+ * reader on an iPhone sees as the page sliding around underneath a chat that
+ * looks like it should be holding still. The same happens for a touch that
+ * starts on the title bar or beside the input.
+ *
+ * So the rule is decided here instead: a touch on the panel may scroll
+ * something inside the panel, and otherwise it does nothing. On the first
+ * move of each gesture the controller looks along the touch's own path —
+ * `composedPath`, so a scroller inside a consumer's component counts too —
+ * for something that can still travel in the direction the finger is going.
+ * Finding one, it stands aside for the rest of the gesture; finding none, it
+ * cancels the move, and iOS then takes the whole gesture as "not a scroll".
+ *
+ * Two touches are left alone: that is a pinch, and zooming is the reader's.
+ * A move that is no longer cancelable is left alone too — the browser has
+ * already committed to scrolling, and `overscroll-behavior` is what keeps
+ * that inside the list.
+ *
+ * @implements {ReactiveController}
+ */
+export class ScrollLockController {
+  /** @type {LitElement} */
+  #host;
+
+  /** @type {HTMLElement | null} */
+  #panel = null;
+
+  /**
+   * The gesture in flight: where it started, and what was decided about it.
+   *
+   * @type {{ x: number, y: number, verdict: 'undecided' | 'allow' | 'block' } | undefined}
+   */
+  #touch;
+
+  /** @param {LitElement} host */
+  constructor(host) {
+    this.#host = host;
+    host.addController(this);
+  }
+
+  hostUpdated() {
+    const panel = /** @type {HTMLElement | null} */ (
+      this.#host.renderRoot?.querySelector('[part~="panel"]') ?? null
+    );
+    if (panel === this.#panel) return;
+
+    this.#unbind();
+    this.#panel = panel;
+    this.#bind();
+  }
+
+  hostDisconnected() {
+    this.#unbind();
+  }
+
+  #bind() {
+    const panel = this.#panel;
+    if (!panel) return;
+    panel.addEventListener('touchstart', this.#onStart, { passive: true });
+    // Cancelling a move is the whole point, so this one cannot be passive.
+    panel.addEventListener('touchmove', this.#onMove, { passive: false });
+    panel.addEventListener('touchend', this.#onEnd, { passive: true });
+    panel.addEventListener('touchcancel', this.#onEnd, { passive: true });
+  }
+
+  #unbind() {
+    const panel = this.#panel;
+    if (!panel) return;
+    panel.removeEventListener('touchstart', this.#onStart);
+    panel.removeEventListener('touchmove', this.#onMove);
+    panel.removeEventListener('touchend', this.#onEnd);
+    panel.removeEventListener('touchcancel', this.#onEnd);
+    this.#panel = null;
+    this.#touch = undefined;
+  }
+
+  /** @param {TouchEvent} event */
+  #onStart = (event) => {
+    if (event.touches.length !== 1) {
+      this.#touch = undefined;
+      return;
+    }
+    const touch = event.touches[0];
+    this.#touch = { x: touch.clientX, y: touch.clientY, verdict: 'undecided' };
+  };
+
+  #onEnd = () => {
+    this.#touch = undefined;
+  };
+
+  /** @param {TouchEvent} event */
+  #onMove = (event) => {
+    const from = this.#touch;
+    if (!from) return;
+
+    // A second finger arriving turns this into a pinch. Hands off for the
+    // rest of the gesture, zoom included.
+    if (event.touches.length > 1) {
+      this.#touch = undefined;
+      return;
+    }
+
+    if (from.verdict === 'block') {
+      if (event.cancelable) event.preventDefault();
+      return;
+    }
+    if (from.verdict === 'allow') return;
+
+    const touch = event.touches[0];
+    const dx = touch.clientX - from.x;
+    const dy = touch.clientY - from.y;
+    // Too small to read a direction from, and too small for the browser to
+    // have started scrolling either.
+    if (Math.abs(dx) < THRESHOLD && Math.abs(dy) < THRESHOLD) return;
+
+    const vertical = Math.abs(dy) >= Math.abs(dx);
+    const allowed = this.#canScroll(event, vertical, vertical ? dy : dx);
+    from.verdict = allowed ? 'allow' : 'block';
+    if (!allowed && event.cancelable) event.preventDefault();
+  };
+
+  /**
+   * Is there something between the touch and the panel that can still scroll
+   * the way the finger is going?
+   *
+   * @param {TouchEvent} event
+   * @param {boolean} vertical
+   * @param {number} delta Positive when the finger moves down, or right.
+   * @returns {boolean}
+   */
+  #canScroll(event, vertical, delta) {
+    const panel = this.#panel;
+    if (!panel) return true;
+
+    for (const node of event.composedPath()) {
+      if (!(node instanceof HTMLElement)) continue;
+
+      if (this.#hasRoom(node, vertical, delta)) return true;
+      if (node === panel) break;
+    }
+    return false;
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {boolean} vertical
+   * @param {number} delta
+   * @returns {boolean}
+   */
+  #hasRoom(element, vertical, delta) {
+    const style = getComputedStyle(element);
+    const overflow = vertical ? style.overflowY : style.overflowX;
+    if (!SCROLLABLE.test(overflow)) return false;
+
+    const position = vertical ? element.scrollTop : element.scrollLeft;
+    const size = vertical ? element.clientHeight : element.clientWidth;
+    const content = vertical ? element.scrollHeight : element.scrollWidth;
+    if (content <= size + EDGE_SLACK) return false;
+
+    // A finger moving down pulls the content down, which means reading from
+    // further up: there has to be something above the current position.
+    return delta > 0 ? position > EDGE_SLACK : position < content - size - EDGE_SLACK;
+  }
+}

package/src/controllers/viewport-controller.js

@@ -0,0 +1,102 @@
+// @ts-check
+
+/** @import { ReactiveController, LitElement } from 'lit' */
+
+/**
+ * Past this the reader has pinched to zoom, and the widget stays out of it.
+ * A little over 1 because browsers report scales like 1.0000002.
+ */
+const ZOOMED = 1.01;
+
+/**
+ * Keeps the full-screen panel inside the part of the screen the reader can
+ * actually see.
+ *
+ * On a phone the panel is `position: fixed` across the whole viewport, and
+ * that viewport is not what is on screen once a keyboard slides up: the
+ * layout viewport keeps its full height, so the composer — and with it the
+ * last few messages — ends up behind the keyboard. iOS then scrolls the page
+ * to chase the focused field, which moves the fixed panel out of frame
+ * instead of helping. `dvh` is no use here either; it tracks the browser's
+ * own chrome collapsing, not the keyboard.
+ *
+ * `visualViewport` is the one thing that does report the visible box, so the
+ * panel is pinned to it: its top to `offsetTop`, its height to `height`. The
+ * composer lands just above the keyboard, and the conversation gets whatever
+ * is left.
+ *
+ * A pinch is left alone. Zooming is how a reader gets a closer look, and a
+ * panel that re-fitted itself to the magnified box would take that away by
+ * reflowing the text back to the same apparent size.
+ *
+ * @implements {ReactiveController}
+ */
+export class ViewportController {
+  /** @type {LitElement} */
+  #host;
+
+  /** @type {() => boolean} */
+  #enabled;
+
+  /** @type {(() => void) | undefined} */
+  #onChange;
+
+  /** True while the custom properties are set, to avoid pointless writes. */
+  #applied = false;
+
+  /**
+   * @param {LitElement} host
+   * @param {{ enabled: () => boolean }} options
+   */
+  constructor(host, { enabled }) {
+    this.#host = host;
+    this.#enabled = enabled;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    const viewport = window.visualViewport;
+    if (!viewport) return;
+
+    this.#onChange = () => this.#apply();
+    // Resize is the keyboard arriving and leaving; scroll is iOS shifting the
+    // visible box around while it is up.
+    viewport.addEventListener('resize', this.#onChange);
+    viewport.addEventListener('scroll', this.#onChange);
+  }
+
+  hostDisconnected() {
+    const viewport = window.visualViewport;
+    if (viewport && this.#onChange) {
+      viewport.removeEventListener('resize', this.#onChange);
+      viewport.removeEventListener('scroll', this.#onChange);
+    }
+    this.#onChange = undefined;
+    this.#clear();
+  }
+
+  hostUpdated() {
+    this.#apply();
+  }
+
+  #apply() {
+    const viewport = window.visualViewport;
+    const panel = this.#host.renderRoot?.querySelector('[part~="panel"]');
+
+    if (!viewport || !panel || !this.#enabled() || viewport.scale > ZOOMED) {
+      this.#clear();
+      return;
+    }
+
+    this.#host.style.setProperty('--_chit-vv-top', `${Math.round(viewport.offsetTop)}px`);
+    this.#host.style.setProperty('--_chit-vv-height', `${Math.round(viewport.height)}px`);
+    this.#applied = true;
+  }
+
+  #clear() {
+    if (!this.#applied) return;
+    this.#host.style.removeProperty('--_chit-vv-top');
+    this.#host.style.removeProperty('--_chit-vv-height');
+    this.#applied = false;
+  }
+}

package/src/events.js

@@ -17,6 +17,7 @@ export const Events = Object.freeze({
   BREAKPOINT_CHANGE: 'chat-breakpoint-change',
   HOME: 'chat-home',
   ATTACH: 'chat-attach',
+  MOVE: 'chat-move',
 });
 
 /**

package/src/global.d.ts

@@ -1,5 +1,5 @@
 import type { ChitUI } from './chit-ui.js';
-import type { Message, ChatState, Trigger, Device } from './types.js';
+import type { Message, ChatState, Trigger, Device, Position } from './types.js';
 
 export interface ChitUIEventMap {
   'chat-submit': CustomEvent<{ text: string }>;
@@ -17,6 +17,12 @@ export interface ChitUIEventMap {
   'chat-breakpoint-change': CustomEvent<{ device: Device }>;
   'chat-home': CustomEvent<{ trigger: Trigger }>;
   'chat-attach': CustomEvent<{ files: File[] }>;
+  'chat-move': CustomEvent<{
+    target: 'launcher' | 'panel';
+    position: Position;
+    offset: { x: number; y: number };
+    displacement: { x: number; y: number };
+  }>;
 }
 
 declare global {

package/src/i18n/labels.js

@@ -11,6 +11,8 @@
  * @property {string} attach        Attach button beside the composer.
  * @property {string} input         Composer textarea.
  * @property {string} typing        Announced while the other side is typing.
+ * @property {string} loading       Announced while waiting for an answer.
+ * @property {string} move          The panel's drag handle.
  * @property {string} toLatest      "Jump to newest" button.
  * @property {{ sending: string, sent: string, error: string }} status  Delivery state of one's own message.
  * @property {string} charactersLeft  Counter, with {n} for the number remaining.
@@ -29,6 +31,8 @@ const BUILT_IN = {
     attach: '画像や動画を添付',
     input: 'メッセージを入力',
     typing: '入力中',
+    loading: '応答を待っています',
+    move: 'チャットの位置を移動（矢印キー）',
     toLatest: '最新へ',
     status: { sending: '送信中', sent: '送信済み', error: '送信できませんでした' },
     charactersLeft: '残り {n} 文字',
@@ -44,6 +48,8 @@ const BUILT_IN = {
     attach: 'Attach an image or video',
     input: 'Type a message',
     typing: 'Typing',
+    loading: 'Waiting for a reply',
+    move: 'Move the chat (arrow keys)',
     toLatest: 'Jump to latest',
     status: { sending: 'Sending', sent: 'Sent', error: 'Not delivered' },
     charactersLeft: '{n} characters left',

package/src/index.js

@@ -7,3 +7,37 @@ if (!customElements.get('chit-ui')) {
 
 export { ChitUI };
 export { Events } from './events.js';
+
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ *
+ * @typedef {import('./types.js').Role} Role
+ * @typedef {import('./types.js').MessageStatus} MessageStatus
+ * @typedef {import('./types.js').ChatState} ChatState
+ * @typedef {import('./types.js').Trigger} Trigger
+ * @typedef {import('./types.js').Device} Device
+ * @typedef {import('./types.js').Effect} Effect
+ * @typedef {import('./types.js').Position} Position
+ * @typedef {import('./types.js').BubbleTail} BubbleTail
+ * @typedef {import('./types.js').LoadingStyle} LoadingStyle
+ * @typedef {import('./types.js').MessageBase} MessageBase
+ * @typedef {import('./types.js').TextMessage} TextMessage
+ * @typedef {import('./types.js').HtmlMessage} HtmlMessage
+ * @typedef {import('./types.js').TemplateMessage} TemplateMessage
+ * @typedef {import('./types.js').ElementMessage} ElementMessage
+ * @typedef {import('./types.js').ComponentMessage} ComponentMessage
+ * @typedef {import('./types.js').Message} Message
+ * @typedef {import('./types.js').Animation} Animation
+ * @typedef {import('./types.js').Offset} Offset
+ * @typedef {import('./types.js').ClosedTheme} ClosedTheme
+ * @typedef {import('./types.js').OpenColors} OpenColors
+ * @typedef {import('./types.js').SpeakerTheme} SpeakerTheme
+ * @typedef {import('./types.js').LoadingTheme} LoadingTheme
+ * @typedef {import('./types.js').OpenTheme} OpenTheme
+ * @typedef {import('./types.js').Theme} Theme
+ * @typedef {import('./types.js').ResolvedClosed} ResolvedClosed
+ * @typedef {import('./types.js').ResolvedOpen} ResolvedOpen
+ * @typedef {import('./types.js').ResolvedTheme} ResolvedTheme
+ */

package/src/render/launcher.js

@@ -34,7 +34,15 @@ export function renderLauncher(host) {
       aria-expanded=${host.state === 'open'}
       ?data-has-image=${!custom && !!closed.image}
       ?data-custom=${!!custom}
-      @click=${() => host.toggleFromUser()}
+      ?data-draggable=${closed.draggable}
+      @pointerdown=${(/** @type {PointerEvent} */ event) => host.launcherDrag.start(event)}
+      @keydown=${(/** @type {KeyboardEvent} */ event) => host.launcherDrag.nudge(event)}
+      @click=${() => {
+        // The pointer-up that ends a drag is followed by a click; opening the
+        // panel then would punish the reader for having moved the button.
+        if (host.launcherDrag.consumeDrag()) return;
+        host.toggleFromUser();
+      }}
     >
       ${custom ?? html`<slot name="launcher">${defaultContent(closed)}</slot>`}
     </button>

package/src/render/message-list.js

@@ -5,6 +5,34 @@ import { renderMessage } from './message.js';
 
 /** @import { ChitUI } from '../chit-ui.js' */
 
+/**
+ * The wait for an answer, at the end of the conversation.
+ *
+ * It stands where the typing bubble stands and replaces it while it is up:
+ * "typing" and "waiting for the server" are the same moment of the
+ * conversation, and two indicators for one wait would only ask the reader to
+ * work out the difference.
+ *
+ * @param {ChitUI} host
+ * @returns {import('lit').TemplateResult}
+ */
+function renderLoading(host) {
+  const { style, text } = host.currentTheme.open.loading;
+  const label = text ?? host.currentLabels.loading;
+
+  return html`
+    <div part="loading" data-style=${style} role="status" aria-label=${label}>
+      ${style === 'dots'
+        ? html`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`
+        : nothing}
+      ${style === 'spinner' ? html`<span part="spinner" aria-hidden="true"></span>` : nothing}
+      ${style === 'text' || text
+        ? html`<span part="loading-text">${label}</span>`
+        : nothing}
+    </div>
+  `;
+}
+
 /**
  * The scrolling conversation.
  *
@@ -22,7 +50,7 @@ import { renderMessage } from './message.js';
 export function renderMessageList(host) {
   const labels = host.currentLabels;
   const typing = host.typing;
-  const empty = host.messages.length === 0 && !typing;
+  const empty = host.messages.length === 0 && !typing && !host.loading;
 
   return html`
     <div
@@ -40,15 +68,17 @@ export function renderMessageList(host) {
           (message) => message.id,
           (message) => renderMessage(host, message),
         )}
-        ${typing
-          ? html`
-              <div part="typing" role="status" aria-label=${labels.typing}>
-                ${typeof typing === 'object' && typing.html
-                  ? host.renderTypingHtml(typing.html)
-                  : html`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`}
-              </div>
-            `
-          : nothing}
+        ${host.loading
+          ? renderLoading(host)
+          : typing
+            ? html`
+                <div part="typing" role="status" aria-label=${labels.typing}>
+                  ${typeof typing === 'object' && typing.html
+                    ? host.renderTypingHtml(typing.html)
+                    : html`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`}
+                </div>
+              `
+            : nothing}
       </div>
     </div>
 

package/src/render/panel.js

@@ -53,9 +53,25 @@ export function renderPanel(host) {
 function renderHeader(host, title) {
   const open = host.currentTheme.open;
   const labels = host.currentLabels;
+  const draggable = open.draggable && host.device === 'pc';
 
   return html`
-      <header part="header">
+      <header
+        part="header"
+        ?data-draggable=${draggable}
+        tabindex=${draggable ? '0' : nothing}
+        aria-label=${draggable ? labels.move : nothing}
+        @pointerdown=${(/** @type {PointerEvent} */ event) => {
+          // Only the bar itself is a handle: a drag that starts on the close
+          // button would swallow the click that closes the panel.
+          if (/** @type {HTMLElement} */ (event.target).closest('button')) return;
+          host.panelDrag.start(event);
+        }}
+        @keydown=${(/** @type {KeyboardEvent} */ event) => {
+          if (event.target !== event.currentTarget) return;
+          host.panelDrag.nudge(event);
+        }}
+      >
         <slot name="header">
           <slot name="header-title">
             <span part="header-title">

package/src/styles/composer.css.js

@@ -29,6 +29,24 @@ export const composerStyles = css`
     overflow-y: auto;
   }
 
+  /*
+   * iOS Safari zooms the page in whenever a field smaller than 16px takes
+   * focus, and it does not zoom back out when the field is done with — the
+   * reader is left with a widget wider than the screen and no obvious way
+   * back. Nothing in the page can undo that zoom short of pinning the
+   * viewport's scale, which would also take pinch-zoom away from everyone.
+   * So the field is kept at the size that never triggers it, and larger
+   * still if the theme's font is larger.
+   *
+   * Coarse pointers only: on a desktop the same rule would make the field
+   * stand out from the rest of the widget for no reason.
+   */
+  @media (pointer: coarse) {
+    [part~='input'] {
+      font-size: max(16px, 1em);
+    }
+  }
+
   [part~='input']::placeholder {
     color: var(--chit-color-input-placeholder);
   }

package/src/styles/launcher.css.js

@@ -23,6 +23,19 @@ export const launcherStyles = css`
     transition: filter 120ms ease;
   }
 
+  /*
+   * A draggable launcher takes the touch gestures for itself, so a finger on
+   * it moves the button instead of scrolling the page behind it.
+   */
+  [part~='launcher'][data-draggable] {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  [part~='launcher'][data-draggable]:active {
+    cursor: grabbing;
+  }
+
   /* The image comes from the theme, so it is a background rather than an <img>. */
   [part~='launcher'][data-has-image] {
     background-image: var(--chit-launcher-image);