From 4430311690d2b2b41879668917c0f29d730f019b Mon Sep 17 00:00:00 2001 From: mkwiser Date: Tue, 7 Oct 2014 22:54:39 +0800 Subject: [PATCH] add online font support --- css/common/bootstrap.less | 6 ++++ src/fonteditor/data/online-font.js | 20 ++++++++++++ src/fonteditor/dialog/font-online.js | 48 ++++++++++++++++++++++++++++ src/fonteditor/dialog/setting.js | 8 +++++ src/fonteditor/ttf/main.js | 47 +++++++++++++++++++++++++-- src/fonteditor/widget/loader.js | 31 ++++++++++++++++-- src/fonteditor/widget/ttfmanager.js | 6 ++-- ttf.html | 2 +- 8 files changed, 159 insertions(+), 9 deletions(-) create mode 100644 src/fonteditor/data/online-font.js create mode 100644 src/fonteditor/dialog/font-online.js diff --git a/css/common/bootstrap.less b/css/common/bootstrap.less index eb0857f..80e02f9 100644 --- a/css/common/bootstrap.less +++ b/css/common/bootstrap.less @@ -45,4 +45,10 @@ .input-group { margin-bottom: 10px; +} + +.list-group-item { + .from { + float: right; + } } \ No newline at end of file diff --git a/src/fonteditor/data/online-font.js b/src/fonteditor/data/online-font.js new file mode 100644 index 0000000..83e800e --- /dev/null +++ b/src/fonteditor/data/online-font.js @@ -0,0 +1,20 @@ +/** + * @file online-font.js + * @author mengke01 + * @date + * @description + * 在线字体列表 + */ + + +define( + function(require) { + return [ + { + name: 'iconfont.ttf', + url: './font/iconfont.ttf', + from: '阿里妈妈图标库' + } + ]; + } +); diff --git a/src/fonteditor/dialog/font-online.js b/src/fonteditor/dialog/font-online.js new file mode 100644 index 0000000..7213fa5 --- /dev/null +++ b/src/fonteditor/dialog/font-online.js @@ -0,0 +1,48 @@ +/** + * @file setting-unicode.js + * @author mengke01 + * @date + * @description + * 在线字体列表 + */ + +define( + function(require) { + var string = require('common/string'); + var onlineList = require('../data/online-font'); + + return require('./setting').derive({ + + title: '在线字体', + + nofooter: true, + + getTpl: function() { + + var str = '
'; + onlineList.forEach(function(item, index) { + str += '' + + ''+ string.encodeHTML(item.from) +'' + + (index + 1) + '. ' + + string.encodeHTML(item.name) + + ''; + }); + str += '
'; + return str; + }, + + set: function() { + var me = this; + var dialog = this.getDialog(); + dialog.find('.list-group').delegate('.list-group-item', 'click', function(e) { + e.preventDefault(); + e.stopPropagation(); + var url = this.href; + dialog.find('.list-group').off('[data-url]', 'click').remove(); + me.options.onChange && me.options.onChange.call(this, decodeURIComponent(url)); + $('#model-dialog').modal('hide'); + }); + } + }); + } +); diff --git a/src/fonteditor/dialog/setting.js b/src/fonteditor/dialog/setting.js index 68f1a0f..5847fbc 100644 --- a/src/fonteditor/dialog/setting.js +++ b/src/fonteditor/dialog/setting.js @@ -25,8 +25,16 @@ define( dlg.find('.modal-title').html(this.title || '设置'); dlg.find('.modal-body').html(this.getTpl()); + if (this.nofooter) { + dlg.find('.modal-footer').hide(); + } + else { + dlg.find('.modal-footer').show(); + } + dlg.on('hidden.bs.modal', lang.bind(function (e) { if (dlg) { + this.onDispose && this.onDispose(); delete this.options; dlg.off('hidden.bs.modal'); dlg.find('.btn-confirm').off('click'); diff --git a/src/fonteditor/ttf/main.js b/src/fonteditor/ttf/main.js index 38c9560..2cebb2b 100644 --- a/src/fonteditor/ttf/main.js +++ b/src/fonteditor/ttf/main.js @@ -17,13 +17,15 @@ define( var TTFManager = require('../widget/ttfmanager'); var program = require('../widget/program'); var controller = require('../widget/controller/default'); - + var ajaxBinaryFile = require('common/ajaxBinaryFile'); + var string = require('common/string'); var setting = { 'unicode': require('../dialog/setting-unicode'), - 'name': require('../dialog/setting-name') + 'name': require('../dialog/setting-name'), + 'online': require('../dialog/font-online') } var actions = { @@ -55,6 +57,19 @@ define( }); }, + 'add-online': function() { + var dlg = new setting.online({ + onChange: function(url) { + // 此处延迟处理 + setTimeout(function(){ + loadOnline(url); + }, 20); + } + }); + + dlg.show(); + }, + 'setting-unicode': function() { var dlg = new setting.unicode({ onChange: function(unicode) { @@ -81,6 +96,32 @@ define( } }; + // 加载在线字体 + function loadOnline(url) { + ajaxBinaryFile({ + url: url, + onSuccess: function(buffer) { + loader.load(buffer, { + type: 'ttf', + success: function(imported) { + if (program.ttfmanager.get()) { + program.ttfmanager.merge(imported, { + scale: true + }); + } + else { + program.ttfmanager.set(imported); + } + + } + }); + }, + onError: function() { + alert('加载文件错误!'); + } + }); + } + // 设置unicode function setUnicode(unicode) { @@ -131,7 +172,7 @@ define( type: file.name.slice(file.name.lastIndexOf('.') + 1), success: function(imported) { if (imported.glyf.length) { - program.ttfmanager.combine(imported, {scale: true}); + program.ttfmanager.merge(imported, {scale: true}); } } }); diff --git a/src/fonteditor/widget/loader.js b/src/fonteditor/widget/loader.js index 96982fe..29d84a3 100644 --- a/src/fonteditor/widget/loader.js +++ b/src/fonteditor/widget/loader.js @@ -30,7 +30,7 @@ define( * @param {Function} options.success 成功回调 * @param {Function} options.error 失败回调 */ - function loadSFNT(file, options) { + function loadSFNTFile(file, options) { loading.show(); var fileReader = new FileReader(); fileReader.onload = function(e) { @@ -57,6 +57,28 @@ define( fileReader.readAsArrayBuffer(file); } + + /** + * 加载sfnt结构字体 + * + * @param {ArrayBuffer} buffer 二进制流 + * @param {Object} options 参数 + * @param {Object} options.type 文件类型 + * @param {Function} options.success 成功回调 + * @param {Function} options.error 失败回调 + */ + function loadSFNTBinary(buffer, options) { + loading.show(); + if (options.type == 'woff') { + buffer = woff2ttf(buffer, woffOptions); + } + var ttfReader = new TTFReader(); + var ttf = ttfReader.read(buffer); + ttfReader.dispose(); + loading.hide(); + options.success && options.success(ttf); + } + /** * 加载svg结构字体 * @@ -104,7 +126,12 @@ define( loadSVG(file, options); } else if (options.type == 'ttf' || options.type == 'woff'){ - loadSFNT(file, options); + if (file instanceof ArrayBuffer) { + loadSFNTBinary(file, options); + } + else { + loadSFNTFile(file, options); + } } else { options.error && options.error({ diff --git a/src/fonteditor/widget/ttfmanager.js b/src/fonteditor/widget/ttfmanager.js index fc9f84f..b7cd103 100644 --- a/src/fonteditor/widget/ttfmanager.js +++ b/src/fonteditor/widget/ttfmanager.js @@ -37,7 +37,7 @@ define( * * @return {Object} 合并后的ttfObject */ - function combine(ttf, imported, options) { + function merge(ttf, imported, options) { options = options || {}; // 调整glyf以适应打开的文件 @@ -146,8 +146,8 @@ define( * * @return {this} */ - Manager.prototype.combine = function(imported, options) { - var count = combine(this.ttf, imported, options); + Manager.prototype.merge = function(imported, options) { + var count = merge(this.ttf, imported, options); if (count) { this.fireChange(true); } diff --git a/ttf.html b/ttf.html index 7a3810e..9fe10b9 100644 --- a/ttf.html +++ b/ttf.html @@ -21,7 +21,7 @@