Fix : remove cache issues for css, js, templates

Packaged css and js are now suffixed with the build date.
All templates are exported to a folder named after the build date.
Streamlined the build process to copy files to piskel-website.

Isolated common part between piskel and piskel-website in a separated
template, which is now completely created by the grunt build of piskel.

Added a windows CMD script to copy the static resources to piskel-website.

src/index.html

@@ -23,6 +23,10 @@
       <span style="top:45%">Loading Piskel ...</span>
   </div>
   <script type="text/javascript" src="js/lib/iframeLoader.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>
 
@@ -70,6 +74,10 @@
   </div>
 
   <iframe src="templates/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.js"></script>
 </body>
 </html>

src/js/lib/iframeLoader.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);
     }
-  }
+  };
 })();

src/piskel-boot.js

@@ -1,9 +1,15 @@
 (function () {
 
+  var version = '@@version';
+  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);
   }