Improve select menu and integrate for query language choosing
diff --git a/dev/demo/all.html b/dev/demo/all.html
index a18b287..a01fcc3 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -38,8 +38,7 @@
<input id="show" name="show" type="hidden" />
<input id="collection-name" name="collection-name" type="hidden">
<input id="collection" name="collection" type="text" value="">
- with <span class="select">
- <!-- Change this to js-menu -->
+ with <span class="menu select">
<select name="ql" id="ql-field">
<option value="poliqarp">Poliqarp</option>
<option value="cosmas2">Cosmas II</option>
diff --git a/dev/demo/menu.html b/dev/demo/menu.html
index c76496d..db88cbf 100644
--- a/dev/demo/menu.html
+++ b/dev/demo/menu.html
@@ -23,6 +23,15 @@
<div id="menu" class="vc" style="padding-top: 80px; padding-left: 80px;"></div>
+ <span id="choose-ql" class="menu select" style="position: absolute; right: 100px; top: 90px;">
+ <select name="ql">
+ <option value="poliqarp">Poliqarp</option>
+ <option value="cosmas2">Cosmas 2</option>
+ <option value="annis">Annis QL</option>
+ <option value="cql">CQL</option>
+ </select>
+ </span>
+
<main>
<div>
<div id="pagination"><a rel="prev"><span><i class="fa fa-caret-left"></i></span></a><a rel="self"><span>1</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
diff --git a/dev/demo/menudemo.js b/dev/demo/menudemo.js
index c00f01e..2180634 100644
--- a/dev/demo/menudemo.js
+++ b/dev/demo/menudemo.js
@@ -2,7 +2,7 @@
baseUrl: '../js/src'
});
-require(['menu','menu/item', 'menu/prefix', 'menu/lengthField'], function (menuClass, itemClass, prefixClass, lengthFieldClass) {
+require(['menu','menu/item', 'menu/prefix', 'menu/lengthField', 'selectMenu'], function (menuClass, itemClass, prefixClass, lengthFieldClass, selectMenuClass) {
/**
* Create own menu item class.
@@ -86,4 +86,6 @@
menu.limit(3).show(3);
menu.focus();
+
+ selectMenuClass.create(document.getElementById('choose-ql')).limit(5); // .show();
});
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;
+ }
+ };
+});
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b2b9d6c..a959a08 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -25,7 +25,7 @@
padding: 0;
outline: none;
}
- span.select, #vc-choose { /* Formally vc.location */
+ span.select { /* , #vc-choose, Formally vc.location */
cursor: pointer;
line-height: 1.8em;
border: {
@@ -49,8 +49,17 @@
background-color: $light-green;
}
}
- span.select::after {
- content: $fa-down;
+ span.select {
+ &::after {
+ content: $fa-down;
+ padding: {
+ left: 4pt;
+ right: 4pt;
+ }
+ }
+ &.active::after {
+ content: $fa-up;
+ }
}
form {
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 070f26b..0bf2bbd 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -165,6 +165,13 @@
}
}
+ul.menu {
+ opacity: 0;
+}
+ul.menu.visible {
+ opacity: 1;
+}
+
/**
* Rolling menu
*/
@@ -202,5 +209,21 @@
> li.active:hover {
@include choose-remove;
}
+}
-}
\ No newline at end of file
+/**
+ * select menu
+ */
+span.menu.select {
+ > span {
+ z-index: 100;
+ }
+ > ul.menu.roll {
+ display: none;
+ z-index: -100;
+ &.visible {
+ display: block;
+ z-index: 200;
+ }
+ }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 45899da..9c48fbd 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -308,6 +308,7 @@
border-radius: $standard-border-radius;
}
+/*
#vc-choose {
&::after {
content: $fa-down;
@@ -319,4 +320,5 @@
&.active::after {
content: $fa-up;
}
-}
\ No newline at end of file
+}
+*/
\ No newline at end of file