[wip] add translation preference controls

This commit is contained in:
dousha 2024-05-24 13:19:26 +08:00
parent 9b40afb09a
commit 5faf1af405
3 changed files with 124 additions and 0 deletions

View File

@ -47,3 +47,22 @@
.d-l10n-color {
display: inline-block;
}
.d-l10n-control-box {
display: flex;
flex-flow: row;
border: 1px solid gray;
padding: 0.5rem;
}
.d-l10n-control-box-item {
display: inline-flex;
margin-right: 1rem;
flex-flow: row;
align-items: center;
}
.d-l10n-control-box-item-label {
display: block;
margin-right: 0.5rem;
}

View File

@ -36,6 +36,37 @@ function isCjkContext(str) {
return false
}
function setupControls() {
const translationModeBox = document.getElementById('d-l10n-translation-mode')
const annotationModeBox = document.getElementById('d-l10n-annotation-mode')
if (translationModeBox == null) {
console.error('d-l10n-translation-mode not found')
return
}
if (annotationModeBox == null) {
console.error('d-l10n-annotation-mode not found')
return
}
const currentPreferredTranslation = getPreferredTranslation()
translationModeBox.value = currentPreferredTranslation
const currentPreferredAnnotation = getPreferredAnnotation()
annotationModeBox.value = currentPreferredAnnotation
translationModeBox.addEventListener('change', (event) => {
changePreferredTranslation(event.target.value)
processTranslationBoxes()
})
annotationModeBox.addEventListener('change', (event) => {
changePreferredAnnotation(event.target.value)
processTranslationBoxes()
})
}
function processColorBoxes() {
const allColorBoxes = document.querySelectorAll(".d-l10n-color");
@ -83,6 +114,25 @@ function changePreferredTranslation(mode) {
}
}
function getPreferredAnnotation() {
if (localStorage) {
return localStorage.getItem("d-l10n-preferred-annotation") || 'none'
}
return 'none';
}
function changePreferredAnnotation(mode) {
// can be 'none', 'parenthesis', 'ruby'
if (mode !== 'none' && mode !== 'parenthesis' && mode !== 'ruby') {
mode = 'none'
}
if (localStorage) {
localStorage.setItem("d-l10n-preferred-annotation", mode)
}
}
function processTranslationBoxes() {
const boxes = document.querySelectorAll(".d-l10n-translate-template");
@ -177,6 +227,7 @@ function processTranslationBoxes() {
}
window.addEventListener("load", () => {
setupControls()
processColorBoxes()
processTranslationBoxes()
});

View File

@ -143,5 +143,59 @@ function d_l10n_color_shortcode($attr = array(), $content = null, $tag = ''): ?s
return '<span class="d-l10n-color" data-color="' . $color . '">' . $content . '</span>';
}
function d_l10n_add_translation_controls($content) {
$controlHtml = <<<HTML
<div class="d-l10n-control-box">
<div class="d-l10n-control-box-item">
<label for="d-l10n-translation-mode">翻译模式</label>
<select id="d-l10n-translation-mode">
<option value="writer">使用作者翻译</option>
<option value="canonical">使用共识性翻译</option>
<option value="original">显示原文</option>
</select>
</div>
<div class="d-l10n-control-box-item">
<label for="d-l10n-annotation-mode">注释模式</label>
<select id="d-l10n-annotation-mode">
<option value="hide">不显示</option>
<option value="appending">括号内显示原文</option>
<option value="ruby">注音形式显示原文</option>
</select>
</div>
</div>
HTML
$controlHtmlEn = <<<HTML
<div class="d-l10n-control-box">
<div class="d-l10n-control-box-item">
<label for="d-l10n-translation-mode">Translation Mode</label>
<select id="d-l10n-translation-mode">
<option value="writer">Use Writer's Translation</option>
<option value="canonical">Use Canonical Translation</option>
<option value="original">Show Original</option>
</select>
</div>
<div class="d-l10n-control-box-item">
<label for="d-l10n-annotation-mode">Annotation Mode</label>
<select id="d-l10n-annotation-mode">
<option value="hide">Hide</option>
<option value="appending">Append Original in Parentheses</option>
<option value="ruby">Show Original in Ruby</option>
</select>
</div>
</div>
HTML
$lang = get_bloginfo('language');
if (strpos($lang, 'zh') !== false) {
$content = $controlHtml . $content;
} else {
$content = $controlHtmlEn . $content;
}
return $content;
}
add_action('init', 'd_l10n_add_shortcodes');
add_action('init', 'd_l10n_enque_assets');
add_filter('the_content', 'd_l10n_add_translation_controls');