github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

export icon example

Browse Source
This commit is contained in:
menglingjun
2015-01-08 14:12:29 +08:00
parent 3712f1d8ab
commit d4f4ab38e2
7 changed files with 598 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
dep/requirejs-text.js Normal file
View File

@@ -0,0 +1,391 @@
/**
* @license RequireJS text 2.0.13+ Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
* Available via the MIT or new BSD license.
* see: http://github.com/requirejs/text for details
*/
/*jslint regexp: true */
/*global require, XMLHttpRequest, ActiveXObject,
define, window, process, Packages,
java, location, Components, FileUtils */
define(['module'], function (module) {
'use strict';
var text, fs, Cc, Ci, xpcIsWindows,
progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
hasLocation = typeof location !== 'undefined' && location.href,
defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
defaultHostName = hasLocation && location.hostname,
defaultPort = hasLocation && (location.port || undefined),
buildMap = {},
masterConfig = (module.config && module.config()) || {};
text = {
version: '2.0.13+',
strip: function (content) {
//Strips <?xml ...?> declarations so that external SVG and XML
//documents can be added to a document without worry. Also, if the string
//is an HTML document, only the part inside the body tag is returned.
if (content) {
content = content.replace(xmlRegExp, "");
var matches = content.match(bodyRegExp);
if (matches) {
content = matches[1];
}
} else {
content = "";
}
return content;
},
jsEscape: function (content) {
return content.replace(/(['\\])/g, '\\$1')
.replace(/[\f]/g, "\\f")
.replace(/[\b]/g, "\\b")
.replace(/[\n]/g, "\\n")
.replace(/[\t]/g, "\\t")
.replace(/[\r]/g, "\\r")
.replace(/[\u2028]/g, "\\u2028")
.replace(/[\u2029]/g, "\\u2029");
},
createXhr: masterConfig.createXhr || function () {
//Would love to dump the ActiveX crap in here. Need IE 6 to die first.
var xhr, i, progId;
if (typeof XMLHttpRequest !== "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject !== "undefined") {
for (i = 0; i < 3; i += 1) {
progId = progIds[i];
try {
xhr = new ActiveXObject(progId);
} catch (e) {}
if (xhr) {
progIds = [progId]; // so faster next time
break;
}
}
}
return xhr;
},
/**
* Parses a resource name into its component parts. Resource names
* look like: module/name.ext!strip, where the !strip part is
* optional.
* @param {String} name the resource name
* @returns {Object} with properties "moduleName", "ext" and "strip"
* where strip is a boolean.
*/
parseName: function (name) {
var modName, ext, temp,
strip = false,
index = name.lastIndexOf("."),
isRelative = name.indexOf('./') === 0 ||
name.indexOf('../') === 0;
if (index !== -1 && (!isRelative || index > 1)) {
modName = name.substring(0, index);
ext = name.substring(index + 1);
} else {
modName = name;
}
temp = ext || modName;
index = temp.indexOf("!");
if (index !== -1) {
//Pull off the strip arg.
strip = temp.substring(index + 1) === "strip";
temp = temp.substring(0, index);
if (ext) {
ext = temp;
} else {
modName = temp;
}
}
return {
moduleName: modName,
ext: ext,
strip: strip
};
},
xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
/**
* Is an URL on another domain. Only works for browser use, returns
* false in non-browser environments. Only used to know if an
* optimized .js version of a text resource should be loaded
* instead.
* @param {String} url
* @returns Boolean
*/
useXhr: function (url, protocol, hostname, port) {
var uProtocol, uHostName, uPort,
match = text.xdRegExp.exec(url);
if (!match) {
return true;
}
uProtocol = match[2];
uHostName = match[3];
uHostName = uHostName.split(':');
uPort = uHostName[1];
uHostName = uHostName[0];
return (!uProtocol || uProtocol === protocol) &&
(!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
((!uPort && !uHostName) || uPort === port);
},
finishLoad: function (name, strip, content, onLoad) {
content = strip ? text.strip(content) : content;
if (masterConfig.isBuild) {
buildMap[name] = content;
}
onLoad(content);
},
load: function (name, req, onLoad, config) {
//Name has format: some.module.filext!strip
//The strip part is optional.
//if strip is present, then that means only get the string contents
//inside a body tag in an HTML string. For XML/SVG content it means
//removing the <?xml ...?> declarations so the content can be inserted
//into the current doc without problems.
// Do not bother with the work if a build and text will
// not be inlined.
if (config && config.isBuild && !config.inlineText) {
onLoad();
return;
}
masterConfig.isBuild = config && config.isBuild;
var parsed = text.parseName(name),
nonStripName = parsed.moduleName +
(parsed.ext ? '.' + parsed.ext : ''),
url = req.toUrl(nonStripName),
useXhr = (masterConfig.useXhr) ||
text.useXhr;
// Do not load if it is an empty: url
if (url.indexOf('empty:') === 0) {
onLoad();
return;
}
//Load the text. Use XHR if possible and in a browser.
if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
text.get(url, function (content) {
text.finishLoad(name, parsed.strip, content, onLoad);
}, function (err) {
if (onLoad.error) {
onLoad.error(err);
}
});
} else {
//Need to fetch the resource across domains. Assume
//the resource has been optimized into a JS module. Fetch
//by the module name + extension, but do not include the
//!strip part to avoid file system issues.
req([nonStripName], function (content) {
text.finishLoad(parsed.moduleName + '.' + parsed.ext,
parsed.strip, content, onLoad);
});
}
},
write: function (pluginName, moduleName, write, config) {
if (buildMap.hasOwnProperty(moduleName)) {
var content = text.jsEscape(buildMap[moduleName]);
write.asModule(pluginName + "!" + moduleName,
"define(function () { return '" +
content +
"';});\n");
}
},
writeFile: function (pluginName, moduleName, req, write, config) {
var parsed = text.parseName(moduleName),
extPart = parsed.ext ? '.' + parsed.ext : '',
nonStripName = parsed.moduleName + extPart,
//Use a '.js' file name so that it indicates it is a
//script that can be loaded across domains.
fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
//Leverage own load() method to load plugin value, but only
//write out values that do not have the strip argument,
//to avoid any potential issues with ! in file names.
text.load(nonStripName, req, function (value) {
//Use own write() method to construct full module value.
//But need to create shell that translates writeFile's
//write() to the right interface.
var textWrite = function (contents) {
return write(fileName, contents);
};
textWrite.asModule = function (moduleName, contents) {
return write.asModule(moduleName, fileName, contents);
};
text.write(pluginName, nonStripName, textWrite, config);
}, config);
}
};
if (masterConfig.env === 'node' || (!masterConfig.env &&
typeof process !== "undefined" &&
process.versions &&
!!process.versions.node &&
!process.versions['node-webkit'] &&
!process.versions['atom-shell'])) {
//Using special require.nodeRequire, something added by r.js.
fs = require.nodeRequire('fs');
text.get = function (url, callback, errback) {
try {
var file = fs.readFileSync(url, 'utf8');
//Remove BOM (Byte Mark Order) from utf8 files if it is there.
if (file[0] === '\uFEFF') {
file = file.substring(1);
}
callback(file);
} catch (e) {
if (errback) {
errback(e);
}
}
};
} else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
text.createXhr())) {
text.get = function (url, callback, errback, headers) {
var xhr = text.createXhr(), header;
xhr.open('GET', url, true);
//Allow plugins direct access to xhr headers
if (headers) {
for (header in headers) {
if (headers.hasOwnProperty(header)) {
xhr.setRequestHeader(header.toLowerCase(), headers[header]);
}
}
}
//Allow overrides specified in config
if (masterConfig.onXhr) {
masterConfig.onXhr(xhr, url);
}
xhr.onreadystatechange = function (evt) {
var status, err;
//Do not explicitly handle errors, those should be
//visible via console output in the browser.
if (xhr.readyState === 4) {
status = xhr.status || 0;
if (status > 399 && status < 600) {
//An http 4xx or 5xx error. Signal an error.
err = new Error(url + ' HTTP status: ' + status);
err.xhr = xhr;
if (errback) {
errback(err);
}
} else {
callback(xhr.responseText);
}
if (masterConfig.onXhrComplete) {
masterConfig.onXhrComplete(xhr, url);
}
}
};
xhr.send(null);
};
} else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
//Why Java, why is this so awkward?
text.get = function (url, callback) {
var stringBuffer, line,
encoding = "utf-8",
file = new java.io.File(url),
lineSeparator = java.lang.System.getProperty("line.separator"),
input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
content = '';
try {
stringBuffer = new java.lang.StringBuffer();
line = input.readLine();
// Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
// http://www.unicode.org/faq/utf_bom.html
// Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
// http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
if (line && line.length() && line.charAt(0) === 0xfeff) {
// Eat the BOM, since we've already found the encoding on this file,
// and we plan to concatenating this buffer with others; the BOM should
// only appear at the top of a file.
line = line.substring(1);
}
if (line !== null) {
stringBuffer.append(line);
}
while ((line = input.readLine()) !== null) {
stringBuffer.append(lineSeparator);
stringBuffer.append(line);
}
//Make sure we return a JavaScript string and not a Java string.
content = String(stringBuffer.toString()); //String
} finally {
input.close();
}
callback(content);
};
} else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
typeof Components !== 'undefined' && Components.classes &&
Components.interfaces)) {
//Avert your gaze!
Cc = Components.classes;
Ci = Components.interfaces;
Components.utils['import']('resource://gre/modules/FileUtils.jsm');
xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
text.get = function (url, callback) {
var inStream, convertStream, fileObj,
readData = {};
if (xpcIsWindows) {
url = url.replace(/\//g, '\\');
}
fileObj = new FileUtils.File(url);
//XPCOM, you so crazy
try {
inStream = Cc['@mozilla.org/network/file-input-stream;1']
.createInstance(Ci.nsIFileInputStream);
inStream.init(fileObj, 1, 0, false);
convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
.createInstance(Ci.nsIConverterInputStream);
convertStream.init(inStream, "utf-8", inStream.available(),
Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
convertStream.readString(inStream.available(), readData);
convertStream.close();
inStream.close();
callback(readData.value);
} catch (e) {
throw new Error((fileObj && fileObj.path || '') + ': ' + e);
}
};
}
return text;
});

40
src/fonteditor/widget/exporter.js
View File

@@ -14,9 +14,25 @@ define(
var ttf2woff = require('ttf/ttf2woff');
var ttf2eot = require('ttf/ttf2eot');
var ttf2svg = require('ttf/ttf2svg');
var ttf2icon = require('ttf/ttf2icon');
var bytes2base64 = require('ttf/util/bytes2base64');
var deflate = require('deflate');
var JSZip = require('JSZip');
var utpl = require('utpl');
// icon tpl
var tplExample = require('text!template/icon-example.tpl');
var renderExample = utpl.template(tplExample);
// icon css
var tplCss = require('text!template/icon-css.tpl');
// example css
var tplPreviewCss = require('text!/css/preview.css');
// css render
var renderCss = utpl.template(tplCss);
/**
* 导出SFNT结构字体 base64
@@ -71,9 +87,11 @@ define(
// 导出
if (options.type === 'zip') {
// zip
var zip = new JSZip();
var fontzip = zip.folder('fonteditor');
// ttf
['woff', 'eot', 'svg', 'ttf'].forEach(function (fileType) {
fontzip.file(
@@ -85,6 +103,28 @@ define(
});
// icon
var iconData = ttf2icon(ttf);
// css
fontzip.file(
'icon.css',
renderCss(iconData)
);
// page
fontzip.file(
'page.css',
tplPreviewCss
);
// html
fontzip.file(
'example.html',
renderExample(iconData)
);
// zip
base64Str = 'data:application/zip;base64,' + zip.generate({
type: 'base64'
});

48
src/fonteditor/widget/previewer.js
View File

@@ -19,18 +19,13 @@ define(
var eot2base64 = require('ttf/eot2base64');
var svg2base64 = require('ttf/svg2base64');
var utpl = require('utpl');
var extend = require('common/lang').extend;
var ttf2icon = require('ttf/ttf2icon');
var previewTplRender = null; // 模板渲染函数
var isIE = !!window.ActiveXObject || 'ActiveXObject' in window;
function listUnicode(unicode) {
return unicode.map(function (u) {
return '\\' + u.toString(16);
}).join(',');
}
/**
* 生成预览模板
*
@@ -42,8 +37,6 @@ define(
fontFormat = !fontFormat || fontFormat === 'ttf' ? 'truetype' : fontFormat;
var fontData = '';
var fontFamily = ttf.name.fontFamily || 'fonteditor';
var glyfList = [];
var buffer;
if (fontFormat === 'woff') {
@@ -62,28 +55,15 @@ define(
fontData = ttf2base64(buffer);
}
// 过滤不显示的字形
var filtered = ttf.glyf.filter(function (g) {
return g.name !== '.notdef'
&& g.name !== '.null'
&& g.name !== 'nonmarkingreturn'
&& g.unicode && g.unicode.length;
});
var data = extend(
{
fontData: fontData,
fontFormat: fontFormat
},
ttf2icon(ttf)
);
filtered.forEach(function (g) {
glyfList.push({
code: '&#x' + g.unicode[0].toString(16) + ';',
codeName: listUnicode(g.unicode),
name: g.name
});
});
return previewTplRender({
fontData: fontData,
fontFormat: fontFormat,
fontFamily: fontFamily,
glyfList: glyfList
});
return previewTplRender(data);
}
@@ -92,11 +72,11 @@ define(
/**
* 初始化
*/
init: function () {
init: function() {
if (!previewTplRender) {
$.get('./template/preview-ttf.html', function (text) {
previewTplRender = utpl.template(text);
});
previewTplRender = utpl.template(
require('text!template/preview-ttf.tpl')
);
}
},

33
src/template/icon-css.tpl Normal file
View File

@@ -0,0 +1,33 @@
/**
* @file icon.css
*/
@font-face {
font-family: "{%=fontFamily%}";
src: url("{%=fontFamily%}.eot"); /* IE9 */
src: url("{%=fontFamily%}.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("{%=fontFamily%}.woff") format("woff"), /* chrome、firefox */
url("{%=fontFamily%}.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("{%=fontFamily%}.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
}
[class^="{%=iconPrefix%}-"],
[class*=" {%=iconPrefix%}-"]:after {
font-family: "{%=fontFamily%}";
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;
}
{% _.each(glyfList, function(glyf) { %}
.icon-{%=glyf.name%}:before {
content: "{%=glyf.codeName%}";
}
{% }); %}

24
src/template/icon-example.tpl Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>icon example</title>
<link rel="stylesheet" href="./page.css">
<link rel="stylesheet" href="./icon.css">
</head>
<body>
<div class="main">
<h1>{%=fontFamily%} example</h1>
<ul class="icon-list">
{%_.each(glyfList, function(glyf) {%}
<li>
<i class="icon icon-{%=glyf.name%}"></i>
<div class="code">{%=glyf.codeName%}</div>
<div class="name">{%=glyf.name%}</div>
</li>
{%});%}
</ul>
</div>
</body>
</html>

2
template/preview-ttf.html → src/template/preview-ttf.tpl
View File

@@ -17,7 +17,7 @@
<ul class="icon-list">
{%glyfList.forEach(function(glyf) {%}
<li>
<i class="icon">{%=glyf.code%}</i>
<i class="icon">{%=glyf.code%}</i>
<div class="code">{%=glyf.codeName%}</div>
<div class="name">{%=glyf.name%}</div>
</li>

95
src/ttf/ttf2icon.js Normal file
View File

@@ -0,0 +1,95 @@
/**
* @file ttf2icon.js
* @author junmer
* @description ttf转icon
*/
define(
function (require) {
var TTFReader = require('./ttfreader');
var error = require('./error');
/**
* listUnicode
*
* @param {array} unicode unicode
* @return {string} unicode string
*/
function listUnicode(unicode) {
return unicode.map(function (u) {
return '\\' + u.toString(16);
}).join(',');
}
/**
* ttf数据结构转icon数据结构
*
* @param {ttfObject} ttf ttfObject对象
* @param {Object} options 选项
* @param {Object} options.metadata 字体相关的信息
* @param {Object} options.iconPrefix icon 前缀
* @return {Object} icon obj
*/
function ttfobject2icon(ttf, options) {
var glyfList = [];
// glyf 信息
var filtered = ttf.glyf.filter(function (g) {
return g.name !== '.notdef'
&& g.name !== '.null'
&& g.name !== 'nonmarkingreturn'
&& g.unicode && g.unicode.length;
});
filtered.forEach(function (g) {
glyfList.push({
code: '&#x' + g.unicode[0].toString(16) + ';',
codeName: listUnicode(g.unicode),
name: g.name
});
});
return {
fontFamily: ttf.name.fontFamily || 'fonteditor',
iconPrefix: options.iconPrefix || 'icon',
glyfList: glyfList
};
}
/**
* ttf格式转换成icon
*
* @param {ArrayBuffer|ttfObject} ttfBuffer ttf缓冲数组或者ttfObject对象
* @param {Object} options 选项
* @param {Object} options.metadata 字体相关的信息
*
* @return {Object} icon object
*/
function ttf2icon(ttfBuffer, options) {
options = options || {};
// 读取ttf二进制流
if (ttfBuffer instanceof ArrayBuffer) {
var reader = new TTFReader();
var ttfObject = reader.read(ttfBuffer);
reader.dispose();
return ttfobject2icon(ttfObject, options);
}
// 读取ttfObject
else if (ttfBuffer.version && ttfBuffer.glyf) {
return ttfobject2icon(ttfBuffer, options);
}
error.raise(10101);
}
return ttf2icon;
}
);