Latest snapshot of the patched mm-foundation, and a quick tab implementation sidebar

app/assets/javascripts/darkswarm/controllers/login_sidebar_controller.js.coffee

@@ -6,6 +6,9 @@ window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $htt
   $scope.active = ->
     $location.path() == '/login'
 
+  $scope.select = ->
+    $location.path("/login")
+
   $scope.submit = ->
     $http.post("/user/spree_user/sign_in", {spree_user: $scope.spree_user}).success (data)->
       location.href = location.origin + location.pathname  # Strips out hash fragments

app/assets/javascripts/darkswarm/controllers/signup_sidebar_controller.js.coffee

@@ -7,6 +7,9 @@ window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope, $h
   $scope.active = ->
     $location.path() == '/signup'
 
+  $scope.select = ->
+    $location.path("/signup")
+
   $scope.submit = ->
     $http.post("/user/spree_user", {spree_user: $scope.spree_user}).success (data)->
       location.href = location.origin + location.pathname  # Strips out hash fragments

app/assets/javascripts/darkswarm/controllers/tabs_controller.js.coffee

@@ -8,6 +8,7 @@ Darkswarm.controller "TabsCtrl", ($scope, $rootScope, $location) ->
       path: "/" + tab 
 
   $scope.select = (tab)->
+    console.log tab
     if $scope.active(tab.path)
       $location.path "/"
     else

app/assets/javascripts/shared/mm-foundation-tpls-0.2.0-SNAPSHOT.js

@@ -1701,10 +1701,14 @@ angular.module('mm.foundation.tabs', [])
   var ctrl = this,
       tabs = ctrl.tabs = $scope.tabs = [];
 
+  // We simplified this method: now it simply executes the provided selectExpression
   ctrl.select = function(tab) {
-    //tab.selectExpression(tab.$parent);
+    tab.selectExpression(tab.$parent);
   };
 
+  // This method used to default the first to active
+  // Now tab.active is maintained through the provided activeExpression
+  // So we never actually set it internal to this plugin
   ctrl.addTab = function addTab(tab) {
     tabs.push(tab);
   };
@@ -1847,6 +1851,7 @@ angular.module('mm.foundation.tabs', [])
   </file>
 </example>
  */
+
 .directive('tab', ['$parse', function($parse) {
   return {
     require: '^tabset',
@@ -1856,6 +1861,7 @@ angular.module('mm.foundation.tabs', [])
     transclude: true,
     scope: {
       heading: '@',
+      // TODO: is this broken now?
       onSelect: '&select', //This callback is called in contentHeadingTransclude
                           //once it inserts the tab's content into the dom
       onDeselect: '&deselect'
@@ -1867,10 +1873,16 @@ angular.module('mm.foundation.tabs', [])
       return function postLink(scope, elm, attrs, tabsetCtrl) {
         var getActive, setActive;
 
+        // Here we parse the provided selectExpression
+        // This expression is executed when the tab is clicked/selected
+        // It is responsible for making appropriate state changes, such that getActive now returns appropriate values
+        // Fill in your logic here!
         if (attrs.select) {
           scope.selectExpression = $parse(attrs.select);
         }
 
+        // This expression is now the only thing controlling whether a tab is selected
+        // We no longer set scope.active/tab.active, except in response to changes to the result of this expression
         if (attrs.active) {
           getActive = $parse(attrs.active);
           setActive = getActive.assign;
@@ -1887,17 +1899,15 @@ angular.module('mm.foundation.tabs', [])
           setActive = getActive = angular.noop;
         }
 
+        // Commented out because:
+        // 1: two-way binding is limited to variables
+        // 2: We no longer toggle scope.active internal to this directive/plugin, so don't need to trigger responses
+        // 3: I'm now executing the callbacks inside scope.select()
+        
         //scope.$watch('active', function(active) {
           //// Note this watcher also initializes and assigns scope.active to the
           //// attrs.active expression.
           ////setActive(scope.$parent, active);
-          //if (active) {
-            //tabsetCtrl.select(scope);
-            //scope.onSelect();
-          //} else {
-            //scope.onDeselect();
-            //
-          //}
         //});
 
         scope.disabled = false;

app/views/shared/_login_sidebar.html.haml

@@ -1,5 +1,7 @@
-#login-content{"ng-controller" => "LoginSidebarCtrl", "ng-show" => "active()"}
-  %h2 Login
+%tab#login-content{"ng-controller" => "LoginSidebarCtrl", 
+  header: "Login", 
+  active: "active()", 
+  select: "select()"}
   %form{"ng-submit" => "submit()"}
     .alert-box.alert{"ng-show" => "errors != null"}
       {{ errors }}

app/views/shared/_sidebar.html.haml

@@ -1,6 +1,8 @@
 %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", 
 "ng-class" => "{'active' : active()}"}
   %a{href: "#"} Close
-  = render partial: "shared/login_sidebar"
-  = render partial: "shared/signup_sidebar"
+
+  %tabset
+    = render partial: "shared/login_sidebar"
+    = render partial: "shared/signup_sidebar"
   = yield :sidebar

app/views/shared/_signup_sidebar.html.haml

@@ -1,5 +1,8 @@
 #sign-up-content{"ng-controller" => "SignupSidebarCtrl", "ng-show" => "active()"}
-  %h2 Signup
+%tab#sign-up-content{"ng-controller" => "SignupSidebarCtrl", 
+  header: "Signup", 
+  active: "active()", 
+  select: "select()"}
   %form{"ng-submit" => "submit()"}
     .row
       .large-12.columns