Page MenuHomeSealhub
Files F10361399

No OneTemporary
Actions

View Options

diff --git a/public/konwersacja.html b/public/konwersacja.html
index 9531ac66..ed08a6cd 100644
--- a/public/konwersacja.html
+++ b/public/konwersacja.html
@@ -1,152 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.js"></script>
<script src="/js/buzz.js"></script>
<script src="/js/authorization.js"></script>
<meta charset="utf-8">
<title>Konwersacja</title>
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
</head>
<body style="max-width:25rem;">
<div class="content">
<a href="/">Menu główne</a> > <a href="/konwersacje.html">Konwersacje</a>
<h1>Konwersacja: <span class="insert-conversation-name"></span></h1>
<div class="loading-container">
<svg class="prometheus-loading-circle" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40" id="svg2"><defs id="defs4" /><g transform="translate(0,-1012.3622)"><path d="m 37.307924,20.708296 a 16.102993,16.102993 0 1 1 -32.2059858,0 16.102993,16.102993 0 1 1 32.2059858,0 z" transform="translate(-1.2049313,1011.6539)" id="path2991"/></g>
</svg>
</div>
<ul id="lista-wiadomosci">
</ul>
<input type="text" id="message-box" placeholder="Nowa wiadomość"></textarea>
<button id="confirm" onclick="sendMessage()">Wyślij</button>
</div>
</body>
<script>
Auth.redirect_if_not_logged_in();
var mySound = new buzz.sound("/sounds/new_message.mp3");
var me;
var conversation_id = document.location.hash.slice(1);
var base_url = "/api/v1/chat/conversation/" + conversation_id + "/messages";
function getTitle() {
$.get("/api/v1/chat/conversation/"+conversation_id, function(data) {
$(".insert-conversation-name").text(data.title);
});
}
function getCurrentUserID(callback){
$.get("api/v1/users/me", function(user_data){
me = user_data.user_id;
callback();
});
}
var users = {};
function downloadUserData(callback){
$.get("/api/v1/users", function(data){
for(var i in data){
users[data[i].user_id] = data[i];
}
callback();
})
}
function getUsername(user_id){
console.log("got request for user_id", user_id);
return (users[user_id] && users[user_id].username) || "unknown";
}
var lastMessageId = -1;
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
+ var first_load = true;
+
function readMessages(){
console.log("read messages");
var message_list = $("#lista-wiadomosci");
$.get(base_url, function(data) {
$(".loading-container")[0].classList.add("not-loading");
var checkState = false;
console.log(data);
for(var i in data) {
if (lastMessageId < data[i].id) {
var entry = data[i];
var node;
if(entry.message.trim() != ""){
var username = getUsername(entry.owner_id);
if(entry.owner_id == me){
node = $("<li class='message incoming'><div class='username'>"+username+":</div>"+entry.message+"</li>");
} else {
mySound.play();
node = $("<li class='message'><div class='username'>"+username+":</div>"+entry.message+"</li>");
}
message_list.append(node);
checkState = true;
}
lastMessageId = data[i].id;
}
}
+ if(first_load){
+ first_load=false;
+ message_list[0].classList.add("first-load");
+ }else{
+ message_list[0].classList.remove("first-load");
+ }
if (isScrolledIntoView("#message-box") && checkState) {
$("html, body").animate({
scrollTop: $("#message-box").offset().top+50
}, 200);
}
});
}
function sendMessage(){
console.log("sendMessage")
var message = $("#message-box").val();
if(message.trim() != ""){
$.post("/api/v1/chat/message", {message: message, conversation_id: conversation_id}, function() {
console.log("before readNewMessages")
readMessages();
});
} else {
alert("Może najpierw coś napisz?");
}
$("#message-box").val("").focus();
$("html, body").animate({
scrollTop: $("#message-box").offset().top+50
}, 200);
}
$("#message-box").keydown(function(e){
if(e.which==13){
sendMessage();
}
});
getCurrentUserID(readMessages);
getTitle();
downloadUserData(function(){
setInterval(readMessages, 1000);
})
</script>
</html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index c00b64aa..d41f923f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,304 +1,304 @@
@font-face {
font-family: 'Open Sans Light';
src: url('fonts/opensans_light_polish/OpenSans-Light-webfont.eot');
src: url('fonts/opensans_light_polish/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans_light_polish/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/opensans_light_polish/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/opensans_light_polish/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans Light Regular';
src: url('fonts/opensans_regular_polish/OpenSans-Regular-webfont.eot');
src: url('fonts/opensans_regular_polish/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans_regular_polish/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/opensans_regular_polish/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/opensans_regular_polish/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
html{
background-color:hsl(0, 0%, 90%);
}
body{
box-shadow: 1px 1px 9px hsla(0, 0%, 0%, 0.11);
padding:20px;
background-color:white;
font-family:sans-serif;
max-width:50rem;
margin:0 auto;
background-image: url(/img/logo.png);
background-repeat:no-repeat;
background-position: bottom 10px left 20px;
background-size: auto 30px;
padding-bottom:50px;
margin-top:40px;
animation: fadeIn linear 400ms;
animation-iteration-count: 1;
transform-origin: 50% 50%;
margin-bottom: 15px;
}
*{
color:hsl(0, 0%, 28%);
font-family: 'Open Sans Light';
}
strong{
font-family: 'Open Sans Light Regular';
}
a{
color: hsl(194, 51%, 50%);
text-decoration:none;
font-family: 'Open Sans Light Regular';
}
button{
border-color: hsl(194, 51%, 50%);
border-style:solid;
border-width:1px;
border-radius: 2px;
}
button.negative{
border-color:hsl(23, 61%, 55%);
}
.prometheus{
color:hsl(194, 32%, 55%);
}
.show-on-parent-hover{
/*
opacity:0;
*/
transition: all 300ms;
}
*:hover > .show-on-parent-hover{
opacity:1;
}
ul#lista-wiadomosci {
overflow: hidden;
}
ul .message.incoming {
float: right;
background: hsl(198, 51%, 70%) !important;
border-color: rgba(0,0,0,0.1);
text-align: right;
margin-right: 18px;
animation-name: message-enter-right;
}
ul .message {
list-style: none;
margin-left:-20px;
margin-bottom: 10px;
width: auto;
color: rgba(255,255,255,1);
float: left;
word-wrap: break-word;
clear: both;
position: relative;
padding: 10px;
background: hsl(198, 51%, 50%);
-webkit-box-shadow: inset 0px -5px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px -5px 10px 0px rgba(0,0,0,0.1);
box-shadow: inset 0px -5px 10px 0px rgba(0,0,0,0.1);
animation-fill-mode: both;
animation-duration: 400ms;
animation-name: message-enter-left;
}
.message:not(.incoming)::after {
border-color: transparent hsl(198, 51%, 50%);
border-style: solid;
border-width: 0px 18px 20px 0;
content: "";
display: block;
left: -18px;
position: absolute;
top: 0px;
width: 0;
z-index: 1;
}
.incoming:before {
border-color: transparent hsl(198, 51%, 70%);
border-style: solid;
border-width: 0px 0 20px 18px;
content: "";
display: block;
position: absolute;
right: -18px !important;
top: 0px;
width: 0;
z-index: 1;
}
#message-box + button {
float: left;
clear: both;
margin-top: 10px;
}
#message-box {
width: 98%;
float: left;
}
.content {
height: auto;
overflow: hidden;
position:relative;
}
#registered {
display: none;
opacity: 1;
}
#registered:target {
color: rgba(0,0,0,0.3);
margin:0 auto 15px;
width: 190px;
display: block;
transition-delay: 2s;
transition: opacity 200ms easy-in;
}
.username {
font-size: 10px;
color: rgba(255,255,255,0.6);
}
/*
Animations
*/
@keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
/**
* circle loading animation
*/
.loading-container{
text-align:center;
opacity:1;
will-change:opacity;
transition:opacity 300ms;
height:40px;
width:100%;
left:0;
pointer-events:none;
}
.prometheus-loading-circle{
animation: rotate 2s infinite linear;
margin: 0 auto;
display:inline-block;
}
@keyframes rotate{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
.prometheus-loading-circle path{
fill: none;
stroke: #669FB1;
stroke-width: 4.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-opacity: 1;
stroke-dasharray: 19;
stroke-dashoffset: 0;
animation: loading-circle 2s infinite;
}
.loading-container.not-loading{
opacity:0!important;
position:absolute;
}
@keyframes fade-out{
0%{
opacity:1!important;
}
99%{
opacity:0!important;
}
100%{
display:none;
}
}
@keyframes loading-circle{
0% {
stroke-dashoffset: 0;
stroke-dasharray:15;
}
50% {
stroke-dasharray:60;
}
100% {
stroke-dashoffset: 10;
stroke-dasharray:15;
}
}
@keyframes message-enter-right{
0% {
opacity:0;
transform:translateX(40px);
}
100% {
opacity:1;
}
}
@keyframes message-enter-left{
0% {
opacity:0;
transform:translateX(-40px);
}
100% {
opacity:1;
}
}
-.message:nth-last-child(5){
+.first-load .message:nth-last-child(5){
animation-delay:0;
}
-.message:nth-last-child(4){
+.first-load .message:nth-last-child(4){
animation-delay:100ms;
}
-.message:nth-last-child(3){
+.first-load .message:nth-last-child(3){
animation-delay:200ms;
}
-.message:nth-last-child(2){
+.first-load .message:nth-last-child(2){
animation-delay:300ms;
}
-.message:not(.incoming):nth-last-child(1){
+.first-load .message:nth-last-child(1){
animation-delay:400ms;
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 8, 13:21 (9 h, 24 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034618
Default Alt Text
(10 KB)

Event Timeline