Add meta data table to matches (1st attempt)
Change-Id: I35616dafe7b2bb2e17bca3cc480add287e5e8630
diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
index 5ad662d..b5ff455 100644
--- a/dev/demo/kwic.html
+++ b/dev/demo/kwic.html
@@ -16,8 +16,8 @@
<div class="flag"></div>
<span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match">Hey</span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
</div>
- <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</div>
+ <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</div>
</li>
<li class="active">
@@ -29,8 +29,8 @@
<div class="flag"></div>
<span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match"><mark>Hey</mark></span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
</div>
- <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</div>
+ <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</div>
</li>
<li>
diff --git a/dev/demo/match.html b/dev/demo/match.html
index b863975..4812950 100644
--- a/dev/demo/match.html
+++ b/dev/demo/match.html
@@ -31,19 +31,24 @@
data-match-id="p102-103"
data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
id="WPD-WWW.03313-p102-103">
- <div>
- <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
- </div>
+ <div class="meta">WPD/WWW/03313</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+ </div>
+ </div>
<p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</li>
<li data-match-id="p15845-15846"
data-text-sigle="GOE/AGI/00000"
data-available-info="base/s=spans corenlp/c=spans corenlp/p=tokens corenlp/s=spans dereko/s=spans malt/d=rels opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans" data-info="{"UID":0,"author":"Goethe, Johann Wolfgang von","corpusID":null,"corpusSigle":"GOE","docID":null,"docSigle":"GOE\/AGI","layerInfos":"base\/s=spans corenlp\/c=spans corenlp\/p=tokens corenlp\/s=spans dereko\/s=spans malt\/d=rels opennlp\/p=tokens opennlp\/s=spans tt\/l=tokens tt\/p=tokens tt\/s=spans","matchID":"p15845-15846","pubDate":"1982","pubPlace":"München","subTitle":"Auch ich in Arkadien!","textID":null,"textSigle":"GOE\/AGI\/00000","title":"Italienische Reise"}"
id="GOE/AGI/00000#p15845-15846">
- <div>
+ <div class="match-main">
+ <div class="match-wrap">
<div class="flag"></div>
<div class="snippet startMore endMore"><span class="context-left"><span class="more"></span>in Wolken halb versteckt, an die sich in Nordwest die vicentinischen anschließen, endlich gegen Westen die näheren Gebirge von Este, deren Gestalten und Vertiefungen man deutlich sehen kann. gegen Südost ein grünes Pflanzenmeer, ohne eine Spur von Erhöhung, Baum an </span><span class="match"><mark>Baum</mark></span><span class="context-right">, Busch an Busch, Pflanzung an Pflanzung, unzählige weiße Häuser, Villen und Kirchen aus dem Grünen hervorblickend. am Horizont sah ich ganz deutlich den Markusturm zu Venedig und andere geringere Türme. endlich habe ich die Werke des Palladio erlangt, zwar nicht<span class="more"></span></span></div>
</div>
+ </div>
<p class="ref"><strong>Italienische Reise</strong> von Goethe, Johann Wolfgang von (<time datetime="1982">1982</time>) <span class="sigle">[GOE/AGI/00000]</span> </p>
</li>
</ol>
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;
+ }
+ };
});
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index dd6bd9c..b106f06 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -326,6 +326,62 @@
}
}
+
+dl.metatable {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ width: 100%;
+ > div {
+ display: flex;
+ flex-direction: row;
+ text-align: center;
+ width: 100%;
+ border: ($border-size / 2) solid $dark-orange;
+ align-items: stretch;
+ > * {
+ @include cell-info;
+ }
+ > dt {
+ text-align: left;
+ background: $darker-orange;
+ color: $nearly-white;
+ width: 8em;
+ margin: 0;
+ }
+ > dd {
+ text-align: left;
+ background-color: $light-orange;
+ padding: 2px;
+ margin: 0;
+ width: 100%;
+ margin-left: $border-size;
+ // padding-left: 2 * $border-size;
+ }
+ }
+}
+
+@media (min-width:640px) {
+ dl.metatable > div {
+ width: 50%;
+ }
+}
+
+@media (min-width:800px) {
+ dl.metatable > div {
+ width: 33%;
+ }
+}
+
+@media (min-width:1200px) {
+ dl.metatable > div {
+ width: 30%;
+ }
+}
+
+
div.loading {
background-color: transparent !important;
height: 16px !important;