173 lines
3.7 KiB
JavaScript
173 lines
3.7 KiB
JavaScript
/******************************
|
|
|
|
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);
|
|
if(box.kill) box.kill();
|
|
});
|
|
self.boxes = [];
|
|
};
|
|
|
|
// Add Box
|
|
self.add = function(config, withFade){
|
|
|
|
// Add to DOM
|
|
var box = document.createElement("div");
|
|
box.className = "box";
|
|
if(!withFade){
|
|
self.dom.appendChild(box);
|
|
}else{
|
|
fadeIn(self.dom, box);
|
|
}
|
|
|
|
// Standard box properties...
|
|
if(config.id) box.id = config.id;
|
|
if(config.x) box.style.left = config.x + "px";
|
|
if(config.y) box.style.top = config.y + "px";
|
|
if(config.w) box.style.width = config.w + "px";
|
|
if(config.h) box.style.height = config.h + "px";
|
|
if(config.hidden) box.style.display = "none";
|
|
|
|
// background
|
|
if(config.background){
|
|
box.style.left = "-1000px";
|
|
box.style.top = "-1000px";
|
|
box.style.width = 10000 + "px";
|
|
box.style.height = 10000 + "px";
|
|
box.style.background = config.background;
|
|
}
|
|
|
|
// 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;
|
|
if(config.fontSize) box.style.fontSize = config.fontSize;
|
|
if(config.lineHeight) box.style.lineHeight = config.lineHeight;
|
|
}
|
|
|
|
// pics:
|
|
if(config.img){
|
|
box.classList.add("image");
|
|
box.style.backgroundImage = "url("+config.img+")"
|
|
}
|
|
|
|
// Sim UI
|
|
if(config.sim_ui){
|
|
var simUI = new SimUI(box, config.sim_ui);
|
|
}
|
|
|
|
// Sandbox UI
|
|
if(config.sandbox){
|
|
var sandboxUI = new SandboxUI(box);
|
|
}
|
|
|
|
// 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(){
|
|
publish("sound/button");
|
|
slideshow.next();
|
|
};
|
|
|
|
// to prevent sim from resetting...
|
|
_stopPropButton(nextButton);
|
|
|
|
// Replace it in parent!
|
|
next.parentNode.replaceChild(nextButton, next);
|
|
|
|
}
|
|
|
|
// Add onclicks to "ref"s!
|
|
box.querySelectorAll("ref").forEach(function(ref){
|
|
ref.onclick = function(){
|
|
var id = ref.id;
|
|
publish("reference/show",[id]);
|
|
};
|
|
_stopPropButton(ref);
|
|
});
|
|
|
|
// Bonus boxes...
|
|
box.querySelectorAll("bon").forEach(function(bon){
|
|
var title = $("bonus#"+bon.id+" > h3").innerHTML.trim();
|
|
bon.innerHTML = title;
|
|
bon.onclick = function(){
|
|
publish("bonus/show", [bon.id]);
|
|
};
|
|
_stopPropButton(bon);
|
|
});
|
|
|
|
// Replace icons
|
|
box.querySelectorAll("icon").forEach(function(icon){
|
|
|
|
// Create next button
|
|
var name = icon.getAttribute("name");
|
|
var src = "sprites/icons/"+name+".png";
|
|
var img = new Image();
|
|
img.src = src;
|
|
img.className = "peep_icon";
|
|
|
|
// Replace it in parent!
|
|
icon.parentNode.replaceChild(img, icon);
|
|
|
|
});
|
|
|
|
// 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;
|
|
});
|
|
};
|
|
self.showChildByID = function(id, withFade){
|
|
var toShow = self.getChildByID(id);
|
|
if(!withFade){
|
|
toShow.style.display = "block";
|
|
}else{
|
|
fadeIn(self.dom, toShow);
|
|
}
|
|
};
|
|
|
|
self.removeChildByID = function(id, withFade){
|
|
|
|
var removeBox = self.getChildByID(id);
|
|
if(!withFade){
|
|
self.dom.removeChild(removeBox);
|
|
}else{
|
|
fadeOut(self.dom, removeBox);
|
|
}
|
|
removeFromArray(self.boxes, removeBox);
|
|
if(removeBox.kill) removeBox.kill();
|
|
|
|
};
|
|
|
|
}
|