Issue #729 - implement custom PNG export viewer instead of opening wi…

…ndow to data-uri
piskelapp · Sep 24, 2017 · 8cb89c9 · 8cb89c9
1 parent dc52096
commit 8cb89c9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 1 deletion.
diff --git a/src/index.html b/src/index.html
@@ -67,6 +67,7 @@
   </div>
 
   @@include('templates/misc-templates.html', {})
+  @@include('templates/data-uri-export.html', {})
   @@include('templates/popup-preview.html', {})
 
   <span class="cheatsheet-link icon-common-keyboard-gold"

diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js
@@ -207,6 +207,14 @@
   };
 
   ns.PngExportController.prototype.onDataUriClick_ = function (evt) {
-    window.open(this.createPngSpritesheet_().toDataURL('image/png'));
+    var popup = window.open('about:blank');
+    var dataUri = this.createPngSpritesheet_().toDataURL('image/png');
+    window.setTimeout(function () {
+      var html = pskl.utils.Template.getAndReplace('data-uri-export-partial', {
+        src: dataUri
+      });
+      popup.document.title = dataUri;
+      popup.document.body.innerHTML = html;
+    }.bind(this), 500);
   };
 })();
diff --git a/src/templates/data-uri-export.html b/src/templates/data-uri-export.html
@@ -0,0 +1,69 @@
+<div style="display:none">
+  <script type="text/template" id="data-uri-export-partial">
+    <style>
+      html, body {
+        margin: 0;
+      }
+
+      body {
+        background: #444;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-family: monospace;
+      }
+
+      #image-wrapper {
+        flex-grow: 1;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      img {
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
+      }
+
+      #bottom-wrapper {
+        width: 600px;
+        height: 300px;
+        margin-top: 20px;
+        position: relative;
+        flex-shrink: 0;
+      }
+      textarea {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        border-style: none;
+
+        background: black;
+        color: gold;
+        font-family: monospace;
+      }
+
+      span {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        font-size: 12px;
+        padding: 5px;
+        color: white;
+        background-color: #444;
+      }
+    </style>
+    <body>
+      <div id="image-wrapper">
+        <img src="{{src}}" alt="Exported image as data-uri">
+      </div>
+      <div id="bottom-wrapper">
+        <textarea spellcheck="false" onclick="this.select()">{{src}}</textarea>
+        <span>Data-uri for the exported framesheet</span>
+      </div>
+    </body>
+  </script>
+</div>