gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Live Filter to Map - partial

Browse Source
This commit is contained in:
SaintPeter
2016-01-30 11:01:37 -08:00
parent d049d7b646
commit fa18734a59
3 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/less/map.less
View File

@ -94,10 +94,17 @@
margin:25px 0; margin:25px 0;
} }
} }
.map-buttons button { .map-buttons button,
.map-buttons .input-group{
width:300px; width:300px;
} }
.map-buttons .input-group{
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.map-accordion { .map-accordion {
margin: 140px auto 0; margin: 140px auto 0;
width:700px; width:700px;

30
client/main.js
View File

@ -391,6 +391,36 @@ $(document).ready(function() {
} }
}); });
// live filter
$('#map-filter').on('keyup', () => {
if($('#map-filter').val().length > 1) {
var regex = new RegExp($('#map-filter').val().replace(/ /g, '-'), "gi");
$('.challenge-title').each((index, title) => {
//console.log("title:", JSON.stringify(title));
if(regex.test($(title).attr('name'))) {
$(title).removeClass('hidden');
} else {
$(title).addClass('hidden');
}
});
$.each($('.map-collapse'), function(i, div) {
console.log("bing");
if ($(div).find('.hidden').length ===
$(div).find('p').length) {
console.log("hiding parents");
$(div).addClass('hidden');
$(div).find('h3').addClass('hidden');
$(div).prev('h2').addClass('hidden');
}
});
} else {
$('.challenge-title').each((title) => {
$(title).removeClass('hidden');
});
}
});
// keyboard shortcuts: open map // keyboard shortcuts: open map
window.Mousetrap.bind('g m', function() { window.Mousetrap.bind('g m', function() {
var isCollapsed = $('.map-aside').hasClass('is-collapsed'); var isCollapsed = $('.map-aside').hasClass('is-collapsed');

11
server/views/map/show.jade
View File

@ -4,6 +4,11 @@ block content
p Challenges required for certifications are marked with a * p Challenges required for certifications are marked with a *
.row.map-buttons .row.map-buttons
button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges
.row.map-buttons
.input-group
input#map-filter.form-control(type="text" placeholder="challenge name")
span.input-group-addon
i.fa.fa-search
hr hr
#accordion.map-accordion #accordion.map-accordion
for superBlock, index in superBlocks for superBlock, index in superBlocks
@ -24,12 +29,12 @@ block content
div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition") 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 for challenge in challengeBlock.challenges
if challenge.completed if challenge.completed
p.faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") p.challenge-title.faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
a(href="/challenges/#{challenge.dashedName}" target='_parent') a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title = challenge.title
span.sr-only= " Complete" span.sr-only= " Complete"
else if challenge.isRequired else if challenge.isRequired
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") p.challenge-title.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title span= challenge.title
span.sr-only= " Incomplete" span.sr-only= " Incomplete"
@ -44,7 +49,7 @@ block content
span.text-primary     span.text-primary    
strong * strong *
else else
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") p.challenge-title.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title span= challenge.title
span.sr-only= " Incomplete" span.sr-only= " Incomplete"