From cb972cacc84c6868f83e531f0130a6c0d721f7d8 Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Sat, 16 Jan 2016 01:03:22 -0800
Subject: [PATCH] Get the expand all / collapse all view working on the map

---
 client/less/main.less      |  4 ++++
 client/main.js             | 19 +++++++++++++++++++
 server/views/map/show.jade | 21 ++++++++++++---------
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/client/less/main.less b/client/less/main.less
index 3eac391f5f..c8dd4c62db 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -967,6 +967,10 @@ hr {
   opacity: 0.5;
 }
 
+.slightly-faded {
+  opacity: 0.75;
+}
+
 .padded-ionic-icon {
   padding-top: 5px;
 }
diff --git a/client/main.js b/client/main.js
index e2bfa9b476..a9b5ff0cf4 100644
--- a/client/main.js
+++ b/client/main.js
@@ -277,4 +277,23 @@ $(document).ready(function() {
   $('.map-aside-action-collapse').on('click', () => {
     $('.map-aside').addClass('is-collapsed');
   });
+
+  $('.collapse').on('show.bs.collapse', function(){
+    console.log(this);
+      $(this).siblings().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down");
+  }).on('hide.bs.collapse', function(){
+      $(this).siblings().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right");
+  });
+
+  $('#showAll').on('click', () => { 
+      var mapExpanded = $('#showAll').hasClass('active');
+      if (!mapExpanded) {
+        $('.map-collapse').addClass('in');
+        $('#showAll').text('Collapse all challenges');
+        return $('#showAll').addClass('active');
+      };
+      $('.map-collapse').removeClass('in');
+      $('#showAll').text('Expand all challenges');
+      return $('#showAll').removeClass('active');
+  });
 });
diff --git a/server/views/map/show.jade b/server/views/map/show.jade
index 433800dc68..16eeff380c 100644
--- a/server/views/map/show.jade
+++ b/server/views/map/show.jade
@@ -6,7 +6,8 @@ block content
           .row
               .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
                   a.btn.btn-primary.btn-block(href='/map' target='_blank') View this map in full screen
-                  // .btn.btn-primary.btn-block#showAll Expand 
+                  .btn.btn-primary.btn-block#showAll Expand all challenges
+
       hr
       #accordion
         for superBlock, index in superBlocks
@@ -15,23 +16,25 @@ block content
               | &thinsp;          
               a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
                 | #{superBlock.name}
-            div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse no-transition")
-                #nested.panel-group
+            div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse map-collapse no-transition")
+                #nested
                     for challengeBlock in superBlock.blocks
                         h3
-                          i.fa.fa-caret-right
-                          | &thinsp;
                           a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
+                            i.fa.fa-caret-right
+                            | &thinsp;
+                            | &thinsp;
                             | #{challengeBlock.name} (#{challengeBlock.time})
-                        div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse no-transition")
+                        div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse map-collapse no-transition")
+                            .button-spacer
                             for challenge in challengeBlock.challenges
                                 if challenge.completed
                                     p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;&nbsp;&nbsp;
-                                        a.faded(href="/challenges/#{challenge.dashedName}" target='_parent')
+                                        a(href="/challenges/#{challenge.dashedName}" target='_parent')
                                             = challenge.title
                                             span.sr-only= " Complete"
                                 else if challenge.isRequired
-                                    p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;&nbsp;&nbsp;
+                                    p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;&nbsp;&nbsp;
                                         a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                             span= challenge.title
                                             span.sr-only= " Incomplete"
@@ -46,7 +49,7 @@ block content
                                         span.text-primary &thinsp; &thinsp;
                                             strong *
                                 else
-                                    p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;&nbsp;&nbsp;
+                                    p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;&nbsp;&nbsp;
                                         a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                             span= challenge.title
                                             span.sr-only= " Incomplete"