rewrite meetup widget as module and add new chapters

Author: florapdx

www/_assets/images/pyladies_pdx.jpeg

@@ -1,51 +1,94 @@
-///Asks Meetup.com for any public event listing from one of the PyLadies chapters upcoming in the next week
-//Localized for use by any chapter--just copy file over to your location site and sub your meetup key for "meetup_key" and meetup group id (indicated as data id on locations index.html page) for "chapter_ids" in addUpcomingMeetups function.
-
-//helper functions
-function create_urls(input) {
-        return input
-        .replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim, '"$&" target="_blank"')
-        .replace(/([^\/])(www[\S]+(\b|$))/gim, '"http://$2" target="_blank"');
-} //end url parsing helper
-
-function convert_time_miliseconds_to_date(t) {
-        var d = new Date(t); // The 0 there is the key, which sets the date to the epoch
-        return String(d).slice(0, 11);
-} //end convert miliseconds_to_date
-
-// functions
-function addUpcomingMeetups(chapter_ids) {
-   var meetup_key = '70704f53354b686770246f68494e2637';
-
-   $.ajax( {
-       url: 'http://api.meetup.com/2/events.json?key='+meetup_key+'&group_id='+chapter_ids+'&fields=group_photo&time=0m,1m&status=upcoming&sign=true',
-       dataType: 'jsonp',
-       success: function(data) {
-          buildHtml(data);
-       }, //end success
-       error: function(data) {
-          handleError(data);
-       } //end error
-     }); //end .ajax()
-     return false;
-} //end addUpcomingMeetups function
-
-function buildHtml(data) {
+/* Note: Updated to reflect JS Module pattern for encapsulation (v2)
+ * To call: PyladiesMeetupWidget.addUpcomingMeetups(chapterIds)
+ * Requests location meetups from Meetup.com coming up in the next month
+ * and uses data to construct html entries for each event that are appended
+ * to an '#upcomingMeetupsList' div in page's html.
+ * Can be given any number of chapterIds.
+ */
+
+var PyladiesMeetupWidget = (function() {
+  var key = '70704f53354b686770246f68494e2637';
+
+  // Private methods //
+
+  _createUrls = function(url) {
+    // creates <a href> links from urls for event clickthroughs
+    return url
+      .replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim, '"$&" target="_blank"')
+      .replace(/([^\/])(www[\S]+(\b|$))/gim, '"http://$2" target="_blank"');
+  };
+
+  _convertMilisecondsToDate = function(ms) {
+    // converts miliseconds since epoch to date format
+    var date = new Date(ms);
+    return String(date).slice(0, 11);
+  };
+
+  _makeAjaxRequest = function(ids) {
+    // fetch data
+    $.ajax({
+      url: 'http://api.meetup.com/2/events.json?key=' + key + '&group_id=' + ids +
+        '&fields=group_photo&time=0m,1m&status=upcoming&sign=true',
+      dataType: 'jsonp',
+      success: function(data) {
+        _buildHtml(data);
+      },
+      error: function(data) {
+        _handleError(data);
+      }
+    });
+  };
+
+  _getJSON = function(datum) {
+    // {_buildHtml helper}
+    // note: Not every meetup group event request returns a photo--not sure why, but
+    // noticed that neither Taiwan or Bangalore's logos returned, so perhaps there
+    // is some difference in data offered in parts of Asia?
+    var json = {
+      thumbLink: datum.group.group_photo ? datum.group.group_photo.thumb_link : "",
+      groupName: datum.group.name,
+      eventLink: _createUrls(datum.event_url),
+      eventName: datum.name,
+      eventDate: _convertMilisecondsToDate(datum.time)
+    };
+
+    return json;
+  };
+
+  _buildHtml = function(data) {
+    var html;
+    var datum;
+    var json;
+
+    // remove any old meetup list still attached to dom and append new $ul
     $('#upcomingMeetupsList ul').remove();
     $('#upcomingMeetupsList').append('<ul></ul>');
-    for (var key in data.results) {
-      url_link = create_urls(data.results[key].event_url);
-      event_date = convert_time_miliseconds_to_date(data.results[key].time);
-      var html = '<img class="meetup_group_icon" src="'+data.results[key].group.group_photo.thumb_link+'" height="80" width="80" />';
-      html += '<p class="meetup_listing_group">'+data.results[key].group.name+'</p>';
-      html += '<p class="meetup_listing_event_title"><a href='+url_link+'>'+data.results[key].name+'</a></p>';
-      html += '<p class="meetup_event_date">'+event_date+'</p>';
-      $('#upcomingMeetupsList').find('ul').append('<li>'+html+'</li>');
+
+    for (var i = 0; i < data.results.length; i++) {
+      datum = data.results[i];
+      json = _getJSON(datum);
+
+      // todo(fw): pull this out into a template
+      html = '<img class="meetup_group_icon" src="' + json.thumbLink + '" height="80" width="80" />';
+      html += '<p class="meetup_listing_group">' + json.groupName + '</p>';
+      html += '<p class="meetup_listing_event_title"><a href=' + json.eventLink + '>' + json.eventName + '</a></p>';
+      html += '<p class="meetup_event_date">' + json.eventDate + '</p>';
+
+      $('#upcomingMeetupsList ul').append('<li>' + html + '</li>');
     }
-}
+  };
 
-function handleError(data) {
+  _handleError = function(data) {
+    // remove any stale list attached to dom and print error message
     $('#upcomingMeetupsList ul').remove();
-    $('#upcomingMeetupsList').append('<ul></ul>');
-    $('#upcomingMeetupsList').find('ul').append('<li>Sorry, we are unable to reach Meetup.com at this time</li>');
-}
+    $('#upcomingMeetupsList')
+      .append('<ul><li>Sorry, we are unable to reach Meetup.com at this time</li></ul>');
+  };
+
+  return {
+    // returns public method
+    addUpcomingMeetups: function(chapterIds) {
+      _makeAjaxRequest(chapterIds);
+    }
+  };
+})();

www/_assets/js/meetup_widget.js

@@ -17,10 +17,13 @@
     <script type="text/javascript" src="{{ get_asset('js/meetup_widget.js') }}"></script>
     <script type="text/javascript">
         $(document).ready(function() {
-			// meetup group_ids in order: portland, san francisco, la, nyc, dc, atlanta, seattle, austin, brno/cz, san diego, toronto, vienna, stockholm
-		    var chapter_ids = '4808882,3604052,2288171,4576312,2292131,4507652,5411282,5947662,5160912,5089102,6488102,7538042,7660062,8160762';
-            addUpcomingMeetups(chapter_ids);
-        });//end doc.ready
+            // meetup group_ids in order: portland, san francisco, la, nyc, dc, atlanta, seattle,
+            // austin, brno/cz, san diego, toronto, vienna, stockholm, amsterdam, bangalore,
+            // berlin, boston, charleston, helsinki, india, montreal, salt lake city, seoul, taiwan,
+            // london, dublin, ann arbor, barcelona, san antonio
+            var meetupIds = '4808882,3604052,2288171,4576312,2292131,4507652,5411282,5947662,5160912,5089102,6488102,7538042,7660062,8160762,9301202,9206152,8623152,8401402,13995752,9042722,14872062,8161032,10708842,14748112,13106102,13320732,10841992,10496402,12994802,14129372';
+            PyladiesMeetupWidget.addUpcomingMeetups(meetupIds);
+        });
 	</script>
 	{% endblock %}
 	{% block style %}