window.onload = function () {
let cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i];
let eqPos = cookie.indexOf("=");
let name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}
var IMAGE_PATH = "../static/images/";
document.cookie = "RoomIndex=0";
//初始化数
var BedNum = 0, MasterNum = 0, SecondNum = 0, GuestNum = 0, StudyNum = 0, ChildNum = 0, LivingNum = 0;
var KitchenNum = 0, BalconyNum = 0, BathNum = 0, DiningNum = 0, StorageNum = 0, EntranceNum = 0, Wall_inNum = 0;
// document.getElementById("BedRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++BedNum;
// document.getElementById("BedRoom_val").innerHTML = BedNum;
// newElement("BedRoom", BedNum, curInd);
// }
// document.getElementById("MasterRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++MasterNum;
// ++BedNum;
// newElement("MasterRoom", MasterNum, curInd);
// document.getElementById("MasterRoom_val").innerHTML = MasterNum;
// document.getElementById("BedRoom_val").innerHTML = BedNum;
// }
// document.getElementById("SecondRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++SecondNum;
// ++BedNum;
// newElement("SecondRoom", SecondNum, curInd);
// document.getElementById("SecondRoom_val").innerHTML = SecondNum;
// document.getElementById("BedRoom_val").innerHTML = BedNum;
// }
// document.getElementById("GuestRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++GuestNum;
// ++BedNum;
// newElement("GuestRoom", GuestNum, curInd);
// document.getElementById("GuestRoom_val").innerHTML = GuestNum;
// document.getElementById("BedRoom_val").innerHTML = BedNum;
// }
// document.getElementById("StudyRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++StudyNum;
// ++BedNum;
// newElement("StudyRoom", StudyNum, curInd);
// document.getElementById("StudyRoom_val").innerHTML = StudyNum;
// document.getElementById("BedRoom_val").innerHTML = BedNum;
// }
// document.getElementById("ChildRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++ChildNum;
// ++BedNum;
// newElement("ChildRoom", ChildNum, curInd);
// document.getElementById("ChildRoom_val").innerHTML = ChildNum;
// document.getElementById("BedRoom_val").innerHTML = BedNum;
// }
// document.getElementById("LivingRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++LivingNum;
// newElement("LivingRoom", LivingNum, curInd);
// document.getElementById("LivingRoom_val").innerHTML = LivingNum;
// }
// document.getElementById("Kitchen").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++KitchenNum;
// newElement("Kitchen", KitchenNum, curInd);
// document.getElementById("Kitchen_val").innerHTML = KitchenNum;
// }
// document.getElementById("Balcony").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++BalconyNum;
// newElement("Balcony", BalconyNum, curInd);
// document.getElementById("Balcony_val").innerHTML = BalconyNum;
// }
// document.getElementById("BathRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++BathNum;
// newElement("BathRoom", BathNum, curInd);
// document.getElementById("BathRoom_val").innerHTML = BathNum;
// }
// document.getElementById("DiningRoom").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++DiningNum;
// newElement("DiningRoom", DiningNum, curInd);
// document.getElementById("DiningRoom_val").innerHTML = DiningNum;
// }
// document.getElementById("Storage").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++StorageNum;
// newElement("Storage", StorageNum, curInd);
// document.getElementById("Storage_val").innerHTML = StorageNum;
// }
// document.getElementById("Entrance").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++EntranceNum;
// newElement("Entrance", EntranceNum, curInd);
// document.getElementById("Entrance_val").innerHTML = EntranceNum;
// }
// document.getElementById("Wallin").onclick = function () {
// var curInd = changeRoomIndexCookie();
// ++Wall_inNum;
// newElement("Wallin", Wall_inNum, curInd);
// document.getElementById("Wallin_val").innerHTML = Wall_inNum;
// }
var animationDiv = document.getElementById('animationDiv');
var addButton = document.getElementById('add');
var removeSVG = '';
var checkSVG = ' ';
completedList = document.getElementById('completed');
todoList = document.getElementById('todo');
// Core Functions
function addItem(roomname) {
if (itemTextBox.value) {
newElement(itemTextBox.value);
itemTextBox.value = "";
}
document.getElementById('add').classList.toggle("rotate");
addAnimation();
}
function fade(element) {
element.classList.remove('invisible');
}
function checkItem() {
checkButton = this;
checkAnimateDiv = this.children[1];
console.log(checkAnimateDiv);
checkElement = this.parentElement.parentElement;
if (!(checkElement.classList.contains('checked'))) {
selectRoomType(checkElement.innerText, this.id);
checkElement.classList.add('checked');
checkAnimation(checkAnimateDiv);
//checkElement.classList.add('invisible');
setTimeout(function () {
completedList.appendChild(checkElement);
}, 100);
setTimeout(function () {
DOMCleaner(checkAnimateDiv);
}, 500);
} else {
checkElement.classList.remove('checked');
deleteAnimation(checkElement);
todoList.insertBefore(checkElement, todoList.firstChild);
var points = d3.select("body").selectAll("circle");
var curInd = this.id.split("_")[1];
points.each(function (d, i) {
var tmpInd = this.id.split("_")[1];
if (tmpInd == curInd) {
d3.select(this).remove();
}
});
}
}
function DOMCleaner(item) {
while (item.firstChild) {
//item.removeChild(item.firstChild);
item.firstChild.remove();
}
}
function removeItem(name, deleteButton) {
deleteElement = deleteButton.parentElement.parentElement;
deleteElement.classList.add('deleted');
deleteAnimation(deleteElement);
switch (name) {
case "BedRoom":
var a = --BedNum;
break;
case "MasterRoom":
var a = --MasterNum;
--BedNum;
break;
case "SecondRoom":
var a = --SecondNum;
--BedNum;
break;
case "GuestRoom":
var a = --GuestNum;
--BedNum;
break;
case "StudyRoom":
var a = --StudyNum;
--BedNum;
break;
case "ChildRoom":
var a = --ChildNum;
--BedNum;
break;
case "Kitchen":
var a = --KitchenNum;
break;
case "DiningRoom":
var a = --DiningNum;
break;
case "BathRoom":
var a = --BathNum;
break;
case "Balcony":
var a = --BalconyNum;
break;
case "Entrance":
var a = --EntranceNum;
break;
case "Wallin":
var a = --Wall_inNum;
break;
case "Storage":
var a = --StorageNum;
break;
case "LivingRoom":
var a = --LivingNum;
break;
default:
break
}
var id = name + "_val";
document.getElementById(id).innerHTML = a;
document.getElementById("BedRoom_val").innerHTML = BedNum;
setTimeout(function () {
deleteElement.remove();
}, 500);
}
function newElement(name, value, curInd) {
var item_image = document.createElement('img');
item_image.src = IMAGE_PATH + name + ".png";
item_image.classList.add('showrmitem');
var item = document.createElement('li');
item.innerHTML = name;
item.appendChild(item_image);
item.classList.add('invisible');
var buttonsDiv = document.createElement('div');
buttonsDiv.classList.add('buttons');
var deleteButton = document.createElement('button');
deleteButton.classList.add('deleteButton');
deleteButton.id = "Delete_" + curInd;
deleteButton.innerHTML = removeSVG;
deleteButton.onclick = function () {
if (d3.select("body").selectAll("circle").length > 0) {
var points = d3.select("body").selectAll("circle");
var curInd = this.id.split("_")[1];
points.each(function (d, i) {
var tmpInd = this.id.split("_")[1];
if (tmpInd == curInd) {
d3.select(this).remove();
}
});
}
removeItem(name, deleteButton);
}
var checkButton = document.createElement('button');
checkButton.classList.add('checkButton');
checkButton.innerHTML = checkSVG;
checkButton.id = "Check_" + curInd;
var checkAnimateDiv = document.createElement('div');
checkAnimateDiv.id = "checkAnimateDiv";
checkButton.appendChild(checkAnimateDiv);
checkButton.addEventListener('click', checkItem);
buttonsDiv.appendChild(deleteButton);
buttonsDiv.appendChild(checkButton);
item.appendChild(buttonsDiv);
//todoList.prepend(item);
todoList.insertBefore(item, todoList.firstChild);
setTimeout(function () {
fade(item);
}, 100);
}
// Visual
/* Add Button Animation */
function addAnimation() {
const Burst1 = new mojs.Burst({
parent: animationDiv,
top: '50%',
left: '50%',
radius: {0: 80},
count: 8,
children: {
shape: 'circle',
fill: {'red': 'blue'},
strokeWidth: 1,
duration: 600,
stroke: {'red': 'blue'}
}
});
const Burst2 = new mojs.Burst({
parent: animationDiv,
top: '50%',
left: '50%',
radius: {0: 100},
count: 4,
children: {
shape: 'rect',
fill: 'white',
strokeWidth: 1,
duration: 300,
stroke: 'white'
}
});
const circle1 = new mojs.Shape({
radius: {0: 40},
parent: animationDiv,
fill: 'none',
stroke: 'white',
strokeWidth: 15,
duration: 300,
opacity: {1: 0}
});
const circle2 = new mojs.Shape({
radius: {0: 50},
parent: animationDiv,
fill: 'none',
stroke: 'red',
strokeWidth: 5,
duration: 400,
opacity: {1: 0}
});
const circle3 = new mojs.Shape({
radius: {0: 60},
parent: animationDiv,
fill: 'none',
stroke: 'blue',
strokeWidth: 5,
duration: 500,
opacity: {1: 0}
});
const circle4 = new mojs.Shape({
radius: {0: 70},
parent: animationDiv,
fill: 'white',
stroke: 'white',
strokeWidth: 5,
duration: 600,
opacity: {1: 0}
});
const timeline = new mojs.Timeline({
repeat: 0
}).add(circle4, circle1, circle2, circle3, Burst1, Burst2);
timeline.play();
}
/* Delete item animation */
function checkAnimation(checkItem) {
const circle1 = new mojs.Shape({
radius: {0: 1000},
parent: checkItem,
fill: '#7bef28',
stroke: 'white',
strokeWidth: 10,
duration: 500,
opacity: {1: 0}
});
const circle2 = new mojs.Shape({
radius: {0: 200},
parent: checkItem,
fill: 'none',
stroke: 'white',
strokeWidth: 30,
duration: 300,
opacity: {1.7: 0}
});
const circle3 = new mojs.Shape({
radius: {0: 400},
parent: checkItem,
fill: 'none',
stroke: '#230e5780',
strokeWidth: 10,
duration: 400,
opacity: {1: 0}
});
const timelineX = new mojs.Timeline({
repeat: 0,
}).add(circle1, circle2, circle3);
timelineX.play();
}
function changeRoomIndexCookie() {
var arr, reg = new RegExp("(^| )RoomIndex=([^;]*)(;|$)");
var curIndex = -1;
if (arr = document.cookie.match(reg))
curIndex = arr[2];
document.cookie = "RoomIndex=" + (parseInt(curIndex) + 1);
return curIndex;
}
}