2
\$\begingroup\$

Simplification of code would be appreciated.

var textarea = document.getElementById("textarea"),
  statusBar = document.getElementById("status-bar"),
  inputFile = document.getElementById("input-file"),
  appname = "notepad",
  isModified = false,
  showStatusBar = true,
  filename;

function changeDocTitle(newFilename) { // Change doc title
  filename = newFilename;
  document.title = filename + " - " + appname;
}

function dontSave() { // Confirm dont save
  if (confirm("You have unsaved changes that will be lost.")) {
    isModified = false;
    return true;
  }
}

function newNote(text, name) { // New
  if (!isModified || dontSave()) {
    textarea.value = text || "";
    changeDocTitle(name || "untitled.txt");
  }
  textarea.focus();
}

function openNote() { // Open
  if (!isModified || dontSave()) {
    inputFile.click();
  }
  textarea.focus();
}

function rename() { // Rename
  var newFilename = prompt("Name this note:", filename);
  if (newFilename !== null) {
    if (newFilename === "") {
      changeDocTitle("untitled.txt");
    } else {
      changeDocTitle(newFilename.lastIndexOf(".txt") == -1 ? newFilename + ".txt" : newFilename);
    }
    return true;
  }
}

function saveNote() { // Save
  if (rename()) {
    var blob = new Blob([textarea.value.replace(/\n/g, "\r\n")], {
      type: "text/plain;charset=utf-8"
    });
    saveAs(blob, filename);
    isModified = false;
  }
  textarea.focus();
}

function updatestatusBar() { // Update statusBar
  var text = textarea.value,
    chars = text.length,
    words = text.split(/\S+/g).length - 1,
    lines = text.split("\n").length;
  statusBar.value = lines + " lines, " + words + " words, " + chars + " characters";
}

function showStatusBarFunc() {
  textarea.style.height = "calc(100% - 18px)";
  statusBar.style.display = "";
  showStatusBar = true;
  updatestatusBar();
}

function hideStatusBarFunc() {
  textarea.style.height = "";
  statusBar.style.display = "none";
  showStatusBar = false;
}

function toggleStatusBar() {
  if (showStatusBar) {
    hideStatusBarFunc();
  } else {
    showStatusBarFunc();
  }
}

textarea.addEventListener("input", function() {
  isModified = true;
  if (showStatusBar) {
    updatestatusBar();
  }
});

inputFile.addEventListener("change", function() { // Load file
  var file = inputFile.files[0],
    reader = new FileReader();
  reader.onload = function() {
    newNote(reader.result, file.name);
  };
  reader.readAsText(file);
});

document.addEventListener("keydown", function(e) { // Shortcuts
  if (e.altKey && e.shiftKey) { // Alt+Shift
    newNote();
  }
  if (e.ctrlKey) { // Ctrl+
    switch (e.keyCode) {
      case 79: // O
        e.preventDefault();
        openNote();
        break;
      case 83: // S
        e.preventDefault();
        saveNote();
        break;
      case 66: // B
        e.preventDefault();
        toggleStatusBar();
        break;
      case 191: // /
        e.preventDefault();
        alert("Help note for " + appname + " will be added soon!");
        break;
    }
  }
  if (e.keyCode == 9) { // Tab
    e.preventDefault();
    var sStart = textarea.selectionStart,
      text = textarea.value;
    textarea.value = text.substring(0, sStart) + "\t" + text.substring(textarea.selectionEnd);
    textarea.selectionEnd = sStart + 1;
  }
});

onunload = function() { // Save localStorage
  if (isModified) {
    localStorage.setItem("text", textarea.value);
    localStorage.setItem("name", filename);
  } else {
    // localStorage.clear();
    localStorage.removeItem("text");
  }
  localStorage.setItem("showStatusBar", showStatusBar);
};

onload = function() { // Load localStorage
  if (localStorage.getItem("text")) {
    newNote(localStorage.getItem("text"), localStorage.getItem("name"));
    isModified = true;
  } else {
    newNote();
  }
  showStatusBar = JSON.parse(localStorage.getItem("showStatusBar"));
  if (showStatusBar) {
    showStatusBarFunc();
  } else {
    hideStatusBarFunc();
  }
};
\$\endgroup\$
2
\$\begingroup\$

The code is good. The only comment I have is that the data and its representation are highly coupled so it may be good idea to invest some time in separating them. But it will make sense only if this application will grow and evolve. Now it is very neat and good looking.

\$\endgroup\$

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.