今天星期天，就讓我稍微喘一口氣，
來點簡單的任務吧。 ^_^

昨天我們做了一個簡單的【翻譯編輯】功能，
可以利用【Ctrl+Shift+點擊】進入翻譯編輯界面，
也可以用【Ctrl+Enter】確認翻譯修改完成。

通常我們在進行翻譯時，
多半會一句接著一句進行翻譯。
如果可以添加【上一句】【下一句】的快速鍵，
應該是很實用的功能。

不過既然要分辨【上一句】、【下一句】，
句子之間的順序就很重要。

目前我們的 sent 標籤，並沒有明確標識出順序的關係，
雖然有 nextSibling、previousSibling 之類的屬性可用，
（還有 nextElementSibling、previousElementSibling）
但由於各個 sent 散落在整個 DOM 樹狀結構的各處，
因此這幾個屬性並不好用。

為了順利取得指定的 sent，
我們還是應該為每個 sent 標上編號：

document.querySelectorAll("sent").forEach((node, i)=>{
  node.id = `sent_${i}`
  ...

有了 id 屬性，要找到【上一句】、【下一句】就很容易了。
由於【上一句】和【下一句】甚至【上下 n 句】的處理邏輯都很類似，
所以我們只會建立一個 nextSent(nth = 1) 函式，
預設為【下一句】，若要【上一句】則設定 nth = -1 即可。

nextSent() 函式的處理邏輯就不多談了，
有興趣的人請直接參見程式碼囉。

function nextSent(nth = 1) {
  var new_sent_id = null
  // 先處理好之前的 sent，並取得其 sent_id
  var prev_sent_id = confirmModification()

  if (prev_sent_id) {
    // 再設定下一個要處理的 sent
    new_sent_id = `sent_${int(prev_sent_id.replace('sent_','')) + nth}`
    new_sent = document.querySelector(`sent#${new_sent_id}`)

    if (new_sent) {
      switchToModification(new_sent)
    }
    else {
      console.log('移動已經到了盡頭。。。')
    }
  }
  else {
    console.log('若要開始編輯翻譯，請按下【Ctrl+Shift】，再點擊您要修改的句子。')
  }

  return new_sent_id
}

值得一提的是，
nextSent() 這個函式會用到之前的 confirmModification() 函式，
而且還需要 confirmModification() 送回所操作 sent 的 id，
所以我們會稍微修改一下 confirmModification() 的內容。

function confirmModification() {
  var prev_sent_id = null
  ...
  if (prev_sent) {
    prev_sent_id = prev_sent.id
    ...
  }
  return prev_sent_id 
}    

另外，由於進入編輯界面的程式碼，
同樣會一再被使用到，
因此我們也把這段程式碼獨立出來，
建立了一個 switchToModification(node) 函式。

function switchToModification(node) {
  ...
  node.innerHTML = `<textarea>${node.innerHTML}</textarea>`
  ...
  textarea.focus()
}

在這個函式的最後，
我們特別用 .focus() 把使用者的焦點設在文字輸入框，
如此一來，每當切換到新的一句時，
就可以直接進行修改，
不需要再用滑鼠去點擊文字輸入框。

在修改翻譯的過程中，
兩手不必離開鍵盤是很重要的事。
這種使用者體驗上的考量，
其實對使用者的觀感影響非常大，
卻也是經常被工程師忽略的細節。

還好現在已經有專門負責使用者體驗的 UX 專業，
若能與程式設計工程師搭配合作，
就能發展出非常受使用者喜愛的產品了。

完成相應的函式之後，
只要再把函式對應到相應的快速鍵即可。

  ...
  else if (e.ctrlKey && e.key=='ArrowUp') {
    nextSent(-1);
  }
  else if (e.ctrlKey && e.key=='ArrowDown') {
    nextSent();
  }
  ...

這樣就完成【上一句】【下一句】的功能囉！

各位可以使用看看，
在 UX 使用者體驗方面，是不是有很明顯的提升呢？

當然，軟體改進是一個持續的進程，
好還要更好，
可說是有志者永恆的追求。

話雖如此，
但除了努力工作之外，
努力玩樂也很重要，
如果累了，
好好休息也很重要喲。

今天是星期天，我們就此打住。
明天再見囉。 ^_^