Make treemenu a singleton
Change-Id: I0cb71df1f80c0f5d9f134a7fcf4563c3719d2302
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 230c275..235aabb 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -256,8 +256,20 @@
'click', function (e) {
e.halt();
+ if (KorAP.TreeMenu === undefined) {
+ KorAP.TreeMenu = matchTreeMenuClass.create([]);
+ };
+
+ var tm = KorAP.TreeMenu;
+
+ // Reread list
+ tm.info(that.info());
+ tm.readItems(that.treeMenuList());
+ tm.attachTo(this);
+
// Not yet initialized
- if (that._treemenu === undefined) {
+ /*
+ if (that._treemenu === undefined) {
that._treemenu = that.initTreeMenu();
// TODO:
@@ -267,6 +279,7 @@
this.appendChild(that._treemenu.element());
};
var tm = that._treemenu;
+ */
tm.show();
tm.focus();
}
@@ -348,7 +361,10 @@
},
- initTreeMenu : function () {
+ treeMenuList : function () {
+
+ if (this._menuList)
+ return this._menuList;
// Join spans and relations
var treeLayers = []
@@ -396,7 +412,8 @@
};
// Create tree menu
- return matchTreeMenuClass.create(this.info(), menuList);
+ this._menuList = menuList;
+ return menuList;
/*
var span = document.createElement('p');
span.classList.add('addtree');
diff --git a/dev/js/src/match/treemenu.js b/dev/js/src/match/treemenu.js
index 4c9539d..6bcff44 100644
--- a/dev/js/src/match/treemenu.js
+++ b/dev/js/src/match/treemenu.js
@@ -15,26 +15,43 @@
* @param params The match menu items
* as an array of arrays.
*/
- create : function (info, list) {
+ create : function (list) {
var obj = Object.create(menuClass)
.upgradeTo(this)
._init(list, {itemClass : itemClass});
obj.limit(6);
- obj._info = info;
+
+ var e = obj.element();
// This is only domspecific
- obj.element().addEventListener('blur', function (e) {
+ e.addEventListener('blur', function (e) {
this.menu.hide();
});
-
+
+ e.setAttribute('id', 'treeMenu');
+
+ // Add menu to body
+ document.getElementsByTagName('body')[0].appendChild(e);
+
return obj;
},
/**
* The match information object of the menu.
*/
- info :function () {
+ info :function (infoVar) {
+ if (infoVar !== undefined)
+ this._info = infoVar;
+
return this._info;
+ },
+
+ // Attach menu to
+ attachTo : function (e) {
+ var bounding = e.getBoundingClientRect();
+ this._element.style.left = bounding.left + "px";
+ this._element.style.top = bounding.top + "px";
+ this.slider().reInit();
}
};
});
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index d7ec89f..b2ec25b 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -122,9 +122,36 @@
false
);
this._element = el;
+
+ this._limit = menuLimit;
this._items = new Array();
+ // TODO:
+ // Make this separate from _init
+ this.readItems(list);
+
+ return this;
+ },
+
+ // Read items to add to list
+ readItems : function (list) {
+
+ this._list = undefined;
+
+ // Remove circular reference to "this" in items
+ for (var i = 0; i < this._items.length; i++) {
+ delete this._items[i]["_menu"];
+ delete this._items[i];
+ };
+
+ this._items = new Array();
+ this.removeItems();
+
+
+ // Initialize items
+ this._lengthField.reset();
+
var i = 0;
// Initialize item list based on parameters
for (i in list) {
@@ -136,17 +163,16 @@
this._items.push(obj);
};
- this._limit = menuLimit;
this._slider.length(this.liveLength())
.limit(this._limit)
.reInit();
- this._firstActive = false; // Show the first item active always?
+ this._firstActive = false;
+ // Show the first item active always?
this.offset = 0;
this.position = 0;
- return this;
},
-
+
// Initialize the item list
_initList : function () {
@@ -172,7 +198,7 @@
this._items[i].lowlight();
};
- this._slider.length(i).reInit();;
+ this._slider.length(i).reInit();
return true;
};
diff --git a/dev/js/src/menu/lengthField.js b/dev/js/src/menu/lengthField.js
index b05221f..870d5ba 100644
--- a/dev/js/src/menu/lengthField.js
+++ b/dev/js/src/menu/lengthField.js
@@ -40,5 +40,14 @@
add : function (param) {
this._element.appendChild(document.createElement('span'))
.appendChild(document.createTextNode(param[0] + '--'));
+ },
+
+ /**
+ * Remove all initialized values
+ */
+ reset : function () {
+ while (this._element.firstChild) {
+ this._element.firstChild.remove();
+ };
}
});
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index b99057d..9927be3 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -208,11 +208,13 @@
}
}
-div.action.bottom {
+// More is defined in vc.scss
+p.ref div.action.bottom {
display: inline-block;
margin-right: .5em;
> span {
position: relative;
+ box-shadow: none;
}
}
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 6043386..ad25a63 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -26,6 +26,10 @@
width: $left-width / 2;
}
+div.matchinfo:empty {
+ display: none !important;
+}
+
div.matchinfo {
position: relative;
width: 100%;
@@ -118,13 +122,14 @@
}
}
-div.action.bottom span.tree .menu {
+ul#treeMenu {
border-top-right-radius: 8px;
z-index: 200;
- position: absolute;
- width: $left-width;
+ font-size: 10pt;
+ position: fixed;
+ // width: $left-width;
left: 0;
- bottom: 0;
+ // bottom: 0;
text-align: left;
margin: -1* $border-size;
margin-top: 0;