homework/js12/main.js

var myObj = 0;
var button = document.getElementById("button");
var result = document.getElementById('result');
var emoji = document.querySelectorAll(".emoji-item");
var canvasIcon = document.querySelector(".draw img");
var canvasBar = document.querySelector(".canvas");
var main = document.querySelector("main");
debugger;
for (var i = 0; i < emoji.length; i++) {
	emoji[i].onclick = function(){
		var xmlhttp = new XMLHttpRequest();  
		

		xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				console.log(xmlhttp.responseText);
			}
		}
		xmlhttp.send(JSON.stringify({ func: 'addMessage', nick: "p", message: this.getAttribute("src")}))
		
	}
}

var cansvasIsVisible = false;
canvasIcon.onclick = function(){
	if(!cansvasIsVisible){
		canvasBar.style.visibility = "visible";
		cansvasIsVisible = true;
		main.style.marginLeft = "40%";
	}
	else{
		canvasBar.style.visibility = "hidden";
		cansvasIsVisible = false;
		main.style.margin = "0 auto";
	}
	
}

//
button.onclick = function(){
	var xmlhttp = new XMLHttpRequest();  
	var myNick = document.getElementById('input1').value;
	var myMessage = document.getElementById('input2').value;

	xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			console.log(xmlhttp.responseText);
		}
	}
	xmlhttp.send(JSON.stringify({ func: 'addMessage', nick: myNick, message: myMessage}))
	
}

//

setInterval(function(){
	
	var xmlhttp = new XMLHttpRequest(); 
	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 == 4 && xmlhttp.status == 200){
				
				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++) {
					
					if(typeof obj[i].message != "object" && obj[i].message && obj[i].message.indexOf('youtube') > -1){
						var iframe = document.createElement("iframe");
						var str = "https://www.youtube.com/embed/";
						
						var index1 = obj[i].message.indexOf('=') + 1;
						
						if(obj[i].message.indexOf('&') > -1){
							var index2 = obj[i].message.indexOf('&');
							str2 = obj[i].message.slice(index1,index2);
						}
						else{
							str2 = obj[i].message.slice(index1);
						}
						console.log(str2);
						iframe.setAttribute("src",str + str2);
						result.innerHTML += obj[i].nick + ": ";   
						result.appendChild(iframe);
						result.innerHTML += '<br>';   
					}	
					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>';   

					}
					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>';   

					}
					else{
						result.innerHTML += "<div><span>" + obj[i].nick + "</span><br> "+ obj[i].message + '</div>';  
					}
					 
				}
				
			
			
		}
	}
	
	xmlhttp.send(JSON.stringify({ func: 'getMessages', messageId: myObj}));


}
,3000);