You need to be logged in, then enable the Chatterbox and the Free Nodelet in your Nodelet Settings, and in your Free Nodelet Settings, paste the following, and you get a chatterbox that refreshes itself dynamically, with optional browser notifications! Sending messages also works without reloading the entire page. It now also refreshes the "Other Users" nodelet and the Chatterbox regularly.
Since it was a little quiet in the Monastery when I implemented this, it's currently not 100% tested yet, let me know if you have any issues. (Update: So far, so good...)
(If you've already got jQuery loaded from another nodelet hack, you don't need to put that <script> tag twice, of course.)
I've created a Gist to version-control this code. I'll consider this particular node a "living document", as in I'm not going to add an "Updated" tag every time I make a change - if you want the version history, see the Gist.
"use strict";
$(function () {
var CB_FETCHTIME_MS = 15 * 1000;
var GERNERAL_REFRESHTIME_MS = 60 * 1000;
// AJAX CB Refresh
var refresh = function () {
$.ajax({ url: '/', dataType: 'html',
// testing shows the table rendered here is the same as in
+ the nodelet
data: { node: 'showchatmessages', displaytype: 'raw', tick
+er: 'yes' } })
.done(function (data) {
var source = $('<div/>').html(data).find('table.cb_tab
+le, .cb_quiet');
$('#Chatterbox table.cb_table, #Chatterbox .cb_quiet')
+.replaceWith(source);
$('#Chatterbox table.cb_table + br, #Chatterbox .cb_qu
+iet + br').remove();
$('#Chatterbox .cb_quiet').append('<br/>');
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.warn("AJAX error: " + textStatus + " / " + jqX
+HR.status + " " + errorThrown);
});
};
// Refresh "Other Users" (followed by CB refresh!)
var refresh_all = function () {
$.ajax({ url: '/', dataType: 'html',
// testing shows the body rendered here is the same as in
+the nodelet
data: { node: 'showotherusers', displaytype: 'raw', ticker
+: 'yes' } })
.done(function (data) {
// sadly, the <body> tag is not preserved, so we need
+to do some funky parsing here
var inSection = false;
var source = $.grep( $('<div/>').html(data).contents()
+.toArray(), function (obj) {
if (inSection) {
if ( $(obj).is('.update-time') ) inSection = f
+alse;
return true;
}
else if ( $(obj).is('.other-users-text') )
{ inSection = true; return true; }
return false;
});
$('#Other_Users .nodelet_body').empty();
$('#Other_Users .nodelet_body').append(source);
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.warn("AJAX error: " + textStatus + " / " + jqX
+HR.status + " " + errorThrown);
})
.always(refresh);
};
// AJAX Message Fetching
var notify_cb = $('<input/>', { type: 'checkbox' });
var ajax_cb = $('<input/>', { type: 'checkbox', checked: !window["
+AJAXCB_DEFAULTOFF"] });
var fetch_timer;
var fetchit;
var start_fetch = function () {
if ( ajax_cb[0].checked )
fetch_timer = setTimeout(fetchit, CB_FETCHTIME_MS);
};
var lastid;
fetchit = function () {
if (fetch_timer) clearTimeout(fetch_timer);
fetch_timer = null;
if ( !ajax_cb[0].checked ) return;
var query = { node_id: '207304', xmlstyle: 'modern', ticker: '
+yes' };
if ( lastid ) query['fromid'] = lastid;
$.ajax({ url: '/', dataType: 'xml', data: query })
.done(function (data) {
var count = parseInt($("info", data).attr("count"));
if ( count>0 ) {
refresh();
if ( notify_cb[0].checked ) {
var authors = {};
$('message author', data).each(function () { a
+uthors[ $(this).text() ] = 1; });
authors = Object.keys(authors).sort().join(",
+");
var notification = new Notification('New PerlM
+onks Chatter',
{ body: count+" new messages by "+authors,
tag: "PerlMonksChatter", icon: "/favicon.i
+co", badge: "/favicon.ico" });
}
}
var li = $("info", data).attr("lastid");
if ( li ) lastid = li;
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.warn("AJAX error: " + textStatus + " / " + jqX
+HR.status + " " + errorThrown);
})
.always(start_fetch);
};
var all_refresh_timer;
if ( !window["AJAXCB_DEFAULTOFF"] ) {
start_fetch();
all_refresh_timer = setInterval(refresh_all, GERNERAL_REFRESHT
+IME_MS);
}
// AJAX Form Submission
var form = $('#Chatterbox form');
form.on('submit', function (evt) {
evt.preventDefault();
// use the frame from the FullPage Chat as it renders faster
var thedata = { op: 'message', node_id: '3193',
displaytype: 'raw', message: $('#talkbox').val() };
$(":input",form).prop("disabled", true);
$.ajax({ url: form.attr("action"), method: 'post', data: theda
+ta })
.done(function (data) {
$('#talkbox').val("");
// want to use fetchit() if possible here to update th
+e lastid
if ( ajax_cb[0].checked ) fetchit(); else refresh();
})
.fail(function ( jqXHR, textStatus, errorThrown ) {
alert("CB submission error: "+textStatus+" / "+jqXHR.s
+tatus+" "+errorThrown);
})
.always(function () {
$(":input",form).prop("disabled", false);
});
});
// Checkboxes
var cb_div = $('<div/>', { style: "font-size: 12px; display: inlin
+e-block;" });
cb_div.append( $('<label/>', { text: "AJAX Refresh" }).prepend(aja
+x_cb) );
form.after($("<br/>"), cb_div);
ajax_cb.change(function () {
if ( this.checked ) {
start_fetch();
all_refresh_timer = setInterval(refresh_all, GERNERAL_REFR
+ESHTIME_MS);
refresh_all();
}
else {
if (fetch_timer) clearTimeout(fetch_timer);
fetch_timer = null;
if (all_refresh_timer) clearInterval(all_refresh_timer);
all_refresh_timer = null;
}
});
if ( "Notification" in window ) {
cb_div.append( $('<label/>', { text: "Notifications" }).prepen
+d(notify_cb) );
notify_cb.change(function () {
if ( !this.checked ) return;
if ( Notification.permission == "default" ) {
notify_cb.attr("disabled", true);
Notification.requestPermission(function (result) {
notify_cb.removeAttr("disabled");
if ( result != "granted" ) notify_cb[0].checked =
+false;
});
}
else if ( Notification.permission != "granted" ) {
alert("You've denied this page the ability to send not
+ifications, please change this via your browser's settings.");
this.checked = false;
}
});
}
});
