forked from rDrama/rDrama
speed -> inline
parent
a0a7c7e9c5
commit
d453f8c811
|
@ -6564,7 +6564,7 @@ g {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#speed-carot-modal
|
#inline-carot-modal
|
||||||
{
|
{
|
||||||
background-color: var(--gray-700);
|
background-color: var(--gray-700);
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
|
@ -6576,29 +6576,29 @@ g {
|
||||||
z-index: 1000000001;
|
z-index: 1000000001;
|
||||||
}
|
}
|
||||||
|
|
||||||
#speed-carot-modal .speed-modal-option
|
#inline-carot-modal .inline-modal-option
|
||||||
{
|
{
|
||||||
border-bottom: 1px solid #606060;
|
border-bottom: 1px solid #606060;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#speed-carot-modal .speed-modal-option:hover,
|
#inline-carot-modal .inline-modal-option:hover,
|
||||||
#speed-carot-modal .speed-modal-option:focus,
|
#inline-carot-modal .inline-modal-option:focus,
|
||||||
#speed-carot-modal .speed-modal-option.selected
|
#inline-carot-modal .inline-modal-option.selected
|
||||||
{
|
{
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#speed-carot-modal .speed-modal-image
|
#inline-carot-modal .inline-modal-image
|
||||||
{
|
{
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#speed-carot-modal .speed-modal-option span
|
#inline-carot-modal .inline-modal-option span
|
||||||
{
|
{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -6711,7 +6711,7 @@ div.markdown {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
#speed-carot-modal .speed-modal-image
|
#inline-carot-modal .inline-modal-image
|
||||||
{
|
{
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
|
@ -5,11 +5,11 @@
|
||||||
--background: 34, 34, 34;
|
--background: 34, 34, 34;
|
||||||
}
|
}
|
||||||
|
|
||||||
#speed-carot-modal .speed-modal-option {
|
#inline-carot-modal .inline-modal-option {
|
||||||
background-color: rgb(var(--background));
|
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;
|
background-color: #444444;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
background: rgba(var(--background), 0.9) !important;
|
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;
|
background-color: rgb(var(--background)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -229,7 +229,7 @@ document.addEventListener("click", function (e) {
|
||||||
|
|
||||||
if (element.dataset.toggleelement) {
|
if (element.dataset.toggleelement) {
|
||||||
if (element.dataset.toggleelement.startsWith('#reply-'))
|
if (element.dataset.toggleelement.startsWith('#reply-'))
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
|
|
||||||
const toggling = document.querySelector(element.dataset.toggleelement)
|
const toggling = document.querySelector(element.dataset.toggleelement)
|
||||||
const attr = element.dataset.toggleattr;
|
const attr = element.dataset.toggleattr;
|
||||||
|
|
|
@ -98,7 +98,7 @@ function toggleEdit(id){
|
||||||
charLimit(box.id, 'charcount-edit-' + 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) {
|
function post_reply(id) {
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
|
|
||||||
const btn = document.getElementById(`save-reply-to-${id}`)
|
const btn = document.getElementById(`save-reply-to-${id}`)
|
||||||
btn.disabled = true;
|
btn.disabled = true;
|
||||||
|
@ -257,7 +257,7 @@ function comment_edit(id){
|
||||||
}
|
}
|
||||||
|
|
||||||
function post_comment(fullname, hide){
|
function post_comment(fullname, hide){
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
|
|
||||||
const btn = document.getElementById('save-reply-to-'+fullname)
|
const btn = document.getElementById('save-reply-to-'+fullname)
|
||||||
const ta = document.getElementById('reply-form-body-'+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')
|
document.getElementById(`reply-to-${fullname}`).classList.add('d-none')
|
||||||
remove_dialog();
|
remove_dialog();
|
||||||
restore_reply_buttons(fullname)
|
restore_reply_buttons(fullname)
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
}
|
}
|
||||||
|
|
|
@ -214,7 +214,7 @@ function bs_trigger(e) {
|
||||||
return bootstrap.Tooltip.getOrCreateInstance(element);
|
return bootstrap.Tooltip.getOrCreateInstance(element);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (typeof update_speed_emoji_modal == 'function') {
|
if (typeof update_inline_emoji_modal == 'function') {
|
||||||
insertGhostDivs(e)
|
insertGhostDivs(e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -305,8 +305,8 @@ function reload() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendFormXHR(form, extraActionsOnSuccess) {
|
function sendFormXHR(form, extraActionsOnSuccess) {
|
||||||
if (typeof close_inline_speed_emoji_modal === "function") {
|
if (typeof close_inline_emoji_modal === "function") {
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
}
|
}
|
||||||
|
|
||||||
const t = form.querySelector('[type="submit"]')
|
const t = form.querySelector('[type="submit"]')
|
||||||
|
@ -702,14 +702,14 @@ if (screen_width < 768) {
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('show.bs.modal', () => {
|
document.addEventListener('show.bs.modal', () => {
|
||||||
if (typeof close_inline_speed_emoji_modal === "function") {
|
if (typeof close_inline_emoji_modal === "function") {
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('hide.bs.modal', () => {
|
document.addEventListener('hide.bs.modal', () => {
|
||||||
if (typeof close_inline_speed_emoji_modal === "function") {
|
if (typeof close_inline_emoji_modal === "function") {
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@ function togglePostEdit(id) {
|
||||||
autoExpand(box);
|
autoExpand(box);
|
||||||
}
|
}
|
||||||
|
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
};
|
};
|
||||||
|
|
||||||
document.getElementById('post-edit-title').addEventListener('keydown', (e) => {
|
document.getElementById('post-edit-title').addEventListener('keydown', (e) => {
|
||||||
|
|
|
@ -28,13 +28,13 @@ function update_ghost_div_textarea(text)
|
||||||
|
|
||||||
// Used for anything where a user is typing, specifically for the emoji modal
|
// Used for anything where a user is typing, specifically for the emoji modal
|
||||||
// Just leave it global, I don't care
|
// Just leave it global, I don't care
|
||||||
let speed_carot_modal = document.createElement("div");
|
let inline_carot_modal = document.createElement("div");
|
||||||
speed_carot_modal.id = "speed-carot-modal";
|
inline_carot_modal.id = "inline-carot-modal";
|
||||||
speed_carot_modal.style.position = "absolute";
|
inline_carot_modal.style.position = "absolute";
|
||||||
speed_carot_modal.style.left = "0px";
|
inline_carot_modal.style.left = "0px";
|
||||||
speed_carot_modal.style.top = "0px";
|
inline_carot_modal.style.top = "0px";
|
||||||
speed_carot_modal.style.display = "none";
|
inline_carot_modal.style.display = "none";
|
||||||
document.body.appendChild(speed_carot_modal);
|
document.body.appendChild(inline_carot_modal);
|
||||||
|
|
||||||
let e
|
let e
|
||||||
|
|
||||||
|
@ -48,24 +48,24 @@ function curr_word_is_emoji()
|
||||||
current_word.charAt(current_word.length-1) != ":";
|
current_word.charAt(current_word.length-1) != ":";
|
||||||
}
|
}
|
||||||
|
|
||||||
function close_inline_speed_emoji_modal() {
|
function close_inline_emoji_modal() {
|
||||||
selecting = false;
|
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;
|
selecting = true;
|
||||||
|
|
||||||
if (!results || results.size === 0)
|
if (!results || results.size === 0)
|
||||||
{
|
{
|
||||||
speed_carot_modal.style.display = "none";
|
inline_carot_modal.style.display = "none";
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
emoji_index = 0;
|
emoji_index = 0;
|
||||||
speed_carot_modal.scrollTop = 0;
|
inline_carot_modal.scrollTop = 0;
|
||||||
speed_carot_modal.innerHTML = "";
|
inline_carot_modal.innerHTML = "";
|
||||||
const MAXXX = 50;
|
const MAXXX = 50;
|
||||||
// Not sure why the results is a Set... but oh well
|
// Not sure why the results is a Set... but oh well
|
||||||
let i = 0;
|
let i = 0;
|
||||||
|
@ -75,10 +75,10 @@ function populate_speed_emoji_modal(results, textbox)
|
||||||
|
|
||||||
if (i++ > MAXXX) return i;
|
if (i++ > MAXXX) return i;
|
||||||
let emoji_option = document.createElement("div");
|
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;
|
emoji_option.tabIndex = 0;
|
||||||
let emoji_option_img = document.createElement("img");
|
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
|
// This is a bit
|
||||||
emoji_option_img.src = `${SITE_FULL_IMAGES}/e/${name}.webp`
|
emoji_option_img.src = `${SITE_FULL_IMAGES}/e/${name}.webp`
|
||||||
let emoji_option_text = document.createElement("span");
|
let emoji_option_text = document.createElement("span");
|
||||||
|
@ -96,7 +96,7 @@ function populate_speed_emoji_modal(results, textbox)
|
||||||
if (current_word.includes("!")) name = `!${name}`
|
if (current_word.includes("!")) name = `!${name}`
|
||||||
|
|
||||||
emoji_option.addEventListener('click', () => {
|
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.value = textbox.value.replace(new RegExp(current_word+"(?=\\s|$)", "gi"), `:${name}: `)
|
||||||
textbox.focus()
|
textbox.focus()
|
||||||
if (typeof markdown === "function" && textbox.dataset.preview) {
|
if (typeof markdown === "function" && textbox.dataset.preview) {
|
||||||
|
@ -106,14 +106,14 @@ function populate_speed_emoji_modal(results, textbox)
|
||||||
// Pack
|
// Pack
|
||||||
emoji_option.appendChild(emoji_option_img);
|
emoji_option.appendChild(emoji_option_img);
|
||||||
emoji_option.appendChild(emoji_option_text);
|
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";
|
if (i === 0) inline_carot_modal.style.display = "none";
|
||||||
else speed_carot_modal.style.display = "initial";
|
else inline_carot_modal.style.display = "initial";
|
||||||
return i;
|
return i;
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_speed_emoji_modal(event)
|
function update_inline_emoji_modal(event)
|
||||||
{
|
{
|
||||||
const box_coords = update_ghost_div_textarea(event.target);
|
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.x += window.scrollX;
|
||||||
modal_pos.y += window.scrollY;
|
modal_pos.y += window.scrollY;
|
||||||
|
|
||||||
speed_carot_modal.style.display = "initial";
|
inline_carot_modal.style.display = "initial";
|
||||||
speed_carot_modal.style.left = box_coords.x - 30 + "px";
|
inline_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.top = modal_pos.y + box_coords.y + 14 + "px";
|
||||||
|
|
||||||
// Do the search (and do something with it)
|
// Do the search (and do something with it)
|
||||||
const resultSet = emojisSearchDictionary.completeSearch(current_word.substring(1).replace(/[#!]/g, ""));
|
const resultSet = emojisSearchDictionary.completeSearch(current_word.substring(1).replace(/[#!]/g, ""));
|
||||||
|
|
||||||
const found = globalEmojis.filter(i => resultSet.has(i.name));
|
const found = globalEmojis.filter(i => resultSet.has(i.name));
|
||||||
|
|
||||||
populate_speed_emoji_modal(found, event.target);
|
populate_inline_emoji_modal(found, event.target);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
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;
|
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;
|
if (!select_items || !curr_word_is_emoji()) return;
|
||||||
|
|
||||||
const modal_keybinds = {
|
const modal_keybinds = {
|
||||||
|
@ -203,8 +203,8 @@ function insertGhostDivs(element) {
|
||||||
ghostdiv.style.display = "none";
|
ghostdiv.style.display = "none";
|
||||||
i.after(ghostdiv);
|
i.after(ghostdiv);
|
||||||
}
|
}
|
||||||
i.addEventListener('input', update_speed_emoji_modal, false);
|
i.addEventListener('input', update_inline_emoji_modal, false);
|
||||||
i.addEventListener('keydown', speed_carot_navigate, false);
|
i.addEventListener('keydown', inline_carot_navigate, false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,7 +24,7 @@ function updateBux(mobile=false) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function transferCoins(t, mobile=false) {
|
function transferCoins(t, mobile=false) {
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
|
|
||||||
for(let el of document.getElementsByClassName('toggleable')) {
|
for(let el of document.getElementsByClassName('toggleable')) {
|
||||||
el.classList.add('d-none');
|
el.classList.add('d-none');
|
||||||
|
@ -48,7 +48,7 @@ function transferCoins(t, mobile=false) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function transferBux(t, mobile=false) {
|
function transferBux(t, mobile=false) {
|
||||||
close_inline_speed_emoji_modal();
|
close_inline_emoji_modal();
|
||||||
|
|
||||||
for(let el of document.getElementsByClassName('toggleable')) {
|
for(let el of document.getElementsByClassName('toggleable')) {
|
||||||
el.classList.add('d-none');
|
el.classList.add('d-none');
|
||||||
|
|
|
@ -72,5 +72,5 @@
|
||||||
|
|
||||||
<input hidden id="emoji_params" value="?n={{emoji_count()}}&show_nsfw={{g.show_nsfw}}">
|
<input hidden id="emoji_params" value="?n={{emoji_count()}}&show_nsfw={{g.show_nsfw}}">
|
||||||
<script defer src="{{'js/emoji_modal/search_dictionary.js' | asset}}"></script>
|
<script defer src="{{'js/emoji_modal/search_dictionary.js' | asset}}"></script>
|
||||||
<script defer src="{{'js/emoji_modal/speed_emoji_modal.js' | asset}}"></script>
|
<script defer src="{{'js/emoji_modal/inline_emoji_modal.js' | asset}}"></script>
|
||||||
<script defer src="{{'js/emoji_modal/emoji_modal.js' | asset}}"></script>
|
<script defer src="{{'js/emoji_modal/emoji_modal.js' | asset}}"></script>
|
||||||
|
|
Loading…
Reference in New Issue