Implemented new kwic scheme
Change-Id: I341cdbca374605fe2cd5c7edad9e0b506102060a
diff --git a/dev/demo/all.html b/dev/demo/all.html
index f5093c4..0019488 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -4,6 +4,7 @@
<title>Complete Demo</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+ <link type="text/css" rel="stylesheet" href="../css/kwic.css" />
<script>//<![CDATA[
window.KorAP = window.KorAP || {};
@@ -100,13 +101,13 @@
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 xip/c=spans"
id="WPD-WWW.03313-p102-103"
- class="marked"
tabindex="6">
- <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 class="meta">WPD/WWW/03313</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet startMore endMore">
+ <div class="flag"></div>
+ <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>
@@ -120,9 +121,9 @@
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 class="left-col"></div>
- <div class="main-col">
- <div>
+ <div class="meta">Huhu</div>
+ <div class="match-main">
+ <div class="match-wrap">
<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>
@@ -136,13 +137,13 @@
data-match-id="p2564-2565"
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-HHH.06056-p2564-2565"
- class="marked"
tabindex="6">
- <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="meta">WPD/HHH/06056</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet startMore endMore">
+ <div class="flag"></div>
+ <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>
diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
index a120055..5ad662d 100644
--- a/dev/demo/kwic.html
+++ b/dev/demo/kwic.html
@@ -7,7 +7,7 @@
<body>
<div id="search">
<ol>
- <li class="match">
+ <li>
<div class="meta">GOE/AAA/444</div>
<div class="meta">Goethe</div>
<div class="match-main">
@@ -20,7 +20,7 @@
</div>
</div>
</li>
- <li class="match active">
+ <li class="active">
<div class="meta">III/AAA/111</div>
<div class="meta">Schiller</div>
<div class="match-main">
@@ -33,7 +33,7 @@
</div>
</div>
</li>
- <li class="match">
+ <li>
<div class="meta">III/AAA/111</div>
<div class="meta">Schiller</div>
<div class="match-main">
@@ -44,10 +44,21 @@
</div>
</div>
</li>
+ <li>
+ <div class="meta">III/AAA/000</div>
+ <div class="meta">Schiller</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet">
+ <span class="context-left">Der</span><mark>alte</mark><span class="context-right">Baum</span>
+ </div>
+ </div>
+ </div>
+ </li>
</ol>
<ol class="align-right">
- <li class="match">
+ <li>
<div class="meta">GOE/AAA/444</div>
<div class="meta">Goethe</div>
<div class="match-main">
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index ef05607..1924f2b 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -8,10 +8,10 @@
'match/treemenu',
'util'
], function (infoLayerClass,
- matchTableClass,
- matchTreeClass,
- matchTreeMenuClass) {
-
+ matchTableClass,
+ matchTreeClass,
+ matchTreeMenuClass) {
+
// Override
KorAP.API.getMatchInfo = KorAP.API.getMatchInfo || function () {
KorAP.log(0, 'KorAP.API.getMatchInfo() not implemented')
@@ -51,18 +51,21 @@
* if closed, otherwise close.
*/
toggle : function () {
- if (this.opened == true) {
- this._match.element().children[0].removeChild(
- this.element()
- );
- this.opened = false;
+
+ var elem = this._match.element().getElementsByClassName('match-wrap')[0];
+
+ if (this.opened == true) {
+ elem.removeChild(
+ this.element()
+ );
+ this.opened = false;
}
else {
- // Append element to match
- this._match.element().children[0].appendChild(
- this.element()
- );
- this.opened = true;
+ // Append element to match
+ elem.appendChild(
+ this.element()
+ );
+ this.opened = true;
};
return this.opened;
@@ -78,44 +81,45 @@
// Get all tokens
if (tokens === undefined) {
- focus = this._match.getTokens();
+ focus = this._match.getTokens();
}
// Get only some tokens
else {
- // Push newly to focus array
- for (var i = 0; i < tokens.length; i++) {
- var term = tokens[i];
- try {
- // Create info layer objects
- var layer = infoLayerClass.create(term);
- layer.type = "tokens";
- focus.push(layer);
- }
- catch (e) {
- continue;
- };
- };
+ // Push newly to focus array
+ for (var i = 0; i < tokens.length; i++) {
+ var term = tokens[i];
+ try {
+ // Create info layer objects
+ var layer = infoLayerClass.create(term);
+ layer.type = "tokens";
+ focus.push(layer);
+ }
+ catch (e) {
+ continue;
+ };
+ };
};
// No tokens chosen
if (focus.length == 0)
- cb(null);
+ cb(null);
// Get info (may be cached)
KorAP.API.getMatchInfo(
- this._match,
- { 'spans' : false, 'layer' : focus },
+ this._match,
+ { 'spans' : false, 'layer' : focus },
- // Callback for retrieval
- function (matchResponse) {
- // Get snippet from match info
- if (matchResponse["snippet"] !== undefined) {
- this._table = matchTableClass.create(matchResponse["snippet"]);
- cb(this._table);
- };
- }.bind(this)
+ // Callback for retrieval
+ function (matchResponse) {
+
+ // Get snippet from match info
+ if (matchResponse["snippet"] !== undefined) {
+ this._table = matchTableClass.create(matchResponse["snippet"]);
+ cb(this._table);
+ };
+ }.bind(this)
);
/*
@@ -264,42 +268,43 @@
// Create the table asynchronous
this.getTable(undefined, function (table) {
- if (table !== null) {
- matchtable.classList.remove('loading');
- matchtable.appendChild(table.element());
- };
+
+ if (table !== null) {
+ matchtable.classList.remove('loading');
+ matchtable.appendChild(table.element());
+ };
});
// Get spans
var spanLayers = this._match.getSpans().sort(
- function (a, b) {
- if (a.foundry < b.foundry) {
- return -1;
- }
- else if (a.foundry > b.foundry) {
- return 1;
- }
- else if (a.layer < b.layer) {
- return -1;
- }
- else if (a.layer > b.layer) {
- return 1;
- };
- return 0;
- });
+ function (a, b) {
+ if (a.foundry < b.foundry) {
+ return -1;
+ }
+ else if (a.foundry > b.foundry) {
+ return 1;
+ }
+ else if (a.layer < b.layer) {
+ return -1;
+ }
+ else if (a.layer > b.layer) {
+ return 1;
+ };
+ return 0;
+ });
var menuList = [];
// Show tree views
for (var i = 0; i < spanLayers.length; i++) {
- var span = spanLayers[i];
-
- // Add foundry/layer to menu list
- menuList.push([
- span.foundry + '/' + span.layer,
- span.foundry,
- span.layer
- ]);
+ var span = spanLayers[i];
+
+ // Add foundry/layer to menu list
+ menuList.push([
+ span.foundry + '/' + span.layer,
+ span.foundry,
+ span.layer
+ ]);
};
// Create tree menu
@@ -312,8 +317,8 @@
span.appendChild(treeElement);
span.addEventListener('click', function (e) {
- treemenu.show();
- treemenu.focus();
+ treemenu.show();
+ treemenu.focus();
});
this._element = info;
@@ -329,7 +334,7 @@
*/
treeMenu : function (list) {
if (this._treeMenu !== undefined)
- return this._treeMenu;
+ return this._treeMenu;
return this._treeMenu = matchTreeMenuClass.create(this, list);
}
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 8cfa301..e22a654 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -201,6 +201,10 @@
}
}
+ul.menu.roll:not(.visible) {
+ height: 0;
+}
+
/**
* Sorting menu
diff --git a/dev/scss/main/kwic-new.scss b/dev/scss/main/kwic-new.scss
index 2cc4b76..670897a 100644
--- a/dev/scss/main/kwic-new.scss
+++ b/dev/scss/main/kwic-new.scss
@@ -7,9 +7,7 @@
position: relative;
margin-bottom: 30px;
overflow: visible;
- &.match {
- marg-top: 14pt;
- }
+// margin-top: 14pt;
}
#search > ol {
@@ -33,7 +31,11 @@
width: 2px;
z-index: 5;
overflow-y: visible;
- background-color: green;
+ white-space: nowrap;
+ background-color: $light-green;
+ color: $nearly-white;
+ font-size: 80%;
+ padding: 0 5pt;
}
/*
&:first-of-type div.meta {
@@ -68,7 +70,7 @@
background-color: $kwic-line-noneven;
overflow-x: hidden;
overflow-y: visible;
- white-space: no-wrap;
+ white-space: normal;
cursor: pointer;
}
}
@@ -103,6 +105,12 @@
display: none;
}
+#search li.active div.matchinfo {
+ display: block;
+}
+
+
+
/*
#search ol > li:focus:not(.active) {
background-color: $dark-orange !important;
@@ -145,6 +153,9 @@
div.snippet div.flag {
position: absolute;
height: 100%;
+ top: 0;
+ // margin-left: -49999.5%;
+ // margin-left: 50%;
margin-left: 50%;
width: 11px;
background-color: $dark-orange;
@@ -165,17 +176,28 @@
#search > ol {
> li.active,
> li:target {
+ background-color: $dark-orange;
+ display: block;
text-align: left;
- cursor: normal;
position: relative;
border-width: 2px;
white-space: wrap;
height: auto;
width: auto;
+
+ div.match-main > div.match-wrap {
+ cursor: default;
+ }
}
}
#search > ol > li.active {
+ span {
+ display: inline !important;
+ }
+ ul.action {
+ display: block;
+ }
div.match-wrap {
min-height: 20pt;
div.snippet {
@@ -216,10 +238,11 @@
// visibility: hidden;
}
div.match-main {
- // width: 100%;
+ width: 100%;
display: block;
div.match-wrap {
-// width: 100%;
+ background-color: $dark-orange;
+ width: 100%;
margin-left: 0;
overflow-x: visible;
white-space: wrap;
@@ -278,20 +301,20 @@
.level-0 {
border-bottom-width: 2px;
border-bottom-style: solid;
- padding-bottom: 0px;
+ padding-bottom: 0px !important;
font-style: normal;
}
mark > mark > mark,
em > em,
.level-1 {
- padding-bottom: 3px;
+ padding-bottom: 3px !important;
}
mark > mark > mark > mark,
em > em > em,
.level-2 {
- padding-bottom: 6px;
+ padding-bottom: 6px !important;
}
@@ -310,3 +333,55 @@
.class-2 { border-color: $kwic-highlight-2; }
.class-3 { border-color: $kwic-highlight-3; }
.class-4 { border-color: $kwic-highlight-4; }
+
+
+/**
+ * Actions
+ */
+
+ul.action {
+ display: none;
+ // background-color: $dark-orange;
+ font-size: 12pt;
+ color: white;
+ text: {
+ shadow: none;
+ indent: 0;
+ }
+ margin: 0;
+ padding: 0;
+ z-index: 5;
+
+ list-style: {
+ type: none;
+ position: inline;
+ }
+ &.right {
+ position: absolute;
+ width: $right-match-distance;
+ float: right;
+ text-align: center;
+ padding: 0pt 3pt;
+ height: 100%;
+ right: 0;
+ top: 0;
+ li {
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+
+ > span {
+ @include blind;
+ }
+ &.close::after {
+ font-family: "FontAwesome";
+ content: $fa-close;
+ }
+ &.info::after {
+ font-family: "FontAwesome";
+ content: $fa-info;
+ }
+ }
+ }
+}
+
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 8702e9d..90c6660 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,5 +1,5 @@
-@import "highlight"; // Navigation on the left side
-@import "kwic"; // Kwic view information
+@import "highlight"; // JSON highlighting
+@import "kwic-new"; // Kwic view information
@import "logos"; // Logo images
@import "matchinfo"; // Match table and tree
@import "pagination"; // Pagination
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index da71213..340f12b 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -176,11 +176,13 @@
display: inline-block;
margin: 0;
&:nth-of-type(2) {
- margin-left: $border-size;
+ margin-left: $border-size;
}
}
}
> div {
+ position: unset;
+ z-index: 4;
overflow-x: auto;
margin: $border-size;
margin-left: $left-distance;
@@ -190,15 +192,15 @@
> ul.action.image {
display: block;
position: absolute;
- right: 0px;
- top: 0px;
+ right: 0;
+ top: 0;
z-index: 20;
- /*
margin: 0;
padding: 0;
- */
+ // margin-right: -1 * $right-match-distance;
width: $right-match-distance;
li {
+ background-color: green;
cursor: pointer;
color: $nearly-white;
text-decoration: none;