diff --git a/assets/css/style.css b/assets/css/style.css
index 28bf621..2930d73 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -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;
+}
diff --git a/assets/js/work.js b/assets/js/work.js
index 1d40167..6c25689 100644
--- a/assets/js/work.js
+++ b/assets/js/work.js
@@ -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()
});
diff --git a/shortcode.php b/shortcode.php
index fc344f2..bfb87f7 100644
--- a/shortcode.php
+++ b/shortcode.php
@@ -143,5 +143,59 @@ function d_l10n_color_shortcode($attr = array(), $content = null, $tag = ''): ?s
return '' . $content . '';
}
+function d_l10n_add_translation_controls($content) {
+ $controlHtml = <<
+
+
+
+
+
+
+
+
+
+ HTML
+
+ $controlHtmlEn = <<
+
+
+
+
+
+
+
+
+
+ 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');