Show Posts
16
HTML & templates / Re: private messenger chat
« on: December 10, 2015, 09:34:07 PM »
Hi dj, but also think: what chat needed in HFS? Needed chat where users can open chat page (or see in left panel), see that other users or anonymous saying, say something if needed. Users need to be highlighted (like v3.1), so all people can understand this user staying in server or not (one-time random user), PM is also important, it the way saying to server admin some information, that need to transmit (because user don't know how to contact admin by mail, or messenger or other site) and admin can reading his special history file (chat_admin.txt for example). Or just chatting between anon→user or user→user.
About template. I think need to use template rather, than chat.htm, because in template you can use HFS logic. For example (also important note) user nick. If user=anon - he can use input field to come up with nickname, if user logined he/she don't view input, but sending on his own nick.
Just see this logic: (I use it to add registration field if user don't logined)
Also, I do some changes in chat.htm
2) If we click on smiles we lost focus and input can send without our permission, but method 1 solve this problem and I adding focus changing (after we post smile we back to input and can write easely)
3) Change formatting in fast chat (we don't see days, month, year) to this: [HH:mm:ss]. I think we need see y, m and d only if it changing, i.e. if time go to 24:00:00→00:00:00 in chat writed empty string with text: "Date DD.MM.YYYY"
Also please ignore ~=~, \<, .replace(/~=~/g, ">"). This is trix to format chat that I need [HH.mm.ss] <nick> text. I say about it earlier.
Now about example. If we use hfs.diff.tpl instread of chat.htm, and use same code, but with some changes:
See at the result. (Of course you need to test without login and with login.)
About template. I think need to use template rather, than chat.htm, because in template you can use HFS logic. For example (also important note) user nick. If user=anon - he can use input field to come up with nickname, if user logined he/she don't view input, but sending on his own nick.
Just see this logic: (I use it to add registration field if user don't logined)
Code: [Select]
1 <h3><img src="/~img27">{.!Account.}</h3>
2 <div id='login' align="right">
3 {.if| %user% |{:%user%
4 <br/>{.if|{.can change pwd.} |
5 <button onclick='changePwd.call(this)'>{.!Change password.}</button>
6 .} <button onclick='location.href="~login"'>Logout</button>
7 :}
8 | <a href="#" onclick="location.href='~login';">Login</a>
9 <br><div id='registration'><a href="#" title="1 click — extend
2 click — shrink" onclick='regform()'>Register</a>
11 <div id='susp' class='hiddenr popupr'></div></div>
12 <script type="text/javascript">
13 function regform() {
14 var str = '\
15 {.if|{.{.postvar|modid.}=mod.roessi.register.}|{:\
16 {.if|{.and|{.postvar|name.}|{.postvar|password.}.}|{:\
17 {.if|{.{.postvar|password.}={.postvar|confirmpass.}.}|{:\
18 <div>You account:<br>{.postvar|name.} has been created compleately.</div>\
19 {.add to log|%ip% creating account with name {.postvar|name.}.}\
20 {.new account|{.postvar|name.}|password={.postvar|password.}|enabled={.modopt|mod.roessi.register|enabled.}|member of=Autoreg|notes=Autoreg.}\
21 {.for each|#access|{.femodsection|access|/|.}|{:{.set item|{.^#access.}|add access={.postvar|name.}.}:}.}\
22 {.for each|#upload|{.femodsection|upload|/|.}|{:{.set item|{.^#upload.}|add upload={.postvar|name.}.}:}.}\
23 {.for each|#delete|{.femodsection|delete|/|.}|{:{.set item|{.^#delete.}|add delete={.postvar|name.}.}:}.}\
24 :}.}\
25 :}.}\
26 :}.}\
27 {.if not|{.postvar|modid.}|{:\
28 <form method="post" name="register">\
29 Nick:\
30 <input type="text" name="name" class="textbox"><br>\
31 Password:\
32 <input type="password" name="password" class="textbox"><br>\
33 Confirm password:\
34 <input type="password" name="confirmpass" class="textbox">\
35 <input type="hidden" name="modid" value="mod.roessi.register">\
36 <input type="submit" action="" value="Registration">\
37 :}.}\
38 ';
39 document.getElementById('susp').innerHTML = str;
40 }
41 </script>
42 .}
43 </div>And see at line 3,7,8,42. This is simple checking if user logined. You can also write template like that (example later).Also, I do some changes in chat.htm
Quote
...1) First problem, that I found if I post smile in text field, it can't send if we don't typing nothing else, but if I use Enter checking, it work good.
<body>
<div>Name <input type="text"><input type="color" style="height: 28px;">
<span onclick='document.querySelector("input[title=text]").value+="&#"+event.target.textContent.charCodeAt(0)+";"; document.getElementById("text").focus();'>
<span>☺</span><span>☹</span><span>♥</span></span></div>
<input id="text" type="text" size="60" onkeydown="return returnpress(event);" title="text">
<section>You are joined in chat.</section>
<script>
function returnpress(event) {if (event.which == 13 || event.keyCode == 13) {send(document.getElementById("text").value); document.getElementById("text").value=""; return false;} return true;}
if(typeof(EventSource) == "undefined") alert("browser don't support SSE")
var t0, sec=document.querySelector("section"), col=document.querySelector("input[type=color]"), source = new EventSource("server/")
source.onmessage = function(event) {show(event.data)}
function send(txt) {
txt=document.querySelector("input").value+"~=~ "+encodeURIComponent('<span style=\"color:'+col.value+';\">'+txt+"</span>")
var xhr = new XMLHttpRequest()
//xhr.onload = function() { }
xhr.open("GET", "server/?text="+txt)
//xhr.responseType = ""
xhr.send()
}
function show(txt) {var d=new Date(); if(txt!=t0) sec.innerHTML="["+("0"+d.getHours().toLocaleString()).slice(-2)+":"+("0"+d.getMinutes().toLocaleString()).slice(-2)+":"+("0"+d.getSeconds().toLocaleString()).slice(-2)+"] \<"+txt.replace(/~=~/g, ">")+"<br/>"+sec.innerHTML; t0=txt}
</script>
</body>
</html>
2) If we click on smiles we lost focus and input can send without our permission, but method 1 solve this problem and I adding focus changing (after we post smile we back to input and can write easely)
3) Change formatting in fast chat (we don't see days, month, year) to this: [HH:mm:ss]. I think we need see y, m and d only if it changing, i.e. if time go to 24:00:00→00:00:00 in chat writed empty string with text: "Date DD.MM.YYYY"
Also please ignore ~=~, \<, .replace(/~=~/g, ">"). This is trix to format chat that I need [HH.mm.ss] <nick> text. I say about it earlier.
Now about example. If we use hfs.diff.tpl instread of chat.htm, and use same code, but with some changes:
Code: [Select]
{.if| %user% |{:<div><input type="text" style="display:none;" value="%user%">:}|<div>Name <input type="text">.}<input type="color" style="height: 28px;">(first line after <body>)See at the result. (Of course you need to test without login and with login.)
