Fixed a couple of bugs in the new hint system
diff --git a/public/js/hint.js b/public/js/hint.js
index 96f08a3..1e5f6ec 100644
--- a/public/js/hint.js
+++ b/public/js/hint.js
@@ -1,10 +1,11 @@
"use strict";
/*
-Todo:
-- limit the view based on prefix matches
-- highlight matching substrings
-*/
+ * Todo:
+ * - limit the view based on prefix matches
+ * - highlight matching substrings
+ * - http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
+ */
// Don't let events bubble up
Event.prototype.halt = function () {
@@ -236,10 +237,10 @@
*/
var PrefixAnalyzer = {
_regex : new RegExp(
- "(?:^|[^-a-zA-Z0-9])" + // Anchor
- "((?:[-a-zA-Z0-9]+?)\/" + // Foundry
+ "(?:^|[^-_a-zA-Z0-9])" + // Anchor
+ "((?:[-_a-zA-Z0-9]+?)\/" + // Foundry
"(?:" +
- "(?:[-a-zA-Z0-9]+?)=" + // Layer
+ "(?:[-_a-zA-Z0-9]+?)=" + // Layer
"(?:(?:[^:=\/ ]+?):)?" + // Key
")?" +
")$"),
@@ -250,19 +251,36 @@
}
};
+function codeFromEvent (e) {
+ if ((e.charCode) && (e.keyCode==0))
+ return e.charCode
+ return e.keyCode;
+};
-/**
- * Event handling after a key pressed
+
+/*
+ * Event handling after a key is down
+ * for arrows!
*/
-function updateKey (that, e) {
+function updateKeyDown (that, e) {
+ var code = codeFromEvent(e);
var menu = that.menu();
- switch (e.key) {
- case 'Esc':
+ /*
+ * keyCodes:
+ * - Down = 40
+ * - Esc = 27
+ * - Up = 38
+ * - Enter = 13
+ * - shift = 16
+ * for characters use e.key
+ */
+ switch (code) {
+ case 27: // 'Esc'
// Hide menu
menu.hide();
break;
- case 'Down':
+ case 40: // 'Down'
e.halt(); // No event propagation
// Menu is not active
@@ -276,20 +294,20 @@
};
break;
- case "Up":
+ case 38: // "Up"
if (!menu.active)
break;
e.halt(); // No event propagation
that.removePrefix();
menu.prev();
break;
- case "Enter":
+ case 13: // "Enter"
if (!menu.active)
break;
e.halt(); // No event propagation
that.insertText(menu.getActiveItem().getAction());
that.removePrefix();
-
+
// Remove menu
menu.hide();
@@ -302,41 +320,43 @@
e.target.getBoundingClientRect().right
);
};
-
+
break;
default:
if (!menu.active)
- break;
+ return;
- // key stroke is not a character
- if (e.key.length != 1) {
-
- // Key stroke is not a text modifying key
- if (e.key != 'Shift' &&
- e.key != 'Up' &&
- e.key != 'Down' &&
- e.key != 'Enter' &&
- e.key != 'Alt' &&
- e.key != 'AltGraph' &&
- e.key != 'CapsLock') {
- that.insertPrefix();
- menu.hide();
- };
- break;
+ // Surpress propagation in firefox
+ if (e.key !== undefined && e.key.length != 1) {
+ menu.hide();
};
-
- e.halt(); // No event propagation
-
- // Try to identify prefix
- if (menu.skipToPrefix(e.key))
- break;
-
- // Prefix not found
- that.insertPrefix();
- menu.hide();
};
};
+/**
+ * Event handling after a key pressed
+ * for characters!
+ */
+function updateKeyPress (that, e) {
+ var character = String.fromCharCode(codeFromEvent(e));
+ var menu = that.menu();
+
+ if (!menu.active)
+ return;
+
+ e.halt(); // No event propagation
+
+ // Try to identify prefix
+ if (menu.skipToPrefix(character))
+ return;
+
+ // Prefix not found
+ that.insertPrefix();
+ menu.hide();
+};
+
+
+
// new hint object
var Hint = {
_search : undefined, // Return the search element
@@ -369,9 +389,18 @@
// Add event listener for key pressed down
this._search.addEventListener(
+ "keypress",
+ function (e) {
+ updateKeyPress(that, e)
+ },
+ false
+ );
+
+ // Add event listener for key pressed down
+ this._search.addEventListener(
"keydown",
function (e) {
- updateKey(that, e)
+ updateKeyDown(that, e)
},
false
);
diff --git a/public/sass/hint.scss b/public/sass/hint.scss
index 5210fa7..bcf3d85 100644
--- a/public/sass/hint.scss
+++ b/public/sass/hint.scss
@@ -9,8 +9,11 @@
top: 0;
font-size: 120%;
line-height: 120%;
- padding: 3pt;
+ margin-top: 1pt;
+ padding-top: 2pt;
+ padding-bottom: 1pt;
color: $dark-orange;
+ background-color: white;
&:hover, &.active {
color: $light-green;
cursor: pointer;
@@ -80,6 +83,9 @@
background-color: $light-green;
text-shadow: none;
color: $dark-green;
+ &:hover {
+ color: white;
+ }
}
&:first-of-type:not(.no-more) {
border-top-color: $dark-orange;
diff --git a/public/sass/style.scss b/public/sass/style.scss
index c26c053..40d4ab2 100644
--- a/public/sass/style.scss
+++ b/public/sass/style.scss
@@ -123,7 +123,7 @@
display: inline-block;
position: relative;
color: white;
- background-color: transparent;
+ background-color: $light-green;
-webkit-appearance: none;
border-width: 0;
border-radius: 0;