From bd1866742036f2018ffb2705f2fb33dd69b41bf1 Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Tue, 28 May 2013 16:43:16 +0100
Subject: [PATCH] convert task-editing state to private path so we don't have
 conflicting ids

---
 src/app/tasks.coffee | 35 ++++++++++++++++++++---------------
 views/app/tasks.html | 14 +++++++-------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/app/tasks.coffee b/src/app/tasks.coffee
index 8023bdc636..a0efc2d088 100644
--- a/src/app/tasks.coffee
+++ b/src/app/tasks.coffee
@@ -76,31 +76,36 @@ module.exports.app = (appExports, model) ->
       task.set('repeat.' + $(el).attr('data-day'), true)
 
   appExports.toggleTaskEdit = (e, el) ->
-    hideId = $(el).attr('data-hide-id')
-    toggleId = $(el).attr('data-toggle-id')
-    $(document.getElementById(hideId)).addClass('visuallyhidden')
-    $(document.getElementById(toggleId)).toggleClass('visuallyhidden')
+    id = e.get('id')
+    path = "_tasks.editing.#{id}"
+    model.set path, !model.get(path)
+    $(".#{id}-chart").hide()
 
   appExports.toggleChart = (e, el) ->
-    hideSelector = $(el).attr('data-hide-id')
-    chartSelector = $(el).attr('data-toggle-id')
-    historyPath = $(el).attr('data-history-path')
-    $(document.getElementById(hideSelector)).hide()
-    $(document.getElementById(chartSelector)).toggle()
+    id = $(el).attr('data-id')
+    history = []
+
+    if id is 'todos'
+      model.set "_tasks.charts.todos", !model.get("_tasks.charts.todos")
+      history = model.get("_user.history.todos")
+      $(".#{id}-chart").toggle()
+    else
+      [id, path] = [$(el).attr('data-id'), "_tasks.charts.#{id}"]
+      model.set path, !model.get(path)
+      model.set "_tasks.editing.#{id}", false
+      $(".#{id}-chart").toggle()
+      history = model.get("_user.tasks.#{id}.history")
 
     matrix = [['Date', 'Score']]
-    for obj in model.get(historyPath)
+    for obj in history
       date = +new Date(obj.date)
       readableDate = moment(date).format('MM/DD')
       matrix.push [ readableDate, obj.value ]
     data = google.visualization.arrayToDataTable matrix
-
-    options = {
+    options =
       title: 'History'
       backgroundColor: { fill:'transparent' }
-    }
-
-    chart = new google.visualization.LineChart(document.getElementById( chartSelector ))
+    chart = new google.visualization.LineChart $(".#{id}-chart")[0]
     chart.draw(data, options)
 
   appExports.todosShowRemaining = -> model.set '_showCompleted', false
diff --git a/views/app/tasks.html b/views/app/tasks.html
index bb361ce32f..e30465aa90 100644
--- a/views/app/tasks.html
+++ b/views/app/tasks.html
@@ -53,7 +53,7 @@
             <!-- todo export/graph options -->
             <span class='option-box pull-right'>
                 {#if _user.history.todos}
-                  <a class="option-action" x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
+                  <a class="option-action" x-bind=click:toggleChart data-id="todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
                 {/}
                 <a class="option-action" href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}" rel=tooltip title="iCal"><i class=icon-calendar></i></a>
                 <!-- <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a> -->
@@ -132,7 +132,7 @@
 <task-list: nonvoid>
     <h2 class="task-column_title">{{t(@header)}}</h2>
 
-    {{#if equal(@type,'todo')}}<div id="todos-chart" class="hidden"></div>{{/}}
+    {{#if equal(@type,'todo')}}<div class="todos-chart" style='display:none;'></div>{{/}}
 
     {{#if @editable}}
 
@@ -173,7 +173,7 @@
             </span>
             <app:filters:applied-filters />
             <!-- edit -->
-            <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
+            <a x-bind=click:toggleTaskEdit rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
             <!-- challenges -->
             {{#if :task.challenge}}
                 <i class='icon-bullhorn' rel=tooltip title="Challenge Task"></i>
@@ -183,7 +183,7 @@
             {{/}}
             <!-- chart -->
             {#if :task.history}
-              <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress"><i class="icon-signal"></i></a>
+              <a x-bind=click:toggleChart data-id="{{:task.id}}" rel="tooltip" title="Progress"><i class="icon-signal"></i></a>
             {/}
             <!-- notes -->
             {#if :task.notes}
@@ -246,8 +246,8 @@
 
 <!-- task edit/options -->
 <taskMeta:>
-    <div id="{{:task.id}}-edit" class="task-options visuallyhidden">
-        <form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
+    <div class="{#unless _tasks.editing[:task.id]}visuallyhidden{/} task-options">
+        <form x-bind="submit:toggleTaskEdit" >
             <!-- text & notes -->
             <fieldset class="option-group">
                 {{#unless :task.challenge}}
@@ -342,4 +342,4 @@
         </form>
     </div>
 
-    <div style="display:none;" id={{:task.id}}-chart></div>
+    <div style="display:none;" class={{:task.id}}-chart></div>