Suggestions div changes
Added scrolling and more than 10 elements in div if the user changes the current element, the div will scroll with it added debug div to show the keys closes #76
This commit is contained in:
joeyak
parent
791df37030
commit
24ba706827
|
|
@ -12,7 +12,8 @@
|
|||
</head>
|
||||
|
||||
<body class="scrollbar">
|
||||
<img id="remote" src="/static/img/remote.png" style="display: none;" onclick="flipRemote();" />
|
||||
<img id="remote" src="/static/img/remote.png" onclick="flipRemote();" />
|
||||
<div id="devKeys"></div>
|
||||
<div class="root">
|
||||
{{template "body" .}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -277,6 +277,8 @@ input[type=text] {
|
|||
background: #3b3b43;
|
||||
position: absolute;
|
||||
min-width: 10em;
|
||||
max-height: 35em;
|
||||
overflow-y: scroll;
|
||||
border-radius: 5px 5px 0px 5px;
|
||||
color: var(--var-message-color);
|
||||
}
|
||||
|
|
@ -310,11 +312,19 @@ input[type=text] {
|
|||
}
|
||||
|
||||
#remote {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 1em auto;
|
||||
width: 50px;
|
||||
z-index: 999;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#devKeys {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
color: var(--var-contrast-color);
|
||||
}
|
||||
|
|
@ -2,30 +2,47 @@
|
|||
|
||||
let konamiCode = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"]
|
||||
let lastKeys = []
|
||||
let devKeys = false;
|
||||
|
||||
// Make this on all pages so video page also doesn't do this
|
||||
$(document).on("keydown", function (e) {
|
||||
checkKonami(e);
|
||||
lastKeys.push(e);
|
||||
if (lastKeys.length > 10) {
|
||||
lastKeys.shift();
|
||||
}
|
||||
a = e
|
||||
|
||||
if (devKeys) {
|
||||
let modifiedLastKeys = []
|
||||
lastKeys.forEach((e) => {
|
||||
switch (e.key) {
|
||||
case " ":
|
||||
modifiedLastKeys.push(`Space - ${e.keyCode}`);
|
||||
break;
|
||||
default:
|
||||
modifiedLastKeys.push(`${e.key} - ${e.keyCode}`);
|
||||
break;
|
||||
}
|
||||
})
|
||||
$("#devKeys").html(`'${modifiedLastKeys.join("', '")}'`);
|
||||
}
|
||||
|
||||
if (e.which === 8 && !$(e.target).is("input, textarea")) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
checkKonami(e);
|
||||
});
|
||||
|
||||
|
||||
function checkKonami(e) {
|
||||
lastKeys.push(e.key);
|
||||
if (lastKeys.length > 10) {
|
||||
lastKeys.shift();
|
||||
}
|
||||
|
||||
if (lastKeys.length === konamiCode.length) {
|
||||
for (let i = 0; i < lastKeys.length; i++) {
|
||||
if (lastKeys[i] != konamiCode[i]) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
$("#remote").css("display", "");
|
||||
$("#remote").css("display", "block");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,3 +52,16 @@ function flipRemote() {
|
|||
$("#remote").attr("src", "/static/img/remote.png");
|
||||
}, Math.round(Math.random() * 10000) + 1000);
|
||||
}
|
||||
|
||||
function enableDebug() {
|
||||
devKeys = true;
|
||||
$("#devKeys").css("display", "block");
|
||||
}
|
||||
|
||||
/*
|
||||
// Just add a / above to uncomment the block
|
||||
setTimeout(() => {
|
||||
enableDebug();
|
||||
alert("Comment this out. It shows the keys.");
|
||||
}, 150);
|
||||
//*/
|
||||
|
|
|
|||
|
|
@ -134,6 +134,13 @@ function updateSuggestionCss(m) {
|
|||
}
|
||||
}
|
||||
|
||||
function updateSuggestionScroll() {
|
||||
let item = $("#suggestions .selectedName");
|
||||
if (item.length !== 0) {
|
||||
item[0].scrollIntoView({ block: "center" });
|
||||
}
|
||||
}
|
||||
|
||||
function setNotifyBox(msg = "") {
|
||||
$("#notifyBox").html(msg);
|
||||
}
|
||||
|
|
@ -246,6 +253,7 @@ function setupEvents() {
|
|||
}
|
||||
},
|
||||
keydown: (e) => {
|
||||
console.log(e.keyCode + e.key + e.ctrlKey)
|
||||
if (processMessageKey(e)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
<a id="playing" target="_blank"></a>
|
||||
<div id="messages" class="scrollbar"></div>
|
||||
<div id="msgbox">
|
||||
<div id="suggestions"></div>
|
||||
<div id="suggestions" class="scrollbar"></div>
|
||||
<textarea id="msg"></textarea>
|
||||
</div>
|
||||
<input id="send" type="button" class="button" onclick="sendChat();" value="Send" />
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ const (
|
|||
keyTab = 9
|
||||
keyEnter = 13
|
||||
keyEsc = 27
|
||||
keySpace = 32
|
||||
keyUp = 38
|
||||
keyDown = 40
|
||||
suggestionName = '@'
|
||||
|
|
@ -30,12 +31,19 @@ var (
|
|||
|
||||
// The returned value is a bool deciding to prevent the event from propagating
|
||||
func processMessageKey(this js.Value, v []js.Value) interface{} {
|
||||
startIdx := v[0].Get("target").Get("selectionStart").Int()
|
||||
keyCode := v[0].Get("keyCode").Int()
|
||||
ctrl := v[0].Get("ctrlKey").Bool()
|
||||
|
||||
if ctrl && keyCode == keySpace {
|
||||
processMessage(nil)
|
||||
return true
|
||||
}
|
||||
|
||||
if len(filteredSug) == 0 || currentSug == "" {
|
||||
return false
|
||||
}
|
||||
|
||||
startIdx := v[0].Get("target").Get("selectionStart").Int()
|
||||
keyCode := v[0].Get("keyCode").Int()
|
||||
switch keyCode {
|
||||
case keyEsc:
|
||||
filteredSug = nil
|
||||
|
|
@ -129,10 +137,6 @@ func processMessage(v []js.Value) {
|
|||
if len(word) == 1 || strings.Contains(strings.ToLower(s), word[1:]) {
|
||||
filteredSug = append(filteredSug, s)
|
||||
}
|
||||
|
||||
if len(filteredSug) > 10 {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -186,4 +190,5 @@ func updateSuggestionDiv() {
|
|||
}
|
||||
// The \n is so it's easier to read th source in web browsers for the dev
|
||||
js.Get("suggestions").Set("innerHTML", strings.Join(divs, "\n"))
|
||||
js.Call("updateSuggestionScroll")
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue