Skip to content
Permalink
Browse files

Open URLs in Explorer

- Add icons for HTML (and C:)
- Enable editing in the address bar (no Go button but Enter)
- Open URLs in explorer, with Wayback Machine URL prefixing that targets snapshots near 1998 (mainly because of major websites serving X-Frame-Options! but also for those retro vibes and nostalgia)
- Open .url files in explorer
- Make all the desktop icons that previously opened external links now open Explorer windows
  • Loading branch information
1j01 committed Apr 11, 2018
1 parent 669d10a commit 9d7bef085020c3452b20a2723abbe4787b954234
@@ -76,9 +76,21 @@
"fonts-folder-16x16.png": null,
"fonts-folder-32x32.png": null,
"fonts-folder-48x48.png": null,
"hard-disk-drive-16x16-higher-color.png": null,
"hard-disk-drive-16x16.png": null,
"hard-disk-drive-32x32-higher-color.png": null,
"hard-disk-drive-32x32.png": null,
"hard-disk-drive-48x48-higher-color.png": null,
"hard-disk-drive-48x48.png": null,
"help-16x16.png": null,
"help-32x32.png": null,
"help-48x48.png": null,
"html-16x16-higher-color.png": null,
"html-16x16.png": null,
"html-32x32-higher-color.png": null,
"html-32x32.png": null,
"html-48x48-higher-color.png": null,
"html-48x48.png": null,
"image-gif-16x16.png": null,
"image-gif-32x32.png": null,
"image-jpeg-16x16.png": null,
@@ -210,6 +222,7 @@
"video-16x16.png": null,
"video-32x32.png": null,
"warning-32x32.png": null,
"win98_icons - Shortcut.lnk": null,
"winamp2-16x16.png": null,
"winamp2-32x32.png": null,
"windows-93-16x16.png": null,
@@ -244,6 +257,20 @@
"pep.js": null
},
"mstile-150x150.png": null,
"my-documents": {
"Dropbox.url": null,
"Google Docs.url": null
},
"my-pictures": {
"Dropbox.url": null,
"Flickr.url": null,
"Google Photos.url": null,
"Instagram.url": null
},
"network-neighborhood": {
"Windows 93.url": null,
"Windows 98 (Virtual x86).url": null
},
"npm-debug.log.1388102379": null,
"package-lock.json": null,
"package.json": null,
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -114,6 +114,7 @@ html, body {
}
.task img {
padding-right: 4px;
flex: 0 0 auto;
}
.desktop,
.folder-view,
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://www.dropbox.com/home
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://docs.google.com/
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://www.dropbox.com/home
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://www.flickr.com/
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://photos.google.com/
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://www.instagram.com/
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://windows93.net/
@@ -0,0 +1,2 @@
[InternetShortcut]
URL=https://copy.sh/v86/?profile=windows98
@@ -11,7 +11,4 @@ I don't know.

- Fix functional rectangle for marquee selection (needs to account for address bar)
- Prevent text selection
- Make folders open with explorer (externally)
- Navigate to folders within explorer
- Open webpages
- Add menus and toolbars
@@ -17,6 +17,9 @@ body {
background: white;
overflow: auto; /* TODO: should the folder-view have overflow: auto instead? */
}
#content iframe {
flex: 1;
}
.desktop-icon .title {
background: white;
color: black;
@@ -9,53 +9,126 @@ function parse_query_string(queryString) {
return query;
}

function folder_display_name_from_path(folder_path) {
if(folder_path === "/"){
function set_title(title){
document.title = title;

if(frameElement){
frameElement.$window.title(document.title);
}
}

function set_icon(icon_id) {
document.querySelector("link[rel~=icon]").href = getIconPath(icon_id, 16)
if(frameElement){
// frameElement.$window.$icon.attr("src", getIconPath(icon_id, TITLEBAR_ICON_SIZE));
frameElement.$window.setIconByID(icon_id);
}
}

function get_display_name_for_address(address) {
// TODO: maintain less of a fake naming association list / whatever
// base it more on the actual filesystem
if(address === "/"){
return "(C:)";
}else if(address === "/my-pictures/"){
return "My Pictures";
}else if(address === "/my-documents/"){
return "My Documents";
}else if(address === "/network-neighborhood/"){
return "Network Neighborhood";
}else if(address === "/desktop/"){
return "Desktop";
}else if(address === "/programs/"){
return "Program Files";
}else if(address.match(/\w+:\/\//)){
return address;
}else{
return file_name_from_path(address.replace(/[\/\\]$/, ""));
}
}

function get_icon_for_address(address) {
// TODO: maintain less of a fake association list thing / whatever
// base it more on the actual filesystem
if(address === "/"){
// return "my-computer";
return "hard-disk-drive";
// }else if(address === "/my-pictures/"){
// return "my-pictures";
}else if(address === "/my-documents/"){
return "my-documents";
}else if(address === "/network-neighborhood/"){
return "network";
}else if(address === "/desktop/"){
return "desktop";
}else if(address.match(/^\w+:\/\//) || address.match(/\.html?$/)){
return "html";
}else{
return file_name_from_path(folder_path.replace(/[\/\\]$/, ""));
return "folder-open";
}
}

var $folder_view;
var go_to = function(folder_path){
var $folder_view, $iframe;
var go_to = function(address){
if($folder_view){
$folder_view.remove();
$folder_view = null;
}
if($iframe){
$iframe.remove();
$iframe = null;
}

folder_path = folder_path || "/";
if(folder_path[folder_path.length - 1] !== "/"){
folder_path += "/";
address = address || "/";
var is_url = !!address.match(/\w+:\/\//);
if(is_url){
if(!address.match(/^https?:\/\/web.archive.org\/web\//)){
// TODO: maybe only do this if the page fails to load?
// or at least don't force it
// maybe do it the other way around, if the archive URL fails to load, try to show an up to date version
address = "http://web.archive.org/web/1998/" + address;
}
}else{
// TODO: open html files! and other files. (check if it's a file or folder!)
if(address[address.length - 1] !== "/"){
address += "/";
}
}

$("#address").val(folder_path);
$("#address").val(address);

var folder_name = folder_display_name_from_path(folder_path);
set_title(folder_name);

$folder_view = $FolderView(folder_path).appendTo("#content");
};
set_title(get_display_name_for_address(address));
set_icon(get_icon_for_address(address));

var query = parse_query_string(location.search);
if(query.path){
go_to(query.path);
}else{
go_to("/");
}
if(is_url){
$iframe = $("<iframe>").attr({
src: address,
allowfullscreen: "allowfullscreen",
sandbox: "allow-same-origin allow-scripts allow-forms",
}).appendTo("#content");

function set_title(title){
console.log(title);
document.title = title;
// If only we could access the contentDocument cross-origin
// For https://archive.is/szqQ5
// $iframe.on("load", function(){
// $($iframe[0].contentDocument.getElementById("CONTENT")).css({
// position: "absolute",
// left: 0,
// top: 0,
// right: 0,
// bottom: 0,
// });
// });

if(frameElement){
frameElement.$window.title(document.title);
// We also can't inject a user agent stylesheet, for things like scrollbars
// Too bad :/
}else{
$folder_view = $FolderView(address).appendTo("#content");
}
}
};

// called from $FolderView
function executeFile(file_path){
// I don't think this w/ fs is necessary
// I don't think this withfs is necessary
withFilesystem(function(){
var fs = BrowserFS.BFSRequire("fs");
fs.stat(file_path, function(err, stats){
@@ -65,8 +138,7 @@ function executeFile(file_path){
if(stats.isDirectory()){
go_to(file_path);
}else{
// TODO: navigate to folders
// Note: can either check frameElement or parent !== window
// (can either check frameElement or parent !== window, but not parent by itself)
if(frameElement){
parent.executeFile(file_path);
}else{
@@ -76,3 +148,20 @@ function executeFile(file_path){
});
});
}

$(function(){
var query = parse_query_string(location.search);
// prevent our (potentially existing) iframe from blocking the iframe we're *inside* from blocking the *window* we're inside from showing up until the page loads
setTimeout(function(){
if(query.address){
go_to(query.address);
}else{
go_to("/");
}
$("#address").on("keydown", function(e){
if(e.which === 13){
go_to($("#address").val());
}
});
});
});
@@ -23,12 +23,10 @@
<body>
<div id="address-bar">
<!-- TODO: compound input with icon and dropdown -->
<input type="text" id="address" readonly/>
<input type="text" id="address"/>
</div>
<!-- TODO: back forwards up cut copy paste undo delete properties view -->
<div id="content">

</div>
<script src="explorer.js"></script>
<div id="content"></div>
<!-- TODO: status bar including thing that says "Internet" or -->
</body>
</html>
@@ -38,6 +38,9 @@ var file_extension_icons = {
wma: "sound",
// "doc": "doc"?
"exe": "task", // TODO: look inside exe for icons
htm: "html",
html: "html",
url: "html",
};

function $FolderView(folder_path) {
@@ -220,7 +223,8 @@ function $FolderView(folder_path) {
title: file_name,
// icon: $IconByPathPromise(get_icon_for_file_path(file_path), DESKTOP_ICON_SIZE),
icon: $IconByIDPromise(get_icon_for_file_path(file_path), DESKTOP_ICON_SIZE),
open: function(){ executeFile(file_path); }
open: function(){ executeFile(file_path); },
shortcut: file_path.match(/\.url$/)
}).appendTo($folder_view).css({
left: x,
top: y,
@@ -170,6 +170,14 @@ function $Window(options){
return $w.$title.text();
}
};
$w.setIconByID = function(icon_name){
// $w.$icon.attr("src", getIconPath(icon_name));
var old_$icon = $w.$icon;
$w.$icon = $Icon(icon_name, TITLEBAR_ICON_SIZE);
old_$icon.replaceWith($w.$icon);
$w.triggerHandler("icon-change");
return $w;
};
$w.close = function(force){
if(!force){
var e = $.Event("close");
@@ -6,6 +6,10 @@ function Task($win){
$win.on("title-change", function(e){
$title.text($win.title());
});
$win.on("icon-change", function(e){
// $icon = ... needed so changing works multiple times
$icon.replaceWith($icon = $win.$icon.clone()); // XXX: assuming TITLEBAR_ICON_SIZE === TASKBAR_ICON_SIZE
});
$task.append($icon, $title);
$task.on("click", function(){
$task.toggleClass("selected");

0 comments on commit 9d7bef0

Please sign in to comment.
You can’t perform that action at this time.