Convert almost all apps to trigger editing mode on <label> instead …

…of `.view` The rest will get individual tickets. Puh… 😓 Followup to tastejs#227
quirkey · Aug 6, 2012 · f11f1ac · f11f1ac
1 parent 30585ce
commit f11f1ac
Show file tree

Hide file tree

Showing 37 changed files with 61 additions and 75 deletions.
diff --git a/architecture-examples/agilityjs/js/app.js b/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();
 				},

diff --git a/architecture-examples/angularjs-perf/index.html b/architecture-examples/angularjs-perf/index.html
@@ -23,10 +23,10 @@ <h1>todos</h1>
       <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)">

diff --git a/architecture-examples/angularjs/index.html b/architecture-examples/angularjs/index.html
@@ -23,10 +23,10 @@ <h1>todos</h1>
       <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)">

diff --git a/architecture-examples/backbone/js/views/todos.js b/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'

diff --git a/architecture-examples/jquery/js/app.js b/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 );

diff --git a/architecture-examples/knockback/index.html b/architecture-examples/knockback/index.html
@@ -20,9 +20,9 @@ <h1>todos</h1>
 			<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}">

diff --git a/architecture-examples/knockback/js/app.js b/architecture-examples/knockback/js/app.js
diff --git a/architecture-examples/knockback/js/models/todo.js b/architecture-examples/knockback/js/models/todo.js
diff --git a/architecture-examples/knockback/js/models/todo_collection.js b/architecture-examples/knockback/js/models/todo_collection.js
diff --git a/architecture-examples/knockback/js/routers/app.js b/architecture-examples/knockback/js/routers/app.js
diff --git a/architecture-examples/knockback/js/viewmodels/footer.js b/architecture-examples/knockback/js/viewmodels/footer.js
diff --git a/architecture-examples/knockback/js/viewmodels/header.js b/architecture-examples/knockback/js/viewmodels/header.js
diff --git a/architecture-examples/knockback/js/viewmodels/settings.js b/architecture-examples/knockback/js/viewmodels/settings.js
diff --git a/architecture-examples/knockback/js/viewmodels/todos.js b/architecture-examples/knockback/js/viewmodels/todos.js
diff --git a/architecture-examples/knockoutjs/index.html b/architecture-examples/knockoutjs/index.html
@@ -20,9 +20,9 @@ <h1>todos</h1>
 				<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 }">

diff --git a/architecture-examples/spine/js/app.js b/architecture-examples/spine/js/app.js
diff --git a/architecture-examples/spine/js/controllers/todos.js b/architecture-examples/spine/js/controllers/todos.js
diff --git a/architecture-examples/spine/js/models/todo.js b/architecture-examples/spine/js/models/todo.js
diff --git a/architecture-examples/spine/src/controllers/todos.coffee b/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'
 

diff --git a/architecture-examples/yui/js/views/todoview.js b/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': {

diff --git a/dependency-examples/backbone_require/js/views/todos.js b/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'

diff --git a/labs/architecture-examples/batman/index.html b/labs/architecture-examples/batman/index.html
@@ -26,9 +26,9 @@ <h1>todos</h1>
 					<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"

diff --git a/labs/architecture-examples/cujo/app/main.js b/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: {

diff --git a/labs/architecture-examples/dijon/js/views/TodoListView.js b/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 ) {

diff --git a/labs/architecture-examples/duel/src/main/resources/views/Task.duel b/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>

diff --git a/labs/architecture-examples/epitome/js/views/todo-list.js b/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

diff --git a/labs/architecture-examples/meteor/todo.coffee b/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')
 

diff --git a/labs/architecture-examples/o_O/index.html b/labs/architecture-examples/o_O/index.html
@@ -21,10 +21,10 @@ <h1>todos</h1>
 				<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">

diff --git a/labs/architecture-examples/olives/index.html b/labs/architecture-examples/olives/index.html
@@ -21,9 +21,9 @@ <h1>todos</h1>
 			<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">

diff --git a/labs/architecture-examples/rappidjs/app/view/TodoView.xml b/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()}}"

diff --git a/labs/architecture-examples/socketstream/client/code/app/app.js b/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 );

diff --git a/labs/architecture-examples/somajs/js/todos/views/views.js b/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 );