add basic load/save functionality to editor

lib/console_impl.dart

@@ -21,7 +21,7 @@ import 'nodes.dart';
 import 'parser.dart';
 
 class ConsoleImpl extends Console {
-  
+
   static final int NEWLINE = 0xD;
   static final int LEFT = 37;
   static final String PROMPT = "?";
@@ -30,51 +30,78 @@ class ConsoleImpl extends Console {
   final html.TextAreaElement historyElem;
   final html.TextAreaElement editorElem;
   final html.Element editorBackground;
+  final html.InputElement editorFileInput;
+  final html.Element editorDownloadButton;
   final html.Element editorCommitButton;
-  
+
   final Parser parser;
   InterpreterInterface interpreter;
-  
+
   String userText;
 
   ConsoleImpl(this.interpreter)
       : shellElem = html.document.querySelector('#shell'),
         historyElem = html.document.querySelector('#history'),
         editorElem = html.document.querySelector('#editor'),
         editorBackground = html.document.querySelector("#editorBackground"),
-        editorCommitButton  = html.document.querySelector('#commit'),
+        editorFileInput = html.document.querySelector('#load'),
+        editorCommitButton = html.document.querySelector('#commit'),
+        editorDownloadButton = html.document.querySelector('#download'),
         parser = new Parser(Primitive.makeTopLevel()) {
+
+    editorFileInput.onChange.listen((e) => _onFileInputChange());
+
     shellElem.focus();
     shellElem.onKeyPress.listen(handleKeyPress);
     shellElem.onKeyDown.listen(handleKeyDown);
+    editorDownloadButton.onClick.listen(handleDownloadClick);
     editorCommitButton.onClick.listen(handleCommitClick);
     writeln("Welcome to ArrowLogo.");
     writeln("Type 'help' for help.");
     writeln("Type 'edall' to switch to the editor.");
     prompt();
   }
-
+
+  String getContentsAsUrl() {
+    return 'data:text/csv;charset=UTF-8,${Uri.encodeQueryComponent(editorElem.value)}';
+  }
+
   void processAction(List msg) {
     Primitive p = Primitive.lookup(msg[0]);
     switch (p) {
       case Primitive.CLEARTEXT:
         clearText();
         break;
-        
+
       case Primitive.EDALL:
         showEditor();
         break;
 
       case Primitive.HELP:
         showHelp();
         break;
-        
+
       case Primitive.PRINT:
         writeln(msg[1]);
         break;
     }
   }
-
+
+  void _onFileInputChange() {
+    var fileRef = editorFileInput.files[0];
+    print(fileRef.name);
+    if (fileRef.name.isEmpty) {
+      return;
+    }
+    var reader = new html.FileReader();
+    reader.onLoad.listen((e) {
+      // TODO: ask before discarding user text.
+      editorElem.value = reader.result;
+      editorFileInput.value = "";
+    });
+    reader.readAsText(fileRef);
+  }
+
   void processDefined(String defnName) {
     writeln("You defined $defnName");
   }
@@ -89,32 +116,36 @@ class ConsoleImpl extends Console {
 
   void hideEditor() {
     editorBackground.classes.add('invisible');
-    editorElem.classes.add('invisible'); 
+    editorElem.classes.add('invisible');
+    editorFileInput.classes.add('invisible');
+    editorDownloadButton.classes.add('invisible');
     editorCommitButton.classes.add('invisible');
     shellElem.classes.remove('invisible');
     historyElem.classes.remove('invisible');
     shellElem.focus();
   }
-  
+
   void showEditor() {
-    editorBackground.classes.remove('invisible'); 
-    editorElem.classes.remove('invisible'); 
+    editorBackground.classes.remove('invisible');
+    editorElem.classes.remove('invisible');
+    editorFileInput.classes.remove('invisible');
+    editorDownloadButton.classes.remove('invisible');
     editorCommitButton.classes.remove('invisible');
     shellElem.classes.add('invisible');
     historyElem.classes.add('invisible');
     editorElem.focus();
   }
-  
+
   void prompt() {
-    shellElem.value = PROMPT;    
+    shellElem.value = PROMPT;
   }
-  
+
   void write(String message) {
-    historyElem.value = historyElem.value + message;    
+    historyElem.value = historyElem.value + message;
   }
 
   void writeln([String message = ""]) {
-    historyElem.value = historyElem.value + message + "\n";   
+    historyElem.value = historyElem.value + message + "\n";
     historyElem.scrollTop = historyElem.scrollHeight;
   }
 
@@ -128,11 +159,11 @@ class ConsoleImpl extends Console {
       writeln(p.name + (p.altName != null ? "  ${p.altName}" : ""));
     }
   }
-  
+
   void clearText() {
     historyElem.value = "";
   }
-  
+
   void handleKeyPress(/* html.KeyboardEvent */ e) {
     if (NEWLINE == e.keyCode) {
       String text = shellElem.value;
@@ -146,7 +177,7 @@ class ConsoleImpl extends Console {
       prompt();
     }
   }
-  
+
   /**
    *  Ensure the cursor does not move into the prompt.
    */
@@ -157,10 +188,16 @@ class ConsoleImpl extends Console {
       e.preventDefault();
     }
   }
-
+
+  void handleDownloadClick(html.Event e) {
+    var downloadLink = html.document.createElement("a");
+    downloadLink.setAttribute("href", getContentsAsUrl());
+    downloadLink.setAttribute("download", "program.logo");
+    downloadLink.click();
+  }
+
   void handleCommitClick(html.Event e) {
     userText = editorElem.value;
-    ListNode nodes;
 
     interpreter.interpret(userText);
     hideEditor();

web/ArrowLogo.css

@@ -91,6 +91,18 @@ textarea#editor, div#editorBackground {
   height: 540px;
 }
 
+input#load {
+  position: absolute;
+  right: 5em;
+  bottom: 1em;
+}
+
+input#download {
+  position: absolute;
+  right: 5em;
+  bottom: 1em;
+}
+
 input#commit {
   position: absolute;
   right: 1em;

web/ArrowLogo.html

@@ -35,9 +35,13 @@ <h1 class="title">ArrowLogo</h1>
       <div class="right_panel">
         <textarea id="shell"></textarea>
         <textarea id="history"></textarea>
-        <div id="editorBackground" class="invisible"></div>
-        <textarea id="editor" class="invisible"></textarea>
-        <input id="commit" type="button" value="ok" class="invisible"></input>
+        <div class="editor">
+          <div id="editorBackground" class="invisible"></div>
+          <textarea id="editor" class="invisible"></textarea>
+          <input id="load" type="file" value="" class="invisible"></input>
+          <input id="download" type="button" value="save" class="invisible"></input>
+          <input id="commit" type="button" value="ok" class="invisible"></input>
+        </div>
       </div>
     </div>
     </div>