Focus chat when switching room

This commit is contained in:
Cadence Ember 2020-10-19 20:23:28 +13:00
parent 1f9462b89d
commit 6b97b226e6
Signed by untrusted user: cadence
GPG key ID: BC1C2C61CF521B17
6 changed files with 27 additions and 15 deletions

View file

@ -4,10 +4,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static/main.css?static=9aad8398d2"> <link rel="stylesheet" type="text/css" href="static/main.css?static=9aad8398d2">
<script type="module" src="static/groups.js?static=2cc7f0daf8"></script> <script type="module" src="static/groups.js?static=2cc7f0daf8"></script>
<script type="module" src="static/chat-input.js?static=e8b21037fa"></script> <script type="module" src="static/chat-input.js?static=92188b34f9"></script>
<script type="module" src="static/room-picker.js?static=7bc94b38d3"></script> <script type="module" src="static/room-picker.js?static=7bc94b38d3"></script>
<script type="module" src="static/sync/sync.js?static=56e374b23d"></script> <script type="module" src="static/sync/sync.js?static=56e374b23d"></script>
<script type="module" src="static/chat.js?static=8a04bee48d"></script> <script type="module" src="static/chat.js?static=fc121d3d23"></script>
<title>Carbon</title> <title>Carbon</title>
</head> </head>
<body> <body>

View file

@ -1,29 +1,36 @@
import {q} from "./basic.js" import {q} from "./basic.js"
import {store} from "./store/store.js" import {store} from "./store/store.js"
import * as lsm from "./lsm.js" import * as lsm from "./lsm.js"
import {chat} from "./chat.js"
let sentIndex = 0 let sentIndex = 0
const chat = q("#c-chat-textarea") const input = q("#c-chat-textarea")
chat.addEventListener("keydown", event => { store.activeRoom.subscribe("changeSelf", () => {
if (store.activeRoom.exists()) {
input.focus()
}
})
input.addEventListener("keydown", event => {
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) { if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) {
event.preventDefault() event.preventDefault()
const body = chat.value const body = input.value
send(chat.value) send(input.value)
chat.value = "" input.value = ""
fixHeight() fixHeight()
} }
}) })
chat.addEventListener("input", () => { input.addEventListener("input", () => {
fixHeight() fixHeight()
}) })
function fixHeight() { function fixHeight() {
chat.style.height = "0px" input.style.height = "0px"
console.log(chat.clientHeight, chat.scrollHeight) // console.log(input.clientHeight, input.scrollHeight)
chat.style.height = (chat.scrollHeight + 1) + "px" input.style.height = (input.scrollHeight + 1) + "px"
} }
function getTxnId() { function getTxnId() {

View file

@ -34,7 +34,7 @@ class Chat extends ElemJS {
let oldDifference = chatMessages.scrollHeight - chatMessages.clientHeight let oldDifference = chatMessages.scrollHeight - chatMessages.clientHeight
setTimeout(() => { setTimeout(() => {
let newDifference = chatMessages.scrollHeight - chatMessages.clientHeight let newDifference = chatMessages.scrollHeight - chatMessages.clientHeight
console.log("height difference", oldDifference, newDifference) // console.log("height difference", oldDifference, newDifference)
if (oldDifference < 24) { // this is jank if (oldDifference < 24) { // this is jank
this.element.parentElement.scrollBy(0, 1000) this.element.parentElement.scrollBy(0, 1000)
} }

View file

@ -54,7 +54,6 @@ class SubscribeMapList extends Subscribable {
} }
sort() { sort() {
console.log("sorting")
this.list.sort((a, b) => { this.list.sort((a, b) => {
const orderA = this.map.get(a).value().order const orderA = this.map.get(a).value().order
const orderB = this.map.get(b).value().order const orderB = this.map.get(b).value().order

View file

@ -7,6 +7,12 @@ let sentIndex = 0
const input = q("#c-chat-textarea") const input = q("#c-chat-textarea")
store.activeRoom.subscribe("changeSelf", () => {
if (store.activeRoom.exists()) {
input.focus()
}
})
input.addEventListener("keydown", event => { input.addEventListener("keydown", event => {
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) { if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) {
event.preventDefault() event.preventDefault()
@ -23,7 +29,7 @@ input.addEventListener("input", () => {
function fixHeight() { function fixHeight() {
input.style.height = "0px" input.style.height = "0px"
console.log(input.clientHeight, input.scrollHeight) // console.log(input.clientHeight, input.scrollHeight)
input.style.height = (input.scrollHeight + 1) + "px" input.style.height = (input.scrollHeight + 1) + "px"
} }

View file

@ -34,7 +34,7 @@ class Chat extends ElemJS {
let oldDifference = chatMessages.scrollHeight - chatMessages.clientHeight let oldDifference = chatMessages.scrollHeight - chatMessages.clientHeight
setTimeout(() => { setTimeout(() => {
let newDifference = chatMessages.scrollHeight - chatMessages.clientHeight let newDifference = chatMessages.scrollHeight - chatMessages.clientHeight
console.log("height difference", oldDifference, newDifference) // console.log("height difference", oldDifference, newDifference)
if (oldDifference < 24) { // this is jank if (oldDifference < 24) { // this is jank
this.element.parentElement.scrollBy(0, 1000) this.element.parentElement.scrollBy(0, 1000)
} }