Added deleting

app/controllers/tasks_controller.rb

@@ -43,10 +43,10 @@ def destroy
 		task = Task.find(params[:id])
 
 		if (task.board == params[:board])
-			task.destroy
-
 			Pusher[params[:board]].trigger('task-destroy', task.as_json, params[:socket_id])
 
+			task.destroy
+
 			render :json => task
 		end
 	end

app/views/common/application_board_selected.jst

@@ -9,7 +9,7 @@
 
 	<p class="clearingMessage">Clear Tasks?</p>
 
-  	<p><a id="editTasks" class="toggleDoneButton" href="Javascript:void(0)">Edit</a></p>
+<!--  	<p><a id="editTasks" class="toggleDoneButton" href="Javascript:void(0)">Edit</a></p> -->
 
 	<div id="taskStoreView"></div>
 

config/assets.yml

@@ -1,5 +1,6 @@
 javascripts:
     core:
+        - public/javascripts/vendor/modernizr.js
         - public/javascripts/vendor/jquery.js
         - public/javascripts/vendor/underscore.js
         - public/javascripts/vendor/backbone.js

public/javascripts/models/task_store.js

@@ -48,12 +48,13 @@ var TaskStore = Backbone.Collection.extend(function(){
 
     updateTask: function(task) {      
       this.findById(task._id).set(task);
+      this.trigger('taskToggled');
     },
 
     removeTask: function(task) {
       var task = this.findById(task._id);
-
       this.remove(task);
+      this.trigger('taskToggled');
     },
 
     //internal get function doesn't work on tasks which 
@@ -63,10 +64,6 @@ var TaskStore = Backbone.Collection.extend(function(){
       return this.find(function(task) {
         return task.id == id;
       });
-    },
-
-    toggleEditMode: function() {
-      this.trigger('editableChange');
     }
   };
 }());

public/javascripts/vendor/plugins/jquery.jswipe.js

@@ -0,0 +1,95 @@
+/*
+ * jSwipe - jQuery Plugin
+ * http://plugins.jquery.com/project/swipe
+ * http://www.ryanscherf.com/demos/swipe/
+ *
+ * Copyright (c) 2009 Ryan Scherf (www.ryanscherf.com)
+ * Licensed under the MIT license
+ *
+ * $Date: 2009-07-14 (Tue, 14 Jul 2009) $
+ * $version: 0.1.2
+ * 
+ * This jQuery plugin will only run on devices running Mobile Safari
+ * on iPhone or iPod Touch devices running iPhone OS 2.0 or later. 
+ * http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
+ */
+(function($) {
+	$.fn.swipe = function(options) {
+
+		// Default thresholds & swipe functions
+		var defaults = {
+			threshold: {
+				x: 30,
+				y: 10
+			},
+			swipeLeft: function() {},
+			swipeRight: function() {}
+		};
+
+		var options = $.extend(defaults, options);
+
+		if (!this) return false;
+
+		return this.each(function() {
+
+			var me = $(this)
+
+			// Private variables for each element
+			var originalCoord = { x: 0, y: 0 }
+			var finalCoord = { x: 0, y: 0 }
+
+			// Screen touched, store the original coordinate
+			function touchStart(event) {
+				//console.log('Starting swipe gesture...')
+				originalCoord.x = event.targetTouches[0].pageX
+				originalCoord.y = event.targetTouches[0].pageY
+			}
+
+			// Store coordinates as finger is swiping
+			function touchMove(event) {
+				finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
+				finalCoord.y = event.targetTouches[0].pageY
+			}
+
+			// Done Swiping
+			// Swipe should only be on X axis, ignore if swipe on Y axis
+			// Calculate if the swipe was left or right
+			function touchEnd(event) {
+				//console.log('Ending swipe gesture...')
+				var changeY = originalCoord.y - finalCoord.y
+				if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
+					changeX = originalCoord.x - finalCoord.x
+
+					if(changeX > defaults.threshold.x) {
+						defaults.swipeLeft()
+					}
+					if(changeX < (defaults.threshold.x*-1)) {
+						defaults.swipeRight()
+					}
+				}
+			}
+
+			// Swipe was started
+			function touchStart(event) {
+				//console.log('Starting swipe gesture...')
+				originalCoord.x = event.targetTouches[0].pageX
+				originalCoord.y = event.targetTouches[0].pageY
+
+				finalCoord.x = originalCoord.x
+				finalCoord.y = originalCoord.y
+			}
+
+			// Swipe was canceled
+			function touchCancel(event) { 
+				//console.log('Canceling swipe gesture...')
+			}
+
+			// Add gestures to all swipable areas
+			this.addEventListener("touchstart", touchStart, false);
+			this.addEventListener("touchmove", touchMove, false);
+			this.addEventListener("touchend", touchEnd, false);
+			this.addEventListener("touchcancel", touchCancel, false);
+
+		});
+	};
+})(jQuery);

public/javascripts/views/big_board_view.js

@@ -64,7 +64,6 @@ var BigBoardView = Backbone.View.extend(Stately).extend(function() {
     },
 
     taskDestroyedEventListener: function(task) {
-      console.log("SOMEONE DESTROYED!");
       taskStore.removeTask(task);
     },
 
@@ -84,8 +83,7 @@ var BigBoardView = Backbone.View.extend(Stately).extend(function() {
       "keypress .board_selected input[type=text]" : "keyPressListener",
       "click .clearCompleted" : "clearCompletedListener",
       "confirm .clearCompleted" : "clearCompletedConfirmListener",
-      "cancelConfirm .clearCompleted" : "clearCompletedCancelListener",
-      "click #editTasks" : "editTasksClickListener"
+      "cancelConfirm .clearCompleted" : "clearCompletedCancelListener"
     },
 
     initialize: function() {
@@ -110,8 +108,6 @@ var BigBoardView = Backbone.View.extend(Stately).extend(function() {
         showEffect: 'slideDown',
         hideEffect: 'slideUp'
       });
-
-      this.$('.toggleDoneButton').toggleDoneButton();
     },
 
     getState: function() {
@@ -183,10 +179,6 @@ var BigBoardView = Backbone.View.extend(Stately).extend(function() {
       taskStore.clearCompleted();
     },    
 
-    editTasksClickListener: function() {
-      taskStore.toggleEditMode();
-    },
-
     log: function(str) {
       if (window['console'])
         console.log(str);

public/javascripts/views/task_store_view.js

@@ -27,8 +27,7 @@ var TaskStoreView = Backbone.View.extend(Stately).extend(function() {
     states: {
       NO_ITEMS: "no_items",
       LOADING: "loading",
-      NORMAL: "normal",
-      EDITABLE: "editable"
+      NORMAL: "normal"
     },
 
     initialize: function() {
@@ -37,7 +36,6 @@ var TaskStoreView = Backbone.View.extend(Stately).extend(function() {
     	this.model.bind('refresh', _.bind(this.render, this));
     	this.model.bind('loadingChange', _.bind(this.render, this));
     	this.model.bind('taskToggled', _.bind(this.updateTasksRemaining, this));
-    	this.model.bind('editableChange', _.bind(this.editableChangeListener, this));
     },
 
     render: function() {      
@@ -103,10 +101,6 @@ var TaskStoreView = Backbone.View.extend(Stately).extend(function() {
 
       $('.numTasks').html(numTasks);
       $('.tasksNoun').html(tasksNoun);
-    },
-
-    editableChangeListener: function() {            
-      $(this.el).toggleClass(this.states.EDITABLE);
     }
   };
 }());

public/javascripts/views/task_view.js

@@ -1,6 +1,8 @@
 var TaskView = Backbone.View.extend(Stately).extend(function() {
 
   return {
+    controlsVisible: false,
+
     tagName: "li",
 
     states: {
@@ -28,6 +30,8 @@ var TaskView = Backbone.View.extend(Stately).extend(function() {
       this.processComponents();      
       this.delegateEvents();
 
+      $(this.el).swipe({ swipeRight: _.bind(this.swipedTaskListener, this) });      
+
       return this;
     },
 
@@ -51,7 +55,26 @@ var TaskView = Backbone.View.extend(Stately).extend(function() {
     },
 
     deleteTaskListener: function() {
-      this.model.destroy();      
-    } 
+      this.model.destroy();
+      this.model.collection.remove(this.model);
+    },
+
+    swipedTaskListener: function() {
+      if (!this.controlsVisible) {
+        $(this.el).addClass('editable');
+        this.controlsVisible = true;        
+        $(document).bind('touchstart', _.bind(this.swipedTaskCancelListener, this));
+      } else {
+        $(this.el).removeClass('editable');
+        this.controlsVisible = false;
+        $(document).unbind('touchstart');
+      }
+    },
+
+    swipedTaskCancelListener: function(event) {
+      if ($(event.target).parent('.controls').length == 0) {
+        this.swipedTaskListener();
+      }          
+    }
   };
 }());

public/stylesheets/application.css

@@ -114,17 +114,22 @@ footer .app_name {
   display:block;
 }
 
-.controls {
-  display:none;
+/* show controls on hover for browsers with drag and drop AKA mouse */
+.no-touch #taskStoreView li:hover .controls {
+  visibility:visible;
 }
 
-.editable .controls {
-  display:inline;
+.controls {
+  visibility:hidden;
   position:absolute;
   right:10px;
   top:10px;
 }
 
+.editable .controls {
+  visibility:visible;
+}
+
 .addTask {
   position:absolute;
   left:5px;

spec/javascripts/views/task_store_view_spec.js

@@ -24,13 +24,4 @@ describe("Task Store View", function() {
     expect(sut.getState()).toBe(sut.states.NORMAL);
   });
 
-  it("should render the editable class when the model dispatches the editableChange event", function() {
-    expect( $(sut.el).hasClass(sut.states.EDITABLE)).toBe(false);
-
-    model.trigger('editableChange');
-
-    expect( $(sut.el).hasClass(sut.states.EDITABLE)).toBeTruthy();
-  });
-
-
 });