Show cut info at the end of token views
Change-Id: I316fd6a5c6fe30b93b43cb4de997804f4a2e9501
diff --git a/dev/demo/matchdemo.js b/dev/demo/matchdemo.js
index e1f0488..456e7b0 100644
--- a/dev/demo/matchdemo.js
+++ b/dev/demo/matchdemo.js
@@ -439,7 +439,9 @@
"</span>";
// with cut
- snippet = "<span title=\"cnx/l:meist\">" +
+ snippet = "<span class=\"context-left\"><\/span>"+
+ "<span class=\"match\">" +
+ "<span title=\"cnx/l:meist\">" +
" <span title=\"cnx/p:ADV\">" +
" <span title=\"cnx/syn:@PREMOD\">" +
" <span title=\"mate/l:meist\">" +
@@ -477,8 +479,9 @@
" </span>" +
" </span>" +
" </span>" +
- " und robust sind auch die anderen Traktoren, die hier der Übersicht wegen keine Erwähnung finden können."
- "<span class=\"cutted\"><\/span>"
+ " und robust sind auch die anderen Traktoren, die hier der Übersicht wegen keine Erwähnung finden können." +
+ "<span class=\"cutted\"><\/span>" +
+ "</span>"+
"</span>";
var treeSnippet =
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index 2004d4f..1a4bd2b 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -486,7 +486,7 @@
it('should parse into a table (async)', function () {
expect(table).toBeTruthy();
- expect(table.length()).toBe(4);
+ expect(table.length()).toBe(5);
expect(table.getToken(0)).toBe("meist");
expect(table.getToken(1)).toBe("deutlich");
@@ -518,9 +518,10 @@
expect(tr.children[3].classList.contains('mark')).toBeTruthy();
expect(tr.children[4].firstChild.nodeValue).toBe('leistungsfähiger');
expect(tr.children[4].classList.contains('mark')).toBeFalsy();
- expect(tr.children[4].hasAttribute("title").toBeFalsy();
+ expect(tr.children[4].hasAttribute("title")).toBeFalsy();
expect(tr.children[5].firstChild.nodeValue).toBe(longString);
expect(tr.children[5].getAttribute("title")).toBe(longString);
+ expect(tr.children[6].classList.contains('cutted')).toBeTruthy();
// first row
tr = e.children[1].children[0];
diff --git a/dev/js/spec/queryCreatorSpec.js b/dev/js/spec/queryCreatorSpec.js
index 5c5cddf..70f3f34 100644
--- a/dev/js/spec/queryCreatorSpec.js
+++ b/dev/js/spec/queryCreatorSpec.js
@@ -101,6 +101,40 @@
};
+function matchTableCuttedFactory () {
+ var table = document.createElement('div');
+ table.className = 'matchtable';
+ table.innerHTML =
+ " <table>" +
+ " <thead>" +
+ " <tr>" +
+ " <th>Foundry</th>" +
+ " <th>Layer</th>" +
+ " <th>Baum</th>" +
+ " <th class=\"cutted\"></th>" +
+ " </tr>" +
+ " </thead>" +
+ " <tbody>" +
+ " <tr tabindex=\"0\">" +
+ " <th>corenlp</th>" +
+ " <th>p</th>" +
+ " <td>NN</td>" +
+ " <td></td>" +
+ " </tr>" +
+ " <tr tabindex=\"0\">" +
+ " <th>opennlp</th>" +
+ " <th>p</th>" +
+ " <td>NN</td>" +
+ " <td></td>" +
+ " </tr>" +
+ " </tbody>" +
+ " </table>";
+ var info = document.createElement('div');
+ info.appendChild(table);
+ return table;
+};
+
+
define(['match/querycreator'], function (qcClass) {
describe('KorAP.QueryCreator', function () {
@@ -599,5 +633,24 @@
expect(cell.classList.contains("mark")).toBeTruthy();
expect(cell.classList.contains("chosen")).toBeFalsy();
});
+
+ it('should ignore cutted columns', function () {
+ var matchTable = matchTableCuttedFactory();
+ var qc = qcClass.create(matchTable);
+ expect(qc.toString()).toEqual("");
+
+ var cell = matchTable.querySelector("thead > tr > th:nth-child(3)");
+ expect(cell.classList.contains("chosen")).toBeFalsy();
+ cell.click();
+ expect(cell.classList.contains("chosen")).toBeTruthy();
+ expect(qc.toString()).toEqual("[orth=Baum]");
+
+ cell = matchTable.querySelector("thead > tr > th:nth-child(4)");
+ expect(cell.classList.contains("chosen")).toBeFalsy();
+ expect(cell.classList.contains("cutted")).toBeTruthy();
+ cell.click();
+ expect(cell.classList.contains("chosen")).toBeFalsy();
+ expect(qc.toString()).toEqual("[orth=Baum]");
+ });
});
});
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index d7c5edf..e54ff65 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -192,6 +192,11 @@
// The head is in the top row
if (target.parentNode.parentNode.tagName == 'THEAD') {
+ // Ignore cutted field
+ if (target.classList.contains("cutted")) {
+ return;
+ }
+
var i = -2;
var sib = target;
while ((sib = sib.previousSibling) != null) {
diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index 61c100a..e2e49cc 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -35,6 +35,7 @@
this._token = [];
this._mark = [];
this._markE = undefined;
+ this._cutted = -1;
this._info = [];
this._foundry = {};
this._layer = {};
@@ -122,7 +123,7 @@
newMark = true;
}
- else if (c.getAttribute("title") &&
+ else if (c.hasAttribute("title") &&
_TermRE.exec(c.getAttribute("title"))) {
// Fill position with info
@@ -158,7 +159,13 @@
if (this._layer[layer] === undefined)
this._layer[layer] = {};
this._layer[layer][foundry] = 1;
- };
+ }
+
+ // The current position marks a cut
+ else if (c.hasAttribute("class") && c.getAttribute("class") == "cutted") {
+ this._cutted = this._pos;
+ this._token[this._pos++] = "";
+ }
// depth search
if (c.hasChildNodes())
@@ -251,6 +258,9 @@
if (this._markE === undefined) {
this._markE = c;
};
+ }
+ else if (i == this._cutted) {
+ c.classList.add('cutted');
};
// In case the title is very long - add a title attribute
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index e4540e9..b7ce463 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -52,7 +52,7 @@
// Use matchinfo cells for query creation
td,
tbody th,
- thead th:not(:nth-child(1)):not(:nth-child(2)) {
+ thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
cursor: pointer;
}
td:empty {
@@ -81,6 +81,19 @@
&.mark {
background-color: $darkest-orange; // #f6a800;
}
+
+ &.cutted {
+ background-color: $light-orange;
+ &::after {
+ content: $fa-cut;
+ font-family: FontAwesome;
+ padding: {
+ left: 4pt;
+ right: 4pt;
+ }
+ color: $light-green;
+ }
+ }
}
}