copy_tuner_client 2.2.1 → 2.4.0

data/src/main.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { CopyrayOverlay } from './copyray-overlay'
 import { CopytunerBar } from './copytuner-bar'
+import { CopytunerRoot } from './copytuner-root'
 import { isMac } from './util'
 
 declare global {
@@ -18,38 +19,47 @@ declare global {
 
 customElements.define('copytuner-bar', CopytunerBar)
 customElements.define('copyray-overlay', CopyrayOverlay)
+customElements.define('copytuner-root', CopytunerRoot)
 
 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 root = document.createElement('copytuner-root') as CopytunerRoot
+  document.body.append(root)
 
+  const bar = document.createElement('copytuner-bar') as CopytunerBar
   const overlay = document.createElement('copyray-overlay') as CopyrayOverlay
   overlay.onOpen = onOpen
-  document.body.append(overlay)
+  root.dialog.append(overlay, bar)
+  bar.init({ url, data, keysSkipped: Boolean(keysSkipped), onOpen })
 
   const show = () => {
+    // display: none のままでは searchBox にフォーカスが当たらないので dialog を先に開く
+    root.dialog.showModal()
     overlay.show()
     bar.show()
   }
   const hide = () => {
+    root.dialog.close()
+    // close イベントを待たず同期で後始末する。イベントは queued task 発火で、
+    // 自動テスト環境など発火が遅れる/落ちる状況があるため、ここを唯一の頼りにしない
     overlay.hide()
-    bar.hide()
   }
-  const toggle = () => (overlay.isShowing ? hide() : show())
+  const toggle = () => (root.dialog.open ? hide() : show())
 
-  overlay.onToggle = toggle
+  root.onToggle = toggle
+  overlay.onClose = hide
   window.CopyTuner.toggle = toggle
 
-  document.addEventListener('keydown', (event) => {
-    if (overlay.isShowing && ['Escape', 'Esc'].includes(event.key)) {
-      hide()
-      return
-    }
+  // Escape のようにこちらの hide() を経由しない閉じ方の受け皿。overlay.hide() は冪等なので二重でも問題ない
+  root.dialog.addEventListener('close', () => {
+    // 閉じた直後に開き直された場合、遅れて届いたこのイベントで後始末してはいけない
+    if (root.dialog.open) return
+    overlay.hide()
+  })
 
+  document.addEventListener('keydown', (event) => {
     if (((isMac && event.metaKey) || (!isMac && event.ctrlKey)) && event.shiftKey && event.key.toLowerCase() === 'k') {
       toggle()
     }

data/src/styles.ts

@@ -1,6 +1,57 @@
 // 各 custom element の Shadow root に <style> として注入する CSS。
 // Shadow DOM のスタイル隔離が効くため、旧 copyray.css にあった #copyray-overlay * のグローバルリセットは不要。
 
+// コンテナ（<copytuner-root>）のスタイル。
+// dialog の UA デフォルト（中央寄せ・白背景・枠線・padding・暗転）を全て打ち消し、
+// viewport 全面を覆う透明なコンテナにする。暗転は overlay 側の .backdrop が担う。
+export const ROOT_STYLES = `
+/* transform / filter / perspective / contain は置かない（理由は OVERLAY_STYLES のコメント参照） */
+dialog {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  border: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+
+dialog::backdrop {
+  background: transparent;
+}
+
+.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) {
+  .toggle-button {
+    display: none;
+  }
+}
+`
+
 // ツールバー（<copytuner-bar>）のスタイル。:host にバー本体のレイアウトを定義する。
 export const BAR_STYLES = `
 :host {
@@ -20,10 +71,6 @@ export const BAR_STYLES = `
   box-sizing: border-box;
 }
 
-:host([hidden]) {
-  display: none;
-}
-
 .log-menu {
   position: fixed;
   left: 0;
@@ -109,22 +156,19 @@ export const BAR_STYLES = `
 `
 
 // オーバーレイ（<copyray-overlay>）のスタイル。
-// :host はドキュメント原点基準（position: absolute; top/left: 0）にして、
-// 子の specimen を computeBoundingBox のページ座標で absolute 配置できるようにする。
-// 背景の暗転（.backdrop）だけは viewport 固定（fixed）にする。
+// specimen は getBoundingClientRect() の viewport 座標をそのまま使うため、
+// dialog / :host / specimen のコンテナ div のいずれにも
+// transform / filter / perspective / contain を置かない。
+// 置くとそれが containing block になり、fixed な specimen が viewport 基準から外れる。
+// :host の position: absolute と width/height: 0 は、インラインの custom element が
+// dialog のフローに line box を作らないようにするため（fixed の containing block は作らない）。
 export const OVERLAY_STYLES = `
 :host {
   position: absolute;
-  top: 0;
-  left: 0;
   width: 0;
   height: 0;
 }
 
-:host([hidden]) {
-  display: none;
-}
-
 .backdrop {
   position: fixed;
   inset: 0;
@@ -137,7 +181,7 @@ export const OVERLAY_STYLES = `
 }
 
 .specimen {
-  position: absolute;
+  position: fixed;
   background: rgba(255, 50, 50, 0.1);
   outline: 1px solid rgba(255, 50, 50, 0.8);
   outline-offset: -1px;
@@ -153,6 +197,10 @@ export const OVERLAY_STYLES = `
   background: rgba(255, 50, 50, 0.4);
 }
 
+.specimen[hidden] {
+  display: none;
+}
+
 .specimen-handle {
   float: left;
   margin: 0 2px 2px 0;
@@ -162,31 +210,4 @@ export const OVERLAY_STYLES = `
   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) {
-  .toggle-button {
-    display: none;
-  }
-}
 `

data/src/util.ts

@@ -1,40 +1,5 @@
 const isMac = navigator.platform.toUpperCase().includes('MAC')
 
-// @ts-expect-error TS7006
-const isVisible = (element) => !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length > 0)
-
-// @ts-expect-error TS7006
-const getOffset = (elment) => {
-  const box = elment.getBoundingClientRect()
-
-  return {
-    top: box.top + (window.pageYOffset - document.documentElement.clientTop),
-    left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
-  }
-}
-
-// @ts-expect-error TS7006
-const computeBoundingBox = (element) => {
-  if (!isVisible(element)) {
-    return null
-  }
-
-  const boxFrame = getOffset(element)
-  // @ts-expect-error TS2339
-  boxFrame.right = boxFrame.left + element.offsetWidth
-  // @ts-expect-error TS2339
-  boxFrame.bottom = boxFrame.top + element.offsetHeight
-
-  return {
-    left: boxFrame.left,
-    top: boxFrame.top,
-    // @ts-expect-error TS2339
-    width: boxFrame.right - boxFrame.left,
-    // @ts-expect-error TS2339
-    height: boxFrame.bottom - boxFrame.top,
-  }
-}
-
 const debounce = <A extends unknown[]>(fn: (...args: A) => void, wait: number) => {
   let timer: ReturnType<typeof setTimeout> | undefined
   return (...args: A) => {
@@ -43,4 +8,4 @@ const debounce = <A extends unknown[]>(fn: (...args: A) => void, wait: number) =
   }
 }
 
-export { computeBoundingBox, debounce, getOffset, isMac, isVisible }
+export { debounce, isMac }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: copy_tuner_client
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.4.0
 platform: ruby
 authors:
 - SonicGarden
@@ -200,6 +200,7 @@ files:
 - app/assets/javascripts/copytuner.js
 - biome.json
 - copy_tuner_client.gemspec
+- docs/poller-startup.md
 - gemfiles/8.0.gemfile
 - gemfiles/8.1.gemfile
 - gemfiles/main.gemfile
@@ -215,6 +216,7 @@ files:
 - lib/copy_tuner_client/dotted_hash.rb
 - lib/copy_tuner_client/engine.rb
 - lib/copy_tuner_client/errors.rb
+- lib/copy_tuner_client/fork_hook.rb
 - lib/copy_tuner_client/helper_extension.rb
 - lib/copy_tuner_client/i18n_backend.rb
 - lib/copy_tuner_client/i18n_compat.rb
@@ -251,11 +253,13 @@ files:
 - spec/copy_tuner_client/copyray_middleware_spec.rb
 - spec/copy_tuner_client/copyray_spec.rb
 - spec/copy_tuner_client/dotted_hash_spec.rb
+- spec/copy_tuner_client/fork_hook_spec.rb
 - spec/copy_tuner_client/helper_extension_spec.rb
 - spec/copy_tuner_client/i18n_backend_spec.rb
 - spec/copy_tuner_client/poller_spec.rb
 - spec/copy_tuner_client/prefixed_logger_spec.rb
 - spec/copy_tuner_client/process_guard_spec.rb
+- spec/copy_tuner_client/queue_with_timeout_spec.rb
 - spec/copy_tuner_client/request_sync_spec.rb
 - spec/copy_tuner_client/translation_log_spec.rb
 - spec/copy_tuner_client/warden_integration_spec.rb
@@ -273,6 +277,7 @@ files:
 - spec/support/writing_cache.rb
 - src/copyray-overlay.ts
 - src/copytuner-bar.ts
+- src/copytuner-root.ts
 - src/main.ts
 - src/styles.ts
 - src/util.ts
@@ -302,7 +307,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.15
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Client for the CopyTuner copy management service
 test_files: []