Skip to content

Commit 7a44c3f

Browse files
author
crispytx
committed
Merge pull request #28 from crispytx/a-branch
cleaned up index.html, added better comments
2 parents d2cc404 + f43c582 commit 7a44c3f

File tree

1 file changed

+43
-24
lines changed

1 file changed

+43
-24
lines changed

‎index.html‎

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -90,25 +90,22 @@ <h1 id="h1" onclick="goHome();">tube.php</h1>
9090
<form id="upload_form" enctype="multipart/form-data" method="post">
9191
<input type="file" name="file1" id="file1"><br>
9292
<input type="button" name="hiddenUploadBtn" id="hiddenUploadBtn" value="Upload File" onclick="uploadFile()"><br>
93-
<h3 id="status"></h3>
94-
<p id="loaded_n_total"></p>
9593
</form>
9694
</div>
9795
<div id="movieContent">
9896
</div>
9997
</div> <!-- END TAG FOR <div id="allContent"> -->
10098
<script>
99+
// The goHome() function returns the user to initial user-interface state - "homepage"
101100
function goHome() {
102101
buttonClickStatus = false;
103102
document.getElementById('allContent').innerHTML = "";
104-
document.getElementById('allContent').innerHTML += '<h1 id="h1" onclick="goHome();">tube.php</h1><div id="mainContent"><div id="btn-wrapper"><button class="btn" id="left-btn" onclick="leftButtonFunction();">Watch Movies</button><button class="btn" id="right-btn" onclick="rightButtonFunction();">Upload Movies</button></div><br><br><center><progress id="progressBar" value="0" max="100" style="visibility: hidden;"></progress></center><br><form id="upload_form" enctype="multipart/form-data" method="post"><input type="file" name="file1" id="file1"><br><input type="button" name="hiddenUploadBtn" id="hiddenUploadBtn" value="Upload File" onclick="uploadFile()"><br><h3 id="status"></h3><p id="loaded_n_total"></p></form></div><div id="movieContent"></div>';
105-
}
106-
function _(el) {
107-
return document.getElementById(el);
103+
document.getElementById('allContent').innerHTML += '<h1 id="h1" onclick="goHome();">tube.php</h1><div id="mainContent"><div id="btn-wrapper"><button class="btn" id="left-btn" onclick="leftButtonFunction();">Watch Movies</button><button class="btn" id="right-btn" onclick="rightButtonFunction();">Upload Movies</button></div><br><br><center><progress id="progressBar" value="0" max="100" style="visibility: hidden;"></progress></center><br><form id="upload_form" enctype="multipart/form-data" method="post"><input type="file" name="file1" id="file1"><br><input type="button" name="hiddenUploadBtn" id="hiddenUploadBtn" value="Upload File" onclick="uploadFile()"><br></form></div><div id="movieContent"></div>';
108104
}
105+
// the uploadFile() function POSTS video files to the "tube.php" script
109106
function uploadFile() {
110107
var title = prompt("Please Enter a Title for This Movie");
111-
var file = _("file1").files[0];
108+
var file = document.getElementById("file1").files[0];
112109
console.log("file name: " + file.name);
113110
console.log("file size: " + file.size);
114111
console.log("file type: " + file.type);
@@ -124,22 +121,26 @@ <h3 id="status"></h3>
124121
ajax.send(formdata);
125122
document.getElementById('progressBar').style = "width: 65%; visibility: visible;";
126123
}
124+
// the progressHandler() function updates the HTML5 progress bar as files are uploaded
127125
function progressHandler(event) {
128-
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
129126
var percent = (event.loaded / event.total) * 100;
130-
_("progressBar").value = Math.round(percent);
131-
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
127+
document.getElementById("progressBar").value = Math.round(percent);
132128
}
129+
// the completeHandler() function notifies the user when the file upload is complete
130+
// BUG NOTICE: There is lag time between when the progressBar reaches 100%, and the "Upload Complete :)" alert is triggered.
133131
function completeHandler(event) {
134132
alert("Upload Complete :)");
135133
document.getElementById('progressBar').style = "visibility: hidden;";
136-
}
134+
}
135+
// the errorHandler function triggers an error message when uploads fail
137136
function errorHandler(event) {
138-
_("status").innerHTML = "Upload Failed";
137+
alert("PC LOAD LETTER"); // upload failed
139138
}
139+
// the abortHandler function triggers an error message when uploads are aborted
140140
function abortHandler(event) {
141-
_("status").innerHTML = "Upload Aborted";
141+
alert("PC LOAD LETTER"); // upload aborted
142142
}
143+
// The requestHTML function requests HTML5 <video> via AJAX
143144
function requestHTML(url) {
144145
var httpRequest = new XMLHttpRequest();
145146
httpRequest.open("GET", url, true);
@@ -153,22 +154,41 @@ <h3 id="status"></h3>
153154
}
154155
httpRequest.send();
155156
}
157+
// the variable buttonClickStatus moniters the user-interface state for this single page application
156158
var buttonClickStatus = false;
159+
/*
160+
161+
~ User Interface Code ~
162+
163+
This single page application's userinterface consists of only 3 buttons:
164+
* a left button
165+
* a right button
166+
* and an h1 header (<h1>tube.php</h1>) that serves as a "homepage" button
167+
168+
When a user clicks the "homepage" button (h1 header), the goHome() function is triggered
169+
by an onclick attribute of the h1 header.
170+
171+
The left button will either display movies, or trigger "select file" event, depending
172+
on the user-interface state (clickButtonStatus).
173+
174+
The right button will either change the user-interface state, or trigger an "upload file"
175+
event depending upon the status of buttonClickStatus variable.
176+
177+
*/
157178
function rightButtonFunction() {
158179
if (buttonClickStatus == false) {
159180
document.getElementById('left-btn').innerHTML = "Select File";
160181
document.getElementById('right-btn').innerHTML = "Upload File";
161182
buttonClickStatus = true;
162183
} else {
163-
document.getElementById('hiddenUploadBtn').click();
184+
document.getElementById('hiddenUploadBtn').click(); // UPLOAD FILE EVENT
164185
}
165186
}
166187
function leftButtonFunction() {
167188
if (buttonClickStatus == true) {
168-
document.getElementById("file1").click();
189+
document.getElementById("file1").click(); // SELECT FILE EVENT
169190
} else {
170-
// watch movies
171-
// AJAX -------------------------------------------------------------------------------------------
191+
// DISPLAY MOVIES VIA AJAX
172192
var httpRequest = new XMLHttpRequest();
173193
var url = "movies.php"
174194
httpRequest.open("GET", url, true);
@@ -177,25 +197,24 @@ <h3 id="status"></h3>
177197
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
178198
var dataReturned = JSON.parse(httpRequest.responseText);
179199
var numberOfMovies = dataReturned.movies.length;
180-
document.getElementById('mainContent').innerHTML = ""; // remove everything but h1
181-
for (i = 0; i < numberOfMovies; i++) {
200+
document.getElementById('mainContent').innerHTML = ""; // CLEAR MAIN CONTENT
201+
for (i = 0; i < numberOfMovies; i++) { // DISPLAY MOVIE TITLES
182202
var abc = i.toString();
183203
document.getElementById('movieContent').innerHTML += "<p class=\"movieClass\" id=\"" + abc + "\">" + dataReturned.movies[i].title + "</p>";
184204

185205
}
186-
for (i = 0; i < numberOfMovies; i++) {
206+
for (i = 0; i < numberOfMovies; i++) { // CREATE ONCLICK EVENT FUNCTIONS FOR MOVIE TITLES
187207
document.getElementById(i.toString()).onclick = function() {
188208
var xyz = dataReturned.movies[this.id].filename.slice(0, -4) + ".html";
189209
console.log("hypertext $filename: " + xyz);
190-
requestHTML(xyz);
210+
requestHTML(xyz); // ONCLICK EVENT FUNCTIONS DISPLAY HTML5 <video>
191211
};
192212
}
193213
}
194214
}
195215
httpRequest.send();
196-
// END AJAX CALL -----------------------------------------------------------------------------------
197-
} // end bracket for else statement;
198-
}// end bracket for leftButtonFunction()
216+
}
217+
}
199218
</script>
200219
</body>
201220
</html>

0 commit comments

Comments
 (0)