Initial commit.

frontend/packages/i18n-master/panel/component/home.js

@@ -0,0 +1,123 @@
+'use strcit';
+
+const Fs = require('fs');
+const Path = require('path');
+
+const Language = require('../../utils/language');
+const Event = require('../../utils/event');
+
+exports.template = Fs.readFileSync(Path.join(__dirname, '../template/home.html'), 'utf-8');
+
+exports.props = [];
+
+exports.data = function () {
+    return {
+        state: 'normal',
+
+        languages: [],
+        current: '',
+
+        _language: '',
+    }
+};
+
+exports.watch = {
+    current () {
+        Event.emit('language-changed', this.current);
+    }
+};
+
+exports.methods = {
+    _t (key) {
+        return Editor.T(`i18n.${key}`);
+    },
+
+    _getLanguagePath (language) {
+        return Path.join('resources/i18n/', `${language}.js`);
+    },
+
+    changeEdit () {
+        if (this.state === 'edit') {
+            this.state = 'normal';
+        } else {
+            this.state = 'edit';
+        }
+    },
+
+    changeCreate () {
+        if (this.state === 'create') {
+            this.state = 'normal';
+            this._language = '';
+        } else {
+            this.state = 'create';
+            this._language = '';
+        }
+    },
+
+    /**
+     * 创建一个新的语言包
+     * @param {string} name 
+     */
+    createLanguage (name) {
+        // 检查是否不存在
+        if (!name) {
+            return alert('创建语言失败 - 名称不能为空');
+        }
+        // 检查是否重名
+        if (this.languages.indexOf(name) !== -1) {
+            return alert('创建语言失败 - 该语言已经存在');
+        }
+
+        Language.create(name).then(() => {
+            this.languages.push(name);
+            if (!this.current) {
+                this.current = this.languages[0];
+            }
+            Event.emit('languages-changed', this.languages);
+            this._language = '';
+            this.state = 'normal';
+        }).catch(() => {
+            this._language = '';
+            this.state = 'normal';
+            // todo 错误提示
+        });
+    },
+
+    /**
+     * 删除一个已存在的语言包
+     * @param {string} name 
+     */
+    deleteLanguage (name) {
+        // 检查是否存在
+        if (this.languages.indexOf(name) === -1) {
+            return alert('删除语言失败 - 该语言不存在');
+        }
+
+        // 弹窗提示
+        let code = Editor.Dialog.messageBox({
+            type: 'warning',
+            buttons: ['Cancel', 'OK'],
+            title: 'Delete Language Data',
+            message: 'Delete i18n language data, this cannot be undone!',
+            detail: name,
+            noLink: true
+        });
+
+        if (code === 0) {
+            return;
+        }
+        // 删除 profile
+        Language.remove(name).then(() => {
+            let index = this.languages.indexOf(name);
+            this.languages.splice(index, 1);
+            Event.emit('languages-changed', this.languages);
+            if (name === this.current) {
+                this.current = this.languages[0] || '';
+            }
+        }).catch(() => {
+            // todo 错误提示
+        });
+    },
+};
+
+exports.ready = function () {};

frontend/packages/i18n-master/panel/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const Fs = require('fs');
+
+const Event = Editor.require('packages://i18n/utils/event');
+
+const Home = Editor.require('packages://i18n/panel/component/home');
+
+Editor.Panel.extend({
+
+    style: Fs.readFileSync(Editor.url('packages://i18n/panel/style/home.css')),
+
+    template: Home.template,
+
+    $: {},
+
+    ready () {
+        if (!window.Vue) {
+            // todo 错误信息
+            return;
+        }
+        Home.el = this.shadowRoot;
+        Home.data = Home.data();
+        delete Home.props;
+        delete Home.template;
+        Home.components = {};
+        this._vm = new Vue(Home);
+        window.vm = this._vm
+        
+        let profile = this.profiles.project;
+        if (profile.data.languages) {
+            profile.data.languages.forEach((name) => {
+                this._vm.languages.push(name)
+            });
+        }
+
+        let current = profile.data['default_language'];
+        if (this._vm.languages.indexOf(current) === -1) {
+            this._vm.current = this._vm.languages[0];
+            Editor.warn(`Language is not found - ${current}`);
+        } else {
+            this._vm.current = current;
+        }
+
+        Event.on('language-changed', (name) => {
+            profile.data['default_language'] = name;
+            profile.save();
+            Editor.Scene.callSceneScript('i18n', 'update-default-language', name, function (err, result) {
+                // console.log(result);
+            });
+        });
+
+        Event.on('languages-changed', (languages) => {
+            profile.data.languages = languages.map((name) => {
+                return name;
+            });
+            profile.save();
+        })
+    },
+});

frontend/packages/i18n-master/panel/style/home.css

@@ -0,0 +1,106 @@
+@import url('app://bower_components/fontawesome/css/font-awesome.min.css');
+:host {
+  display: flex;
+}
+.home {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 10px;
+}
+.home header {
+  border-bottom: 1px solid #666;
+  padding: 10px 5px;
+}
+.home .control {
+  padding: 8px 4px;
+}
+.home .control i {
+  padding: 4px 6px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.home .control .fa-pencil-square-o[edit] {
+  color: #cc0000;
+}
+.home .list {
+  overflow: auto;
+  background: #333;
+  padding: 0;
+  flex: 1;
+}
+.home .list ul {
+  padding: 0;
+  margin: 0;
+}
+.home .list ul li {
+  padding: 5px 12px;
+  line-height: 20px;
+  display: flex;
+  list-style: none;
+}
+.home .list ul li:hover {
+  background: #282828;
+}
+.home .list ul li .edit {
+  width: 0;
+  opacity: 0;
+  font-size: 15px;
+  transition: opacity 0.3s, width 0.3s;
+  overflow: hidden;
+  margin-right: 5px;
+}
+.home .list ul li .edit i {
+  padding: 3px;
+  cursor: pointer;
+  color: #cc0000;
+}
+.home .list ul li .edit[edit] {
+  width: 18px;
+  opacity: 1;
+}
+.home .list ul li .name {
+  width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.home .popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: none;
+}
+.home .popup .mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: #474747;
+  opacity: 0.9;
+}
+.home .popup .language {
+  position: absolute;
+  width: 260px;
+  left: 50%;
+  top: 45%;
+  margin: -50px 0 0 -130px;
+}
+.home .popup .language h3 {
+  margin: 0 0 12px 0;
+  text-align: center;
+}
+.home .popup .language .button {
+  text-align: right;
+  display: flex;
+}
+.home .popup .language .button ui-button {
+  margin: 10px;
+  flex: 1;
+}
+.home .popup[active] {
+  display: block;
+}

frontend/packages/i18n-master/panel/style/home.less

@@ -0,0 +1,136 @@
+@import url('app://bower_components/fontawesome/css/font-awesome.min.css');
+
+:host {
+    display: flex;
+}
+
+.home {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 10px;
+
+    header {
+        border-bottom: 1px solid #666;
+        padding: 10px 5px;
+    }
+
+    .control {
+        padding: 8px 4px;
+
+        i {
+            padding: 4px 6px;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+
+        .fa-pencil-square-o[edit] {
+            color: #cc0000;
+        }
+    }
+
+    .list {
+        overflow: auto;
+        background: #333;
+        padding: 0;
+        flex: 1;
+
+        ul {
+            padding: 0;
+            margin: 0;
+
+            li {
+                padding: 5px 12px;
+                line-height: 20px;
+                display: flex;
+                list-style: none;
+
+                &:hover {
+                    background: #282828;
+                }
+
+                .edit {
+                    width: 0;
+                    opacity: 0;
+                    font-size: 15px;
+                    transition: opacity 0.3s, width 0.3s;
+                    overflow: hidden;
+                    margin-right: 5px;
+
+                    i {
+                        padding: 3px;
+                        cursor: pointer;
+                        color: #cc0000;
+                    }
+
+                    &[edit] {
+                        width: 18px;
+                        opacity: 1;
+                    }
+                }
+
+                .name {
+                    width: 90px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                .path {
+                    flex: 1;
+                    width: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+
+    .popup {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: none;
+
+        .mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            background: #474747;
+            opacity: 0.9;
+        }
+
+        .language {
+            position: absolute;
+            width: 260px;
+            left: 50%;
+            top: 45%;
+            margin: -50px 0 0 -130px;
+
+            h3 {
+                margin: 0 0 12px 0;
+                text-align: center;
+            }
+
+            .button {
+                text-align: right;
+                display: flex;
+
+                ui-button {
+                    margin: 10px;
+                    flex: 1;
+                }
+            }
+        }
+
+        &[active] {
+            display: block;
+        }
+    }
+}

frontend/packages/i18n-master/panel/template/home.html

@@ -0,0 +1,73 @@
+<div class="home">
+
+    <header>
+        <span>{{_t('current')}}</span>
+        <span>
+            <ui-select
+                v-value="current"
+            >
+            <template v-for="item in languages">
+                <option>{{item}}</option>
+            </template>
+            </ui-select>
+        </span>
+    </header>
+
+    <section class="control">
+        <i class="fa fa-pencil-square-o" aria-hidden="true"
+            :edit="state === 'edit'"
+            @click="changeEdit"
+        ></i>
+        <i class="fa fa-plus" aria-hidden="true"
+            @click="changeCreate"
+        ></i>
+    </section>
+
+    <section class="list">
+        <ul>
+            <li
+                v-for="item in languages"
+            >
+                <div class="edit"
+                    :edit="state === 'edit'"
+                >
+                    <i class="fa fa-minus-circle" aria-hidden="true"
+                        @click="deleteLanguage(item)"
+                    ></i>
+                </div>
+                <div class="name">
+                    {{item}}
+                </div>
+                <div class="path">
+                    {{_getLanguagePath(item)}}
+                </div>
+            </li>
+        </ul>
+    </section>
+
+    <div class="popup"
+        v-if="state === 'create'"
+        :active="state === 'create'"
+    >
+        <div class="mask"></div>
+        <div class="language">
+            <h3>{{_t('create_language')}}</h3>
+            <ui-prop 
+                :name="_t('language')"
+            >
+                <ui-input
+                    v-value="_language"
+                ></ui-input>
+            </ui-prop>
+            <div class="button">
+                <ui-button
+                    @click="createLanguage(_language)"
+                >{{_t('create')}}</ui-button>
+                <ui-button
+                    @click="changeCreate"
+                >{{_t('cancel')}}</ui-button>
+            </div>
+        </div>
+    </div>
+    
+</div>