Attempt to fix Hint compatibility problem (WIP)
Change-Id: I3016afc2f74b90c223dd4f8f2386b71aab1eedcd
diff --git a/dev/js/src/hint.js b/dev/js/src/hint.js
index 91381f5..409bd6f 100644
--- a/dev/js/src/hint.js
+++ b/dev/js/src/hint.js
@@ -16,6 +16,9 @@
* TODO: Improve context analyzer from hint!
* TODO: Marked annotations should be addable to "fragments"
*/
+
+"use strict";
+
define([
'hint/input',
'hint/menu',
@@ -26,11 +29,6 @@
menuClass,
analyzerClass,
alertClass) {
- "use strict";
-
- /**
- * Return keycode based on event
- */
// Initialize hint array
@@ -42,10 +40,6 @@
*/
return {
- // Some variables
- // _firstTry : true,
- // active : false,
-
/**
* Create new hint helper.
*/
@@ -53,6 +47,7 @@
return Object.create(this)._init(param);
},
+
// Initialize hint helper
_init : function (param) {
param = param || {};
@@ -60,6 +55,8 @@
// Holds all menus per prefix context
this._menu = {};
this._alert = alertClass.create();
+
+ // Active may either hold an alert or a menu
this._active = null;
// No annotation helper available
@@ -84,41 +81,37 @@
")$";
// Get input field
- var qfield = param["inputField"] || document.getElementById("q-field");
+ const qfield = param["inputField"] || document.getElementById("q-field");
if (!qfield)
return null;
// Create input field
this._inputField = inputClass.create(qfield);
- var inputFieldElement = this._inputField.element();
-
- var c = this._inputField.container();
-
// create alert
+ const that = this;
+
+ const c = this._inputField.container();
c.appendChild(this._alert.element());
-
- var that = this;
-
- this._inputField.container().addEventListener('click', function (e) {
+ c.addEventListener('click', function (e) {
if (!this.classList.contains('active')) {
that.show(false);
};
});
- var _down = function (e) {
- var code = _codeFromEvent(e);
- if (code === 40) {
- this.show(false);
- e.halt();
- };
- };
-
// Move infobox
+ const inputFieldElement = this._inputField.element();
inputFieldElement.addEventListener("keyup", this.update.bind(this));
inputFieldElement.addEventListener("click", this.update.bind(this));
// Add event listener for key pressed down
+ let _down = function (e) {
+ if (_codeFromEvent(e) === 40) {
+ this.show(false);
+ e.halt();
+ };
+ };
+
inputFieldElement.addEventListener(
"keydown", _down.bind(this), false
);
@@ -160,29 +153,28 @@
* Altert at a specific character position.
*/
alert : function (charPos, msg) {
-
+ const t = this;
if (arguments.length === 0)
- return this._alert;
+ return t._alert;
// Do not alert if already alerted!
- if (this._alert.active)
+ if (t._alert.active)
return false;
// Move to the correct position
- this._inputField.moveto(charPos);
+ t._inputField.moveto(charPos);
// Set container to active (aka hide the hint helper button)
- this._alert.show(msg);
- this.active(this._alert);
+ t._alert.show(msg);
+ t.active(t._alert);
return true;
},
- _unshowAlert : function () {
- this._alert.hide();
- this.active(null);
- },
+ /**
+ * Update input field.
+ */
update : function () {
this._inputField.update();
if (this._alert.hide())
@@ -195,7 +187,7 @@
*/
menu : function (action) {
if (this._menu[action] === undefined) {
-
+
// No matching hint menu
if (KorAP.annotationHelper[action] === undefined)
return;
@@ -210,28 +202,31 @@
return this._menu[action];
},
+
/**
* Get the correct menu based on the context
*/
contextMenu : function (ifContext) {
+ const noC = ifContext ? undefined : this.menu("-");
// Get context (aka left text)
- var context = this._inputField.context();
+ let context = this._inputField.context();
if (context === undefined || context.length === 0) {
- return ifContext ? undefined : this.menu("-");
+ return noC;
};
// Get context (aka left text matching regex)
context = this._analyzer.test(context);
if (context === undefined || context.length == 0) {
- return ifContext ? undefined : this.menu("-");
+ return noC;
};
- return this.menu(context) || (ifContext ? undefined : this.menu('-'));
+ return this.menu(context) || noC;
},
+
/**
* Activate a certain menu.
* If a menu is passed, the menu will be activated.
@@ -239,11 +234,11 @@
* If nothing is passed, returns the active menu.
*/
active : function (obj) {
-
+
// A menu or null was passed
- if (arguments.length === 1) {
- var c = this._inputField.container();
-
+ if (arguments.length === 1) {
+ const c = this._inputField.container();
+
// Make the menu active
if (obj !== null) {
c.classList.add('active');
@@ -277,33 +272,31 @@
this._unshow();
// Get the menu
- var menu;
+ let menu;
if (menu = this.contextMenu(ifContext)) {
+
this.active(menu);
- var c = this._inputField.container();
- c.appendChild(menu.element());
+ let e = menu.element();
+ // console.log("Chrome may send a blur on the old menu here");
+ this._active.element().blur();
+ this._inputField.container().appendChild(e);
menu.show();
menu.focus();
// Focus on input field
// this.inputField.element.focus();
}
+
else {
this._inputField.element().focus();
};
},
+
// This will get the context of the field
getContext : function () {},
- /**
- * Deactivate the current menu and focus on the input field.
- */
- unshow_old : function () {
- this.active(null);
- this.inputField().element().focus();
- },
/**
* Deactivate the current menu and focus on the input field.
@@ -316,17 +309,16 @@
// Catch touch events
_touch : function (e) {
-
if (e.type === 'touchstart') {
- var t = e.touches[0];
- this._lastTouch = t.clientY;
+ this._lastTouch = e.touches[0].clientY;
}
+
else if (e.type === 'touchend') {
this._lastTouch = undefined;
}
+
else if (e.type == 'touchmove') {
- var t = e.touches[0];
- if ((this._lastTouch + 10) < t.clientY) {
+ if ((this._lastTouch + 10) < e.touches[0].clientY) {
this.show();
this._lastTouch = undefined;
};
@@ -334,26 +326,32 @@
}
},
-
+
+ // Unshow the hint menu
_unshow : function () {
if (this.active() !== null) {
- // var act = this.active();
-
+
// This does not work for alert currently!
- //if (act._type !== 'alert') {
if (!this._alert.active) {
- // This does not work for webkit!
- var c = this._inputField.container();
- c.removeChild(this._active.element());
+ // TODO: This does not work for webkit?
+ this._inputField
+ .container()
+ .removeChild(this._active.element());
}
+
else {
this._unshowAlert();
};
- // this._active.hide();
this.active(null);
};
+ },
+
+ // Unshow alert
+ _unshowAlert : function () {
+ this._alert.hide();
+ this.active(null);
}
};
});