diff --git a/files/assets/css/main.css b/files/assets/css/main.css index 09a1d7f71..2286d7353 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -6564,7 +6564,7 @@ g { padding-left: 10px; } -#speed-carot-modal +#inline-carot-modal { background-color: var(--gray-700); max-height: 500px; @@ -6576,29 +6576,29 @@ g { z-index: 1000000001; } -#speed-carot-modal .speed-modal-option +#inline-carot-modal .inline-modal-option { border-bottom: 1px solid #606060; padding: 4px; cursor: pointer; } -#speed-carot-modal .speed-modal-option:hover, -#speed-carot-modal .speed-modal-option:focus, -#speed-carot-modal .speed-modal-option.selected +#inline-carot-modal .inline-modal-option:hover, +#inline-carot-modal .inline-modal-option:focus, +#inline-carot-modal .inline-modal-option.selected { background-color: rgba(255, 255, 255, 0.2); } -#speed-carot-modal .speed-modal-image +#inline-carot-modal .inline-modal-image { object-fit: contain; width: 30px; height: 30px; } -#speed-carot-modal .speed-modal-option span +#inline-carot-modal .inline-modal-option span { overflow: hidden; display: inline-block; @@ -6711,7 +6711,7 @@ div.markdown { } @media (min-width: 768px) { - #speed-carot-modal .speed-modal-image + #inline-carot-modal .inline-modal-image { width: 50px; height: 50px; diff --git a/files/assets/css/themes/classic_dark.css b/files/assets/css/themes/classic_dark.css index ad1209a64..414ad2b53 100644 --- a/files/assets/css/themes/classic_dark.css +++ b/files/assets/css/themes/classic_dark.css @@ -5,11 +5,11 @@ --background: 34, 34, 34; } -#speed-carot-modal .speed-modal-option { +#inline-carot-modal .inline-modal-option { background-color: rgb(var(--background)); } -#speed-carot-modal .speed-modal-option:hover, #speed-carot-modal .speed-modal-option:focus, #speed-carot-modal .speed-modal-option.selected { +#inline-carot-modal .inline-modal-option:hover, #inline-carot-modal .inline-modal-option:focus, #inline-carot-modal .inline-modal-option.selected { background-color: #444444; } diff --git a/files/assets/css/transparent.css b/files/assets/css/transparent.css index 9b51a6145..e56cedaf8 100644 --- a/files/assets/css/transparent.css +++ b/files/assets/css/transparent.css @@ -10,7 +10,7 @@ background: rgba(var(--background), 0.9) !important; } -.fixed-bottom, .popover, .modal-content, .dropdown-menu, .navbar, body, .form-control, #speed-carot-modal { +.fixed-bottom, .popover, .modal-content, .dropdown-menu, .navbar, body, .form-control, #inline-carot-modal { background-color: rgb(var(--background)) !important; } diff --git a/files/assets/js/bottom.js b/files/assets/js/bottom.js index 177b3c140..6eafe6937 100644 --- a/files/assets/js/bottom.js +++ b/files/assets/js/bottom.js @@ -229,7 +229,7 @@ document.addEventListener("click", function (e) { if (element.dataset.toggleelement) { if (element.dataset.toggleelement.startsWith('#reply-')) - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); const toggling = document.querySelector(element.dataset.toggleelement) const attr = element.dataset.toggleattr; diff --git a/files/assets/js/comments_v.js b/files/assets/js/comments_v.js index bb724e955..cc3b87f8b 100644 --- a/files/assets/js/comments_v.js +++ b/files/assets/js/comments_v.js @@ -98,7 +98,7 @@ function toggleEdit(id){ charLimit(box.id, 'charcount-edit-' + id) } - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); }; @@ -131,7 +131,7 @@ deleteCommentButton.onclick = () => { }; function post_reply(id) { - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); const btn = document.getElementById(`save-reply-to-${id}`) btn.disabled = true; @@ -257,7 +257,7 @@ function comment_edit(id){ } function post_comment(fullname, hide){ - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); const btn = document.getElementById('save-reply-to-'+fullname) const ta = document.getElementById('reply-form-body-'+fullname) @@ -359,5 +359,5 @@ function cancel(fullname) { document.getElementById(`reply-to-${fullname}`).classList.add('d-none') remove_dialog(); restore_reply_buttons(fullname) - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); } diff --git a/files/assets/js/core.js b/files/assets/js/core.js index 1906f930f..8f742906a 100644 --- a/files/assets/js/core.js +++ b/files/assets/js/core.js @@ -214,7 +214,7 @@ function bs_trigger(e) { return bootstrap.Tooltip.getOrCreateInstance(element); }); - if (typeof update_speed_emoji_modal == 'function') { + if (typeof update_inline_emoji_modal == 'function') { insertGhostDivs(e) } } @@ -305,8 +305,8 @@ function reload() { } function sendFormXHR(form, extraActionsOnSuccess) { - if (typeof close_inline_speed_emoji_modal === "function") { - close_inline_speed_emoji_modal(); + if (typeof close_inline_emoji_modal === "function") { + close_inline_emoji_modal(); } const t = form.querySelector('[type="submit"]') @@ -702,14 +702,14 @@ if (screen_width < 768) { } document.addEventListener('show.bs.modal', () => { - if (typeof close_inline_speed_emoji_modal === "function") { - close_inline_speed_emoji_modal(); + if (typeof close_inline_emoji_modal === "function") { + close_inline_emoji_modal(); } }); document.addEventListener('hide.bs.modal', () => { - if (typeof close_inline_speed_emoji_modal === "function") { - close_inline_speed_emoji_modal(); + if (typeof close_inline_emoji_modal === "function") { + close_inline_emoji_modal(); } }); diff --git a/files/assets/js/edit_post.js b/files/assets/js/edit_post.js index da1c0e301..17e463724 100644 --- a/files/assets/js/edit_post.js +++ b/files/assets/js/edit_post.js @@ -17,7 +17,7 @@ function togglePostEdit(id) { autoExpand(box); } - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); }; document.getElementById('post-edit-title').addEventListener('keydown', (e) => { diff --git a/files/assets/js/emoji_modal/speed_emoji_modal.js b/files/assets/js/emoji_modal/inline_emoji_modal.js similarity index 78% rename from files/assets/js/emoji_modal/speed_emoji_modal.js rename to files/assets/js/emoji_modal/inline_emoji_modal.js index ca82cbdab..451096387 100644 --- a/files/assets/js/emoji_modal/speed_emoji_modal.js +++ b/files/assets/js/emoji_modal/inline_emoji_modal.js @@ -28,13 +28,13 @@ function update_ghost_div_textarea(text) // Used for anything where a user is typing, specifically for the emoji modal // Just leave it global, I don't care -let speed_carot_modal = document.createElement("div"); -speed_carot_modal.id = "speed-carot-modal"; -speed_carot_modal.style.position = "absolute"; -speed_carot_modal.style.left = "0px"; -speed_carot_modal.style.top = "0px"; -speed_carot_modal.style.display = "none"; -document.body.appendChild(speed_carot_modal); +let inline_carot_modal = document.createElement("div"); +inline_carot_modal.id = "inline-carot-modal"; +inline_carot_modal.style.position = "absolute"; +inline_carot_modal.style.left = "0px"; +inline_carot_modal.style.top = "0px"; +inline_carot_modal.style.display = "none"; +document.body.appendChild(inline_carot_modal); let e @@ -48,24 +48,24 @@ function curr_word_is_emoji() current_word.charAt(current_word.length-1) != ":"; } -function close_inline_speed_emoji_modal() { +function close_inline_emoji_modal() { selecting = false; - speed_carot_modal.style.display = "none"; + inline_carot_modal.style.display = "none"; } -function populate_speed_emoji_modal(results, textbox) +function populate_inline_emoji_modal(results, textbox) { selecting = true; if (!results || results.size === 0) { - speed_carot_modal.style.display = "none"; + inline_carot_modal.style.display = "none"; return -1; } emoji_index = 0; - speed_carot_modal.scrollTop = 0; - speed_carot_modal.innerHTML = ""; + inline_carot_modal.scrollTop = 0; + inline_carot_modal.innerHTML = ""; const MAXXX = 50; // Not sure why the results is a Set... but oh well let i = 0; @@ -75,10 +75,10 @@ function populate_speed_emoji_modal(results, textbox) if (i++ > MAXXX) return i; let emoji_option = document.createElement("div"); - emoji_option.className = "speed-modal-option emoji-option " + (i === 1 ? "selected" : ""); + emoji_option.className = "inline-modal-option emoji-option " + (i === 1 ? "selected" : ""); emoji_option.tabIndex = 0; let emoji_option_img = document.createElement("img"); - emoji_option_img.className = "speed-modal-image emoji-option-image"; + emoji_option_img.className = "inline-modal-image emoji-option-image"; // This is a bit emoji_option_img.src = `${SITE_FULL_IMAGES}/e/${name}.webp` let emoji_option_text = document.createElement("span"); @@ -96,7 +96,7 @@ function populate_speed_emoji_modal(results, textbox) if (current_word.includes("!")) name = `!${name}` emoji_option.addEventListener('click', () => { - close_inline_speed_emoji_modal() + close_inline_emoji_modal() textbox.value = textbox.value.replace(new RegExp(current_word+"(?=\\s|$)", "gi"), `:${name}: `) textbox.focus() if (typeof markdown === "function" && textbox.dataset.preview) { @@ -106,14 +106,14 @@ function populate_speed_emoji_modal(results, textbox) // Pack emoji_option.appendChild(emoji_option_img); emoji_option.appendChild(emoji_option_text); - speed_carot_modal.appendChild(emoji_option); + inline_carot_modal.appendChild(emoji_option); } - if (i === 0) speed_carot_modal.style.display = "none"; - else speed_carot_modal.style.display = "initial"; + if (i === 0) inline_carot_modal.style.display = "none"; + else inline_carot_modal.style.display = "initial"; return i; } -function update_speed_emoji_modal(event) +function update_inline_emoji_modal(event) { const box_coords = update_ghost_div_textarea(event.target); @@ -148,28 +148,28 @@ function update_speed_emoji_modal(event) modal_pos.x += window.scrollX; modal_pos.y += window.scrollY; - speed_carot_modal.style.display = "initial"; - speed_carot_modal.style.left = box_coords.x - 30 + "px"; - speed_carot_modal.style.top = modal_pos.y + box_coords.y + 14 + "px"; + inline_carot_modal.style.display = "initial"; + inline_carot_modal.style.left = box_coords.x - 30 + "px"; + inline_carot_modal.style.top = modal_pos.y + box_coords.y + 14 + "px"; // Do the search (and do something with it) const resultSet = emojisSearchDictionary.completeSearch(current_word.substring(1).replace(/[#!]/g, "")); const found = globalEmojis.filter(i => resultSet.has(i.name)); - populate_speed_emoji_modal(found, event.target); + populate_inline_emoji_modal(found, event.target); }); } else { - speed_carot_modal.style.display = "none"; + inline_carot_modal.style.display = "none"; } } -function speed_carot_navigate(event) +function inline_carot_navigate(event) { if (!selecting) return; - let select_items = speed_carot_modal.querySelectorAll(".speed-modal-option"); + let select_items = inline_carot_modal.querySelectorAll(".inline-modal-option"); if (!select_items || !curr_word_is_emoji()) return; const modal_keybinds = { @@ -203,8 +203,8 @@ function insertGhostDivs(element) { ghostdiv.style.display = "none"; i.after(ghostdiv); } - i.addEventListener('input', update_speed_emoji_modal, false); - i.addEventListener('keydown', speed_carot_navigate, false); + i.addEventListener('input', update_inline_emoji_modal, false); + i.addEventListener('keydown', inline_carot_navigate, false); }); } diff --git a/files/assets/js/userpage_v.js b/files/assets/js/userpage_v.js index c9d83cbc0..7551ff0de 100644 --- a/files/assets/js/userpage_v.js +++ b/files/assets/js/userpage_v.js @@ -24,7 +24,7 @@ function updateBux(mobile=false) { } function transferCoins(t, mobile=false) { - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); for(let el of document.getElementsByClassName('toggleable')) { el.classList.add('d-none'); @@ -48,7 +48,7 @@ function transferCoins(t, mobile=false) { } function transferBux(t, mobile=false) { - close_inline_speed_emoji_modal(); + close_inline_emoji_modal(); for(let el of document.getElementsByClassName('toggleable')) { el.classList.add('d-none'); diff --git a/files/templates/modals/emoji.html b/files/templates/modals/emoji.html index c158819b9..c655de235 100644 --- a/files/templates/modals/emoji.html +++ b/files/templates/modals/emoji.html @@ -72,5 +72,5 @@ - +