Introduce a general buttongroup menu
Change-Id: I2d84af1c9d43ce3e57b10321bd7d414a64cf68a8
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index 12870b5..443d650 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -1,4 +1,6 @@
-define(['util'], function () {
+define(['buttongroup/menu','menu/item','util'], function (treeMenuClass, defaultItemClass) {
+ "use strict";
+
return {
/**
* Create button group
@@ -44,6 +46,8 @@
/**
* Add button in order
+ *
+ * Returns the button element
*/
add : function (title, classes, cb) {
var b = this._element.addE('span');
@@ -60,13 +64,36 @@
e.halt();
// Call callback
- cb.apply(that._bind || this, e)
+ var obj = that._bind || this;
+ obj.button = b;
+ cb.apply(obj, e)
});
+
+ return b;
},
/**
- * Bind an object to all callbacks of the button group
+ * Add button that spawns a list in order.
+ *
+ * Returns the list object.
+ */
+ addList : function (title, classes, itemClass) {
+ var list = treeMenuClass.create([], itemClass || defaultItemClass);
+ this.add(title, classes, function (e) {
+ list.show();
+ list.button(this.button);
+ list.focus();
+ });
+
+ return list;
+ },
+
+
+ /**
+ * Bind an object to all callbacks of the button group.
+ * To get the button element inside the callback,
+ * use this.button
*/
bind : function (obj) {
if (obj !== undefined) {
diff --git a/dev/js/src/match/treemenu.js b/dev/js/src/buttongroup/menu.js
similarity index 86%
rename from dev/js/src/match/treemenu.js
rename to dev/js/src/buttongroup/menu.js
index 0010271..7ab149d 100644
--- a/dev/js/src/match/treemenu.js
+++ b/dev/js/src/buttongroup/menu.js
@@ -1,7 +1,7 @@
/**
- * Menu to choose from for tree views.
+ * Menu to choose from in a button group.
*/
-define(['menu', 'match/treeitem'], function (menuClass, itemClass) {
+define(['menu'], function (menuClass) {
"use strict";
return {
@@ -15,7 +15,7 @@
* @param params The match menu items
* as an array of arrays.
*/
- create : function (list) {
+ create : function (list, itemClass) {
var obj = Object.create(menuClass)
.upgradeTo(this)
._init(list, {itemClass : itemClass});
@@ -28,7 +28,7 @@
this.menu.hide();
});
- e.setAttribute('id', 'treeMenu');
+ e.classList.add('button-group-list');
// Add menu to body
document.getElementsByTagName('body')[0].appendChild(e);
@@ -38,6 +38,8 @@
/**
* The match information object of the menu.
+ * TODO:
+ * Rename to 'Panel'
*/
info :function (infoVar) {
if (infoVar !== undefined)
@@ -47,10 +49,10 @@
},
// Attach menu to button
- attachTo : function (e) {
+ button : function (btn) {
// this._attached = e;
- this._repos(e);
+ this._repos(btn);
this.slider().reInit();
/*
@@ -62,7 +64,7 @@
};
this._onscroll = function () {
- this._repos(e);
+ this._repos(btn);
}.bind(this);
window.addEventListener('scroll', this._onscroll);
diff --git a/dev/js/src/hint/item.js b/dev/js/src/hint/item.js
index 47d332b..80ac78b 100644
--- a/dev/js/src/hint/item.js
+++ b/dev/js/src/hint/item.js
@@ -40,19 +40,20 @@
};
return this._content;
},
-
+
/**
* Override the click action
* of the menu item.
*/
onclick : function (e) {
var m = this.menu();
- var h = m.hint();
// m.hide();
// Reset prefix
m.prefix("");
+ var h = m.hint();
+
// Update input field
var input = h.inputField();
input.insert(this._action).update();
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 4e7bd1a..59d2e83 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -11,10 +11,11 @@
*/
define([
'match/info', // rename to anno
- 'match/treemenu',
+ 'match/treeitem',
'buttongroup',
+ 'buttongroup/menu',
'util'
-], function (infoClass,matchTreeMenuClass,buttonGroupClass) { //, refClass) {
+], function (infoClass,treeItemClass,buttonGroupClass,buttonGroupMenuClass) { //, refClass) {
// Localization values
const loc = KorAP.Locale;
@@ -210,7 +211,7 @@
btns.add(
loc.ADDTREE, ['tree'], function (e) {
if (KorAP.TreeMenu === undefined) {
- KorAP.TreeMenu = matchTreeMenuClass.create([]);
+ KorAP.TreeMenu = buttonGroupMenuClass.create([], treeItemClass);
};
var tm = KorAP.TreeMenu;
@@ -221,7 +222,7 @@
// Reposition and show menu
tm.show();
- tm.attachTo(this);
+ tm.button(this);
tm.focus();
}
);
diff --git a/dev/js/src/menu/item.js b/dev/js/src/menu/item.js
index 812a398..e06de1e 100644
--- a/dev/js/src/menu/item.js
+++ b/dev/js/src/menu/item.js
@@ -47,15 +47,6 @@
},
/**
- * Get the lower cased field of the item
- * (used for analyses).
- */
- lcField : function () {
- return this._lcField;
- },
-
-
- /**
* Get or set the information for action of this item.
*/
action : function (action) {
@@ -63,6 +54,16 @@
this._action = action;
return this._action;
},
+
+
+ /**
+ * Get the lower cased field of the item
+ * (used for analyses).
+ */
+ lcField : function () {
+ return this._lcField;
+ },
+
/**
* Check or set if the item is active
@@ -170,6 +171,7 @@
this._prefix = null;
},
+
// Highlight a certain substring of the menu item
_highlight : function (elem, prefixString) {
if (elem.nodeType === 3) {
@@ -260,15 +262,36 @@
this.content(params[0]);
- if (params.length === 2)
+ if (params.length > 1) {
this._action = params[1];
+ if (params.length > 2)
+ this._onclick = params[2];
+ };
+
this._lcField = ' ' + this.content().textContent.toLowerCase();
this._prefix = null;
return this;
},
+
+ /**
+ * The click action of the menu item.
+ */
+ onclick : function (e) {
+ var m = this.menu();
+
+ // Reset prefix
+ m.prefix("");
+
+ if (this._onclick)
+ this._onclick.apply(this, e);
+
+ m.hide();
+ },
+
+
/**
* Return menu list.
*/