1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
//@ts-check
import Translate from './Translate.js'
import { debounce } from './index.js'
/**
* Create The menubar
* @returns {HTMLMenuElement}
*/
export function createMenu() {
const header = document.createElement('header')
document.body.append(header)
const menu = document.createElement('menu')
header.append(menu)
menu.role = 'menubar'
return menu
}
/**
* @param {HTMLMenuElement} menu
* @param {Translate} translate
* @returns {Promise<{source: HTMLSelectElement, target: HTMLSelectElement}>}
*/
export async function createDropDown(menu, translate) {
const source = createSourceElement(menu)
const target = createTargetElement(menu)
const langlist = await translate.languages()
langlist.forEach((element) => {
addSelectionOpt(source, element.code, element.name)
addSelectionOpt(target, element.code, element.name)
})
const { language } = await translate.settings()
source.value = language.source.code
target.value = language.target.code
const setup = async () => {
const langList = await translate.languages()
const src = source.value
const targetList = langList.find(obj => obj.code === src)?.targets ?? []
Array.from(target.options).forEach(element => {
element.disabled = !targetList.includes(element.value)
})
}
source.addEventListener("change", setup)
setup()
return { source, target }
}
/**
* @param {HTMLSelectElement} source
* @param {string} value
* @param {string} text
*/
function addSelectionOpt(source, value, text = value) {
const opt = document.createElement("option")
opt.textContent = text
opt.value = value
source.add(opt)
}
/**
* Create the translator boxes
* @param {Translate} translate
* @param {HTMLSelectElement} sourceSelect
* @param {HTMLSelectElement} targetSelect
*/
export async function createEditorWidget(translate, sourceSelect, targetSelect) {
const input = document.createElement('pre')
document.body.appendChild(input)
input.id = 'editor'
input.contentEditable = "true"
const output = document.createElement('pre')
document.body.appendChild(output)
output.id = 'output'
const translateHandler = debounce(async () => {
output.textContent = await translate.translate(
input.textContent ?? "",
sourceSelect.value,
targetSelect.value
)
}, (await translate.settings()).frontendTimeout)
sourceSelect.addEventListener("change", translateHandler)
targetSelect.addEventListener("change", translateHandler)
input.addEventListener("input", translateHandler)
const sourceLang = () => input.lang = sourceSelect.value
sourceLang()
sourceSelect.addEventListener("change", sourceLang)
const targetLang = () => output.lang = targetSelect.value
targetLang()
sourceSelect.addEventListener("change", targetLang)
}
/**
* @param {HTMLMenuElement} menu
* @returns {HTMLSelectElement}
*/
function createTargetElement(menu) {
const menuItem = createMenuItem(menu)
const { label, select } = createLabeledSelect('target', 'Translate Into: ')
menuItem.append(label, select)
return select
}
/**
* @param {HTMLMenuElement} menu
*/
function createSourceElement(menu) {
const menuItem = createMenuItem(menu)
const { label, select } = createLabeledSelect('source', 'TranslateFrom: ')
menuItem.append(label, select)
addSelectionOpt(select, "auto", "Auto Detectiom")
return select
}
/**
* @param {string} id
* @param {string} label
* @returns {{label: HTMLLabelElement, select: HTMLSelectElement}}
*/
function createLabeledSelect(id, label) {
const labelElement = document.createElement('label')
labelElement.htmlFor = id
labelElement.textContent = label
const select = document.createElement('select')
select.id = id
return { label: labelElement, select }
}
/**
* @param {HTMLMenuElement} menu The menubar
* @returns {HTMLLIElement}
*/
function createMenuItem(menu) {
const menuItem = document.createElement('li')
menu.append(menuItem)
menuItem.role = 'menuitem'
return menuItem
}
|
