@signalk/app-dock 1.2.0 → 1.3.0

package/README.md

@@ -37,6 +37,26 @@ Tip: double-tapping a clickable element in the underlying webapp will activate t
 
 Config changes made in **Plugin Config** apply automatically within ~5 seconds: structural changes (position, icon size, etc.) reload the dock page; changes to the app list hot-update in place.
 
+## Apps on another origin
+
+The dock notices a double-tap by listening inside each app's page, and a browser allows that only for pages on the same origin (scheme, host and port) as the dock. A page from another port or host is out of reach: the app itself, a page the app moves its frame to (such as a radar display opened directly on its own server), or one the app shows in a frame of its own. While any such page in the app on screen does not forward its taps, a small tab at the dock's edge opens the dock with a single tap.
+
+An app on another origin can bring back double-tap by forwarding its pointerdowns to the dock:
+
+```js
+if (window.self !== window.top) {
+  document.addEventListener(
+    'pointerdown',
+    (e) => {
+      window.top.postMessage({ type: 'signalk-app-dock:pointerdown', x: e.clientX, y: e.clientY }, '*')
+    },
+    { passive: true, capture: true }
+  )
+}
+```
+
+The dock accepts these messages only from a page of the app on screen that it cannot listen to itself, or a frame inside that page, and all they do is count towards a double-tap. The tab goes away once every such page has sent one. A page that loads again starts over: the tab is back until its first tap.
+
 ## Install as an app
 
 The dock ships a web app manifest, so iOS and Android can install it to the home screen and launch it like a native app -- no Safari/Chrome chrome, no URL bar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/app-dock",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
   "repository": {
     "url": "https://github.com/SignalK/app-dock"
@@ -22,6 +22,11 @@
     ]
   },
   "main": "plugin/index.js",
+  "files": [
+    "plugin/",
+    "public/",
+    "docs/screenshots/"
+  ],
   "scripts": {
     "build:config": "webpack",
     "prepublishOnly": "webpack",

package/public/app-icon.svg

@@ -5,10 +5,8 @@
       <stop offset="100%" stop-color="#2563eb"/>
     </linearGradient>
   </defs>
-  <!-- White base -->
-  <rect width="72" height="72" fill="#ffffff"/>
-  <!-- Background -->
-  <rect width="72" height="72" rx="16" fill="url(#bg)"/>
+  <!-- Background, full bleed: whatever displays the icon rounds the corners -->
+  <rect width="72" height="72" fill="url(#bg)"/>
   <!-- Dock pill -->
   <rect x="8" y="48" width="56" height="16" rx="8" fill="#ffffff" fill-opacity="0.25" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5"/>
   <!-- Dock icons - 3 squares in the pill -->

package/public/dock.css

@@ -99,6 +99,68 @@ body {
   }
 }
 
+/* ─── Handle over an app on another origin ─────────────────────────────────── */
+/* The padding is the touch target; the bar itself is drawn by ::before. */
+#dock-handle {
+  position: fixed;
+  z-index: 5;
+  display: none;
+  padding: 12px 18px;
+  border: none;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+#dock-handle.visible {
+  display: block;
+}
+
+#dock-handle::before {
+  content: '';
+  display: block;
+  width: 56px;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+}
+
+#dock-handle.pos-bottom {
+  bottom: env(safe-area-inset-bottom, 0px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#dock-handle.pos-top {
+  top: env(safe-area-inset-top, 0px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#dock-handle.pos-left {
+  left: env(safe-area-inset-left, 0px);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 18px 12px;
+}
+
+#dock-handle.pos-right {
+  right: env(safe-area-inset-right, 0px);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 18px 12px;
+}
+
+#dock-handle.pos-left::before,
+#dock-handle.pos-right::before {
+  width: 6px;
+  height: 56px;
+}
+
 /* ─── Backdrop ──────────────────────────────────────────────────────────────── */
 #dock-backdrop {
   position: fixed;

package/public/dock.js

@@ -164,6 +164,7 @@
   const $loadingLabel = document.getElementById('loading-label')
   const $idleHint = document.getElementById('idle-hint')
   const $idleHintText = document.getElementById('idle-hint-text')
+  const $dockHandle = document.getElementById('dock-handle')
 
   // ─── State ───────────────────────────────────────────────────────────────────
   let dockVisible = false
@@ -250,6 +251,7 @@
   const pos = cfg.position
   $dock.classList.add(`pos-${pos}`)
   $dockInner.classList.add(`align-${pos}`)
+  $dockHandle.classList.add(`pos-${pos}`)
 
   const isVertical = pos === 'left' || pos === 'right'
   if (isVertical) $dockInner.classList.add('layout-vertical')
@@ -576,6 +578,7 @@
     dockShownAt = Date.now()
     $dock.classList.add('visible')
     $backdrop.classList.add('visible')
+    updateHandle()
   }
 
   function hideDock() {
@@ -585,6 +588,7 @@
     $dock.classList.remove('visible')
     $backdrop.classList.remove('visible')
     resetMagnification()
+    updateHandle()
   }
 
   $backdrop.addEventListener('click', (e) => {
@@ -649,6 +653,7 @@
     }
 
     iframes[app.url].classList.add('active')
+    updateHandle()
     hideDock()
   }
 
@@ -665,6 +670,9 @@
   let lastTapTime = 0
   let lastTapX = 0
   let lastTapY = 0
+  // Coordinates are in the dock's viewport unless a tap names another space:
+  // two taps pair up only within the same one.
+  let lastTapSpace = null
 
   function triggerDock() {
     if (DEBUG) console.log('[Dock] triggerDock called, dockVisible=', dockVisible)
@@ -679,13 +687,13 @@
 
   const DEBUG = new URLSearchParams(location.search).has('debugDock')
 
-  function handleTap(clientX, clientY) {
+  function handleTap(clientX, clientY, space = null) {
     if (dockVisible) return
     const now = Date.now()
     const dx = clientX - lastTapX
     const dy = clientY - lastTapY
     const dist = Math.round(Math.sqrt(dx * dx + dy * dy))
-    const close = dist <= DOUBLE_TAP_SLOP
+    const close = dist <= DOUBLE_TAP_SLOP && space === lastTapSpace
     const gap = now - lastTapTime
     const match = gap < DOUBLE_TAP_MS && close
     if (DEBUG) {
@@ -698,6 +706,7 @@
       lastTapTime = now
       lastTapX = clientX
       lastTapY = clientY
+      lastTapSpace = space
     }
   }
 
@@ -756,12 +765,14 @@
 
   function attachToIframe(frame) {
     const wire = () => {
-      let doc
+      let doc = null
       try {
         doc = frame.contentDocument
       } catch {
-        return // cross-origin; can't reach
+        // cross-origin; can't reach
       }
+      const app = appFrameOf(frame)
+      if (app) noteFrameReach(app, frame, doc !== null)
       if (!doc || attachedDocs.has(doc)) return
       attachedDocs.add(doc)
       attachTapListener(doc, frame)
@@ -786,11 +797,137 @@
           const nested = n.querySelectorAll && n.querySelectorAll('iframe')
           if (nested) nested.forEach((f) => attachToIframe(f))
         })
+        // A removed frame may have been the one keeping the handle up.
+        if (r.removedNodes.length > 0) updateHandle()
       }
     })
     obs.observe(root, { childList: true, subtree: true })
   }
 
+  // ─── Apps on another origin ──────────────────────────────────────────────────
+  // The listeners above cannot reach a page from another origin, so a
+  // double-tap over one goes unseen. That page may be the app itself or a
+  // frame inside it. Such a page can forward its pointerdowns instead, and
+  // while any page in the active app is out of reach and not forwarding, a
+  // tab at the dock's edge opens the dock with a single tap.
+  //
+  // A forwarded pointerdown is a message posted to the dock's window:
+  //   window.top.postMessage({ type: 'signalk-app-dock:pointerdown', x: e.clientX, y: e.clientY }, '*')
+  // It counts only from inside a frame of the active app that the listeners
+  // cannot reach, so no tap is counted twice, and all it can do is feed the
+  // double-tap detection.
+  const FORWARDED_POINTERDOWN = 'signalk-app-dock:pointerdown'
+  const FORWARD_COALESCE_MS = 50
+  // Per app frame, the frames in it (itself included) the listeners cannot
+  // reach, and which of those have sent a pointerdown of their own since they
+  // loaded.
+  const unreachableFrames = new WeakMap()
+  const forwardingFrames = new WeakSet()
+  let lastForwardedAt = 0
+
+  // The app frame a frame belongs to: the frame itself, or the one holding
+  // the document it sits in, found through same-origin parents.
+  function appFrameOf(frame) {
+    let f = frame
+    while (f && f.parentElement !== $iframeContainer) {
+      const win = f.ownerDocument && f.ownerDocument.defaultView
+      f = win ? win.frameElement : null
+    }
+    return f
+  }
+
+  // Runs on every load of a frame in an app. A new document starts over:
+  // whether it forwards is not known until it does, and an app frame's new
+  // document brings its own frames.
+  function noteFrameReach(app, frame, reachable) {
+    forwardingFrames.delete(frame)
+    let frames = unreachableFrames.get(app)
+    if (frame === app || !frames) {
+      frames = new Set()
+      unreachableFrames.set(app, frames)
+    }
+    if (reachable) frames.delete(frame)
+    else frames.add(frame)
+    updateHandle()
+  }
+
+  // Frames removed from their document, or left in one that has been
+  // navigated away, are dropped as they are found.
+  function liveUnreachableFrames(app) {
+    const frames = (app && unreachableFrames.get(app)) || new Set()
+    for (const f of frames) {
+      if (!f.isConnected || !f.ownerDocument.defaultView) frames.delete(f)
+    }
+    return frames
+  }
+
+  function updateHandle() {
+    const app = $iframeContainer.querySelector('iframe.active')
+    let show = false
+    if (!dockVisible) {
+      for (const f of liveUnreachableFrames(app)) {
+        if (!forwardingFrames.has(f)) show = true
+      }
+    }
+    $dockHandle.classList.toggle('visible', show)
+  }
+
+  // Where a frame's content starts in the dock's viewport, adding up the
+  // frames it sits in.
+  function offsetInDock(frame) {
+    let x = 0
+    let y = 0
+    for (let f = frame; f; ) {
+      const r = f.getBoundingClientRect()
+      x += r.left
+      y += r.top
+      if (f.parentElement === $iframeContainer) break
+      const win = f.ownerDocument.defaultView
+      f = win ? win.frameElement : null
+    }
+    return { x, y }
+  }
+
+  function isInsideFrame(source, frameWindow) {
+    for (let w = source; w; w = w.parent) {
+      if (w === frameWindow) return true
+      if (w === w.parent) return false
+    }
+    return false
+  }
+
+  window.addEventListener('message', (e) => {
+    const data = e.data
+    if (!data || data.type !== FORWARDED_POINTERDOWN) return
+    if (!Number.isFinite(data.x) || !Number.isFinite(data.y)) return
+    const app = $iframeContainer.querySelector('iframe.active')
+    if (!app || !e.source) return
+    let from = null
+    for (const f of liveUnreachableFrames(app)) {
+      if (isInsideFrame(e.source, f.contentWindow)) from = f
+    }
+    if (!from) return
+    // A frame inside the page forwarding says nothing about taps on the page
+    // around it, so only the page's own message stops the handle.
+    if (e.source === from.contentWindow) {
+      forwardingFrames.add(from)
+      updateHandle()
+    }
+    const now = Date.now()
+    if (now - lastForwardedAt < FORWARD_COALESCE_MS) return
+    lastForwardedAt = now
+    // A frame inside the page sits somewhere the dock cannot see, so its
+    // taps keep their own coordinates and pair up only with each other.
+    if (e.source === from.contentWindow) {
+      const o = offsetInDock(from)
+      handleTap(data.x + o.x, data.y + o.y)
+    } else {
+      handleTap(data.x, data.y, e.source)
+    }
+  })
+
+  $dockHandle.addEventListener('click', triggerDock)
+
   attachTapListener(document, null)
   attachedDocs.add(document)
   scanAndObserveDoc(document)

package/public/index.html

@@ -28,6 +28,10 @@
       <div id="idle-hint-text"></div>
     </div>
 
+    <!-- Tab that opens the dock over an app on another origin, where a
+         double-tap cannot be detected -->
+    <button id="dock-handle" type="button" aria-label="Open the dock"></button>
+
     <!-- Dimming overlay shown when dock is open; tap to close -->
     <div id="dock-backdrop"></div>
 

package/.gitattributes

@@ -1,5 +0,0 @@
-# Force LF line endings on checkout regardless of the host's
-# core.autocrlf setting. Prettier/eslint enforce LF; without this,
-# Windows CI runners check out CRLF and `prettier --check` reports
-# every line as "Delete `␍`".
-* text=auto eol=lf

package/.github/workflows/ci.yml

@@ -1,11 +0,0 @@
-name: SignalK Plugin CI
-
-on:
-  push:
-    branches: [main, master]
-  pull_request:
-    branches: [main, master]
-
-jobs:
-  test:
-    uses: SignalK/signalk-server/.github/workflows/plugin-ci.yml@master

package/.github/workflows/release_on_tag.yml

@@ -1,57 +0,0 @@
-name: 'Release on tag'
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-concurrency:
-  group: release-${{ github.ref }}
-  cancel-in-progress: false
-
-jobs:
-  release:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - name: Create Release
-        uses: softprops/action-gh-release@v3
-        with:
-          tag_name: ${{ github.ref_name }}
-          name: ${{ github.ref_name }}
-          generate_release_notes: true
-          prerelease: ${{ contains(github.ref_name, 'beta') || contains(github.ref_name, 'alpha') || contains(github.ref_name, 'rc') }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  publish:
-    needs: release
-    permissions:
-      id-token: write
-      contents: read
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: '24.x'
-          registry-url: 'https://registry.npmjs.org'
-
-      - run: npm ci
-
-      - name: Publish to npm
-        run: |
-          tag="${GITHUB_REF#refs/tags/}"
-          if [[ "$tag" == *alpha* ]]; then
-            npm publish --provenance --access public --tag alpha
-          elif [[ "$tag" == *beta* ]]; then
-            npm publish --provenance --access public --tag beta
-          elif [[ "$tag" == *rc* ]]; then
-            npm publish --provenance --access public --tag rc
-          else
-            npm publish --provenance --access public
-          fi

package/.github/workflows/stale.yml

@@ -1,42 +0,0 @@
-# Marks issues labeled "awaiting response" as stale after 30 days of inactivity
-# and closes them 30 days after that (60 days total). Issues labeled
-# "good first task" or "help wanted" are exempt. Pull requests are never
-# touched. The workflow runs daily and can also be triggered manually.
-name: Stale issues
-
-on:
-  schedule:
-    - cron: '17 1 * * *'
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  issues: write
-
-concurrency:
-  group: stale
-  cancel-in-progress: false
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - uses: actions/stale@v10
-        with:
-          days-before-issue-stale: 30
-          days-before-issue-close: 30
-          stale-issue-label: 'stale'
-          any-of-issue-labels: 'awaiting response'
-          exempt-issue-labels: 'good first task,help wanted'
-          stale-issue-message: >
-            This issue is marked as awaiting a response from the reporter and
-            has had no activity for 30 days. It will be closed in another 30
-            days if there is no further update. If the issue is still
-            relevant, please reply with any missing information.
-          close-issue-message: >
-            Closing this issue because it has been stale for 60 days without
-            a response. Please reopen if this is still relevant.
-          days-before-pr-stale: -1
-          days-before-pr-close: -1
-          operations-per-run: 100

package/.prettierignore

@@ -1,6 +0,0 @@
-node_modules
-public/remoteEntry.js
-public/540.js
-public/805.js
-public/main.js
-public/540.js.LICENSE.txt

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "printWidth": 120
-}

package/eslint.config.js

@@ -1,59 +0,0 @@
-const prettier = require('eslint-config-prettier')
-
-module.exports = [
-  { ignores: ['src/**', 'public/remoteEntry.js', 'public/540.js', 'public/805.js', 'public/main.js'] },
-  {
-    files: ['plugin/**/*.js', 'test/**/*.js'],
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'commonjs',
-      globals: {
-        require: 'readonly',
-        module: 'readonly',
-        exports: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        process: 'readonly',
-        console: 'readonly',
-        setTimeout: 'readonly',
-        clearTimeout: 'readonly',
-        setInterval: 'readonly',
-        clearInterval: 'readonly',
-        globalThis: 'readonly'
-      }
-    },
-    rules: {
-      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['public/dock.js'],
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'script',
-      globals: {
-        window: 'readonly',
-        document: 'readonly',
-        navigator: 'readonly',
-        fetch: 'readonly',
-        console: 'readonly',
-        setTimeout: 'readonly',
-        clearTimeout: 'readonly',
-        setInterval: 'readonly',
-        requestAnimationFrame: 'readonly',
-        Promise: 'readonly',
-        Set: 'readonly',
-        Infinity: 'readonly',
-        MutationObserver: 'readonly',
-        URLSearchParams: 'readonly',
-        location: 'readonly'
-      }
-    },
-    rules: {
-      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-      'no-undef': 'error'
-    }
-  },
-  prettier
-]