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

Meetup widget for displaying next event with featured event photo. #7

Open
kelleyDanger wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Meetup widget for displaying next event with featured event photo. #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
325 changes: 325 additions & 0 deletions meetup_next_event_photo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
<html>
<head>
<script src="https://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: "EBGamersGuild",
width: 625,
height:970,
_description: "Shows basic stats on your favorite Meetup group.",
fields: 'photo_album'
};
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'});
},
eventPhoto: function(event_id) {
var id = event_id;
return mup_widget.api_call("/"+$parameters.urlname+"/events/", {id: id, fields: 'featured_photo'});
}
};
</script>
<link rel="stylesheet" type="text/css" href="https://a248.e.akamai.net/secure.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+'" width="'+($parameters.width - 50)+'" alt="'+alt+'" class="mup-img"/></div>';
},
addEventPoster = function(src, alt) {
return src == "" ? '' : '<div class="mup-img-wrap"><img src="'+src+'" style="max-width:'+($parameters.width -50)+'" alt="'+alt+'" class="mup-img"/></div>';
},
addStarRating = function(rating) {
var base_url = 'https://a248.e.akamai.net/secure.meetupstatic.com/img/03784007994490629714917/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).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"><div class="next-event"></div></span>\
</div>\
<div class="mup-ft">\
</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];
var venue = event.venue;

$.getJSON($queries.eventPhoto(event.id), function(data) {
if(data.data[0].featured_photo) {
var event_poster = data.data[0].featured_photo.highres_link;
} else {
var event_poster = event.photo_url;
}
console.log(event_poster);
// add Event Poster
$('.next-event', ctx).append(addEventPoster(event_poster, 'Next Event Poster'));
});

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="event-title">'+addLink(event.name, event.event_url)+'</div>\
<div class="mup-tlabel event-location">'+location+'</div>\
<div class="mup-tlabel event-datetime">'+getFormattedDate(event.time) + " &nbsp | &nbsp " + getFormattedTime(event.time) + '</div>\
</h4>');
}
}
});
}
});
});
</script>
<style type="text/css" media="screen">

.event-title {
font-size: 30px !important;
}
.event-datetime {
font-size: 15px !important;
}
.event-location {
font-size: 20px !important;
}
.next-event {

}
.mug-badge {
font-family: "lucida grande", lucida, tahoma, helvetica, arial, sans-serif !important;
font-size: 12px;
}
.mug-badge .mup-widget,
.mug-badge .mup-widget .mup-hd a {
background: #1A1A1A;
color: #f2f2f2;
}
.mug-badge .mup-widget {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-top: 8px;
}
.mug-badge .mup-widget h3,
.mug-badge .mup-widget h4,
.mug-badge .mup-widget p {
line-height: 1.2 !important;
text-align: center;
}
.mug-badge .mup-widget h3 {
font-size: 18px;
color: #f2f2f2;
font-weight: bold;
}
.mug-badge .mup-widget h4 {
font-size: 13px;
}
.mug-badge .mup-widget h5 {
font-size: 20px;
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-bd,
.mug-badge .mup-widget .mup-timeline,
.mug-badge .mup-widget .mup-bd p {
color: #f2f2f2;
}
.mug-badge .mup-widget .mup-bd {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 8px 6px;
margin: 0 8px;
background: #333;
}
.mug-badge .mup-widget a,
.mug-badge .mup-widget a:active,
.mug-badge .mup-widget a:visited {
color: #f2f2f2;
text-decoration: none;
}
.mug-badge .mup-widget a:hover {
color: #005CE6;
text-decoration: none;
}
.mug-badge .mup-widget .mup-tlabel {
font-size: 10px;
color: #AAA;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 2px;
}
.mug-badge .mup-widget .mup-stats {
display: block;
margin: 6px 0;
padding: 4px;
text-align: center;
background: #1A1A1A;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.mug-badge .mup-widget .mup-button {
width: 30px;
display:block;
margin: 0 auto;
padding: 2px 4px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2266BB), to(#102f56));
background: -moz-linear-gradient(0% 100% 90deg,#102F56, #2266BB);
background-color: #2266BB;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 10px;
font-weight: bold;
color: #f2f2f2;
text-align: center;
border: 1px solid #0d2748;
}
.mug-badge .mup-widget .mup-button:hover {
color: #005CE6;
}
.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 {
padding-top: 5px;
padding-bottom: 5px;
}
.mug-badge .mup-widget .mup-ft .mup-getwdgt {
padding: 3px 0;
font-size: 8px;
text-align: center;
background: #0A0A0A;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.mug-badge .mup-widget .mup-ft .mup-logo {
padding: 6px 8px;
height: 25px;
}
</style>
</head>
<body class="framed-mup-widget">
<div class="mug-badge"></div>
</body>
</html>