Working file listing and opening UI, hash change handling, minimized unnecessary saving.

index.html

@@ -24,6 +24,16 @@ body {
   margin: 0px;
 }
 
+button {
+  cursor: pointer;
+}
+
+#drive-file-list li {
+  list-style: none;
+  font-size: 15px;
+  margin: 5px;
+}
+
 #draw-tools {
   text-align: center;
   display: inline-block;
@@ -49,7 +59,6 @@ body {
   width: 30px;
   height: 30px;
   text-align: center;
-  cursor: pointer;
   outline: 0 !important;
   background-size: 200% 100% !important;
   background-color: #FFF;
@@ -275,7 +284,10 @@ textarea {
 
 <div id="drive-dialog" class="dialog">
   <div id="drive-filename">Untitled ASCII Diagram</div>
-  <div style="margin: 5px;">Edit file permissions in <a href="http://drive.google.com/">Google Drive</a>.</div>
+  <div style="margin: 5px;">Edit file permissions in <a href="http://drive.google.com/" target="_blank">Google Drive</a>.</div>
+  <br>
+  <div id="drive-file-list"></div>
+  <button id="drive-new-file-button">New Drawing</button>
   <button class="close-dialog-button">Close</button>
 </div>
 

js-compiled.js

@@ -1,7 +1,7 @@
 try {
   throw 1;
 } catch (aa) {
-  window.D = window.D || {};
+  window.G = window.G || {};
 }
 var f = "ontouchstart" in window || "onmsgesturechange" in window;
 function l(a, b) {
@@ -36,11 +36,11 @@ function w(a) {
 function x(a) {
   return "+" == w(a);
 }
-function ca(a, b, c, e) {
+function ca(a, b, c, d) {
   this.left = a;
   this.right = b;
   this.m = c;
-  this.j = e;
+  this.j = d;
 }
 function y(a) {
   return a.left + a.right + a.m + a.j;
@@ -51,7 +51,7 @@ function da(a, b) {
 }
 function ea(a, b) {
   this.position = a;
-  this.C = b;
+  this.F = b;
 }
 ;function z(a) {
   this.state = a;
@@ -60,7 +60,7 @@ function ea(a, b) {
   this.zoom = 1;
   this.offset = new l(7500, 7500);
   this.d = !0;
-  this.r = f;
+  this.s = f;
   A(this);
 }
 function A(a) {
@@ -83,41 +83,41 @@ function fa(a) {
   b.clearRect(0, 0, a.canvas.width, a.canvas.height);
   b.scale(a.zoom, a.zoom);
   b.translate(a.canvas.width / 2 / a.zoom, a.canvas.height / 2 / a.zoom);
-  var c = n(B(a, new l(0, 0)), new l(3, 3)), e = B(a, new l(a.canvas.width, a.canvas.height)).add(new l(3, 3));
+  var c = n(B(a, new l(0, 0)), new l(3, 3)), d = B(a, new l(a.canvas.width, a.canvas.height)).add(new l(3, 3));
   b.lineWidth = "1";
   b.strokeStyle = "#EEEEEE";
   b.beginPath();
-  for (var d = c.x;d < e.x;d++) {
+  for (var e = c.x;e < d.x;e++) {
-    b.moveTo(9 * d - a.offset.x, 0 - a.offset.y), b.lineTo(9 * d - a.offset.x, 17 * a.state.cells.length - a.offset.y);
+    b.moveTo(9 * e - a.offset.x, 0 - a.offset.y), b.lineTo(9 * e - a.offset.x, 17 * a.state.cells.length - a.offset.y);
   }
-  for (d = c.y;d < e.y;d++) {
+  for (e = c.y;e < d.y;e++) {
-    b.moveTo(0 - a.offset.x, 17 * d - a.offset.y), b.lineTo(9 * a.state.cells.length - a.offset.x, 17 * d - a.offset.y);
+    b.moveTo(0 - a.offset.x, 17 * e - a.offset.y), b.lineTo(9 * a.state.cells.length - a.offset.x, 17 * e - a.offset.y);
   }
   a.context.stroke();
-  d = !a.r;
+  e = !a.s;
   b.font = "15px Courier New";
-  for (var g = c.x;g < e.x;g++) {
+  for (var g = c.x;g < d.x;g++) {
-    for (var k = c.y;k < e.y;k++) {
+    for (var k = c.y;k < d.y;k++) {
       var h = C(a.state, new l(g, k));
       if (x(h) || null != h.f && " " != w(h)) {
         a.context.fillStyle = null != h.f ? "#DEF" : "#F5F5F5", b.fillRect(9 * g - a.offset.x, 17 * (k - 1) - a.offset.y, 9, 17);
       }
-      var t = F(a.state, new l(g, k));
+      var t = E(a.state, new l(g, k));
-      null == t || x(h) && !d || (a.context.fillStyle = "#000000", b.fillText(t, 9 * g - a.offset.x, 17 * k - a.offset.y - 3));
+      null == t || x(h) && !e || (a.context.fillStyle = "#000000", b.fillText(t, 9 * g - a.offset.x, 17 * k - a.offset.y - 3));
     }
   }
-  if (a.r) {
+  if (a.s) {
     b.lineWidth = "1";
     b.strokeStyle = "#000000";
     b.beginPath();
-    for (d = c.x;d < e.x;d++) {
+    for (e = c.x;e < d.x;e++) {
-      for (h = !1, g = c.y;g < e.y;g++) {
+      for (h = !1, g = c.y;g < d.y;g++) {
-        k = C(a.state, new l(d, g)), x(k) && g != e.y - 1 || !h || (b.moveTo(9 * d - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), b.lineTo(9 * d - a.offset.x + 4.5, 17 * (g - 1) - a.offset.y - 8.5), h = !1), x(k) && !h && (h = g);
+        k = C(a.state, new l(e, g)), x(k) && g != d.y - 1 || !h || (b.moveTo(9 * e - a.offset.x + 4.5, 17 * h - a.offset.y - 8.5), b.lineTo(9 * e - a.offset.x + 4.5, 17 * (g - 1) - a.offset.y - 8.5), h = !1), x(k) && !h && (h = g);
       }
     }
-    for (g = c.y;g < e.y;g++) {
+    for (g = c.y;g < d.y;g++) {
-      for (h = !1, d = c.x;d < e.x;d++) {
+      for (h = !1, e = c.x;e < d.x;e++) {
-        k = C(a.state, new l(d, g)), x(k) && d != e.x - 1 || !h || (b.moveTo(9 * h - a.offset.x + 4.5, 17 * g - a.offset.y - 8.5), b.lineTo(9 * (d - 1) - a.offset.x + 4.5, 17 * g - a.offset.y - 8.5), h = !1), x(k) && !h && (h = d);
+        k = C(a.state, new l(e, g)), x(k) && e != d.x - 1 || !h || (b.moveTo(9 * h - a.offset.x + 4.5, 17 * g - a.offset.y - 8.5), b.lineTo(9 * (e - 1) - a.offset.x + 4.5, 17 * g - a.offset.y - 8.5), h = !1), x(k) && !h && (h = e);
       }
     }
     a.context.stroke();
@@ -126,19 +126,19 @@ function fa(a) {
 function B(a, b) {
   return new l(Math.min(Math.max(1, Math.round(((new l((b.x - a.canvas.width / 2) / a.zoom + a.offset.x, (b.y - a.canvas.height / 2) / a.zoom + a.offset.y)).x - 4.5) / 9)), 1998), Math.min(Math.max(1, Math.round(((new l((b.x - a.canvas.width / 2) / a.zoom + a.offset.x, (b.y - a.canvas.height / 2) / a.zoom + a.offset.y)).y + 8.5) / 17)), 598));
 }
-;function G(a, b, c, e, d) {
+;function F(a, b, c, d, e) {
-  d = d || "+";
+  e = e || "+";
-  var g = Math.min(b.x, c.x), k = Math.min(b.y, c.y), h = Math.max(b.x, c.x), t = Math.max(b.y, c.y), u = e ? c.x : b.x;
+  var g = Math.min(b.x, c.x), k = Math.min(b.y, c.y), h = Math.max(b.x, c.x), t = Math.max(b.y, c.y), u = d ? c.x : b.x;
-  for (e = e ? b.y : c.y;g++ < h;) {
+  for (d = d ? b.y : c.y;g++ < h;) {
-    var P = new l(g, e), E = a.getContext(new l(g, e));
+    var Q = new l(g, d), D = a.getContext(new l(g, d));
-    " " == d && 2 == E.m + E.j || H(a, P, d);
+    " " == e && 2 == D.m + D.j || H(a, Q, e);
   }
   for (;k++ < t;) {
-    P = new l(u, k), E = a.getContext(new l(u, k)), " " == d && 2 == E.left + E.right || H(a, P, d);
+    Q = new l(u, k), D = a.getContext(new l(u, k)), " " == e && 2 == D.left + D.right || H(a, Q, e);
   }
-  I(a, b, d);
+  I(a, b, e);
-  I(a, c, d);
+  I(a, c, e);
-  H(a, new l(u, e), d);
+  H(a, new l(u, d), e);
 }
 function J(a) {
   this.state = a;
@@ -150,8 +150,8 @@ J.prototype.start = function(a) {
 J.prototype.move = function(a) {
   this.g = a;
   K(this.state);
-  G(this.state, this.a, a, !0);
+  F(this.state, this.a, a, !0);
-  G(this.state, this.a, a, !1);
+  F(this.state, this.a, a, !1);
 };
 J.prototype.end = function() {
   L(this.state);
@@ -171,7 +171,7 @@ M.prototype.start = function(a) {
 M.prototype.move = function(a) {
   K(this.state);
   var b = this.state.getContext(this.a), c = this.state.getContext(a);
-  G(this.state, this.a, a, b.m && b.j || c.left && c.right);
+  F(this.state, this.a, a, b.m && b.j || c.left && c.right);
 };
 M.prototype.end = function() {
   L(this.state);
@@ -232,36 +232,36 @@ O.prototype.l = function() {
 O.prototype.e = function() {
   var a = $("#text-tool-input").val();
   K(this.state);
-  for (var b = 0, c = 0, e = 0;e < a.length;e++) {
+  for (var b = 0, c = 0, d = 0;d < a.length;d++) {
-    "\n" == a[e] ? (c++, b = 0) : (I(this.state, this.g.add(new l(b, c)), a[e]), b++);
+    "\n" == a[d] ? (c++, b = 0) : (I(this.state, this.g.add(new l(b, c)), a[d]), b++);
   }
 };
-function Q(a) {
+function P(a) {
   this.state = a;
   this.g = this.a = null;
 }
-Q.prototype.start = function(a) {
+P.prototype.start = function(a) {
   this.a = a;
   this.move(a);
 };
-Q.prototype.move = function(a) {
+P.prototype.move = function(a) {
   K(this.state);
   this.g = a;
   var b = Math.min(this.a.x, this.g.x);
   a = Math.min(this.a.y, this.g.y);
-  for (var c = Math.max(this.a.x, this.g.x), e = Math.max(this.a.y, this.g.y);b <= c;b++) {
+  for (var c = Math.max(this.a.x, this.g.x), d = Math.max(this.a.y, this.g.y);b <= c;b++) {
-    for (var d = a;d <= e;d++) {
+    for (var e = a;e <= d;e++) {
-      I(this.state, new l(b, d), "\u2009");
+      I(this.state, new l(b, e), "\u2009");
     }
   }
 };
-Q.prototype.end = function() {
+P.prototype.end = function() {
   L(this.state);
 };
-Q.prototype.l = function() {
+P.prototype.l = function() {
   return "crosshair";
 };
-Q.prototype.e = function() {
+P.prototype.e = function() {
 };
 function R(a) {
   this.state = a;
@@ -269,10 +269,10 @@ function R(a) {
 }
 R.prototype.start = function(a) {
   if (f && !x(C(this.state, a))) {
-    var b = v.concat([p.add(r), p.add(s), q.add(r), q.add(s)]), c = null, e = 0, d;
+    var b = v.concat([p.add(r), p.add(s), q.add(r), q.add(s)]), c = null, d = 0, e;
-    for (d in b) {
+    for (e in b) {
-      var g = a.add(b[d]), k = y(this.state.getContext(g));
+      var g = a.add(b[e]), k = y(this.state.getContext(g));
-      x(C(this.state, g)) && k > e && (c = b[d], e = k);
+      x(C(this.state, g)) && k > d && (c = b[e], d = k);
     }
     a = null == c ? a : a.add(c);
   }
@@ -284,11 +284,11 @@ R.prototype.start = function(a) {
     for (var h in v) {
       var b = ga(this, this.a, v[h]), t;
       for (t in b) {
-        if (c = b[t], e = 0 != v[h].x, 1 == y(this.state.getContext(c))) {
+        if (c = b[t], d = 0 != v[h].x, 1 == y(this.state.getContext(c))) {
-          a.push({position:c, t:e});
+          a.push({position:c, v:d});
         } else {
           for (var u in v) {
-            0 != v[h].add(v[u]).length() && 2 != v[h].add(v[u]).length() && (d = ga(this, c, v[u]), 0 != d.length && a.push({position:d[d.length - 1], t:e}));
+            0 != v[h].add(v[u]).length() && 2 != v[h].add(v[u]).length() && (e = ga(this, c, v[u]), 0 != e.length && a.push({position:e[e.length - 1], v:d}));
           }
         }
       }
@@ -300,23 +300,23 @@ R.prototype.start = function(a) {
 R.prototype.move = function(a) {
   K(this.state);
   for (var b in this.h) {
-    G(this.state, this.a, this.h[b].position, this.h[b].t, " ");
+    F(this.state, this.a, this.h[b].position, this.h[b].v, " ");
   }
   for (b in this.h) {
-    G(this.state, a, this.h[b].position, this.h[b].t);
+    F(this.state, a, this.h[b].position, this.h[b].v);
   }
 };
 R.prototype.end = function() {
   L(this.state);
 };
 function ga(a, b, c) {
-  for (var e = b.clone(), d = [];;) {
+  for (var d = b.clone(), e = [];;) {
-    var g = e.add(c);
+    var g = d.add(c);
     if (!x(C(a.state, g))) {
-      return m(b, e) || d.push(e), d;
+      return m(b, d) || e.push(d), e;
     }
-    e = g;
+    d = g;
-    3 == y(a.state.getContext(e)) && d.push(e);
+    3 == y(a.state.getContext(d)) && e.push(d);
   }
 }
 R.prototype.l = function(a) {
@@ -328,8 +328,8 @@ function S() {
   this.cells = Array(2E3);
   this.i = [];
   this.d = !0;
-  this.B = [];
+  this.D = [];
-  this.A = [];
+  this.C = [];
   for (var a = 0;a < this.cells.length;a++) {
     this.cells[a] = Array(600);
     for (var b = 0;b < this.cells[a].length;b++) {
@@ -349,9 +349,9 @@ function C(a, b) {
   return a.cells[b.x][b.y];
 }
 function I(a, b, c) {
-  var e = C(a, b);
+  var d = C(a, b);
-  a.i.push(new ea(b, e));
+  a.i.push(new ea(b, d));
-  e.f = c;
+  d.f = c;
   a.d = !0;
 }
 function H(a, b, c) {
@@ -359,11 +359,11 @@ function H(a, b, c) {
 }
 function K(a) {
   for (var b in a.i) {
-    a.i[b].C.f = null;
+    a.i[b].F.f = null;
   }
   a.i.length = 0;
 }
-function F(a, b) {
+function E(a, b) {
   var c = C(a, b), c = null != c.f ? c.f : c.value;
   if ("+" != c) {
     return c;
@@ -372,20 +372,20 @@ function F(a, b) {
   return c.left && c.right && !c.m && !c.j ? "\u2013" : !c.left && !c.right && c.m && c.j ? "|" : c.left && c.right && c.m && c.j ? "\u2013" : "+";
 }
 S.prototype.getContext = function(a) {
-  var b = x(C(this, a.add(p))), c = x(C(this, a.add(q))), e = x(C(this, a.add(r)));
+  var b = x(C(this, a.add(p))), c = x(C(this, a.add(q))), d = x(C(this, a.add(r)));
   a = x(C(this, a.add(s)));
-  return new ca(b, c, e, a);
+  return new ca(b, c, d, a);
 };
 function L(a, b) {
-  var c = [], e = a.i.map(function(a) {
+  var c = [], d = a.i.map(function(a) {
     return a.position.x.toString() + a.position.y.toString();
-  }), d = a.i.filter(function(a, b) {
+  }), e = a.i.filter(function(a, b) {
-    return e.indexOf(e[b]) == b;
+    return d.indexOf(d[b]) == b;
   });
   a.i.length = 0;
-  for (var g in d) {
+  for (var g in e) {
-    var k = d[g].C;
+    var k = e[g].F;
-    c.push(new da(d[g].position, null != k.value ? k.value : " "));
+    c.push(new da(e[g].position, null != k.value ? k.value : " "));
     var h = w(k);
     if ("\u2009" == h || " " == h) {
       h = null;
@@ -393,42 +393,42 @@ function L(a, b) {
     k.f = null;
     k.value = h;
   }
-  d = b ? a.A : a.B;
+  e = b ? a.C : a.D;
-  0 < c.length && (50 < d.length && d.shift(), d.push(c));
+  0 < c.length && (50 < e.length && e.shift(), e.push(c));
   a.d = !0;
 }
 function ha(a) {
-  if (0 != a.B.length) {
+  if (0 != a.D.length) {
-    var b = a.B.pop(), c;
+    var b = a.D.pop(), c;
     for (c in b) {
-      var e = b[c];
+      var d = b[c];
-      I(a, e.position, e.value);
+      I(a, d.position, d.value);
     }
     L(a, !0);
   }
 }
 function ia(a) {
-  if (0 != a.A.length) {
+  if (0 != a.C.length) {
-    var b = a.A.pop(), c;
+    var b = a.C.pop(), c;
     for (c in b) {
-      var e = b[c];
+      var d = b[c];
-      I(a, e.position, e.value);
+      I(a, d.position, d.value);
     }
     L(a);
   }
 }
 function T(a) {
-  for (var b = new l(Number.MAX_VALUE, Number.MAX_VALUE), c = new l(-1, -1), e = 0;e < a.cells.length;e++) {
+  for (var b = new l(Number.MAX_VALUE, Number.MAX_VALUE), c = new l(-1, -1), d = 0;d < a.cells.length;d++) {
-    for (var d = 0;d < a.cells[e].length;d++) {
+    for (var e = 0;e < a.cells[d].length;e++) {
-      null != w(a.cells[e][d]) && (e < b.x && (b.x = e), d < b.y && (b.y = d), e > c.x && (c.x = e), d > c.y && (c.y = d));
+      null != w(a.cells[d][e]) && (d < b.x && (b.x = d), e < b.y && (b.y = e), d > c.x && (c.x = d), e > c.y && (c.y = e));
     }
   }
   if (0 > c.x) {
     return "";
   }
-  for (var g = "", d = b.y;d <= c.y;d++) {
+  for (var g = "", e = b.y;e <= c.y;e++) {
-    for (var k = "", e = b.x;e <= c.x;e++) {
+    for (var k = "", d = b.x;d <= c.x;d++) {
-      var h = F(a, new l(e, d)), k = k + (null == h ? " " : h)
+      var h = E(a, new l(d, e)), k = k + (null == h ? " " : h)
     }
     g += k.replace("\\s+$/g", "") + "\n";
   }
@@ -436,16 +436,16 @@ function T(a) {
 }
 function ja(a, b, c) {
   b = b.split("\n");
-  for (var e = new l(0, Math.round(b.length / 2)), d = 0;d < b.length;d++) {
+  for (var d = new l(0, Math.round(b.length / 2)), e = 0;e < b.length;e++) {
-    e.x = Math.max(e.x, Math.round(b[d].length / 2));
+    d.x = Math.max(d.x, Math.round(b[e].length / 2));
   }
-  for (d = 0;d < b.length;d++) {
+  for (e = 0;e < b.length;e++) {
-    for (var g = b[d], k = 0;k < g.length;k++) {
+    for (var g = b[e], k = 0;k < g.length;k++) {
       var h = g.charAt(k);
       if ("\u2013" == h || "|" == h) {
         h = "+";
       }
-      I(a, n((new l(k, d)).add(c), e), h);
+      I(a, n((new l(k, e)).add(c), d), h);
     }
   }
   L(a);
@@ -457,14 +457,14 @@ function ja(a, b, c) {
   this.mode = 0;
   this.n();
 }
-U.prototype.q = function(a) {
+U.prototype.r = function(a) {
   var b = B(this.view, a);
   null == this.o && (this.o = b);
   m(b, this.o) || (this.view.canvas.style.cursor = this.c.l(b));
   2 != this.mode || m(b, this.o) || this.c.move(b);
   if (1 == this.mode) {
     var c = this.view;
-    a = this.v.add(n(this.u, a).scale(1 / this.view.zoom));
+    a = this.A.add(n(this.w, a).scale(1 / this.view.zoom));
     c.offset = a;
     c.d = !0;
   }
@@ -473,8 +473,8 @@ U.prototype.q = function(a) {
 function V(a) {
   2 == a.mode && a.c.end();
   a.mode = 0;
-  a.u = null;
+  a.w = null;
-  a.v = null;
+  a.A = null;
   a.o = null;
 }
 U.prototype.n = function() {
@@ -491,7 +491,7 @@ U.prototype.n = function() {
     "box-button" == a && (this.c = new J(this.state));
     "line-button" == a && (this.c = new M(this.state));
     "freeform-button" == a && (this.c = new N(this.state, "+"));
-    "erase-button" == a && (this.c = new Q(this.state));
+    "erase-button" == a && (this.c = new P(this.state));
     "move-button" == a && (this.c = new R(this.state));
     "text-button" == a && (this.c = new O(this.state));
     L(this.state);
@@ -517,13 +517,13 @@ U.prototype.n = function() {
   $("#use-lines-button").click(function() {
     $(".dialog").removeClass("visible");
     var a = this.view;
-    a.r = !0;
+    a.s = !0;
     a.d = !0;
   }.bind(this));
   $("#use-ascii-button").click(function() {
     $(".dialog").removeClass("visible");
     var a = this.view;
-    a.r = !1;
+    a.s = !1;
     a.d = !0;
   }.bind(this));
   $(window).keypress(function(a) {
@@ -566,12 +566,23 @@ function ka(a, b) {
     var a = "" + $("#drive-filename").text(), a = prompt("Enter new filename:", a);
     this.file.title = a;
     this.save();
-  }.bind(this));
     oa(this);
+  }.bind(this));
+  pa(this);
+  $(window).bind("hashchange", function() {
+    qa(this);
+  }.bind(this));
+  $("#drive-new-file-button").click(function() {
+    this.file = null;
+    this.state.clear();
+    window.location.hash = "";
+    this.save();
+    $("#drive-dialog").removeClass("visible");
+  }.bind(this));
 }
 function W(a, b) {
   window.gapi.auth.authorize({client_id:"125643747010-9s9n1ne2fnnuh5v967licfkt83r4vba5.apps.googleusercontent.com", scope:"https://www.googleapis.com/auth/drive", immediate:b}, function(a) {
-    !a || a.error || this.p || (this.p = !0, $("#drive-button").addClass("active"), pa(this));
+    !a || a.error || this.p || (this.p = !0, $("#drive-button").addClass("active"), qa(this));
   }.bind(a));
 }
 function la(a) {
@@ -584,64 +595,78 @@ function na(a) {
     this.p ? ma(this) : (W(this, !0), na(this));
   }.bind(a), 1E3);
 }
-function qa(a, b) {
+function ra(a, b) {
   a.file = b;
   $("#drive-filename").text(b.title);
   window.location.hash = b.id;
 }
 function ma(a) {
   $("#drive-dialog").addClass("visible");
-  a.save();
+  var b = T(a.state);
+  5 < b.length && b != a.u && a.save();
+  oa(a);
 }
 function oa(a) {
-  var b = T(a.state);
+  window.gapi.client.request({path:"/drive/v2/files", params:{q:"mimeType = 'text/plain' and trashed = false"}, method:"GET"}).execute(function(a) {
-  b != a.F && a.file && a.file.editable && (a.F = b, a.save());
+    $("#drive-file-list").children().remove();
+    a = a.items;
+    for (var c in a) {
+      var d = document.createElement("li");
+      d.innerHTML = '<a href="#' + a[c].id + '">' + a[c].title + "</a>";
+      $("#drive-file-list").append(d);
+    }
+  }.bind(a));
+}
+function pa(a) {
+  T(a.state) != a.u && a.file && a.file.editable && a.save();
   window.setTimeout(function() {
-    oa(this);
+    pa(this);
   }.bind(a), 5E3);
 }
 ka.prototype.save = function() {
   var a = T(this.state);
   $("#drive-save-state").text("Saving...");
-  ra(this, a).execute(function(a) {
+  sa(this, a).execute(function(b) {
-    qa(this, a);
+    ra(this, b);
     $("#drive-save-state").text("Saved");
+    this.u = a;
   }.bind(this));
 };
-function pa(a) {
+function qa(a) {
   1 < window.location.hash.length && ($("#drive-save-state").text("Loading..."), window.gapi.client.request({path:"/drive/v2/files/" + window.location.hash.substr(1, window.location.hash.length - 1), method:"GET"}).execute(function(a) {
-    qa(this, a);
+    ra(this, a);
-    sa(this);
+    ta(this);
   }.bind(a)));
 }
-function sa(a) {
+function ta(a) {
-  ta(a.file.downloadUrl, function(a) {
+  ua(a.file.downloadUrl, function(a) {
     $("#drive-save-state").text("Loaded");
     this.state.clear();
     ja(this.state, a, B(this.view, new l(this.view.canvas.width / 2, this.view.canvas.height / 2)));
+    this.u = T(this.state);
   }.bind(a));
 }
-function ra(a, b) {
+function sa(a, b) {
   var c = "\r\n---------314159265358979323846\r\nContent-Type: application/json\r\n\r\n" + JSON.stringify({title:null == a.file ? "Untitled ASCII Diagram" : a.file.title, mimeType:"text/plain"}) + "\r\n---------314159265358979323846\r\nContent-Type: text/plain\r\n\r\n" + b + "\r\n---------314159265358979323846--";
   return window.gapi.client.request({path:"/upload/drive/v2/files" + (null == a.file ? "" : "/" + a.file.id), method:null == a.file ? "POST" : "PUT", params:{uploadType:"multipart"}, headers:{"Content-Type":'multipart/mixed; boundary="-------314159265358979323846"'}, body:c});
 }
-function ta(a, b) {
+function ua(a, b) {
-  var c = window.gapi.auth.getToken().access_token, e = new XMLHttpRequest;
+  var c = window.gapi.auth.getToken().access_token, d = new XMLHttpRequest;
-  e.open("GET", a);
+  d.open("GET", a);
-  e.setRequestHeader("Authorization", "Bearer " + c);
+  d.setRequestHeader("Authorization", "Bearer " + c);
-  e.onload = function() {
+  d.onload = function() {
-    b(e.responseText);
+    b(d.responseText);
   };
-  e.onerror = function() {
+  d.onerror = function() {
     b(null);
   };
-  e.send();
+  d.send();
 }
-;function ua(a) {
+;function va(a) {
   this.b = a;
   this.n();
 }
-ua.prototype.n = function() {
+va.prototype.n = function() {
   var a = this.b.view.canvas;
   $(a).bind("mousewheel", function(a) {
     a = this.b.view.zoom * (0 < a.originalEvent.wheelDelta ? 1.1 : 0.9);
@@ -655,8 +680,8 @@ ua.prototype.n = function() {
       var c = this.b;
       a = new l(a.clientX, a.clientY);
       c.mode = 1;
-      c.u = a;
+      c.w = a;
-      c.v = c.view.offset;
+      c.A = c.view.offset;
     } else {
       c = this.b, a = new l(a.clientX, a.clientY), c.mode = 2, c.c.start(B(c.view, a));
     }
@@ -668,67 +693,67 @@ ua.prototype.n = function() {
     V(this.b);
   }.bind(this));
   $(a).mousemove(function(a) {
-    this.b.q(new l(a.clientX, a.clientY));
+    this.b.r(new l(a.clientX, a.clientY));
   }.bind(this));
 };
 function X(a) {
   this.b = a;
-  this.s = this.k = !1;
+  this.t = this.k = !1;
   this.n();
 }
-function va(a, b) {
+function wa(a, b) {
-  a.w = b;
+  a.B = b;
-  a.H = $.now();
+  a.I = $.now();
   a.k = !1;
   window.setTimeout(function() {
-    if (!this.k && !this.s && null != this.w) {
+    if (!this.k && !this.t && null != this.B) {
       var a = this.b;
       a.mode = 2;
       a.c.start(B(a.view, b));
     }
   }.bind(a), 130);
 }
-X.prototype.q = function(a) {
+X.prototype.r = function(a) {
-  if (!this.k && 130 > $.now() - this.H && 3 < n(a, this.w).length()) {
+  if (!this.k && 130 > $.now() - this.I && 3 < n(a, this.B).length()) {
     this.k = !0;
     var b = this.b;
     b.mode = 1;
-    b.u = a;
+    b.w = a;
-    b.v = b.view.offset;
+    b.A = b.view.offset;
   }
-  this.b.q(a);
+  this.b.r(a);
 };
 X.prototype.reset = function() {
-  this.s = this.k = !1;
+  this.t = this.k = !1;
-  this.w = null;
+  this.B = null;
 };
 X.prototype.n = function() {
   var a = this.b.view.canvas;
   $(a).bind("touchstart", function(a) {
     a.preventDefault();
     if (1 == a.originalEvent.touches.length) {
-      va(this, new l(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY));
+      wa(this, new l(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY));
     } else {
       if (1 < a.originalEvent.touches.length) {
         var c = new l(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY);
         a = new l(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY);
         V(this.b);
-        this.s = !0;
+        this.t = !0;
         this.k = !1;
-        this.I = n(c, a).length();
+        this.J = n(c, a).length();
-        this.G = this.b.view.zoom;
+        this.H = this.b.view.zoom;
       }
     }
   }.bind(this));
   $(a).bind("touchmove", function(a) {
     a.preventDefault();
     if (1 == a.originalEvent.touches.length) {
-      this.q(new l(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY));
+      this.r(new l(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY));
     } else {
       if (1 < a.originalEvent.touches.length) {
         var c = new l(a.originalEvent.touches[0].pageX, a.originalEvent.touches[0].pageY);
         a = new l(a.originalEvent.touches[1].pageX, a.originalEvent.touches[1].pageY);
-        this.s && (c = this.G * n(c, a).length() / this.I, c = Math.max(Math.min(c, 5), 0.5), a = this.b.view, a.zoom = c, a.d = !0);
+        this.t && (c = this.H * n(c, a).length() / this.J, c = Math.max(Math.min(c, 5), 0.5), a = this.b.view, a.zoom = c, a.d = !0);
       }
     }
   }.bind(this));
@@ -738,9 +763,9 @@ X.prototype.n = function() {
     V(this.b);
   }.bind(this));
 };
-var Y = new S, Z = new z(Y), wa = new U(Z, Y);
+var Y = new S, Z = new z(Y), xa = new U(Z, Y);
-new X(wa);
+new X(xa);
-new ua(wa);
+new va(xa);
 new ka(Y, Z);
 Z.animate();
 

js-lib/drive-controller.js

@@ -39,9 +39,22 @@ ascii.DriveController = function(state, view) {
     var title = prompt('Enter new filename:', currentTitle);
     this.file['title'] = title;
     this.save();
+    this.loadFileList();
   }.bind(this));
 
   this.loopSave();
+
+  $(window).bind('hashchange', function() {
+    this.loadFromHash();
+  }.bind(this));
+
+  $('#drive-new-file-button').click(function() {
+    this.file = null;
+    this.state.clear();
+    window.location.hash = '';
+    this.save();
+    $('#drive-dialog').removeClass('visible');
+  }.bind(this));
 };
 
 /**
@@ -98,16 +111,32 @@ ascii.DriveController.prototype.handleFile = function(file) {
  */
 ascii.DriveController.prototype.loadDialog = function() {
   $('#drive-dialog').addClass('visible');
+
+  var text = this.state.outputText();
+  // Don't save diagram if empty, just get's annoying.
+  if (text.length > 5 && text != this.cachedText) {
     this.save();
+  }
+  this.loadFileList();
 };
 
+ascii.DriveController.prototype.loadFileList = function() {
+  this.getListRequest().execute(function(result) {
+    $('#drive-file-list').children().remove();
+    var items = result['items'];
+    for (var i in items) {
+      var entry = document.createElement('li');
+      entry.innerHTML = '<a href="#' + items[i]['id'] + '">' + items[i]['title'] + '</a>';
+      $('#drive-file-list').append(entry);
+    }
+  }.bind(this));
+}
 /**
  * Repeatedly save the diagram if it is editable and loaded.
  */
 ascii.DriveController.prototype.loopSave = function() {
   var text = this.state.outputText();
   if (text != this.cachedText && this.file && this.file['editable']) {
-    this.cachedText = text;
     this.save();
   }
   window.setTimeout(function() {
@@ -124,6 +153,7 @@ ascii.DriveController.prototype.save = function() {
   this.getSaveRequest(text).execute(function(result) {
     this.handleFile(result);
     $('#drive-save-state').text('Saved');
+    this.cachedText = text;
   }.bind(this));
 };
 
@@ -145,6 +175,7 @@ ascii.DriveController.prototype.reloadFileContent = function() {
     this.state.fromText(content, this.view.screenToCell(new ascii.Vector(
             this.view.canvas.width / 2,
             this.view.canvas.height / 2)));
+    this.cachedText = this.state.outputText();
   }.bind(this));
 };
 
@@ -190,6 +221,13 @@ ascii.DriveController.prototype.getLoadRequest = function(fileId) {
       'method': 'GET'});
 };
 
+ascii.DriveController.prototype.getListRequest = function() {
+  return window['gapi']['client']['request']({
+      'path': '/drive/v2/files',
+      'params' : { 'q': 'mimeType = \'text/plain\' and trashed = false' },
+      'method': 'GET'});
+};
+
 /**
  * Download a file's content.
  *