diff --git a/client/main.js b/client/main.js index 48a973b051..a51c262746 100644 --- a/client/main.js +++ b/client/main.js @@ -280,6 +280,43 @@ $(document).ready(function() { window.location.href = link; }); + function expandCaret(item) { + $(item) + .prev().find('.fa-caret-right') + .removeClass('fa-caret-right').addClass('fa-caret-down'); + } + + function collapseCaret(item) { + $(item) + .prev().find('.fa-caret-down') + .removeClass('fa-caret-down').addClass('fa-caret-right'); + } + + function expandBlock(item) { + $(item).addClass('in').css('height', '100%'); + expandCaret(item); + } + + function collapseBlock(item) { + $(item).removeClass('in').css('height', '100%'); + collapseCaret(item); + } + + $.each($('.sr-only'), function(i, span) { + if ($(span).text() === ' Complete') { + $(span).parents('p').addClass('manip-hidden'); + } + }); + + $.each($('.map-collapse'), function(i, div) { + if ($(div).find('.manip-hidden').length === + $(div).find('p').length) { + collapseBlock(div); + $(div).find('h3 > a').addClass('faded'); + $(div).prev('h2').addClass('faded'); + } + }); + var scrollTo, dashedName = localStorage.getItem('currentDashedName'), elemsToSearch = $('p.padded-ionic-icon a'), currOrLastChallenge; if (!dashedName && $('.sr-only').length) { @@ -323,63 +360,31 @@ $(document).ready(function() { } $('#accordion').on('show.bs.collapse', function(e) { - $(e.target) - .prev().find('.fa-caret-right') - .removeClass('fa-caret-right').addClass('fa-caret-down'); + expandCaret(e.target); if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) { $('#showAll').text('Collapse all challenges'); $('#showAll').addClass('active'); } }).on('hide.bs.collapse', function(e) { - $(e.target) - .prev().find('.fa-caret-down') - .removeClass('fa-caret-down').addClass('fa-caret-right'); + collapseCaret(e.target); if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) { $('#showAll').text('Expand all challenges'); $('#showAll').removeClass('active'); } }); - $('#manipAll').on('click', () => { - var showAll = $('#manipAll').hasClass('active'); - if (showAll) { - $.each($('.sr-only'), function(i, item) { - if ($(item).text() === ' Complete') { - $(item).parents('p').css('display', 'none'); - $(item).parents('p').addClass('manip-hidden'); - } - }); - $('#manipAll').text('Show all challenges'); - return $('#manipAll').removeClass('active'); - } else { - $.each($('.manip-hidden'), function(i, item) { - $(item).css('display', 'block'); - $(item).removeClass('manip-hidden'); - }); - $('#manipAll').text('Show incomplete challenges'); - return $('#manipAll').addClass('active'); - } - }); - $('#showAll').on('click', () => { var mapExpanded = $('#showAll').hasClass('active'); if (!mapExpanded) { - $.each($('.map-collapse:not(".in")'), function(i, item) { - $(item).css('height', '100%'); - $(item).addClass('in'); - $(item) - .prev().find('.fa-caret-right') - .removeClass('fa-caret-right').addClass('fa-caret-down'); + $.each($('.map-collapse:not(".in")'), + function(i, div) { + expandBlock(div); }); $('#showAll').text('Collapse all challenges'); return $('#showAll').addClass('active'); } else { - $.each($('.map-collapse.in'), function(i, item) { - $(item).css('height', '100%'); - $(item).removeClass('in'); - $(item) - .prev().find('.fa-caret-down') - .removeClass('fa-caret-down').addClass('fa-caret-right'); + $.each($('.map-collapse.in'), function(i, div) { + collapseBlock(div); }); $('#showAll').text('Expand all challenges'); return $('#showAll').removeClass('active'); diff --git a/server/views/map/show.jade b/server/views/map/show.jade index edf7120ed0..06421dfcef 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -3,8 +3,7 @@ block content .text-center.map-fixed-header p Challenges marked with * are required for certification .row.map-buttons - button.center-block.btn.btn-sm.btn-block.btn-primary.active#manipAll Show incomplete challenges - button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all + button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges hr #accordion.map-accordion for superBlock, index in superBlocks @@ -25,7 +24,7 @@ block content div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition") for challenge in challengeBlock.challenges if challenge.completed - p.slightly-faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") + p.faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") a(href="/challenges/#{challenge.dashedName}" target='_parent') = challenge.title span.sr-only= " Complete"