i18n: add English translation (#17)

* i18n

Author: TitanSnow

src/components/Dialog.vue

@@ -5,7 +5,7 @@
                 <div class="mp-dialog-container">
 
                     <div class="mp-dialog-header">
-                        <strong>{{ request.title }}</strong>
+                        <strong>{{ t(request.title) }}</strong>
                         <a class="fa fa-close mp-dialog-close" @click="close()"></a>
                     </div>
                     <div class="mp-dialog-body">
@@ -17,8 +17,8 @@
 
                         <div class="mp-dialog-footer">
                             <div>
-                                <button class="mp-dialog-button" @click="close()">取消</button>
-                                <button class="mp-dialog-button" @click="finish()"  style="margin-right: 7px">确定</button>
+                                <button class="mp-dialog-button" @click="close()">{{ t('取消') }}</button>
+                                <button class="mp-dialog-button" @click="finish()"  style="margin-right: 7px">{{ t('确定') }}</button>
                             </div>
                         </div>
                     </div>
@@ -154,6 +154,7 @@ export default {
             this.responseData[request.name] = request.value
         }
     },
-    components: DialogComponents
+    components: DialogComponents,
+    inject: ['t']
 }
-</script>
+</script>

src/components/MarkdownPalettes.vue

@@ -94,6 +94,7 @@ import EditorDialog from './Dialog.vue'
 import { defaultConfig, getConfig } from './DefaultConfig'
 import { contentParserFactory } from './ContentParserFactory'
 import InjectLnParser from './plugins/InjectLnParser.js'
+import { getText } from './i18n'
 
 export default {
     name: 'markdown-palettes',
@@ -182,6 +183,7 @@ export default {
             this.code = newValue
             this.updateCode(newValue)
         }
-    }
+    },
+    provide: () => ({ t: getText })
 }
 </script>

src/components/Toolbar.vue

@@ -3,7 +3,7 @@
         <ul id="mp-editor-menu" v-if="toolbarConfig.length > 0">
             <li v-for="item in toolbarConfig" :class="{'mp-divider':item.name === '|'}" >
                 <span v-if="item.name === '|'">|</span>
-                <a v-else :title="item.title" @click="handleAction(item.action)" unselectable="on">
+                <a v-else :title="t(item.title)" @click="handleAction(item.action)" unselectable="on">
                     <i :class="['fa', item.icon]" :name="item.name" unselectable="on">{{ item.content }}</i>
                 </a>
             </li>
@@ -106,6 +106,7 @@ export default {
                 this.requestData(action.request)
             }
         }
-    }
+    },
+    inject: ['t']
 }
-</script>
+</script>

src/components/dialog-input-components/AbstractInputComponent.vue renamed to src/components/dialog-input-components/AbstractInputComponent.js

@@ -1,4 +1,3 @@
-<script>
 export default {
     props: {
         requestField: {
@@ -16,11 +15,14 @@ export default {
             value: this.requestField.default ? this.requestField.default : ''
         }
     },
+    computed: {
+        title () { return this.t(this.request.title) }
+    },
     watch: {
         value (newValue) {
             this.request.value = newValue
             this.$emit('change', this.request)
         }
-    }
+    },
+    inject: ['t']
 }
-</script>

src/components/dialog-input-components/CodeMirror.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="mp-dialog-codemirror">
-        <label v-if="request.title">{{ request.title }}</label>
+        <label v-if="title">{{ title }}</label>
         <div class="mp-dialog-codemirror-editor"></div>
         <codemirror
                 :value="value"
@@ -32,7 +32,7 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent.vue'
+import abstractInputComponent from './AbstractInputComponent'
 import { codemirror } from 'vue-codemirror-lite'
 
 export default {
@@ -67,4 +67,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/components/dialog-input-components/Input.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="mp-dialog-input">
-        <label>{{ request.title }}</label>
+        <label>{{ title }}</label>
         <input v-model="value">
     </div>
 </template>
@@ -30,10 +30,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent.vue'
+import abstractInputComponent from './AbstractInputComponent'
 
 export default {
     name: 'dialog-input',
     extends: abstractInputComponent
 }
-</script>
+</script>

src/components/dialog-input-components/Select.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="mp-dialog-select">
-        <label>{{ request.title }}</label>
+        <label>{{ title }}</label>
         <select v-model="value">
-            <option v-for="option in request.param.options" :value="option.value">{{ option.title }}</option>
+            <option v-for="option in request.param.options" :value="option.value">{{ t(option.title) }}</option>
         </select>
     </div>
 </template>
@@ -33,10 +33,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent.vue'
+import abstractInputComponent from './AbstractInputComponent'
 
 export default {
     name: 'dialog-select',
     extends: abstractInputComponent
 }
-</script>
+</script>

src/components/i18n.js

@@ -0,0 +1,71 @@
+import _ from 'lodash'
+
+export const dictionary = new Map([
+    [/^en/, new Map([
+        ['确定', 'OK'],
+        ['取消', 'Cancel'],
+        ['粗体', 'Bold'],
+        ['插入代码', 'Insert code'],
+        ['语言类型', 'Language'],
+        ['未选择', 'Unselected'],
+        ['全屏', 'Fullscreen'],
+        [/^(?<level>\d)级标题$/, (text, {groups: {level}}) => `Header ${level}`],
+        ['隐藏', 'Hide'],
+        ['分割线', 'Horizontal rule'],
+        ['插入图片', 'Insert image'],
+        ['图片地址', 'Image URL'],
+        ['图片描述', 'Image title'],
+        ['关于', 'About'],
+        ['斜体', 'Italic'],
+        ['插入链接', 'Insert hyperlink'],
+        ['链接地址', 'Link URL'],
+        ['链接标题', 'Link title'],
+        ['有序列表', 'Ordered list'],
+        ['同步滚动', 'Scroll sync'],
+        ['删除线', 'Strikeout'],
+        ['插入表格', 'Insert table'],
+        ['行数', 'Number of rows'],
+        ['列数', 'Number of columns'],
+        ['对齐方式', 'Alignment'],
+        ['左对齐', 'Flush left'],
+        ['居中', 'Centered'],
+        ['右对齐', 'Flush right'],
+        ['无序列表', 'Unordered list']
+    ])],
+    [/^zh/, new Map([
+        [/^(?<level>\d)级标题$/, (text, {groups: {level}}) => `${'一二三四五六'[level - 1]}级标题`]
+    ])]
+])
+
+export function getText (text) {
+    for (const language of navigator.languages) {
+        for (const [langReg, textMapping] of dictionary) {
+            if (langReg.test(language)) {
+                let result
+                let match = null
+                if (textMapping.has(text)) {
+                    result = textMapping.get(text)
+                } else {
+                    for (const [re, res] of textMapping) {
+                        if (_.isRegExp(re)) {
+                            match = re.exec(text)
+                            if (match !== null) {
+                                result = res
+                                break
+                            }
+                        }
+                    }
+                }
+                if (typeof result !== 'undefined') {
+                    if (typeof result === 'function') {
+                        result = result(text, match === null ? undefined : match)
+                    }
+                    return result
+                } else {
+                    return text
+                }
+            }
+        }
+    }
+    return text
+}