Вставить цитату
Привет Мир!
Пытаюсь добавить чату возможность вставки цитат сообщений. Нюансов очень много но по порядку. Код формирующий сообщение:
kide.insertNewContent = function (uid, name, text, url, ti, color, rango, id, sesion, yo, hora, img) {
if (text.replace(/ /g, "") != "") {
let c = color.length > 0 ? 'style="color:#' + color + '" class="KIDE_msg"' : 'class="KIDE_dc_' + this.rangos[rango] + ' KIDE_msg"';
let div = this.$('KIDE_msgs');
let nodo = document.createElement('div');
let insertO = this.$("KIDE_output");
let s_hora;
nodo.setAttribute('id', 'KIDE_id_' + id);
nodo.setAttribute('class', 'KIDE_msg_top');
if (this.show_hour)
s_hora = '<span title="' + ti + '" class="KIDE_msg_hour">' + hora + '</span> ';
else
s_hora = '';
let tmp = '';
if (img && kide.show_avatar) {
let style = kide.avatar_maxheight ? 'style="max-height:' + kide.avatar_maxheight + '" ' : '';
tmp = '<img ' + style + 'src="' + img + '" class="KIDE_icono" alt="" /> ';
}
onclick = "kide.insertSmile(\''+name+\', ')"; //mod
nodo.innerHTML = s_hora + tmp + '<span style="cursor: pointer" class="KIDE_' + this.rangos[rango] + '" onclick="kide.insertSmile(\'' + name + ', \')" oncontextmenu="event.preventDefault();kide.mensaje(\'' + name + '\', ' + uid + ', ' + id + ', \'' + url + '\', \'' + ti + '\', \'' + sesion + '\', ' + rango + ', \'' + img + '\')">' + name + '</span>: <span ' + c + '>' + this.filter_smilies(text) + '</span>';
if (this.order == 'bottom') {
this.insertAfter(nodo, insertO.lastChild);
} else
insertO.insertBefore(nodo, insertO.firstChild);
if (!yo && this.sound == 1)
this.play_msg_sound();
this.ajustar_scroll();
}
};
Попытался добавить переменную с айди кнопки которая которая будет вставлять текст:
let bquote = document.querySelector('#insertmsg');
добавить к ней событие: bquote.onclick = "kide.insertSmile(\''+nodо+\')"; Разумеется не заработало. Добавил функцию меняющую класс переменной "nodo"
nodo.onclick = function() {
nodo.classList.toggle('selmsg');}
Работает. То есть сейчас Сейчас для начала нужно добавить строку которая будет по клику на элемент #insertmsg с помощью вотэтововот: kide.insertSmile добавлять данные из переменной nodo когда ей присвоен класс selmsg Я еще сам четко в голове не оформил, как это все в итоге будет выглядеть, но с чего-то надо начинать ))) |
Ubivectel,
document.addEventListener("click", ({ target }) => {
if (target = target.closest('.KIDE_msg_hour')) {
target = target.closest('.KIDE_msg_top')
let text = target.textContent;
kide.insertSmile(text)
}
});
|
Вообще не понимаю, а как его связать с кнопкой #insertmsg ?
|
Цитата:
|
Едрит-мадрит, у меня порой ощущение, что рони знает какой-то секретный яваскрипт, известный только ему ))))))))) куда хоть это вставить, и как пользоваться?
|
Ubivectel,
вставить куда угодно, перезагрузиться, и жмакать на время в строке. |
Ubivectel,
document.addEventListener("click", ({ target }) => {
if (target = target.closest('.KIDE_msg_hour')) {
target = target.closest('.KIDE_msg_top')
let text = target.textContent;
kide.insertSmile(`[QUOTE]${text}[/QUOTE]`)// добавить теги
}
});
filter_smilies: function(s) {
s = " " + s + " ";
for (let i = 0; i < this.smilies.length; i++) {
s = s.replace(" " + this.smilies[i][0], '<img alt="' + this.smilies[i][0] + '" title="' + this.smilies[i][0] + '" src="' + this.smilies[i][1] + '" class="KIDE_icono" />');
s = s.replace(" " + this.smilies[i][0].toLowerCase(), '<img alt="' + this.smilies[i][0] + '" title="' + this.smilies[i][0] + '" src="' + this.smilies[i][1] + '" class=KIDE_icono" />')
}
/* добавить замену*/
let reg = /\[QUOTE\](.+)\[\/QUOTE\]/;
while (reg.test(s)) {
s = s.replace(reg, `<span class="KIDE_quote">$1</span>`)
};
/* добавить */
return s;
},
и в css добавить оформление
.KIDE_quote {
color: #8B4513;
}
|
Все четко по инструкции, однако что-то не добавляет...
Вставляет без тегов |
Сорри, моск уже не работает, Ctrl + S не нажал в редакторе )
|
Ubivectel,
не вижу изменений в /kide.js там по прежнему kide.insertSmile(text) вместо
kide.insertSmile(`[QUOTE]${text}[/QUOTE]`)
|
Цитата:
|
Ubivectel,
filter_smilies это в /base.js строка примерно 324 |
Ubivectel,
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`)
document.addEventListener("click", ({ target }) => {
if (target = target.closest('.KIDE_msg_hour')) {
target = target.closest('.KIDE_msg_top')
let text = target.textContent;
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`)
}
});
|
Спасибо рони, все окончательно заработало именно так, как хотелось! :)
|
Ubivectel,
:dance: |
Ubivectel,
добавить вопросительный знак let reg = /\[QUOTE\](.+?)\[\/QUOTE\]/; |
Заменил строку, пока не понял, какие должны быть изменения
|
<div id="KIDE_output">
<?php
if(!count($this->msgs))
echo '<span></span>';
else{
foreach($this->msgs as $r){
$tiempo = gmdate($this->fecha, $r->time + $this->user->gmt*3600);
echo '<div id="KIDE_id_'.$r->id.'" class="KIDE_msg_top">';
if($this->show_hour) echo '<span class="KIDE_msg_hour"> '.gmdate($this->formato_hora, $r->time + $this->user->gmt*3600).'</span> ';
echo '<span style="cursor: pointer" title="'.$tiempo.'" oncontextmenu="event.preventDefault();kide.mensaje(\''.addslashes($r->name).'\','.$r->userid.','.$r->id.',\''.$r->url.'\',\''.$tiempo.'\',\''.$r->sesion.'\','.$r->rango.',\''.$r->img.'\')" class="'.KideHelper::getRango($r->rango, 'KIDE_').'">';
echo '<span style="cursor: pointer" title="'.$tiempo.'" onclick="kide.insertSmile(\''.addslashes($r->name), ', '.'\')" class="'.KideHelper::getRango($r->rango, 'KIDE_').'">';
echo $r->name;
echo "</span>";
$c = $r->color === '' ? 'class="'.KideHelper::getRango($r->rango, 'KIDE_dc_').' KIDE_msg"' : 'style="color:#'.$r->color.'"';
echo ': <span '.$c.'>'.$r->text.'</span></div>';
}
}
?>
</div>
<?php e
вот, именно это формирует то, что видим входя в чат, кстати тут уже куча твоих изменений ))) |
Ubivectel,
увы мне, строку 20 надо править, нужен php-специалист, будем js костыль делать. заменить внизу base.js
kide.onLoad(function() {
document.querySelectorAll("#KIDE_output .KIDE_msg_top").forEach(el => {
let html = el.innerHTML;
let reg = /\[QUOTE\](.+?)\[\/QUOTE\]/;
while (reg.test(html)) {
html = html.replace(reg, `<span class="KIDE_quote">$1</span>`)
}
el.innerHTML = html;
});
kide.avisar.handleVisibility();
let localColor = localStorage.getItem("localColor");
if (localColor) {
kide.color = localColor;
kide.save_options();
};
}, function() {});
|
Ubivectel,
костыль для истории
<table width="100%" border="1" class="castom_history">
<?php foreach ($this->msgs as $r) : ?>
<tr>
<td class="KIDE_history_td"><?php echo gmdate($this->fecha, $r->time + $this->user->gmt*3600); ?></td>
<td class="KIDE_history_td">
<?php $url = kideLinks::getUserLink($r->userid); ?>
<?php if ($url) : ?>
<a href="/<?php echo $url; ?>">
<?php endif; ?>
<span class="<?php echo KideHelper::getRango($r->rango, 'KIDE_'); ?>">
<?php echo $r->name; ?>
</span>
<?php if ($url) : ?>
</a>
<?php endif; ?>
</td>
<td <?php echo $r->color ? 'style="color:#'.$r->color.'"' : 'class="'.KideHelper::getRango($r->rango, 'KIDE_dc_').'"'; ?>>
<?php echo $r->text; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<script>
document.querySelectorAll(".castom_history td").forEach(td => {
let html = td.innerHTML;
let reg = /\[QUOTE\](.+)\[\/QUOTE\]/;
while (reg.test(html)) {
html = html.replace(reg, `<span class="KIDE_quote">$1</span>`)
}
td.innerHTML = html;
})
</script
|
Ubivectel,
<?php endforeach; ?> </table> <table width="100%" border="1" class="castom_history">.php..</table> это убрать <script> document.querySelectorAll(".castom_history td").forEach(td => { let html = td.innerHTML; let reg = /\[QUOTE\](.+)\[\/QUOTE\]/; while (reg.test(html)) { html = html.replace(reg, `<span class="KIDE_quote">$1</span>`) } td.innerHTML = html; }) сюда надо перенести </script> <div align="center" style="font-size: 24px;margin: 10px 0px 0px 0px; font-family: 'Jura', sans-serif; text-shadow: 1px 1px 1px white;"><?php echo $this->pags; ?></div> <div style="font-family: Zrnic Cyr Normal; font-size: 20px; padding: 10px 0 10px 0"><a class="vchat" href="/<?php echo JRoute::_(KIDE_URL."&view=kide"); ?>"><?php echo JText::_("COM_KIDE_VOLVER"); ?></a></div> </script> |
Цитата:
|
Ubivectel,
с добрым утром! ничего не трогай, ты уже убрал всё что нужно!!! :nono: |
Ага, приветик :victory: , фуф, вздохнул спокойно, сегодня на денек хочу моск на отдых )
|
Цитата:
|
Типа того, и самые дебильные ролики смотреть)))))))))))
|
Пириуэт.
Таки работает код на отлично, но одна проблемка есть. При ответе на сообщение с цитатой, код хватает цитату тоже, соответственно при ответе на это сообщение, цитата содержит уже кучу лишнего текста. Короче при нескольких ответов подряд получается дикое нагромождение из сообщений. Если я правильно понимаю, нужно научить этот скрипт:
document.addEventListener("click", ({ target }) => {
if (target = target.closest('.KIDE_msg_hour')) {
target = target.closest('.KIDE_msg_top')
let text = target.textContent;
kide.insertSmile(text)
}
});
При цитировании <span style="color:#ff0000" class="KIDE_msg"> <span class="KIDE_quote">цитата</span><br>текст сообщения</span> Игнорировать содержание тега span с классом "KIDE_quote" :help: |
Так можно
document.addEventListener("click", ({ target }) => {
if (target = target.closest('.KIDE_msg_hour')) {
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; // Берем текст из клона
kide.insertSmile(text)
}
});
|
Для цитат лучше использовать семантические элементы <q> или <blockquote>
|
Все заработало как надо, спасибо!
Цитата:
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; // Берем текст из клона kide.insertSmile(` Цитата:
} }); Вот так оно сейчас. И все работает шЕкарно ))) |
Ubivectel,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Еще бы ограничить кол-во символов в цитате, меня хватило только на такое:
(function(){
var cut = document.getElementsByClassName('KIDE_quote');
for( var i = 0; i < cut.length; i++ ){
cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
}
})();
Но оно во первых не работает, а во вторых наверное дико создавать для этого отдельную функцию... |
Цитата:
Используя свойства Css max-width/max-height. Что бы вставить многоточие, вместо отрезанного текста используют text-overflow: ellipsis; |
С этого начал разумеется. Но там нагромождение тегов с заморочными стилями. А text-overflow: ellipsis;требует display: inline-block. На крайняк так и сделаю конечно, но на JS было бы в данном случае более красивым решением.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div>
<div class="KIDE_quote">Lorem ipsum dolor sit amet.</div>
<div class="KIDE_quote">Est laboriosam ipsam numquam tempore.</div>
<div class="KIDE_quote">Quos, porro consequatur itaque at?</div>
<div class="KIDE_quote">Dolorum, quis recusandae enim minus!</div>
<div class="KIDE_quote">A, nisi odio id distinctio.</div>
<div class="KIDE_quote">Unde, explicabo amet officia placeat.</div>
<div class="KIDE_quote">Iure assumenda ad labore deserunt?</div>
<div class="KIDE_quote">Praesentium, deserunt eaque accusantium assumenda.</div>
<div class="KIDE_quote">Fuga, odio incidunt accusantium perspiciatis.</div>
<div class="KIDE_quote">Repudiandae labore eligendi perspiciatis alias?</div>
</div>
<script>
(function() {
var cut = document.getElementsByClassName('KIDE_quote');
for (var i = 0; i < cut.length; i++) {
cut[i].innerText = cut[i].innerText.slice(0, 20) + '...';
}
})();
</script>
</body>
</html>
|
Мммм.. то есть должно работать? Я вставлял вот так:
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; // Берем текст из клона
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`);
}
});
(function(){
var cut = document.getElementsByClassName('KIDE_quote');
for( var i = 0; i < cut.length; i++ ){
cut[i].innerText = cut[i].innerText.slice(0,20) + '...';
}
})();
Не работает
|
Цитата:
|
Ты код этого чата давно лучше чем я знаешь ))))
В файле https://noviy-kovcheg.ru/components/com_kide/js/base.js строка 1196 |
Ubivectel,
я могу только догадываться, что ты хочешь сделать, поэтому пока подсказать не могу))). |
Ubivectel,
ищи функцию которая выводит <span class="KIDE_quote"> и это не kide.onLoad. а пока так вместо #36
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; // Берем текст из клона
if(text.length > 20) text = text.slice(0,17) + '...'
kide.insertSmile(`[QUOTE]${text}[/QUOTE]\n`);
}
});
|
| Часовой пояс GMT +3, время: 14:52. |