1
\$\begingroup\$

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", "someone@example.com"),
        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();
});
\$\endgroup\$
1
2
\$\begingroup\$

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).
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.