From 91bacd1dd9bdd9e96fdb3d846101ad7161b54575 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Sun, 4 Aug 2013 18:27:32 +0200
Subject: [PATCH] Added concat and uglify tasks to grunt. Piskel on master will
 only be able to work in debug mode, by passing ?debug in URL. The minified
 version is built in /build, which has been added to .gitignore

---
 .gitignore                        |   6 +-
 Gruntfile.js                      | 105 ++++++++++++++++++------------
 all.html                          |  39 -----------
 index.html                        | 100 ++++++++++------------------
 js/lib/jsColor_1_4_0/jscolor.js   |  29 +--------
 js/piskel.js                      |  56 ++++++++--------
 js/service/LocalStorageService.js |  14 ++--
 package.json                      |   4 +-
 script-load-list.js               |  67 +++++++++++++++++++
 9 files changed, 212 insertions(+), 208 deletions(-)
 delete mode 100644 all.html
 create mode 100644 script-load-list.js

diff --git a/.gitignore b/.gitignore
index b54edf37..b785b0e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,10 +3,14 @@
 
 # nodejs local installs
 node_modules
+npm-debug.log
 
 # sublime text stuff (the -project should actually be shared, but then we'd have to share the same disk location)
 *.sublime-project
 *.sublime-workspace
 
 # git stackdumps
-*.stackdump
\ No newline at end of file
+*.stackdump
+
+# builds
+build
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
index 15a6ad5f..5765de14 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -5,56 +5,77 @@
  *   - run a grunt target defined in Gruntfiles.js, ex: 'grunt lint'
  *
  * Note: The 'ghost' grunt task have special deps on CasperJS and phantomjs.
- *       For now, It's configured to run only on TravisCI where these deps are 
+ *       For now, It's configured to run only on TravisCI where these deps are
  *       correctly defined.
- *       If you run this task locally, it may require some env set up first. 
+ *       If you run this task locally, it may require some env set up first.
  */
 
-module.exports = function(grunt) {
-	grunt.initConfig({
-		jshint: {
-			/*options: {
+module.exports = function (grunt) {
+  grunt.initConfig({
+    jshint : {
+      /*options: {
 				"evil": true,
 				"asi": true,
 				"smarttabs": true,
 				"eqnull": true
 			},*/
-			files: [
-				'Gruntfile.js',
-				'package.json',
-				'js/**/*.js',
-				'!js/lib/**/*.js' // Exclude lib folder (note the leading !)
-			]
-		},
-		connect: {
-			www: {
-				options: {
-					base: '.',
-					port: 4545
-				}
-			}
-		},
-		ghost: {
-			dist: {
-				filesSrc:  ['tests/integration/casperjs/*_test.js'],
-				options: {
-					args: {
-						baseUrl: 'http://localhost:' +
-							'<%= connect.www.options.port %>/'
-					},
-					direct: false,
-					logLevel: 'error',
-					printCommand: false,
-					printFilePaths: true
-				}
-			}
-		}
-	});
+      files : [
+        'Gruntfile.js',
+        'package.json',
+        'js/**/*.js',
+        '!js/lib/**/*.js' // Exclude lib folder (note the leading !)
+      ]
+    },
+    connect : {
+      www : {
+        options : {
+          base : '.',
+          port : 4545
+        }
+      }
+    },
+    ghost : {
+      dist : {
+        filesSrc : ['tests/integration/casperjs/*_test.js'],
+        options : {
+          args : {
+            baseUrl : 'http://localhost:' + '<%= connect.www.options.port %>/'
+          },
+          direct : false,
+          logLevel : 'error',
+          printCommand : false,
+          printFilePaths : true
+        }
+      }
+    },
+    concat : {
+      options : {
+        separator : ';',
+      },
+      dist : {
+        src : require('./script-load-list.js').scripts,
+        dest : 'build/piskel-packaged.js',
+      },
+    },
+    uglify : {
+      options : {
+        mangle : true
+      },
+      my_target : {
+        files : {
+          'build/piskel-packaged-min.js' : ['build/piskel-packaged.js']
+        }
+      }
+    }
+  });
 
-	grunt.loadNpmTasks('grunt-contrib-connect');
-	grunt.loadNpmTasks('grunt-contrib-jshint');
-	grunt.loadNpmTasks('grunt-ghost');
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-ghost');
 
-	grunt.registerTask('lint', ['jshint']);
-	grunt.registerTask('test', ['jshint', 'connect', 'ghost']);
+  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
+  grunt.registerTask('lint', ['jshint']);
+  grunt.registerTask('test', ['jshint', 'connect', 'ghost']);
 };
diff --git a/all.html b/all.html
deleted file mode 100644
index 85471c58..00000000
--- a/all.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!doctype html5>
-<html>
-<head>
-	<title>All piskels</title>
-</head>
-<body>
-	<script type="text/javascript">
-	(function () {
-		var loadAllPiskelIds = function (frameId) {
-			var xhr = new XMLHttpRequest();
-			// TODO: Change frameId to framesheetId on the backend
-			xhr.open('GET', 'http://2.piskel-app.appspot.com/all?l=' + frameId, true);
-			xhr.responseType = 'text';
-
-			xhr.onload = function(e) {
-				var ul = document.createElement("UL");
-				var innerHTML = "";
-				eval("var responseObject = " + this.responseText);
-				var keys = responseObject.keys;
-				var baseUrl = window.location.origin + "/piskel/?frameId=";
-				if (keys) {
-					for (var i = 0 ; i < keys.length ; i++) {
-						var key = keys[i];
-
-						innerHTML += "<li><a target='_blank' href='"+baseUrl+key+"'>"+key+"</a></li>" 
-					}
-				}
-				ul.innerHTML = innerHTML;
-				document.body.appendChild(ul);
-			};
-
-			xhr.send();
-	    };
-
-	    loadAllPiskelIds();
-	})();
-	</script>
-</body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6eff0045..a14bfb1c 100644
--- a/index.html
+++ b/index.html
@@ -119,70 +119,42 @@
     </div>
   </div>
   
-  <!-- Core libraries: -->
-  <script src="js/lib/jquery-1.8.0.js"></script>
-  <script src="js/lib/jquery-ui-1.10.3.custom.js"></script>
-  <script src="js/lib/pubsub.js"></script>
-  <script src="js/lib/bootstrap/bootstrap.js"></script> 
+  <script type="text/javascript">
+    (function () {
+      var loadScript = function (src, callback) {
+        document.write('<scr'+'ipt src ="'+src+'" onload="'+callback+'"></sc'+'ript>');
+      };
+      if (window.location.href.indexOf("debug") != -1) {
+        window.exports = {};
+        loadScript("script-load-list.js", "loadDebugScripts()");
+        window.loadDebugScripts = function () {
+          exports.scripts.forEach(function (script){
+            loadScript(script, "done()")
+          })
+        }
+        var loaded = 0;
+        window.done = function () {
+          loaded ++;
+          if (loaded == exports.scripts.length) {
+            pskl.app.init();
+            // cleanup
+            delete window.exports;
+            delete window.loadDebugScripts;
+            delete window.done;
+          }
+        };
 
-  <!-- GIF Encoding libraries -->
-  <script src="js/lib/gif/GIFEncoder.js"></script>
-  <script src="js/lib/gif/b64.js"></script>
-  <script src="js/lib/gif/NeuQuant.js"></script>
-  <script src="js/lib/gif/LZWEncoder.js"></script>
-
-  <!-- Application wide configuration -->
-  <script src="js/Constants.js"></script>
-  <script src="js/Events.js"></script>
-  
-  <!-- Libraries -->
-  <script src="js/utils/core.js"></script>
-  <script src="js/utils/PixelUtils.js"></script>
-  <script src="js/utils/CanvasUtils.js"></script>
-  <script src="js/utils/UserSettings.js"></script>
-  <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
-
-  <!-- Application libraries-->
-  <script src="js/rendering/DrawingLoop.js"></script>
-  <!-- Models -->
-  <script src="js/model/Frame.js"></script>
-  <script src="js/model/FrameSheet.js"></script>
-  <script src="js/selection/SelectionManager.js"></script>
-  <script src="js/selection/BaseSelection.js"></script>
-  <script src="js/selection/RectangularSelection.js"></script>
-  <script src="js/selection/ShapeSelection.js"></script>
-  <!-- Rendering -->
-  <script src="js/rendering/CanvasRenderer.js"></script>
-  <script src="js/rendering/FrameRenderer.js"></script>
-  <script src="js/rendering/SpritesheetRenderer.js"></script>
-  <!-- Controllers -->
-  <script src="js/controller/DrawingController.js"></script>
-  <script src="js/controller/PreviewFilmController.js"></script>
-  <script src="js/controller/AnimatedPreviewController.js"></script>
-  <script src="js/controller/ToolController.js"></script>
-  <script src="js/controller/PaletteController.js"></script>
-  <script src="js/controller/NotificationController.js"></script>
-  <script src="js/controller/SettingsController.js"></script>
-  <!-- Services -->
-  <script src="js/service/LocalStorageService.js"></script>
-  <script src="js/service/HistoryService.js"></script>
-  <script src="js/service/KeyboardEventService.js"></script>  
-  <!-- Tools-->
-  <script src="js/drawingtools/BaseTool.js"></script>
-  <script src="js/drawingtools/SimplePen.js"></script>
-  <script src="js/drawingtools/VerticalMirrorPen.js"></script>
-  <script src="js/drawingtools/Eraser.js"></script>
-  <script src="js/drawingtools/Stroke.js"></script>
-  <script src="js/drawingtools/PaintBucket.js"></script>
-  <script src="js/drawingtools/Rectangle.js"></script>
-  <script src="js/drawingtools/Circle.js"></script>
-  <script src="js/drawingtools/Move.js"></script>
-  <script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
-  <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
-  <script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
-  <script src="js/drawingtools/ColorPicker.js"></script>
-  
-  <!-- Application controller and initialization -->
-  <script src="js/piskel.js"></script>
+      } else {
+        var script;
+        if (window.location.href.indexOf("pack") != -1) {
+          script = "build/piskel-packaged.js";
+        } else {
+          script = "build/piskel-packaged-min.js";
+        }
+        loadScript(script, "pskl.app.init()");
+      }
+    })();
+    
+  </script>
 </body>
 </html>
diff --git a/js/lib/jsColor_1_4_0/jscolor.js b/js/lib/jsColor_1_4_0/jscolor.js
index 47cd4b1e..397fa747 100644
--- a/js/lib/jsColor_1_4_0/jscolor.js
+++ b/js/lib/jsColor_1_4_0/jscolor.js
@@ -35,34 +35,7 @@ var jscolor = {
 
 
 	getDir : function() {
-		if(!jscolor.dir) {
-			var detected = jscolor.detectDir();
-			jscolor.dir = detected!==false ? detected : 'jscolor/';
-		}
-		return jscolor.dir;
-	},
-
-
-	detectDir : function() {
-		var base = location.href;
-
-		var e = document.getElementsByTagName('base');
-		for(var i=0; i<e.length; i+=1) {
-			if(e[i].href) { base = e[i].href; }
-		}
-
-		var e = document.getElementsByTagName('script');
-		for(var i=0; i<e.length; i+=1) {
-			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
-				var src = new jscolor.URI(e[i].src);
-				var srcAbs = src.toAbsolute(base);
-				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
-				srcAbs.query = null;
-				srcAbs.fragment = null;
-				return srcAbs.toString();
-			}
-		}
-		return false;
+		return "js/lib/jsColor_1_4_0/";
 	},
 
 
diff --git a/js/piskel.js b/js/piskel.js
index e139729a..67869e4b 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -23,7 +23,7 @@
        * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
        */
       this.isStaticVersion = !pskl.appEngineToken_;
-      
+
       this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
       this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
       this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
@@ -60,7 +60,9 @@
       if (this.isStaticVersion) {
         var framesheetId = this.readFramesheetIdFromURL_();
         if (framesheetId) {
-          $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
+          $.publish(Events.SHOW_NOTIFICATION, [{
+            "content" : "Loading animation with id : [" + framesheetId + "]"
+          }]);
           this.loadFramesheetFromService(framesheetId);
         } else {
           this.finishInit();
@@ -79,7 +81,7 @@
 
       // Init (event-delegated) bootstrap tooltips:
       $('body').tooltip({
-        selector: '[rel=tooltip]'
+        selector : '[rel=tooltip]'
       });
     },
 
@@ -87,24 +89,25 @@
       this.drawingController.render(delta);
       this.animationController.render(delta);
       this.previewsController.render(delta);
-    },    
+    },
 
     finishInit : function () {
       var toolController = new pskl.controller.ToolController();
       toolController.init();
-      
+
       var paletteController = new pskl.controller.PaletteController();
       paletteController.init(frameSheet);
     },
 
     readSizeFromURL_ : function () {
-      var sizeParam = this.readUrlParameter_("size"), size;
+      var sizeParam = this.readUrlParameter_("size"),
+        size;
       // parameter expected as size=64x48 => size=widthxheight
       var parts = sizeParam.split("x");
       if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
         var width = parseInt(parts[0], 10),
-            height = parseInt(parts[1], 10);
-      
+          height = parseInt(parts[1], 10);
+
         size = {
           height : Math.min(height, Constants.MAX_HEIGHT),
           width : Math.min(width, Constants.MAX_WIDTH)
@@ -115,15 +118,15 @@
       return size;
     },
 
-    readFramesheetIdFromURL_ : function() {
+    readFramesheetIdFromURL_ : function () {
       return this.readUrlParameter_("frameId");
     },
 
     readUrlParameter_ : function (paramName) {
       var searchString = window.location.search.substring(1),
-      i, val, params = searchString.split("&");
+        i, val, params = searchString.split("&");
 
-      for (i=0;i<params.length;i++) {
+      for (i = 0; i < params.length; i++) {
         val = params[i].split("=");
         if (val[0] == paramName) {
           return unescape(val[1]);
@@ -137,7 +140,7 @@
       xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
       xhr.responseType = 'text';
 
-      xhr.onload = function(e) {
+      xhr.onload = function (e) {
         var res = JSON.parse(this.responseText);
         frameSheet.load(res.framesheet);
         pskl.app.animationController.setFPS(res.fps);
@@ -174,44 +177,48 @@
         formData.append('name', $('#piskel-name').val());
         formData.append('frames', frameSheet.getFrameCount());
         // Get image/png data for first frame
-       
+
         formData.append('preview', this.getFirstFrameAsPNGData_());
 
         xhr.open('POST', "save", true);
       }
-     
-      xhr.onload = function(e) {
+
+      xhr.onload = function (e) {
         if (this.status == 200) {
           if (pskl.app.isStaticVersion) {
             var baseUrl = window.location.href.replace(window.location.search, "");
-           window.location.href = baseUrl + "?frameId=" + this.responseText;
+            window.location.href = baseUrl + "?frameId=" + this.responseText;
           } else {
-            $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
+            $.publish(Events.SHOW_NOTIFICATION, [{
+              "content" : "Successfully saved !"
+            }]);
           }
         } else {
           this.onerror(e);
         }
       };
-      xhr.onerror = function(e) {
-        $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
+      xhr.onerror = function (e) {
+        $.publish(Events.SHOW_NOTIFICATION, [{
+          "content" : "Saving failed (" + this.status + ")"
+        }]);
       };
       xhr.send(formData);
 
-      if(event) {
+      if (event) {
         event.stopPropagation();
         event.preventDefault();
       }
       return false;
     },
 
-    uploadToScreenletstore : function(imageData) {
+    uploadToScreenletstore : function (imageData) {
       var xhr = new XMLHttpRequest();
       var formData = new FormData();
       formData.append('data', imageData);
       xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
       var cloudURL;
       var that = this;
-      xhr.onload = function(e) {
+      xhr.onload = function (e) {
         if (this.status == 200) {
           cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
           that.openWindow(cloudURL);
@@ -232,7 +239,7 @@
       this.uploadToScreenletstore(imageData);
     },
 
-    openWindow: function(url) {
+    openWindow : function (url) {
       var options = [
         "dialog=yes", "scrollbars=no", "status=no",
         "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(),
@@ -242,7 +249,4 @@
       window.open(url, "piskel-export", options);
     }
   };
-
-  pskl.app.init();
-
 })();
diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js
index 7c50efc4..2d05936f 100644
--- a/js/service/LocalStorageService.js
+++ b/js/service/LocalStorageService.js
@@ -10,6 +10,13 @@
     this.localStorageThrottler_ = null;
   };
 
+  /**
+   * @public
+   */
+  ns.LocalStorageService.prototype.init = function(framesheet_) {
+    $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
+  };
+
   /**
    * @private
    */
@@ -51,13 +58,6 @@
     delete window.localStorage.snapShot;
   };
 
-  /**
-   * @public
-   */
-  ns.LocalStorageService.prototype.init = function(framesheet_) {
-    $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
-  };
-
   /**
    * @public
    */
diff --git a/package.json b/package.json
index c0ddfa95..b48a3a5f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "grunt": "~0.4.1",
     "grunt-contrib-connect": "0.3.0",
     "grunt-contrib-jshint": "0.5.4",
-    "grunt-ghost": "1.0.12"
+    "grunt-contrib-uglify": "0.2.2",
+    "grunt-ghost": "1.0.12",
+    "grunt-contrib-concat": "0.1.2"
   }
 }
diff --git a/script-load-list.js b/script-load-list.js
new file mode 100644
index 00000000..0dd22b2b
--- /dev/null
+++ b/script-load-list.js
@@ -0,0 +1,67 @@
+// This list is used both by the grunt build and index.html (in debug mode)
+
+exports.scripts = [
+  // Core libraries
+  "js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js", 
+  // GIF Encoding libraries
+  "js/lib/gif/GIFEncoder.js","js/lib/gif/b64.js","js/lib/gif/NeuQuant.js","js/lib/gif/LZWEncoder.js",
+
+  // Application wide configuration
+  "js/Constants.js",
+  "js/Events.js",
+  
+  // Libraries
+  "js/utils/core.js",
+  "js/utils/PixelUtils.js",
+  "js/utils/CanvasUtils.js",
+  "js/utils/UserSettings.js",
+  "js/lib/jsColor_1_4_0/jscolor.js",
+
+  // Application libraries-->
+  "js/rendering/DrawingLoop.js",
+
+  // Models
+  "js/model/Frame.js",
+  "js/model/FrameSheet.js",
+  "js/selection/SelectionManager.js",
+  "js/selection/BaseSelection.js",
+  "js/selection/RectangularSelection.js",
+  "js/selection/ShapeSelection.js",
+
+  // Rendering
+  "js/rendering/CanvasRenderer.js",
+  "js/rendering/FrameRenderer.js",
+  "js/rendering/SpritesheetRenderer.js",
+
+  // Controllers
+  "js/controller/DrawingController.js",
+  "js/controller/PreviewFilmController.js",
+  "js/controller/AnimatedPreviewController.js",
+  "js/controller/ToolController.js",
+  "js/controller/PaletteController.js",
+  "js/controller/NotificationController.js",
+  "js/controller/SettingsController.js",
+
+  // Services
+  "js/service/LocalStorageService.js",
+  "js/service/HistoryService.js",
+  "js/service/KeyboardEventService.js",  
+
+  // Tools
+  "js/drawingtools/BaseTool.js",
+  "js/drawingtools/SimplePen.js",
+  "js/drawingtools/VerticalMirrorPen.js",
+  "js/drawingtools/Eraser.js",
+  "js/drawingtools/Stroke.js",
+  "js/drawingtools/PaintBucket.js",
+  "js/drawingtools/Rectangle.js",
+  "js/drawingtools/Circle.js",
+  "js/drawingtools/Move.js",
+  "js/drawingtools/selectiontools/BaseSelect.js",
+  "js/drawingtools/selectiontools/RectangleSelect.js",
+  "js/drawingtools/selectiontools/ShapeSelect.js",
+  "js/drawingtools/ColorPicker.js",
+
+  // Application controller and initialization
+  "js/piskel.js"
+];
\ No newline at end of file