copy_tuner_client 2.0.0 → 2.1.0

data/vite.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
     rollupOptions: {
       output: {
         entryFileNames: `javascripts/copytuner.js`,
-        assetFileNames: `stylesheets/copytuner.[ext]`,
       },
     },
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: copy_tuner_client
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - SonicGarden
@@ -183,7 +183,6 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".babelrc"
-- ".eslintrc.js"
 - ".gitattributes"
 - ".github/dependabot.yml"
 - ".github/workflows/rspec.yml"
@@ -200,7 +199,7 @@ files:
 - Rakefile
 - UPGRADING.md
 - app/assets/javascripts/copytuner.js
-- app/assets/stylesheets/copytuner.css
+- biome.json
 - copy_tuner_client.gemspec
 - gemfiles/8.0.gemfile
 - gemfiles/8.1.gemfile
@@ -230,7 +229,9 @@ files:
 - lib/copy_tuner_client/translation_log.rb
 - lib/copy_tuner_client/version.rb
 - lib/tasks/copy_tuner_client_tasks.rake
+- mise.toml
 - package.json
+- pnpm-lock.yaml
 - skills/copy-tuner-to-locales-cleanup/SKILL.md
 - skills/copy-tuner-to-locales-cleanup/references/example-touchpoints.md
 - skills/copy-tuner-to-locales-cleanup/references/verification-final.md
@@ -270,18 +271,16 @@ files:
 - spec/support/fake_unicorn.rb
 - spec/support/middleware_stack.rb
 - spec/support/writing_cache.rb
-- src/copyray.css
-- src/copyray.ts
-- src/copytuner_bar.ts
+- src/copyray-overlay.ts
+- src/copytuner-bar.ts
 - src/main.ts
-- src/specimen.ts
+- src/styles.ts
 - src/util.ts
 - src/vite-env.d.ts
 - tsconfig.json
 - ui/views/copytuner/index.html.erb
 - ui/views/layouts/copytuner_default.html.erb
 - vite.config.ts
-- yarn.lock
 homepage: https://github.com/SonicGarden/copy-tuner-ruby-client
 licenses: []
 metadata:

data/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  plugins: ['@sonicgarden'],
-  extends: [
-    'plugin:@sonicgarden/browser',
-    'plugin:@sonicgarden/recommended',
-    'plugin:@sonicgarden/typescript',
-    'plugin:@sonicgarden/prettier',
-  ],
-  settings: {
-    'import/internal-regex': '^@/',
-  },
-}

data/app/assets/stylesheets/copytuner.css

@@ -1 +0,0 @@
-@charset "UTF-8";#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:400;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,.4) 10%,rgba(0,0,0,.8) 100%);z-index:9000}.copyray-specimen{position:absolute;background:rgba(255,255,255,.15);outline:1px solid rgba(255,255,255,.8);outline-offset:-1px;color:#666;font-family:Helvetica Neue,sans-serif;font-size:13px;box-shadow:0 1px 3px #000000b3}.copyray-specimen:hover{cursor:pointer;background:rgba(255,255,255,.4)}.copyray-specimen.Specimen{outline:1px solid rgba(255,50,50,.8);background:rgba(255,50,50,.1)}.copyray-specimen.Specimen:hover{background:rgba(255,50,50,.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,.8);color:#fff}a.copyray-toggle-button{display:block;position:fixed;left:0;bottom:0;color:#fff;background:black;padding:12px 16px;border-radius:0 10px 0 0;opacity:0;transition:opacity .6s ease-in-out;z-index:10000;font-size:12px;cursor:pointer}a.copyray-toggle-button:hover{opacity:1}#copy-tuner-bar{position:fixed;left:0;right:0;bottom:0;height:40px;padding:0 8px;background:#222;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;color:#fff;z-index:2147483647;box-shadow:0 -1px #ffffff1a,inset 0 2px 6px #000c;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3))}#copy-tuner-bar-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{padding:2px 8px}#copy-tuner-bar-log-menu tbody tr{cursor:pointer}#copy-tuner-bar-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}.copy-tuner-bar-button{position:relative;display:inline-block;color:#fff;margin:8px 1px;height:24px;line-height:24px;padding:0 8px;font-size:14px;cursor:pointer;vertical-align:middle;background-color:#444;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));border-radius:2px;box-shadow:1px 1px 1px #00000080,inset 0 1px #fff3,inset 0 0 2px #fff3;text-shadow:0 -1px 0 rgba(0,0,0,.4)}.copy-tuner-bar-button:hover,.copy-tuner-bar-button:focus{color:#fff;text-decoration:none;background-color:#555}.copy-tuner-bar__notice{display:inline-block;margin:8px;font-size:13px;line-height:24px;vertical-align:middle;color:#ffd24d}input[type=text].copy-tuner-bar__search{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:2px;background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));box-shadow:inset 0 1px #0003,inset 0 0 2px #0003;padding:2px 8px;margin:0;line-height:20px;vertical-align:middle;color:#000;width:auto;height:auto;font-size:14px}.copy-tuner-hidden{display:none!important}@media screen and (max-width: 480px){.hidden-on-mobile{display:none!important}}

data/src/copyray.ts

@@ -1,111 +0,0 @@
-import CopyTunerBar from './copytuner_bar'
-import Specimen from './specimen'
-
-const findBlurbs = () =>
-  Array.from(document.querySelectorAll('[data-copyray-key]')).map((element) => ({
-    // 1 要素に複数キーがカンマ区切りで入りうる（同一テキストノードに複数訳文が連結された場合）
-    keys: (element.getAttribute('data-copyray-key') ?? '').split(',').filter(Boolean),
-    element,
-  }))
-
-export default class Copyray {
-  // @ts-expect-error TS7006
-  constructor(baseUrl, data, keysSkipped = false) {
-    // @ts-expect-error TS2339
-    this.baseUrl = baseUrl
-    // @ts-expect-error TS2339
-    this.data = data
-    // @ts-expect-error TS2339
-    this.isShowing = false
-    // @ts-expect-error TS2339
-    this.specimens = []
-    // @ts-expect-error TS2339
-    this.overlay = this.makeOverlay()
-    // @ts-expect-error TS2339
-    this.toggleButton = this.makeToggleButton()
-    // @ts-expect-error TS2339
-    this.boundOpen = this.open.bind(this)
-
-    // @ts-expect-error TS2339
-    this.copyTunerBar = new CopyTunerBar(document.querySelector('#copy-tuner-bar'), this.data, this.boundOpen, keysSkipped)
-  }
-
-  show() {
-    this.reset()
-
-    // @ts-expect-error TS2339
-    document.body.append(this.overlay)
-    this.makeSpecimens()
-
-    // @ts-expect-error TS2339
-    for (const specimen of this.specimens) {
-      specimen.show()
-    }
-
-    // @ts-expect-error TS2339
-    this.copyTunerBar.show()
-    // @ts-expect-error TS2339
-    this.isShowing = true
-  }
-
-  hide() {
-    // @ts-expect-error TS2339
-    this.overlay.remove()
-    this.reset()
-    // @ts-expect-error TS2339
-    this.copyTunerBar.hide()
-    // @ts-expect-error TS2339
-    this.isShowing = false
-  }
-
-  toggle() {
-    // @ts-expect-error TS2339
-    if (this.isShowing) {
-      this.hide()
-    } else {
-      this.show()
-    }
-  }
-
-  // @ts-expect-error TS7006
-  open(key) {
-    // @ts-expect-error TS2339
-    window.open(`${this.baseUrl}/blurbs/${key}/edit`)
-  }
-
-  makeSpecimens() {
-    for (const { element, keys } of findBlurbs()) {
-      // @ts-expect-error TS2339
-      this.specimens.push(new Specimen(element, keys, this.boundOpen))
-    }
-  }
-
-  makeToggleButton() {
-    const element = document.createElement('a')
-
-    element.addEventListener('click', () => {
-      this.show()
-    })
-
-    element.classList.add('copyray-toggle-button')
-    element.classList.add('hidden-on-mobile')
-    element.textContent = 'Open CopyTuner'
-    document.body.append(element)
-
-    return element
-  }
-
-  makeOverlay() {
-    const div = document.createElement('div')
-    div.setAttribute('id', 'copyray-overlay')
-    div.addEventListener('click', () => this.hide())
-    return div
-  }
-
-  reset() {
-    // @ts-expect-error TS2339
-    for (const specimen of this.specimens) {
-      specimen.remove()
-    }
-  }
-}

data/src/copytuner_bar.ts

@@ -1,129 +0,0 @@
-// @ts-expect-error TS7016
-import debounce from 'lodash.debounce'
-
-const HIDDEN_CLASS = 'copy-tuner-hidden'
-
-export default class CopytunerBar {
-  // @ts-expect-error TS7006
-  constructor(element, data, callback, keysSkipped = false) {
-    // @ts-expect-error TS2339
-    this.element = element
-    // @ts-expect-error TS2339
-    this.data = data
-    // @ts-expect-error TS2339
-    this.callback = callback
-    // @ts-expect-error TS2339
-    this.searchBoxElement = element.querySelector('.js-copy-tuner-bar-search')
-    // @ts-expect-error TS2339
-    this.logMenuElement = this.makeLogMenu()
-    // @ts-expect-error TS2339
-    this.element.append(this.logMenuElement)
-
-    // 巨大DOM/Nokogiri例外でキー付与がスキップされた場合は、オーバーレイが使えないので
-    // ツールバー（Translations in this page）から編集する旨を案内する。
-    if (keysSkipped) {
-      this.appendSkippedNotice()
-    }
-
-    this.addHandler()
-  }
-
-  appendSkippedNotice() {
-    const notice = document.createElement('span')
-    notice.classList.add('copy-tuner-bar__notice')
-    notice.textContent = '⚠ This page is too large for the overlay. Use "Translations in this page" to edit.'
-    // @ts-expect-error TS2339
-    this.element.append(notice)
-  }
-
-  addHandler() {
-    // @ts-expect-error TS2339
-    const openLogButton = this.element.querySelector('.js-copy-tuner-bar-open-log')
-    // @ts-expect-error TS7006
-    openLogButton.addEventListener('click', (event) => {
-      event.preventDefault()
-      this.toggleLogMenu()
-    })
-
-    // @ts-expect-error TS2339
-    this.searchBoxElement.addEventListener('input', debounce(this.onKeyup.bind(this), 250))
-  }
-
-  show() {
-    // @ts-expect-error TS2339
-    this.element.classList.remove(HIDDEN_CLASS)
-    // @ts-expect-error TS2339
-    this.searchBoxElement.focus()
-  }
-
-  hide() {
-    // @ts-expect-error TS2339
-    this.element.classList.add(HIDDEN_CLASS)
-  }
-
-  showLogMenu() {
-    // @ts-expect-error TS2339
-    this.logMenuElement.classList.remove(HIDDEN_CLASS)
-  }
-
-  toggleLogMenu() {
-    // @ts-expect-error TS2339
-    this.logMenuElement.classList.toggle(HIDDEN_CLASS)
-  }
-
-  makeLogMenu() {
-    const div = document.createElement('div')
-    div.setAttribute('id', 'copy-tuner-bar-log-menu')
-    div.classList.add(HIDDEN_CLASS)
-
-    const table = document.createElement('table')
-    const tbody = document.createElement('tbody')
-    tbody.classList.remove('is-not-initialized')
-
-    // @ts-expect-error TS2339
-    for (const key of Object.keys(this.data).sort()) {
-      // @ts-expect-error TS2339
-      const value = this.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.classList.add('copy-tuner-bar-log-menu__row')
-      tr.dataset.key = key
-
-      tr.addEventListener('click', ({ currentTarget }) => {
-        // @ts-expect-error TS2339
-        this.callback(currentTarget.dataset.key)
-      })
-
-      tr.append(td1)
-      tr.append(td2)
-      tbody.append(tr)
-    }
-
-    table.append(tbody)
-    div.append(table)
-
-    return div
-  }
-
-  // @ts-expect-error TS7031
-  onKeyup({ target }) {
-    const keyword = target.value.trim()
-    this.showLogMenu()
-
-    // @ts-expect-error TS2339
-    const rows = [...this.logMenuElement.querySelectorAll('tr')]
-
-    for (const row of rows) {
-      const isShow = keyword === '' || [...row.querySelectorAll('td')].some((td) => td.textContent.includes(keyword))
-      row.classList.toggle(HIDDEN_CLASS, !isShow)
-    }
-  }
-}

data/src/specimen.ts

@@ -1,94 +0,0 @@
-import { computeBoundingBox } from './util'
-
-const ZINDEX = 2_000_000_000
-
-export default class Specimen {
-  // @ts-expect-error TS7006
-  constructor(element, keys, callback) {
-    // @ts-expect-error TS2339
-    this.element = element
-    // @ts-expect-error TS2339
-    this.keys = keys
-    // @ts-expect-error TS2339
-    this.callback = callback
-  }
-
-  show() {
-    // @ts-expect-error TS2339
-    this.box = this.makeBox()
-    // @ts-expect-error TS2339
-    if (this.box === null) return
-
-    // box 全体のクリックは先頭キーを開く（広いクリック領域を維持）。複数キー時は各ラベルから個別に開ける
-    // @ts-expect-error TS2339
-    this.box.addEventListener('click', () => {
-      // @ts-expect-error TS2339
-      this.callback(this.keys[0])
-    })
-
-    // @ts-expect-error TS2339
-    document.body.append(this.box)
-  }
-
-  remove() {
-    // @ts-expect-error TS2339
-    if (!this.box) {
-      return
-    }
-    // @ts-expect-error TS2339
-    this.box.remove()
-    // @ts-expect-error TS2339
-    this.box = null
-  }
-
-  makeBox() {
-    const box = document.createElement('div')
-    box.classList.add('copyray-specimen')
-    box.classList.add('Specimen')
-
-    // @ts-expect-error TS2339
-    const bounds = computeBoundingBox(this.element)
-    if (bounds === null) return null
-
-    for (const key of Object.keys(bounds)) {
-      // @ts-expect-error TS7053
-      const value = bounds[key]
-      // @ts-expect-error TS7015
-      box.style[key] = `${value}px`
-    }
-    // @ts-expect-error TS2322
-    box.style.zIndex = ZINDEX
-
-    // @ts-expect-error TS2339
-    const { position, top, left } = getComputedStyle(this.element)
-    if (position === 'fixed') {
-      // @ts-expect-error TS2339
-      this.box.style.position = 'fixed'
-      // @ts-expect-error TS2339
-      this.box.style.top = `${top}px`
-      // @ts-expect-error TS2339
-      this.box.style.left = `${left}px`
-    }
-
-    // @ts-expect-error TS2339
-    for (const key of this.keys) {
-      box.append(this.makeLabel(key))
-    }
-    return box
-  }
-
-  // @ts-expect-error TS7006
-  makeLabel(key) {
-    const div = document.createElement('div')
-    div.classList.add('copyray-specimen-handle')
-    div.classList.add('Specimen')
-    div.textContent = key
-    // ラベルのクリックはそのキーを開く。box への伝播を止めて先頭キーとの二重発火を防ぐ
-    div.addEventListener('click', (event) => {
-      event.stopPropagation()
-      // @ts-expect-error TS2339
-      this.callback(key)
-    })
-    return div
-  }
-}