diff --git a/.gitignore b/.gitignore index 0fee068..6d5dccf 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,8 @@ release npm-debug.log node_modules css/common/*.css +demo/sync/*.ttf +demo/sync/*.woff +demo/sync/*.eot +demo/sync/*.svg diff --git a/README.md b/README.md index f4d51c6..c9f6fc1 100644 --- a/README.md +++ b/README.md @@ -38,3 +38,5 @@ fonteditor 在线ttf字体编辑器 15. 2015-3-12 增加字形图像导入功能. 16. 2015-4-9 增加图像导入参数设置，优化导入图形. + +16. 2015-4-12 增加同步字体功能. diff --git a/css/common/bootstrap.less b/css/common/bootstrap.less index f413af8..7e897dd 100644 --- a/css/common/bootstrap.less +++ b/css/common/bootstrap.less @@ -32,6 +32,7 @@ .modal-body { min-height: 100px; + padding-bottom: 5px; } .modal-content { @@ -60,6 +61,9 @@ .input-group { margin-bottom: 10px; + .input-group-addon { + text-align: left; + } } .list-group-item { @@ -74,14 +78,33 @@ hr { } // 自定义宽度 -.form-inline { - +.column-2, +.column-3, +.column-4 { .form-group { margin-right: 10px; + } +} + + +.column-2 { + .form-group { + width: 45%; + } +} + +.column-3 { + .form-group { width: 30%; } } +.column-4 { + .form-group { + width: 22%; + } +} + .navbar { height: 50px; @@ -263,4 +286,5 @@ hr { .btn-right { float: right; + margin-left: 10px; } diff --git a/css/common/dialog.less b/css/common/dialog.less index 7ac7f81..661bd1f 100644 --- a/css/common/dialog.less +++ b/css/common/dialog.less @@ -6,21 +6,11 @@ width: 800px; } - .form-inline .form-group { - width: 22%; - } - .panose-inline { - margin-bottom: -24px; + margin-bottom: -15px; .input-group { width: 100%; } - .input-group-addon { - text-align: left; - } - .form-group { - width: 29%; - } } } diff --git a/css/common/import-pic.less b/css/common/import-pic.less index 80a2074..dd069f9 100644 --- a/css/common/import-pic.less +++ b/css/common/import-pic.less @@ -4,10 +4,6 @@ width: 960px; } - .form-group { - width: auto; - } - .modal-body { padding-bottom: 0; } diff --git a/css/main.css b/css/main.css index 751738d..761eee4 100644 --- a/css/main.css +++ b/css/main.css @@ -114,6 +114,7 @@ table { } .modal-body { min-height: 100px; + padding-bottom: 5px; } .modal-content { border-color: rgba(0, 0, 0, 0.5); @@ -139,6 +140,9 @@ table { .input-group { margin-bottom: 10px; } +.input-group .input-group-addon { + text-align: left; +} .list-group-item .from { float: right; } @@ -146,10 +150,20 @@ hr { margin-top: 10px; margin-bottom: 10px; } -.form-inline .form-group { +.column-2 .form-group, +.column-3 .form-group, +.column-4 .form-group { margin-right: 10px; +} +.column-2 .form-group { + width: 45%; +} +.column-3 .form-group { width: 30%; } +.column-4 .form-group { + width: 22%; +} .navbar { height: 50px; background: #F9F9F9; @@ -295,6 +309,7 @@ hr { } .btn-right { float: right; + margin-left: 10px; } body, html { @@ -898,27 +913,15 @@ html { .setting-metrics .modal-dialog { width: 800px; } -.setting-metrics .form-inline .form-group { - width: 22%; -} .setting-metrics .panose-inline { - margin-bottom: -24px; + margin-bottom: -15px; } .setting-metrics .panose-inline .input-group { width: 100%; } -.setting-metrics .panose-inline .input-group-addon { - text-align: left; -} -.setting-metrics .panose-inline .form-group { - width: 29%; -} .import-pic-dialog .modal-dialog { width: 960px; } -.import-pic-dialog .form-group { - width: auto; -} .import-pic-dialog .modal-body { padding-bottom: 0; } diff --git a/demo/sync/example.html b/demo/sync/example.html new file mode 100644 index 0000000..b8dc102 --- /dev/null +++ b/demo/sync/example.html @@ -0,0 +1,264 @@ + + + + + icon example + + + + +
+

fonteditor example

+ +
+ + + diff --git a/demo/sync/font.php b/demo/sync/font.php new file mode 100644 index 0000000..7cbd210 --- /dev/null +++ b/demo/sync/font.php @@ -0,0 +1,45 @@ + 1, + statusInfo => '没有同步的字体名!' + )); + return; + } + + $count = 0; + if (empty($encode) || $encode === 'base64') { + foreach (explode(',', $fontType) as $type) { + if (!empty($_POST[$type])) { + writeFile($_POST[$type], $fontName.'.'.$type); + $count++; + } + } + } + + callback(array( + status => 0, + statusInfo => 'sync '.$count.'font files.' + )); + } + + main(); diff --git a/demo/sync/icon.css b/demo/sync/icon.css new file mode 100644 index 0000000..cc4fbe1 --- /dev/null +++ b/demo/sync/icon.css @@ -0,0 +1,193 @@ +/** + * @file icon.css + */ + +@font-face { + font-family: "fonteditor"; + src: url("fonteditor.eot"); /* IE9 */ + src: url("fonteditor.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ + url("fonteditor.woff") format("woff"), /* chrome、firefox */ + url("fonteditor.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ + url("fonteditor.svg#uxfonteditor") format("svg"); /* iOS 4.1- */ +} + +[class^="icon-"], +[class*=" icon-"]:after { + font-family: "fonteditor"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + +.icon-uniE001:before { + content: "\e001"; +} + +.icon-uniE002:before { + content: "\e002"; +} + +.icon-uniE003:before { + content: "\e003"; +} + +.icon-uniE004:before { + content: "\e004"; +} + +.icon-uniE005:before { + content: "\e005"; +} + +.icon-uniE006:before { + content: "\e006"; +} + +.icon-uniE007:before { + content: "\e007"; +} + +.icon-uniE008:before { + content: "\e008"; +} + +.icon-uniE009:before { + content: "\e009"; +} + +.icon-uniE00A:before { + content: "\e00a"; +} + +.icon-uniE00B:before { + content: "\e00b"; +} + +.icon-uniE00C:before { + content: "\e00c"; +} + +.icon-uniE00D:before { + content: "\e00d"; +} + +.icon-uniE00E:before { + content: "\e00e"; +} + +.icon-uniE00F:before { + content: "\e00f"; +} + +.icon-uniE010:before { + content: "\e010"; +} + +.icon-uniE011:before { + content: "\e011"; +} + +.icon-uniE012:before { + content: "\e012"; +} + +.icon-uniE013:before { + content: "\e013"; +} + +.icon-uniE014:before { + content: "\e014"; +} + +.icon-uniE015:before { + content: "\e015"; +} + +.icon-uniE016:before { + content: "\e016"; +} + +.icon-uniE017:before { + content: "\e017"; +} + +.icon-uniE018:before { + content: "\e018"; +} + +.icon-uniE019:before { + content: "\e019"; +} + +.icon-uniE01A:before { + content: "\e01a"; +} + +.icon-uniE01B:before { + content: "\e01b"; +} + +.icon-uniE01C:before { + content: "\e01c"; +} + +.icon-uniE01D:before { + content: "\e01d"; +} + +.icon-uniE01E:before { + content: "\e01e"; +} + +.icon-uniE01F:before { + content: "\e01f"; +} + +.icon-uniE020:before { + content: "\e020"; +} + +.icon-uniE021:before { + content: "\e021"; +} + +.icon-uniE022:before { + content: "\e022"; +} + +.icon-uniE023:before { + content: "\e023"; +} + +.icon-uniE024:before { + content: "\e024"; +} + +.icon-uniE025:before { + content: "\e025"; +} + +.icon-uniE026:before { + content: "\e026"; +} + +.icon-uniE027:before { + content: "\e027"; +} + +.icon-uniE028:before { + content: "\e028"; +} + +.icon-uniE029:before { + content: "\e029"; +} + + + diff --git a/demo/sync/page.css b/demo/sync/page.css new file mode 100644 index 0000000..14cf29e --- /dev/null +++ b/demo/sync/page.css @@ -0,0 +1,137 @@ +* { + margin: 0; + padding: 0; + list-style: none; +} +blockquote, +body, +button, +dd, +dl, +dt, +fieldset, +form, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +input, +legend, +li, +ol, +p, +pre, +td, +textarea, +th, +ul { + margin: 0; + padding: 0; +} +body, +button, +input, +select, +textarea { + font: 12px/1.5 tahoma, arial, sans-serif; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; +} +address, +cite, +dfn, +em, +var { + font-style: normal; +} +code, +kbd, +pre, +samp { + font-family: courier new, courier, monospace; +} +small { + font-size: 12px; +} +ol, +ul { + list-style: none; +} +a { + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +legend { + color: #000000; +} +fieldset, +img { + border: 0; +} +button, +input, +select, +textarea { + font-size: 100%; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +.main { + padding: 30px 100px; +} +.main h1 { + font-size: 36px; + color: #333; + text-align: left; + margin-bottom: 30px; + border-bottom: 1px solid #eeeeee; +} +.helps { + margin-top: 40px; +} +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} +.icon-list { + overflow: hidden; +} +.icon-list li { + float: left; + width: 100px; + height: 150px; + text-align: center; +} +.icon-list .icon { + font-size: 42px; + line-height: 100px; + margin: 10px 0; + color: #333; + font-style: normal; + -webkit-transition: font-size 0.25s ease-out 0s; + -moz-transition: font-size 0.25s ease-out 0s; + transition: font-size 0.25s ease-out 0s; +} +.icon-list .icon:hover { + font-size: 100px; +} +.icon-list .code { + color: green; + font-weight: bold; +} diff --git a/index.html b/index.html index 661913b..7333b3f 100644 --- a/index.html +++ b/index.html @@ -126,7 +126,7 @@
- + diff --git a/src/fonteditor/controller/actions.js b/src/fonteditor/controller/actions.js index 6cb43f9..6547896 100644 --- a/src/fonteditor/controller/actions.js +++ b/src/fonteditor/controller/actions.js @@ -57,6 +57,16 @@ define( program.editor.focus(); }, 20); + // 延迟同步选项 + var fontDelaySync = lang.debounce(function (projectId, ttf, syncConfig) { + program.loading.show('正在同步...', 4000); + program.sync.addTask(projectId, ttf, syncConfig).then(function (reason) { + program.loading.show('同步成功...', 400); + }, function (reason) { + program.loading.show('同步失败：' + reason.statusInfo + '...', 400); + }); + }, 500); + var actions = { 'undo': function () { @@ -125,6 +135,11 @@ define( .then(function () { program.ttfManager.setState('saved'); program.loading.show('保存成功...', 400); + + var syncConfig = program.project.getConfig(program.data.projectId).sync; + if (syncConfig && !syncConfig.pause) { + fontDelaySync(program.data.projectId, program.ttfManager.get(), syncConfig); + } }, function () { program.loading.show('保存失败...', 1000); }); @@ -142,6 +157,7 @@ define( program.ttfManager.setState('new'); program.projectViewer.show(program.project.items(), id); program.loading.show('保存成功...', 400); + }, function () { program.loading.show('保存失败...', 400); }); diff --git a/src/fonteditor/controller/default.js b/src/fonteditor/controller/default.js index 26f7cd4..1d746b5 100644 --- a/src/fonteditor/controller/default.js +++ b/src/fonteditor/controller/default.js @@ -347,6 +347,26 @@ define( } }).show(); }) + .on('setting-sync', function (e) { + if (program.data.projectId) { + + var syncConfig = program.project.getConfig(program.data.projectId).sync; + if (!syncConfig) { + syncConfig = { + name: program.ttfManager.get().name.fontFamily + }; + } + + var SettingSync = settingSupport.sync; + !new SettingSync({ + onChange: function (setting) { + program.project.updateConfig(program.data.projectId, { + sync: setting + }); + } + }).show(syncConfig); + } + }) .on('refresh', function (e) { showTTF(program.ttfManager.get(), 1); }) diff --git a/src/fonteditor/dialog/setting-sync.js b/src/fonteditor/dialog/setting-sync.js new file mode 100644 index 0000000..14e2c87 --- /dev/null +++ b/src/fonteditor/dialog/setting-sync.js @@ -0,0 +1,49 @@ +/** + * @file 同步字体设置 + * @author mengke01(kekee000@gmail.com) + */ + + +define( + function (require) { + + var tpl = require('../template/dialog/setting-sync.tpl'); + + return require('./setting').derive({ + + title: '同步字体', + + getTpl: function () { + return tpl; + }, + + set: function (setting) { + this.setFields(setting || {}); + var me = this; + $('#setting-sync-cancel').on('click', function () { + me.hide(0); + }); + }, + + onDispose: function () { + $('#setting-sync-cancel').off('click'); + }, + + validate: function () { + var setting = this.getFields(); + + if (!setting.url || !setting.name) { + alert('请设置同步URL和文件名称!'); + return false; + } + + if (!setting.woff && !setting.ttf && !setting.svg && !setting.eot) { + alert('请设置文件类型!'); + return false; + } + + return setting; + } + }); + } +); diff --git a/src/fonteditor/dialog/setting.js b/src/fonteditor/dialog/setting.js index c690f5f..2082455 100644 --- a/src/fonteditor/dialog/setting.js +++ b/src/fonteditor/dialog/setting.js @@ -262,6 +262,17 @@ define( return this; }; + /** + * 关闭选项卡 + */ + Setting.prototype.hide = function (setting) { + if (undefined !== setting) { + this.options.onChange && this.options.onChange.call(this, setting); + } + + $('#model-dialog').modal('hide'); + }; + /** * 设置设置选项 @@ -282,7 +293,6 @@ define( return this.setting; }; - /** * 注销 */ diff --git a/src/fonteditor/dialog/support.js b/src/fonteditor/dialog/support.js index 28b8860..a1e17fa 100644 --- a/src/fonteditor/dialog/support.js +++ b/src/fonteditor/dialog/support.js @@ -20,7 +20,8 @@ define( 'editor': require('../dialog/setting-editor'), 'find-glyf': require('../dialog/setting-find-glyf'), 'ie': require('../dialog/setting-ie'), - 'import-pic': require('../dialog/setting-import-pic') + 'import-pic': require('../dialog/setting-import-pic'), + 'sync': require('../dialog/setting-sync') }; } ); diff --git a/src/fonteditor/main.js b/src/fonteditor/main.js index ea4098d..d7418a3 100644 --- a/src/fonteditor/main.js +++ b/src/fonteditor/main.js @@ -129,6 +129,9 @@ define( // 预览器 program.previewer = require('./widget/previewer'); + // 同步组件 + program.sync = require('./widget/sync'); + controller.init(program); // 加载项目 diff --git a/src/fonteditor/menu/viewer.js b/src/fonteditor/menu/viewer.js index 0c684ca..1475b5f 100644 --- a/src/fonteditor/menu/viewer.js +++ b/src/fonteditor/menu/viewer.js @@ -59,6 +59,10 @@ define( { name: 'setting-unicode', title: '设置代码点' + }, + { + name: 'setting-sync', + title: '同步字体' } ]; } diff --git a/src/fonteditor/template/dialog/setting-editor.tpl b/src/fonteditor/template/dialog/setting-editor.tpl index 2680e30..a0b00d0 100644 --- a/src/fonteditor/template/dialog/setting-editor.tpl +++ b/src/fonteditor/template/dialog/setting-editor.tpl @@ -1,4 +1,4 @@ -
+
字体列表颜色 @@ -24,7 +24,7 @@
-
+
吸附到网格线 @@ -48,7 +48,7 @@
-
+
填充轮廓 @@ -68,7 +68,7 @@
-
+
网格线颜色 @@ -82,7 +82,7 @@
-
+
度量线颜色 @@ -90,7 +90,7 @@
-
+
保存设置 diff --git a/src/fonteditor/template/dialog/setting-editor.tpl.js b/src/fonteditor/template/dialog/setting-editor.tpl.js index 389db05..b00a16c 100644 --- a/src/fonteditor/template/dialog/setting-editor.tpl.js +++ b/src/fonteditor/template/dialog/setting-editor.tpl.js @@ -1 +1 @@ -define(function () {return '
\r\n
\r\n
\r\n 字体列表颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n 字体列表大小\r\n \r\n
\r\n
\r\n
\r\n
\r\n 分页个数\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 吸附到网格线\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 吸附到轮廓\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n 显示网格\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n 填充轮廓\r\n \r\n
\r\n
\r\n
\r\n
\r\n 轮廓颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n 轮廓填充颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 网格线颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n 网格线间距\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 度量线颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n 保存设置\r\n \r\n
重置为默认设置\r\n
\r\n';}); \ No newline at end of file +define(function () {return '
\r\n
\r\n
\r\n 字体列表颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n 字体列表大小\r\n \r\n
\r\n
\r\n
\r\n
\r\n 分页个数\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 吸附到网格线\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n 吸附到轮廓\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n 显示网格\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n 填充轮廓\r\n \r\n
\r\n
\r\n
\r\n
\r\n 轮廓颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n 轮廓填充颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 网格线颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n 网格线间距\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 度量线颜色\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n 保存设置\r\n \r\n
重置为默认设置\r\n
\r\n';}); \ No newline at end of file diff --git a/src/fonteditor/template/dialog/setting-metrics.tpl b/src/fonteditor/template/dialog/setting-metrics.tpl index 53676ae..3474448 100644 --- a/src/fonteditor/template/dialog/setting-metrics.tpl +++ b/src/fonteditor/template/dialog/setting-metrics.tpl @@ -1,4 +1,4 @@ -
+
上升 @@ -20,7 +20,7 @@
-
+
win上升 @@ -58,7 +58,7 @@ -
+
x高度 @@ -99,7 +99,7 @@
-
+
下标水平 @@ -127,7 +127,7 @@
-
+
上标水平 @@ -155,7 +155,7 @@
-
+
供应商ID @@ -177,5 +177,5 @@
-
${panoseOptions}
+
${panoseOptions}
diff --git a/src/fonteditor/template/dialog/setting-metrics.tpl.js b/src/fonteditor/template/dialog/setting-metrics.tpl.js index 12c5e4f..8bb4f2c 100644 --- a/src/fonteditor/template/dialog/setting-metrics.tpl.js +++ b/src/fonteditor/template/dialog/setting-metrics.tpl.js @@ -1 +1 @@ -define(function () {return '
\r\n
\r\n
\r\n 上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n 行间距\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n win上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n win下降\r\n \r\n
\r\n
\r\n 计算\r\n
\r\n
\r\n
\r\n
\r\n typo上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo间距\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n x高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 大写H高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n 下标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标Y偏移\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n 上标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标Y偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n 供应商ID\r\n \r\n
\r\n
\r\n
\r\n
\r\n 粗细\r\n \r\n
\r\n
\r\n
\r\n
\r\n 宽度\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
${panoseOptions}
\r\n
\r\n';}); \ No newline at end of file +define(function () {return '
\r\n
\r\n
\r\n 上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n 行间距\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n win上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n win下降\r\n \r\n
\r\n
\r\n 计算\r\n
\r\n
\r\n
\r\n
\r\n typo上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo间距\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n x高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 大写H高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n 下标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标Y偏移\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n 上标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标Y偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n 供应商ID\r\n \r\n
\r\n
\r\n
\r\n
\r\n 粗细\r\n \r\n
\r\n
\r\n
\r\n
\r\n 宽度\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
${panoseOptions}
\r\n
\r\n';}); \ No newline at end of file diff --git a/src/fonteditor/template/dialog/setting-sync.tpl b/src/fonteditor/template/dialog/setting-sync.tpl new file mode 100644 index 0000000..6d75a49 --- /dev/null +++ b/src/fonteditor/template/dialog/setting-sync.tpl @@ -0,0 +1,66 @@ + +
+ +
+ 远程地址 + +
+
+ + +
+ +
+
+ 字体名称 + +
+
+
+
+ 暂停同步 + + + +
+
+
+
+ 字体类型： + +
+
+ woff + + + +
+
+ +
+
+ ttf + + + +
+
+ +
+
+ svg + + + +
+
+ +
+
+ eot + + + +
+
+
diff --git a/src/fonteditor/template/dialog/setting-sync.tpl.js b/src/fonteditor/template/dialog/setting-sync.tpl.js new file mode 100644 index 0000000..57dbc87 --- /dev/null +++ b/src/fonteditor/template/dialog/setting-sync.tpl.js @@ -0,0 +1 @@ +define(function () {return '\n
\n \n
\n 远程地址\n \n
\n
\n\n\n
\n\n
\n
\n 字体名称\n \n
\n
\n
\n
\n 暂停同步\n \n \n \n
\n
\n
\n
\n 字体类型： \n\n
\n
\n woff\n \n \n \n
\n
\n\n
\n
\n ttf\n \n \n \n
\n
\n\n
\n
\n svg\n \n \n \n
\n
\n\n
\n
\n eot\n \n \n \n
\n
\n
\n';}); \ No newline at end of file diff --git a/src/fonteditor/widget/project.js b/src/fonteditor/widget/project.js index 48d530c..9b29d6d 100644 --- a/src/fonteditor/widget/project.js +++ b/src/fonteditor/widget/project.js @@ -10,6 +10,7 @@ define( function (require) { + var lang = require('common/lang'); var DataStore = require('common/DataStore'); var Resolver = require('common/promise'); @@ -171,6 +172,54 @@ define( return Resolver.rejected(id); }, + /** + * 获取项目配置 + * + * @param {string} id 项目编号 + * @return {Object} 项目配置 + */ + getConfig: function (id) { + var list = this.items(); + var item = list.filter(function (item) { + return item.id === id + })[0]; + + if (!item) { + return false; + } + + return item.config || {}; + }, + + /** + * 更新项目配置 + * + * @param {string} id 项目编号 + * @param {Object} config 配置信息 + * @return {boolean} 是否更新成功 + */ + updateConfig: function (id, config) { + var list = this.items(); + var finded = false; + for (var i = list.length - 1; i >= 0; i--) { + if (list[i].id === id) { + if (list[i].config) { + lang.extend(list[i].config, config); + } + else { + list[i].config = config; + } + finded = true; + break; + } + } + + if (finded) { + storage.setItem('project-list', JSON.stringify(list)); + } + return finded; + }, + /** * 清空项目组 */ diff --git a/src/fonteditor/widget/sync.js b/src/fonteditor/widget/sync.js new file mode 100644 index 0000000..36240b9 --- /dev/null +++ b/src/fonteditor/widget/sync.js @@ -0,0 +1,139 @@ +/** + * @file 同步组件 + * @author mengke01(kekee000@gmail.com) + */ + + +define( + function (require) { + + var Resolver = require('common/promise'); + var project = require('./project'); + var TTFWriter = require('ttf/ttfwriter'); + var ttf2woff = require('ttf/ttf2woff'); + var ttf2eot = require('ttf/ttf2eot'); + var ttf2svg = require('ttf/ttf2svg'); + var bytes2base64 = require('ttf/util/bytes2base64'); + + var formSubmitId = 0; + + /** + * 创建form提交表单 + * + * @param {string} url 同步的地址 + * @param {Object} formData 提交的数据 + * @return {HTMLElement} form对象 + */ + function createSubmitForm(url, formData) { + var form = document.createElement('form'); + form.id = 'sync-' + (formSubmitId++); + form.target = 'sync-frame'; + form.method = 'post'; + form.action = url; + + Object.keys(formData).forEach(function (key) { + var element = document.createElement('input'); + element.type = 'hidden'; + element.name = key; + element.value = formData[key]; + form.appendChild(element); + }); + document.body.appendChild(form); + return form; + } + + + /** + * 进行远程同步 + * + * @param {Object} syncConfig 同步配置 + * @param {Object} ttf ttf对象 + * @param {Object} resolver resolver对象 + */ + function doSync(syncConfig, ttf, resolver) { + + var fontType = []; + var syncData = {}; + + if (syncConfig.woff || syncConfig.ttf || syncConfig.eot) { + var buffer = new TTFWriter().write(ttf); + + if (syncConfig.ttf) { + fontType.push('ttf'); + syncData.ttf = bytes2base64(buffer); + } + + if (syncConfig.woff) { + fontType.push('woff'); + syncData.woff = bytes2base64(ttf2woff(buffer)); + } + + if (syncConfig.eot) { + fontType.push('eot'); + syncData.eot = bytes2base64(ttf2eot(buffer)); + } + + buffer = null; + } + + if (syncConfig.svg) { + fontType.push('svg'); + syncData.svg = btoa(ttf2svg(ttf)); + } + + syncData.encode = 'base64'; + syncData.fontName = syncConfig.name; + syncData.fontType = fontType.join(','); + + var form = createSubmitForm(syncConfig.url, syncData); + form.submit(); + document.body.removeChild(form); + resolver.resolve({ + status: 0 + }); + } + + var sync = { + + /** + * 添加一个任务 + * @param {Object} projectId 项目编号或者同步选项 + * @param {?Object} ttf 字体对象 + * @param {?Object} syncConfig 同步选项 + */ + addTask: function (projectId, ttf, syncConfig) { + + if (!syncConfig) { + syncConfig = project.getConfig(projectId).sync; + } + + if (!syncConfig || !syncConfig.url) { + return Resolver.rejected({ + status: 2, + statusInfo: '没有同步设置!' + }); + } + + var resolver = new Resolver(); + + if (!ttf) { + project.get(projectId).then(function (data) { + doSync(syncConfig, data, resolver); + }, function () { + resolver.reject({ + status: 2, + statusInfo: '没有要同步的字体!' + }); + }); + } + else { + doSync(syncConfig, ttf, resolver); + } + + return resolver.promise(); + } + }; + + return sync; + } +);