diff options
Diffstat (limited to '.c9revisions/view/poc/chat.html.c9save')
| -rw-r--r-- | .c9revisions/view/poc/chat.html.c9save | 2 |
1 files changed, 2 insertions, 0 deletions
diff --git a/.c9revisions/view/poc/chat.html.c9save b/.c9revisions/view/poc/chat.html.c9save new file mode 100644 index 0000000..b5e8475 --- /dev/null +++ b/.c9revisions/view/poc/chat.html.c9save @@ -0,0 +1,2 @@ +{"ts":1377018386171,"silentsave":true,"restoring":false,"patch":[[{"diffs":[[1,"<!DOCTYPE html>\n<html>\n <head>\n <title>Chaos Chat</title>\n <!-- NEED TO FIX URL!! -->\n <script src=\"http://chaos-audio-platform.riaevangelist.c9.io/socket.io/socket.io.js\"></script>\n <script>\n //NEED TO EXTERNALIZE CONFIG AND SCRIPTS!!\n \n \n //Chat Class\n var Chat=function(){\n function joinRoom(){\n var room=document.getElementById(\n 'room-name'\n ).value;\n \n if(socket.room)\n leaveRoom();\n \n socket.room=room;\n socket.emit(\n 'room.join',\n {\n room:socket.room\n }\n );\n \n document.getElementById('user-current-room').innerHTML=socket.room;\n var join=document.getElementById('modal-join');\n join.style.opacity=0;\n join.style.zIndex=0;\n document.getElementById('chat-primary').style.opacity=1;\n document.getElementById('playlist-area').style.opacity=1;\n document.querySelector('main').style.zIndex=5\n }\n \n function leaveRoom(){\n socket.emit(\n 'room.leave',\n {\n room:socket.room\n }\n );\n \n document.getElementById('user-current-room').innerHTML='nowhere';\n }\n \n function setHandle(e){\n if (webkitNotifications.checkPermission() != 0) {\n webkitNotifications.requestPermission();\n }\n \n socket.handle=document.getElementById(\n 'user-handle'\n ).value\n \n socket.emit(\n 'set.handle',\n {\n handle:socket.handle\n }\n )\n \n document.getElementById('user-current-handle').innerHTML=socket.handle;\n var handle=document.getElementById('modal-handle');\n handle.style.opacity=0;\n handle.style.zIndex=0;\n var join=document.getElementById('modal-join');\n join.style.opacity=1;\n join.style.zIndex=5;\n }\n \n function fromRoom(data){\n var box=document.getElementById(\n 'chat-primary-window'\n );\n box.innerHTML+='<li><p>'+\n data.handle+':<pre>'+\n data.msg+\n '</pre></p></li>';\n \n box.scrollTop=box.scrollHeight;\n //should not scroll down if user is not at the bottom.\n }\n \n function toRoom(){\n if(!socket.room)\n return;\n \n var input=document.getElementById(\n 'chat-primary-input'\n );\n var data={\n msg:input.value\n }\n input.value='';\n socket.emit(\n 'room.chat',\n data\n );\n \n data.handle=socket.handle;\n fromRoom(data);\n }\n \n function fromUser(data){\n //show private message\n }\n \n function toUser(){\n //send private message\n }\n \n function userOnline(data){\n var notification=webkitNotifications.createNotification(\n '', \n data.handle+' is Online', \n data.handle+' has just come online on the server'\n );\n notification.show();\n (\n function(){\n setTimeout(\n function() {\n notification.close();\n }, \n 1000\n );\n }\n )(notification)\n }\n \n return {\n room : {\n join : joinRoom,\n leave : leaveRoom,\n chat : toRoom\n },\n user : {\n chat:toUser\n },\n set : {\n handle:setHandle\n },\n on : {\n room: {\n chat:fromRoom\n },\n user: {\n chat : fromUser,\n online : userOnline\n }\n }\n };\n }\n \n \n //config\n var conf={\n remote:{\n base : 'http://chaos-audio-platform.riaevangelist.c9.io',\n socket : '',\n port : ':80'\n }\n };\n \n \n \n //begin chat app code\n \n var socket = io.connect(\n [\n conf.remote.base,\n conf.remote.socket,\n conf.remote.port\n ].join('')\n );\n \n \n var chat=new Chat();\n \n function init(){\n var setHandle = document.getElementById('set-handle'),\n roomJoin = document.getElementById('room-join'),\n chatPost = document.getElementById('chat-primary-post');\n \n setHandle.addEventListener(\n 'click',\n chat.set.handle\n );\n \n roomJoin.addEventListener(\n 'click',\n chat.room.join\n );\n \n chatPost.addEventListener(\n 'click',\n chat.room.chat\n );\n \n socket.on(\n 'room.chat',\n chat.on.room.chat\n )\n \n socket.on(\n 'online',\n chat.on.user.online\n )\n \n //NEED to add private chatting functionality and UI\n }\n \n window.addEventListener(\n 'load',\n init\n );\n </script>\n <style>\nhtml,body{\n padding:0;\n margin:0;\n height:100%;\n}\n\nbody{\n font-family:helvetica, arial, verdana;\n font-size:16px;\n background:rgb(231,249,255);\n color:rgb(167,185,191);\n overflow:auto;\n}\n\nbody *{\n position:relative;\n}\n\nheader{\n background:rgb(69,142,166);\n box-shadow:0 4px 5px rgba(167,185,191,.5);\n padding:20px;\n position:fixed;\n top:0;\n left:0;\n width:calc(100% - 40px);\n color:rgb(231,249,255);\n z-index:1000;\n}\n\nheader h1 {\n margin:0;\n}\n\nmain{\n height:calc(100% - 120px);\n top:80px;\n}\n\nfooter{\n background:rgb(69,142,166);\n box-shadow:0 -3px 4px rgba(167,185,191,.5);\n padding:10px;\n position:fixed;\n bottom:0;\n left:0;\n width:calc(100% - 20px);\n height:20px;\n color:rgb(231,249,255);\n}\n\n.chat-primary{\n width:calc(75% - 20px);\n padding:10px;\n height:300px;\n opacity:0;\n position:absolute;\n left:0;\n top:0;\n transition:opacity 500ms;\n}\n \n.chat-window{\n list-style:none;\n height:250px;\n box-shadow:inset 0 0 30px rgb(212,244,255),\n 0 0 4px rgb(167,185,191);\n margin:0;\n padding:2px 9px;\n z-index:100;\n margin-bottom:5px;\n overflow-y:auto;\n}\n\n.chat-input{\n width:100%;\n height:50px;\n border:none;\n}\n\ntextarea,\ninput{\n height:50px;\n border:none;\n box-shadow:inset 0 26px 30px rgb(212, 244, 255),\n 0 0 4px rgba(167,185,191,.75);\n border-radius:5px;\n}\n\ninput{\n line-height:50px;\n font-size:20px;\n}\n\n.playlist{\n width:calc(25% - 10px);\n padding:5px;\n height:300px;\n opacity:0;\n position:absolute;\n right:0;\n top:0;\n transition:opacity 500ms;\n}\n\n.modal{\n position:absolute;\n top:200px;\n left:50%;\n padding:50px;\n margin:0 0 0 -150px;\n background:rgb(212,244,255);\n border-radius:8px;\n box-shadow:0 0 8px rgba(167,185,191,.7),\n inset 0 5px 20px rgb(231,249,255);\n transition:opacity 500ms;\n}\n\n.modal h2{\n margin-top:0;\n}\n\n.modal-join{\n opacity:0;\n}\n </style>\n </head>\n <body>\n <header>\n <h1>Chaos Chat</h1>\n </header>\n <main>\n <section\n id='chat-primary' \n class='chat-primary'>\n <ul \n id='chat-primary-window' \n class='chat-window'></ul>\n <textarea \n id='chat-primary-input' \n class='chat-input'></textarea>\n <button \n id='chat-primary-post' class='post'>post</button>\n </section>\n <section id='playlist-area' class='playlist'>\n <h2>\n Playlist\n </h2>\n <ul id='playlist'></ul>\n </section>\n </main>\n <section id='modal-join' class='modal modal-join'>\n <h2>Join a Room</h2>\n <p>try chaos</p>\n <input id='room-name'/>\n <button \n id='room-join' \n data-event='room.join'>Join</button>\n </section>\n <section id='modal-handle' class='modal modal-handle'>\n <h2>Set Your Handle</h2>\n <input id='user-handle' />\n <button \n id='set-handle' \n data-event='set.handle'>Set</button>\n </section>\n <footer>\n Chatting as <span id='user-current-handle'>nobody</span> in <span id='user-current-room'>nowhere</span> room\n </footer>\n </body>\n</html>\n"]],"start1":0,"start2":0,"length1":0,"length2":10951}]],"length":10951} +{"contributors":[],"silentsave":false,"ts":1377122279381,"patch":[[{"diffs":[[0," <"],[-1,"!-- NEED TO FIX URL!! -->\n <script src=\"http://chaos-audio-platform.riaevangelist.c9.io/socket.io/socket.io.js\"></script>\n <script>\n //NEED TO EXTERNALIZE CONFIG AND SCRIPTS!!\n \n \n //Chat Class\n var Chat=function(){\n function joinRoom(){\n var room=document.getElementById(\n 'room-name'\n ).value;\n \n if(socket.room)\n leaveRoom();\n \n socket.room=room;\n socket.emit(\n 'room.join',\n {\n room:socket.room\n }\n );\n \n document.getElementById('user-current-room').innerHTML=socket.room;\n var join=document.getElementById('modal-join');\n join.style.opacity=0;\n join.style.zIndex=0;\n document.getElementById('chat-primary').style.opacity=1;\n document.getElementById('playlist-area').style.opacity=1;\n document.querySelector('main').style.zIndex=5\n }\n \n function leaveRoom(){\n socket.emit(\n 'room.leave',\n {\n room:socket.room\n }\n );\n \n document.getElementById('user-current-room').innerHTML='nowhere';\n }\n \n function setHandle(e){\n if (webkitNotifications.checkPermission() != 0) {\n webkitNotifications.requestPermission();\n }\n \n socket.handle=document.getElementById(\n 'user-handle'\n ).value\n \n socket.emit(\n 'set.handle',\n {\n handle:socket.handle\n }\n )\n \n document.getElementById('user-current-handle').innerHTML=socket.handle;\n var handle=document.getElementById('modal-handle');\n handle.style.opacity=0;\n handle.style.zIndex=0;\n var join=document.getElementById('modal-join');\n join.style.opacity=1;\n join.style.zIndex=5;\n }\n \n function fromRoom(data){\n var box=document.getElementById(\n 'chat-primary-window'\n );\n box.innerHTML+='<li><p>'+\n data.handle+':<pre>'+\n data.msg+\n '</pre></p></li>';\n \n box.scrollTop=box.scrollHeight;\n //should not scroll down if user is not at the bottom.\n }\n \n function toRoom(){\n if(!socket.room)\n return;\n \n var input=document.getElementById(\n 'chat-primary-input'\n );\n var data={\n msg:input.value\n }\n input.value='';\n socket.emit(\n 'room.chat',\n data\n );\n \n data.handle=socket.handle;\n fromRoom(data);\n }\n \n function fromUser(data){\n //show private message\n }\n \n function toUser(){\n //send private message\n }\n \n function userOnline(data){\n var notification=webkitNotifications.createNotification(\n '', \n data.handle+' is Online', \n data.handle+' has just come online on the server'\n );\n notification.show();\n (\n function(){\n setTimeout(\n function() {\n notification.close();\n }, \n 1000\n );\n }\n )(notification)\n }\n \n return {\n room : {\n join : joinRoom,\n leave : leaveRoom,\n chat : toRoom\n },\n user : {\n chat:toUser\n },\n set : {\n handle:setHandle\n },\n on : {\n room: {\n chat:fromRoom\n },\n user: {\n chat : fromUser,\n online : userOnline\n }\n }\n };\n }\n \n \n //config\n var conf={\n remote:{\n base : 'http://chaos-audio-platform.riaevangelist.c9.io',\n socket : '',\n port : ':80'\n }\n };\n \n \n \n //begin chat app code\n \n var socket = io.connect(\n [\n conf.remote.base,\n conf.remote.socket,\n conf.remote.port\n ].join('')\n );\n \n \n var chat=new Chat();\n \n function init(){\n var setHandle = document.getElementById('set-handle'),\n roomJoin = document.getElementById('room-join'),\n chatPost = document.getElementById('chat-primary-post');\n \n setHandle.addEventListener(\n 'click',\n chat.set.handle\n );\n \n roomJoin.addEventListener(\n 'click',\n chat.room.join\n );\n \n chatPost.addEventListener(\n 'click',\n chat.room.chat\n );\n \n socket.on(\n 'room.chat',\n chat.on.room.chat\n )\n \n socket.on(\n 'online',\n chat.on.user.online\n )\n \n //NEED to add private chatting functionality and UI\n }\n \n window.addEventListener(\n 'load',\n init\n );\n </script>\n <style>\nhtml,body{\n padding:0;\n margin:0;\n height:100%;\n}\n\nbody{\n font-family:helvetica, arial, verdana;\n font-size:16px;\n background:rgb(231,249,255);\n color:rgb(167,185,191);\n overflow:auto;\n}\n\nbody *{\n position:relative;\n}\n\nheader{\n background:rgb(69,142,166);\n box-shadow:0 4px 5px rgba(167,185,191,.5);\n padding:20px;\n position:fixed;\n top:0;\n left:0;\n width:calc(100% - 40px);\n color:rgb(231,249,255);\n z-index:1000;\n}\n\nheader h1 {\n margin:0;\n}\n\nmain{\n height:calc(100% - 120px);\n top:80px;\n}\n\nfooter{\n background:rgb(69,142,166);\n box-shadow:0 -3px 4px rgba(167,185,191,.5);\n padding:10px;\n position:fixed;\n bottom:0;\n left:0;\n width:calc(100% - 20px);\n height:20px;\n color:rgb(231,249,255);\n}\n\n.chat-primary{\n width:calc(75% - 20px);\n padding:10px;\n height:300px;\n opacity:0;\n position:absolute;\n left:0;\n top:0;\n transition:opacity 500ms;\n}\n \n.chat-window{\n list-style:none;\n height:250px;\n box-shadow:inset 0 0 30px rgb(212,244,255),\n 0 0 4px rgb(167,185,191);\n margin:0;\n padding:2px 9px;\n z-index:100;\n margin-bottom:5px;\n overflow-y:auto;\n}\n\n.chat-input{\n width:100%;\n height:50px;\n border:none;\n}\n\ntextarea,\ninput{\n height:50px;\n border:none;\n box-shadow:inset 0 26px 30px rgb(212, 244, 255),\n 0 0 4px rgba(167,185,191,.75);\n border-radius:5px;\n}\n\ninput{\n line-height:50px;\n font-size:20px;\n}\n\n.playlist{\n width:calc(25% - 10px);\n padding:5px;\n height:300px;\n opacity:0;\n position:absolute;\n right:0;\n top:0;\n transition:opacity 500ms;\n}\n\n.modal{\n position:absolute;\n top:200px;\n left:50%;\n padding:50px;\n margin:0 0 0 -150px;\n background:rgb(212,244,255);\n border-radius:8px;\n box-shadow:0 0 8px rgba(167,185,191,.7),\n inset 0 5px 20px rgb(231,249,255);\n transition:opacity 500ms;\n}\n\n.modal h2{\n margin-top:0;\n}\n\n.modal-join{\n opacity:0;\n}\n </style"],[1,"link rel='stylesheet' href='css/chat.css'/>\n <!-- NEED TO FIX URL!! -->\n <script src='http://chaos-audio-platform.riaevangelist.c9.io/socket.io/socket.io.js'></script>\n <script src='js/chat.js'></script"],[0,">\n "]],"start1":73,"start2":73,"length1":9395,"length2":231}]],"length":1787,"saved":false} |