Merge branch 'master' into gh-pages

css/preview-film-section.css

@@ -0,0 +1,63 @@
+
+.preview-list {
+  list-style-type: none;
+}
+
+.preview-tile {
+  padding : 10px;
+  overflow: hidden;
+  background-color: gray;
+}
+
+.preview-tile .canvas-container {
+  float: left;
+}
+
+.preview-tile .tile-view {
+  float: left;
+  border: blue 1px solid;
+}
+
+.preview-tile .tile-action {
+  display: none;
+  float: right;
+}
+
+.preview-tile:hover .tile-action {
+  display: block;
+}
+
+.preview-tile:hover {
+  background-color: lightgray;
+}
+
+.preview-tile.selected {
+  background-color: lightyellow;
+}
+
+.preview-tile.ui-draggable-dragging {
+  opacity: 0.3;
+}
+
+
+.preview-tile.droppable-active {
+  background-color: pink;
+}
+
+.interstitial-tile.droppable-hover-active {
+  background-color: purple;
+}
+
+.preview-tile.droppable-hover-active {
+  background-color: yellow;
+}
+
+.interstitial-tile {
+  visibility: hidden;
+  background-color: blue;
+  height: 10px;
+}
+
+.show-interstitial-tiles .interstitial-tile {
+  visibility: visible;
+}

css/style.css

@@ -52,41 +52,6 @@
   display : inline-block;
 }
 
-#preview-list {
-  list-style-type: none;
-}
-
-.preview-tile {
-  padding : 10px;
-  overflow: hidden;
-  background-color: gray;
-}
-
-.preview-tile .canvas-container {
-  float: left;
-}
-
-.preview-tile .tile-view {
-  float: left;
-  border: blue 1px solid;
-}
-
-.preview-tile .tile-action {
-  display: none;
-  float: right;
-}
-
-.preview-tile:hover .tile-action {
-  display: block;
-}
-
-.preview-tile:hover {
-  background-color: lightgray;
-}
-
-#preview-list .preview-tile.selected {
-  background-color: lightyellow;
-}
 
 .canvas-container {
   position: relative;

index.html

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/tools.css">
+  <link rel="stylesheet" href="css/preview-film-section.css">
   
   
 </head>
@@ -56,7 +57,7 @@
 
   <div class='left-nav'>
     <!-- List of frames: -->
-    <ul id="preview-list"></ul>
+    <ul class="preview-list" id="preview-list"></ul>
   </div>
 
   <div class='main-panel'>
@@ -76,6 +77,7 @@
   
   <!-- Core libraries: -->
   <script src="js/lib/jquery-1.8.0.js"></script>
+  <script src="js/lib/jquery-ui-1.8.23.custom.js"></script>
   <script src="js/lib/pubsub.js"></script> 
   
   <!-- Application wide configuration -->

js/controller/PreviewFilmController.js

@@ -21,19 +21,132 @@
     };
 
     ns.PreviewFilmController.prototype.createPreviews = function () {
-      this.container.innerHTML = "";
-      for (var i = 0, l = this.framesheet.getFrameCount(); i < l ; i++) {
-        this.container.appendChild(this.createPreviewTile(i));
+      // TODO(vincz): Full redraw on any drawing modification, optimize.
+      this.container.html("");
+
+      var frameCount = this.framesheet.getFrameCount();
+      
+      for (var i = 0, l = frameCount; i < l ; i++) {
+        this.container.append(this.createInterstitialTile_(i));
+        this.container.append(this.createPreviewTile_(i));
+      }
+      this.container.append(this.createInterstitialTile_(frameCount));
+
+      var needDragndropBehavior = !!(frameCount > 1);
+      if(needDragndropBehavior) {
+      	this.initDragndropBehavior_();
       }
     };
 
-    ns.PreviewFilmController.prototype.createPreviewTile = function(tileNumber) {
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
+    	var initerstitialTile = document.createElement("div");
+		initerstitialTile.className = "interstitial-tile"
+		initerstitialTile.setAttribute("data-tile-type", "interstitial");
+		initerstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
+
+		return initerstitialTile;
+    };
+
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
+    	var tiles = $(".preview-tile");
+    	// Each preview film tile is draggable.
+    	tiles.draggable( {
+	      //containment: '.left-nav',
+	      stack: '.preview-tile',
+	      cursor: 'move',
+	      revert: true,
+	      start: function(event, ui) {
+	      	// We only show the fake interstitial tiles when starting the 
+	      	// drag n drop interaction. We hide them when the DnD is done.
+	      	$('#preview-list').addClass("show-interstitial-tiles");
+	      },
+	      stop: function() {
+	      	$('#preview-list').removeClass("show-interstitial-tiles");
+	      }
+	    });
+
+
+    	// Each preview film tile is a drop target. This allow us to swap two tiles.
+    	// However, we want to be able to insert a tile between two other tiles.
+    	// For that we created fake interstitial tiles that are used as drop targets as well.
+    	var droppableTiles = $(".interstitial-tile");
+    	$.merge(droppableTiles, tiles);
+
+	    droppableTiles.droppable( {
+	        accept: ".preview-tile",
+	        tolerance: "pointer",
+			activeClass: "droppable-active",
+			hoverClass: "droppable-hover-active",
+			drop: $.proxy(this.onDrop_, this)
+	    });
+    };
+
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
+		var activeFrame;
+		var originFrameId = parseInt($(event.srcElement).data("tile-number"), 10);
+		var dropTarget = $(event.target);
+		
+		if(dropTarget.data("tile-type") == "interstitial") {
+			var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
+			// In case we drop outside of the tile container
+			if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
+				return;
+			}
+			console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
+			this.framesheet.moveFrame(originFrameId, targetInsertionId);
+			
+			activeFrame = targetInsertionId;
+			// The last fake interstitial tile is outside of the framesheet array bound.
+			// It allow us to append after the very last element in this fake slot.
+			// However, when setting back the active frame, we have to make sure the 
+			// frame does exist.
+			if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
+				activeFrame = targetInsertionId - 1;
+			}
+		}
+		else {
+			var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
+			// In case we drop outside of the tile container
+			if(isNaN(originFrameId) || isNaN(targetSwapId)) {
+				return;
+			}
+			console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
+			this.framesheet.swapFrames(originFrameId, targetSwapId);
+			activeFrame = targetSwapId;
+		}
+
+		
+		$('#preview-list').removeClass("show-interstitial-tiles");
+
+		// TODO(vincz): deprecate.
+		piskel.setActiveFrameAndRedraw(activeFrame);
+
+		// TODO(vincz): move localstorage request to the model layer?
+		$.publish(Events.LOCALSTORAGE_REQUEST);
+		
+	};
+
+	/**
+     * @private
+     * TODO(vincz): clean this giant rendering function & remove listeners.
+     */
+    ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
     	var frame = this.framesheet.getFrameByIndex(tileNumber);
     	var width = frame.getWidth() * this.dpi,
     		height = frame.getHeight() * this.dpi;
 
 		var previewTileRoot = document.createElement("li");
 		var classname = "preview-tile";
+		previewTileRoot.setAttribute("data-tile-number", tileNumber);
 
 		if (piskel.getActiveFrameIndex() == tileNumber) {
 			classname += " selected";

js/lib/jquery-ui-package-info.txt

@@ -0,0 +1,14 @@
+
+jquery-ui-1.8.23.custom.js was generated at: http://http://jqueryui.com/download
+and contains:
+
+jQuery  ui core:
+	core
+	widget
+	position
+	mouse
+
+Interactions:
+	Draggable
+	Droppable
+	Resizable

js/model/FrameSheet.js

@@ -95,4 +95,29 @@
 		var frame = this.getFrameByIndex(index);
 		this.frames.splice(index + 1, 0, frame.clone());
 	};
+
+	ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
+		var frameToMove = this.getFrameByIndex(originIndex);
+		this.frames.splice(destinationIndex, 0,frameToMove);
+
+		if(destinationIndex <= originIndex) {
+			originIndex++;
+		}
+		this.removeFrameByIndex(originIndex);
+	};
+
+	ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
+		if(isNaN(indexFrame1) || isNaN(indexFrame1) ||
+		   (!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) {
+		 	throw "Bad indexes for swapFrames Framesheet function.";
+		}
+		if(indexFrame1 == indexFrame2) {
+			return;
+		}
+		else {
+			var swapFrame = this.frames[indexFrame1];
+			this.frames[indexFrame1] = this.frames[indexFrame2];
+			this.frames[indexFrame2] = swapFrame;
+		}
+	};
 })();

js/piskel.js

@@ -73,7 +73,7 @@ $.namespace("pskl");
 
       this.previewsController = new pskl.controller.PreviewFilmController(
         frameSheet,
-        $('#preview-list')[0], 
+        $('#preview-list'), 
         previewTileCanvasDpi
       );