Improve select menu and integrate for query language choosing
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 61e783b..c003a1d 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -9,6 +9,7 @@
'lib/alertify',
'session',
'tagger',
+ 'selectMenu',
'api',
'mailToChiffre',
'lib/highlight/highlight.pack',
@@ -22,7 +23,8 @@
vcArray,
alertifyClass,
sessionClass,
- tagger) {
+ tagger,
+ selectMenuClass) {
// Set hint array for hint helper
KorAP.hintArray = hintArray;
@@ -73,6 +75,7 @@
input.style.display = 'none';
vcname = document.createElement('span');
vcname.setAttribute('id', 'vc-choose');
+ vcname.classList.add('select');
var currentVC = loc.VC_allCorpora;
if (KorAP.koralQuery !== undefined && KorAP.koralQuery["collection"]) {
@@ -88,7 +91,6 @@
input.parentNode.insertBefore(vcname, input);
};
-
/**
* Add actions to match entries
*/
@@ -122,6 +124,11 @@
});
};
+ // Replace QL select menus with KorAP menus
+ selectMenuClass.create(
+ document.getElementById('ql-field').parentNode
+ ).limit(5);
+
var result = document.getElementById('resultinfo');
var resultButton = null;
if (result != null) {
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 69107d0..4d9df49 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -78,7 +78,6 @@
// Create the element
var el = document.createElement("ul");
with (el) {
- style.opacity = 0;
style.outline = 0;
setAttribute('tabindex', 0);
classList.add('menu', 'roll');
@@ -391,14 +390,13 @@
this._prefix.active(true);
// finally show the element
- this._element.style.opacity = 1;
+ this._element.classList.add('visible');
return true;
};
var offset = 0;
-
// Set a chosen value to active and move the viewport
if (arguments.length === 1) {
@@ -443,10 +441,11 @@
this._prefix.active(false);
// finally show the element
- this._element.style.opacity = 1;
+ this._element.classList.add('visible');
// Add classes for rolling menus
this._boundary(true);
+
return true;
},
@@ -456,9 +455,10 @@
*/
hide : function () {
this.removeItems();
- this._element.style.opacity = 0;
this._prefix.clear();
this.onHide();
+ this._element.classList.remove('visible');
+
/* this._element.blur(); */
},
diff --git a/dev/js/src/selectMenu.js b/dev/js/src/selectMenu.js
index d51c31a..9ef6986 100644
--- a/dev/js/src/selectMenu.js
+++ b/dev/js/src/selectMenu.js
@@ -1,15 +1,15 @@
define(
- ['menu', 'menu/item', 'menu/prefix', 'menu/lengthField'],
- function (menuClass, menuItemClass, prefixClass, lengthFieldClass) {
+ ['menu', 'selectMenu/item', 'menu/prefix', 'menu/lengthField'],
+ function (menuClass, selectMenuItemClass, prefixClass, lengthFieldClass) {
return {
create : function (element) {
- var obj = Object.create(menuClass);
- obj._shadow = element;
+ var select = element.getElementsByTagName('select')[0];
+ // Prepare list before object upgras
var list = [];
- var options = element.getElementsByTagName('option');
+ var options = select.getElementsByTagName('option');
for (var i = 0; i < options.length; i++) {
@@ -25,18 +25,68 @@
list.push(opt);
};
+ // Create object with list
+ var obj = Object.create(menuClass).upgradeTo(this)
+ ._init(selectMenuItemClass, prefixClass, lengthFieldClass, list);
- obj = obj.upgradeTo(this)
- ._init(menuItemClass, prefixClass, lengthFieldClass, list);
+ obj._container = element;
+ obj._select = select;
+ obj._select.style.display = 'none';
- obj._firstActive = true;
+ // Create title
+ obj._title = obj._container.appendChild(document.createElement('span'));
+ obj._title.appendChild(document.createTextNode(''));
+ obj._container.appendChild(obj.element());
- element.style.display = 'none';
- if (element.parentNode)
- element.parentNode.appendChild(obj.element());
+ obj._container.addEventListener('click', obj.showSelected.bind(obj));
+
+ // Add index information to each item
+ for (i in obj._items) {
+ obj._items[i]._index = i;
+ };
+
+ // This is only domspecific
+ obj.element().addEventListener('blur', function (e) {
+ this.menu.hide();
+ this.menu.showTitle();
+ });
+
+
+ // In case another tool changes
+ // the option via JS - this needs
+ // to be reflected!
+ select.addEventListener('change', function (e) {
+ this.showTitle();
+ }.bind(obj));
+
+ obj.showTitle();
return obj;
+ },
+
+ select : function (index) {
+ if (arguments.length > 0) {
+ this._selected = index;
+ this._select.selectedIndex = index;
+ };
+
+ return this._selected || 0;
+ },
+
+ showSelected : function () {
+ this._title.style.display = 'none';
+ this._selected = this._select.selectedIndex;
+ this.show(this._selected);
+ this.focus();
+ },
+
+ showTitle : function () {
+ var s = this.select();
+ this._title.textContent = this.item(
+ this.select()
+ ).title();
+ this._title.style.display = 'inline';
}
}
}
diff --git a/dev/js/src/selectMenu/item.js b/dev/js/src/selectMenu/item.js
new file mode 100644
index 0000000..cc6cdf0
--- /dev/null
+++ b/dev/js/src/selectMenu/item.js
@@ -0,0 +1,33 @@
+define(['menu/item'], function (itemClass) {
+ /**
+ * Menu item for select menus.
+ */
+
+ return {
+
+ /**
+ * Create new menu item
+ * for tree views.
+ */
+ create : function (params) {
+ return Object.create(itemClass)
+ .upgradeTo(this)._init(params);
+ },
+
+ /**
+ * Override click action of the menu item.
+ */
+ onclick : function (e) {
+ var menu = this.menu();
+ menu.hide();
+ // Index was set on initialization
+ menu.select(this._index);
+ menu.showTitle();
+ e.halt();
+ },
+
+ title : function () {
+ return this.content().textContent;
+ }
+ };
+});