Designer now warns if page is navigated away when changes are pending…

…; if attempting to update a non-owned gist, will auto-create a new one.
Polymer · Sep 3, 2014 · 0896a3e · 0896a3e
1 parent ab0d78b
commit 0896a3e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git a/elements/design-host/design-host.html b/elements/design-host/design-host.html
@@ -63,7 +63,7 @@
   },
 
   dumpScript: function(indent, tab) {
-    var s = 'Polymer(\'' + this.name + '\', {\n' + indent + tab;
+    var s = 'Polymer({\n' + indent + tab;
     var props = [];
     Object.keys(this.model).forEach(function(k) {
       if (serializeScriptBlacklist.indexOf(k) < 0) {

diff --git a/elements/design-state/design-state.html b/elements/design-state/design-state.html
@@ -1,12 +1,12 @@
-<!--
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
 
 <polymer-element name="design-state" attributes="canBack canForward">
 <script>
@@ -17,7 +17,7 @@
   canBack: false,
   canForward: false,
   created: function() {
-    this.stack = [];
+    this.reset();
   },
 
   push: function(state) {
@@ -72,6 +72,11 @@
 
   isAtFirst: function() {
     return (this.cursor === 0) 
+  },
+
+  reset: function() {
+    this.stack = [];
+    this.cursor = 0;
   }
 
 });

diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html
@@ -138,6 +138,7 @@
   remoteHtml: '',
 
   ready: function() {
+    window.onbeforeunload = this.warnUnload.bind(this);
     document.addEventListener('keydown', 
         this.keydown.bind(this, window));
     window.designWindowLoaded = this.designWindowLoaded.bind(this);
@@ -155,15 +156,7 @@
 
   keydown: function(w, e) {
     switch(e.keyCode) {
-      // backspace
-      case 8:
-        w.onbeforeunload = function() {
-          return ' ';
-        }
-        setTimeout(function() {
-          w.onbeforeunload = null;
-        }, 0);
-        break;
+      // save
       case 83:
         if (e.ctrlKey || e.metaKey) {
           e.preventDefault();
@@ -395,29 +388,38 @@
 
     this.save(function() {
       this.previewWindow.location.href = 'preview.html#' + this.fileId;
-    })
+    });
   },
 
   save: function(callback) {
-    var cb;
-    if (callback) {
-      var self = this;
-      cb = function() {
+    var self = this;
+    var saveCb = function() {
+      if (callback) {
         callback.call(self);
       }
-    }
+    };
+    var updateCb = function(response) {
+      // update fails if gist is some other user's
+      // if this happens perform a save.
+      if (response && response.error === 404) {
+        self.fileId = null;
+        self.save(callback);
+      } else {
+        saveCb();
+      }
+    };
     var options = {};
-    var content = this.selected === 'code' ? this.code : this.html;
-    options[this.$.githubInfo.fileName] = {content: content};
+    options[this.$.githubInfo.fileName] = {content: this.getContent()};
     if (this.fileId) {
-      this.$.github.update(this.fileId, 'designer', true, options, cb);
+      this.$.github.update(this.fileId, 'designer', true, options, updateCb);
     } else {
-      this.$.github.save('designer', true, options, cb);
+      this.$.github.save('designer', true, options, saveCb);
     }
   },
 
   documentSaved: function(event, detail) {
     this.fileId = detail.id; 
+    this._savedHtml = this.getContent();
   },
 
   loadRemoteContent: function() {
@@ -437,6 +439,8 @@
 
   remoteHtmlChanged: function() {
     this.loadHtml(this.remoteHtml);
+    this._savedHtml = this.remoteHtml;
+    this.$.state.reset();
   },
 
   loadHtml: function(html) {
@@ -488,6 +492,20 @@
         this._preventStateChange = false;
       });
     }
+  },
+
+  getContent: function() {
+    return this.selected === 'code' ? this.code : this.html;
+  },
+
+  isDirty: function() {
+    return (this._savedHtml !== this.getContent());
+  },
+
+  warnUnload: function() {
+    if (this.isDirty()) {
+      return 'Unsaved changes detected.';
+    }
   }
 
 });