Cleanup and simplify JS code
Change-Id: I393e22763c1a1d18878026bf459b747b150429fb
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 07d4550..43319e2 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -22,7 +22,8 @@
return {};
};
- var loc = KorAP.Locale;
+ const loc = KorAP.Locale;
+ const d = document;
return {
@@ -206,7 +207,7 @@
* Add a new tree view to the list
*/
showTree : function (foundry, layer, type, cb) {
- var matchtree = document.createElement('div');
+ var matchtree = d.createElement('div');
matchtree.classList.add('matchtree');
// Add title line
@@ -253,14 +254,14 @@
// This is currently not supported by relations
if (type === "spans") {
- var dl = document.createElement('li');
+ var dl = d.createElement('li');
dl.className = 'download';
dl.addEventListener(
'click', function (e) {
var a = treeObj.downloadLink();
- document.body.appendChild(a);
+ d.body.appendChild(a);
a.click();
- document.body.removeChild(a)
+ d.body.removeChild(a)
e.halt();
}
);
@@ -279,7 +280,7 @@
// Add meta information to match
showMeta : function () {
- var matchmeta = document.createElement('div');
+ var matchmeta = d.createElement('div');
// TODO: This is part of the getMeta!
var metaInfo = this._match.element().getAttribute('data-info');
@@ -308,7 +309,7 @@
var info = this.element();
// Append default table
- var matchtable = document.createElement('div');
+ var matchtable = d.createElement('div');
matchtable.classList.add('matchtable', 'loading');
info.appendChild(matchtable);
@@ -337,7 +338,7 @@
return this._element;
// Create info table
- var info = document.createElement('div');
+ var info = d.createElement('div');
info.classList.add('matchinfo');
this._element = info;
diff --git a/dev/js/src/match/meta.js b/dev/js/src/match/meta.js
index 20f0137..33d5461 100644
--- a/dev/js/src/match/meta.js
+++ b/dev/js/src/match/meta.js
@@ -26,7 +26,7 @@
*/
// Localization values
- var loc = KorAP.Locale;
+ const loc = KorAP.Locale;
loc.METADATA = loc.METADATA || 'Metadata';
return {
@@ -76,9 +76,7 @@
);
*/
- var metaDL = metaTable.appendChild(
- document.createElement('dl')
- );
+ var metaDL = metaTable.addE('dl');
this._element = metaTable;
@@ -97,17 +95,8 @@
k !== "layerInfos") {
var metaL = document.createElement('div');
- metaL.appendChild(
- document.createElement('dt')
- ).appendChild(
- document.createTextNode(k)
- );
-
- metaL.appendChild(
- document.createElement('dd')
- ).appendChild(
- document.createTextNode(metaInfo[k])
- );
+ metaL.addE('dt').addT(k);
+ metaL.addE('dd').addT(metaInfo[k]);
metaDL.appendChild(metaL);
};
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index 8eccc3b..7c75145 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -12,7 +12,7 @@
* TODO:
* Or-Groups are no longer in use.
*/
- var loc = KorAP.Locale;
+ const loc = KorAP.Locale;
loc.NEW_QUERY = loc.NEW_QUERY || 'New Query';
function _getAnnotation (prefix, target) {
@@ -75,13 +75,10 @@
this._element.className = 'queryfragment';
// Prepend info text
- this._element.appendChild(document.createElement('span'))
- .appendChild(document.createTextNode(loc.NEW_QUERY + ':'));
+ this._element.addE('span').addT(loc.NEW_QUERY + ':');
// Append query fragment part
- this._queryFragment = this._element.appendChild(
- document.createElement('span')
- );
+ this._queryFragment = this._element.addE('span');
// Event when the query fragment is clicked
this._element.addEventListener('click', this.toQueryBar.bind(this), 1);
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 4a1ddc2..badbacf 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -7,8 +7,9 @@
define([], function () {
"use strict";
- var svgNS = "http://www.w3.org/2000/svg";
- var _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
+ const svgNS = "http://www.w3.org/2000/svg";
+ const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
+ const d = document;
return {
create : function (snippet) {
@@ -40,7 +41,7 @@
return this;
// Parse the snippet
- var html = document.createElement("div");
+ var html = d.createElement("div");
html.innerHTML = snippet;
// Establish temporary parsing memory
@@ -253,13 +254,13 @@
// This is a shorthand for SVG element creation
_c : function (tag) {
- return document.createElementNS(svgNS, tag);
+ return d.createElementNS(svgNS, tag);
},
// Get bounding box - with workaround for text nodes
_rect : function (node) {
if (node.tagName == "tspan" && !navigator.userAgent.match(/Edge/)) {
- var range = document.createRange();
+ var range = d.createRange();
range.selectNode(node);
var rect = range.getBoundingClientRect();
range.detach();
@@ -399,7 +400,7 @@
labelE.setAttribute("x", x + middle);
labelE.setAttribute("y", middleY + 3);
labelE.setAttribute("text-anchor", "middle");
- var textNode = document.createTextNode(arc.label);
+ var textNode = d.createTextNode(arc.label);
labelE.appendChild(textNode);
var labelBox = labelE.getBBox();
@@ -662,7 +663,7 @@
// Introduce some prepending whitespace (yeah - I know ...)
var ws = text.appendChild(this._c("tspan"));
- ws.appendChild(document.createTextNode('\u00A0'));
+ ws.appendChild(d.createTextNode('\u00A0'));
ws.style.textAnchor = "start";
var lastRight = 0;
@@ -670,7 +671,7 @@
// Append svg
// var x = text.appendChild(this._c("text"));
var tspan = text.appendChild(this._c("tspan"));
- tspan.appendChild(document.createTextNode(this._tokens[node_i]));
+ tspan.appendChild(d.createTextNode(this._tokens[node_i]));
tspan.setAttribute("text-anchor", "middle");
this._tokenElements.push(tspan);
diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index a8ae51d..46f2890 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -2,9 +2,10 @@
* Table representation of morphological
* annotations of a match.
*/
-define(function () {
- var _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
-
+define(["util"], function () {
+ const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
+ const d = document;
+
return {
/**
@@ -18,7 +19,7 @@
// Initialize table based on snippet
_init : function (snippet) {
// Create html for traversal
- var html = document.createElement("div");
+ var html = d.createElement("div");
html.innerHTML = snippet;
this._pos = 0;
@@ -148,18 +149,17 @@
return this._element;
// First the legend table
- var d = document;
var table = d.createElement('table');
// Single row in head
- var tr = table.appendChild(d.createElement('thead'))
- .appendChild(d.createElement('tr'));
+ var tr = table.addE('thead').addE('tr');
var ah = KorAP.annotationHelper || { "getDesc" : function () {}};
// Add cell to row
var addCell = function (type, key, value) {
- var c = this.appendChild(d.createElement(type))
+ var c = this.addE(type);
+
if (value === undefined)
return c;
@@ -168,9 +168,7 @@
// There are multiple values to add
c.classList.add('matchkeyvalues');
for (var n = 0; n < value.length; n++) {
- var text = d.createTextNode(value[n]);
- var e = c.appendChild(d.createElement('div'));
- e.appendChild(text);
+ var e = c.addE('div').addT(value[n]);
var anno = ah.getDesc(key, value[n]);
@@ -184,7 +182,7 @@
if (value instanceof Array)
value = value[0];
- c.appendChild(d.createTextNode(value));
+ c.addT(value);
// Add tooltip
var anno = ah.getDesc(key, value);
@@ -206,9 +204,7 @@
tr.addCell('th', undefined, this.getToken(i));
};
- var tbody = table.appendChild(
- d.createElement('tbody')
- );
+ var tbody = table.addE('tbody');
var foundryList = Object.keys(this._foundry).sort();
@@ -219,9 +215,7 @@
for (var l = 0; l < layerList.length; l++) {
var layer = layerList[l];
- tr = tbody.appendChild(
- d.createElement('tr')
- );
+ tr = tbody.addE('tr');
tr.setAttribute('tabindex', 0);
tr.addCell = addCell;
diff --git a/dev/js/src/match/tree.js b/dev/js/src/match/tree.js
index c17fe20..08ebeef 100644
--- a/dev/js/src/match/tree.js
+++ b/dev/js/src/match/tree.js
@@ -7,8 +7,9 @@
define(['lib/dagre'], function (dagre) {
"use strict";
- var svgXmlns = "http://www.w3.org/2000/svg";
- var _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
+ const d = document;
+ const svgNS = "http://www.w3.org/2000/svg";
+ const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
// Node size
var WIDTH = 55, HEIGHT = 20, LINEHEIGHT = 14;
@@ -44,7 +45,7 @@
this._next = new Number(0);
// Create html for traversal
- var html = document.createElement("div");
+ var html = d.createElement("div");
html.innerHTML = snippet;
var g = new dagre.graphlib.Graph({
"directed" : true
@@ -76,6 +77,11 @@
return this;
},
+
+ _c : function (tag) {
+ return d.createElementNS(svgNS, tag);
+ },
+
/**
* The number of nodes in the tree.
*/
@@ -194,11 +200,11 @@
toBase64 : function () {
// First clone element
- var svgWrapper = document.createElement('div')
+ var svgWrapper = d.createElement('div')
svgWrapper.innerHTML = this.element().outerHTML;
var svg = svgWrapper.firstChild;
- var style = document.createElementNS(svgXmlns, 'style');
+ var style = this._c('style');
svg.getElementsByTagName('defs')[0].appendChild(style);
style.innerHTML =
@@ -223,10 +229,11 @@
dagre.layout(g);
- var canvas = document.createElementNS(svgXmlns, 'svg');
+ var canvas = this._c('svg');
this._element = canvas;
+ var that = this;
- canvas.appendChild(document.createElementNS(svgXmlns, 'defs'));
+ canvas.appendChild(this._c('defs'));
var height = g.graph().height;
@@ -235,7 +242,7 @@
function (e) {
var src = g.node(e.v);
var target = g.node(e.w);
- var p = document.createElementNS(svgXmlns, 'path');
+ var p = that._c('path');
p.setAttributeNS(null, "d", _line(src, target));
p.classList.add('edge');
canvas.appendChild(p);
@@ -245,11 +252,11 @@
g.nodes().forEach(
function (v) {
v = g.node(v);
- var group = document.createElementNS(svgXmlns, 'g');
+ var group = that._c('g');
group.setAttribute('class', v.class);
// Add node box
- var rect = group.appendChild(document.createElementNS(svgXmlns, 'rect'));
+ var rect = group.appendChild(that._c('rect'));
rect.setAttribute('x', v.x - v.width / 2);
rect.setAttribute('y', v.y - v.height / 2);
rect.setAttribute('rx', 5);
@@ -265,7 +272,7 @@
// Add label
if (v.label !== undefined) {
- var text = group.appendChild(document.createElementNS(svgXmlns, 'text'));
+ var text = group.appendChild(that._c('text'));
var y = v.y - v.height / 2;
text.setAttribute('y', y);
text.setAttribute(
@@ -282,8 +289,8 @@
if (labelPart[i].length === 0)
continue;
- var tspan = document.createElementNS(svgXmlns, 'tspan');
- tspan.appendChild(document.createTextNode(labelPart[i]));
+ var tspan = that._c('tspan');
+ tspan.appendChild(d.createTextNode(labelPart[i]));
if (n !== 0)
tspan.setAttribute('dy', LINEHEIGHT + 'pt');
else
@@ -300,8 +307,8 @@
height = y;
}
else {
- var tspan = document.createElementNS(svgXmlns, 'tspan');
- tspan.appendChild(document.createTextNode(v.label));
+ var tspan = that._c('tspan');
+ tspan.appendChild(d.createTextNode(v.label));
tspan.setAttribute('x', v.x - v.width / 2);
text.appendChild(tspan);
};
@@ -316,7 +323,7 @@
},
downloadLink : function () {
- var a = document.createElement('a');
+ var a = d.createElement('a');
a.setAttribute('href-lang', 'image/svg+xml');
a.setAttribute('href', 'data:image/svg+xml;base64,' + this.toBase64());
a.setAttribute('download', 'tree.svg');