cleanup of the show-completed / show-remaining. That context-dependant

/ display-context-for stuff was bugging me out, and wasn't using Derby
to it's potential. also some tags & habit-wide cleanup in helpers:taskClasses()

src/app/helpers.coffee

@@ -125,14 +125,17 @@ viewHelpers = (view) ->
   ###
     Tasks
   ###
-  view.fn 'taskClasses', (task, filters, dayStart, lastCron) ->
+  view.fn 'taskClasses', (task, filters, dayStart, lastCron, showCompleted=false) ->
     return unless task
     {type, completed, value, repeat} = task
 
+    # completed / remaining toggle
+    return 'hidden' if (type is 'todo') and (completed != showCompleted)
+
     for filter, enabled of filters
       if enabled and not task.tags?[filter]
         # All the other classes don't matter
-        return 'hide'
+        return 'hidden'
 
     classes = type
 
@@ -150,6 +153,8 @@ viewHelpers = (view) ->
         classes += " completed"
       else
         classes += " uncompleted"
+    else if type is 'habit'
+      classes += ' habit-wide' if task.down and task.up
 
     if value < -20
       classes += ' color-worst'

src/app/tasks.coffee

@@ -99,28 +99,8 @@ module.exports.app = (appExports, model) ->
     chart = new google.visualization.LineChart(document.getElementById( chartSelector ))
     chart.draw(data, options)
 
-  appExports.changeContext = (e, el) ->
-    # Get the data from the element
-    targetSelector = $(el).attr('data-target')
-    newContext = $(el).attr('data-context')
-    newActiveNav = $(el).parent('li')
-
-    # If the clicked nav is already active, do nothing
-    if newActiveNav.hasClass('active')
-      return
-
-    # Find the old active nav and context
-    oldActiveNav = $(el).closest('ul').find('> .active')
-    oldContext = oldActiveNav.find('a').attr('data-context')
-
-    # Set the new active nav
-    oldActiveNav.removeClass('active')
-    newActiveNav.addClass('active')
-
-    # Set the new context on the target
-    target = $(targetSelector)
-    target.removeClass(oldContext)
-    target.addClass(newContext)
+  appExports.todosShowRemaining = -> model.set '_showCompleted', false
+  appExports.todosShowCompleted = -> model.set '_showCompleted', true
 
   setUndo = (stats, task) ->
     previousUndo = model.get('_undo')

styles/app/tasks.styl

@@ -383,21 +383,6 @@ form
 // todos ui
 // --------
 
-// context switching
-.context-enabled
-  .display-context-dependant,
-  .task-list > li
-    display: none
-
-  &.context-completed
-    .show-for-completed, .completed
-      display: block
-
-  &.context-uncompleted
-    .show-for-uncompleted, .uncompleted
-      display: block
-
-
 // nav tabs
 .nav-tabs
   margin-top: 1.5em

views/app/tasks.html

@@ -54,7 +54,7 @@
 
     <!-- Todos Column -->
     <div class="module">
-        <div class="task-column todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
+        <div class="task-column todos tabbable tabs-below">
             <!-- todo export/graph options -->
             <span class='option-box pull-right'>
                 {#if _user.history.todos}
@@ -67,7 +67,7 @@
             <div id="todos-chart" style="display:none;"></div>
 
             <!-- create new todo -->
-            <div class="display-context-dependant show-for-uncompleted">
+            <div class="{#if _showCompleted}hidden{/}">
                 <app:tasks:newTask type="todo" inputValue="{_newTodo}" placeHolder="New Todo" />
             </div>
 
@@ -80,12 +80,12 @@
                 <a href="http://www.amazon.com/gp/product/0312430000/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0312430000&linkCode=as2&tag=ha0d2-20">The Checklist Manifesto: How to Get Things Right</a><img src="//www.assoc-amazon.com/e/ir?t=ha0d2-20&l=as2&o=1&a=0312430000" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
             </app:tasks:ads>
 
-            <button class='task-action-btn tile spacious bright display-context-dependant show-for-completed' x-bind=click:clearCompleted>Clear Completed</button>
+            <button class='task-action-btn tile spacious bright {#unless _showCompleted}hidden{/}' x-bind=click:clearCompleted>Clear Completed</button>
 
             <!-- remaining/completed tabs -->
-            <ul class="todo-status-toggler nav nav-tabs">
-                <li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
-                <li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
+            <ul class="nav nav-tabs">
+                <li class="{#unless _showCompleted}active{/}"><a x-bind="click:todosShowRemaining">Remaining</a></li>
+                <li class="{#if _showCompleted}active{/}"><a x-bind="click:todosShowCompleted">Complete</a></li>
             </ul>
         </div>
     </div>
@@ -103,7 +103,7 @@
 
 <!-- all the parts of a single task -->
 <task:>
-    <li data-id={{:task.id}} class="task {taskClasses(:task, _user.filters, _user.preferences.dayStart, _user.lastCron)} {#if :task.down}{#if :task.up}habit-wide{/}{/}">
+    <li data-id={{:task.id}} class="task {taskClasses(:task, _user.filters, _user.preferences.dayStart, _user.lastCron, _showCompleted)}">
 
         <!-- right-hand side control buttons -->
         <div class="task-meta-controls">
@@ -238,4 +238,4 @@
         </form>
     </div>
 
-    <div style="display:none;" id={{:task.id}}-chart></div>
+    <div style="display:none;" id={{:task.id}}-chart></div>