Add meta data table to matches (1st attempt)

Change-Id: I35616dafe7b2bb2e17bca3cc480add287e5e8630
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index fdc2fab..d842a1b 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -42,7 +42,6 @@
   loc.VC_oneCollection = loc.VC_oneCollection || 'a virtual corpus';
   loc.TOGGLE_ALIGN     = loc.TOGGLE_ALIGN     || 'toggle alignment';
   loc.SHOW_KQ          = loc.SHOW_KQ          || 'show KoralQuery';
-  loc.SHOW_META        = loc.SHOW_META        || 'show metadata';
 
 
   // Override KorAP.log
@@ -288,8 +287,8 @@
         resultButton.appendChild(toggle);
       };
 
-      /*
       // Not ready yet
+      /*
       if (leftButton !== null) {
         var metaInfo = document.createElement('a');
         metaInfo.setAttribute('title', loc.SHOW_META)
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index c278a13..537e5b2 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -32,6 +32,5 @@
   loc.TOGGLE_ALIGN = 'tausche Textausrichtung';
   loc.SHOW_KQ      = 'zeige KoralQuery';
   loc.SHOW_META    = 'zeige Metadaten';
-
   loc.NEW_QUERY = 'Neue Anfrage';
 });
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 5943d88..be9d681 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -10,16 +10,17 @@
  * - A click on a table field and a tree node should at the field description to the fragments list.
  */
 define([
-  'match/info',
-  'match/reference',
+  'match/info',      // rename to anno
+  'match/reference', // rename to meta
   'util'
 ], function (infoClass, refClass) {
 
   // Localization values
   var loc   = KorAP.Locale;
-  loc.ADDTREE  = loc.ADDTREE  || 'Add tree view';
-  loc.SHOWINFO = loc.SHOWINFO || 'Show information';
-  loc.CLOSE    = loc.CLOSE    || 'Close';
+  loc.ADDTREE   = loc.ADDTREE   || 'Add tree view';
+  loc.SHOWINFO  = loc.SHOWINFO  || 'Show information';
+  loc.CLOSE     = loc.CLOSE     || 'Close';
+  loc.SHOW_META = loc.SHOW_META || 'Show metadata';
   
   // 'corpusID', 'docID', 'textID'
   var _matchTerms  = ['textSigle', 'matchID', 'available'];
@@ -186,6 +187,31 @@
 
       var that = this;
 
+      // Add meta button
+      var refLine = element.querySelector("p.ref");
+
+      // There is a reference line
+      if (0 && refLine) {
+        
+        var meta = document.createElement('span');
+        meta.appendChild(
+          document.createTextNode(loc.SHOW_META)
+        );
+        meta.setAttribute('title', loc.SHOW_META);
+        meta.classList.add('meta');
+        refLine.insertBefore(
+          meta,
+          refLine.firstChild
+        );
+
+        meta.addEventListener(
+          'click', function (e) {
+            e.halt();
+            that.showMeta(refLine);
+          }
+        );
+      };
+
       // Close match
       close.addEventListener('click', function (e) {
         e.halt();
@@ -208,25 +234,17 @@
     /**
      * Return a list of meta data.
      */
-    showMeta : function () {
-      this.metaInfo = this._element.getAttribute('data-info');
+    showMeta : function (refLine) {
+      var metaInfo = this._element.getAttribute('data-info');
+
+      // refLine.parentNode
+      
       if (metaInfo)
         metaInfo = JSON.parse(metaInfo);
-      if (metaInfo) {
 
-        // TODO: Meta fields should be separated
-        for (i in metaInfo) {
-          if (i !== "UID" &&
-              i !== "corpusID" &&
-              i !== "docID" &&
-              i !== "textID" &&
-              i !== "corpusSigle" &&
-              i !== "docSigle" &&
-              i !== "textSigle" &&
-              i !== "layerInfos") {
-            console.log(i);
-          };
-        };
+      if (metaInfo) {
+        var metaElem = refClass.create(this).element(metaInfo);
+        this.element().appendChild(metaElem);
       };
     },
 
diff --git a/dev/js/src/match/reference.js b/dev/js/src/match/reference.js
index 978930c..9d59af3 100644
--- a/dev/js/src/match/reference.js
+++ b/dev/js/src/match/reference.js
@@ -23,5 +23,73 @@
   fileEditionStatement
 */
 define(function () {
-  return;
+  return {
+
+    /**
+     * Create new match object
+     */
+    create : function (match) {
+      return Object.create(this)._init(match);
+    },
+
+    /**
+     * Initialize object
+     */
+    _init : function (match) {
+      this._match = match;
+      this.opened = false;
+      return this;
+    },
+
+    /**
+     * Get match object
+     */
+    match : function () {
+      return this._match;
+    },
+
+    /**
+     * Create match reference view.
+     */
+    element : function (metaInfo) {
+      if (this._element !== undefined)
+        return this._element;
+      
+      var metaTable = document.createElement('dl');
+      metaTable.classList.add('metatable');
+
+      this._element = metaTable;
+
+      // TODO: Meta fields should be separated
+      var keys = Object.keys(metaInfo);
+      for (var i in keys.sort()) {
+        var k = keys[i];
+        if (k !== "UID" &&
+            k !== "corpusID" &&
+            k !== "docID" &&
+            k !== "textID" &&
+            k !== "corpusSigle" &&
+            k !== "docSigle" &&
+            k !== "layerInfos") {
+
+          var metaL = document.createElement('div');
+          metaL.appendChild(
+            document.createElement('dt')
+          ).appendChild(
+            document.createTextNode(k)
+          );
+
+          metaL.appendChild(
+            document.createElement('dd')
+          ).appendChild(
+            document.createTextNode(metaInfo[k])
+          );
+
+          metaTable.appendChild(metaL);
+        };
+      };
+
+      return this._element;
+    }
+  };
 });