changeset in labs/bespinclient: More work on 'social':
Eugene Lazutkin
details: http://hg.mozilla.org/labs/bespinclient?cmd=changeset;node=fa395c3fccd9
description:
More work on 'social':
* bugfixes
* moving utilities to util.js
* using templates instead of manual node generation
* refactoring
diffstat:
plugins/labs/collab/social.js | 344 +++++++------------------
plugins/labs/collab/templates/followers.htmlt | 10 +
plugins/labs/collab/templates/groups.htmlt | 10 +
plugins/labs/collab/templates/members.htmlt | 10 +
plugins/labs/collab/templates/shares.htmlt | 21 +
plugins/labs/collab/user.js | 40 +--
plugins/labs/collab/util.js | 73 +++++
7 files changed, 225 insertions(+), 283 deletions(-)
diffs (truncated from 721 to 300 lines):
diff --git a/plugins/labs/collab/social.js b/plugins/labs/collab/social.js
--- a/plugins/labs/collab/social.js
+++ b/plugins/labs/collab/social.js
@@ -40,6 +40,8 @@ var server = require('bespin_server').se
var Input = require('command_line:input').Input;
var social_user = require('collab:user');
+var util = require('collab:util');
+var templates = require('collab:templates');
/**
@@ -63,6 +65,24 @@ function toArgArray(args) {
}
};
+/**
+ * Helper to bind commands to click targets.
+ */
+function execOnClick(cmd) {
+ return function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ var node = evt.currentTarget;
+ var args = [];
+ for (var i = 0; i < 5; ++i) {
+ args.push(node.getAttribute("data-arg" + i));
+ }
+ if (args.some(function(item) { return item; })){
+ new Input(util.replace(cmd, args)).execute();
+ }
+ };
+}
+
// =============================================================================
/**
@@ -74,17 +94,10 @@ exports.followCommand = function(args, r
follow([], {
evalJSON: true,
onSuccess: function(followers) {
- if (!followers || followers.length === 0) {
- request.done('You are not following anyone');
- return;
- }
-
- var parent = exports.displayFollowers(followers);
- request.done(parent);
+ request.done(exports.displayFollowers(followers));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to retrieve followers: ' +
- xhr.responseText);
+ request.doneWithError('Failed to retrieve followers: ' + xhr.responseText);
}
});
}
@@ -92,17 +105,10 @@ exports.followCommand = function(args, r
follow(usernames, {
evalJSON: true,
onSuccess: function(followers) {
- if (!followers || followers.length === 0) {
- request.done('You are not following anyone');
- return;
- }
-
- var parent = exports.displayFollowers(followers);
- request.done(parent);
+ request.done(exports.displayFollowers(followers));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to add follower: ' +
- xhr.responseText);
+ request.doneWithError('Failed to add follower: ' + xhr.responseText);
}
});
}
@@ -121,40 +127,19 @@ function follow(usernames, opts) {
* "Following: ..." message as a command line response.
*/
exports.displayFollowers = function(followers, title) {
- var parent = document.createElement('div');
- var child = document.createElement('div');
- child.innerHTML = title || 'You are following these users:';
- parent.appendChild(child);
- var table = document.createElement('table');
- parent.appendChild(table);
- var tbody = document.createElement('tbody');
- table.appendChild(tbody);
- followers.forEach(function(follower) {
- var row = document.createElement('tr');
- tbody.appendChild(row);
- var cell = document.createElement('td');
- row.appendChild(cell);
- var img = document.createElement('img');
- img.className = 'social_user_avatar_' + follower;
- img.src = social_user.getAvatarImageUrl(follower, 16);
- img.width = '16';
- img.height = '16';
- cell.appendChild(img);
- cell = document.createElement('td');
- cell.innerHTML = follower;
- row.appendChild(cell);
- // TODO: Add the users status information in here
- cell = document.createElement('td');
- row.appendChild(cell);
- var a = document.createElement('a');
- a.innerHTML = '<small>(unfollow)</small>';
- // TODO: use better way to attach an event handler
- a.onclick = function () {
- new Input('unfollow ' + follower).execute();
- };
- cell.appendChild(a);
- });
- return parent;
+ if (!followers || !followers.length) {
+ return 'You are not following anyone.';
+ }
+ return templates.followers({
+ title: title || 'You are following these users:',
+ followers: followers.map(function(name){
+ return {
+ name: name,
+ url: social_user.getAvatarImageUrl(name, 16)
+ };
+ }),
+ onUnfollow: execOnClick('unfollow {0}')
+ });
};
// =============================================================================
@@ -171,17 +156,10 @@ exports.unfollowCommand = function(args,
unfollow(usernames, {
evalJSON: true,
onSuccess: function(followers) {
- if (!followers || followers.length === 0) {
- request.done('You are not following anyone');
- return;
- }
-
- var parent = exports.displayFollowers(followers);
- request.done(parent);
+ request.done(exports.displayFollowers(followers));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to remove follower: ' +
- xhr.responseText);
+ request.doneWithError('Failed to remove follower: ' + xhr.responseText);
}
});
}
@@ -203,18 +181,10 @@ exports.broadcastCommand = function(args
broadcast(args.message || '', {
evalJSON: true,
onSuccess: function(followers) {
- if (!followers || followers.length === 0) {
- request.done('You have no followers');
- return;
- }
-
- var parent = exports.displayFollowers(followers,
- 'Your message was sent to your followers:');
- request.done(parent);
+ request.done(exports.displayFollowers(followers, 'Your message was sent to your followers:'));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to broadcast to followers: ' +
- xhr.responseText);
+ request.doneWithError('Failed to broadcast to followers: ' + xhr.responseText);
}
});
};
@@ -236,18 +206,10 @@ exports.tellCommand = function(args, req
tell(args.username || '*****', args.message || '', {
evalJSON: true,
onSuccess: function(followers) {
- if (!followers || followers.length === 0) {
- request.done('You don\'t have a follower with such name.');
- return;
- }
-
- var parent = exports.displayFollowers(followers,
- 'Your message was sent to your follower:');
- request.done(parent);
+ request.done(exports.displayFollowers(followers, 'Your message was sent to your follower:'));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to broadcast to followers: ' +
- xhr.responseText);
+ request.doneWithError('Failed to tell to a follower: ' + xhr.responseText);
}
});
};
@@ -271,11 +233,10 @@ exports.groupListCommand = function(args
groupListAll({
evalJSON: true,
onSuccess: function(groups) {
- createGroupListDisplay(groups, args, request);
+ request.done(createGroupListDisplay(groups, args));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to retrieve groups: ' +
- xhr.responseText);
+ request.doneWithError('Failed to retrieve groups: ' + xhr.responseText);
}
});
} else {
@@ -283,11 +244,10 @@ exports.groupListCommand = function(args
groupList(args.group, {
evalJSON: true,
onSuccess: function(members) {
- createMemberListDisplay(members, args, request);
+ request.done(createMemberListDisplay(members, args));
},
onFailure: function(xhr) {
- request.doneWithError('Failed to retrieve group members: ' +
- xhr.responseText);
+ request.doneWithError('Failed to retrieve group members: ' + xhr.responseText);
}
});
}
@@ -296,103 +256,35 @@ exports.groupListCommand = function(args
/**
* Helper to create a tabular display of groups.
*/
-function createGroupListDisplay(groups, args, request) {
- if (!groups || groups.length === 0) {
- request.done('You have no groups');
- return;
+function createGroupListDisplay(groups, args) {
+ if (!groups || !groups.length) {
+ return 'You have no groups.';
}
-
- var parent = document.createElement('div');
- var div = document.createElement('div');
- div.innerHTML = 'You have the following groups:';
- parent.appendChild(div);
- var table = document.createElement('table');
- parent.appendChild(table);
- var tbody = document.createElement('tbody');
- table.appendChild(tbody);
- groups.forEach(function(group) {
- var row = document.createElement('tr');
- tbody.appendChild(row);
- var cell = document.createElement('td');
- row.appendChild(cell);
- var img = document.createElement('img');
- img.src = '/images/collab_icn_group.png';
- img.width = 16;
- img.height = 16;
- cell.appendChild(img);
- cell = document.createElement('td');
- cell.innerHTML = group;
- row.appendChild(cell);
- // TODO: Add the users status information in here
- cell = document.createElement('td');
- row.appendChild(cell);
- var a = document.createElement('a');
- a.innerHTML = '<small>(remove)</small>';
- // TODO: use better way to attach an event handler
- a.onclick = function () {
- new Input('group remove ' + group).execute();
- };
- cell.appendChild(a);
- var span = document.createElement('span');
- span.innerHTML = ' ';
- cell.appendChild(span);
- a = document.createElement('a');
- a.innerHTML = '<small>(list)</small>';
- // TODO: use better way to attach an event handler
- a.onclick = function () {
- new Input('group list ' + group).execute();
- };
- cell.appendChild(a);
+ return templates.groups({
+ title: 'You have the following groups:',
+ groups: groups,
+ onRemove: execOnClick('group remove {0}'),
+ onList: execOnClick('group list {0}')
});
-
- request.done(parent);
};
/**
* Helper to create a tabular member display.
*/
-function createMemberListDisplay(members, args, request) {
- if (!members || members.length === 0) {
- request.done(args.group + ' has no members.');
- return;
+function createMemberListDisplay(members, args) {
+ if (!members || !members.length) {
+ return util.replace('{group} has no members.', args);
}
-
- var parent = document.createElement('div');
- var div = document.createElement('div');
- div.innerHTML = 'Members of ' + args.group + ':';