From 9426f883826df428892a64521d6f0d2d2ff1602c Mon Sep 17 00:00:00 2001
From: kelleyDanger <kelleyscanlon@gmail.com>
Date: Thu, 28 Feb 2019 23:11:12 -0800
Subject: [PATCH] Meetup widget for displaying next event with featured event
 photo.

---
 meetup_next_event_photo.html | 325 +++++++++++++++++++++++++++++++++++
 1 file changed, 325 insertions(+)
 create mode 100644 meetup_next_event_photo.html
diff --git a/meetup_next_event_photo.html b/meetup_next_event_photo.html
new file mode 100644
index 0000000..a907976
--- /dev/null
+++ b/meetup_next_event_photo.html
@@ -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>
