changeset in labs/bespinclient: Added more elaborate version of ...
Eugene Lazutkin
details: http://hg.mozilla.org/labs/bespinclient?cmd=changeset;node=5bea35edcf68
description:
Added more elaborate version of collaborators list.
diffstat:
plugins/labs/collab/index.js | 15 ++-
plugins/labs/collab/resources/social.css | 12 ++
plugins/labs/collab/social.js | 8 +-
plugins/labs/collab/user.js | 149 +++++++++++++++++++++++++++++
plugins/labs/collab/view.js | 59 +++++++++++-
5 files changed, 238 insertions(+), 5 deletions(-)
diffs (truncated from 323 to 300 lines):
diff --git a/plugins/labs/collab/index.js b/plugins/labs/collab/index.js
--- a/plugins/labs/collab/index.js
+++ b/plugins/labs/collab/index.js
@@ -148,14 +148,25 @@ var ShareNode = SC.Object.extend({
var list = social.getPath('topLeftView.contentView');
var content = [];
// we can have many "dead" sessions, which leads to duplication of users.
- var seen = {};
+ var seen = {}, username = this.username;
userEntries.forEach(function (user) {
- if (!seen.hasOwnProperty(user.handle)) {
+ if (user.handle != username && !seen.hasOwnProperty(user.handle)) {
seen[user.handle] = true;
content.push(user.handle);
}
});
content.sort();
+ content.unshift(username); // we are #1!
+ var old = list.get('content');
+ if (old.length == content.length) {
+ var same = old.every(function (username, i) {
+ return username == content[i];
+ });
+ if (same) {
+ // bail out
+ return;
+ }
+ }
list.set('content', content);
}
},
diff --git a/plugins/labs/collab/resources/social.css b/plugins/labs/collab/resources/social.css
--- a/plugins/labs/collab/resources/social.css
+++ b/plugins/labs/collab/resources/social.css
@@ -60,3 +60,15 @@ div.social_msg_type_myself {
background-color: #444;
color: white;
}
+
+.social_user {
+ background: -moz-linear-gradient(left top -60deg, #444, #888);
+ background: -webkit-gradient(linear, left top, right bottom, from(#444), to(#888));
+}
+
+.social_user .social_user_name {
+ font-size: 14px;
+ font-weight: bold;
+ vertical-align: top;
+ margin-left: 0.5em;
+}
\ No newline at end of file
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
@@ -39,6 +39,8 @@
var server = require('bespin_server').server;
var cliController = require('command_line:controller').cliController;
+var social_user = require('collab:user');
+
/**
* Helper for when you have a command that needs to get a hold of it's params
@@ -133,7 +135,8 @@ exports.displayFollowers = function(foll
var cell = document.createElement('td');
row.appendChild(cell);
var img = document.createElement('img');
- img.src = '/images/collab_icn_user.png';
+ img.className = 'social_user_avatar_' + follower;
+ img.src = social_user.getAvatarImageUrl(follower, 16);
img.width = '16';
img.height = '16';
cell.appendChild(img);
@@ -369,7 +372,8 @@ function createMemberListDisplay (member
var cell = document.createElement('td');
row.appendChild(cell);
var img = document.createElement('img');
- img.src = '/images/collab_icn_user.png';
+ img.className = 'social_user_avatar_' + member;
+ img.src = social_user.getAvatarImageUrl(member, 16);
img.width = 16;
img.height = 16;
cell.appendChild(img);
diff --git a/plugins/labs/collab/user.js b/plugins/labs/collab/user.js
new file mode 100644
--- /dev/null
+++ b/plugins/labs/collab/user.js
@@ -0,0 +1,149 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Bespin.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla.
+ * Portions created by the Initial Developer are Copyright (C) 2009
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ * Bespin Team (bes...@mozilla.com)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+var SC = require('sproutcore/runtime').SC;
+var server = require('bespin_server').server;
+
+var userDataCache = {};
+
+/**
+ * Check if user data is available
+ */
+exports.getUserDataIfAvailable = function (username) {
+ return userDataCache[username];
+}
+
+/**
+ * Get an avatar image for a given user.
+ */
+exports.getAvatarImageUrl = function (username, size){
+ size = size || 80;
+ if (userDataCache.hasOwnProperty(username)) {
+ if (userDataCache[username]) {
+ return 'http://www.gravatar.com/avatar/' + userDataCache[username].email_md5 + '?s=' + size;
+ }
+ } else {
+ // fetch user's data
+ fetchUserData(username);
+ }
+ // return the default
+ return 'http://www.gravatar.com/avatar/default?s=' + size;
+}
+
+/**
+ * Get an ohloh link for a given user.
+ */
+exports.getOhlohLink = function (username){
+ if (userDataCache.hasOwnProperty(username)) {
+ if (userDataCache[username]) {
+ return 'https://www.ohloh.net/accounts/' + userDataCache[username].email_md5 + '?ref=Detailed';
+ }
+ } else {
+ // fetch user's data
+ fetchUserData(username);
+ }
+ // return the default
+ return 'javascript:alert("Information on this user is not available yet");return false'; // hack
+}
+
+/**
+ * Get an ohloh badge for a given user.
+ */
+exports.getOhlohBadgeUrl = function (username){
+ if (userDataCache.hasOwnProperty(username)) {
+ if (userDataCache[username]) {
+ return 'https://www.ohloh.net/accounts/' + userDataCache[username].email_md5 + '/widgets/account_detailed.gif';
+ }
+ } else {
+ // fetch user's data
+ fetchUserData(username);
+ }
+ // return the default
+ return '';
+}
+
+/**
+ * fetch user data from server
+ */
+function fetchUserData (username) {
+ userDataCache[username] = null; // prevent others from fetching
+ getUserData(username, {
+ evalJSON: true,
+ onSuccess: function(userdata) {
+ userDataCache[username] = userdata;
+ var gravatar = 'http://www.gravatar.com/avatar/' + userdata.email_md5;
+ var ohlohLink = 'https://www.ohloh.net/accounts/' + userdata.email_md5 + '?ref=Detailed';
+ var ohlohBadge = 'https://www.ohloh.net/accounts/' + userdata.email_md5 + '/widgets/account_detailed.gif';
+ SC.CoreQuery('.social_user_name_' + username).each(function () {
+ switch (this.tagName.toLowerCase()) {
+ case 'img':
+ this.src = gravatar + '?s=' + this.width;
+ var parent = this.parentNode;
+ if (parent && parent.tagName.toLowerCase() == 'a'){
+ parent.href = ohlohLink;
+ }
+ break;
+ case 'div':
+ SC.CoreQuery(this).find('img.social_user_avatar').each(function () {
+ this.src = gravatar + '?s=' + this.width;
+ var parent = this.parentNode;
+ if (parent && parent.tagName.toLowerCase() == 'a'){
+ parent.href = ohlohLink;
+ }
+ });
+ SC.CoreQuery(this).find('img.social_user_ohloh_badge').each(function () {
+ this.src = ohlohBadge;
+ var parent = this.parentNode;
+ if (parent && parent.tagName.toLowerCase() == 'a'){
+ parent.href = ohlohLink;
+ }
+ if (parent && parent.style.display == 'none'){
+ parent.style.display = '';
+ }
+ });
+ }
+ });
+ }
+ });
+}
+
+/**
+ * get user data from server
+ */
+function getUserData (username, opts) {
+ server.request('GET', '/register/userdata/' + username, null, opts);
+};
diff --git a/plugins/labs/collab/view.js b/plugins/labs/collab/view.js
--- a/plugins/labs/collab/view.js
+++ b/plugins/labs/collab/view.js
@@ -43,6 +43,9 @@ var env = require('canon:environment').g
var editorapp_m = require('editorapp');
var project_m = require('project');
+var social_user = require('collab:user');
+
+
var ChatLineView = SC.View.extend(SC.StaticLayout, {
content: null,
@@ -70,6 +73,57 @@ var ChatLineView = SC.View.extend(SC.Sta
}
});
+var AvatarLineView = SC.View.extend(SC.StaticLayout, {
+ content: null,
+ useStaticLayout: false,
+ classNames: ['social_user'],
+
+ render: function(ctx, firstTime) {
+ if (!firstTime) {
+ return;
+ }
+
+ var username = this.get('content');
+ var userdata = social_user.getUserDataIfAvailable(username);
+
+ ctx.begin().
+ addClass('social_user_name_' + username).
+ begin().
+ begin('img').
+ addClass('social_user_avatar').
+ attr({
+ width: 32,
+ height: 32,
+ src: social_user.getAvatarImageUrl(username, 64)
+ }).
+ end().
+ begin('span').
+ addClass('social_user_name').
+ text(username).
+ end().
+ end().
+ begin().
+ begin('a').
+ addStyle({
+ display: userdata ? 'inline' : 'none'
+ }).
+ attr({
+ href: social_user.getOhlohLink(username),
+ target: '_blank'
+ }).
+ begin('img').
+ addClass('social_user_ohloh_badge').
+ attr({
+ src: social_user.getOhlohBadgeUrl(username, 64)
+ }).
+ end().
+ end().
+ end().