From 1a7c817711dcf4b8a25a06ebf48a1d2001a2ce2c Mon Sep 17 00:00:00 2001
From: Shaunak Kishore <kshaunak@gmail.com>
Date: Sun, 7 Feb 2016 23:45:15 -0500
Subject: [PATCH] Get links to components working

---
 client/character.html |  8 ++++++--
 client/character.js   | 20 +++++++++++++++++++-
 client/style.less     |  1 +
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/client/character.html b/client/character.html
index 1d22b69d..8a9235d5 100644
--- a/client/character.html
+++ b/client/character.html
@@ -1,7 +1,11 @@
 <template name="decomposition">
   <div class="decomposition">
     <div class="header"><div class="value">{{value}}</div> -</div>
-    <div class="text">{{label}}</div>
+    {{#if link}}
+      <a class="text link" href="{{link}}">{{label}}</a>
+    {{else}}
+      <div class="text">{{label}}</div>
+    {{/if}}
     {{#each children}}
       {{> decomposition this}}
     {{/each}}
@@ -49,7 +53,7 @@
           {{#each metadata}}
             <div class="field">
               <label class="control-label">{{format label}}</label>
-              <div class="value">{{value}}</div>
+              <div class="value">{{{linkify value}}}</div>
             </div>
           {{/each}}
         </div>
diff --git a/client/character.js b/client/character.js
index 3dcb07e2..3cd436e9 100644
--- a/client/character.js
+++ b/client/character.js
@@ -18,6 +18,9 @@ const augmentTreeWithLabels = (node, dependencies) => {
     node.children.map((child) => augmentTreeWithLabels(child, dependencies));
   } else {
     node.label = dependencies[node.value] || '(unknown)';
+    if (dependencies[node.value]) {
+      node.link = `#/codepoint/${node.value.charCodeAt(0)}`;
+    }
   }
 }
 
@@ -122,11 +125,26 @@ const resize = () => {
 
 // Meteor template bindings.
 
+const linkify = (value) => {
+  const result = [];
+  for (let character of value) {
+    if (character.match(/[\u3400-\u9FBF]/)) {
+      result.push(`<a href="#/codepoint/${character.charCodeAt(0)}" ` +
+                     `class="link">${character}</a>`);
+    } else {
+      result.push(character);
+    }
+  }
+  return result.join('');
+}
+
 Template.character.helpers({
   character: () => character.get(),
   metadata: () => metadata.get(),
   tree: () => tree.get(),
 
+  linkify: linkify,
+
   orientation: () => orientation.get(),
   short: () => short.get(),
 
@@ -137,7 +155,7 @@ Template.character.helpers({
 
 Template.order.helpers({
   animations: () => animations.get(),
-  strokes: () => strokes.get().slice().reverse(),
+  strokes: () => (strokes.get() || []).slice().reverse(),
 });
 
 Meteor.startup(() => {
diff --git a/client/style.less b/client/style.less
index ce9a6a64..43767d5c 100644
--- a/client/style.less
+++ b/client/style.less
@@ -88,6 +88,7 @@ body {
           }
 
           .text {
+            display: block;
             margin-left: 31px;
           }
         }