Skip to content

Commit 5adc31e

Browse files
avivaceavivace
committed
Scrolling to bottom will start loading new challenges, after JSON parameter
1 parent 7b18557 commit 5adc31e

File tree

3 files changed

+122
-101
lines changed

3 files changed

+122
-101
lines changed

‎js/chall.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,16 @@ function getParameterByName(name, url) {
2424
if (!results[2]) return '';
2525
return decodeURIComponent(results[2].replace(/\+/g, " "));
2626
}
27+
if (getParameterByName('after')){
28+
var after_string = getParameterByName('after');
29+
}
30+
else {
31+
var after_string = ''
32+
}
2733

34+
console.log(after_string);
2835
$.getJSON(
29-
"https://www.reddit.com/r/dailyprogrammer/new.json",
36+
"https://www.reddit.com/r/dailyprogrammer/new.json"+after_string,
3037
function foo(data)
3138
{
3239
var ci = parseInt(getParameterByName('i'));

‎js/front.js

Lines changed: 114 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -64,105 +64,120 @@ function htmlDecode(input){
6464
e.innerHTML = input;
6565
return e.childNodes.lenght === 0 ? "" : e.childNodes[0].nodeValue;
6666
}
67-
68-
$.getJSON(
69-
"https://www.reddit.com/r/dailyprogrammer/new.json",
70-
function foo(data)
71-
{
72-
$.each(
73-
data.data.children.slice(0, 100),
74-
function (i, post) {
75-
76-
if (post.data.title.indexOf('Challenge') !== -1 || post.data.title.indexOf('Weekly') !== -1){
77-
var card_style = 'red';
78-
var diff = 'HARD';
79-
if (post.data.title.indexOf('Easy') !== -1) {
80-
card_style='green';
81-
diff='EASY';
82-
} else if (post.data.title.indexOf('Intermediate') !== -1) {
83-
card_style='orange';
84-
diff='MEDIUM';
85-
} else if (post.data.title.indexOf('Weekly') !== -1) {
86-
card_style='blue';
87-
diff='WEEKLY';
88-
}
89-
90-
var link = 'chall.html?i='+i;
91-
var header = post.data.title.substring(27, post.data.title.lenght).replace("[Easy]", '').replace("[Easy/Intermediate]", '').replace("[Hard]", '').replace("[Intermediate]", '');
92-
var body = removeMd(post.data.selftext).replace('Description','').substring(0,300)+ ' ...';
93-
94-
// Weekly
95-
if (card_style == 'blue') header = post.data.title.substring(13, post.data.title.lenght);
96-
97-
// border-bottom: 1px solid rgba(0, 0, 0, 0.12);
98-
99-
// Let's build the card
100-
101-
102-
if (card_style == 'white'){
103-
var card_color = 'white';
104-
var text_color = 'black-text';
67+
var after_string;
68+
function renderChallenges(after){
69+
$.getJSON(
70+
"https://www.reddit.com/r/dailyprogrammer/new.json" + after,
71+
function foo(data)
72+
{
73+
$.each(
74+
data.data.children.slice(0, 100),
75+
function (i, post) {
76+
if (post.data.title.indexOf('Challenge') !== -1 || post.data.title.indexOf('Weekly') !== -1){
77+
var card_style = 'red';
78+
var diff = 'HARD';
79+
if (post.data.title.indexOf('Easy') !== -1) {
80+
card_style='green';
81+
diff='EASY';
82+
} else if (post.data.title.indexOf('Intermediate') !== -1) {
83+
card_style='orange';
84+
diff='MEDIUM';
85+
} else if (post.data.title.indexOf('Weekly') !== -1) {
86+
card_shttps://developer.mozilla.org/?en-US/docs/Web/JavaScript/Reference/Errors/Not_defined?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=defaulttyle='blue';
87+
diff='WEEKLY';
88+
}
89+
90+
if (after_string) {
91+
var link = 'chall.html?i='+i+'&after='+after_string;
92+
}
93+
else{
94+
var link = 'chall.html?i='+i;
95+
}
96+
var header = post.data.title.substring(27, post.data.title.lenght).replace("[Easy]", '').replace("[Easy/Med]", '').replace("[Easy/Intemerdiate]", '').replace("[Easy/Intermediate]", '').replace("[Hard]", '').replace("[Intermediate]", '');
97+
var body = removeMd(post.data.selftext).replace('Description','').substring(0,300)+ ' ...';
98+
99+
// Weekly
100+
if (card_style == 'blue') header = post.data.title.substring(13, post.data.title.lenght);
101+
102+
// border-bottom: 1px solid rgba(0, 0, 0, 0.12);
103+
104+
// Let's build the card
105+
if (card_style == 'white'){
106+
var card_color = 'white';
107+
var text_color = 'black-text';
108+
}
109+
else if (card_style == 'red') {
110+
var card_color = 'white';
111+
var text_color = 'black-text';
112+
var diff_col = '#F22613';
113+
}
114+
else if (card_style == 'green') {
115+
var diff_col = '#26C281';
116+
var card_color = 'white';
117+
var text_color = 'black-text';
118+
119+
}
120+
else if (card_style == 'orange') {
121+
var diff_col = '#D35400';
122+
var card_color = 'white';
123+
var text_color = 'black-text';
124+
}
125+
else if (card_style == 'blue') {
126+
var diff_col = 'blue';
127+
var card_color = 'white';
128+
var text_color = 'black-text';
129+
}
130+
131+
var p1 = '<div id='+'"CH'+i+'"'+'class="card ';
132+
133+
var card_o = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'</span><p class="'+text_color+'">'+body+'</p></div><div class="card-action"><a href="'+link+'" style="font-weight: 500;" class="'+text_color+'">GO TO CHALLENGE &nbsp;<i style="vertical-align: -15%; font-size: 16px;" class="material-icons">launch</i></a> <a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 0px"><b> '+diff+'</b> </a></div></div>';
134+
135+
var card = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'"><a style="color: black; text-shadow: 1px 1px 2px #BBB;">'+ header+'</a><a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b> '+diff+'</b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
136+
137+
var idd = after_string +'_'+ i;
138+
$("#all").append('<div id="'+idd.substring(7, idd.lenght)+'">'+card+'</div>');
139+
140+
$("#"+idd.substring(7, idd.lenght)).click(function(e){
141+
//e.preventDefault();
142+
window.location = link;
143+
});
144+
145+
146+
var card_nodiff = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'<a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b> </b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
147+
148+
149+
if (post.data.title.indexOf('Easy') !== -1) {
150+
$("#easy").append('<div id="a'+i+'">'+card_nodiff+'</div>');
151+
} else if (post.data.title.indexOf('Intermediate') !== -1) {
152+
$("#med").append('<div id="a'+i+'">'+card_nodiff+'</div>');
153+
} else if (post.data.title.indexOf('Hard') !== -1) {
154+
$("#hard").append('<div id="a'+i+'">'+card_nodiff+'</div>');
155+
}
156+
157+
$("#a"+i).click(function(e){
158+
//e.preventDefault();
159+
window.location = link;
160+
});
161+
162+
163+
/*$("#cc").append('<div class="row"> <div class="col s12 m6"><div class="card blue-grey darken-1"> <div class="card-content white-text">');
164+
$("#cc").append('<span class="card-title">'+ header + '</span>');
165+
$("#cc").append('<p>Description PLACEHOLDER</p> </div> <div class="card-action"> <a href="#">GO TO CHALLENGE</a> </div> </div> </div> </div>');
166+
167+
$("#cards").append(' <div class="card card-'+diff_col+'"> <div class="card-main"> <div class="card-inner"> <p class="card-heading" id="heading2">'+ header +'</p> <p>'+ body + '</p> </div> <div class="card-action"> <div class="card-action-btn pull-left"> <a class="btn btn-flat waves-attach" href="'+ link +'">&nbsp;GO TO CHALLENGE<span class="icon margin-left-sm">open_in_new</span></a></div></div></div> </div>');*/
105168
}
106-
else if (card_style == 'red') {
107-
var card_color = 'white';
108-
var text_color = 'black-text';
109-
var diff_col = '#F22613';
110-
}
111-
else if (card_style == 'green') {
112-
var diff_col = '#26C281';
113-
var card_color = 'white';
114-
var text_color = 'black-text';
115-
116-
}
117-
else if (card_style == 'orange') {
118-
var diff_col = '#D35400';
119-
var card_color = 'white';
120-
var text_color = 'black-text';
121-
}
122-
else if (card_style == 'blue') {
123-
var diff_col = 'blue';
124-
var card_color = 'white';
125-
var text_color = 'black-text';
126-
}
127-
128-
var p1 = '<div class="card ';
129-
130-
var card_o = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'</span><p class="'+text_color+'">'+body+'</p></div><div class="card-action"><a href="'+link+'" style="font-weight: 500;" class="'+text_color+'">GO TO CHALLENGE &nbsp;<i style="vertical-align: -15%; font-size: 16px;" class="material-icons">launch</i></a> <a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 0px"><b> '+diff+'</b> </a></div></div>';
131-
132-
var card = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'"><a style="color: black; text-shadow: 1px 1px 2px #BBB;">'+ header+'</a><a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b> '+diff+'</b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
133-
134-
$("#all").append('<div id="'+i+'">'+card+'</div>');
135-
$("#"+i).click(function(e){
136-
//e.preventDefault();
137-
window.location = link;
138-
});
139-
140-
141-
var card_nodiff = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'<a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b> </b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
142-
143-
144-
if (post.data.title.indexOf('Easy') !== -1) {
145-
$("#easy").append('<div id="a'+i+'">'+card_nodiff+'</div>');
146-
} else if (post.data.title.indexOf('Intermediate') !== -1) {
147-
$("#med").append('<div id="a'+i+'">'+card_nodiff+'</div>');
148-
} else if (post.data.title.indexOf('Hard') !== -1) {
149-
$("#hard").append('<div id="a'+i+'">'+card_nodiff+'</div>');
150-
}
151-
152-
$("#a"+i).click(function(e){
153-
//e.preventDefault();
154-
window.location = link;
155-
});
156-
157-
158-
/*$("#cc").append('<div class="row"> <div class="col s12 m6"><div class="card blue-grey darken-1"> <div class="card-content white-text">');
159-
$("#cc").append('<span class="card-title">'+ header + '</span>');
160-
$("#cc").append('<p>Description PLACEHOLDER</p> </div> <div class="card-action"> <a href="#">GO TO CHALLENGE</a> </div> </div> </div> </div>');
161-
162-
$("#cards").append(' <div class="card card-'+diff_col+'"> <div class="card-main"> <div class="card-inner"> <p class="card-heading" id="heading2">'+ header +'</p> <p>'+ body + '</p> </div> <div class="card-action"> <div class="card-action-btn pull-left"> <a class="btn btn-flat waves-attach" href="'+ link +'">&nbsp;GO TO CHALLENGE<span class="icon margin-left-sm">open_in_new</span></a></div></div></div> </div>');*/
163169
}
170+
)
171+
after_string = '?after='+ data.data.after;
172+
}
173+
)
174+
}
164175

165-
}
166-
)
167-
}
168-
)
176+
$(window).scroll(function() {
177+
if($(window).scrollTop() + $(window).height() == $(document).height()) {
178+
//alert("bottom!");
179+
renderChallenges(after_string);
180+
}
181+
});
182+
183+
renderChallenges('');

‎test.txt

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)