Make meta table part of matchinfo
Change-Id: I558663229da10784cb3feba449c20fb9d75cd74c
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index db70dc1..81bc697 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -11,9 +11,9 @@
*/
define([
'match/info', // rename to anno
- 'match/reference', // rename to meta
+ // 'match/reference', // rename to meta
'util'
-], function (infoClass, refClass) {
+], function (infoClass) { //, refClass) {
// Localization values
var loc = KorAP.Locale;
@@ -209,7 +209,7 @@
meta.addEventListener(
'click', function (e) {
e.halt();
- that.showMeta(refLine);
+ that.info().addMeta();
}
);
};
@@ -223,7 +223,7 @@
// Add information, unless it already exists
info.addEventListener('click', function (e) {
e.halt();
- that.info().toggle();
+ that.info().addTable();
});
ul.appendChild(close);
@@ -233,23 +233,6 @@
},
- /**
- * Return a list of meta data.
- */
- showMeta : function (refLine) {
- var metaInfo = this._element.getAttribute('data-info');
-
- // refLine.parentNode
-
- if (metaInfo)
- metaInfo = JSON.parse(metaInfo);
-
- if (metaInfo) {
- var metaElem = refClass.create(this).element(metaInfo);
- this.element().appendChild(metaElem);
- };
- },
-
// Todo: Test toggle
toggle : function () {
if (this._element.classList.contains('active'))
@@ -289,6 +272,17 @@
if (this._info._element !== undefined)
return this._info;
+ /*
+ this.element().appendChild(
+ this._info.element()
+ );
+ */
+ var refLine = this._element.querySelector("p.ref");
+ this._element.insertBefore(
+ this._info.element(),
+ refLine
+ );
+
return this._info;
},
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 703e133..a6ccbec 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -5,6 +5,7 @@
'match/infolayer',
'match/table',
'match/tree',
+ 'match/reference', // rename to meta
'match/relations',
'match/treemenu',
'match/querycreator',
@@ -12,6 +13,7 @@
], function (infoLayerClass,
matchTableClass,
matchTreeClass,
+ matchRefClass,
matchRelClass,
matchTreeMenuClass,
matchQueryCreator) {
@@ -54,6 +56,7 @@
* Open the information view,
* if closed, otherwise close.
*/
+ /*
toggle : function () {
var elem = this._match.element();
@@ -74,6 +77,7 @@
return this.opened;
},
+ */
/**
@@ -134,6 +138,11 @@
return null;
*/
},
+
+
+ getMeta : function (metaInfo, cb) {
+
+ },
/**
@@ -271,18 +280,33 @@
cb(treeObj);
});
},
-
- /**
- * Create match information view.
- */
- element : function () {
-
- if (this._element !== undefined)
- return this._element;
-
- // Create info table
- var info = document.createElement('div');
- info.classList.add('matchinfo');
+
+
+ addMeta : function () {
+ var matchmeta = document.createElement('div');
+ // matchRefClass.create();
+
+ // TODO: This is part of the getMeta!
+ var metaInfo = this._match.element().getAttribute('data-info');
+
+ if (metaInfo)
+ metaInfo = JSON.parse(metaInfo);
+
+ // There is metainfo
+ if (metaInfo) {
+
+ // Add metainfo to matchview
+ var metaElem = matchRefClass.create(this._match).element(metaInfo);
+ this.element().appendChild(metaElem);
+
+ console.log(this.element());
+ };
+ },
+
+ // Add table
+ addTable : function () {
+
+ var info = this.element();
// Append default table
var matchtable = document.createElement('div');
@@ -301,6 +325,13 @@
this._matchCreator = matchQueryCreator.create(info);
});
+
+ info.appendChild(this.addTreeMenu());
+ },
+
+
+ addTreeMenu : function () {
+
// Join spans and relations
var treeLayers = []
var spans = this._match.getSpans();
@@ -348,7 +379,7 @@
// Create tree menu
var treemenu = this.treeMenu(menuList);
- var span = info.appendChild(document.createElement('p'));
+ var span = document.createElement('p');
span.classList.add('addtree');
span.appendChild(document.createTextNode(loc.ADDTREE));
@@ -359,10 +390,25 @@
treemenu.show();
treemenu.focus();
});
+
+ return span;
+ },
+
+ /**
+ * Create match information view.
+ */
+ element : function () {
+
+ if (this._element !== undefined)
+ return this._element;
+
+ // Create info table
+ var info = document.createElement('div');
+ info.classList.add('matchinfo');
this._element = info;
- return info;
+ return this._element;
},
diff --git a/dev/js/src/match/reference.js b/dev/js/src/match/reference.js
index 9d59af3..9462874 100644
--- a/dev/js/src/match/reference.js
+++ b/dev/js/src/match/reference.js
@@ -22,7 +22,12 @@
biblEditionStatement
fileEditionStatement
*/
-define(function () {
+define(['util'], function () {
+
+ // Localization values
+ var loc = KorAP.Locale;
+ loc.METADATA = loc.METADATA || 'Metadata';
+
return {
/**
@@ -55,9 +60,23 @@
if (this._element !== undefined)
return this._element;
- var metaTable = document.createElement('dl');
+ var metaTable = document.createElement('div');
metaTable.classList.add('metatable');
+ var header = metaTable.appendChild(
+ document.createElement('h6')
+ );
+
+ header.appendChild(
+ document.createElement('div')
+ ).appendChild(
+ document.createTextNode(loc.METADATA)
+ );
+
+ var metaDL = metaTable.appendChild(
+ document.createElement('dl')
+ );
+
this._element = metaTable;
// TODO: Meta fields should be separated
@@ -85,7 +104,7 @@
document.createTextNode(metaInfo[k])
);
- metaTable.appendChild(metaL);
+ metaDL.appendChild(metaL);
};
};
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index e278d2d..f561b93 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -208,7 +208,7 @@
cursor: default;
}
span {
- display: inline !important;
+ display: inline; // !important;
}
ul.action {
display: block;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 5d699ca..0062131 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -21,7 +21,7 @@
* first column has to be static.
*/
@mixin matchinfo-head {
- border-width: 0px;
+ // border-width: 0px;
border-top: $border-size solid $darker-orange; // #ff8000;
width: $left-width / 2;
}
@@ -34,6 +34,7 @@
height: auto;
font-size: 10pt;
text-align: left;
+
> p.addtree {
position: relative;
@include choose-item;
@@ -250,6 +251,35 @@
}
}
+
+ /**
+ * Label
+ */
+div.matchtree, div.metatable {
+ h6 {
+ display: inline;
+ font-size: inherit;
+ color: $nearly-white;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+ > span, > div {
+ @include matchinfo-head;
+ @include cell-info;
+ display: inline-block !important;
+ margin: 0;
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ > div {
+
+ // Override half width !
+ width: $left-width;
+ }
+ }
+}
+
/**
* Tree view
*/
@@ -260,26 +290,6 @@
padding: 0;
margin-top: 1pt;
- /**
- * Label
- */
- h6 {
- display: inline;
- font-size: inherit;
- color: $nearly-white;
- margin: 0;
- padding: 0 !important;
- float: left;
- > span {
- @include matchinfo-head;
- @include cell-info;
- display: inline-block;
- margin: 0;
- &:nth-of-type(2) {
- margin-left: $border-size;
- }
- }
- }
> div {
position: unset;
z-index: 4;
@@ -326,14 +336,27 @@
}
}
+div.metatable + div.matchtable {
+ /*
+ padding-top: 5 * $border-size;
+ border-top: $border-size solid $middle-orange;
+ */
+ margin-top: 5 * $border-size;
+}
-dl.metatable {
+
+div.metatable > dl {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
- width: 100%;
+ width: auto;
+ padding-bottom: 0;
+ margin-left: $left-distance;
+ margin-right: $right-match-distance;
+ margin-top: $border-size;
+
> div {
display: flex;
flex-direction: row;
@@ -357,6 +380,7 @@
padding: 2px;
margin: 0;
width: 100%;
+ max-width: none;
margin-left: $border-size;
// padding-left: 2 * $border-size;
}
@@ -364,20 +388,28 @@
}
@media (min-width:640px) {
- dl.metatable > div {
- width: 50%;
+ div.metatable > dl {
+ > div {
+ width: 50%; // 2*
+ }
}
}
@media (min-width:800px) {
- dl.metatable > div {
- width: 33%;
+ div.metatable > dl > div {
+ width: 33%; // 3*
}
}
@media (min-width:1200px) {
- dl.metatable > div {
- width: 30%;
+ div.metatable > dl > div {
+ width: 25%; // 4*
+ }
+}
+
+@media (min-width:1680px) {
+ div.metatable > dl > div {
+ width: 20%; // 5*
}
}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 15888ae..bc985ed 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -91,12 +91,12 @@
padding: 1pt 3pt;
}
- div.matchtree {
+ div.matchtree, div.metatable {
h6 {
display: block;
float: none;
}
- > div {
+ > div, > dl {
margin-left: 2px;
}
}