Added query selector prototype
Change-Id: I9554f0d242b7ee3132d5aee53683ec3cd0261314
diff --git a/dev/demo/query-creator.html b/dev/demo/query-creator.html
new file mode 100644
index 0000000..7893395
--- /dev/null
+++ b/dev/demo/query-creator.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Query creator demo</title>
+ <meta charset="utf-8" />
+ <style type="text/css" rel="stylesheet">
+ * {
+ outline: none;
+ }
+ td {
+ cursor: pointer;
+ }
+ input {
+ display: block;
+ width: 80%;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="matchinfo">
+ <table>
+ <thead>
+ <tr>
+ <th>Foundry</th>
+ <th>Layer</th>
+ <th>Der</th>
+ <th>älteste</th>
+ <th>lebende</th>
+ <th>Baum</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr tabindex="0">
+ <th>corenlp</th>
+ <th>p</th>
+ <td>ART</td>
+ <td>ADJA</td>
+ <td>ADJA</td>
+ <td>NN</td>
+ </tr>
+ <tr tabindex="0">
+ <th>opennlp</th>
+ <th>p</th>
+ <td>ART</td>
+ <td>ADJA</td>
+ <td>ADJA</td>
+ <td>NN</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </body>
+ <script src="query-creator.js"></script>
+</html>
diff --git a/dev/demo/query-creator.js b/dev/demo/query-creator.js
new file mode 100644
index 0000000..0b3e07c
--- /dev/null
+++ b/dev/demo/query-creator.js
@@ -0,0 +1,126 @@
+(function () {
+ "use strict";
+
+ var qc = {
+ create : function (matchInfo) {
+ return Object.create(this)._init(matchInfo);
+ },
+
+ // Initialize query creator
+ _init : function (matchInfo) {
+
+ // This may be probably a hint helper
+ this._query = []
+ this._matchInfo = matchInfo;
+
+ // Listen on the match table
+ this._matchInfo.addEventListener(
+ "click", this.clickOnAnno.bind(this), false
+ );
+ return this;
+ },
+
+ clickOnAnno : function (event) {
+
+ // Listen for clicks on table cells
+ if (event.target !== event.currentTarget) {
+
+ // Get target event
+ var target = event.target;
+
+ if (target.tagName == 'TD') {
+
+ // Check foundry and layer
+ var head = target.parentNode.getElementsByTagName('th');
+ var foundry = head[0].innerText;
+ var layer = head[1].innerText;
+
+ // Check index position:
+ var i = -2;
+ var child = target;
+ while((child = child.previousSibling) != null) {
+ if (child.nodeType === 1)
+ i++;
+ };
+
+ this.addToToken(i, foundry + '/' + layer + '=' + target.innerText);
+ target.style.backgroundColor = 'red';
+ }
+
+ // Get orth values
+ else if (target.tagName == 'TH') {
+
+ // The head is in the top row
+ if (target.parentNode.parentNode.tagName == 'THEAD') {
+
+ var i = -2;
+ var child = target;
+ while((child = child.previousSibling) != null) {
+ if (child.nodeType === 1)
+ i++;
+ };
+
+ // Target is an orth
+ if (i >= 0) {
+
+ this.addToToken(i, 'orth=' + target.innerText);
+ target.style.backgroundColor = 'red';
+ }
+
+ };
+ };
+ };
+
+ event.stopPropagation();
+ },
+
+ addToToken : function (index, annotation) {
+
+ var token = this._query[index];
+
+ if (token === undefined) {
+ token = this._query[index] = [];
+ };
+
+ token.push(annotation);
+
+ // Make terms unique
+ this._query[index] = token.filter(
+ function (e, i, arr) {
+ return arr.lastIndexOf(e) === i;
+ }
+ );
+
+ this.show();
+ },
+ element : function () {
+ return this._element;
+ },
+ show : function () {
+ var str = '';
+ this._query.forEach(function (token, index) {
+ if (token !== undefined) {
+ str += _createToken(token);
+ };
+ });
+
+ // Element is not yet defined
+ if (this._element === undefined) {
+ this._element = document.createElement('input');
+ this._element.setAttribute('type', 'text');
+ this._matchInfo.appendChild(this._element);
+ };
+
+ this._element.value = str;
+ }
+ };
+
+ function _createToken (token) {
+ var str = '[';
+ str += token.join(" & ");
+ return str + ']';
+ };
+
+ qc.create(document.getElementsByClassName('matchinfo')[0]);
+
+})();