Simple port of Class2Go's chat feature

Embed a chat widget (much like the calculator widget) into the
courseware. To use, you must point it at an ejabberd box,
configured as `JABBER_DOMAIN` in the settings.

common/lib/xmodule/xmodule/course_module.py

@@ -192,9 +192,8 @@ class CourseFields(object):
             }},
             scope=Scope.content)
     show_calculator = Boolean(help="Whether to show the calculator in this course", default=False, scope=Scope.settings)
-    display_name = String(
-        help="Display name for this module", default="Empty",
-        display_name="Display Name", scope=Scope.settings)
+    display_name = String(help="Display name for this module", default="Empty", display_name="Display Name", scope=Scope.settings)
+    show_chat = Boolean(help="Whether to show the chat widget in this course", default=False, scope=Scope.settings)
     tabs = List(help="List of tabs to enable in this course", scope=Scope.settings)
     end_of_course_survey_url = String(help="Url for the end-of-course survey", scope=Scope.settings)
     discussion_blackouts = List(help="List of pairs of start/end dates for discussion blackouts", scope=Scope.settings)

lms/djangoapps/courseware/views.py

@@ -40,7 +40,6 @@ log = logging.getLogger("mitx.courseware")
 
 template_imports = {'urllib': urllib}
 
-
 def user_groups(user):
     """
     TODO (vshnayder): This is not used. When we have a new plan for groups, adjust appropriately.
@@ -300,6 +299,15 @@ def index(request, course_id, chapter=None, section=None,
             'xqa_server': settings.MITX_FEATURES.get('USE_XQA_SERVER', 'http://xqa:server@content-qa.mitx.mit.edu/xqa')
             }
 
+        if course.show_chat:
+            context['chat'] = {
+                'domain': settings.JABBER_DOMAIN,
+                'room': "{ID}_class".format(ID=course.id.replace('/', '-')), # Jabber doesn't like /s
+                'username': "{USER}@{DOMAIN}".format(USER=user.username, DOMAIN=settings.JABBER_DOMAIN),
+                # TODO: clearly this needs to be something other than the username
+                'password': "{USER}@{DOMAIN}".format(USER=user.username, DOMAIN=settings.JABBER_DOMAIN),
+            }
+
         chapter_descriptor = course.get_child_by(lambda m: m.url_name == chapter)
         if chapter_descriptor is not None:
             save_child_position(course_module, chapter)

lms/static/candy_res/img/emoticons/README

+Simple Smileys is a set of 49 clean, free as in freedom, Public Domain smileys.
+For more packages or older versions, visit http://simplesmileys.org

lms/static/js/candy_libs/dateformat/dateFormat.js

+/*
+ * Date Format 1.2.3
+ * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
+ * MIT license
+ *
+ * Includes enhancements by Scott Trenda <scott.trenda.net>
+ * and Kris Kowal <cixar.com/~kris.kowal/>
+ *
+ * Accepts a date, a mask, or a date and a mask.
+ * Returns a formatted version of the given date.
+ * The date defaults to the current date/time.
+ * The mask defaults to dateFormat.masks.default.
+ *
+ * @link http://blog.stevenlevithan.com/archives/date-time-format
+ */
+
+var dateFormat = function () {
+	var	token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
+		timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
+		timezoneClip = /[^-+\dA-Z]/g,
+		pad = function (val, len) {
+			val = String(val);
+			len = len || 2;
+			while (val.length < len) val = "0" + val;
+			return val;
+		};
+
+	// Regexes and supporting functions are cached through closure
+	return function (date, mask, utc) {
+		var dF = dateFormat;
+
+		// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
+		if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
+			mask = date;
+			date = undefined;
+		}
+
+		// Passing date through Date applies Date.parse, if necessary
+		date = date ? new Date(date) : new Date;
+		if (isNaN(date)) throw SyntaxError("invalid date");
+
+		mask = String(dF.masks[mask] || mask || dF.masks["default"]);
+
+		// Allow setting the utc argument via the mask
+		if (mask.slice(0, 4) == "UTC:") {
+			mask = mask.slice(4);
+			utc = true;
+		}
+
+		var	_ = utc ? "getUTC" : "get",
+			d = date[_ + "Date"](),
+			D = date[_ + "Day"](),
+			m = date[_ + "Month"](),
+			y = date[_ + "FullYear"](),
+			H = date[_ + "Hours"](),
+			M = date[_ + "Minutes"](),
+			s = date[_ + "Seconds"](),
+			L = date[_ + "Milliseconds"](),
+			o = utc ? 0 : date.getTimezoneOffset(),
+			flags = {
+				d:    d,
+				dd:   pad(d),
+				ddd:  dF.i18n.dayNames[D],
+				dddd: dF.i18n.dayNames[D + 7],
+				m:    m + 1,
+				mm:   pad(m + 1),
+				mmm:  dF.i18n.monthNames[m],
+				mmmm: dF.i18n.monthNames[m + 12],
+				yy:   String(y).slice(2),
+				yyyy: y,
+				h:    H % 12 || 12,
+				hh:   pad(H % 12 || 12),
+				H:    H,
+				HH:   pad(H),
+				M:    M,
+				MM:   pad(M),
+				s:    s,
+				ss:   pad(s),
+				l:    pad(L, 3),
+				L:    pad(L > 99 ? Math.round(L / 10) : L),
+				t:    H < 12 ? "a"  : "p",
+				tt:   H < 12 ? "am" : "pm",
+				T:    H < 12 ? "A"  : "P",
+				TT:   H < 12 ? "AM" : "PM",
+				Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
+				o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
+				S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
+			};
+
+		return mask.replace(token, function ($0) {
+			return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
+		});
+	};
+}();
+
+// Some common format strings
+dateFormat.masks = {
+	"default":      "ddd mmm dd yyyy HH:MM:ss",
+	shortDate:      "m/d/yy",
+	mediumDate:     "mmm d, yyyy",
+	longDate:       "mmmm d, yyyy",
+	fullDate:       "dddd, mmmm d, yyyy",
+	shortTime:      "h:MM TT",
+	mediumTime:     "h:MM:ss TT",
+	longTime:       "h:MM:ss TT Z",
+	isoDate:        "yyyy-mm-dd",
+	isoTime:        "HH:MM:ss",
+	isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
+	isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
+};
+
+// Internationalization strings
+dateFormat.i18n = {
+	dayNames: [
+		"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
+		"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+	],
+	monthNames: [
+		"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+		"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
+	]
+};
+
+// For convenience...
+Date.prototype.format = function (mask, utc) {
+	return dateFormat(this, mask, utc);
+};
\ No newline at end of file

lms/static/js/candy_ui.js

+$(window).load(function() {
+    var isInIframe = (window.location != window.parent.location) ? true : false;
+
+    if (isInIframe) {
+        $('#chat-pane #chat-tabs').prepend('<div id="chat-expand-arrow"><em class="icon-chevron-right"></em></div>');
+    } else {
+        $('#candy').addClass('poppedOut').append('<a href="#" onclick="event.preventDefault();" title="Pop-In Chat Window" class="icon-signin" id="chatPopin"></a>');
+    }
+
+    var collapseMessageForm = function() {
+        $('#candy').animate({width: '230px'}, 'slow', function() {
+            $('#chat-expand-arrow em').toggleClass('icon-chevron-left').toggleClass('icon-chevron-right');
+            $('#chat-pane').toggleClass('collapsed-message-pane');
+        });
+        $('#chat-pane .roster-pane').animate({top: '0px'}, 'slow');
+        $('#chat-rooms .message-pane-wrapper, #chat-rooms .message-form-wrapper, form.message-form').fadeOut('slow');
+    }
+
+    var expandMessageForm = function() {
+        $('#chat-pane').toggleClass('collapsed-message-pane');
+        $('#candy').animate({width: '100%'}, 'slow', function() {
+            $('#chat-expand-arrow em').toggleClass('icon-chevron-left').toggleClass('icon-chevron-right');
+        });
+        $('#chat-pane .roster-pane').animate({top: '30px'}, 'slow');
+        $('#chat-rooms .message-pane-wrapper, #chat-rooms .message-form-wrapper, form.message-form').fadeIn('slow');
+    }
+
+    var activeTab;
+    $('#chat-expand-arrow').click(function() {
+        if ($('#chat-pane').hasClass('collapsed-message-pane')) {
+            activeTab.addClass('active');
+            expandMessageForm();
+        } else {
+            activeTab = $('#chat-tabs li.active');
+            $('#chat-tabs li').removeClass('active');
+            collapseMessageForm();
+        }
+    });
+
+    $('#chat-tabs').click(function(event) {
+        if ($(this).has(event.target).length && $('#chat-pane').hasClass('collapsed-message-pane')) {
+            expandMessageForm();
+        }
+    });
+
+    $('#chatPopin').click(function() {
+       window.close(); 
+    });
+});

lms/static/sass/course.scss.mako

@@ -37,6 +37,7 @@
 @import 'course/courseware/amplifier';
 @import 'course/layout/calculator';
 @import 'course/layout/timer';
+@import 'course/layout/chat';
 
 // course-specific courseware (all styles in these files should be gated by a
 // course-specific class). This should be replaced with a better way of

lms/static/sass/course/layout/_chat.scss

+/* Chat
+-------------------------------------------------- */
+#chat-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+}
+
+#chat-toggle {
+    position: absolute;
+    left: 0;
+    top: -45px;
+    height: 25px;
+    width: 170px;
+    padding: 10px 15px;
+    background: #333;
+    border-top-right-radius: 10px;
+
+    span {
+      color: #dcdcdc;
+      font-weight: bold;
+      font-size: 18px;
+    }
+    cursor: pointer;
+}
+
+#chat-toggle:hover {
+    text-decoration: none;
+}
+
+#chat-open {
+    display: inline;
+}
+
+#chat-close {
+    display: none;
+}
+
+#chat-toggle em {
+    position: absolute;
+    right: 20px;
+    top: 12px;
+    font-size: 28px !important;
+}
+
+#chat-block {
+    position: relative;
+    float: left;
+    width: 600px;
+    height: 0px;
+    bottom: 0;
+    right: 0;
+    margin: 0 !important;
+    border: none !important;
+    display: none;
+}

lms/templates/courseware/courseware.html

@@ -6,6 +6,13 @@
 <%block name="headextra">
   <%static:css group='course'/>
   <%include file="../discussion/_js_head_dependencies.html" />
+  % if course.show_chat:
+    <link rel="stylesheet" href="${static.url('css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css')}" />
+    ## It'd be better to have this in a place like lms/css/vendor/candy,
+    ## but the candy_res/ folder contains images and other junk, and it
+    ## all needs to stay together for the Candy.js plugin to work.
+    <link rel="stylesheet" href="${static.url('candy_res/candy_full.css')}" />
+  % endif
 </%block>
 
 <%block name="js_extra">
@@ -108,6 +115,45 @@
   </script>
 % endif
 
+% if course.show_chat:
+  <script type="text/javascript" src="${static.url('js/vendor/jquery.min.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/jquery-ui.min.js')}"></script>
+
+  ## These are being pulled from lms/static/js, and there's no vendor/
+  ## directory there (yet)
+  <script type="text/javascript" src="${static.url('js/candy_libs/libs.min.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/candy.min.js')}"></script>
+
+  <script type="text/javascript">
+    // initialize the Candy.js plugin
+    $(document).ready(function() {
+      Candy.init("http://${chat['domain']}:5280/http-bind/", {
+        core: { debug: true, autojoin: ["${chat['room']}@conference.${chat['domain']}"] },
+        view: { resources: "${static.url('candy_res/')}"}
+      });
+      Candy.Core.connect("${chat['username']}", "${chat['password']}");
+
+      // show/hide the chat widget
+      $('#chat-toggle').click(function() {
+        var toggle = $(this);
+        if (toggle.hasClass('closed')) {
+          $('#chat-block').show().animate({height: '400px'}, 'slow', function() {
+            $('#chat-open').hide();
+            $('#chat-close').show();
+          });
+        } else {
+          $('#chat-block').animate({height: '0px'}, 'slow', function() {
+            $('#chat-open').show();
+            $('#chat-close').hide();
+            $(this).hide(); // do this at the very end
+          });
+        }
+        toggle.toggleClass('closed');
+      });
+    });
+  </script>
+% endif
+
 </%block>
 
 % if timer_expiration_duration:
@@ -148,6 +194,18 @@
   </div>
 </section>
 
+% if course.show_chat:
+  <div id="chat-wrapper">
+    <div id="chat-toggle" class="closed">
+      <span id="chat-open">Open Chat <em class="icon-chevron-up"></em></span>
+      <span id="chat-close">Close Chat <em class="icon-chevron-down"></em></span>
+    </div>
+    <div id="chat-block">
+      ## The Candy.js plugin wants to render in an element with #candy
+      <div id="candy"></div>
+    </div>
+  </div>
+% endif
 
 % if course.show_calculator:
     <div class="calc-main">