text editing app

Question

I need suggestions.

var textarea = document.getElementById("textarea"),
 filename = prompt("Name this note:", "untitled");
if (filename == null) {
 window.close();
} else if (filename == "") {
 filename = "untitled";
};
document.title = filename + ".txt";
function Rename() { // Rename note
 filename = document.title.substr(0, document.title.lastIndexOf("."));
 filename = prompt("Rename this note:", filename);
 if (filename != null && filename != "") {
 document.title = filename + ".txt";
 }
};
function Save() { // Save note
 var blob = new Blob([textarea.value], {
 type: "text/plain;charset=utf-8"
 });
 saveAs(blob, document.title);
};
function Email() { // Email note
 var to = prompt("Enter the recipient\'s email id", "[email protected]"),
 link = "mailto:" + to + "?subject=" + document.title + "&body=" + encodeURIComponent(textarea.value);
 if (to != null && to != "") {
 window.open(link);
 }
};
/*function popupWin() { // Open as popup window
 var data = textarea.value;
 var popup = window.open(window.location.href, "", "height=480,width=500,resizable=yes,location=no,status=no,toolbar=no");
 popup.window.textarea.value = data;
};
*/
function Open() { // Open a file
 document.getElementById("selected_file").click();
}
function loadFileAsText() { //File loader
 var selected_file = document.getElementById("selected_file").files[0];
 var fileReader = new FileReader();
 fileReader.onloadend = function(e) {
 if (e.target.readyState == FileReader.DONE) {
 document.title = selected_file.name;
 textarea.value = e.target.result;
 textarea.focus();
 }
 };
 fileReader.readAsText(selected_file, "utf-8");
}
function Help() { //Launch help
 document.getElementById("help").style.display = "block";
 document.getElementById("closeHelp").style.display = "block";
 document.getElementById("showHelp").style.display = "none";
 textarea.style.opacity = 0.1;
};
function closeHelp() { // Close help
 document.getElementById("help").style.display = "none";
 document.getElementById("closeHelp").style.display = "none";
 document.getElementById("showHelp").style.display = "block";
 textarea.style.opacity = 1;
 textarea.focus();
};
// Confirm close
window.onbeforeunload = function() {
 if (textarea.value != "") {
 return "Reloading this page will remove all unsaved changes.";
 }
};
// Keyboard shortcuts
var ctrl = "ctrl";
if (navigator.platform.toLowerCase().indexOf("mac") > -1) {
 ctrl = "command";
};
Mousetrap.bind(ctrl + "+/", function(e) {
 e.preventDefault();
 Help();
});
Mousetrap.bind("esc", function(e) {
 closeHelp();
});
Mousetrap.bind(ctrl + "+n", function(e) {
 e.preventDefault();
 location.reload();
});
Mousetrap.bind(ctrl + "+o", function(e) {
 e.preventDefault();
 Open();
});
Mousetrap.bind(ctrl + "+s", function(e) {
 e.preventDefault();
 Save();
});
Mousetrap.bind(ctrl + "+e", function(e) {
 e.preventDefault();
 Email();
});
Mousetrap.bind(ctrl + "+r", function(e) {
 e.preventDefault();
 Rename();
});
Mousetrap.bind("tab", function(e) {
 e.preventDefault();
});

• ThiefMaster: dl.dropboxusercontent.com/u/92126558/projects/ntpd/js/main.js is the link to the code btw (had to retrieve it from the page's source...)

Answer 1

Usability

• Horrible user experience. Nobody wants to see a modal prompt popping up right when opening a site.
• window.close() when not entering something in that prompt. Not only do most browsers rightfully reject this unless it's a popup window, it's also annoying if it works for some reason.
• mailto: URLs are ancient. Don't use them - with most webmail clients (which are VERY popular nowadays) they don't even work.
• Ctrl + / : Help - this does not work on non-US keyboards where / is e.g. on SHIFT+7.
• Unconditional onbeforeunload is annoying. Sure, there's no good way to save stuff but anyway, you should really not show that prompt when someone clicked the save button and did not edit the text afterwards.

Code

• filename = document.title.substr(0, document.title.lastIndexOf(".")); - really? using the document title for this? Store it in a variable! Don't pass data between application and presentation layers around for no reason. The title of the page should be considered write-only (even though it's not).
• if (to != null && to != "") - that can be simplified to if (to) which is much nicer since it catches all falsy values.

Misc

• When someone loads a binary file you dump it in the textarea anyway. That's pretty ugly.
• To make this worse, clicking the email button will put the whole file content in the address bar (as part of the mailto URL). At least in Firefox that hangs the browser for a few seconds (tested it with some small-ish jpg file).