UnityProgress.js
3.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
function UnityProgress (dom) {
this.progress = 0.0;
this.message = "";
this.dom = dom;
var parent = dom.parentNode;
var background = document.createElement("div");
background.style.background = "#FFFFFF";
background.style.position = "absolute";
parent.appendChild(background);
this.background = background;
var logoImage = document.createElement("img");
logoImage.src = "TemplateData/progresslogo.png";
logoImage.style.position = "absolute";
parent.appendChild(logoImage);
this.logoImage = logoImage;
var progressFrame = document.createElement("img");
progressFrame.src = "TemplateData/loadingbar.png";
progressFrame.style.position = "absolute";
parent.appendChild(progressFrame);
this.progressFrame = progressFrame;
var progressBar = document.createElement("img");
progressBar.src = "TemplateData/fullbar.png";
progressBar.style.position = "absolute";
parent.appendChild(progressBar);
this.progressBar = progressBar;
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.progressBar.style.top = this.progressFrame.style.top;
this.progressBar.style.left = this.progressFrame.style.left;
this.progressBar.width = progressFrameImg.width * Math.min(this.progress, 1);
this.progressBar.height = progressFrameImg.height;
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 ();
}