First attempt to create info columns next to kwic
Change-Id: Id9b3b37d2245e21fb42e32d11356855bce12de12
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 67c50fd..f5093c4 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -86,7 +86,10 @@
</div>
<script>
- KorAP.koralQuery = {"matches":["..."],"errors":[[302,"Parantheses\/brackets unbalanced.","20"]],"query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
+ /*
+ KorAP.koralQuery = {"matches":["..."],"errors":[[302,"Parantheses\/brackets unbalanced.","20"]],"query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
+ */
+ KorAP.koralQuery = {"matches":["..."],"query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
</script>
<div id="search">
@@ -99,9 +102,12 @@
id="WPD-WWW.03313-p102-103"
class="marked"
tabindex="6">
- <div>
- <div class="flag"></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><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+ <div class="left-col">WPD/WWW/03313</div>
+ <div class="main-col">
+ <!-- <div class="flag"></div> -->
+ <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><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+ </div>
<!-- only inject via javascript! -->
</div>
<p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
@@ -114,11 +120,14 @@
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 xip/c=spans"
id="WPD-FFF.01460-p119-120"
tabindex="6">
- <div>
- <div class="snippet startMore endMore"><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 </span><span class="match">test</span><span class="context-right"> problem.</span></div>
- <div class="tokenInfo"></div>
- </div>
- <p class="ref"><strong>Fehlbezogenes Adjektiv</strong> by Joni2,Peterlustig,BWBot; published on 2005-03-28 as FFF.01460 (WPD)</p>
+ <div class="left-col"></div>
+ <div class="main-col">
+ <div>
+ <div class="snippet startMore endMore"><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 </span><span class="match">test</span><span class="context-right"> problem.</span></div>
+ <div class="tokenInfo"></div>
+ </div>
+ <p class="ref"><strong>Fehlbezogenes Adjektiv</strong> by Joni2,Peterlustig,BWBot; published on 2005-03-28 as FFF.01460 (WPD)</p>
+ </div>
</li>
<li data-corpus-id="WPD"
@@ -129,11 +138,14 @@
id="WPD-HHH.06056-p2564-2565"
class="marked"
tabindex="6">
- <div>
- <div class="flag"></div>
- <div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
+ <div class="left-col">hhh</div>
+ <div class="main-col">
+ <div>
+ <div class="flag"></div>
+ <div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
<div class="tokenInfo"></div>
- </div>
+ </div>
+ </div>
<p class="ref"><strong>High Definition Television</strong> by ArtMechanic,TheK,Andreas -horn- Hornig; published on 2005-03-28 as HHH.06056 (WPD)</p>
</li>
</div>
@@ -167,8 +179,10 @@
</script>
<script>//<![CDATA[
KorAP.Notifications = [];
+/*
KorAP.Notifications.push(["warn","767: Case insensitivity is currently not supported for this layer"]);
KorAP.Notifications.push(["error","404: Not Found (remote)"]);
+*/
//]]>
</script>
</body>
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index aba738c..b5f0d5a 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -210,7 +210,24 @@
*/
showMeta : function () {
this.metaInfo = this._element.getAttribute('data-info');
- console.log(JSON.parse(metaInfo));
+ 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);
+ };
+ };
+ };
},
// Todo: Test toggle
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 3cd92aa..dce53a6 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -30,67 +30,76 @@
font-size: 10pt;
> li {
&:focus:not(.active) {
- background-color: $dark-orange !important;
- &:not(:target) div.flag {
- border-right-color: $nearly-white;
- }
- > div > div.snippet {
- color: $nearly-white;
- text-shadow: none !important;
- .class-3 {
- border-color: $nearly-white;
- }
- }
+ background-color: $dark-orange !important;
+ &:not(:target) div.flag {
+ border-right-color: $nearly-white;
+ }
+ div.snippet {
+ color: $nearly-white;
+ text-shadow: none !important;
+ .class-3 {
+ border-color: $nearly-white;
+ }
+ }
}
- position: relative;
border: {
- style: solid;
- color: $dark-orange;
- width: 0;
+ style: solid;
+ color: $dark-orange;
+ width: 0;
}
- &:not(.active):not(:target) {
- width: 99999%;
- margin-left: -49999.5%;
- background-color: $kwic-line-noneven;
- overflow-x: hidden;
- overflow-y: visible;
- white-space: no-wrap;
- cursor: pointer;
- padding: 5pt 0 6pt 0;
- &:nth-of-type(even) {
+ div.main-col, div.left-col {
+ position: relative;
+ }
+ &:not(.active):not(:target) {
+ &:nth-of-type(even) div.main-col {
background-color: $kwic-line-even;
- }
- .matchinfo {
- display: none;
- }
- > div {
- > div.snippet {
- text-overflow: ellipsis;
- text-indent: 0;
- text-shadow: $light-shadow;
- }
- }
+ }
+ div.left-col {
+ z-index: 5;
+ display: table-cell;
+ background-color: green;
+ }
+ div.main-col {
+ display: table-cell;
+ z-index: 4;
+ > div {
+ width: 99999%;
+ margin-left: -49999.5%;
+ background-color: $kwic-line-noneven;
+ overflow-x: hidden;
+ overflow-y: visible;
+ white-space: no-wrap;
+ cursor: pointer;
+ padding: 5pt 0 6pt 0;
+ .matchinfo {
+ display: none;
+ }
+ div.snippet {
+ text-overflow: ellipsis;
+ text-indent: 0;
+ text-shadow: $light-shadow;
+ }
+ }
+ }
}
- > div {
- > div.snippet {
- > span,
- > mark {
+ div.snippet {
+ > span,
+ > mark {
+ white-space: no-wrap !important;
+ > span {
white-space: no-wrap !important;
- > span {
- white-space: no-wrap !important;
}
- // color: #666;
- }
- > mark,
- > span.match {
- font-weight: bold;
+ // color: #666;
+ }
+ > mark,
+ > span.match {
+ font-weight: bold;
/* text-shadow: $kwic-match-shadow; */
- // color: $kwic-match-color;
- padding-left: 4pt;
- padding-right: 2pt;
- }
- }
- }
+ // color: $kwic-match-color;
+ padding-left: 4pt;
+ padding-right: 2pt;
+ }
+ }
}
/* active view */
@@ -103,23 +112,23 @@
height: auto;
border-width: 2px;
background-color: $dark-orange;
-// @include light-noise;
+ // @include light-noise;
position: relative;
> div {
- min-height: 20pt;
- > div.snippet {
- background-color: $light-orange;
- > * {
- background-color: transparent;
- }
- padding: 2pt 0 5pt 5pt;
- margin: {
- top: 0;
- right: $right-match-distance; // 3em;
- bottom: 0;
- left: 0; // 5pt margin-top
- }
- > span {
+ min-height: 20pt;
+ div.snippet {
+ background-color: $light-orange;
+ > * {
+ background-color: transparent;
+ }
+ padding: 2pt 0 5pt 5pt;
+ margin: {
+ top: 0;
+ right: $right-match-distance; // 3em;
+ bottom: 0;
+ left: 0; // 5pt margin-top
+ }
+ > span {
line-height: 1.4em;
width: auto;
&.context-left {
@@ -129,54 +138,55 @@
text-align: left;
width: auto;
}
- }
- }
+ }
+ }
}
}
/* Actions */
> li {
ul.action {
- display: none;
+ display: none;
}
/* active actions */
&.active, &:target {
- ul.action {
- display: block;
- }
- }
+ ul.action {
+ display: block;
+ }
+ }
&:not(.active):not(:target) p.ref {
- display: none;
+ display: none;
}
- &.active, &:target {
- overflow: hidden;
- p.ref {
- color: white;
- padding: 3pt 10pt 3pt 3pt;
- padding-right: $right-match-distance;
- margin: 0pt;
- width: 100%;
- bottom: 0;
- z-index: 30;
- > span.sigle {
- font-size: 75%;
- vertical-align: top;
- color: $light-orange;
- float: right;
- }
- }
+ &.active,
+ &:target {
+ overflow: hidden;
+ p.ref {
+ color: white;
+ padding: 3pt 10pt 3pt 3pt;
+ padding-right: $right-match-distance;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 30;
+ > span.sigle {
+ font-size: 75%;
+ vertical-align: top;
+ color: $light-orange;
+ float: right;
+ }
+ }
}
}
> li.marked:not(.active):not(:target) {
div.flag {
- position: absolute;
- top: 0;
- width: 11px;
- height: 100%;
- margin-left: 50%;
- background-color: $dark-orange;
- border-right: 1px solid $darkest-orange;
+ position: absolute;
+ top: 0;
+ width: 11px;
+ height: 100%;
+ margin-left: 50%;
+ background-color: $dark-orange;
+ border-right: 1px solid $darkest-orange;
}
}
}
@@ -184,7 +194,7 @@
ul.action {
-// background-color: $dark-orange;
+ // background-color: $dark-orange;
font-size: 12pt;
color: white;
text: {
@@ -214,15 +224,15 @@
text-decoration: none;
> span {
- @include blind;
+ @include blind;
}
&.close::after {
- font-family: "FontAwesome";
- content: $fa-close;
+ font-family: "FontAwesome";
+ content: $fa-close;
}
&.info::after {
- font-family: "FontAwesome";
- content: $fa-info;
+ font-family: "FontAwesome";
+ content: $fa-info;
}
}
}
@@ -251,7 +261,7 @@
}
*/
-ol.align-left > li > div > div.snippet > span.context-left {
+ol.align-left > li div.snippet > span.context-left {
display: inline-block;
text-align: right;
width: 50.01%;
@@ -259,7 +269,7 @@
ol.align-right {
text-align: right;
- > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+ > li:not(.active):not(:target) div.snippet > span.context-right {
display: inline-block;
text-align: left;
width: 49.915%;