progress wip. separated out chat input component and its respective methods.
This commit is contained in:
Ginger Wong
211
webroot/js/chat/chat-input.js
Normal file
211
webroot/js/chat/chat-input.js
Normal file
@@ -0,0 +1,211 @@
|
||||
import { h, Component, createRef } from 'https://unpkg.com/preact?module';
|
||||
import htm from 'https://unpkg.com/htm?module';
|
||||
const html = htm.bind(h);
|
||||
|
||||
import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button';
|
||||
|
||||
import { URL_CUSTOM_EMOJIS } from '../utils.js';
|
||||
import { generatePlaceholderText } from '../utils/chat.js';
|
||||
|
||||
export default class ChatInput extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.formMessageInput = createRef();
|
||||
|
||||
this.messageCharCount = 0;
|
||||
this.maxMessageLength = 500;
|
||||
this.maxMessageBuffer = 20;
|
||||
|
||||
this.emojiPicker = null;
|
||||
|
||||
this.prepNewLine = false;
|
||||
|
||||
this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this);
|
||||
this.handleEmojiSelected = this.handleEmojiSelected.bind(this);
|
||||
this.getCustomEmojis = this.getCustomEmojis.bind(this);
|
||||
|
||||
this.handleMessageInputKeydown = this.handleMessageInputKeydown.bind(this);
|
||||
this.handleMessageInputKeyup = this.handleMessageInputKeyup.bind(this);
|
||||
this.handleMessageInputBlur = this.handleMessageInputBlur.bind(this);
|
||||
this.handleMessageInput = this.handleMessageInput.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getCustomEmojis();
|
||||
}
|
||||
|
||||
getCustomEmojis() {
|
||||
fetch(URL_CUSTOM_EMOJIS)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Network response was not ok ${response.ok}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
this.emojiPicker = new EmojiButton({
|
||||
zIndex: 100,
|
||||
theme: 'dark',
|
||||
custom: json,
|
||||
initialCategory: 'custom',
|
||||
showPreview: false,
|
||||
position: {
|
||||
top: '50%',
|
||||
right: '100'
|
||||
},
|
||||
});
|
||||
this.emojiPicker.on('emoji', emoji => {
|
||||
this.handleEmojiSelected(emoji);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
// this.handleNetworkingError(`Emoji Fetch: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
handleEmojiButtonClick() {
|
||||
if (this.emojiPicker) {
|
||||
this.emojiPicker.togglePicker(this.emojiPicker);
|
||||
}
|
||||
}
|
||||
|
||||
handleEmojiSelected(emoji) {
|
||||
if (emoji.url) {
|
||||
const url = location.protocol + "//" + location.host + "/" + emoji.url;
|
||||
const name = url.split('\\').pop().split('/').pop();
|
||||
document.querySelector('#message-body-form').innerHTML += "<img class=\"emoji\" alt=\"" + name + "\" src=\"" + url + "\"/>";
|
||||
} else {
|
||||
document.querySelector('#message-body-form').innerHTML += emoji.emoji;
|
||||
}
|
||||
}
|
||||
|
||||
// autocomplete user names
|
||||
autoCompleteNames() {
|
||||
const { chatUserNames } = this.props;
|
||||
const rawValue = this.formMessageInput.innerHTML;
|
||||
const position = getCaretPosition(this.formMessageInput);
|
||||
const at = rawValue.lastIndexOf('@', position - 1);
|
||||
|
||||
if (at === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var partial = rawValue.substring(at + 1, position).trim();
|
||||
|
||||
if (partial === this.suggestion) {
|
||||
partial = this.partial;
|
||||
} else {
|
||||
this.partial = partial;
|
||||
}
|
||||
|
||||
const possibilities = chatUsernames.filter(function (username) {
|
||||
return username.toLowerCase().startsWith(partial.toLowerCase());
|
||||
});
|
||||
|
||||
if (this.completionIndex === undefined || ++this.completionIndex >= possibilities.length) {
|
||||
this.completionIndex = 0;
|
||||
}
|
||||
|
||||
if (possibilities.length > 0) {
|
||||
this.suggestion = possibilities[this.completionIndex];
|
||||
|
||||
// TODO: Fix the space not working. I'm guessing because the DOM ignores spaces and it requires a nbsp or something?
|
||||
this.formMessageInput.innerHTML = rawValue.substring(0, at + 1) + this.suggestion + ' ' + rawValue.substring(position);
|
||||
setCaretPosition(this.formMessageInput, at + this.suggestion.length + 2);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
handleMessageInputKeydown(event) {
|
||||
console.log("========this.formMessageInput", this.formMessageInput)
|
||||
const okCodes = [37,38,39,40,16,91,18,46,8];
|
||||
const value = this.formMessageInput.innerHTML.trim();
|
||||
const numCharsLeft = this.maxMessageLength - value.length;
|
||||
if (event.keyCode === 13) { // enter
|
||||
if (!this.prepNewLine) {
|
||||
this.submitChat(value);
|
||||
event.preventDefault();
|
||||
this.prepNewLine = false;
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
|
||||
this.prepNewLine = true;
|
||||
}
|
||||
if (event.keyCode === 9) { // tab
|
||||
if (this.autoCompleteNames()) {
|
||||
event.preventDefault();
|
||||
|
||||
// value could have been changed, update variables
|
||||
value = this.formMessageInput.innerHTML.trim();
|
||||
numCharsLeft = this.maxMessageLength - value.length;
|
||||
}
|
||||
}
|
||||
|
||||
// if (numCharsLeft <= this.maxMessageBuffer) {
|
||||
// this.tagMessageFormWarning.innerText = `${numCharsLeft} chars left`;
|
||||
// if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
|
||||
// event.preventDefault();
|
||||
// return;
|
||||
// }
|
||||
// } else {
|
||||
// this.tagMessageFormWarning.innerText = '';
|
||||
// }
|
||||
}
|
||||
|
||||
handleMessageInputKeyup(event) {
|
||||
if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
|
||||
this.prepNewLine = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleMessageInputBlur(event) {
|
||||
this.prepNewLine = false;
|
||||
}
|
||||
|
||||
handleMessageInput(event) {
|
||||
// event.target.value
|
||||
}
|
||||
|
||||
// setChatPlaceholderText() {
|
||||
// // NOTE: This is a fake placeholder that is being styled via CSS.
|
||||
// // You can't just set the .placeholder property because it's not a form element.
|
||||
// const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT);
|
||||
// const placeholderText = hasSentFirstChatMessage ? CHAT_PLACEHOLDER_TEXT : CHAT_INITIAL_PLACEHOLDER_TEXT;
|
||||
// this.formMessageInput.setAttribute("placeholder", placeholderText);
|
||||
// }
|
||||
|
||||
render(props, state) {
|
||||
const { contenteditable, hasSentFirstChatMessage } = props;
|
||||
const emojiButtonStyle = {
|
||||
display: this.emojiPicker ? 'block' : 'none',
|
||||
};
|
||||
|
||||
const placeholderText = generatePlaceholderText(contenteditable, hasSentFirstChatMessage);
|
||||
|
||||
return (
|
||||
html`
|
||||
<div>
|
||||
<div
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
|
||||
onkeydown=${this.handleMessageInputKeydown}
|
||||
onkeyup=${this.handleMessageInputKeyup}
|
||||
onblur=${this.handleMessageInputBlur}
|
||||
oninput=${this.handleMessageInput}
|
||||
contenteditable=${contenteditable}
|
||||
placeholder=${placeholderText}
|
||||
ref=${this.formMessageInput}
|
||||
|
||||
></div>
|
||||
<button
|
||||
type="button"
|
||||
style=${emojiButtonStyle}
|
||||
onclick=${this.handleEmojiButtonClick}
|
||||
>😏</button>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user