-
Notifications
You must be signed in to change notification settings - Fork 0
/
default.htm
1476 lines (1233 loc) · 61.3 KB
/
default.htm
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<head>
<meta name="author" content="Harvey Lelliott">
<title>
Mini UoM Linux
</title>
<!-- This loads the font that UOM Linux uses -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght@400;700&display=swap" rel="stylesheet">
</head>
<!-- This is where the magic happens -->
<script>
// This script sets up the onclick and dragging of desktop icons, opens
// the welcome screen, and starts the loop that keeps the clock updated
function onLoad() {
//so we only run scripts when everything is loaded
if(document.readyState == "complete") {
console.log("Loading!");
if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
alert("Functionality is limited on mobile browsers!");
}
let desktopIcons = document.getElementsByClassName("desktopIcon");
for(i=0; i < desktopIcons.length; i++) {
// Path is the directory of the folder/file that would open if clicked
let path = desktopIcons[i].getAttribute("path");
console.log("an icon on the desktop is being setup with the path: " + path);
// This sets up the object so that it can be dragged
// The first argument is the object that is to be moved
// The second argument is the area in which if we click and hold we can drag the object
dragElement(desktopIcons[i], desktopIcons[i]);
// Mobile browsers do not support double clicks, so it has to be a single click
let eventName = "dblclick";
if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
eventName = "click";
}
// This sets up the double click to open folder/file
desktopIcons[i].addEventListener(eventName, function(event) {
path = event.target.parentNode.getAttribute("path");
console.log("An icon was double clicked on the desktop: " + path);
// If the path has a "." then it must be a file
if(path.includes(".")) {
openFile(path);
} else {
newExplorerWindow(path);
}
});
}
// This runs updateClock() every 1000 milliseconds
setInterval(updateClock, 1000);
// Opens the welcome page
newWelcomePage();
}
}
// This function updates the clock
function updateClock() {
let clock = document.getElementById("systemClock");
let date = new Date();
let day = date.getDay();
let dayString = "";
switch(day) {
case(0):
dayString = "Sun";
break;
case(1):
dayString = "Mon";
break;
case(2):
dayString = "Tue";
break;
case(3):
dayString = "Wed";
break;
case(4):
dayString = "Thu";
break;
case(5):
dayString = "Fri";
break;
case(6):
dayString = "Sat";
break;
}
time = date.toTimeString().substring(0, 5);
clock.innerHTML = dayString + " " + time;
}
// This function finds the highest z index out of all windows.
// This information is needed to help put windows in "focus" above
// other windows when clicked
function findHighestZIndex() {
// Gets all of the windows
let windowElements = document.getElementsByClassName("draggableWindow");
let highest = 0;
for(let i=0; i < windowElements.length; i++) {
if(windowElements[i].style.zIndex > highest){
highest = parseInt(windowElements[i].style.zIndex);
}
}
console.log("Highest Z-Index: " + highest);
return highest;
}
// This puts the window in-front of everything else and also makes sure that it is visible
// Given the integer ID of the window
function focusWindow(windowID) {
let windowToFocus = document.getElementById("window-" + windowID);
console.log("will be made in focus: " + windowID);
windowToFocus.style.zIndex = findHighestZIndex() + 1;
windowToFocus.style.display = "block";
}
// This opens a new file manager at the given path
function newExplorerWindow(path) {
let menuBarTitle = document.createElement("div");
let programContent = "explorer.html";
// The directory that the file explorer should go to is given in program arguments
let programArguments = "directory=" + path;
// This generates the navigation buttons in the top left of the file explorer
let menuBarButtons = generateNavigationButtons("/", "");
// This makes a new window
const id = newWindow(menuBarButtons, menuBarTitle, programContent, programArguments);
// This makes a new taskbar entry for the program
newTask("resources/system-file-manager.png", "File Manager", id);
}
// This maps filenames that end in .url to URLs
function findURL(path) {
switch(path) {
case("/YouTube.url"):
return "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1";
break;
case("/Weather/Lightning.url"):
return "https://map.blitzortung.org/index.php?interactive=1&NavigationControl=1&FullScreenControl=0&Cookies=0&InfoDiv=1&MenuButtonDiv=1&ScaleControl=1&LinksCheckboxChecked=1&LinksRangeValue=5&MapStyle=2&MapStyleRangeValue=5&Advertisment=0#3/40/15";
break;
case("/Weather/Radar.url"):
return "https://embed.windy.com/embed2.html?lat=54.419&lon=-3.735&detailLat=51.496&detailLon=-0.122&width=650&height=450&zoom=5&level=surface&overlay=radar&product=radar&menu=&message=&marker=&calendar=now&pressure=true&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1";
break;
case("/Weather/Satellite.url"):
return "https://view.eumetsat.int/productviewer?v=default";
break;
case("/debug/http_test.url"):
return "http://www.httpvshttps.com/";
break;
case("/debug/https_test.url"):
return "https://www.httpvshttps.com/";
break;
case("/Videos/Tour of Campus.url"):
return "https://www.youtube.com/embed/0hupzarPMEo";
break;
case("/Key Dates.url"):
return "https://www.manchester.ac.uk/discover/key-dates/";
break;
case("/Music/Hacking Music.mp3"):
document.getElementById("main").style.backgroundImage = "url('resources/alt-wallpaper.jpg')"; // a little easter egg
return "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/707170303&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true";
break;
case("/Music/Crab Rave.mp3"):
return "https://www.youtube.com/embed/LDU_Txk06tM?autoplay=1&mute=1";
break;
case("/Pathways/Computer Science.url"):
return "https://www.cs.manchester.ac.uk/";
break;
case("/Videos/Welcome video.url"):
return "https://www.youtube.com/embed/9foPV3IGWhY";
break;
case("/Videos/Random youtube lectures.url"):
return "https://www.youtube.com/embed/watch?v=enSXh4YY9Ws&list=RDCMUCb8fvnW_oO5EsjV1X3ENS6g&start_radio=1";
break;
}
}
// These are used to tell the web browser what its previous page was
var lastBrowserFrame = "";
var nextBrowserFrame = "";
// This creates a new web browser window given the path of a file
function newBrowserWindow(path) {
//there is sometimes an issue where there are too many /'s
path = path.replaceAll("//", "/");
console.log("The path given to the browser is: " + path);
let url = findURL(path);
console.log("URL to navigate to: " + url);
// This creates the back button image and makes it go back when clicked
let menuBarButtonsBackIcon = document.createElement("img");
menuBarButtonsBackIcon.src = "resources/go-previous-symbolic.svg";
menuBarButtonsBackIcon.width = 20;
menuBarButtonsBackIcon.height = 20;
menuBarButtonsBackIcon.onclick = function(event) {
let localId = findId(event.target);
console.log("back id: " + localId);
let embeddedWindow = document.getElementById("windowContent-" + localId);
console.log("changing URL to: " + lastBrowserFrame);
embeddedWindow.src = lastBrowserFrame;
document.getElementById("windowContent-" + localId);
// This finds the URL bar and sets it to the URL
findObjectWithClassAndId("browserURLbar", localId).value = embeddedWindow.src;
};
// This contains the back button and has the boarder line
let menuBarButtonsBack = document.createElement("div");
menuBarButtonsBack.className = "menuBarButtons";
menuBarButtonsBack.appendChild(menuBarButtonsBackIcon);
// This creates the forward button image and makes it go forwards when clicked
let menuBarButtonsForwardIcon = document.createElement("img");
menuBarButtonsForwardIcon.src = "resources/go-next-symbolic.svg";
menuBarButtonsForwardIcon.width = 20;
menuBarButtonsForwardIcon.height = 20;
menuBarButtonsForwardIcon.onclick = function(event) {
let localId = findId(event.target);
console.log("forward id: " + localId);
let embeddedWindow = document.getElementById("windowContent-" + localId);
console.log("changing URL to: " + nextBrowserFrame);
embeddedWindow.src = nextBrowserFrame;
// This finds the URL bar and sets it to the URL
findObjectWithClassAndId("browserURLbar", localId).value = embeddedWindow.src;
};
// This contains the forwards button and has the boarder line
let menuBarButtonsForward = document.createElement("div");
menuBarButtonsForward.className = "menuBarButtons";
menuBarButtonsForward.appendChild(menuBarButtonsForwardIcon);
// This contains both the forwards and back buttons
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarButtonsContainer";
menuBarButtons.appendChild(menuBarButtonsBack);
menuBarButtons.appendChild(menuBarButtonsForward);
// This is the url/search box and sets up so it can be changed
let menuBarTitleURL = document.createElement("INPUT");
menuBarTitleURL.type = "text";
menuBarTitleURL.readOnly = false;
menuBarTitleURL.contentEditable = true;
menuBarTitleURL.className = "browserURLbar";
menuBarTitleURL.defaultValue = url;
menuBarTitleURL.onclick = function(e) {
// The input cannot be selected without this for some reason
e.target.select();
};
// We use this to listen for the enter key being pressed
menuBarTitleURL.onkeydown = function(event) {
var windowId = findId(event.target);
console.log("Id of clicked browser URL bar: " + windowId);
// We go to the URL if the user hits enter
if(event.key == "Enter") {
console.log("The enter button has been pressed!");
var embeddedWindow = document.getElementById("windowContent-" + windowId);
// We warn the user of the cross site scripting risk
if(!confirm("Security Risk!\n Visiting external sites in this browser is a security risk!\n Are you sure you wish to continue?")) {
return;
}
// We set this so that we can later go back to the old page
lastBrowserFrame = embeddedWindow.src;
console.log("lastBrowserFrame set as: " + lastBrowserFrame);
// This detects if the user entered a real URL, if not we Google what they typed
if(event.target.value.includes("http")) {
// If its a valid url
console.log("The user has entered a valid URL: " + event.target.value);
// Take the iframe to the new URL
embeddedWindow.src = event.target.value;
// This is set so that if we go back then forward we end up in the right place
nextBrowserFrame = event.target.value;
console.log("nextBrowserFrame set as: " + nextBrowserFrame);
} else {
// Else the URL is not valid, so we Google what they typed
// This is the formatting Google use in their search URLs
search = event.target.value.replaceAll(" ", "+");
console.log("Navigating to Google Search for: " + search);
nextBrowserFrame = "https://www.google.com/search?igu=1" + "&q=" + search;
console.log("nextBrowserFrame set as: " + nextBrowserFrame);
// This takes the iframe to the new URL
embeddedWindow.src = "https://www.google.com/search?igu=1" + "&q=" + search;
}
}
};
// This is the container for the URL bar
let menuBarTitle = document.createElement("div");
menuBarTitle.className = "menuBarTitle";
menuBarTitle.appendChild(menuBarTitleURL);
// This spawns a new window with our arguments
const id = newWindow(menuBarButtons, menuBarTitle, url, "");
// This makes a new taskbar entry for the program
newTask("resources/web-browser.png", "Web Browser", id);
}
// This function opens a weather app/info page made by Harvey Mcglashan
// The windows are basically just embedded .html to make it easy for other group members to add content
// Its a shame no other group members bothered!
function newWeatherPage() {
let programContent = "Group Member Content/Harvey Mcglashan/weather.html";
let programArguments = "";
// We don't have any custom buttons for the weather app/page
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarFileButtonsContainer";
// This creates the title which is just "Weather Info"
menuBarTitle = document.createElement("div");
menuBarTitle.className = "menuBarTitle";
menuBarTitle.innerHTML = "Weather Info";
const id = newWindow(menuBarButtons, menuBarTitle, programContent, programArguments);
// This makes a new taskbar entry for the program
newTask("resources/weather-showers-scattered.png", "Weather Info", id);
}
// This function centers a window in the middle of the desktop area, or close to it anyway
function centerWindow(id) {
desktopArea = document.getElementById("main");
targetWindow = document.getElementById("window-" + id);
targetWindow.style.top = ((desktopArea.clientHeight / 2) - (targetWindow.clientHeight/2)) + "px";
targetWindow.style.left = ((desktopArea.clientWidth / 2) - (targetWindow.clientWidth/2)) + "px";
}
// This function opens the welcome page which explains exactly what the website is
function newWelcomePage() {
let programContent = "welcomePage.html";
let programArguments = "";
// We don't have any custom buttons for the welcome page
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarFileButtonsContainer";
// This creates the title which is simply "Welcome to UoM Linux"
menuBarTitle = document.createElement("div");
menuBarTitle.className = "menuBarTitle";
menuBarTitle.innerHTML = "Welcome to Mini UoM Linux";
const id = newWindow(menuBarButtons, menuBarTitle, programContent, programArguments);
// This makes a new taskbar entry for the program
newTask("resources/text-html.png", "Welcome", id);
// Center the window in the middle of the desktop
centerWindow(id);
}
// This creates the buttons that shows the current and previous directory for the file explorer
// and also creates the back and forwards buttons
function generateNavigationButtons(path) {
console.log("The path given to generateNavigationButtons(): " + path);
// This code gives the names of the current and previous directories (without /'s)
let temp = path.substring(path.lastIndexOf("/"));
console.log("temp: " + temp);
let currentDirectoryName = temp.substring(temp.lastIndexOf("/")+1);
let currentDirectory = path;
let end = path.lastIndexOf("/");
let chopped = path.substring(0, end);
console.log("chopped: " + chopped);
let begin = chopped.lastIndexOf("/");
let parentDirectory = path.substring(end);
let parentDirectoryName = path.substring(begin+1, end);
if(chopped == "" && currentDirectoryName != "") {
parentDirectoryName = "/";
}
// This code loves to not work, so I have left this in for troubleshooting
/*
console.log("genNav: currentDirectory: " + currentDirectory);
console.log("genNav: currentDirectoryName: " + currentDirectoryName);
console.log("genNav: parentDirectory: " + parentDirectory);
console.log("genNav: parentDirectoryName: " + parentDirectoryName);
*/
// This is the code that generates the back button and sets its onclick
let backButtonContainer = document.createElement("div");
backButtonContainer.className = "menuBarButtons";
let backButtonIcon = document.createElement("img");
backButtonIcon.src = "resources/go-previous-symbolic.svg";
backButtonIcon.width = 20;
backButtonIcon.height = 20;
backButtonContainer.appendChild(backButtonIcon);
backButtonIcon.onclick = function(event) {
let localId = findId(event.target);
console.log("This explorer window should navigate back: " + localId);
let embeddedWindow = document.getElementById("windowContent-" + localId);
// If we go back and there is nothing to go back to, it will go back on a different window, because browsers are cursed
if(embeddedWindow.contentWindow.name != "/") {
console.log("We can go back!");
embeddedWindow.contentWindow.history.back();
}
};
// This is the code that generates the forwards button and sets its onclick
let forwardsButtonContainer = document.createElement("div");
forwardsButtonContainer.className = "menuBarButtons";
let forwardsButtonIcon = document.createElement("img");
forwardsButtonIcon.src = "resources/go-next-symbolic.svg";
forwardsButtonIcon.width = 20;
forwardsButtonIcon.height = 20;
forwardsButtonContainer.appendChild(forwardsButtonIcon);
forwardsButtonIcon.onclick = function(event) {
let localId = findId(event.target);
console.log("This explorer window should navigate forwards: " + localId);
let embeddedWindow = document.getElementById("windowContent-" + localId);
// If we go forward and there is nothing to go forward to, it will go forward on a different window, because browsers are cursed
if(embeddedWindow.contentWindow.name != "/") {
console.log("We can go forward!");
embeddedWindow.contentWindow.history.forward();
}
};
// This is the button/indicator that shows the parent directory
let parentDirectoryButton = document.createElement("div");
parentDirectoryButton.className = "menuBarButtons";
// Since / is our home directory
if(parentDirectoryName == "/") {
parentDirectoryButton.innerHTML = "Home";
} else {
parentDirectoryButton.innerHTML = parentDirectoryName;
}
// This is the button/indicator that shows the current directory
let currentDirectoryButton = document.createElement("div");
currentDirectoryButton.className = "menuBarButtons";
// This deals with an odd edge case
if(currentDirectoryName == "") {
currentDirectoryButton.innerHTML = "Home";
} else {
currentDirectoryButton.innerHTML = currentDirectoryName;
}
// This contains all of the generated buttons
let navigationButtons = document.createElement("div");
navigationButtons.className = "menuBarFileButtonsContainer";
navigationButtons.style.float = "left";
navigationButtons.style.marginLeft = "10px";
navigationButtons.appendChild(backButtonContainer);
if(parentDirectoryName != "") {
// Since / is our root directory we don't add the parent directory button when navigating home
navigationButtons.appendChild(parentDirectoryButton);
}
// This is the left most back button, it does the same as the other one
let menuBarButtonsBack = document.createElement("div");
menuBarButtonsBack.className = "menuBarButtons";
let menuBarButtonsBackIcon = document.createElement("img");
menuBarButtonsBackIcon.src = "resources/go-previous-symbolic.svg";
menuBarButtonsBackIcon.width = 20;
menuBarButtonsBackIcon.height = 20;
menuBarButtonsBack.appendChild(menuBarButtonsBackIcon);
menuBarButtonsBackIcon.onclick = function(event) {
let localId = findId(event.target);
console.log("This explorer window should navigate back: " + localId);
let embeddedWindow = document.getElementById("windowContent-" + localId);
// If we go back and there is nothing to go back to, it will go back on a different window, because browsers are cursed
if(embeddedWindow.contentWindow.name != "/") {
console.log("We can go back!");
embeddedWindow.contentWindow.history.back();
}
};
// This is the left most forward button, it does the same as the other one
let menuBarButtonsForwards = document.createElement("div");
menuBarButtonsForwards.className = "menuBarButtons";
let menuBarButtonsForwardsIcon = document.createElement("img");
menuBarButtonsForwardsIcon.src = "resources/go-next-symbolic.svg";
menuBarButtonsForwardsIcon.width = 20;
menuBarButtonsForwardsIcon.height = 20;
menuBarButtonsForwards.appendChild(menuBarButtonsForwardsIcon);
menuBarButtonsForwardsIcon.onclick = function(event) {
let localId = findId(event.target);
console.log("This explorer window should navigate forwards: " + localId);
let embeddedWindow = document.getElementById("windowContent-" + localId);
// If we go forward and there is nothing to go forward to, it will go forward on a different window, because browsers are cursed
if(embeddedWindow.contentWindow.name != "/") {
console.log("We can go forward!");
embeddedWindow.contentWindow.history.forward();
}
};
// This is where the left most back and forward buttons go
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarButtonsContainer";
menuBarButtons.appendChild(menuBarButtonsBack);
menuBarButtons.appendChild(menuBarButtonsForwards);
navigationButtons.appendChild(currentDirectoryButton);
navigationButtons.appendChild(forwardsButtonContainer);
menuBarButtons.appendChild(navigationButtons);
return menuBarButtons;
}
// This creates a new pdf browser window given the path of a file
// pdf windows are simply passing the pdf content through to the browser for it to handle
function newPDFwindow(filepath) {
// There is sometimes an issue where there are too many /'s and we also need to remove the first /
filepath = filepath.replaceAll("//", "/").substring(1);
console.log("PDF file to open: " + filepath);
// We don't have any custom buttons for pdf windows, its all handled by the browser
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarFileButtonsContainer";
// This creates the title which is simple the path to the file
let menuBarTitle = document.createElement("div");
menuBarTitle.className = "menuBarTitle";
menuBarTitle.innerHTML = filepath;
// We set the URL for the iframe to use as the PDF files path
let programContent = filepath;
let programArguments = "";
// This spawns a new window with our arguments
const id = newWindow(menuBarButtons, menuBarTitle, programContent, programArguments);
// This makes a new taskbar entry for the program
newTask("resources/x-office-document.png", "PDF Reader", id);
}
// This creates a new image browser window given the path of a file
// image windows are simply passing the image content through to the browser for it to handle
function newPictureWindow(filepath) {
// There is sometimes an issue where there are too many /'s and we also need to remove the first /
filepath = filepath.replaceAll("//", "/").substring(1);
console.log("picture file to open: " + filepath);
// We don't have any custom buttons for image viewer windows, its all handled by the browser
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarFileButtonsContainer";
// This creates the title which is simple the path to the file
let menuBarTitle = document.createElement("div");
menuBarTitle.className = "menuBarTitle";
menuBarTitle.innerHTML = filepath;
// We set the URL for the iframe to use as the image files path
let programContent = filepath;
let programArguments = "";
// This spawns a new window with our arguments
const id = newWindow(menuBarButtons, menuBarTitle, programContent, programArguments);
// This makes a new taskbar entry for the program
newTask("resources/x-office-drawing.png", "Picture", id);
}
function newDocumentWindow(filepath) {
// There is sometimes an issue where there are too many /'s
filepath = filepath.replaceAll("//", "/");
// This creates the "open" text and makes it open a new file explorer if clicked on
let menuBarButtonsText = document.createElement("div");
menuBarButtonsText.className = "menuBarButtons";
menuBarButtonsText.innerHTML = "Open";
menuBarButtonsText.onclick = function() {
newExplorerWindow("/");
}
// This creates the icon that goes in the open button
let menuBarButtonsIcon = document.createElement("img");
menuBarButtonsIcon.className = "menuBarButtons";
menuBarButtonsIcon.src = "resources/pan-down-symbolic.svg";
// This is the container for the button and text for the open button
let menuBarButtons = document.createElement("div");
menuBarButtons.className = "menuBarFileButtonsContainer";
menuBarButtons.appendChild(menuBarButtonsText);
menuBarButtons.appendChild(menuBarButtonsIcon);
// This makes the text that shows the name of the file that has been opened
let menuBarTitleName = document.createElement("div");
menuBarTitleName.className = "menuBarTitleName";
documentTitle = filepath.substring(filepath.lastIndexOf("/")+1, filepath.indexOf("."));
menuBarTitleName.innerHTML = documentTitle;
// This makes the text that shows the path of the file that has been opened
let menuBarTitlePath = document.createElement("div");
menuBarTitlePath.className = "menuBarTitlePath";
menuBarTitlePath.innerHTML = "~" + filepath;
// This contains the title and path of the file thats open
let menuBarTitle = document.createElement("div");
menuBarTitle.className = "menuBarTitle";
menuBarTitle.appendChild(menuBarTitleName);
menuBarTitle.appendChild(menuBarTitlePath);
// This sets the URL of the iframe
let programContent = "textedit.html";
// This will contain the path of the file we want to open, this is put in the name of the iframe window
let programArguments = "directory=" + filepath;
console.log("TextEdit given args: " + programArguments);
// This spawns a new window with our arguments
const id = newWindow(menuBarButtons, menuBarTitle, programContent, programArguments);
// This makes a new taskbar entry for the program
newTask("resources/accessories-text-editor.png", "Document", id);
}
// This function runs whenever the iframe of a window has a changed URL
// This happens when an explorer window navigates to a new directory or
// when the welcome window closes. This function is used to generate
// new navigation buttons so that they work when next pressed and to allow
// the welcome page to open a new file explorer when it's closed
function windowUpdate(localId) {
console.log("a window has a new URL. window ID: " + localId);
// This gets the window that has been clicked
let embeddedWindow = document.getElementById("windowContent-" + localId);
let url = new URL(embeddedWindow.src);
// If the windows new URL is not the same as the main domain we don't care about any updates
if(url.hostname !== window.location.hostname) {
return;
}
console.log("Window navigated to: " + embeddedWindow.contentWindow.location.pathname.toString());
// If the window has changed its URL to the cat this signals to close the window
// This is a bit of a hack, ideally I would make the programs call each other or use
// the messaging system, but this is way easier, and more fun!
// We also open a file explorer as this is currently only used by the welcome screen
// and we want the file explorer to open when they finish the welcome/tutorial screen
if(embeddedWindow.contentWindow.location.pathname.toString().endsWith("/resources/cat.webp")) {
closeWindow(localId);
newExplorerWindow("/");
return;
}
// This is so that we ignore any non-explorer windows when they change URL
if(!embeddedWindow.contentWindow.location.pathname.toString().includes("/explorer.html")) {
console.log("non-explorer window updated, ignoring!");
return;
}
// This gets the filepath of the current window from the name of the embedded window
let path = embeddedWindow.contentWindow.name;
// If the path is of a file we open the file in a new window and tell the explorer to go back to where it was
if(path.includes(".")) {
console.log("The user wants to open a file with a path of: " + path);
openFile(path);
// We need to send the iframe back to its previous URL
embeddedWindow.contentWindow.history.back();
} else {
// If we aren't dealing with a file we will need to update the navigation buttons and directory names
console.log("The user wants to open a folder with a path of: " + path);
console.log("Replacing navigation buttons and names...");
// We make new nav buttons/directory names
let newNavButtons = generateNavigationButtons(path);
// We set the id of the nav buttons/directory names so other functions can find them
newNavButtons.id = "customMenuBarButtons-" + localId;
let navButtonsParent = document.getElementById("menuBarCustomIconsContainer-" + localId);
navButtons = document.getElementById("customMenuBarButtons-" + localId);
// We remove the old nav buttons/directory names
navButtonsParent.removeChild(navButtons);
// We insert the new nav buttons/directory names
navButtonsParent.appendChild(newNavButtons);
}
}
// This opens the given file in the appropriate program
function openFile(filepath) {
console.log("Path of file to be opened in some program: " + filepath);
if(filepath.includes(".txt")) {
console.log("The file should be opened in a text editor");
newDocumentWindow(filepath);
} else if (filepath.includes(".url")) {
console.log("The file should be opened in a web browser");
newBrowserWindow(filepath);
} else if (filepath.includes(".pdf")) {
console.log("The file should be opened in a PDF reader");
newPDFwindow(filepath);
} else if (filepath.includes(".png")) {
console.log("The file should be opened in a image reader");
newPictureWindow(filepath);
} else if (filepath.includes(".jpg")) {
console.log("The file should be opened in a image reader");
newPictureWindow(filepath);
} else if (filepath.includes(".mp3")) {
console.log("The .mp3 should be opened in a browser");
newBrowserWindow(filepath)
} else if (filepath.includes(".rain")) {
console.log("The .rain should be opened in the weather app/info");
newWeatherPage();
} else {
console.log("The file type is unsupported!");
}
}
// This creates a new window given what buttons it should have, what title, what URL, and any special arguments
function newWindow(customMenuBarButtons, customMenuBarTitle, programContent, programArguments) {
// The ID of this program is based on the current time so its always unique
const id = Date.now();
console.log("New window ID: " + id);
// This sets how large the window is to be by default
let windowWidth = 800;
let windowHeight = 500;
// If the user is using a mobile browser windows should be smaller
if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
windowWidth = 500;
windowHeight = 300;
}
// This is the iframe where programs are embedded into
let embeddedWindow = document.createElement("iframe");
// This no longer seems to be necessary
// The sandbox had to be disabled as otherwise pdf files will not load in chromium based browsers due to a bug
// which is why there is a warning if you try to navigate by manually setting a URL in the browser
// embeddedWindow.sandbox = "allow-modals allow-forms allow-scripts allow-popups allow-same-origin allow-top-navigation-by-user-activation";
let embeddedWindowId = "windowContent-" + id;
embeddedWindow.id = embeddedWindowId;
embeddedWindow.className = "embeddedProgram";
// Program arguments are encodes into the URL
embeddedWindow.src = programContent + "?" + programArguments;
embeddedWindow.frameborder = "0";
// If the window changes URL a function will be called to figure out what to do
embeddedWindow.onload = function() { windowUpdate(id); };
// This makes sure that we don't have any padding or a margin
embeddedWindow.style.margin = "0px";
embeddedWindow.style.padding = "0px";
// This creates the minimize button and sets its onclick
let menuBarMin = document.createElement("img");
menuBarMin.className = "menuBarControlButtons";
menuBarMin.src = "resources/window-minimize-symbolic.svg";
menuBarMin.onclick = function(event) {
eventId = findId(event.target);
console.log("This window is to be minimized: " + eventId);
programWindow = document.getElementById("window-" + eventId);
programWindow.style.display = "none";
};
// This creates the maximize button and sets its onclick
let menuBarMax = document.createElement("img");
menuBarMax.className = "menuBarControlButtons";
menuBarMax.src = "resources/window-maximize-symbolic.svg";
// This makes the window as large as it can be and centers it
menuBarMax.onclick = function(event) {
let eventId = findId(event.target);
console.log("This window is to be maximized: " + eventId);
let programWindow = document.getElementById("window-" + eventId);
if(parseInt(programWindow.style.width) > 900) {
// If the window is already maximized this will shrink it
programWindow.style.width = 800;
programWindow.style.height = 500 - 30 - 40; //-30 and -40 account for the top menu and taskbar
} else {
programWindow.style.width = innerWidth;
programWindow.style.height = innerHeight - 30 - 40; //-30 and -40 account for the top menu and taskbar
programWindow.style.top = 30;
programWindow.style.left = 0;
}
};
// This creates the minimize button and sets its onclick
let menuBarExit = document.createElement("img");
menuBarExit.className = "menuBarControlButtons";
menuBarExit.src = "resources/window-close-symbolic.svg";
// This function finds the root of the window and then deletes it (it closes the window)
menuBarExit.onclick = function(event){
windowId = findId(event.target);
console.log("This window is to be removed: " + windowId);
closeWindow(windowId);
}
// This creates the container of the min/max/close buttons
let menuBarIconContainer = document.createElement("div");
menuBarIconContainer.style.float = "right";
menuBarIconContainer.style.height = "30px";
menuBarIconContainer.className = "menuBarControlButtonsContainer";
menuBarIconContainer.style.cursor = "default";
menuBarIconContainer.appendChild(menuBarMin);
menuBarIconContainer.appendChild(menuBarMax);
menuBarIconContainer.appendChild(menuBarExit);
// This creates the container of the custom program buttons such as the browsers back and forward buttons
let menuBarCustomIconsContainer = document.createElement("div");
menuBarCustomIconsContainer.id = "menuBarCustomIconsContainer-" + id;
menuBarCustomIconsContainer.style.float = "left";
menuBarCustomIconsContainer.style.height = "30px";
// We add the program specific icons to this window (specified in function arguments)
customMenuBarButtons.id = "customMenuBarButtons-" + id;
menuBarCustomIconsContainer.appendChild(customMenuBarButtons);
// This is the top bit of the window between the custom buttons and the program min/max/exit buttons
// This is the bit which the user can click and hold down and then move their mouse to drag the window
let menuBarMoveObject = document.createElement("div");
let draggableWindowHeaderId = "draggableWindowHeader-" + id;
menuBarMoveObject.id = draggableWindowHeaderId
menuBarMoveObject.className = "draggableWindowHeader";
menuBarMoveObject.style.minWidth = "10px;";
menuBarMoveObject.style.width = "100%";
menuBarMoveObject.style.height = "40px";
// We add the program specific title to it (specified in function arguments)
// e.g in text edit this would be the file name and the path to the file
menuBarMoveObject.appendChild(customMenuBarTitle);
// This will contain all the custom buttons, the title area, and the min/max/exit buttons
let menuBarContainer = document.createElement("div");
let menuBarContainerId = "windowMenuBar-" + id;
menuBarContainer.id = menuBarContainerId;
menuBarContainer.className = "windowMenuBar"
menuBarContainer.appendChild(menuBarCustomIconsContainer);
menuBarContainer.appendChild(menuBarIconContainer);
menuBarContainer.appendChild(menuBarMoveObject);
// This creates the child of the window object
// This exists so that the gap between it and its parent can be used for expanding/shrinking the window
let draggableObjectId = "draggableWindow-" + id;
let innerWindowHTML = document.createElement("div");
innerWindowHTML.id = draggableObjectId;
innerWindowHTML.className = "draggableWindowInner";
innerWindowHTML.appendChild(menuBarContainer);
innerWindowHTML.appendChild(embeddedWindow);
// If the user is on a mobile browser the padding needs to be bigger so they can resize
innerWindowHTML.style.padding = "5px";
if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
innerWindowHTML.style.padding = "15px";
}
// This creates the main window object, this is the parent of all the window content
// The bit of this div that is exposed acts as the area you drag to expand or shrink it
let windowHTML = document.createElement("div");
let windowHTMLId = "window-" + id;
windowHTML.className = "draggableWindow";
windowHTML.id = windowHTMLId;
windowHTML.style.position = "absolute";
windowHTML.style.cursor = "n-resize";
windowHTML.style.background = "#F2F2F2";
windowHTML.style.width = windowWidth;
windowHTML.style.height = windowHeight;
// This puts the new window above everything else so its in focus
windowHTML.style.zIndex = findHighestZIndex() + 1;
windowHTML.appendChild(innerWindowHTML);
let mainPage = document.getElementById("main");
// This adds the new window to the main page
mainPage.appendChild(windowHTML);
// This executes the code that makes this window movable
// the first argument is the window that is to be moved
// the second argument is the area in which if we click and hold we can drag the window
dragElement(document.getElementById(windowHTMLId), document.getElementById(draggableWindowHeaderId));
// This executes the code that makes this window expandable and shrinkable
// the first argument is the area that is to be expanded/shrunk
// the second argument is the area in which if we click and hold we can resize the window
expandShrinkElement(document.getElementById(windowHTMLId), document.getElementById(draggableObjectId));
return id;
}
// This closes/removes a window and removes its entry in the taskbar
function closeWindow(id) {
document.getElementById("window-" + id).remove();
document.getElementById("taskId-" + id).remove();
}
// This creates a task and puts it on the taskbar
function newTask(icon, text, windowID) {
console.log("We are adding a program to the taskbar with this id: " + windowID);
let taskbar = document.getElementById("tasks_container");
let taskContainer = document.createElement("div");
taskContainer.className = "task_container";
let taskId = "taskId-" + windowID;
console.log("The new task is to be assigned the ID: " + taskId);
taskContainer.id = taskId
// If a task is clicked on it will put its associated window in focus
taskContainer.onclick = function() {
focusWindow(windowID);
};
// This sets up the task icon
let taskIcon = document.createElement("img");
taskIcon.src = icon;
taskIcon.className = "task_icon";
// If a task is clicked on it will put its associated window in focus
taskIcon.onclick = function() {
focusWindow(windowID);
};
// This sets up the name of the task
let taskText = document.createElement("div");
taskText.className = "task_text";
taskText.innerHTML = text;
// If a task is clicked on it will put its associated window in focus
taskText.onclick = function() {
focusWindow(windowID);
};
// This adds the task name and task icon to the task container
taskContainer.appendChild(taskIcon);
taskContainer.appendChild(taskText);
// This adds the new task to the taskbar
taskbar.appendChild(taskContainer);
}
// This function will check its parent, then its parent, then its parent, until it finds a numeric id
function findId(element) {
let parent = element;
while(parent.id.replace(/[^0-9]/g, "") == "") {
parent = parent.parentNode;
}
console.log("an id for this window has been found: " + parent.id);
return parseInt(parent.id.replace(/[^0-9]/g, ""));
}
// Given a class name it will find the ID of a parent and if it matches it will return that object
// This is used to get the object of the title bar in the browser, it doesn't have an ID but its parent
// does, and we need to make sure we get the right browser title
function findObjectWithClassAndId(className, searchId) {
let searchPool = document.getElementsByClassName(className);
for(i=0; i < searchPool.length; i++) {
if(findId(searchPool[i]) == searchId) {
return searchPool[i];
}
}
}
// This is used so that we don't select other windows or their iframes while dragging or resizing
function makeAllWindowsUnselectable() {
let parentWindows = document.getElementsByClassName("draggableWindow");
for(i=0; i < parentWindows.length; i++) {
parentWindows[i].style.pointerEvents = "none";
}
let embeddedWindows = document.getElementsByClassName("embeddedProgram");
for(i=0; i < embeddedWindows.length; i++) {
embeddedWindows[i].style.pointerEvents = "none";
}
}
// This makes all windows selectable again
function makeAllWindowsSelectable() {
let parentWindows = document.getElementsByClassName("draggableWindow");
for(i=0; i < parentWindows.length; i++) {
parentWindows[i].style.pointerEvents = "all";
}
let embeddedWindows = document.getElementsByClassName("embeddedProgram");
for(i=0; i < embeddedWindows.length; i++) {
embeddedWindows[i].style.pointerEvents = "all";