content/hifi-content/caitlyn/scratch/unityUITests/TemplateData/UnityProgress.js
2022-02-13 22:19:19 +01:00

122 lines
No EOL
4.4 KiB
JavaScript

function UnityProgress (dom) {
this.progress = 0.0;
this.message = "";
this.dom = dom;
var parent = dom.parentNode;
var background = document.createElement("div");
background.style.background = Module["backgroundColor"] ? Module["backgroundColor"] : "#4D4D4D";
background.style.position = "absolute";
background.style.overflow = "hidden";
parent.appendChild(background);
this.background = background;
if (Module["backgroundImage"])
{
var backgroundImg = document.createElement("img");
backgroundImg.src = Module["backgroundImage"];
backgroundImg.style.position = "absolute";
backgroundImg.style.width = "100%";
backgroundImg.style.height = "auto";
backgroundImg.style.top = "50%";
backgroundImg.style.transform = "translate(0, -50%)";
background.appendChild(backgroundImg);
}
var logoImage = document.createElement("img");
var splashStyle = Module["splashStyle"] ? Module["splashStyle"] : "Light";
logoImage.src = "TemplateData/Logo." + splashStyle + ".png";
logoImage.style.position = "absolute";
parent.appendChild(logoImage);
this.logoImage = logoImage;
var progressFrame = document.createElement("img");
progressFrame.src = "TemplateData/ProgressFrame." + splashStyle + ".png";
progressFrame.style.position = "absolute";
parent.appendChild(progressFrame);
this.progressFrame = progressFrame;
var progressBar = document.createElement("div");
progressBar.style.position = "absolute";
progressBar.style.overflow = "hidden";
parent.appendChild(progressBar);
this.progressBar = progressBar;
var progressBarImg = document.createElement("img");
progressBarImg.src = "TemplateData/ProgressBar." + splashStyle + ".png";
progressBarImg.style.position = "absolute";
progressBar.appendChild(progressBarImg);
this.progressBarImg = progressBarImg;
var messageArea = document.createElement("p");
messageArea.style.position = "absolute";
parent.appendChild(messageArea);
this.messageArea = messageArea;
this.SetProgress = function (progress) {
if (this.progress < progress)
this.progress = progress;
this.messageArea.style.display = "none";
this.progressFrame.style.display = "inline";
this.progressBar.style.display = "inline";
this.Update();
}
this.SetMessage = function (message) {
this.message = message;
this.background.style.display = "inline";
this.logoImage.style.display = "inline";
this.progressFrame.style.display = "none";
this.progressBar.style.display = "none";
this.Update();
}
this.Clear = function() {
this.background.style.display = "none";
this.logoImage.style.display = "none";
this.progressFrame.style.display = "none";
this.progressBar.style.display = "none";
}
this.Update = function() {
this.background.style.top = this.dom.offsetTop + 'px';
this.background.style.left = this.dom.offsetLeft + 'px';
this.background.style.width = this.dom.offsetWidth + 'px';
this.background.style.height = this.dom.offsetHeight + 'px';
var logoImg = new Image();
logoImg.src = this.logoImage.src;
var progressFrameImg = new Image();
progressFrameImg.src = this.progressFrame.src;
this.logoImage.style.top = this.dom.offsetTop + (this.dom.offsetHeight * 0.5 - logoImg.height * 0.5) + 'px';
this.logoImage.style.left = this.dom.offsetLeft + (this.dom.offsetWidth * 0.5 - logoImg.width * 0.5) + 'px';
this.logoImage.style.width = logoImg.width+'px';
this.logoImage.style.height = logoImg.height+'px';
this.progressFrame.style.top = this.dom.offsetTop + (this.dom.offsetHeight * 0.5 + logoImg.height * 0.5 + 10) + 'px';
this.progressFrame.style.left = this.dom.offsetLeft + (this.dom.offsetWidth * 0.5 - progressFrameImg.width * 0.5) + 'px';
this.progressFrame.width = progressFrameImg.width;
this.progressFrame.height = progressFrameImg.height;
this.progressBarImg.style.top = '0px';
this.progressBarImg.style.left = '0px';
this.progressBarImg.width = progressFrameImg.width;
this.progressBarImg.height = progressFrameImg.height;
this.progressBar.style.top = this.progressFrame.style.top;
this.progressBar.style.left = this.progressFrame.style.left;
this.progressBar.style.width = (progressFrameImg.width * this.progress) + 'px';
this.progressBar.style.height = progressFrameImg.height + 'px';
this.messageArea.style.top = this.progressFrame.style.top;
this.messageArea.style.left = 0;
this.messageArea.style.width = '100%';
this.messageArea.style.textAlign = 'center';
this.messageArea.innerHTML = this.message;
}
this.Update ();
}