greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Final effeciency pass, fix search bug

pull/6631/head
SaintPeter 2016-01-31 13:09:43 -08:00
parent d1993ea4b6
commit a6fc2f2fd4
4 changed files with 99 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/less/main.less
View File

@ -1018,14 +1018,6 @@ hr {
color: @gray-light;
}
.asterisk-explanation {
margin-top: -15px;
}
.map-buttons {
margin-top: -10px;
}
code {
padding: 0;
}

20
client/less/map.less
View File

@ -67,7 +67,7 @@
.map-fixed-header {
position: fixed;
background: white;
padding-top: 13px;
padding-top: 5px;
width: 100%;
z-index: 1;
left: 0;
@ -76,7 +76,7 @@
padding-top:30px;
}
p {
margin: 10px 0 20px;
margin: 5px 0 20px;
@media (max-width: 720px) {
margin-bottom:10px;
}
@ -87,7 +87,11 @@
margin:25px 0;
}
}
}
}
.map-buttons {
margin-top: -10px;
}
.map-buttons button,
.map-buttons .input-group{
width:300px;
@ -107,8 +111,8 @@
width:40px;
color: darkgreen;
background: #fff;
border-color: darkgreen;
&.filled{
border-color: darkgreen;
&.filled{
background: darkgreen;
border-color: #000d00;
color: #fff;
@ -123,7 +127,7 @@
}
.map-accordion {
margin: 170px auto 0;
margin: 135px auto 0;
width:700px;
overflow-y: auto;
position:relative;
@ -196,7 +200,7 @@
left:0;
right:0;
width:100%;
margin-top:205px;
margin-top:180px;
h2 {
margin:15px 0;
padding:0;
@ -257,7 +261,7 @@
#noneFound {
display:none;
margin:60px 30px 0;
font-size:60px;
font-size:30px;
text-align: center;
color:darkgreen;
.fa {

142
client/main.js
View File

@ -340,7 +340,10 @@ $(document).ready(function() {
$('.map-fixed-header').css('top', '50px');
}
// map
// map global selectors
var mapFilter = $('#map-filter');
var mapShowAll = $('#showAll');
$('#nav-map-btn').on('click', showMap);
$('.map-aside-action-collapse').on('click', collapseMap);
@ -360,101 +363,122 @@ $(document).ready(function() {
}
$('#accordion').on('show.bs.collapse', function(e) {
expandCaret(e.target);
if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) {
$('#showAll').text('Collapse all challenges');
$('#showAll').addClass('active');
}
expandCaret(e.target);
if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) {
mapShowAll.text('Collapse all challenges');
mapShowAll.addClass('active');
}
}).on('hide.bs.collapse', function(e) {
collapseCaret(e.target);
if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) {
$('#showAll').text('Expand all challenges');
$('#showAll').removeClass('active');
}
collapseCaret(e.target);
if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) {
mapShowAll.text('Expand all challenges');
mapShowAll.removeClass('active');
}
});
$('#showAll').on('click', () => {
var mapExpanded = $('#showAll').hasClass('active');
mapShowAll.on('click', () => {
var mapExpanded = mapShowAll.hasClass('active');
if (!mapExpanded) {
$.each($('.map-collapse:not(".in")'),
function(i, div) {
expandBlock(div);
});
$('#showAll').text('Collapse all challenges');
return $('#showAll').addClass('active');
mapShowAll.text('Collapse all challenges');
return mapShowAll.addClass('active');
} else {
$.each($('.map-collapse.in'), function(i, div) {
collapseBlock(div);
});
$('#showAll').text('Expand all challenges');
return $('#showAll').removeClass('active');
mapShowAll.text('Expand all challenges');
return mapShowAll.removeClass('active');
}
});
// live filter
function clearMapFilter(){
$('#map-filter').val('');
$('#map-filter').next().children().removeClass('fa-times').addClass('fa-search');
$('#map-filter').next().removeClass('filled');
$('.map-accordion').find('.hidden').removeClass('hidden');
$('#noneFound').hide();
}
$('#map-filter').on('keyup', () => {
if($('#map-filter').val().length > 1) {
var regex = new RegExp($('#map-filter').val().replace(/ /g, '-'), "gi");
// Map live filter
mapFilter.on('keyup', () => {
if (mapFilter.val().length > 0) {
var regex = new RegExp(mapFilter.val().replace(/ /g, '.'), 'i');
// Hide/unhide challenges that match the regex
$('.challenge-title').each((index, title) => {
if(regex.test($(title).attr('name'))) {
expandBlock($(title).closest('.chapterBlock'));
expandBlock($(title).closest('.chapterBlock').prev('h3'));
if (regex.test($(title).attr('name'))) {
expandBlock($(title).closest('.chapterBlock'));
expandBlock($(title).closest('.certBlock'));
expandBlock($(title).closest('.certBlock').prev('h2'));
$(title).removeClass('hidden');
$(title).removeClass('hidden');
} else {
$(title).addClass('hidden');
}
});
// Hide/unhide blocks with no matches
$.each($('.chapterBlock'), function(i, div) {
if ($(div).find('.hidden').length ===
$(div).find('p').length) {
$(div).addClass('hidden');
$(div).prev('h3').addClass('hidden');
$(div).find('p').length) {
$(div).addClass('hidden');
$(div).prev('h3').addClass('hidden');
} else {
$(div).removeClass('hidden');
$(div).prev('h3').removeClass('hidden');
$(div).removeClass('hidden');
$(div).prev('h3').removeClass('hidden');
}
});
// Hide/unhide superblocks with no matches
$.each($('.certBlock'), function(i, div) {
if ($(div).children('#nested').children('h3.hidden').length ===
$(div).children('#nested').children('h3').length) {
$(div).prev('h2').addClass('hidden');
$(div).children('#nested').children('h3').length) {
$(div).prev('h2').addClass('hidden');
} else {
$(div).prev('h2').removeClass('hidden');
$(div).prev('h2').removeClass('hidden');
}
});
} else if ($('#map-filter').val().length === 0) {
clearMapFilter();
// Display "Clear Filter" element
if (mapFilter.next().children().hasClass('fa-search')) {
mapFilter.next()
.children()
.removeClass('fa-search')
.addClass('fa-times');
mapFilter.next().addClass('filled');
// Scroll to the top of the page
$('html, body, .map-accordion').scrollTop(0);
}
} else {
$('#map-filter').next()
.children()
.removeClass('fa-search')
.addClass('fa-times');
$('#map-filter').next().addClass('filled');
clearMapFilter();
}
if ($.find('.certBlock').length===$('.map-accordion').children('.hidden').length) {
console.log("yass");
$('#noneFound').show();
} else {
$('#noneFound').hide();
// Display not found if everything is hidden
if ($.find('.certBlock').length ===
$('.map-accordion').children('.hidden').length) {
$('#noneFound').show();
} else {
$('#noneFound').hide();
}
});
// Give focus to the search box by default
mapFilter.focus();
// Clicking the search button or x clears the map
$('.map-buttons .input-group-addon').on('click', clearMapFilter);
function clearMapFilter() {
mapFilter.val('');
mapFilter.next().children().removeClass('fa-times').addClass('fa-search');
mapFilter.next().removeClass('filled');
$('.map-accordion').find('.hidden').removeClass('hidden');
$('#noneFound').hide();
}
// Clear the search on escape key
mapFilter.on('keydown', (e) => {
if (e.keyCode === 27) {
e.preventDefault();
clearMapFilter();
}
});
window.Mousetrap.bind('esc', clearMapFilter);
// keyboard shortcuts: open map
window.Mousetrap.bind('g m', function() {
var isCollapsed = $('.map-aside').hasClass('is-collapsed');

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

@ -1,23 +1,22 @@
extends ../layout-wide
block content
.text-center.map-fixed-header.asterisk-explanation
.text-center.map-fixed-header
p Challenges required for certifications are marked with a *
.row.map-buttons
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")
input#map-filter.form-control(type="text" placeholder="Type a challenge name" autocomplete="off" value="")
span.input-group-addon
i.fa.fa-search
hr
#accordion.map-accordion
#noneFound Nope! Your search has produced no results
i.fa.fa-hand-spock-o
#noneFound No results found. Happy Coding!
for superBlock, index in superBlocks
h2
a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
span.no-link-underline
i.fa.fa-caret-down
i.fa.fa-caret-down
| #{superBlock.name}
div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition certBlock")
#nested