Start work on metadata editing

client/editor.js

@@ -42,24 +42,6 @@ Template.editor.helpers({
   points: () => Session.get('stage.points'),
 });
 
-Template.metadata.helpers({
-  character() {
-    const glyph = Session.get('editor.glyph');
-    if (!glyph) return;
-    return glyph.character;
-  },
-  items() {
-    const glyph = Session.get('editor.glyph');
-    if (!glyph) return;
-    const defaults = cjklib.getCharacterData(glyph.character);
-    const fields = ['definition', 'pinyin', 'strokes']
-    return fields.map((x) => ({
-      field: `${x[0].toUpperCase()}${x.substr(1)}:`,
-      value: glyph.metadata[x] || defaults[x] || '(unknown)',
-    }));
-  },
-});
-
 Template.status.helpers({
   stage: () => Session.get('stage.type'),
   instructions: () => Session.get('stage.instructions'),

client/index.html

@@ -74,8 +74,8 @@
     </div>
     {{#each items}}
       <div class="field">
-        <label class="control-label">{{field}}</label>
+        <label class="control-label">{{label}}</label>
-        <span contenteditable="true">{{value}}</span>
+        <span class="value" contenteditable="true">{{value}}</span>
       </div>
     {{/each}}
   </div>

client/metadata.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Template.metadata.events({
+  'keypress .value': function(event) {
+    if (event.which === 13 /* \n */) {
+      $(event.target).trigger('blur');
+      event.preventDefault();
+    }
+    event.stopPropagation();
+  },
+  'blur .value': function(event) {
+    const text = $(event.target).text();
+    console.log(event, this, text);
+  },
+});
+
+Template.metadata.helpers({
+  character() {
+    const glyph = Session.get('editor.glyph');
+    if (!glyph) return;
+    return glyph.character;
+  },
+  items() {
+    const glyph = Session.get('editor.glyph');
+    if (!glyph) return;
+    const defaults = cjklib.getCharacterData(glyph.character);
+    const fields = ['definition', 'pinyin', 'strokes']
+    return fields.map((x) => ({
+      field: x,
+      label: `${x[0].toUpperCase()}${x.substr(1)}:`,
+      value: glyph.metadata[x] || defaults[x] || '(unknown)',
+    }));
+  },
+});