Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Gtk.Popover select translate and save state select language. #1399

Closed
wants to merge 5 commits into from
Closed

Fix Gtk.Popover select translate and save state select language. #1399

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d159221
Add save state select translate.
Sep 15, 2024
cbefd34
Fix bug close Gtk.Popover
Sep 19, 2024
6d2bccc
Fix link color and style.
Sep 23, 2024
3064472
Fix for looong language label.
Sep 24, 2024
166a710
Fix resize text "by Google".
Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 79 additions & 13 deletions src/selection-tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,24 +249,60 @@ html, body {
width: 100%;
}
body {
flex: 1;
display: flex;
flex-direction: column;
}
select {
header {
flex: 1;
padding: 8px;
display: none;
}
header button {
width: 100%;
margin-top: 6px;
}
header button:first-child {
margin-top: 0;
}
main {
flex: 1;
display: flex;
overflow-y: auto;
margin: 8px 0;
}
footer {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
align-items: end;
}
footer div {
display: inline-block;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
max-width: 200px;
}
footer a:any-link {
color: inherit;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 8px;
text-align: right;
}
#output {
padding: 0 8px;
}
</style>
<header></header>
<main><div id="output"></div></main>
<footer>${_('Translation by Google Translate')}</footer>
<footer>
<div>${_('Translation by Google Translate')}</div>
<a id="language" href="javascript:void(0)">?</a>
</footer>
<script>
const googleTranslate = (text, lang = defaultLang) => {
fetch('https://translate.googleapis.com/translate_a/single?client=gtx'
Expand All @@ -282,20 +318,50 @@ const googleTranslate = (text, lang = defaultLang) => {
}

const text = "${encodeURIComponent(text)}"

const select = document.createElement('select')
const localStorageKey = 'foliate:storage-change-lang'
const select = document.createElement('div')
const [langs, defaultLang] = JSON.parse(decodeURI("${encodeURI(getGoogleTranslateLanguages())}"))
const selectLang = window.localStorage.getItem(localStorageKey) ?? defaultLang
for (const [lang, label] of langs) {
const option = document.createElement('option')
option.value = lang
option.innerText = label
if (lang === defaultLang) option.selected = true
select.append(option)
const button = document.createElement('button')
button.innerText = label
button.onclick = (e) => {
// Update translate
googleTranslate(text, lang)
// Save state
window.localStorage.setItem(localStorageKey, lang)
// Update language text
document.querySelector('#language').innerText = label
// Update UI
document.querySelector('header').style.display = 'none'
document.querySelector('main').style.display = 'flex'
document.querySelector('footer').style.display = 'flex'
// Enable button
var buttons = document.getElementsByTagName('button')
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = false
}
// Disable button
button.disabled = true
}
if (lang === selectLang) {
// Set language text
document.querySelector('#language').innerText = label
// Disable select button
button.disabled = true
}
select.append(button)
}
document.querySelector('header').append(select)
select.onchange = () => googleTranslate(text, select.value)

googleTranslate(text)
document.querySelector('#language').onclick = () => {
// Update UI, show select list languages
document.querySelector('header').style.display = 'flex'
document.querySelector('main').style.display = 'none'
document.querySelector('footer').style.display = 'none'
}

document.querySelector('header').append(select)
googleTranslate(text, selectLang)
</script>
`,
},
Expand All @@ -310,7 +376,7 @@ const SelectionToolPopover = GObject.registerClass({
enable_back_forward_navigation_gestures: false,
enable_hyperlink_auditing: false,
enable_html5_database: false,
enable_html5_local_storage: false,
enable_html5_local_storage: true,
}),
}), {
'decide-policy': (_, decision, type) => {
Expand Down