Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Change selected item to the one the mouse is hovering over

Browse Source
This commit is contained in:
JC Brand 2018-08-15 10:31:48 +02:00
parent f3d14a00c2
commit 70b953ab84
3 changed files with 32 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/converse.css
View File

@ -9142,18 +9142,13 @@ body.reset {
transform: scale(0);
display: block;
transition-timing-function: ease; } }
#conversejs .suggestion-box > ul > li:hover,
#conversejs div.awesomplete > ul > li:hover {
z-index: 2;
background: #E77051;
color: white; }
#conversejs .suggestion-box > ul > li[aria-selected="true"],
#conversejs div.awesomplete > ul > li[aria-selected="true"] {
background: #A53214;
background: #D24E2B;
color: white; }
#conversejs .suggestion-box li:hover mark,
#conversejs div.awesomplete li:hover mark {
background: #D24E2B;
background: #FFB9A7;
color: white; }
#conversejs .suggestion-box li[aria-selected="true"] mark,
#conversejs div.awesomplete li[aria-selected="true"] mark {

13
sass/_awesomplete.scss
View File

@ -113,22 +113,15 @@
}
}
.suggestion-box > ul > li:hover,
div.awesomplete > ul > li:hover {
z-index: 2;
background: $red;
color: $inverse-link-color;
}
.suggestion-box > ul > li[aria-selected="true"],
div.awesomplete > ul > li[aria-selected="true"] {
background: $darkest-red;
color: white;
background: $dark-red;
color: $inverse-link-color;
}
.suggestion-box li:hover mark,
div.awesomplete li:hover mark {
background: $dark-red;
background: $lightest-red;
color: $inverse-link-color;
}

46
src/converse-autocomplete.js
View File

@ -55,7 +55,7 @@
class AutoComplete {
constructor (el, config={}) {
this.is_opened = false;
@ -100,29 +100,20 @@
bindEvents () {
// Bind events
const input = {
"blur": this.close.bind(this, {'reason': "blur"}),
"blur": () => this.close({'reason': 'blur'})
}
if (this.auto_evaluate) {
input["input"] = this.evaluate.bind(this);
input["input"] = () => this.evaluate();
}
this._events = {
'input': input,
'form': {
"submit": this.close.bind(this, { reason: "submit" })
"submit": () => this.close({'reason': 'submit'})
},
'ul': {
"mousedown": (evt) => {
let li = evt.target;
if (li !== this) {
while (li && !(/li/i).test(li.nodeName)) {
li = li.parentNode;
}
if (li && evt.button === 0) { // Only select on left click
evt.preventDefault();
this.select(li, evt.target);
}
}
}
"mousedown": (ev) => this.onMouseDown(ev),
"mouseover": (ev) => this.onMouseOver(ev)
}
};
helpers.bind(this.input, this._events.input);
@ -173,7 +164,6 @@
this.ul.setAttribute("hidden", "");
this.is_opened = false;
this.index = -1;
this.trigger("suggestion-box-close", o || {});
}
@ -257,6 +247,24 @@
}
}
onMouseOver (ev) {
const li = u.ancestor(ev.target, 'li');
if (li) {
this.goto(Array.prototype.slice.call(this.ul.children).indexOf(li))
}
}
onMouseDown (ev) {
if (ev.button !== 0) {
return; // Only select on left click
}
const li = u.ancestor(ev.target, 'li');
if (li) {
ev.preventDefault();
this.select(li, ev.target);
}
}
keyPressed (ev) {
if (this.opened) {
if (_.includes([_converse.keycodes.ENTER, _converse.keycodes.TAB], ev.keyCode) && this.selected) {
@ -307,13 +315,13 @@
}
let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
let ignore_min_chars = false;
if (this.trigger_on_at && value.startsWith('@')) {
ignore_min_chars = true;
value = value.slice('1');
}
if ((value.length >= this.min_chars) || ignore_min_chars) {
this.index = -1;
// Populate list with options that match