swap colors

css/piskel-style-packaged-2014-07-08-08-06.css

@@ -830,6 +830,12 @@ body {
   background-size: 23px 23px;
 }
 
+.tool-icon.tool-colorswap {
+  background-image: url(../img/tools/swap-colors.png);
+  background-position: 6px 6px;
+  background-size: 36px 36px;
+}
+
 /*
  * Tool cursors:
  */
@@ -2422,6 +2428,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   border: #999 3px solid;
 }
 
+.tile-view {
+  position : relative;
+}
+
 .preview-tile .tile-overlay {
   z-index: 10;
   position: absolute;

index.html

@@ -22,13 +22,17 @@
     color:white;">
       <span style="top:45%">Loading Piskel ...</span>
   </div>
-  <script type="text/javascript" src="js/lib/iframeLoader.js"></script>
+  <script type="text/javascript" src="js/lib/iframeLoader-0.1.0.js"></script>
+
+  <!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
+  <!-- do not delete, do not move :) -->
+  <!--body-main-start-->
   <div id="main-wrapper" class="main-wrapper">
-    <iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+    <iframe src="templates-2014-07-08-08-06/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
 
     <div id="column-wrapper" class="column-wrapper">
       <div class='column left-column'>
-        <iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-08-08-06/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
       </div>
 
       <div class='column main-column'>
@@ -38,25 +42,25 @@
       </div>
 
       <div class="column right-column">
-        <iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-        <iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-08-08-06/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-08-08-06/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-08-08-06/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="pull-bottom cursor-coordinates"></div>
       </div>
     </div>
 
     <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
       <div class="sticky-section-wrap">
-        <iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <iframe src="templates-2014-07-08-08-06/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="drawer vertical-centerer">
           <div class="drawer-content" id="drawer-container">
-            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates-2014-07-08-08-06/settings/export-png.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>
       </div>
@@ -65,11 +69,15 @@
 
   <div id="dialog-container-wrapper">
     <div id="dialog-container">
-      <iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+      <iframe src="templates-2014-07-08-08-06/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
     </div>
   </div>
 
-  <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
-  <script type="text/javascript" src="piskel-boot.js"></script>
+  <iframe src="templates-2014-07-08-08-06/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  <!--body-main-end-->
+  <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
+  <!-- do not delete, do not move :) -->
+
+  <script type="text/javascript" src="piskel-boot-0.1.0.js"></script>
 </body>
 </html>

js/lib/iframeLoader-0.1.0.js

@@ -37,11 +37,7 @@
   var storeFrame = function (iframe) {
     var script=document.createElement("script");
     script.setAttribute("type", "text/html");
-    if (window.pskl && window.pskl.appEngineToken_) {
-      script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
-    } else {
-      script.setAttribute("id", iframe.getAttribute("src"));
-    }
+    script.setAttribute("id", iframe.getAttribute("src").replace(/.*templates[^\/]*\//,'templates/'));
     script.innerHTML = iframe.contentWindow.document.body.innerHTML;
     iframe.parentNode.removeChild(iframe);
     document.body.appendChild(script);
@@ -52,5 +48,5 @@
       var iframe = event.target || event.srcElement;
       processFrame(iframe);
     }
-  }
+  };
 })();

piskel-boot-0.1.0.js

@@ -1,9 +1,15 @@
 (function () {
 
+  var version = '-2014-07-08-08-06';
+  var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
+  if (versionHasNotBeenReplaced)  {
+    version = '';
+  }
+
   window.onPiskelReady = function () {
     var loadingMask = document.getElementById('loading-mask');
     loadingMask.style.opacity = 0;
-    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600)
+    window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
     pskl.app.init();
     // cleanup
     delete window.pskl_exports;
@@ -36,18 +42,18 @@
     document.head.appendChild(link);
   };
 
-  if (window.location.href.indexOf("debug") != -1) {
+  if (window.location.href.indexOf('debug') != -1) {
     window.pskl_exports = {};
     var scriptIndex = 0;
     window.loadNextScript = function () {
       if (scriptIndex == window.pskl_exports.scripts.length) {
         window.onPiskelReady();
       } else {
-        loadScript(window.pskl_exports.scripts[scriptIndex], "loadNextScript()");
+        loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
         scriptIndex ++;
       }
     };
-    loadScript("piskel-script-list.js", "loadNextScript()");
+    loadScript('piskel-script-list.js', 'loadNextScript()');
 
     window.loadStyles = function () {
       var styles = window.pskl_exports.styles;
@@ -55,22 +61,22 @@
         loadStyle(styles[i]);
       }
     };
-    loadScript("piskel-style-list.js", "loadStyles()");
+    loadScript('piskel-style-list.js', 'loadStyles()');
   } else {
     var script;
-    if (window.location.href.indexOf("pack") != -1) {
-      script = "js/piskel-packaged.js";
+    if (window.location.href.indexOf('pack') != -1) {
+      script = 'js/piskel-packaged' + version + '.js';
     } else {
-      script = "js/piskel-packaged-min.js";
+      script = 'js/piskel-packaged-min' + version + '.js';
     }
-    loadStyle('css/piskel-style-packaged.css');
+    loadStyle('css/piskel-style-packaged' + version + '.css');
 
     var loaderInterval = window.setInterval(function () {
-      if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
+      if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
         window.clearInterval(loaderInterval);
-        loadScript(script, "onPiskelReady()");
+        loadScript(script, 'onPiskelReady()');
       } else {
-        console.log("waiting for templates to load ....");
+        window.console.log('waiting for templates to load ....');
       }
     }, 100);
   }