[wip] add translation preference controls
This commit is contained in:
parent
9b40afb09a
commit
5faf1af405
@ -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;
|
||||
}
|
||||
|
@ -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()
|
||||
});
|
||||
|
@ -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');
|
||||
|
Loading…
Reference in New Issue
Block a user