Commit 3cd463f9 by Nate Hardison Committed by Joe Blaylock

Resetting Candy to stock CSS and JS

To beat the "booty call" bug, whereby starting a private chat makes
the recipient believe that they've been taken into a private room
(when in fact they're still in the group room), we're resetting all
of the Candy static assets to the stock resources.

Override user agent CSS default on message input

The default Candy CSS doesn't do a very good CSS reset, so in this
case, the user agent stylesheet put a margin in the message form,
pushing the input box up a bit. Set the margin to 0 so that things
look normal.
parent 17865dd4
/**
* candy_shop.js
* -------------
* This is where we can hook into the Candy.js chat widget to
* provide our own, custom UI functionality. See
* http://candy-chat.github.io/candy/#customization for more info.
*/
var CandyShop = (function(self) { return self; }(CandyShop || {}));
CandyShop.EdX = (function(self, Candy, $) {
self.init = function() {
// When a new chat room is added, update the corresponding
// tab's title text and CSS class
Candy.View.Event.Room.onAdd = function(roomPane) {
var roomJid = roomPane['roomJid'];
var roomType = roomPane['type'];
var roomTabClass;
if (roomType === 'groupchat') {
roomTabClass = 'icon-group';
roomTabCloseClass = 'hidden';
} else {
roomTabClass = 'icon-user';
roomTabCloseClass = '';
}
var roomTab = $('#chat-tabs li[data-roomjid="' + roomJid + '"]').find('.label');
roomTab.attr('title', roomTab.text()).html('<em class="' + roomTabClass + '"></em>');
}
// When a user joins or leaves the chat, update the roster
// in the sidebar accordingly
Candy.View.Event.Roster.onUpdate = function(vars) {
var roomJid = vars['roomJid'];
var userNick = vars['user']['data']['nick'];
var userJid = vars['user']['data']['jid'];
var userObject = $('#chat-rooms .room-pane[data-roomjid="' + roomJid + '"] .roster-pane .user[data-jid="' + userJid + '"]');
if ($(userObject).hasClass('me')) {
$(userObject).find('.label').html('<em class="icon-flag"></em> ' + userNick);
$('#chat-rooms .room-pane[data-roomjid="' + roomJid + '"] .roster-pane').prepend($(userObject));
}
}
};
return self;
}(CandyShop.EdX || {}, Candy, jQuery));
/*
* 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
$(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();
});
});
<%namespace name='static' file='/static_content.html'/>
<html>
<head>
<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')}" />
<link rel="stylesheet" href="${static.url('candy_res/default.css')}" />
## Load in jQuery libs from standard edX locations.
## Load in jQuery from standard edX location.
<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>
## Include the Candy.js libraries. Wooooo.
<script type="text/javascript" src="${static.url('js/vendor/candy_libs/libs.min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/candy.min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/candy_ui.js')}"></script>
## Include edX-specific Candy plugins
<script type="text/javascript" src="${static.url('js/candy_shop.js')}"></script>
</head>
<body>
## Candy.js renders itself in an element with #candy
......@@ -33,9 +26,6 @@
view: { resources: "${static.url('candy_res/')}"}
});
## Initialize edX-specific Candy plugins
//CandyShop.EdX.init();
Candy.Core.connect("${username}", "${password}");
});
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment