|
|
@@ -33,16 +33,20 @@ $userIcon = getUserIconPath();
|
|
|
var activeChat = "";
|
|
|
|
|
|
function showChat(id) {
|
|
|
-
|
|
|
- var x = document.getElementById("chatPop");
|
|
|
- if (x.style.visibility === "hidden") {
|
|
|
- x.style.visibility = "visible";
|
|
|
- } else if(activeChat == id){
|
|
|
- x.style.visibility = "hidden";
|
|
|
- }
|
|
|
- activeChat = id;
|
|
|
- refresh();
|
|
|
- document.getElementById("chatTarget").innerHTML = activeChat;
|
|
|
+ //alert(id + "," + activeChat);
|
|
|
+ if (activeChat == id){
|
|
|
+ $("#chatPop").hide();
|
|
|
+ activeChat = "";
|
|
|
+ }else{
|
|
|
+ $("#chatPop").show();
|
|
|
+ activeChat = id;
|
|
|
+ }
|
|
|
+ refresh();
|
|
|
+ document.getElementById("chatTarget").innerHTML = activeChat;
|
|
|
+ //Scroll to the bottom of the chat record
|
|
|
+ setTimeout(function(){
|
|
|
+ $('#chatHistory').scrollTop($('#chatHistory')[0].scrollHeight);
|
|
|
+ },500);
|
|
|
}
|
|
|
|
|
|
function update() {
|
|
|
@@ -60,11 +64,18 @@ function update() {
|
|
|
xhttp.open("POST", "getChatHistory.php", true);
|
|
|
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
|
xhttp.send("touser="+touser+"&fromuser="+fromuser+"&message="+myText);
|
|
|
+ //Scroll to the bottom of the chat record
|
|
|
+ setTimeout(function(){
|
|
|
+ $('#chatHistory').scrollTop($('#chatHistory')[0].scrollHeight);
|
|
|
+ },500);
|
|
|
+
|
|
|
}
|
|
|
document.getElementById("message").value = "";
|
|
|
|
|
|
var objDiv = document.getElementById("chatHistory");
|
|
|
objDiv.scrollTop = objDiv.scrollHeight;
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -87,6 +98,7 @@ function refresh() {
|
|
|
|
|
|
setInterval(refresh,1000);
|
|
|
|
|
|
+
|
|
|
</script>
|
|
|
<style>
|
|
|
.extrapadding{
|
|
|
@@ -125,7 +137,7 @@ setInterval(refresh,1000);
|
|
|
}
|
|
|
|
|
|
.chatroomWindow{
|
|
|
- visibility: hidden;
|
|
|
+ display:none;
|
|
|
width:320px !important;
|
|
|
height:500px !important;
|
|
|
padding:5px !important;
|
|
|
@@ -154,6 +166,20 @@ setInterval(refresh,1000);
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
+
|
|
|
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+<meta name="description" content="">
|
|
|
+<meta name="author" content="">
|
|
|
+<link rel="shortcut icon" href="favicon.png">
|
|
|
+
|
|
|
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
|
|
|
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
|
|
+
|
|
|
+<!-- Begin emoji-picker Stylesheets -->
|
|
|
+<link href="script/css/emoji.css" rel="stylesheet">
|
|
|
+<!-- End emoji-picker Stylesheets -->
|
|
|
+
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="ts tabbed menu extrapadding">
|
|
|
@@ -212,7 +238,7 @@ setInterval(refresh,1000);
|
|
|
foreach ($followerResult as $chat){
|
|
|
echo '
|
|
|
<div class="ts nopadding comments">
|
|
|
- <div class="comment selectable" id='.$chat["targetName"].' onClick="showChat(this.id)">
|
|
|
+ <div class="comment selectable">
|
|
|
<a class="avatar">
|
|
|
<img src="img/dummy.png">
|
|
|
</a>
|
|
|
@@ -222,7 +248,7 @@ setInterval(refresh,1000);
|
|
|
現時在線
|
|
|
</div>
|
|
|
<div class="middoted actions">
|
|
|
- <a>
|
|
|
+ <a id="'.$chat["targetName"].'" onClick="showChat(this.id);">
|
|
|
<i class="comment online icon"></i> 打開聊天室
|
|
|
</a>
|
|
|
</div>
|
|
|
@@ -321,14 +347,14 @@ setInterval(refresh,1000);
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-<div class="chatroomWindow" id="chatPop">
|
|
|
+<div class="chatroomWindow" id="chatPop" style="position:fixed;right:0px;bottom:0px;z-index:999;">
|
|
|
<script>
|
|
|
refresh();
|
|
|
</script>
|
|
|
<div id="chatHistory" class="chathistory"></div>
|
|
|
<form name="message" method="post">
|
|
|
<a id="chatTarget" class="author"></a><br/>
|
|
|
- <textarea rows="4" placeholder="Write something here to chat!" name="message" cols="40" class="typing" id="message"></textarea>
|
|
|
+ <p class="lead emoji-picker-container"><textarea rows="4" placeholder="Write something here to chat!" name="message" cols="40" class="typing" id="message" data-emojiable="true"></textarea></p>
|
|
|
<input type="button" onclick="update()" class="ts primary fluid button" value="Send">
|
|
|
</form>
|
|
|
</div>
|
