Skip to content

Commit b162e4b

Browse files
srl295srl295
committed
Add progress label. Fix JS errs.
* Added a percent indicator. (Fades out once at 100%) * Use international numbers where available. * Strange scope errors - the onclick analytics would only fire after a search happened. Probably not what was desired. * Moved the search and onclick handlers into the main jquery funxtion
1 parent 5806d71 commit b162e4b

File tree

2 files changed

+147
-108
lines changed

2 files changed

+147
-108
lines changed

‎css/style.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,11 +144,17 @@ font-family: Helvetica, Arial, Tahoma, sans-serif;
144144
margin-right: 0;
145145
}
146146

147-
.nrepos
147+
.nrepos, .loading
148148
{
149149
vertical-align: middle;
150150
}
151151

152+
.loading {
153+
float: right;
154+
padding-right: 1em;
155+
font-size: small;
156+
}
157+
152158
.btn-custom-jazz
153159
{
154160
background-color: #1cba11;

‎index.html‎

Lines changed: 140 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ <h1>IBM Open Source at GitHub</h1>
9696

9797
// go to http://thissite.example.com/#DEBUG to set DEBUG=true
9898
var DEBUG = (window.location.hash === '#DEBUG');
99+
var progress = 0;
100+
99101

100102
(function ($, undefined) {
101103

@@ -151,7 +153,7 @@ <h1>IBM Open Source at GitHub</h1>
151153
$item.appendTo(htag);
152154
}
153155

154-
$(".nrepos").text("("+allrepos.length+")");
156+
$(".nrepos").text("("+formatInt(allrepos.length)+")");
155157

156158
var d = $("#allrepos").collapse({
157159
toggle: true
@@ -255,12 +257,42 @@ <h1>IBM Open Source at GitHub</h1>
255257

256258
addUpdated();
257259
addAllRepos();
258-
259260
});
260261
}
262+
}).always(function() {
263+
updateProgress();
261264
});
262265
}
263266

267+
var formatPercent = function simplePercent(x) {
268+
return (x*100).toFixed(0)+'%';
269+
}
270+
var formatInt = function simpleNum(x) {
271+
return x.toLocaleString();
272+
}
273+
if(window.hasOwnProperty('Intl')) {
274+
var pctFormat = new Intl.NumberFormat([], {style: 'percent'});
275+
var decFormat = new Intl.NumberFormat([], {style: 'decimal', maximumFractionDigits:0 });
276+
277+
formatPercent = function intlPercent(x) {
278+
return pctFormat.format(x);
279+
};
280+
281+
formatInt = function intlNum(x) {
282+
return decFormat.format(x);
283+
};
284+
}
285+
286+
function updateProgress() {
287+
progress++;
288+
var fract = ((progress/orgs.length));
289+
$progress.text(formatPercent(fract));
290+
291+
if(progress >= orgs.length) {
292+
$progress.fadeOut();
293+
}
294+
}
295+
264296
$("<div>").addClass("separator").appendTo("#wrapper");
265297
var $sectiontitle = $("<div>").addClass("section-title").appendTo("#wrapper");
266298
var $title = $("<span>").addClass('title').text("recent").appendTo($sectiontitle);
@@ -272,7 +304,8 @@ <h1>IBM Open Source at GitHub</h1>
272304
$("<div>").addClass("separator gap").appendTo("#wrapper");
273305
var $sectiontitle = $("<div>").addClass("section-title").appendTo("#wrapper");
274306
var $title = $("<span>").addClass('title').text("repos").appendTo($sectiontitle);
275-
var $repos = $("<span>").addClass('nrepos').text("(0)").appendTo($title);
307+
var $repos = $("<span>").addClass('nrepos').text("("+formatInt(0)+")").appendTo($title);
308+
var $progress = $("<span>").addClass('loading').text(formatPercent(0)).appendTo($title);
276309
var $item = $("<div id='allrepos'>").addClass("columns section collapse");
277310
$item.appendTo($sectiontitle);
278311
var $twistie = $("<a data-toggle='collapse' data-target='#allrepos'>").addClass("twistie showdetails");
@@ -281,118 +314,118 @@ <h1>IBM Open Source at GitHub</h1>
281314
for (var r in orgs)
282315
{
283316
addRepos(orgs[r]);
284-
}
317+
}
285318

286319

287320
$("<div>").addClass("separator").appendTo("#wrapper");
288321

322+
323+
$('#search').keyup(function myKeyup() {
324+
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
325+
$rows = $(".card")
326+
$rows.show().filter(function() {
327+
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
328+
return !~text.indexOf(val);
329+
}).hide();
330+
331+
// update repo count here
332+
n = $rows.length;
333+
for (r in $rows)
334+
{
335+
row = $rows[r];
336+
style = row.style;
337+
if (style && style.cssText && style.cssText.match("none"))
338+
{
339+
n--;
340+
}
341+
342+
}
343+
344+
$rows = $(".updated-card");
345+
$rows.show().filter(function() {
346+
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
347+
return !~text.indexOf(val);
348+
}).hide();
349+
350+
m = 4;
351+
for (r in $rows)
352+
{
353+
row = $rows[r];
354+
style = row.style;
355+
if (style && style.cssText && style.cssText.match("none"))
356+
{
357+
m--;
358+
}
359+
360+
}
361+
console.log(n,m,(n-m));
362+
363+
$(".nrepos").text("("+formatInt(n - m)+")");
364+
});
365+
366+
// ---------------------------------
367+
// Google Analytics Event Tracking
368+
//
369+
//
370+
// usage: add the following attributes to links you want to track:
371+
// data-analytics-category="" REQUIRED String Typically the object that was interacted with (e.g. button)
372+
// data-analytics-action="" REQUIRED String The type of interaction (e.g. click)
373+
// data-analytics-label="" OPTIONAL String Useful for categorizing events (e.g. nav buttons)
374+
// data-analytics-value="" OPTIONAL Integer Values must be non-negative. Useful to pass counts (e.g. 4 times)
375+
//
376+
// Those are the suggested usages, but you can use the attributes how you want
377+
// see https://developers.google.com/analytics/devguides/collection/analyticsjs/events for more details
378+
//
379+
// EXAMPLE:
380+
// <a href="http://ibm.com" data-analytics-category="Leadspace button" data-analytics-action="To ibm.com">Off you go!</a>
381+
// ---------------------------------
382+
383+
$('body').on('click', 'a[data-analytics-category][data-analytics-action]', function(e){
384+
385+
// No analytics? Bail.
386+
if ( ! window.ga )
387+
return;
388+
389+
// for links to external sources, we need a tiny delay to have a little extra time to send to Google's servers before unload
390+
// 200ms is about right for enough time
391+
if (this.hostname && this.hostname !== location.hostname) {
392+
// Stop the link action
393+
e.preventDefault();
394+
395+
// setTimeout callback is called in the window scope, so cache the url from the link now
396+
var url = this.href;
397+
398+
// in 200ms, off you go
399+
setTimeout(function(){
400+
document.location = url;
401+
},200);
402+
}
403+
404+
var $el = $(this),
405+
data = {'hitType': 'event'}; // make a new data object
406+
407+
// category (required string)
408+
data['eventCategory'] = $el.attr('data-analytics-category');
409+
410+
// action (required string)
411+
data['eventAction'] = $el.attr('data-analytics-action');
412+
413+
// label (optional string)
414+
if ( $el.attr('data-analytics-label') )
415+
data['eventLabel'] = $el.attr('data-analytics-label');
416+
417+
// value (optional int)
418+
if ( $el.attr('data-analytics-value') )
419+
data['eventValue'] = parseInt( $el.attr('data-analytics-value') );
420+
421+
// send the data
422+
ga('send', data);
423+
424+
});
289425

290426

291427
})(jQuery);
292-
293-
$('#search').keyup(function() {
294-
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
295-
$rows = $(".card")
296-
$rows.show().filter(function() {
297-
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
298-
return !~text.indexOf(val);
299-
}).hide();
300-
301-
// update repo count here
302-
n = $rows.length;
303-
for (r in $rows)
304-
{
305-
row = $rows[r];
306-
style = row.style;
307-
if (style && style.cssText && style.cssText.match("none"))
308-
{
309-
n--;
310-
}
311-
312-
}
313-
314-
$rows = $(".updated-card");
315-
$rows.show().filter(function() {
316-
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
317-
return !~text.indexOf(val);
318-
}).hide();
319-
320-
m = 4;
321-
for (r in $rows)
322-
{
323-
row = $rows[r];
324-
style = row.style;
325-
if (style && style.cssText && style.cssText.match("none"))
326-
{
327-
m--;
328-
}
329-
330-
}
331-
332-
$(".nrepos").text("("+(n - m)+")");
333-
334-
335-
// ---------------------------------
336-
// Google Analytics Event Tracking
337-
//
338-
//
339-
// usage: add the following attributes to links you want to track:
340-
// data-analytics-category="" REQUIRED String Typically the object that was interacted with (e.g. button)
341-
// data-analytics-action="" REQUIRED String The type of interaction (e.g. click)
342-
// data-analytics-label="" OPTIONAL String Useful for categorizing events (e.g. nav buttons)
343-
// data-analytics-value="" OPTIONAL Integer Values must be non-negative. Useful to pass counts (e.g. 4 times)
344-
//
345-
// Those are the suggested usages, but you can use the attributes how you want
346-
// see https://developers.google.com/analytics/devguides/collection/analyticsjs/events for more details
347-
//
348-
// EXAMPLE:
349-
// <a href="http://ibm.com" data-analytics-category="Leadspace button" data-analytics-action="To ibm.com">Off you go!</a>
350-
// ---------------------------------
351-
352-
$('body').on('click', 'a[data-analytics-category][data-analytics-action]', function(e){
353-
354-
// No analytics? Bail.
355-
if ( ! window.ga )
356-
return;
357-
358-
// for links to external sources, we need a tiny delay to have a little extra time to send to Google's servers before unload
359-
// 200ms is about right for enough time
360-
if (this.hostname && this.hostname !== location.hostname) {
361-
// Stop the link action
362-
e.preventDefault();
363-
364-
// setTimeout callback is called in the window scope, so cache the url from the link now
365-
var url = this.href;
366-
367-
// in 200ms, off you go
368-
setTimeout(function(){
369-
document.location = url;
370-
},200);
371-
}
372-
373-
var $el = $(this),
374-
data = {'hitType': 'event'}; // make a new data object
375-
376-
// category (required string)
377-
data['eventCategory'] = $el.attr('data-analytics-category');
378-
379-
// action (required string)
380-
data['eventAction'] = $el.attr('data-analytics-action');
381-
382-
// label (optional string)
383-
if ( $el.attr('data-analytics-label') )
384-
data['eventLabel'] = $el.attr('data-analytics-label');
385-
386-
// value (optional int)
387-
if ( $el.attr('data-analytics-value') )
388-
data['eventValue'] = parseInt( $el.attr('data-analytics-value') );
389-
390-
// send the data
391-
ga('send', data);
392-
393-
});
394428

395-
});
396429
</script>
397430

398431

0 commit comments

Comments
 (0)