Цитировать сообщение свайпом
Привет мир!
Местный профессор написал вот такой скрипт, который прекрасно работает, вот он:
document.addEventListener("click", ({ target }) => {
if (target = target.closest('.qutes')) {
target = target.closest('.KIDE_msg_top')
let clon = target.cloneNode(true); // Делаем копию узла с потомками
clon.querySelectorAll(".KIDE_quote").forEach(el => el.remove()); // Удаляем из копии все span.KIDE_msg
let text = clon.textContent.trim(); // Берем текст из клона
if (text.length > 60) text = text.slice(0, 60) + '...'
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`); // ставляем текст в инпут
}
});
Код цитирует сообщения в чате. Очень захотелось научить телефон делать это свайпом, нашел такой код:
let start = null;
swipeElement.addEventListener("touchstart", function (event) {
if (event.touches.length === 1) {
start = event.touches.item(0).clientX;
} else {
start = null;
}
});
swipeElement.addEventListener("touchend", function (event) {
let offset = 100;
if (start) {
let end = event.changedTouches.item(0).clientX;
if (end < start - offset) {
console.log('Swipe right');
}
}
});
Но совместить их явно не для моих пока способностей, я долго пытался справиться самостоятельно, честно)))) :help: |
touch swap event
Ubivectel,
пробуй...
let touch_y, touch_x;
document.addEventListener("touchstart", (event) => {
let target = event.target;
if (target = target.closest('.qutes')) {
touch_y = event.changedTouches[event.changedTouches.length - 1].clientY;
touch_x = event.changedTouches[event.changedTouches.length - 1].clientX;
}
})
document.addEventListener("touchend", (event) => {
let target = event.target;
if (target = target.closest('.qutes')) {
let swap = (Math.abs(touch_y - event.changedTouches[event.changedTouches.length - 1].clientY) > 3 || Math.abs(touch_x - event.changedTouches[event.changedTouches.length - 1].clientX) > 3)
if (swap) {
target = target.closest('.KIDE_msg_top')
let clon = target.cloneNode(true); // Делаем копию узла с потомками
clon.querySelectorAll(".KIDE_quote").forEach(el => el.remove()); // Удаляем из копии все span.KIDE_msg
let text = clon.textContent.trim(); // Берем текст из клона
if (text.length > 60) text = text.slice(0, 60) + '...'
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`); // ставляем текст в инпут
}
}
})
|
Привет рони.
Чето пока не алё, опять поди туплю. Файл: https://noviy-kovcheg.ru/components/.../kidecustom.js в самом конце |
Ubivectel,
поставь скрипт отдельно там же, но действительно в конце , но не внутри чего-то. удалять тоже ничего не нужно. |
Так?
|
Ubivectel,
да. |
Полагаю все же внутри этого надо?
jQuery(function () { }); |
Цитата:
|
Цитата:
|
Аааа, а я думаю, что оно иногда вдруг срабатывает )))))))))))))
Не, хотелось бы свайп по блоку, но уже сообразил как это поменять, заработало, для полного марафета визуализировать бы как-то, думаю самое правильное будет при свайпе добавлять на пол секунды класс, скажем swiped. наверное это и сам асилю, но сегодня так изломал голову... ) |
Блоку .KIDE_msg_top имею ввиду
|
Цитата:
let touch_yy, touch_xx;
document.addEventListener("touchstart", (event) => {
let target = event.target;
if (target = target.closest('.KIDE_quote')) {
touch_yy = event.changedTouches[event.changedTouches.length - 1].clientY;
touch_xx = event.changedTouches[event.changedTouches.length - 1].clientX;
}
})
document.addEventListener("touchend", (event) => {
let target = event.target;
if (target = target.closest('.KIDE_quote')) {
let swap = (Math.abs(touch_yy - event.changedTouches[event.changedTouches.length - 1].clientY) > 30 || Math.abs(touch_xx - event.changedTouches[event.changedTouches.length - 1].clientX) > 30)
if (swap) {
target = target.closest('.KIDE_msg_top')
let clon = target.cloneNode(true); // Делаем копию узла с потомками
clon.querySelectorAll(".KIDE_quote").forEach(el => el.remove()); // Удаляем из копии все span.KIDE_msg
let text = clon.textContent.trim(); // Берем текст из клона
if (text.length > 60) text = text.slice(0, 60) + '...'
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`); // ставляем текст в инпут
}
}
})
|
Цитата:
|
Ubivectel,
ок!:victory: |
Что-то бы такое еще добавить:
if (end < start - offset) {
console.log('Swipe right');
swipeElement.classList.add('swiped');
setTimeout(function () {
swipeElement.classList.remove('swiped');
}, 300);
}
Что бы было не только функционально, но и красиво |
Ubivectel,
как вариант...
let touch_yy, touch_xx;
document.addEventListener("touchstart", (event) => {
let target = event.target;
if (target = target.closest('.KIDE_quote')) {
touch_yy = event.changedTouches[event.changedTouches.length - 1].clientY;
touch_xx = event.changedTouches[event.changedTouches.length - 1].clientX;
}
})
document.addEventListener("touchend", (event) => {
let target = event.target;
if (target = target.closest('.KIDE_quote')) {
let swap = (Math.abs(touch_yy - event.changedTouches[event.changedTouches.length - 1].clientY) > 30 || Math.abs(touch_xx - event.changedTouches[event.changedTouches.length - 1].clientX) > 30)
if (swap) {
target = target.closest('.KIDE_msg_top');
target.classList.add('swiped');
setTimeout(function () {
target.classList.remove('swiped');
}, 300);
let clon = target.cloneNode(true); // Делаем копию узла с потомками
clon.querySelectorAll(".KIDE_quote").forEach(el => el.remove()); // Удаляем из копии все span.KIDE_msg
let text = clon.textContent.trim(); // Берем текст из клона
if (text.length > 60) text = text.slice(0, 60) + '...'
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`); // ставляем текст в инпут
}
}
})
|
Добавил, что-то пошло не так
|
Ubivectel,
css добавил? .KIDE_msg_top.swiped{ ...} |
Ну вот сейчас добавил css, но класс и в инспекторе не появляется, и цитаты не вставляются :(
|
Ubivectel,
}, 300); время увеличить попробуй |
Ubivectel,
работает. |
Ubivectel,
.KIDE_msg_top.swiped .KIDE_quote{ color : red} |
Поигрался со временем, когда выставил 2000 мс сработало пару раз через раз. не понимаю, сейчас опять не реагирует
|
работало уже при 600 всё
|
Ubivectel,
30 замени на 3 - let swap = (Math.abs(touch_yy - event.changedTouches[event.changedTouches.length - 1].clientY) > 30 || Math.abs(touch_xx - event.changedTouches[event.changedTouches.length - 1].clientX) > 30) |
Да, при 600 тоже несколько раз срабатывало, но сейчас опять нет
|
Цитата:
|
Закономерность заметил, цитируются только сообщения содержащие цитаты
|
if (target = target.closest('
верни .KIDE_msg_top |
Ubivectel,
в двух местах |
Да, заработало, для полного счастья остается понять, как поменять направление свайпа, и его длину/продолжительность, а там уже останется настроить и дописать css
|
.clientX) > 3) и .clientY) > 3 продолжительность как я понял?
|
Цитата:
let swap = (Math.abs(touch_yy - event.changedTouches[event.changedTouches.length - 1].clientY) > 30 || Math.abs(touch_xx - event.changedTouches[event.changedTouches.length - 1].clientX) > 30) типа ... let swap = touch_xx - event.changedTouches[event.changedTouches.length - 1].clientX < -20; |
рони,
Math.abs - направление неважно |
Уразумел, спасибо рони, мне кажется ты все же знаешь какой-то никому неизвестный JS )))) Пошел ковырять настройки :thanks:
|
| Часовой пояс GMT +3, время: 01:50. |