Introduced info menu to reference line
Change-Id: Ib5e0c4226e60bdcdbada3ebf71a07c27e14fad90
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 81bc697..230c275 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -11,9 +11,9 @@
*/
define([
'match/info', // rename to anno
- // 'match/reference', // rename to meta
- 'util'
-], function (infoClass) { //, refClass) {
+ 'match/treemenu',
+ 'util'
+], function (infoClass,matchTreeMenuClass) { //, refClass) {
// Localization values
var loc = KorAP.Locale;
@@ -179,11 +179,13 @@
close.setAttribute('title', loc.CLOSE);
// Add info button
+ /*
var info = document.createElement('li');
info.appendChild(document.createElement('span'))
.appendChild(document.createTextNode(loc.SHOWINFO));
info.classList.add('info');
info.setAttribute('title', loc.SHOWINFO);
+ */
var that = this;
@@ -192,7 +194,35 @@
// There is a reference line
if (refLine) {
+
+ // Temporary
+ var ops = document.createElement('div');
+ ops.classList.add('action', 'bottom', 'hui');
+
+ var meta = document.createElement('span');
+ ops.appendChild(meta);
+ meta.appendChild(document.createTextNode('+ Meta'));
+ meta.setAttribute('title', loc.SHOW_META);
+ meta.classList.add('meta');
+
+ var info = document.createElement('span');
+ ops.appendChild(info);
+ info.appendChild(document.createTextNode('+ Anno'));
+ info.setAttribute('title', loc.SHOWINFO);
+ info.classList.add('info');
+
+ var tree = document.createElement('span');
+ ops.appendChild(tree);
+ tree.appendChild(document.createTextNode('+ Tree'));
+ tree.setAttribute('title', loc.ADDTREE);
+ tree.classList.add('tree');
+ refLine.insertBefore(
+ ops,
+ refLine.firstChild
+ );
+
+ /*
var meta = document.createElement('span');
meta.appendChild(
document.createElement('span')
@@ -205,6 +235,7 @@
meta,
refLine.firstChild
);
+ */
meta.addEventListener(
'click', function (e) {
@@ -212,6 +243,34 @@
that.info().addMeta();
}
);
+
+ // Add information, unless it already exists
+ info.addEventListener(
+ 'click', function (e) {
+ e.halt();
+ that.info().addTable();
+ }
+ );
+
+ tree.addEventListener(
+ 'click', function (e) {
+ e.halt();
+
+ // Not yet initialized
+ if (that._treemenu === undefined) {
+ that._treemenu = that.initTreeMenu();
+
+ // TODO:
+ // Do not add the tree menu to the button!
+ // Only reposition a global treemenu element there,
+ // that is positioned below the annotation helper!
+ this.appendChild(that._treemenu.element());
+ };
+ var tm = that._treemenu;
+ tm.show();
+ tm.focus();
+ }
+ );
};
// Close match
@@ -221,13 +280,15 @@
});
// Add information, unless it already exists
+ /*
info.addEventListener('click', function (e) {
e.halt();
that.info().addTable();
});
+ */
ul.appendChild(close);
- ul.appendChild(info);
+ // ul.appendChild(info);
return true;
},
@@ -286,6 +347,84 @@
return this._info;
},
+
+ initTreeMenu : function () {
+
+ // Join spans and relations
+ var treeLayers = []
+ var spans = this.getSpans();
+ var rels = this.getRels();
+ var i;
+ for (i in spans) {
+ treeLayers.push(spans[i]);
+ };
+ for (i in rels) {
+ treeLayers.push(rels[i]);
+ };
+
+ // Get spans
+ treeLayers = treeLayers.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;
+ });
+
+ var menuList = [];
+
+ // Show tree views
+ for (var i = 0; i < treeLayers.length; i++) {
+ var span = treeLayers[i];
+
+ // Add foundry/layer to menu list
+ menuList.push([
+ span.foundry + '/' + span.layer,
+ span.foundry,
+ span.layer,
+ span.type
+ ]);
+ };
+
+ // Create tree menu
+ return matchTreeMenuClass.create(this.info(), menuList);
+ /*
+ var span = document.createElement('p');
+ span.classList.add('addtree');
+ span.appendChild(document.createTextNode(loc.ADDTREE));
+ var treeElement = treemenu.element();
+ span.appendChild(treeElement);
+
+ span.addEventListener('click', function (e) {
+ treemenu.show();
+ treemenu.focus();
+ });
+ */
+ },
+
+
+ /**
+ * Get tree menu.
+ * There is only one menu rendered
+ * - no matter how many trees exist
+ */
+ /*
+ treeMenu : function (list) {
+ if (this._treeMenu !== undefined)
+ return this._treeMenu;
+
+ return this._treeMenu = matchTreeMenuClass.create(this, list);
+ },
+ */
/**
* Get match element.
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index d207867..a0b7424 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -7,7 +7,6 @@
'match/tree',
'match/reference', // rename to meta
'match/relations',
- 'match/treemenu',
'match/querycreator',
'util'
], function (infoLayerClass,
@@ -15,7 +14,6 @@
matchTreeClass,
matchRefClass,
matchRelClass,
- matchTreeMenuClass,
matchQueryCreator) {
// Override
@@ -188,11 +186,13 @@
destroy : function () {
// Remove circular reference
+ /*
if (this._treeMenu !== undefined)
delete this._treeMenu["info"];
this._treeMenu.destroy();
this._treeMenu = undefined;
+ */
this._match = undefined;
this._matchCreator = undefined;
// Element destroy
@@ -304,8 +304,6 @@
metaElem,
elem.firstChild
);
-
- console.log(elem);
};
},
@@ -331,73 +329,7 @@
this._matchCreator = matchQueryCreator.create(info);
});
-
- info.appendChild(this.addTreeMenu());
- },
-
-
- addTreeMenu : function () {
-
- // Join spans and relations
- var treeLayers = []
- var spans = this._match.getSpans();
- var rels = this._match.getRels();
- var i;
- for (i in spans) {
- treeLayers.push(spans[i]);
- };
- for (i in rels) {
- treeLayers.push(rels[i]);
- };
-
- // Get spans
- treeLayers = treeLayers.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;
- });
-
- var menuList = [];
-
- // Show tree views
- for (var i = 0; i < treeLayers.length; i++) {
- var span = treeLayers[i];
-
- // Add foundry/layer to menu list
- menuList.push([
- span.foundry + '/' + span.layer,
- span.foundry,
- span.layer,
- span.type
- ]);
- };
-
- // Create tree menu
- var treemenu = this.treeMenu(menuList);
- var span = document.createElement('p');
- span.classList.add('addtree');
- span.appendChild(document.createTextNode(loc.ADDTREE));
-
- var treeElement = treemenu.element();
- span.appendChild(treeElement);
-
- span.addEventListener('click', function (e) {
- treemenu.show();
- treemenu.focus();
- });
-
- return span;
+ // info.appendChild(this.addTreeMenu());
},
/**
@@ -415,19 +347,6 @@
this._element = info;
return this._element;
- },
-
-
- /**
- * Get tree menu.
- * There is only one menu rendered
- * - no matter how many trees exist
- */
- treeMenu : function (list) {
- if (this._treeMenu !== undefined)
- return this._treeMenu;
-
- return this._treeMenu = matchTreeMenuClass.create(this, list);
}
};
});
diff --git a/dev/js/src/match/reference.js b/dev/js/src/match/reference.js
index 9462874..41d40af 100644
--- a/dev/js/src/match/reference.js
+++ b/dev/js/src/match/reference.js
@@ -63,6 +63,7 @@
var metaTable = document.createElement('div');
metaTable.classList.add('metatable');
+ /*
var header = metaTable.appendChild(
document.createElement('h6')
);
@@ -72,6 +73,7 @@
).appendChild(
document.createTextNode(loc.METADATA)
);
+ */
var metaDL = metaTable.appendChild(
document.createElement('dl')
@@ -87,8 +89,10 @@
k !== "corpusID" &&
k !== "docID" &&
k !== "textID" &&
+ /*
k !== "corpusSigle" &&
k !== "docSigle" &&
+ */
k !== "layerInfos") {
var metaL = document.createElement('div');