Remove form[data-remote] concerns

This means `rails/remote` is no longer required. TaskList updates won't
submit any forms; that is now an integration concern.

I added `rails/remote` into the functional tests, a good example of how
to integrate TaskList changes with AJAX updates.

I'm not happy with how enabling/disabling the task list items
currently works, though.

Author: mtodd

app/assets/javascripts/task_lists.coffee

@@ -3,12 +3,8 @@
 #= provides tasklist:enabled
 #= provides tasklist:disabled
 #= provides tasklist:change
-#= provides tasklist:updateSend
-#= provides tasklist:updateComplete
 #
-#= require jquery
 #= require crema/events/pageupdate
-#= require rails/remote
 #
 # Enables Task List update behavior.
 #
@@ -23,7 +19,7 @@
 #         </label>
 #       </li>
 #     </ul>
-#     <form class="js-task-list-form">
+#     <form>
 #       <textarea class="js-task-list-field">- [ ] text</textarea>
 #     </form>
 #   </div>
@@ -34,32 +30,27 @@
 #
 # TaskList Items SHOULD be an a list (`UL`/`OL`) element.
 #
-# Task list items MUST match `input.task-list-item-checkbox[type=checkbox]`,
-# MUST be `disabled`, and MUST define `data-item-index`. The Item's contents
-# SHOULD be wrapped in a `LABEL` element.
+# Task list items MUST match `(input).task-list-item-checkbox`, MUST be
+# `disabled` by default and MUST define `data-item-index`. The Item's
+# contents SHOULD be wrapped in a `LABEL` element.
 #
-# TaskLists MUST have a `(form).js-task-list-form` containing a
-# `(textarea).js-task-list-field` form element whose `value` attribute is the
-# source (Markdown) to be udpated. The source MUST follow the syntax guidelines.
+# TaskLists MUST have a `(textarea).js-task-list-field` form element whose
+# `value` attribute is the source (Markdown) to be udpated. The source MUST
+# follow the syntax guidelines.
 #
-# TaskList updates SHOULD be handled asynchronosly with `data-remote`.
-# See: https://github.com/josh/rails-behaviors
+# TaskList updates trigger `tasklist:change` events.
 #
 # jQuery is required and the `$.pageUpdate` behavior MUST be available.
 #
 # ### Events
 #
 # When the TaskList field has been changed, a `tasklist:change` event is fired.
 #
-# Updating a task list item by clicking on the check box will send an
-# `tasklist:updateSend` event. Following the `ajaxComplete` event,
-# `tasklist:updateComplete` is triggered.
-#
 # ### NOTE
 #
 # Task list checkboxes are rendered as disabled by default because rendered
 # user content is cached without regard for the viewer. We enable checkboxes
-# on `pageUpdate` if the container has a `form.js-task-list-form`.
+# on `pageUpdate` if the container has a `(textarea).js-task-list-field`.
 
 incomplete = "[ ]"
 complete   = "[x]"
@@ -121,12 +112,9 @@ updateTaskListItem = (source, itemIndex, checked) ->
     line
   result.join("\n")
 
-# Task list checkboxes are rendered as disabled by default
-# because rendered user content is cached without regard
-# for the viewer. Enables the checkboxes and applies the
-# correct list style, if the viewer is able to edit the comment.
+# Enables task list items to trigger updates.
 enableTaskList = ($container) ->
-  if $container.find('.js-task-list-form').length > 0
+  if $container.find('.js-task-list-field').length > 0
     $container.
       find('.task-list-item').addClass('enabled').
       find('.task-list-item-checkbox').attr('disabled', null)
@@ -138,12 +126,11 @@ disableTaskList = ($container) ->
     find('.task-list-item-checkbox').attr('disabled', 'disabled')
   $container.trigger 'tasklist:disabled'
 
-# Submit updates to task list items asynchronously.
-# Successful updates won't require re-rendering to represent reality.
+# Updates the $field value to reflect the state of $item.
+# Triggers the `tasklist:change` event when the value has changed.
 updateTaskList = ($item) ->
   $container = $item.closest '.js-task-list-container'
-  $form      = $container.find '.js-task-list-form'
-  $field     = $form.find '.js-task-list-field'
+  $field     = $container.find '.js-task-list-field'
   index      = parseInt $item.attr('data-item-index')
   checked    = $item.prop 'checked'
 
@@ -152,16 +139,17 @@ updateTaskList = ($item) ->
   $field.val updateTaskListItem($field.val(), index, checked)
   $field.trigger 'change'
   $field.trigger 'tasklist:change', [index, checked]
-  $form.trigger 'tasklist:updateSend', [index, checked]
-  $form.one 'ajaxComplete', ->
-    enableTaskList $container
-    $form.trigger 'tasklist:updateComplete'
-  $form.submit()
 
 # When the task list item checkbox is updated, submit the change
 $(document).on 'change', '.task-list-item-checkbox', ->
   updateTaskList $(this)
 
+$(document).on 'tasklist:disable', '.js-task-list-container', (event) ->
+  disableTaskList $(this)
+
+$(document).on 'tasklist:enable', '.js-task-list-container', (event) ->
+  enableTaskList $(this)
+
 $.pageUpdate ->
   $('.js-task-list-container').each ->
     enableTaskList $(this)

test/functional/helpers/remote.coffee

@@ -0,0 +1,3 @@
+#= require jquery
+#= require rails/remote
+#= require task_lists

test/functional/test_task_lists_behavior.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <script type="text/javascript" src="/assets/task_lists.js"></script>
+  <script type="text/javascript" src="/assets/functional/helpers/remote.js"></script>
   <script type="text/javascript">
     function logEvent(event) {
       console.log(event)
@@ -14,13 +14,18 @@
         $('.log').prepend("<li class='timestamp'><time>" + new Date + "</time></li>")
     }, 3000)
 
-    $(document).on('ajaxStart', logEvent)
-    $(document).on('ajaxComplete', logEvent)
-
     $(document).on('tasklist:enabled', logEvent)
     $(document).on('tasklist:disabled', logEvent)
-    $(document).on('tasklist:updateSend', logEvent)
-    $(document).on('tasklist:updateComplete', logEvent)
+    $(document).on('tasklist:change', '.js-task-list-field', function(event){
+      logEvent(event)
+      $(this).closest('form').submit()
+    })
+
+    $(document).on('ajaxStart', logEvent)
+    $(document).on('ajaxSuccess', '.js-task-list-container', function(event){
+      logEvent(event)
+      $(this).pageUpdate() // reenables the task lists
+    })
   </script>
 
   <style>
@@ -69,7 +74,7 @@
         </li>
       </ul>
     </div>
-    <form action="/update" class="js-task-list-form" data-remote data-type="json">
+    <form action="/update" method="POST" data-remote data-type="json">
       <textarea name="comment[body]" class="js-task-list-field">- [ ] I'm a task list item</textarea>
     </form>
   </div>

test/index.html

@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <link rel="stylesheet" href="/assets/test.css">
-  <script type="text/javascript" src="/assets/test.js"></script>
+  <link rel="stylesheet" href="/assets/units.css">
+  <script type="text/javascript" src="/assets/units.js"></script>
 </head>
 <body>
   <div id="qunit"></div>

test/unit/test_task_lists.coffee

@@ -14,18 +14,13 @@ module "TaskLists",
       disabled: 'disabled'
       "data-item-index": 1
 
-    @form = $ '<form>', class: 'js-task-list-form'
     @field = $ '<textarea>', class: 'js-task-list-field', "- [ ] text"
 
     @item.append @checkbox
     @list.append @item
     @container.append @list
 
-    @form.append @field
-    @container.append @form
-
-    @form.on 'submit', (event) ->
-      event.preventDefault()
+    @container.append @field
 
     $('#qunit-fixture').append(@container).pageUpdate()