Skip to content
This repository was archived by the owner on Oct 26, 2019. It is now read-only.

More Customizable Meetup Group Stats #2

Open
atorockio wants to merge 12 commits into
base: master
Choose a base branch
from
Open

More Customizable Meetup Group Stats #2

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
01a2e9c
copied mug_stats.live.html and removed the date established.
atorockio Dec 17, 2013
da2a81b
created parameters for background-color, color, font-family, font-siz…
atorockio Dec 17, 2013
87cc2c4
width parameter sets max-width rather than width
atorockio Dec 18, 2013
f2e2e91
set max-width on image to 90% of the container
atorockio Dec 18, 2013
5096a46
removed unnessary styles and converted px units to relative units whe…
atorockio Dec 18, 2013
50fe8ae
fixed alignment on get widget link, clear:both
atorockio Dec 20, 2013
1ee3ffe
changed default urlname to my meetup group's name, 'philadelphiaflyin…
atorockio Dec 20, 2013
07374b0
added parameters for color for button text color, background color an…
atorockio Dec 20, 2013
77241c9
set button height by lineheight instead of padding so that the link f…
atorockio Dec 20, 2013
c1fd759
Updated widget description
atorockio Dec 20, 2013
be67d06
changed name widget name to 'mug_stats_custom' from 'mug_stats_simple…
atorockio Jan 22, 2014
b759d3b
Updated widget name
atorockio Jan 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
283 changes: 283 additions & 0 deletions mug_stats_custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="local.js"></script>
<script src="api_key.js"></script>
<script id="config" type="text/javascript" charset="utf-8">
var $parameters = {
urlname: "philadelphiaflyingphoenix",
width: '250',
height:570,
bgcolor:'#DDD',
textcolor:'#111',
buttontextcolor:'#111',
buttonbgcolor:'#CCC',
buttonborder:'#666',
fontfamily:'inherit',
fontsize:'inherit',
_name: "Meetup Group Stats Custom",
_description: "Shows basic stats on your favorite Meetup group. Uses basic styles and has options to set fonts and colors."
};
var $queries = {
groups: function() {
return mup_widget.api_call("/2/groups", {group_urlname: $parameters.urlname});
},
events: function() {
return mup_widget.api_call("/2/events", {group_urlname: $parameters.urlname, page: '1'});
}
};
//$('.mug-badge .mup-widget, .mug-badge .mup-widget .mup-hd a').css('background', parameters.bgcolor);
</script>
<link rel="stylesheet" type="text/css" href="http://static2.meetupstatic.com/style/widget.css">
<script type="text/javascript" charset="utf-8">
mup_widget.with_jquery(function($, ctx) {
var group = '',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
addLink = function(content, link) {
return '<a target="_top" href="' + link + '">' + content + '</a>';
},
addImage = function(src, alt) {
return src == "" ? '' : '<div class="mup-img-wrap"><img src="'+src+'" alt="'+alt+'" class="mup-img"/></div>';
},
addStarRating = function(rating) {
var base_url = 'http://img1.meetupstatic.com/9260736631256287675/img/star_';
var starlink = '';
if (rating == 0) {
return 'Not Yet Rated';
}else if (rating < 1.25) {
starlink = "100.png";
}else if (rating < 1.75) {
starlink = "150.png";
}else if (rating < 2.25) {
starlink = "200.png";
}else if (rating < 2.75) {
starlink = "250.png";
}else if (rating < 3.25) {
starlink = "300.png";
}else if (rating < 3.75) {
starlink = "350.png";
}else if (rating < 4.25) {
starlink = "400.png";
}else if (rating < 4.75) {
starlink = "450.png";
}else {
starlink = "500.png";
}
return '<img src="'+base_url+starlink+'" alt="'+rating+'" />';

},
addLeadingZero = function( num ) {
return (num < 10) ? ('0' + num) : num;
},
getFormattedDate = function( millis ) {
var date = new Date( millis );
return months[date.getMonth()] + ' ' + addLeadingZero( date.getDate() ) + ', ' + date.getFullYear().toString();
},
getFormattedTime = function( millis ) {
var time = new Date( millis ),
hours = time.getHours(),
min = time.getMinutes(),
ampm = (hours > 11) ? 'PM' : 'AM';
min = (min < 10) ? ('0' + min) : min;
hours = (hours == 0) ? 1 : hours;
hours = (hours > 12) ? hours-12 : hours;
return hours + ':' + min + ' ' + ampm;
},
numberFormat = function(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return x1 + x2;
};
$.getJSON($queries.groups(), function(data) {
if (data.results.length == 0) {
$('.mug-badge', ctx).width($parameters.width);
$('.mug-badge', ctx).append(
'<div class="mup-widget error">\
<div class="errorMsg">Oops. No results for "' + $parameters.urlname + '"</div>\
</div>');
}
else {
group = data.results[0];
$('.mug-badge', ctx).css('max-width',$parameters.width);
$('.mug-badge', ctx).append(
'<div class="mup-widget">\
<div class="mup-bd">\
<h3>' + addLink(group.name, group.link) + '</h3>\
<span class="mup-stats">' + addImage(group["group_photo"] ? group.group_photo.photo_link : "", group.name) + numberFormat(group.members) + '<span class="mup-tlabel"> '+ group.who+'</span></span>\
<span class="mup-stats"><div class="next-event"></div></span>\
<h4><span class="mup-button" style="color:'+$parameters.buttontextcolor+'; background-color:'+$parameters.buttonbgcolor+'; border-color: '+$parameters.buttonborder+';">'+ addLink('JOIN',group.link)+'</span></h4>\
</div>\
<div class="mup-ft">\
<div class="mup-logo"><div style="float:left;">'+addLink('<img src="http://img1.meetupstatic.com/84869143793177372874/img/birddog/everywhere_widget.png">','http://www.meetup.com')+'</div><div style="float:right;"><div style="float:right;">'+addStarRating(group.rating)+'</div><br><div style="float:right;"><span class="mup-tlabel">Group Rating</span></div></div></div>\
<div class="mup-getwdgt">' + addLink('ADD THIS TO YOUR SITE', 'http://www.meetup.com/meetup_api/foundry/#'+$parameters._name.toLowerCase().replace(/ /g,"-")) + '</div>\
</div>\
</div>'
);

$.getJSON($queries.events(), function(data) {
if (data.status && data.status.match(/^200/) == null) {
alert(data.status + ": " + data.details);
} else {
if (data.results.length == 0) {
$('.next-event', ctx).append('<span class="mup-tlabel">'+addLink('Suggest new ideas for Meetups!',group.link)+'</span>');
} else {
var event = data.results[0];
console.log(event);
var venue = event.venue;
console.log(venue);
var city;
if (!venue || !venue.city) {
city = group.city;
} else {
city = venue.city;
}
var state_country;
if (!venue || !venue.state) {
if (group.state == "") {
state_country = group.country.toUpperCase();
} else {
state_country = group.state;
}
} else {
state_country = venue.state;
}
var venue_addr;
if (venue) {
if (venue.name !== undefined) {
venue_addr = venue.name + " - ";
} else if (venue.address_1 !== undefined) {
venue_addr = venue.address_1 + " - ";
} else {
venue_addr = "";
}
} else {
venue_addr = "";
}
var location = venue_addr + city + ", " + state_country;
$('.next-event', ctx).append('<h4><div class="mup-tlabel">'+getFormattedDate(event.time) + ' &nbsp | &nbsp ' + getFormattedTime(event.time) + "</div>" + addLink(event.name, event.event_url)+'<div class="mup-tlabel">' + location + "</div></h4>");
}
}
});
$('.mug-badge .mup-widget, .mug-badge .mup-widget .mup-hd a').css({
'background': $parameters.bgcolor,
'color': $parameters.textcolor
});
$('.mug-badge').css({
'font-family': $parameters.fontfamily,
'font-size': $parameters.fontsize,
});
$('.mup-img-wrap img').css('max-width', '90%');
}
});

});
</script>
<style type="text/css" media="screen">
.next-event {

}
.mug-badge {
text-align: center;
width:100%;;
}

.mug-badge .mup-widget {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-top: 8px;
}

.mug-badge .mup-widget h3 {
font-weight: bold;
display:block;
}
.mug-badge .mup-widget h4 {

}
.mug-badge .mup-widget h5 {
margin: 0 auto;
text-align: center;
letter-spacing: -1px;
text-shadow: 1px 1px 1px #1A1A1A;
}
.mug-badge .mup-widget p {
text-align: center;
}

.mug-badge .mup-widget .mup-tlabel {
font-size: .9em;
}

.mug-badge .mup-widget .mup-button {
display:block;
width: 6em;
margin: 0 auto;
padding:0 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 1em;
font-weight: bold;
border: 1px solid #0d2748;
}

.mug-badge .mup-widget .mup-button a {
color:inherit;
line-height:2em;
vertical-align:middle;
}

.mug-badge a {
text-decoration:none;
display:block;
}

.mug-badge .mup-widget .mup-img {
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.mug-badge .mup-widget .mup-img-wrap {
margin:1em auto 0;
}

.mug-badge .next-event {
margin:1em;
}

.mug-badge .next-event a {
display:block;
}
.mug-badge .mup-widget .mup-ft .mup-getwdgt {
padding: 2em 0;
font-size: .5em;
text-align: center;
clear: both;
}

.mug-badge .mup-widget .mup-ft .mup-getwdgt a {
display:block;
width:100%;
text-align: center;
margin:auto;
}
.mug-badge .mup-widget .mup-ft .mup-logo {
padding: 1em;
height: 25px;
}
</style>
</head>
<body class="framed-mup-widget">
<div class="mug-badge"></div>

</body>
</html>