Initial working draft #1
| @ -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