今天真是好日子。謝謝費德洛、Pujols 和大谷 ^_^

2022 iThome 鐵人賽

DAY 9

Software Development

譯者會消失嗎？Maybe, but not today —— 你，才是更好的翻譯師系列第 9 篇

14th鐵人賽

landylan

2022-09-24 13:14:06

469 瀏覽

分享至

一代球王費德洛今日退休令人感傷，
但美好的歷程已經走過，41 歲值得了。

我一直以為，網球就像劍術高手對陣。
近身對戰的劍術，過招速度太快，真能親見也是讓人眼花繚亂，
更何況生命相搏的勝敗，除了電影實在不可能常見於生活之中。

但網球對決就仿佛比劍，卻放慢了動作，
不必擔心生死，還能讓雙方做出完整的招式回應，
而那網球就像劍氣，攻向對方就看對方如何接招。
來往之間，煞是好看。

而宣告今年球季結束之後就要退休的普神，
今天也神奇地以連續兩打席完成 700 轟了！
全壘打就像煙火般綻放，普神呀你這狀態，
我真的好想再看你繼續打球呀！ ^_^

至於大谷，更讓我們見證，
超越當年貝比魯斯的熱血與感動。
MVP 什麼的，就讓其他人吵去吧。
今天，單一球季 30 轟 + 200K 達陣。
明天，我們還將會看到什麼呢？

謝謝你們！
青春就是要這樣綻放呀！
看到你們如此不懈，
我怎麼好意思蹉跎青春呢 ^_^

身為一個譯者，
我總想讓讀者看到更好的翻譯。
每次看到超爛的翻譯，
我就會覺得渾身不舒服，
甚至覺得那些爛翻譯，簡直就是在犯罪 ^_^
但想去改正，卻沒有途徑，
這實在是很折磨人的感覺。

今天這個好日子，
我們就來添加翻譯編輯的功能吧。 ^_^

網頁經過分句之後，
我們現在要處理的東西，就是 sent 所包著的內容。

首先，我們除了記錄每個 sent 的文字（textContent），
同時也把相應的 HTML（innerHTML）記錄起來。

orig_htmls[i] = node.innerHTML
...
tran_htmls[i] = node.innerHTML

然後，我們要建立某種方式，
讓每個 sent 可以進入編輯界面。

node.onclick = e => {
  if (e.shiftKey && e.ctrlKey) {
    ...
    node.innerHTML = `<textarea>${node.innerHTML}</textarea>`
    ...
  }
  ...
}

這樣一來，只要先按住 Ctrl+Shift，再點擊（click）句子，
就可以讓它進入編輯界面了。

這裡有個小技巧，稍微說明一下。
由於我們採用【滑鼠點擊句子】的做法，
如果所要點擊的句子，正好是可連往其他頁面的超鏈結，
點擊之後瀏覽器就會離開原來的頁面，前往另一個頁面去了。

為了解決這個問題，我們採用了兩種做法：

限定我們的 click 點擊動作，必須搭配 Ctrl+Shift 的按鍵。採用這種特殊組合鍵方式，可避免影響到原本滑鼠點擊的功能。
既然採用了特殊組合鍵，我們就可以針對這個特殊組合鍵，關閉掉點擊的預設行為。
```
e.preventDefault(); // 阻斷預設行為=》例如點擊 link 不會前往該 url
```
如果希望這個 click 點擊事件，不再繼續往後傳給其他的事件處理函式，甚至可以加上這行：
```
e.stopPropagation(); // 事件不再繼續往後傳，阻斷後面的事件（capture&bubble；往下抓往上冒）
```

翻譯編輯修改完成之後，
我們可以再設定一個快速鍵【Ctrl+Enter】，
來結束翻譯編輯的工作。
快速鍵的偵測工作，是由整個 document 來負責的，
所以這個事件的相應程式碼，
會放在 document.onkeydown 裡頭：

document.onkeydown = (e) =>{
  if ...
    ...
  else if (e.ctrlKey && e.key=='Enter') {
    // 先處理之前別處的 textarea
    prev_textarea = document.querySelector("sent textarea")
    if (prev_textarea) {
      prev_sent = prev_textarea.parentNode
      prev_sent.innerHTML = prev_textarea.value
    }
  }
}

另外，我們也有可能在編輯某句時，
突然想去編輯其它句。
換句話說，在編輯任何一句的時候，
之前可能在其他處也有某句正開著編輯界面。
所以在進入編輯界面之前，
應該先檢查一下是否存在著之前打開的編輯界面，
如果有的話，同樣要先把前一句處理完成。

這段【確認文字框輸入內容】的程式碼，
與之前【Ctrl+Enter】的程式碼完全相同。
既然是重複的程式碼，
我們就把它獨立出來，另外建立一個函式：

function confirmModification() {
  prev_textarea = document.querySelector("sent textarea")
  if (prev_textarea) {
    prev_sent = prev_textarea.parentNode
    if (prev_sent) {
      prev_sent.innerHTML = prev_textarea.value
    }
  }    
}

這樣一來，程式碼簡潔了許多，
而且這部分的程式碼就被獨立出來，
只要有所改動，
所有用到它的地方全都會跟著改動，
這樣就不需要去每一處逐一進行修改了。
這就是使用 function 函式其中的一個好處。

程式設計領域有一個所謂的 DRY 原則，
原文就叫做 Don't Repeat Youself。
採用 function 就是其中的一種實現方式。
（當然還是有其他的實現方式 ^_^）

程式碼的其他部分，
大多是針對文字輸入框的美觀性，
（例如自動調整文字框高度與寬度）
這裡就不再多做介紹，
有興趣的人可以自己參考一下囉。

現在只要執行程式碼，
就可以開始編輯翻譯文字了！！