commit:406e23afb918966c42dbcd8332f906c78e75e47f
author:Chip Black
committer:Chip Black
date:Thu Oct 22 00:28:03 2015 -0500
parents:00000c417fc3e1b7cb6574fa5f1a2d83cc227184
Add fallback save dialog
diff --git a/src/index.html b/src/index.html
line changes: +13/-0
index ef59c75..2a26f44
--- a/src/index.html
+++ b/src/index.html
@@ -94,5 +94,18 @@
   </div>
 </div>
 
+<div class="dialog" id="dialog-save-fail" style="display: none">
+  <h2>Save</h2>
+  <div class="content">
+    It looks like your browser can't directly save this image. You might
+    be able to right click and save it below, or drag-and-drop it,
+    though.
+    <p><img id="save-fail-image">
+  </div>
+  <div class="controls">
+    <button id="save-fail-close">Close</button>
+  </div>
+</div>
+
 <iframe id="saver"></iframe>
 <input id="loader" type="file">

diff --git a/src/main.js b/src/main.js
line changes: +20/-1
index d53ca03..88bbebe
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,24 @@ import { TOOL_PEN, TOOL_FILL, TOOL_LINE } from './Toolbox';
 
 var appState = {};
 
+function saveFail() {
+    let saveFailDialog = document.getElementById('dialog-save-fail');
+    let saveFailImage = document.getElementById('save-fail-image');
+    let saveFailClose = document.getElementById('save-fail-close');
+
+    saveFailClose.onclick = function() {
+        saveFailDialog.style.display = 'none';
+    }
+
+    try {
+        saveFailImage.src = appState.pixelEditor.preview.toDataURL();
+        saveFailDialog.style.display = null;
+    } catch(e) {
+        console.log("toDataURL failed", e);
+        alert("Sorry, I can't save. Try right clicking and saving the preview?");
+    }
+}
+
 window.savePNG = function save() {
     let saver = document.getElementById('saver');
     appState.pixelEditor.getFile().then(file => {
@@ -13,9 +31,10 @@ window.savePNG = function save() {
         URL.revokeObjectURL(uri);
     }).catch(e => {
         if (e.message == "Object doesn't support property or method 'toBlob'" || e.message.search(/toBlob is not a function/)) {
-            alert("Sorry, save isn't supported in this browser");
+            saveFail();
         } else {
             alert("unknown error");
+            saveFail();
             console.log(e);
         }
     });

diff --git a/src/style.css b/src/style.css
line changes: +5/-0
index 068b8a7..df4bdda
--- a/src/style.css
+++ b/src/style.css
@@ -205,6 +205,11 @@ button.active {
 	flex-flow: column;
 }
 
+#save-fail-image {
+	width: 128px;
+	height: 128px;
+}
+
 #saver, #loader {
 	width: 0;
 	height: 0;