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

modify template

Browse Source
This commit is contained in:
kekee000
2015-04-02 16:46:20 +08:00
parent 06b7b9b2a3
commit bc628a0478
16 changed files with 198 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/common/import-pic.less
View File

@@ -25,6 +25,10 @@
overflow: auto;
}
.canvas-left {
border-right: 1px solid #BAC1CB;
}
&.fitpanel {
canvas {
max-width: 100%;
@@ -35,6 +39,7 @@
&.showleft {
.canvas-left {
width: 100%;
border-right: none;
display: inline-block;
}
.canvas-right {

4
css/preview.less
View File

@@ -15,7 +15,7 @@
.helps {
margin-top:40px;
pre {
padding:20px;
margin:10px 0;
@@ -54,5 +54,5 @@
color: green;
font-weight: bold;
}
}

21
edp-build-config.js
View File

@@ -17,6 +17,15 @@ exports.getProcessors = function () {
relativeUrls: false
}
}),
new Html2JsCompiler({
mode: 'default',
files: ['src/fonteditor/template/**/*.tpl'],
extnames: ['tpl'],
combine: true
}),
new ModuleCompiler( {
files: [
'src/fonteditor/main.js'
@@ -24,6 +33,13 @@ exports.getProcessors = function () {
configFile: './module.conf'
}),
new Html2JsCompiler({
mode: 'default',
files: ['src/fonteditor/template/**/*.tpl'],
extnames: ['tpl'],
clean: true
}),
new JsCompressor({
files: [
'src/fonteditor/main.js',
@@ -54,9 +70,10 @@ exports.exclude = [
"*.bat",
"*.md",
"demo",
"agent/*",
"agent",
"mock",
"test/*",
"test",
"unittest",
"edp-*",
"output",
".DS_Store",

12
edp-webserver-config.js
View File

@@ -1,4 +1,4 @@
exports.port = 8008;
exports.port = 9999;
exports.directoryIndexes = true;
exports.documentRoot = __dirname;
exports.getLocations = function () {
@@ -26,7 +26,15 @@ exports.getLocations = function () {
less()
]
},
{
location: /\.tpl\.js/,
handler: [
html2js({
wrap: true,
mode: 'default'
})
]
},
{
location: /^.*$/,

2
src/fonteditor/controller/actions.js
View File

@@ -263,8 +263,10 @@ define(
if (program.editor.isVisible()) {
program.editor.execCommand('addcontours', setting.contours, {
scale: 1,
selected: true
});
editorDelayFocus();
}
else {
var selected = program.viewer.getSelected();

7
src/fonteditor/controller/default.js
View File

@@ -527,6 +527,13 @@ define(
hideEditor();
}
}
// F3, F4
else if (e.keyCode === 114 || e.keyCode === 115) {
var ttf = program.ttfManager.get();
if (ttf) {
program.previewer.load(ttf, e.keyCode === 114 ? 'ttf' : 'woff');
}
}
});
}

4
src/fonteditor/dialog/setting-import-pic.js
View File

@@ -7,7 +7,7 @@
define(
function (require) {
var TPL = require('text!template/dialog/setting-import-pic.tpl');
var TPL_FILE = require('../template/dialog/setting-import-pic.tpl');
var lang = require('common/lang');
var program = require('../widget/program');
@@ -281,7 +281,7 @@ define(
style: 'import-pic-dialog',
getTpl: function () {
return TPL;
return TPL_FILE;
},
set: function () {

0
src/template/dialog/setting-import-pic.tpl → src/fonteditor/template/dialog/setting-import-pic.tpl
View File

57
src/fonteditor/template/export-render.js Normal file
View File

@@ -0,0 +1,57 @@
/**
* @file html渲染器
* @author mengke01(kekee000@gmail.com)
*/
define(
function (require) {
var utpl = require('utpl');
var fontExampleRender = null; // 图标示例渲染器
var fontCssRender = null; // 图标css渲染器
var tplPreviewCss = null; // 预览css样式
$.get('./css/preview.css', function (text) {
tplPreviewCss = text;
});
var render = {
/**
* 渲染图标示例
*
* @param {Object} iconData 图标数据
* @return {string} html片段
*/
renderFontExample: function (iconData) {
fontExampleRender = fontExampleRender || utpl.template(require('./icon-example.tpl'));
return fontExampleRender(iconData);
},
/**
* 渲染图标css
*
* @param {Object} iconData 图标数据
* @return {string} html片段
*/
renderFontCss: function (iconData) {
fontCssRender = fontCssRender || utpl.template(require('./icon-css.tpl'));
return fontCssRender(iconData);
},
/**
* 渲染预览css
*
* @return {string} html片段
*/
renderPreviewCss: function () {
return tplPreviewCss;
}
};
return render;
}
);

0
src/template/icon-css.tpl → src/fonteditor/template/icon-css.tpl
View File

0
src/template/icon-example.tpl → src/fonteditor/template/icon-example.tpl
View File

32
src/fonteditor/template/preview-render.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* @file 预览渲染器
* @author mengke01(kekee000@gmail.com)
*/
define(
function (require) {
var utpl = require('utpl');
var previewRender = null; // 预览渲染器
var render = {
/**
* 渲染预览页面
*
* @param {Object} data 预览页渲染数据
* @param {Object} data.fontData 字体数据
* @param {Object} data.fontFormat 字体格式
*
* @return {string} html片段
*/
renderPreview: function (data) {
previewRender = previewRender || utpl.template(require('./preview-ttf.tpl'));
return previewRender(data);
}
};
return render;
}
);

54
src/fonteditor/template/preview-ttf.tpl Normal file
View File

@@ -0,0 +1,54 @@
<link rel="stylesheet" href="./css/preview.css">
<style>
@font-face {
font-family: '{%=fontFamily%}';
{%if(fontFormat=='eot'){%}
src: url({%=fontData%});
{%} else if(fontFormat=='ttf') {%}
src: url({%=fontData%}) format('truetype');
{%} else {%}
src: url({%=fontData%}) format('{%=fontFormat%}');
{%}%}
}
.icon {
font-family: '{%=fontFamily%}';
}
</style>
<div class="main">
<h1>预览{%=fontFormat%}格式字体</h1>
<ul class="icon-list">
{%glyfList.forEach(function(glyf) {%}
<li>
<i class="icon">{%=glyf.code%}</i>
<div class="code">{%=glyf.codeName%}</div>
<div class="name">{%=glyf.name%}</div>
</li>
{%});%}
</ul>
<div class="helps">第一步：使用font-face声明字体
<pre>
@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#ux{%=fontFamily%}') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用{%=fontFamily%}的样式
<pre>
.{%=fontFamily%} {
font-family:"{%=fontFamily%}" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>

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

@@ -16,22 +16,8 @@ define(
var ttf2svg = require('ttf/ttf2svg');
var ttf2icon = require('ttf/ttf2icon');
var bytes2base64 = require('ttf/util/bytes2base64');
var exportRender = require('../template/export-render');
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 = '';
// css render
var renderCss = utpl.template(tplCss);
/**
* 导出SFNT结构字体 base64
@@ -81,8 +67,8 @@ define(
function exportFile(ttf, options) {
if (ttf) {
try {
try {
var base64Str = '';
var fileName = (options.fileName || ttf.name.fontFamily || 'export');
@@ -111,19 +97,19 @@ define(
// css
fontzip.file(
'icon.css',
renderCss(iconData)
exportRender.renderFontCss(iconData)
);
// page
fontzip.file(
'page.css',
tplPreviewCss
exportRender.renderPreviewCss()
);
// html
fontzip.file(
'example.html',
renderExample(iconData)
exportRender.renderFontExample(iconData)
);
// zip
@@ -170,16 +156,6 @@ define(
var exporter = {
/**
* 初始化
*/
init: function () {
if (!tplPreviewCss) {
$.get('./css/prevew.css', function (text) {
tplPreviewCss = text;
});
}
},
'export': exportFile
};

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

@@ -22,7 +22,7 @@ define(
var extend = require('common/lang').extend;
var ttf2icon = require('ttf/ttf2icon');
var previewTplRender = null; // 模板渲染函数
var previewRender = require('../template/preview-render'); // 模板渲染函数
var isIE = !!window.ActiveXObject || 'ActiveXObject' in window;
@@ -34,7 +34,7 @@ define(
* @return {string} html字符串
*/
function generatePreviewHTML(ttf, fontFormat) {
fontFormat = !fontFormat || fontFormat === 'ttf' ? 'truetype' : fontFormat;
fontFormat = fontFormat || ttf;
var fontData = '';
var buffer;
@@ -63,23 +63,12 @@ define(
ttf2icon(ttf)
);
return previewTplRender(data);
return previewRender.renderPreview(data);
}
var previewer = {
/**
* 初始化
*/
init: function () {
if (!previewTplRender) {
previewTplRender = utpl.template(
require('text!template/preview-ttf.tpl')
);
}
},
/**
* 加载预览按钮
*
@@ -109,8 +98,6 @@ define(
}
};
previewer.init();
return previewer;
}
);

52
src/template/preview-ttf.tpl
View File

@@ -1,52 +0,0 @@
<link rel="stylesheet" href="./css/preview.css">
<style>
@font-face {
font-family: '{%=fontFamily%}';
{%if(fontFormat=='eot'){%}
src: url({%=fontData%});
{%} else {%}
src: url({%=fontData%}) format('{%=fontFormat%}');
{%}%}
}
.icon {
font-family: '{%=fontFamily%}';
}
</style>
<div class="main">
<h1>fonteditor图标</h1>
<ul class="icon-list">
{%glyfList.forEach(function(glyf) {%}
<li>
<i class="icon">{%=glyf.code%}</i>
<div class="code">{%=glyf.codeName%}</div>
<div class="name">{%=glyf.name%}</div>
</li>
{%});%}
</ul>
<div class="helps">第一步：使用font-face声明字体
<pre>
@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#ux{%=fontFamily%}') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用{%=fontFamily%}的样式
<pre>
.{%=fontFamily%} {
font-family:"{%=fontFamily%}" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>