Show notice from websocket in js chat form
このコミットが含まれているのは:
コミット
0ce1902918
|
@ -34,6 +34,12 @@ const jsmarkup_chat_form = `\
|
||||||
<img id="chat-form_js__captcha-image" width="72" height="30">
|
<img id="chat-form_js__captcha-image" width="72" height="30">
|
||||||
<input id="chat-form_js__captcha-answer" name="captcha-answer" placeholder="Captcha" disabled>
|
<input id="chat-form_js__captcha-answer" name="captcha-answer" placeholder="Captcha" disabled>
|
||||||
<input id="chat-form_js__submit" type="submit" value="Chat" accesskey="p" disabled>
|
<input id="chat-form_js__submit" type="submit" value="Chat" accesskey="p" disabled>
|
||||||
|
<article id="chat-form_js__notice">
|
||||||
|
<button id="chat-form_js__notice__button" type="button">
|
||||||
|
<header id="chat-form_js__notice__button__header"></header>
|
||||||
|
<small>Click to dismiss</small>
|
||||||
|
</button>
|
||||||
|
</article>
|
||||||
</form>`;
|
</form>`;
|
||||||
|
|
||||||
const insert_jsmarkup = () => {jsmarkup_info_float_viewership
|
const insert_jsmarkup = () => {jsmarkup_info_float_viewership
|
||||||
|
@ -96,6 +102,19 @@ const stylesheet_color = document.styleSheets[1];
|
||||||
const stylesheet_tripcode_display = document.styleSheets[2];
|
const stylesheet_tripcode_display = document.styleSheets[2];
|
||||||
const stylesheet_tripcode_colors = document.styleSheets[3];
|
const stylesheet_tripcode_colors = document.styleSheets[3];
|
||||||
|
|
||||||
|
/* override chat form notice button */
|
||||||
|
const chat_form = document.getElementById("chat-form_js");
|
||||||
|
const chat_form_notice_button = document.getElementById("chat-form_js__notice__button");
|
||||||
|
const chat_form_notice_header = document.getElementById("chat-form_js__notice__button__header");
|
||||||
|
chat_form_notice_button.addEventListener("click", (event) => {
|
||||||
|
chat_form.removeAttribute("data-notice");
|
||||||
|
chat_form_notice_header.innerText = "";
|
||||||
|
});
|
||||||
|
const show_notice = (text) => {
|
||||||
|
chat_form_notice_header.innerText = text;
|
||||||
|
chat_form.dataset.notice = "";
|
||||||
|
}
|
||||||
|
|
||||||
/* create websocket */
|
/* create websocket */
|
||||||
const info_title = document.getElementById("info_js__title");
|
const info_title = document.getElementById("info_js__title");
|
||||||
const info_viewership = document.getElementById("info_js__float__viewership");
|
const info_viewership = document.getElementById("info_js__float__viewership");
|
||||||
|
@ -594,6 +613,11 @@ const on_websocket_message = (event) => {
|
||||||
|
|
||||||
case "ack":
|
case "ack":
|
||||||
console.log("ws ack", receipt);
|
console.log("ws ack", receipt);
|
||||||
|
|
||||||
|
if (receipt.notice !== null) {
|
||||||
|
show_notice(receipt.notice);
|
||||||
|
}
|
||||||
|
|
||||||
const existing_nonce = chat_form_nonce.value;
|
const existing_nonce = chat_form_nonce.value;
|
||||||
if (receipt.clear && receipt.nonce === existing_nonce) {
|
if (receipt.clear && receipt.nonce === existing_nonce) {
|
||||||
chat_form_comment.value = "";
|
chat_form_comment.value = "";
|
||||||
|
@ -603,6 +627,7 @@ const on_websocket_message = (event) => {
|
||||||
chat_form_nonce.value = receipt.next;
|
chat_form_nonce.value = receipt.next;
|
||||||
receipt.digest === null ? disable_captcha() : enable_captcha(receipt.digest);
|
receipt.digest === null ? disable_captcha() : enable_captcha(receipt.digest);
|
||||||
chat_form_submit.disabled = false;
|
chat_form_submit.disabled = false;
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "message":
|
case "message":
|
||||||
|
@ -709,7 +734,6 @@ stream.addEventListener("error", (event) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
/* override js-only chat form */
|
/* override js-only chat form */
|
||||||
const chat_form = document.getElementById("chat-form_js");
|
|
||||||
const chat_form_nonce = document.getElementById("chat-form_js__nonce");
|
const chat_form_nonce = document.getElementById("chat-form_js__nonce");
|
||||||
const chat_form_comment = document.getElementById("chat-form_js__comment");
|
const chat_form_comment = document.getElementById("chat-form_js__comment");
|
||||||
const chat_form_submit = document.getElementById("chat-form_js__submit");
|
const chat_form_submit = document.getElementById("chat-form_js__submit");
|
||||||
|
|
|
@ -265,7 +265,8 @@ noscript {
|
||||||
grid-template-columns: 1fr min-content min-content 5rem;
|
grid-template-columns: 1fr min-content min-content 5rem;
|
||||||
grid-template-rows: auto var(--button-height);
|
grid-template-rows: auto var(--button-height);
|
||||||
grid-gap: 0.375rem;
|
grid-gap: 0.375rem;
|
||||||
margin: 0 0.5rem 0.5rem 0.5rem;
|
padding: 0 0.5rem 0.5rem 0.5rem;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
#chat-form_js__submit {
|
#chat-form_js__submit {
|
||||||
grid-column: 2 / span 1;
|
grid-column: 2 / span 1;
|
||||||
|
@ -307,6 +308,33 @@ noscript {
|
||||||
#chat-form_js:not([data-captcha]) > #chat-form_js__captcha-answer {
|
#chat-form_js:not([data-captcha]) > #chat-form_js__captcha-answer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
#chat-form_js:not([data-notice]) > #chat-form_js__notice {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#chat-form_js__notice {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(#2323277f 25%, #232327);
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
#chat-form_js__notice__button {
|
||||||
|
color: inherit;
|
||||||
|
border-color: black;
|
||||||
|
background-color: #232327;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 0.375rem;
|
||||||
|
padding: 0.625rem 1.25rem;
|
||||||
|
box-shadow: 0 0 12px black;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#chat-form_js__notice__button__header {
|
||||||
|
font-size: 14pt;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
#chat-form_nojs {
|
#chat-form_nojs {
|
||||||
height: 13ch;
|
height: 13ch;
|
||||||
}
|
}
|
||||||
|
|
読み込み中…
新しいイシューから参照