Permalink
Browse files

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

…of `.view`

The rest will get individual tickets.

Puh… 😓

Followup to #227
  • Loading branch information...
sindresorhus committed Aug 6, 2012
1 parent 30585ce commit f11f1ace2c7049b7b5c7f0512c7675aa017623e3
Showing with 61 additions and 75 deletions.
  1. +1 −1 architecture-examples/agilityjs/js/app.js
  2. +2 −2 architecture-examples/angularjs-perf/index.html
  3. +2 −2 architecture-examples/angularjs/index.html
  4. +1 −1 architecture-examples/backbone/js/views/todos.js
  5. +1 −1 architecture-examples/jquery/js/app.js
  6. +2 −2 architecture-examples/knockback/index.html
  7. +1 −1 architecture-examples/knockback/js/app.js
  8. +2 −4 architecture-examples/knockback/js/models/todo.js
  9. +2 −4 architecture-examples/knockback/js/models/todo_collection.js
  10. +2 −4 architecture-examples/knockback/js/routers/app.js
  11. +1 −1 architecture-examples/knockback/js/viewmodels/footer.js
  12. +1 −1 architecture-examples/knockback/js/viewmodels/header.js
  13. +1 −1 architecture-examples/knockback/js/viewmodels/settings.js
  14. +2 −3 architecture-examples/knockback/js/viewmodels/todos.js
  15. +2 −2 architecture-examples/knockoutjs/index.html
  16. +2 −4 architecture-examples/spine/js/app.js
  17. +3 −5 architecture-examples/spine/js/controllers/todos.js
  18. +2 −4 architecture-examples/spine/js/models/todo.js
  19. +1 −1 architecture-examples/spine/src/controllers/todos.coffee
  20. +1 −1 architecture-examples/yui/js/views/todoview.js
  21. +1 −1 dependency-examples/backbone_require/js/views/todos.js
  22. +2 −2 labs/architecture-examples/batman/index.html
  23. +1 −1 labs/architecture-examples/cujo/app/main.js
  24. +1 −1 labs/architecture-examples/dijon/js/views/TodoListView.js
  25. +2 −3 labs/architecture-examples/duel/src/main/resources/views/Task.duel
  26. +4 −3 labs/architecture-examples/epitome/js/views/todo-list.js
  27. +1 −1 labs/architecture-examples/meteor/todo.coffee
  28. +2 −2 labs/architecture-examples/o_O/index.html
  29. +2 −2 labs/architecture-examples/olives/index.html
  30. +2 −2 labs/architecture-examples/rappidjs/app/view/TodoView.xml
  31. +1 −1 labs/architecture-examples/socketstream/client/code/app/app.js
  32. +1 −1 labs/architecture-examples/somajs/js/todos/views/views.js
  33. +2 −2 labs/architecture-examples/stapes/js/views/todoView.js
  34. +2 −2 labs/dependency-examples/angularjs_require/index.html
  35. +2 −2 labs/dependency-examples/knockoutjs_require/index.html
  36. +2 −2 labs/dependency-examples/stapes_require/js/views/todoView.js
  37. +1 −2 vanilla-examples/vanillajs/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();
},
@@ -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)">
@@ -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)">
@@ -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'
@@ -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 );
@@ -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}">

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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 }">

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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'
@@ -16,7 +16,7 @@ YUI.add('todo-view', function (Y) {
'.toggle': {
click: 'toggleComplete'
},
- '.view': {
+ 'label': {
dblclick: 'edit'
},
'.edit': {
@@ -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'
@@ -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"
@@ -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: {
@@ -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 ) {
@@ -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>
@@ -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
@@ -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')
@@ -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">
@@ -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">
@@ -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()}}"
@@ -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 );
@@ -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 );
Oops, something went wrong.

0 comments on commit f11f1ac

Please sign in to comment.