From dfaa2754bf69d51534fe7391d45bbddba1af3cf3 Mon Sep 17 00:00:00 2001
From: kekee000 <kekee000@gmail.com>
Date: Fri, 17 Oct 2014 10:32:44 +0800
Subject: [PATCH] modify previewer

---
 css/preview.less                   | 12 ++++++++---
 src/fonteditor/widget/previewer.js | 19 ++++++++---------
 src/ttf/ttf2svg.js                 | 20 +-----------------
 src/ttf/util/unicode2xml.js        | 34 ++++++++++++++++++++++++++++++
 template/preview-ttf.html          | 15 +++++++------
 ttf.html                           |  2 +-
 6 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 src/ttf/util/unicode2xml.js

diff --git a/css/preview.less b/css/preview.less
index 7107bd0..c6c57fa 100644
--- a/css/preview.less
+++ b/css/preview.less
@@ -25,7 +25,7 @@
     }
 }
 
-.icon_lists {
+.icon-list {
     overflow: hidden;
 
     li {
@@ -43,10 +43,16 @@
         font-style: normal;
         -webkit-transition:font-size .25s ease-out 0s;
         -moz-transition:font-size .25s ease-out 0s;
-        transition:font-size .25s ease-out 0s
+        transition:font-size .25s ease-out 0s;
     }
 
     .icon:hover {
         font-size:100px
     }
-}
\ No newline at end of file
+
+    .code {
+        color: green;
+        font-weight: bold;
+    }
+    
+}
diff --git a/src/fonteditor/widget/previewer.js b/src/fonteditor/widget/previewer.js
index be99ea4..a4c0c59 100644
--- a/src/fonteditor/widget/previewer.js
+++ b/src/fonteditor/widget/previewer.js
@@ -16,18 +16,16 @@ define(
         var ttf2base64 = require('ttf/ttf2base64');
         var woff2base64 = require('ttf/woff2base64');
         var svg2base64 = require('ttf/svg2base64');
+        var unicode2xml = require('ttf/util/unicode2xml');
         var utpl = require('utpl');
 
         var previewTplRender = null; // 模板渲染函数
 
-        /**
-         * unicode2html编码
-         * 
-         * @param {number} u unicode码
-         * @return {string} html编码
-         */
-        function unicode2html(u) {
-            return '&amp;#x' + u.toString(16) + ';';
+        // 列出unicode
+        function listUnicode(unicode) {
+            return unicode.map(function(u) {
+                return '\\' + u.toString(16);
+            }).join(',');
         }
 
         /**
@@ -64,8 +62,9 @@ define(
 
             filtered.forEach(function(g) {
                 glyfList.push({
-                    code: '&#x' + g.unicode[0].toString(16) + ';',
-                    codeName: g.unicode.map(unicode2html).join(',')
+                    code: unicode2xml(g.unicode[0]),
+                    codeName: listUnicode(g.unicode),
+                    name: g.name
                 });
             });
 
diff --git a/src/ttf/ttf2svg.js b/src/ttf/ttf2svg.js
index 2e1a47b..c011a84 100644
--- a/src/ttf/ttf2svg.js
+++ b/src/ttf/ttf2svg.js
@@ -14,8 +14,8 @@ define(
         var string = require('common/string');
         var TTFReader = require('./ttfreader');
         var contours2svg = require('./util/contours2svg');
+        var unicode2xml = require('./util/unicode2xml');
         var error = require('./error');
-
         // svg font id
         var SVG_FONT_ID = 'fonteditor';
 
@@ -38,24 +38,6 @@ define(
         // glyph 模板
         var GLYPH_TPL = '<glyph glyph-name="${name}" unicode="${unicode}" d="${d}" />';
 
-        /**
-         * unicode 转xml编码格式
-         * 
-         * @param {Array} unicode unicode字符集
-         * @return {string} xml编码格式
-         */
-        function unicode2xml(unicode) {
-            if (typeof(unicode) == 'number') {
-                unicode = [unicode];
-            }
-            return unicode.map(function(u) {
-                if (u < 0x20) {
-                    return '';
-                }
-                return u >= 0x20 && u <= 255 ? string.encodeHTML(String.fromCharCode(u).toLowerCase()) : '&#x' + u.toString(16) + ';';
-            }).join('');
-        }
-
         /**
          * ttf数据结构转svg
          * 
diff --git a/src/ttf/util/unicode2xml.js b/src/ttf/util/unicode2xml.js
new file mode 100644
index 0000000..57261ba
--- /dev/null
+++ b/src/ttf/util/unicode2xml.js
@@ -0,0 +1,34 @@
+/**
+ * @file unicode2xml.js
+ * @author mengke01
+ * @date 
+ * @description
+ * unicode 转xml字符
+ */
+
+define(
+    function(require) {
+        
+        var string = require('common/string');
+
+        /**
+         * unicode 转xml编码格式
+         * 
+         * @param {Array} unicodeList unicode字符列表
+         * @return {string} xml编码格式
+         */
+        function unicode2xml(unicodeList) {
+            if (typeof(unicodeList) == 'number') {
+                unicodeList = [unicodeList];
+            }
+            return unicodeList.map(function(u) {
+                if (u < 0x20) {
+                    return '';
+                }
+                return u >= 0x20 && u <= 255 ? string.encodeHTML(String.fromCharCode(u).toLowerCase()) : '&#x' + u.toString(16) + ';';
+            }).join('');
+        }
+
+        return unicode2xml;
+    }
+);
diff --git a/template/preview-ttf.html b/template/preview-ttf.html
index 83fdb61..760bd69 100644
--- a/template/preview-ttf.html
+++ b/template/preview-ttf.html
@@ -10,13 +10,14 @@
     </style>
     <div class="main">
         <h1>fonteditor图标</h1>
-        <ul class="icon_lists">
-        {%glyfList.forEach(function(glyf) {%}
-        <li>
-        <i class="icon">{%=glyf.code%}</i>
-            <div class="code">{%=glyf.codeName%}</div>
-        </li>
-        {%});%}
+        <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>
diff --git a/ttf.html b/ttf.html
index 6f22975..f908639 100644
--- a/ttf.html
+++ b/ttf.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>TTF文件管理</title>
+    <title>FontEditor字体编辑器</title>
     <link rel="stylesheet" type="text/css" href="./dep/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="./css/ttf.css">
 </head>