Autoenable TaskLists with js-task-list-enable class only

mtodd · mtodd · commit 9edd54a588d2 · 2013-05-01T17:40:15.000+02:00
diff --git a/app/assets/javascripts/task_lists.coffee b/app/assets/javascripts/task_lists.coffee
@@ -87,6 +87,9 @@
 # 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 `(textarea).js-task-list-field`.
+#
+# To automatically enable TaskLists, add the `js-task-list-enable` class to the
+# `js-task-list-container`.
 
 incomplete = "[ ]"
 complete   = "[x]"
@@ -195,4 +198,4 @@ $.fn.disableTaskList = ->
 
 # When the page is updated, enable new TaskList containers.
 $.pageUpdate ->
-  $('.js-task-list-container').enableTaskList()
+  $('.js-task-list-container.js-task-list-enable').enableTaskList()
diff --git a/config.ru b/config.ru
@@ -19,6 +19,7 @@ end
 
 map "/update" do
   run lambda { |env|
+    sleep 0.5
     req = Rack::Request.new(env)
     [200, {'Content-Type' => 'application/json'}, [req.params.to_json]]
   }
diff --git a/test/functional/test_task_lists_behavior.html b/test/functional/test_task_lists_behavior.html
@@ -14,10 +14,12 @@
         $('.log').prepend("<li class='timestamp'><time>" + new Date + "</time></li>")
     }, 3000)
 
-    $(document).on('tasklist:enable', logEvent)
     $(document).on('tasklist:enabled', logEvent)
     $(document).on('tasklist:disabled', logEvent)
-    $(document).on('tasklist:change', logEvent)
+    $(document).on('tasklist:change', '.js-task-list-field', function(event){
+      logEvent(event)
+      $(this).closest('.js-task-list-container').disableTaskList()
+    })
     $(document).on('tasklist:changed', '.js-task-list-field', function(event){
       logEvent(event)
       $(this).closest('form').submit()
@@ -26,7 +28,7 @@
     $(document).on('ajaxStart', logEvent)
     $(document).on('ajaxSuccess', '.js-task-list-container', function(event){
       logEvent(event)
-      $(this).pageUpdate() // reenables the task lists
+      $(this).enableTaskList()
     })
   </script>
 
@@ -65,7 +67,7 @@
   </style>
 </head>
 <body>
-  <div class="js-task-list-container">
+  <div class="js-task-list-container js-task-list-enable">
     <div class="markdown">
       <ul class="task-list">
         <li class="task-list-item">
diff --git a/test/unit/test_events.coffee b/test/unit/test_events.coffee
@@ -20,7 +20,8 @@ module "TaskList events",
 
     @container.append @field
 
-    $('#qunit-fixture').append(@container).pageUpdate()
+    $('#qunit-fixture').append(@container)
+    @container.enableTaskList()
 
   teardown: ->
     $(document).off 'tasklist:enabled'
@@ -76,7 +77,7 @@ asyncTest "enables task list items when a .js-task-list-field is present", ->
   $(document).on 'tasklist:enabled', (event) ->
     ok true
 
-  @container.pageUpdate()
+  @container.enableTaskList()
   setTimeout ->
     start()
   , 20
@@ -89,7 +90,7 @@ asyncTest "doesn't enable task list items when a .js-task-list-field is absent",
 
   @field.remove()
 
-  @container.pageUpdate()
+  @container.enableTaskList()
   setTimeout ->
     start()
   , 20
diff --git a/test/unit/test_updates.coffee b/test/unit/test_updates.coffee
@@ -46,7 +46,8 @@ module "TaskList updates",
     @container.append @list
     @container.append @field
 
-    $('#qunit-fixture').append(@container).pageUpdate()
+    $('#qunit-fixture').append(@container)
+    @container.enableTaskList()
 
   teardown: ->
     $(document).off 'tasklist:changed'

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ end`
`19`	`19`
`20`	`20`	`map "/update" do`
`21`	`21`	`run lambda { \|env\|`
	`22`	`+ sleep 0.5`
`22`	`23`	`req = Rack::Request.new(env)`
`23`	`24`	`[200, {'Content-Type' => 'application/json'}, [req.params.to_json]]`
`24`	`25`	`}`