copy_tuner_client 0.12.0 → 0.13.0

data/src/copyray.ts

@@ -0,0 +1,130 @@
+import CopyTunerBar from './copytuner_bar'
+import Specimen from './specimen'
+
+const findBlurbs = () => {
+  const filterNone = () => NodeFilter.FILTER_ACCEPT
+
+  // @ts-expect-error TS2554
+  const iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_COMMENT, filterNone, false)
+
+  const comments = []
+  let curNode
+
+  while ((curNode = iterator.nextNode())) {
+    comments.push(curNode)
+  }
+
+  return (
+    comments
+      // @ts-expect-error TS2531
+      .filter((comment) => comment.nodeValue.startsWith('COPYRAY'))
+      .map((comment) => {
+        // @ts-expect-error TS2488
+        const [, key] = comment.nodeValue.match(/^COPYRAY (\S*)$/)
+        const element = comment.parentNode
+        return { key, element }
+      })
+  )
+}
+
+export default class Copyray {
+  // @ts-expect-error TS7006
+  constructor(baseUrl, data) {
+    // @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)
+  }
+
+  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, key } of findBlurbs()) {
+      // @ts-expect-error TS2339
+      this.specimens.push(new Specimen(element, key, 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

@@ -0,0 +1,115 @@
+// @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) {
+    // @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)
+
+    this.addHandler()
+  }
+
+  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/main.ts

@@ -0,0 +1,58 @@
+/* eslint-disable no-console */
+import Copyray from './copyray'
+import { isMac } from './util'
+
+declare global {
+  interface Window {
+    CopyTuner: {
+      url: string
+      // TODO: type
+      data: object
+    }
+  }
+}
+
+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)
+}
+
+const start = () => {
+  const { url, data } = window.CopyTuner
+
+  appendCopyTunerBar(url)
+  const copyray = new Copyray(url, data)
+
+  document.addEventListener('keydown', (event) => {
+    // @ts-expect-error TS2339
+    if (copyray.isShowing && ['Escape', 'Esc'].includes(event.key)) {
+      copyray.hide()
+      return
+    }
+
+    if (((isMac && event.metaKey) || (!isMac && event.ctrlKey)) && event.shiftKey && event.key === 'k') {
+      copyray.toggle()
+    }
+  })
+
+  if (console) {
+    console.log(`Ready to Copyray. Press ${isMac ? 'cmd+shift+k' : 'ctrl+shift+k'} to scan your UI.`)
+  }
+}
+
+if (document.readyState === 'complete' || document.readyState !== 'loading') {
+  start()
+} else {
+  document.addEventListener('DOMContentLoaded', () => start())
+}

data/src/specimen.ts

@@ -0,0 +1,84 @@
+import { computeBoundingBox } from './util'
+
+const ZINDEX = 2_000_000_000
+
+export default class Specimen {
+  // @ts-expect-error TS7006
+  constructor(element, key, callback) {
+    // @ts-expect-error TS2339
+    this.element = element
+    // @ts-expect-error TS2339
+    this.key = key
+    // @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
+
+    // @ts-expect-error TS2339
+    this.box.addEventListener('click', () => {
+      // @ts-expect-error TS2339
+      this.callback(this.key)
+    })
+
+    // @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`
+    }
+
+    box.append(this.makeLabel())
+    return box
+  }
+
+  makeLabel() {
+    const div = document.createElement('div')
+    div.classList.add('copyray-specimen-handle')
+    div.classList.add('Specimen')
+    // @ts-expect-error TS2339
+    div.textContent = this.key
+    return div
+  }
+}

data/src/util.ts

@@ -0,0 +1,38 @@
+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,
+  }
+}
+
+export { isMac, isVisible, getOffset, computeBoundingBox }

data/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

data/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+  },
+  "include": [
+    "client",
+    "src",
+  ]
+}

data/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    outDir: './app/assets',
+    lib: {
+      entry: 'src/main.ts',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      output: {
+        entryFileNames: `javascripts/[name].js`,
+        assetFileNames: `stylesheets/[name].[ext]`,
+      }
+    }
+  },
+})