commit

js12/index.html

@@ -63,9 +63,11 @@
 		#result {
 			background-color: #DFE0E2;
 			padding: 15px;
-			margin-bottom: 175px;
+			margin-bottom: 155px;
 			border-radius: 15px;
 			padding-bottom: 30px;
+			box-shadow: inset 0px 0px 11px #878787; 
+			min-height: 700px;
 		}
 		#result div {
 			background-color: #F9F9F9;
@@ -81,6 +83,12 @@
 		}
 		span {
 			color: #6962A8;
+			display: block;
+			
+		}
+
+		.draw {
+			display: inline-block;
 		}
 		.draw img{
 			width: 20px;
@@ -88,6 +96,7 @@
 			position: relative;
 			left: 5px;
 			bottom: 4px;
+			
 		}
 		.canvas {
 			position: fixed;
@@ -104,6 +113,10 @@
 			border-right: 15px;
 			font-size: 15px;
 		}
+		#emoji-block {
+			display: inline-block;
+			
+		}
 		
 	</style>
 </head>
@@ -128,32 +141,32 @@
 	</div>
 	<main>
 		<div class="container">
-		<!-- <label for="input1">nick:</label><br> -->
-		<input type="text" id="input1" placeholder="Type a name..."><br>
-		<!-- <label for="input2">message:</label><br> -->
-		
-		<input type="text" id="input2" placeholder="Type a message..."><br>
-		<div id="emoji-block">
-			<div id="emoji-button" style="display: inline-block;">
-				<img src="https://cdn.iconscout.com/public/images/icon/free/png-512/emoji-sad-unhappy-3a93cdaae83e3bb7-512x512.png" alt="" 	width="30px" height="30px">
+			<!-- <label for="input1">nick:</label><br> -->
+			<input type="text" id="input1" placeholder="Type a name..."><br>
+			<!-- <label for="input2">message:</label><br> -->
+			
+			<input type="text" id="input2" placeholder="Type a message..."><br>
+			<div id="emoji-block">
+				<div id="emoji-button" style="display: inline-block;">
+					<img src="https://cdn.iconscout.com/public/images/icon/free/png-512/emoji-sad-unhappy-3a93cdaae83e3bb7-512x512.png" alt="" 	width="30px" height="30px">
+				</div>
+				<div id="emoji" style="display: none">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/aggressive.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/dash3.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/crazy.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/curtsey.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/diablo.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/focus.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/girl_in_love.gif" alt="img">
+					<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/hunter.gif" alt="img">
+				</div>
 			</div>
-			<div id="emoji" style="display: none">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/aggressive.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/dash3.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/crazy.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/curtsey.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/diablo.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/focus.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/girl_in_love.gif" alt="img">
-				<img class = "emoji-item" src="http://www.kolobok.us/smiles/light_skin/hunter.gif" alt="img">
+			<div class="draw">
+				<img src="https://cdn.iconscout.com/public/images/icon/premium/png-512/canvas-drawing-painting-color-paint-31e01478fb2fcadd-512x512.png" alt="canvas">
 			</div>
+			<input type="button" id="button" value="send">
+			
 		</div>
-		<div class="draw">
-			<img src="https://cdn.iconscout.com/public/images/icon/premium/png-512/canvas-drawing-painting-color-paint-31e01478fb2fcadd-512x512.png" alt="canvas">
-		</div>
-		<input type="button" id="button" value="send">
-		
-	</div>
 <!--//////////////////////////////////////////////////-->
 	
 	

js12/main.js

@@ -6,7 +6,7 @@ var emoji = document.querySelectorAll(".emoji-item");
 var canvasIcon = document.querySelector(".draw img");
 var canvasBar = document.querySelector(".canvas");
 var main = document.querySelector("main");
-debugger;
+var loadingFirst = true;
 for (var i = 0; i < emoji.length; i++) {
 	emoji[i].onclick = function(){
 		var xmlhttp = new XMLHttpRequest();  
@@ -62,10 +62,25 @@ setInterval(function(){
 	xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
 	//xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
 	xmlhttp.onreadystatechange = function(){
+		if(xmlhttp.readyState == 3 && loadingFirst){
+			loadingFirst = false;
+			
+			for (var i = 0; i < document.querySelectorAll(".loading").length; i++) {
+				document.querySelectorAll(".loading")[i].remove();
+			}
+			debugger;
+			var loading = document.createElement("img");
+			loading.className = "loading";
+			loading.setAttribute("src","img/ajax-loader.gif");
+			result.appendChild(loading);
+		}
 		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
+			for (var i = 0; i < document.querySelectorAll(".loading").length; i++) {
+				document.querySelectorAll(".loading")[i].remove();
+			}
 				
 				var obj = JSON.parse(xmlhttp.responseText).data;
-				console.log(obj)
+				
 				var resObj = Object.keys(obj);
 				myObj += obj.length;
 				for (var i = 0; i < obj.length; i++) {
@@ -75,7 +90,7 @@ setInterval(function(){
 						var str = "https://www.youtube.com/embed/";
 						
 						var index1 = obj[i].message.indexOf('=') + 1;
-						
+						var span = document.createElement("span");
 						if(obj[i].message.indexOf('&') > -1){
 							var index2 = obj[i].message.indexOf('&');
 							str2 = obj[i].message.slice(index1,index2);
@@ -83,27 +98,32 @@ setInterval(function(){
 						else{
 							str2 = obj[i].message.slice(index1);
 						}
-						console.log(str2);
+						var div = document.createElement("div");
 						iframe.setAttribute("src",str + str2);
-						result.innerHTML += obj[i].nick + ": ";   
-						result.appendChild(iframe);
-						result.innerHTML += '<br>';   
+						iframe.style.width = "85%";
+						iframe.style.height = "350px";
+						span.innerHTML = obj[i].nick;
+						div.appendChild(span); 
+						div.appendChild(iframe);  
+						result.appendChild(div);
+						 
 					}	
 					else if(typeof obj[i].message != "object" && obj[i].message && /(https?:\/\/.*\.(?:png|jpg))/i.test(obj[i].message)){ // obj[i].message.indexOf('.jpg') > -1
 						var img = document.createElement("img");
 						img.setAttribute("src",obj[i].message);
-						img.setAttribute("style","width: 600px");
-						result.innerHTML += "<div><span>" +  obj[i].nick + "</span><br>  ";   
-						result.appendChild(img);
-						result.innerHTML += '</div><br>';   
+						img.setAttribute("style","width: 85%");
+						var div = document.createElement("div");
+						var span = document.createElement("span");
+						span.innerHTML = obj[i].nick;
+						div.appendChild(span);
+						div.appendChild(img);
+						result.appendChild(div);
 
 					}
 					else if(typeof obj[i].message != "object" && obj[i].message && obj[i].message.indexOf('.gif') > -1){
-						var img = document.createElement("img");
-						img.setAttribute("src",obj[i].message);
-						result.innerHTML += obj[i].nick + ": ";   
-						result.appendChild(img);
-						result.innerHTML += '<br>';   
+						var div = document.createElement("div");
+						result.innerHTML += "<div><span>" +  obj[i].nick + "</span><br><img src='"+obj[i].message+"' alt='' />  </div><br>";  
+						
 
 					}
 					else{