morphological view for testbed
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
index 64f1232..84a32aa 100644
--- a/public/kwic-4.0.css
+++ b/public/kwic-4.0.css
@@ -1,5 +1,4 @@
@charset "utf-8";
-
/*
light orange: #f4eebb;
dark orange: #ffa500;
@@ -43,18 +42,18 @@
background-color: #ddd;
}
-ol > li > div.snippet > span,
-ol > li > div.snippet > span > span {
+ol > li > div > div.snippet > span,
+ol > li > div > div.snippet > span > span {
white-space: no-wrap !important;
}
-ol.free-aligned > li:not(.active) > div.snippet > span.left {
+ol.free-aligned > li:not(.active) > div > div.snippet > span.left {
display: inline-block;
text-align: right;
width: 50.046%;
}
-ol.free-aligned > li:not(.active) > div.snippet > span.separator {
+ol.free-aligned > li:not(.active) > div > div.snippet > span.separator {
width: 0px;
height: 1em;
margin-bottom: -2px;
@@ -65,11 +64,11 @@
margin-right: 2px;
}
-ol.free-aligned > li > div.snippet > span.right {
+ol.free-aligned > li > div > div.snippet > span.right {
text-align: left;
}
-ol.left-aligned > li > div.snippet > span.context-left {
+ol.left-aligned > li > div > div.snippet > span.context-left {
display: inline-block;
text-align: right;
width: 50.01%;
@@ -79,13 +78,13 @@
text-align: right;
}
-ol.right-aligned > li:not(.active) > div.snippet > span.context-right {
+ol.right-aligned > li:not(.active) > div > div.snippet > span.context-right {
display: inline-block;
text-align: left;
width: 49.915%;
}
-li > div.snippet > span {
+li > div > div.snippet > span {
color: #666;
}
@@ -132,21 +131,23 @@
border-width: 2px;
background-color: #f4eebb;
position: relative;
- min-height: 68pt;
}
-ol > li.active > div.snippet {
+ol > li.active > div > div.snippet {
margin: 5pt 10pt;
margin-right: 3em;
- margin-bottom: 24pt;
}
-ol > li.active > div.snippet > span {
+ol > li.active > div {
+ min-height: 42pt;
+}
+
+ol > li.active > div > div.snippet > span {
line-height: 1.4em;
width: auto;
}
-ol > li.active > div.snippet > span.context-left {
+ol > li.active > div > div.snippet > span.context-left {
margin-left: 0;
display: inline;
overflow: visible;
@@ -213,8 +214,8 @@
color: white;
text-shadow: none;
padding: 3pt 10pt;
- margin: 5pt 0pt 0pt 0pt;
- position: absolute;
+ margin: 0pt;
width: 100%;
bottom: 0;
+ z-index: 300;
}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 0ad372e..537c72f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,4 +1,5 @@
@charset "utf-8";
+
body, html {
color: #666;
font-family: verdana, tahoma, arial;
@@ -8,8 +9,11 @@
#top {
background-color: #7ba400;
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box; /* Opera/IE 8+ */
padding: 0pt;
- padding-top: 10px;
+ padding-top: 5px;
position: relative;
height: 70px;
padding-left: 30px;
@@ -29,7 +33,7 @@
form {
margin-left: 235px;
- margin-top:10px
+ margin-top:0px
}
form input[type=search] {
@@ -259,7 +263,7 @@
background-image: url('/img/korap-logo-solo.svg');
position: absolute;
width: 260px; /* like sidebars*/
- height: 80px; /* like #top */
+ height: 68px; /* like #top */
z-index: 999;
background-repeat: no-repeat;
background-position: center center;
@@ -268,4 +272,4 @@
h1 span {
margin-left: -3000px;
-}
\ No newline at end of file
+}
diff --git a/public/table.css b/public/table.css
new file mode 100644
index 0000000..4a4ac27
--- /dev/null
+++ b/public/table.css
@@ -0,0 +1,77 @@
+@charset "utf-8";
+
+ol > li:not(.active) .tokenInfo {
+ display: none;
+}
+
+.tokenInfo {
+ display: none;
+}
+
+.tokenInfo.active {
+ display: block;
+}
+
+.tokenInfo {
+ background-color: #ffa500;
+ margin-right: 26px;
+ overflow: auto;
+}
+
+.tokenInfo table {
+ font-size: 10pt;
+ padding: 3pt 10pt; /* wie in ol > li.active p */
+}
+
+.tokenInfo table tr {
+}
+
+/* All cells */
+.tokenInfo table tr > * {
+ padding: 1pt 6pt;
+ vertical-align: top;
+}
+
+.tokenInfo table tr td {
+ text-align: center;
+ background-color: #f4eebb;
+}
+
+/* header */
+.tokenInfo table tr th:not([rowspan]) {
+ color: white;
+ text-shadow: none;
+}
+
+.tokenInfo table tr:first-child th {
+ text-align: center;
+ background-color: #ff8000;
+}
+
+/* first column header */
+.tokenInfo table tr:first-child th:first-child {
+ position: relative;
+ padding-right: 20pt;
+ padding-left: 5pt;
+}
+
+/* second column header */
+.tokenInfo table tr:first-child th:nth-child(2) {
+ text-align: left;
+ padding-left: 20pt;
+ padding-right: 5pt;
+}
+
+.tokenInfo th[rowspan]:first-child {
+ background-color: #f4eebb;
+}
+
+.tokenInfo table th span.switchSort {
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ right: 0;
+ margin-right: -11pt;
+ width: 20pt;
+};
+
diff --git a/public/translateTable.js b/public/translateTable.js
new file mode 100644
index 0000000..ec8b00a
--- /dev/null
+++ b/public/translateTable.js
@@ -0,0 +1,179 @@
+// Store Table object in global object
+
+var splitRegex = /^([^\/]+?)(?:\/(.+?))?:([^:]+?)$/;
+
+var textFoundry = "Foundry";
+var textLayer = "Layer";
+
+
+// SnippetTable constructor
+function SnippetTable (snippet) {
+ this.info = [];
+ this.foundry = {};
+ this.layer = {};
+ this.pos = 0;
+
+ this.load = function (children) {
+ for (var i in children) {
+ var c = children[i];
+
+ // element with title
+ if (c.nodeType === 1) {
+ if (c.getAttribute("title")) {
+ if (splitRegex.exec(c.getAttribute("title"))) {
+
+ // Fill position with info
+ var foundry, layer;
+ if (RegExp.$2) {
+ foundry = RegExp.$1;
+ layer = RegExp.$2;
+ }
+ else {
+ foundry = "base";
+ layer = RegExp.$1
+ };
+
+ // Create object on position unless it exists
+ if (!this.info[this.pos])
+ this.info[this.pos] = {};
+
+ this.info[this.pos][foundry + "/" + layer] = RegExp.$3;
+
+ // Set foundry
+ if (!this.foundry[foundry])
+ this.foundry[foundry] = {};
+ this.foundry[foundry][layer] = 1;
+
+ // Set layer
+ if (!this.layer[layer])
+ this.layer[layer] = {};
+ this.layer[layer][foundry] = 1;
+ };
+ };
+
+ // depth search
+ if (c.hasChildNodes())
+ this.load(c.childNodes);
+ }
+
+ // Leaf node - store string on position and go to next string
+ else if (c.nodeType === 3)
+ if (c.nodeValue.match(/[-a-z0-9]/i))
+ this.info[this.pos++]["-s"] = c.nodeValue;
+ };
+ return this;
+ };
+
+ this.toTable = function (base) {
+ var i, f, l;
+
+ // Create HTML based on info
+ var d = document;
+ var table = d.createElement('table');
+ var tr = d.createElement('tr');
+ table.appendChild(tr);
+ var th = d.createElement('th');
+ th.appendChild(document.createTextNode(base === "layer" ? textLayer : textFoundry));
+
+ // Add icon to switch sorting
+ var span = document.createElement("span");
+
+ // Add switch event
+ var that = this;
+ span.addEventListener("click", function (obj) {
+ var x = that.toTable(base === "layer" ? "foundry" : "layer");
+ table.parentNode.replaceChild(x, table);
+ }, false);
+
+ span.setAttribute("class", "switchSort");
+ var icon = document.createElement("i");
+ icon.setAttribute("class", "fa fa-arrows-h");
+ span.appendChild(icon);
+ th.appendChild(span);
+
+ tr.appendChild(th);
+ th = d.createElement('th');
+ th.appendChild(document.createTextNode(base === "layer" ? textFoundry : textLayer));
+ tr.appendChild(th);
+
+ // Header line with surface strings
+ for (i in this.info) {
+ th = d.createElement('th');
+ tr.appendChild(th);
+ th.appendChild(d.createTextNode(this.info[i]["-s"]));
+ };
+
+ // Sort keys
+ var baseArray = [];
+ if (base === "layer") {
+ for (i in this.layer) {
+ baseArray.push(i);
+ };
+ }
+ else {
+ for (i in this.foundry) {
+ baseArray.push(i);
+ };
+ };
+ baseArray.sort();
+
+ // Annotations
+ for (f in baseArray) {
+ f = baseArray[f];
+ var thBase = d.createElement('th');
+ thBase.appendChild(d.createTextNode(f));
+
+ var rowSpan = 0;
+
+ // Sort keys
+ var subArray = [];
+ if (base === "layer") {
+ for (i in this.layer[f]) {
+ subArray.push(i);
+ };
+ }
+ else {
+ for (i in this.foundry[f]) {
+ subArray.push(i);
+ };
+ };
+ subArray.sort();
+
+ for (l in subArray) {
+ l = subArray[l];
+ tr = d.createElement('tr');
+ table.appendChild(tr);
+
+ if (rowSpan === 0)
+ tr.appendChild(thBase);
+
+ th = d.createElement('th');
+ tr.appendChild(th);
+ th.appendChild(d.createTextNode(l));
+
+ var infoString = base === "layer" ? l + '/' + f : f + '/' + l;
+
+ for (t in this.info) {
+ var td = d.createElement('td');
+ tr.appendChild(td);
+
+ if (this.info[t][infoString] !== undefined)
+ td.appendChild(d.createTextNode(this.info[t][infoString]));
+ };
+ rowSpan++;
+ };
+ thBase.setAttribute("rowspan", rowSpan);
+ };
+ // return HTML object
+ return table;
+ };
+
+ // Create wrapper element
+ var html = document.createElement("table");
+ html.innerHTML = snippet;
+
+ // Create table object and load data from HTML
+ this.load(html.childNodes);
+};
+
+
diff --git a/public/translateTree.js b/public/translateTree.js
new file mode 100644
index 0000000..728877b
--- /dev/null
+++ b/public/translateTree.js
@@ -0,0 +1,53 @@
+var cleanRegex = /^([^\/]+?\/)?[^\:]+?\:/;
+
+// SnippetTree constructor
+function SnippetTree (obj) {
+ this.children = [];
+ this.data = obj;
+
+ // Replace title
+ this.cleanTitle = function (title) {
+ return title.replace(cleanRegex, "");
+ };
+
+ // Add new child to tree
+ this.addChild = function (childData) {
+ var c = new SnippetTree (childData);
+ this.children.push(c);
+ return c;
+ };
+
+ // Recursively parse children
+ this.parseChildren = function (children) {
+ for (var i in children) {
+ var c = children[i];
+ if (c.nodeType === 1) {
+ if (c.getAttribute("title")) {
+ var title = this.cleanTitle(c.getAttribute("title"));
+ var childTree = this.addChild({ type : title });
+ if (c.hasChildNodes())
+ childTree.parseChildren(c.childNodes);
+ }
+ else if (c.hasChildNodes())
+ this.parseChildren(c.childNodes);
+ }
+ else if (c.nodeType === 3)
+ if (c.nodeValue.match(/[-a-z0-9]/i)) {
+ this.addChild({
+ type : "leaf",
+ word : c.nodeValue
+ });
+ };
+ };
+ return this;
+ };
+};
+
+// Make tree from snippet
+function translateTree (snippet) {
+ var html = document.createElement("tree");
+ html.innerHTML = snippet;
+ return new SnippetTree({ type : "ROOT" }).parseChildren(html.childNodes);
+};
+
+
diff --git a/public/translatehtml.js b/public/translatehtml.js
deleted file mode 100644
index 4a1f4c6..0000000
--- a/public/translatehtml.js
+++ /dev/null
@@ -1,147 +0,0 @@
-var cleanRegex = /^([^\/]+?\/)?[^\:]+?\:/;
-var splitRegex = /^(.+?):([^:]+?)$/;
-
-// SnippetTree constructor
-function SnippetTree (obj) {
- this.children = [];
- this.data = obj;
-
- // Replace title
- this.cleanTitle = function (title) {
- return title.replace(cleanRegex, "");
- };
-
- // Add new child to tree
- this.addChild = function (childData) {
- var c = new SnippetTree (childData);
- this.children.push(c);
- return c;
- };
-
- // Recursively parse children
- this.parseChildren = function (children) {
- for (var i in children) {
- var c = children[i];
- if (c.nodeType === 1) {
- if (c.getAttribute("title")) {
- var title = this.cleanTitle(c.getAttribute("title"));
- var childTree = this.addChild({ type : title });
- if (c.hasChildNodes())
- childTree.parseChildren(c.childNodes);
- }
- else if (c.hasChildNodes())
- this.parseChildren(c.childNodes);
- }
- else if (c.nodeType === 3)
- if (c.nodeValue.match(/[-a-z0-9]/i)) {
- this.addChild({
- type : "leaf",
- word : c.nodeValue
- });
- };
- };
- return this;
- };
-};
-
-
-// SnippetTable constructor
-function SnippetTable (obj) {
- this.info = [];
- this.overall = {};
- this.pos = 0;
- this.load = function (children) {
- for (var i in children) {
- var c = children[i];
-
- // element with title
- if (c.nodeType === 1) {
- if (c.getAttribute("title")) {
- if (splitRegex.exec(c.getAttribute("title"))) {
-
- // Create object on position unless it exists
- if (!this.info[this.pos]) {
- this.info[this.pos] = {};
- };
-
- // Fill position with info
- this.info[this.pos][RegExp.$1] = RegExp.$2;
- this.overall[RegExp.$1] = 1;
- };
- };
-
- // depth search
- if (c.hasChildNodes())
- this.load(c.childNodes);
- }
-
- // Leaf node - store string on position and go to next string
- else if (c.nodeType === 3)
- if (c.nodeValue.match(/[-a-z0-9]/i))
- this.info[this.pos++]["-s"] = c.nodeValue;
- };
- return this;
- };
-};
-
-
-// Make tree from snippet
-function translateTree (snippet) {
- var html = document.createElement("tree");
- html.innerHTML = snippet;
- return new SnippetTree({ type : "ROOT" }).parseChildren(html.childNodes);
-};
-
-
-// Make table from snippet
-function translateTable (snippet) {
- // Create wrapper element
- var html = document.createElement("table");
- html.innerHTML = snippet;
-
- // Create table object and load data from HTML
- var info = new SnippetTable();
- info.load(html.childNodes);
-
- // Sort keys
- var overallArray = [];
- for (i in info.overall) {
- overallArray.push(i);
- };
- overallArray.sort();
-
- // Create HTML based on info
- var d = document;
- var table = d.createElement('table');
- var tr = d.createElement('tr');
- table.appendChild(tr);
- var th = d.createElement('th');
- tr.appendChild(th);
-
- // Header line with surface strings
- for (i in info.info) {
- th = d.createElement('th');
- tr.appendChild(th);
- th.appendChild(d.createTextNode(info.info[i]["-s"]));
- };
-
- // Annotations
- for (i in overallArray) {
- i = overallArray[i];
-
- tr = d.createElement('tr');
- table.appendChild(tr);
- th = d.createElement('th');
- tr.appendChild(th);
- th.appendChild(d.createTextNode(i));
- for (t in info.info) {
- var td = d.createElement('td');
- tr.appendChild(td);
- if (info.info[t][i] !== undefined)
- td.appendChild(d.createTextNode(info.info[t][i]));
- };
- };
-
- // return HTML object
- return table;
-};