Commit 1becb4ff authored by Kannan V M's avatar Kannan V M
Browse files

Refactor client side code

parent 5aeb8360
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Knowledge Tree - Free Software Camp</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
<script src="socket.io.min.js"></script>
<script src="user.js"></script>
</head>
......
/* @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=
* agpl-3.0.txt AGPL-3.0-or-later */
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-or-later
const socket = io('/user_en');
var socket = io('/user_en');
function popupLeaf() {
let knowledgeId = this.id.replace('path', 'knowledge');
document.getElementById(knowledgeId).style.display = 'block';
document.getElementById('knowledge').style.display = 'block';
document.getElementById('knowledge').style.backgroundImage = 'url("leaf.svg")';
document.getElementById('knowledge').style.backgroundRepeat = 'no-repeat';
document.getElementById('knowledge').style.backgroundSize = 'cover';
document.getElementById('tree').style.visibility = 'hidden';
document.getElementById('knowledge-form').style.visibility = 'hidden';
document.getElementById('close-button').style.display = 'block';
}
socket.on('leaves data', (leavesdata) => {
let i = 0;
for(leaf in leavesdata) {
leafdata = leavesdata[leaf];
growLeaves(i, leafdata);
i++;
}
function growLeaf(leafData) {
const { leafNo } = leafData;
const activeLeaf = document.getElementById(leafNo);
activeLeaf.classList.add('leaf-active');
activeLeaf.classList.remove('leaf-inactive');
activeLeaf.addEventListener('click', popupLeaf, false);
const knowledgeItem = document.createElement('p');
knowledgeItem.setAttribute('class', 'knowledge-item');
const knowledgeId = activeLeaf.id.replace('path', 'knowledge');
const leafDataInput = document.getElementById(knowledgeId);
if (leafDataInput) {
leafDataInput.innerHTML = leafData.leafText;
} else {
knowledgeItem.setAttribute('id', knowledgeId);
knowledgeItem.innerHTML = leafData.leafText;
document.getElementById('knowledge').appendChild(knowledgeItem);
}
}
function growLeaves(i, leafdata) {
setTimeout(function() {
growLeaf(leafdata);
}, 300 * i);
}
function growLeaves(i, leafData) {
setTimeout(() => growLeaf(leafData), 300 * i);
}
socket.on('leaves data', (leavesData) => {
let i = 0;
if (Object.keys(leavesData).length > 0) {
for(socketId in leavesData) {
leafData = leavesData[socketId];
if (leafData.leafText) {
growLeaves(i, leafData);
i++;
}
}
}
});
function addKnowledgeItem() {
leaftext = document.getElementById('knowledge-input').value;
var leafdata = { "leaftext": leaftext }
socket.emit("leaf text", leafdata);
leafText = document.getElementById('knowledge-input').value;
socket.emit("leaf text", leafText);
document.getElementById("knowledge-input").style.display = "none";
document.getElementById("knowledge-submit").style.display = "none";
document.getElementById("knowledge-edit").style.display = "block";
......@@ -33,43 +66,6 @@ function editKnowledgeItem() {
document.getElementById("knowledge-edit").style.display = "none";
}
socket.on('leaf data', (leafdata) => {
growLeaf(leafdata);
});
function growLeaf(leafdata) {
console.log(leafdata);
leafID = leafdata.leafid;
activeLeaf = document.getElementById(leafID);
activeLeaf.classList.add("leaf-active");
activeLeaf.classList.remove("leaf-inactive");
activeLeaf.addEventListener("click", popupLeaf, false);
let knowledgeItem = document.createElement("p");
knowledgeItem.setAttribute("class", "knowledge-item");
let knowledgeId = activeLeaf.id.replace("path", "knowledge");
leafData = document.getElementById(knowledgeId);
if(leafData) {
leafData.innerHTML = leafdata.leaftext;
} else {
knowledgeItem.setAttribute("id", knowledgeId);
knowledgeItem.innerHTML = leafdata.leaftext;
document.getElementById("knowledge").appendChild(knowledgeItem);
}
}
function popupLeaf() {
let knowledgeId = this.id.replace("path", "knowledge");
document.getElementById(knowledgeId).style.display = "block";
document.getElementById("knowledge").style.display = "block";
document.getElementById("knowledge").style.backgroundImage = "url('leaf.svg')";
document.getElementById("knowledge").style.backgroundRepeat = "no-repeat";
document.getElementById("knowledge").style.backgroundSize = "cover";
document.getElementById("tree").style.visibility = "hidden";
document.getElementById("knowledge-form").style.visibility = "hidden";
document.getElementById("close-button").style.display = "block";
}
function closeLeaf() {
document.getElementById("close-button").style.display = "none";
......@@ -91,12 +87,12 @@ window.onload = function() {
}
}
socket.on('delete text', (leafid) => {
activeLeaf = document.getElementById(leafid);
socket.on('delete text', (leafId) => {
activeLeaf = document.getElementById(leafId);
activeLeaf.classList.remove("leaf-active");
activeLeaf.classList.add("leaf-inactive");
activeLeaf.removeEventListener("click", popupLeaf, false);
let knowledgeId = leafid.replace("path", "knowledge");
let knowledgeId = leafId.replace("path", "knowledge");
document.getElementById(knowledgeId).innerHTML = "";
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment