copy_tuner_client 2.0.0 → 2.1.0

data/src/copyray-overlay.ts

@@ -0,0 +1,125 @@
+import { OVERLAY_STYLES } from './styles'
+import { computeBoundingBox } from './util'
+
+type OpenCallback = (key: string) => void
+
+type Blurb = {
+  keys: string[]
+  element: Element
+}
+
+const findBlurbs = (): Blurb[] =>
+  Array.from(document.querySelectorAll('[data-copyray-key]')).map((element) => ({
+    // 1 要素に複数キーがカンマ区切りで入りうる（同一テキストノードに複数訳文が連結された場合）
+    keys: (element.getAttribute('data-copyray-key') ?? '').split(',').filter(Boolean),
+    element,
+  }))
+
+// オーバーレイ背景・翻訳要素のハイライト枠（specimen）・トグルボタンをまとめて Shadow DOM 内に描画する。
+export class CopyrayOverlay extends HTMLElement {
+  #onOpen: OpenCallback = () => {}
+  #onToggle: () => void = () => {}
+  #backdrop: HTMLDivElement
+  #specimens: HTMLDivElement
+  #toggleButton: HTMLAnchorElement
+
+  constructor() {
+    super()
+    const shadow = this.attachShadow({ mode: 'open' })
+
+    const style = document.createElement('style')
+    style.textContent = OVERLAY_STYLES
+    shadow.append(style)
+
+    this.#backdrop = document.createElement('div')
+    this.#backdrop.classList.add('backdrop')
+    this.#backdrop.addEventListener('click', () => this.hide())
+
+    // specimen をページ座標基準で absolute 配置するコンテナ
+    this.#specimens = document.createElement('div')
+    this.#specimens.classList.add('specimens')
+
+    this.#toggleButton = document.createElement('a')
+    this.#toggleButton.classList.add('toggle-button')
+    this.#toggleButton.textContent = 'Open CopyTuner'
+    // 旧実装ではトグルボタンが overlay と bar の両方を表示していた。show() ではなく onToggle 経由で表示する。
+    this.#toggleButton.addEventListener('click', () => this.#onToggle())
+
+    shadow.append(this.#backdrop, this.#specimens, this.#toggleButton)
+
+    // 初期は非表示（背景と specimen を隠す）。トグルボタンは常時表示のため :host([hidden]) は使わず個別制御する。
+    this.hide()
+  }
+
+  set onOpen(callback: OpenCallback) {
+    this.#onOpen = callback
+  }
+
+  set onToggle(callback: () => void) {
+    this.#onToggle = callback
+  }
+
+  get isShowing(): boolean {
+    return !this.#backdrop.hidden
+  }
+
+  show() {
+    this.reset()
+    this.#backdrop.hidden = false
+
+    for (const { element, keys } of findBlurbs()) {
+      const box = this.makeBox(element, keys)
+      if (box) {
+        this.#specimens.append(box)
+      }
+    }
+  }
+
+  hide() {
+    this.reset()
+    this.#backdrop.hidden = true
+  }
+
+  reset() {
+    this.#specimens.replaceChildren()
+  }
+
+  private makeBox(element: Element, keys: string[]): HTMLDivElement | null {
+    const bounds = computeBoundingBox(element)
+    if (bounds === null) return null
+
+    const box = document.createElement('div')
+    box.classList.add('specimen')
+    box.style.left = `${bounds.left}px`
+    box.style.top = `${bounds.top}px`
+    box.style.width = `${bounds.width}px`
+    box.style.height = `${bounds.height}px`
+
+    const { position, top, left } = getComputedStyle(element)
+    if (position === 'fixed') {
+      box.style.position = 'fixed'
+      box.style.top = top
+      box.style.left = left
+    }
+
+    // box 全体のクリックは先頭キーを開く（広いクリック領域を維持）。複数キー時は各ラベルから個別に開ける
+    box.addEventListener('click', () => this.#onOpen(keys[0]))
+
+    for (const key of keys) {
+      box.append(this.makeLabel(key))
+    }
+    return box
+  }
+
+  private makeLabel(key: string): HTMLDivElement {
+    const label = document.createElement('div')
+    label.classList.add('specimen-handle')
+    label.textContent = key
+    // ラベルのクリックはそのキーを開く。box への伝播を止めて先頭キーとの二重発火を防ぐ
+    label.addEventListener('click', (event) => {
+      event.stopPropagation()
+      this.#onOpen(key)
+    })
+    return label
+  }
+}

data/src/copytuner-bar.ts

@@ -0,0 +1,153 @@
+import { BAR_STYLES } from './styles'
+import { debounce } from './util'
+
+type OpenCallback = (key: string) => void
+
+type InitOptions = {
+  url: string
+  data: Record<string, string>
+  keysSkipped: boolean
+  onOpen: OpenCallback
+}
+
+// 画面下部のツールバー。CopyTuner / Sync ボタン、ページ内翻訳の検索・ログメニューを Shadow DOM 内に描画する。
+export class CopytunerBar extends HTMLElement {
+  #onOpen: OpenCallback = () => {}
+  #searchBox!: HTMLInputElement
+  #logMenu!: HTMLDivElement
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  // custom element の constructor 内では属性・プロパティを変更できない（createElement が弾く）ため、
+  // hidden の初期化は DOM 挿入後に呼ばれる connectedCallback で行う。
+  connectedCallback() {
+    this.hidden = true
+  }
+
+  // url/data/keysSkipped/onOpen はオブジェクトや関数を含むため属性ではなくメソッドで受け渡す。
+  init({ url, data, keysSkipped, onOpen }: InitOptions) {
+    this.#onOpen = onOpen
+    const shadow = this.shadowRoot as ShadowRoot
+
+    const style = document.createElement('style')
+    style.textContent = BAR_STYLES
+    shadow.append(style)
+
+    // 元々 Rails から出力されていたマークアップに合わせたボタン群。
+    // url は設定値だが innerHTML に直接埋めず setAttribute で渡す（XSS 面で安全側に倒す）。
+    const copyTunerButton = this.makeButton('CopyTuner', url, '_blank')
+    const syncButton = this.makeButton('Sync', '/copytuner', '_blank')
+    const openLogButton = this.makeButton('Translations in this page', 'javascript:void(0)')
+
+    this.#searchBox = document.createElement('input')
+    this.#searchBox.type = 'text'
+    this.#searchBox.classList.add('search')
+    this.#searchBox.placeholder = 'search'
+
+    shadow.append(copyTunerButton, syncButton, openLogButton, this.#searchBox)
+
+    this.#logMenu = this.makeLogMenu(data)
+    shadow.append(this.#logMenu)
+
+    // 巨大DOM/Nokogiri例外でキー付与がスキップされた場合は、オーバーレイが使えないので
+    // ツールバー（Translations in this page）から編集する旨を案内する。
+    if (keysSkipped) {
+      this.appendSkippedNotice()
+    }
+
+    openLogButton.addEventListener('click', (event) => {
+      event.preventDefault()
+      this.toggleLogMenu()
+    })
+    this.#searchBox.addEventListener('input', debounce(this.onSearch.bind(this), 250))
+  }
+
+  show() {
+    this.hidden = false
+    this.#searchBox.focus()
+  }
+
+  hide() {
+    this.hidden = true
+  }
+
+  private makeButton(label: string, href: string, target?: string): HTMLAnchorElement {
+    const button = document.createElement('a')
+    button.classList.add('button')
+    button.textContent = label
+    button.href = href
+    if (target) {
+      button.target = target
+    }
+    return button
+  }
+
+  private appendSkippedNotice() {
+    const notice = document.createElement('span')
+    notice.classList.add('notice')
+    notice.textContent = '⚠ This page is too large for the overlay. Use "Translations in this page" to edit.'
+    ;(this.shadowRoot as ShadowRoot).append(notice)
+  }
+
+  private showLogMenu() {
+    this.#logMenu.hidden = false
+  }
+
+  private toggleLogMenu() {
+    this.#logMenu.hidden = !this.#logMenu.hidden
+  }
+
+  private makeLogMenu(data: Record<string, string>): HTMLDivElement {
+    const div = document.createElement('div')
+    div.classList.add('log-menu')
+    div.hidden = true
+
+    const table = document.createElement('table')
+    const tbody = document.createElement('tbody')
+
+    for (const key of Object.keys(data).sort()) {
+      const value = data[key]
+      if (value === '') {
+        continue
+      }
+
+      const td1 = document.createElement('td')
+      td1.textContent = key
+      const td2 = document.createElement('td')
+      td2.textContent = value
+      const tr = document.createElement('tr')
+      tr.dataset.key = key
+
+      tr.addEventListener('click', ({ currentTarget }) => {
+        const row = currentTarget as HTMLTableRowElement
+        if (row.dataset.key) {
+          this.#onOpen(row.dataset.key)
+        }
+      })
+
+      tr.append(td1, td2)
+      tbody.append(tr)
+    }
+
+    table.append(tbody)
+    div.append(table)
+
+    return div
+  }
+
+  private onSearch() {
+    // debounce 経由で遅延実行されると Event.target は null 化されるため、検索ボックスを直接参照する
+    const keyword = this.#searchBox.value.trim()
+    this.showLogMenu()
+
+    const rows = [...this.#logMenu.querySelectorAll('tr')]
+    for (const row of rows) {
+      const isShow =
+        keyword === '' || [...row.querySelectorAll('td')].some((td) => (td.textContent ?? '').includes(keyword))
+      row.hidden = !isShow
+    }
+  }
+}

data/src/main.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import Copyray from './copyray'
+import { CopyrayOverlay } from './copyray-overlay'
+import { CopytunerBar } from './copytuner-bar'
 import { isMac } from './util'
 
 declare global {
@@ -7,8 +8,7 @@ declare global {
     CopyTuner: {
       url: string
       toggle?: () => void
-      // TODO: type
-      data: object
+      data: Record<string, string>
       // 巨大DOM/Nokogiri例外で data-copyray-key 付与をスキップしたか。
       // true のときオーバーレイは使えないのでツールバーから編集する旨を案内する。
       keysSkipped?: boolean
@@ -16,38 +16,42 @@ declare global {
   }
 }
 
-import './copyray.css'
-
-// NOTE: 元々railsから出力されいてたマークアップに合わせてひとまず、、
-const appendCopyTunerBar = (url: string) => {
-  const bar = document.createElement('div')
-  bar.id = 'copy-tuner-bar'
-  bar.classList.add('copy-tuner-hidden')
-  bar.innerHTML = `
-    <a class="copy-tuner-bar-button" target="_blank" href="${url}">CopyTuner</a>
-    <a href="/copytuner" target="_blank" class="copy-tuner-bar-button">Sync</a>
-    <a href="javascript:void(0)" class="copy-tuner-bar-open-log copy-tuner-bar-button js-copy-tuner-bar-open-log">Translations in this page</a>
-    <input type="text" class="copy-tuner-bar__search js-copy-tuner-bar-search" placeholder="search">
-  `
-  document.body.append(bar)
-}
+customElements.define('copytuner-bar', CopytunerBar)
+customElements.define('copyray-overlay', CopyrayOverlay)
 
 const start = () => {
   const { url, data, keysSkipped } = window.CopyTuner
+  const onOpen = (key: string) => window.open(`${url}/blurbs/${key}/edit`)
+
+  const bar = document.createElement('copytuner-bar') as CopytunerBar
+  document.body.append(bar)
+  bar.init({ url, data, keysSkipped: Boolean(keysSkipped), onOpen })
+
+  const overlay = document.createElement('copyray-overlay') as CopyrayOverlay
+  overlay.onOpen = onOpen
+  document.body.append(overlay)
+
+  const show = () => {
+    overlay.show()
+    bar.show()
+  }
+  const hide = () => {
+    overlay.hide()
+    bar.hide()
+  }
+  const toggle = () => (overlay.isShowing ? hide() : show())
 
-  appendCopyTunerBar(url)
-  const copyray = new Copyray(url, data, Boolean(keysSkipped))
-  window.CopyTuner.toggle = () => copyray.toggle()
+  overlay.onToggle = toggle
+  window.CopyTuner.toggle = toggle
 
   document.addEventListener('keydown', (event) => {
-    // @ts-expect-error TS2339
-    if (copyray.isShowing && ['Escape', 'Esc'].includes(event.key)) {
-      copyray.hide()
+    if (overlay.isShowing && ['Escape', 'Esc'].includes(event.key)) {
+      hide()
       return
     }
 
     if (((isMac && event.metaKey) || (!isMac && event.ctrlKey)) && event.shiftKey && event.key.toLowerCase() === 'k') {
-      copyray.toggle()
+      toggle()
     }
   })
 

data/src/{copyray.css → styles.ts}

@@ -1,118 +1,9 @@
-@charset "UTF-8";
-
-/* selector for element and children */
-#copyray-overlay,
-#copyray-overlay *,
-#copyray-overlay a:hover,
-#copyray-overlay a:visited,
-#copyray-overlay a:active {
-  background: none;
-  border: none;
-  bottom: auto;
-  clear: none;
-  cursor: default;
-  float: none;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: medium;
-  font-style: normal;
-  font-weight: normal;
-  height: auto;
-  left: auto;
-  letter-spacing: normal;
-  line-height: normal;
-  max-height: none;
-  max-width: none;
-  min-height: 0;
-  min-width: 0;
-  overflow: visible;
-  position: static;
-  right: auto;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  top: auto;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  z-index: auto;
-}
-
-#copyray-overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background-image: radial-gradient(
-    ellipse farthest-corner at center,
-    rgba(0, 0, 0, 0.4) 10%,
-    rgba(0, 0, 0, 0.8) 100%
-  );
-  z-index: 9000;
-}
-
-.copyray-specimen {
-  position: absolute;
-  background: rgba(255, 255, 255, 0.15);
-  outline: 1px solid rgba(255, 255, 255, 0.8);
-  outline-offset: -1px;
-  color: #666;
-  font-family: 'Helvetica Neue', sans-serif;
-  font-size: 13px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-}
-
-.copyray-specimen:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.4);
-}
-
-.copyray-specimen.Specimen {
-  outline: 1px solid rgba(255, 50, 50, 0.8);
-  background: rgba(255, 50, 50, 0.1);
-}
+// 各 custom element の Shadow root に <style> として注入する CSS。
+// Shadow DOM のスタイル隔離が効くため、旧 copyray.css にあった #copyray-overlay * のグローバルリセットは不要。
 
-.copyray-specimen.Specimen:hover {
-  background: rgba(255, 50, 50, 0.4);
-}
-
-.copyray-specimen-handle {
-  float: left;
-  margin: 0 2px 2px 0;
-  background: #fff;
-  padding: 0 3px;
-  color: #333;
-  font-size: 10px;
-  cursor: pointer;
-}
-
-.copyray-specimen-handle.Specimen {
-  background: rgba(255, 50, 50, 0.8);
-  color: #fff;
-}
-
-a.copyray-toggle-button {
-  display: block;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  color: white;
-  background: black;
-  padding: 12px 16px;
-  border-radius: 0 10px 0 0;
-  opacity: 0;
-  transition: opacity 0.6s ease-in-out;
-  z-index: 10000;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-a.copyray-toggle-button:hover {
-  opacity: 1;
-}
-
-#copy-tuner-bar {
+// ツールバー（<copytuner-bar>）のスタイル。:host にバー本体のレイアウトを定義する。
+export const BAR_STYLES = `
+:host {
   position: fixed;
   left: 0;
   right: 0;
@@ -126,44 +17,45 @@ a.copyray-toggle-button:hover {
   z-index: 2147483647;
   box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.8);
   background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none;
 }
 
-#copy-tuner-bar-log-menu {
+.log-menu {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 40px;
   max-height: calc(100vh - 40px);
   background: #222;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
-  z-index: 2147483647;
   overflow-y: auto;
 }
 
-#copy-tuner-bar-log-menu tbody td {
+.log-menu[hidden] {
+  display: none;
+}
+
+.log-menu tbody td {
   padding: 2px 8px;
 }
 
-#copy-tuner-bar-log-menu tbody tr {
+.log-menu tbody tr {
   cursor: pointer;
 }
 
-#copy-tuner-bar-log-menu tbody tr:hover {
+.log-menu tbody tr:hover {
   background: #444;
 }
 
-#copy-tuner-bar-log-menu tbody a {
-  color: #fff;
-}
-
-#copy-tuner-bar-log-menu tbody a:hover,
-#copy-tuner-bar-log-menu tbody a:focus {
-  color: #fff;
-  text-decoration: underline;
+.log-menu tbody tr[hidden] {
+  display: none;
 }
 
-.copy-tuner-bar-button {
+.button {
   position: relative;
   display: inline-block;
   color: #fff;
@@ -180,16 +72,17 @@ a.copyray-toggle-button:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2),
     inset 0 0 2px rgba(255, 255, 255, 0.2);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+  text-decoration: none;
 }
 
-.copy-tuner-bar-button:hover,
-.copy-tuner-bar-button:focus {
+.button:hover,
+.button:focus {
   color: #fff;
   text-decoration: none;
   background-color: #555;
 }
 
-.copy-tuner-bar__notice {
+.notice {
   display: inline-block;
   margin: 8px;
   font-size: 13px;
@@ -198,9 +91,7 @@ a.copyray-toggle-button:hover {
   color: #ffd24d;
 }
 
-input[type='text'].copy-tuner-bar__search {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+.search {
   appearance: none;
   border: none;
   border-radius: 2px;
@@ -215,13 +106,87 @@ input[type='text'].copy-tuner-bar__search {
   height: auto;
   font-size: 14px;
 }
+`
+
+// オーバーレイ（<copyray-overlay>）のスタイル。
+// :host はドキュメント原点基準（position: absolute; top/left: 0）にして、
+// 子の specimen を computeBoundingBox のページ座標で absolute 配置できるようにする。
+// 背景の暗転（.backdrop）だけは viewport 固定（fixed）にする。
+export const OVERLAY_STYLES = `
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-image: radial-gradient(
+    ellipse farthest-corner at center,
+    rgba(0, 0, 0, 0.4) 10%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  z-index: 9000;
+}
+
+.specimen {
+  position: absolute;
+  background: rgba(255, 50, 50, 0.1);
+  outline: 1px solid rgba(255, 50, 50, 0.8);
+  outline-offset: -1px;
+  color: #666;
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 13px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+  z-index: 2000000000;
+}
 
-.copy-tuner-hidden {
-  display: none !important;
+.specimen:hover {
+  cursor: pointer;
+  background: rgba(255, 50, 50, 0.4);
+}
+
+.specimen-handle {
+  float: left;
+  margin: 0 2px 2px 0;
+  background: rgba(255, 50, 50, 0.8);
+  padding: 0 3px;
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.toggle-button {
+  display: block;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  color: white;
+  background: black;
+  padding: 12px 16px;
+  border-radius: 0 10px 0 0;
+  opacity: 0;
+  transition: opacity 0.6s ease-in-out;
+  z-index: 10000;
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.toggle-button:hover {
+  opacity: 1;
 }
 
 @media screen and (max-width: 480px) {
-  .hidden-on-mobile {
-    display: none !important;
+  .toggle-button {
+    display: none;
   }
 }
+`

data/src/util.ts

@@ -35,4 +35,12 @@ const computeBoundingBox = (element) => {
   }
 }
 
-export { isMac, isVisible, getOffset, computeBoundingBox }
+const debounce = <A extends unknown[]>(fn: (...args: A) => void, wait: number) => {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  return (...args: A) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), wait)
+  }
+}
+
+export { computeBoundingBox, debounce, getOffset, isMac, isVisible }

data/tsconfig.json

@@ -3,11 +3,9 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "moduleResolution": "Node",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
     "strict": true,
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -17,10 +15,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "skipLibCheck": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "client",
-    "src",
-  ]
+  "include": ["src"]
 }