2018-03-28 17:12:05 +00:00
|
|
|
/******************************
|
|
|
|
|
|
|
|
Boxes of HTML. With words and pictures!
|
|
|
|
|
|
|
|
******************************/
|
|
|
|
|
|
|
|
function Boxes(){
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
self.dom = $("#slideshow");
|
|
|
|
|
|
|
|
self.boxes = [];
|
|
|
|
|
|
|
|
// Clear
|
|
|
|
self.clear = function(){
|
|
|
|
self.boxes.forEach(function(box){
|
|
|
|
self.dom.removeChild(box);
|
|
|
|
});
|
|
|
|
self.boxes = [];
|
|
|
|
};
|
|
|
|
|
|
|
|
// Add Box
|
2018-04-02 17:43:20 +00:00
|
|
|
self.add = function(config, withFade){
|
2018-03-28 17:12:05 +00:00
|
|
|
|
|
|
|
// Add to DOM
|
|
|
|
var box = document.createElement("div");
|
|
|
|
box.className = "box";
|
2018-04-02 17:43:20 +00:00
|
|
|
if(!withFade){
|
|
|
|
self.dom.appendChild(box);
|
|
|
|
}else{
|
|
|
|
fadeIn(self.dom, box);
|
|
|
|
}
|
2018-03-28 17:12:05 +00:00
|
|
|
|
|
|
|
// Standard box properties...
|
|
|
|
if(config.id) box.id = config.id;
|
|
|
|
if(config.x) box.style.left = config.x;
|
|
|
|
if(config.y) box.style.top = config.y;
|
|
|
|
if(config.w) box.style.width = config.w;
|
|
|
|
if(config.h) box.style.height = config.h;
|
|
|
|
if(config.hidden) box.style.display = "none";
|
|
|
|
|
2018-04-04 15:57:35 +00:00
|
|
|
// background
|
|
|
|
if(config.background){
|
|
|
|
box.style.left = "-1000px";
|
|
|
|
box.style.top = "-1000px";
|
|
|
|
box.style.width = 10000;
|
|
|
|
box.style.height = 10000;
|
|
|
|
box.style.background = config.background;
|
|
|
|
}
|
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
// words:
|
|
|
|
if(config.text){
|
|
|
|
box.innerHTML = getWords(config.text);
|
|
|
|
if(config.align) box.style.textAlign = config.align;
|
|
|
|
if(config.color) box.style.color = config.color;
|
|
|
|
}
|
|
|
|
|
|
|
|
// pics:
|
|
|
|
if(config.img){
|
|
|
|
box.classList.add("image");
|
|
|
|
box.style.backgroundImage = "url("+config.img+")"
|
|
|
|
}
|
|
|
|
|
2018-04-03 15:25:13 +00:00
|
|
|
// Sim Button
|
|
|
|
if(config.sim_button){
|
|
|
|
var simButton = SimButton(box, config.sim_button);
|
|
|
|
}
|
|
|
|
|
2018-04-01 16:34:52 +00:00
|
|
|
// Replace "next" buttons!
|
|
|
|
var next;
|
|
|
|
if(next = box.querySelector("next")){
|
|
|
|
|
|
|
|
// Create next button
|
|
|
|
var nextButton = document.createElement("div");
|
|
|
|
nextButton.className = "next_button";
|
|
|
|
nextButton.innerHTML = next.innerHTML;
|
|
|
|
nextButton.onclick = function(){
|
|
|
|
slideshow.next();
|
|
|
|
};
|
|
|
|
|
|
|
|
// Replace it in parent!
|
|
|
|
next.parentNode.replaceChild(nextButton, next);
|
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
}
|
|
|
|
|
2018-04-02 17:43:20 +00:00
|
|
|
// Replace bonus boxes...
|
|
|
|
// TODO
|
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
// Add to array
|
|
|
|
self.boxes.push(box);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
// Update & Draw... nothing
|
|
|
|
self.update = function(){};
|
|
|
|
self.draw = function(){};
|
|
|
|
|
|
|
|
///////////////////////
|
|
|
|
// HELPERS AND STUFF //
|
|
|
|
///////////////////////
|
|
|
|
|
|
|
|
self.getChildByID = function(id){
|
|
|
|
return self.boxes.find(function(box){
|
|
|
|
return box.id==id;
|
|
|
|
});
|
|
|
|
};
|
2018-04-03 17:32:26 +00:00
|
|
|
self.showChildByID = function(id, withFade){
|
2018-03-28 17:12:05 +00:00
|
|
|
var toShow = self.getChildByID(id);
|
2018-04-03 17:32:26 +00:00
|
|
|
if(!withFade){
|
|
|
|
toShow.style.display = "block";
|
|
|
|
}else{
|
|
|
|
fadeIn(self.dom, toShow);
|
|
|
|
}
|
2018-03-28 17:12:05 +00:00
|
|
|
};
|
|
|
|
self.hideChildByID = function(id){
|
|
|
|
var toHide = self.getChildByID(id);
|
|
|
|
toHide.style.display = "none";
|
|
|
|
};
|
2018-04-02 17:43:20 +00:00
|
|
|
self.removeChildByID = function(id, withFade){
|
|
|
|
|
2018-04-01 16:34:52 +00:00
|
|
|
var removeBox = self.getChildByID(id);
|
2018-04-02 17:43:20 +00:00
|
|
|
if(!withFade){
|
|
|
|
self.dom.removeChild(removeBox);
|
|
|
|
}else{
|
|
|
|
fadeOut(self.dom, removeBox);
|
|
|
|
}
|
2018-04-01 16:34:52 +00:00
|
|
|
removeFromArray(self.boxes, removeBox);
|
2018-04-02 17:43:20 +00:00
|
|
|
|
2018-04-01 16:34:52 +00:00
|
|
|
};
|
2018-03-28 17:12:05 +00:00
|
|
|
|
|
|
|
}
|
2018-04-03 15:25:13 +00:00
|
|
|
|
|
|
|
function SimButton(container, color){
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
self.container = container;
|
|
|
|
self.container.classList.add("sim_button");
|
|
|
|
|
|
|
|
// RESET
|
2018-04-03 17:32:26 +00:00
|
|
|
var resetButton = document.createElement("div");
|
|
|
|
resetButton.id = "reset_button";
|
|
|
|
resetButton.innerHTML = getWords("sim_reset");
|
|
|
|
self.container.appendChild(resetButton);
|
|
|
|
resetButton.onclick = function(){
|
2018-04-03 15:25:13 +00:00
|
|
|
if(Simulations.IS_RUNNING){
|
|
|
|
publish("sim/reset");
|
|
|
|
_updateButtonUI();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// START / NEXT
|
2018-04-03 17:32:26 +00:00
|
|
|
var startButton = document.createElement("div");
|
|
|
|
startButton.id = "start_button";
|
|
|
|
self.container.appendChild(startButton);
|
|
|
|
startButton.onclick = function(){
|
2018-04-03 15:25:13 +00:00
|
|
|
if(!Simulations.IS_RUNNING){
|
|
|
|
publish("sim/start");
|
|
|
|
_updateButtonUI();
|
|
|
|
}else{
|
|
|
|
publish("sim/next");
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// Update button UI
|
|
|
|
var _updateButtonUI = function(){
|
|
|
|
if(!Simulations.IS_RUNNING){
|
2018-04-03 17:32:26 +00:00
|
|
|
startButton.innerHTML = getWords("sim_start");
|
|
|
|
self.container.removeAttribute("active");
|
2018-04-03 15:25:13 +00:00
|
|
|
}else{
|
2018-04-03 17:32:26 +00:00
|
|
|
startButton.innerHTML = getWords("sim_next");
|
|
|
|
self.container.setAttribute("active",true);
|
2018-04-03 15:25:13 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
_updateButtonUI();
|
|
|
|
|
|
|
|
}
|