zitate-zum-chat-hinzufugen.php
Quell Code
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
button{
width:22px;
height:22px;
border:1px solid red;
border-radius:50%;
}
#chat{
margin-top:50px;
}
.text::selection{
background:blue;
}
.messages{
border:1px solid black;
display:flex;
margin:10px 0;
padding:5px;
flex-direction:column;
}
.oben{
display:flex;
}
.chat_zitate:hover:after{
content:'kompletten Text makieren für Zitat';
display:block;
width:200px;
background:black;
color:white;
top:-50px;
position:relative;
}
.chat_zitate:hover{
cursor:pointer;
}
textarea,#senden{
width:60%;
margin-left:20%;
margin-top:20px;
}
.zit{
background:grey;
border:2px solid orange;
display:block;
}
h5{
margin:0;
padding:0;
}
</style>
</head>
<body>
<h1>Chat</h1>
<input type="hidden" id="chat1">
<input type="hidden" id="chat2">
<div id="chat">
<div class="messages">
<div class="oben">
<button class="chat_zitate">Z</button><div class="user" id="user-peter">Peter</div>
</div>
<div class="unten">
<div class="text">hallo Werner alles klar</div>
</div>
</div>
<div class="messages">
<div class="oben">
<button class="chat_zitate">Z</button><div class="user" id="user-werner">Werner</div>
</div>
<div class="unten">
<div class="text">Ja Peter alles bestens</div>
</div>
</div>
</div>
<textarea id="text_area" ></textarea>
<input type="button" id="senden" value="senden">
<input type="button" id="php" value="Php Script simulieren">
<script>
$('#chat1').val($('#chat').html());
function start(){
$('.messages .text').mousedown(function(e){
user=$(this).parent().parent().children().children().next().html();
dest1 = e.pageX;
p=0;
// console.log('START'+dest1);
$('.messages .text').on('click',function(r){
var dest2 = r.pageX;
//console.log('ENDE'+dest2);
var jj=dest1-dest2;
if(jj<=3){
console.log('Zu wennig makiert');
}
if(jj>=4){
console.log('Fired= Minimum: '+dest1+'Ist: '+jj+' Maximum: '+dest2)
tool()
}else{
}
});
function tool(){
if (document.getSelection){
txt = document.getSelection();
toolaus(txt);
}else if (document.selection){
txt = document.selection.createRange().text;
toolaus(txt);
}else{}
function toolaus(txt){
p++;
if(p==1){
var vorhanden_inhalt=$('#text_area').val();
$('#text_area').val(vorhanden_inhalt+' [ZITAT='+user+']'+txt+'[/ZITAT]');
$('#chat2').val(vorhanden_inhalt+' '+vorhanden_inhalt+'<span class="zit"><h5> Zitat von '+user+'</h5>'+txt+'</span>');
}
//document.execCommand("copy");
}
}
});
$('.chat_zitate').click(function(){
user=$(this).next().html();
txt=$(this).parent().next().children().html();
$(this).parent().next().children().css('background','red')
var vorhanden_inhalt=$('#text_area').val();
$('#text_area').val(vorhanden_inhalt+' [ZITAT='+user+']'+txt+'[/ZITAT]');
$('#chat2').val(vorhanden_inhalt+'<span class="zit"><h5> Zitat von '+user+'</h5>'+txt+'</span>');
});
}
start();
$('#senden').click(function(){
$('.text').css('background','none');
var inhalttextarea=$('#text_area').val();
var inhalttextarea1=$('#chat2').val();
$('#text_area').val('');
var chatin=$('#chat').html();
$('#chat').html(chatin+"<div class='messages'><div class= 'oben'> <button class='chat_zitate'>Z</button><div class='user' id='user-basti'>basti</div></div><div class='unten'><div class='text'>"+inhalttextarea+"</div></div></div>");
var chatin1=$('#chat1').val();
$('#chat1').val(chatin1+"<div class='messages'><div class= 'oben'> <button class='chat_zitate'>Z</button><div class='user' id='user-basti'>basti</div></div><div class='unten'><div class='text'>"+inhalttextarea1+"</div></div></div>");
setTimeout(function(){
start();
},2500);
})
$('#php').click(function(){
$('#chat').html($('#chat1').val());
start();
})
</script>
</body>
</html>