Convert almost all apps to trigger editing mode on `<label>` instead of `.view`

The rest will get individual tickets.

Puh… 😓

Followup to #227

architecture-examples/agilityjs/js/app.js

@@ -26,7 +26,7 @@
 					this.view.$().toggleClass( 'completed', this.model.get('completed') );
 					app.updateStatus();
 				},
-				'dblclick .view': function() {
+				'dblclick label': function() {
 					this.view.$().addClass('editing');
 					this.view.$('.edit').focus();
 				},

architecture-examples/angularjs-perf/index.html

@@ -23,10 +23,10 @@
       <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
       <label for="toggle-all">Mark all as complete</label>
       <ul id="todo-list">
-        <li ng-repeat="todo in todos | filter:statusFilter" ng-dblclick="editTodo(todo)" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
+	<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
           <div class="view">
             <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="todoCompleted(todo)">
-            <label>{{todo.title}}</label>
+	    <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
             <button class="destroy" ng-click="removeTodo(todo)"></button>
           </div>
           <form ng-submit="doneEditing(todo)">

architecture-examples/angularjs/index.html

@@ -23,10 +23,10 @@
       <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
       <label for="toggle-all">Mark all as complete</label>
       <ul id="todo-list">
-        <li ng-repeat="todo in todos | filter:statusFilter" ng-dblclick="editTodo(todo)" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
+	<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
           <div class="view">
             <input class="toggle" type="checkbox" ng-model="todo.completed">
-            <label>{{todo.title}}</label>
+	    <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
             <button class="destroy" ng-click="removeTodo(todo)"></button>
           </div>
           <form ng-submit="doneEditing(todo)">

architecture-examples/backbone/js/views/todos.js

@@ -18,7 +18,7 @@ $(function() {
 		// The DOM events specific to an item.
 		events: {
 			'click .toggle':	'togglecompleted',
-			'dblclick .view':	'edit',
+			'dblclick label':	'edit',
 			'click .destroy':	'clear',
 			'keypress .edit':	'updateOnEnter',
 			'blur .edit':		'close'

architecture-examples/jquery/js/app.js

@@ -44,7 +44,7 @@ jQuery(function( $ ) {
 			this.$toggleAll.on( 'change', this.toggleAll );
 			this.$footer.on( 'click', '#clear-completed', this.destroyCompleted );
 			list.on( 'change', '.toggle', this.toggle );
-			list.on( 'dblclick', '.view', this.edit );
+			list.on( 'dblclick', 'label', this.edit );
 			list.on( 'keypress', '.edit', this.blurOnEnter );
 			list.on( 'blur', '.edit', this.update );
 			list.on( 'click', '.destroy', this.destroy );

architecture-examples/knockback/index.html

@@ -20,9 +20,9 @@
 			<label for="toggle-all">Mark all as complete</label>
 			<ul id="todo-list" data-bind="foreach: todos.todos">
 				<li data-bind="css: {completed: completed, editing: editing}, visible: visible">
-					<div class="view" data-bind="event: {dblclick: onCheckEditBegin}">
+					<div class="view">
 						<input class="toggle" type="checkbox" data-bind="checked: completed" checked>
-						<label data-bind="text: title"></label>
+						<label data-bind="text: title, event: {dblclick: onCheckEditBegin}"></label>
 						<button class="destroy" data-bind="click: onDestroyTodo"></button>
 					</div>
 					<input class="edit" type="text" data-bind="value: title, selectAndFocus: editing, event: {blur: onCheckEditEnd, keyup: onCheckEditEnd}">

architecture-examples/knockback/js/app.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
 
   $(function() {

architecture-examples/knockback/js/models/todo.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.Todo = (function(_super) {
 
     __extends(Todo, _super);
 
-    Todo.name = 'Todo';
-
     function Todo() {
       return Todo.__super__.constructor.apply(this, arguments);
     }

architecture-examples/knockback/js/models/todo_collection.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.TodoCollection = (function(_super) {
 
     __extends(TodoCollection, _super);
 
-    TodoCollection.name = 'TodoCollection';
-
     function TodoCollection() {
       return TodoCollection.__super__.constructor.apply(this, arguments);
     }

architecture-examples/knockback/js/routers/app.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.AppRouter = (function(_super) {
 
     __extends(AppRouter, _super);
 
-    AppRouter.name = 'AppRouter';
-
     function AppRouter() {
       return AppRouter.__super__.constructor.apply(this, arguments);
     }

architecture-examples/knockback/js/viewmodels/footer.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
 
   window.FooterViewModel = function(todos) {

architecture-examples/knockback/js/viewmodels/header.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var ENTER_KEY;
 

architecture-examples/knockback/js/viewmodels/settings.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
 
   window.SettingsViewModel = function() {

architecture-examples/knockback/js/viewmodels/todos.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var TodoViewModel;
 
@@ -44,8 +44,7 @@
     };
     this.onCheckEditBegin = function() {
       if (!_this.editing() && !_this.completed()) {
-        _this.editing(true);
-        return;
+	return _this.editing(true);
       }
     };
     this.onCheckEditEnd = function(view_model, event) {

architecture-examples/knockoutjs/index.html

@@ -20,9 +20,9 @@
 				<label for="toggle-all">Mark all as complete</label>
 				<ul id="todo-list" data-bind="foreach: filteredTodos">
 					<li data-bind="css: { completed: completed, editing: editing }">
-						<div class="view" data-bind="event: { dblclick: $root.editItem }">
+						<div class="view">
 							<input class="toggle" data-bind="checked: completed" type="checkbox">
-							<label data-bind="text: title"></label>
+							<label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
 							<button class="destroy" data-bind="click: $root.remove"></button>
 						</div>
 						<input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }">

architecture-examples/spine/js/app.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var TodoApp,
     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
     __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   TodoApp = (function(_super) {
     var ENTER_KEY;
 
     __extends(TodoApp, _super);
 
-    TodoApp.name = 'TodoApp';
-
     ENTER_KEY = 13;
 
     TodoApp.prototype.elements = {

architecture-examples/spine/js/controllers/todos.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
     __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.Todos = (function(_super) {
     var ENTER_KEY, TPL;
 
     __extends(Todos, _super);
 
-    Todos.name = 'Todos';
-
     ENTER_KEY = 13;
 
     TPL = Handlebars.compile($('#todo-template').html());
@@ -22,7 +20,7 @@
     Todos.prototype.events = {
       'click    .destroy': 'remove',
       'click    .toggle': 'toggleStatus',
-      'dblclick .view': 'edit',
+      'dblclick label': 'edit',
       'keyup    .edit': 'finishEditOnEnter',
       'blur     .edit': 'finishEdit'
     };

architecture-examples/spine/js/models/todo.js

-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.Todo = (function(_super) {
 
     __extends(Todo, _super);
 
-    Todo.name = 'Todo';
-
     function Todo() {
       return Todo.__super__.constructor.apply(this, arguments);
     }

architecture-examples/spine/src/controllers/todos.coffee

@@ -8,7 +8,7 @@ class window.Todos extends Spine.Controller
 	events:
 		'click    .destroy': 'remove'
 		'click    .toggle':  'toggleStatus'
-		'dblclick .view':    'edit'
+		'dblclick label':    'edit'
 		'keyup    .edit':    'finishEditOnEnter'
 		'blur     .edit':    'finishEdit'
 

architecture-examples/yui/js/views/todoview.js

@@ -16,7 +16,7 @@ YUI.add('todo-view', function (Y) {
             '.toggle': {
                 click: 'toggleComplete'
             },
-            '.view': {
+	    'label': {
                 dblclick: 'edit'
             },
             '.edit': {

dependency-examples/backbone_require/js/views/todos.js

@@ -15,7 +15,7 @@ define([
 		// The DOM events specific to an item.
 		events: {
 			'click .toggle':	'togglecompleted',
-			'dblclick .view':	'edit',
+			'dblclick label':	'edit',
 			'click .destroy':	'clear',
 			'keypress .edit':	'updateOnEnter',
 			'blur .edit':		'close'

labs/architecture-examples/batman/index.html

@@ -26,9 +26,9 @@
 					<li data-foreach-todo="currentTodos"
 							data-addclass-completed="todo.completed"
 							data-addclass-editing="todo.editing" >
-						<div class="view" data-hideif="todo.editing" data-event-doubleclick="toggleEditing">
+						<div class="view" data-hideif="todo.editing">
 							<input class="toggle" type="checkbox" data-bind="todo.completed" data-event-change="todoDoneChanged">
-							<label data-bind="todo.title"></label>
+							<label data-bind="todo.title" data-event-doubleclick="toggleEditing"></label>
 							<button class="destroy" data-event-click="destroyTodo"></button>
 						</div>
 						<input class="edit" type="text"

labs/architecture-examples/cujo/app/main.js

@@ -122,7 +122,7 @@ define({
 				'click:.destroy': 'removeTodo',
 				'change:.toggle': 'updateTodo',
 				'click:#toggle-all': 'toggleAll',
-				'dblclick:.view': 'todos.edit',
+				'dblclick:label': 'todos.edit',
 				'change,focusout:.edit': 'todos.submit' // also need way to submit on [enter]
 			},
 			controlsView: {

labs/architecture-examples/dijon/js/views/TodoListView.js

@@ -23,7 +23,7 @@
 					var id = $( this ).closest('li').data('id');
 					self.system.notify( 'TodoListView:toggleDoneOfTodo', id );
 				});
-				$todoList.on( 'dblclick', '.view', function() {
+				$todoList.on( 'dblclick', 'label', function() {
 					$( this ).closest('li').addClass('editing').find('.edit').focus();
 				} );
 				$todoList.on( 'keypress', '.edit', function( e ) {

labs/architecture-examples/duel/src/main/resources/views/Task.duel

@@ -2,14 +2,13 @@
 
 <%-- could have embedded in 'tasks' for-loop, but this allows us to add single tasks --%>
 
-<li class="<%= data.completed ? 'complete' : '' %>"
-	ondblclick="<%= todos.actions.content_dblclick(data.id) %>">
+<li class="<%= data.completed ? 'complete' : '' %>">
 
 	<div class="view">
 		<input class="toggle" type="checkbox" checked="<%= data.completed %>"
 			onchange="<%= todos.actions.completed_change(data.id) %>">
 
-		<label><%= data.title %></label>
+		<label ondblclick="<%= todos.actions.content_dblclick(data.id) %>"><%= data.title %></label>
 
 		<button class="destroy" onclick="<%= todos.actions.remove_click(data.id) %>"></button>
 	</div>

labs/architecture-examples/epitome/js/views/todo-list.js

@@ -25,7 +25,7 @@
 				'click:relay(input.toggle)': 'statusChange',
 				'keypress:relay(input.edit)': 'handleKeypress',
 				'click:relay(button.destroy)': 'removeItem',
-				'dblclick:relay(li)': 'editing'
+				'dblclick:relay(label)': 'editing'
 			},
 
 			// define actual event handlers
@@ -64,8 +64,9 @@
 					e.stop();
 				}
 
-				el.addClass( this.options.editingClass );
-				el.getElement( this.options.input ).focus();
+				var container = el.getParent('li');
+				container.addClass( this.options.editingClass );
+				container.getElement( this.options.input ).focus();
 			},
 
 			// when enter pressed while editing

labs/architecture-examples/meteor/todo.coffee

@@ -76,7 +76,7 @@ if Meteor.is_client
 		'click .destroy': (evt) ->
 			Template.item.updateTask this._id, null
 
-		'dblclick .view': (evt) ->
+		'dblclick label': (evt) ->
 			# do not response to double click on checkbox
 			return if $(evt.target).hasClass('toggle')
 

labs/architecture-examples/o_O/index.html

@@ -21,10 +21,10 @@
 				<label for="toggle-all">Mark all as complete</label>
 			</div>
 			<ul id="todo-list" data-bind="foreach: todos">
-				<li data-bind="class: klass; visible; dblclick: startEditing">
+				<li data-bind="class: klass; visible">
 					<div class="view">
 						<input class="toggle" type="checkbox" data-bind="value: completed">
-						<label data-bind="text: title"></label>
+						<label data-bind="text: title; dblclick: startEditing"></label>
 						<button class="destroy" data-bind="click: remove"></button>
 					</div>
 					<input class="edit" data-bind="value: title; enterKey: stopEditing; blur: stopEditing">

labs/architecture-examples/olives/index.html

@@ -21,9 +21,9 @@
 			<label for="toggle-all">Mark all as complete</label>
 			<ul id="todo-list" data-model="foreach">
 				<li data-model="bind:toggleClass,completed,completed;">
-					<div class="view" data-event="listen:dblclick,startEdit">
+					<div class="view">
 						<input class="toggle" type="checkbox" data-model="bind:checked,completed">
-						<label data-model="bind:innerHTML,title"></label>
+						<label data-model="bind:innerHTML,title" data-event="listen:dblclick,startEdit"></label>
 						<button class="destroy" data-event="listen:click,remove"></button>
 					</div>
 					<input class="edit" data-model="bind:value,title" data-event="listen:keydown,stopEdit; listen:blur,stopEdit">

labs/architecture-examples/rappidjs/app/view/TodoView.xml

@@ -72,10 +72,10 @@
 		]]>
 	</js:Script>
 	<js:Template name="layout">
-			<div class="view" ondblclick="editTodo">
+			<div class="view">
 				<input class="toggle" type="checkbox" onclick="checkTodo" ondblclick="preventEditing"
 					   checked="{todo.completed}"/>
-				<label>{todo.title}</label>
+				<label ondblclick="editTodo">{todo.title}</label>
 				<button class="destroy" onclick="triggerOnRemove"/>
 			</div>
 			<input class="edit" cid="inputElement" type="text" value="{{todo.title|trim()}}"

labs/architecture-examples/socketstream/client/code/app/app.js

@@ -36,7 +36,7 @@ var App = {
 		this.$toggleAll.on( 'change', this.toggleAll );
 		this.$footer.on( 'click', '#clear-completed', this.destroyCompleted );
 		list.on( 'change', '.toggle', this.toggle );
-		list.on( 'dblclick', '.view', this.edit );
+		list.on( 'dblclick', 'label', this.edit );
 		list.on( 'keypress', '.edit', this.blurOnEnter );
 		list.on( 'blur', '.edit', this.update );
 		list.on( 'click', '.destroy', this.destroy );

labs/architecture-examples/somajs/js/todos/views/views.js

@@ -12,7 +12,7 @@ var todo = window.todo || {};
 			this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
 			$( this.domElement ).on( 'click', '.destroy', this.destroy.bind( this ) );
 			$( this.domElement ).on( 'click', '.toggle', this.toggle.bind( this ) );
-			$( this.domElement ).on( 'dblclick', '.view', this.edit );
+			$( this.domElement ).on( 'dblclick', 'label', this.edit );
 			$( this.domElement ).on( 'blur', '.edit', this.update.bind( this ) );
 			$( this.domElement ).on( 'keypress', '.edit', this.blurInput );
 			$('#toggle-all').click( this.toggleAll );

labs/architecture-examples/stapes/js/views/todoView.js

@@ -23,8 +23,8 @@
 			todoView.emit(event, $(this).parents('li').data('id'));
 		});
 
-		$('#todo-list').on('dblclick', 'li', function(e) {
-			todoView.emit('edittodo', $(this).data('id'));
+		$('#todo-list').on('dblclick', 'label', function(e) {
+			todoView.emit('edittodo', $(this).closest('li').data('id'));
 		});
 
 		$('#todo-list').on('keyup focusout', 'input.edit', function(e) {

labs/dependency-examples/angularjs_require/index.html

@@ -32,10 +32,10 @@
       <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
       <label for="toggle-all">Mark all as complete</label>
       <ul id="todo-list">
-        <li ng-repeat="todo in todos | filter:statusFilter" ng-dblclick="editTodo(todo)" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
+	<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
           <div class="view">
             <input class="toggle" type="checkbox" ng-model="todo.completed">
-            <label>{{todo.title}}</label>
+	    <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
             <button class="destroy" ng-click="removeTodo(todo)"></button>
           </div>
           <form ng-submit="doneEditing(todo)">

labs/dependency-examples/knockoutjs_require/index.html

@@ -23,9 +23,9 @@
 			<label for="toggle-all">Mark all as complete</label>
 			<ul id="todo-list" data-bind="foreach: todos">
 				<li data-bind="css: { completed: completed, editing: editing }">
-					<div class="view" data-bind="event: { dblclick: $root.editItem }">
+					<div class="view">
 						<input class="toggle" type="checkbox" data-bind="checked: completed">
-						<label data-bind="text: title"></label>
+						<label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
 						<button class="destroy" data-bind="click: $root.remove"></button>
 					</div>
 					<input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }" >

labs/dependency-examples/stapes_require/js/views/todoView.js

@@ -23,8 +23,8 @@ define(['lib/stapes'], function(Stapes) {
 			todoView.emit(event, $(this).parents('li').data('id'));
 		});
 
-		$('#todo-list').on('dblclick', 'li', function(e) {
-			todoView.emit('edittodo', $(this).data('id'));
+		$('#todo-list').on('dblclick', 'label', function(e) {
+			todoView.emit('edittodo', $(this).closest('li').data('id'));
 		});
 
 		$('#todo-list').on('keyup focusout', 'input.edit', function(e) {

vanilla-examples/vanillajs/js/app.js

@@ -206,6 +206,7 @@
 			label = document.createElement('label');
 			label.setAttribute( 'data-todo-id', todo.id );
 			label.appendChild( document.createTextNode( todo.title ) );
+			label.addEventListener( 'dblclick', todoContentHandler );
 
 
 			// create delete button
@@ -221,8 +222,6 @@
 			divDisplay.appendChild( checkbox );
 			divDisplay.appendChild( label );
 			divDisplay.appendChild( deleteLink );
-			divDisplay.addEventListener( 'dblclick', todoContentHandler );
-
 
 			// create todo input
 			inputEditTodo = document.createElement('input');