[IMP] im, im_livechat: big refactoring to unite the JavaScript used by those two modules under a common JavaScript module
bzr revid: nicolas.vanhoren@openerp.com-20130820151502-b2zd3jab5v0wxfvc
|
@ -1 +1,2 @@
|
|||
.*
|
||||
**/node_modules
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
jshint: {
|
||||
src: ['static/src/js/*.js'],
|
||||
options: {
|
||||
sub: true, //[] instead of .
|
||||
evil: true, //eval
|
||||
laxbreak: true, //unsafe line breaks
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
|
||||
grunt.registerTask('test', []);
|
||||
|
||||
grunt.registerTask('default', ['jshint']);
|
||||
|
||||
};
|
|
@ -18,7 +18,10 @@ chat in real time. It support several chats in parallel.
|
|||
'security/im_security.xml',
|
||||
],
|
||||
'depends' : ['base', 'web'],
|
||||
'js': ['static/src/js/*.js'],
|
||||
'js': [
|
||||
'static/src/js/im_common.js',
|
||||
'static/src/js/im.js',
|
||||
],
|
||||
'css': ['static/src/css/*.css'],
|
||||
'qweb': ['static/src/xml/*.xml'],
|
||||
'installable': True,
|
||||
|
|
|
@ -130,7 +130,7 @@ class LongPollingController(http.Controller):
|
|||
return "%s" % uuid.uuid1()
|
||||
|
||||
def assert_uuid(uuid):
|
||||
if not isinstance(uuid, (str, unicode, type(None))):
|
||||
if not isinstance(uuid, (str, unicode, type(None))) and uuid != False:
|
||||
raise Exception("%s is not a uuid" % uuid)
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"grunt": "*",
|
||||
"grunt-contrib-jshint": "*"
|
||||
}
|
||||
}
|
|
@ -105,160 +105,3 @@
|
|||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* conversations */
|
||||
|
||||
.openerp .oe_im_chatview {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
bottom: 6px;
|
||||
margin-right: 6px;
|
||||
background: rgba(60, 60, 60, 0.8);
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
width: 240px;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_disconnected {
|
||||
display:none;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
background: #E8EBEF;
|
||||
padding: 5px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
line-height: 14px;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_im_chatview.oe_im_chatview_disconnected_status .oe_im_chatview_disconnected {
|
||||
display: block;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_header {
|
||||
padding: 3px 6px 2px;
|
||||
background: #DEDEDE;
|
||||
background: -moz-linear-gradient(#FCFCFC, #DEDEDE);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#DEDEDE));
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-bottom: 1px solid #AEB9BD;
|
||||
cursor: pointer;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
font-size: 18px;
|
||||
line-height: 16px;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
text-shadow: 0 1px 0 white;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_content {
|
||||
overflow: auto;
|
||||
height: 287px;
|
||||
}
|
||||
.openerp .oe_im_chatview.oe_im_chatview_disconnected_status .oe_im_chatview_content {
|
||||
height: 249px;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_footer {
|
||||
position: relative;
|
||||
padding: 3px;
|
||||
border-top: 1px solid #AEB9BD;
|
||||
background: #DEDEDE;
|
||||
background: -moz-linear-gradient(#FCFCFC, #DEDEDE);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#DEDEDE));
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_input {
|
||||
width: 222px;
|
||||
font-family: Lato, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid #AEB9BD;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
|
||||
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_bubble {
|
||||
background: white;
|
||||
position: relative;
|
||||
padding: 3px;
|
||||
margin: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_clip {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 4px;
|
||||
-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.25);
|
||||
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_avatar {
|
||||
float: left;
|
||||
width: 26px;
|
||||
height: auto;
|
||||
clip: rect(0, 26px, 26px, 0);
|
||||
max-width: 100%;
|
||||
width: auto 9;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_time {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
margin: 3px;
|
||||
text-align: right;
|
||||
line-height: 13px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
width: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_from {
|
||||
margin: 0 0 2px 0;
|
||||
line-height: 14px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
width: 140px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #3A87AD;
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_bubble_list {
|
||||
}
|
||||
.openerp .oe_im_chatview .oe_im_chatview_bubble_item {
|
||||
margin: 0 0 2px 30px;
|
||||
line-height: 14px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.openerp .oe_im_chatview_online {
|
||||
display: none;
|
||||
margin-top: -4px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
.oe_im_chatview {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
bottom: 42px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 6px;
|
||||
background: rgba(60, 60, 60, 0.8);
|
||||
-moz-border-radius: 3px;
|
|
@ -1,17 +1,25 @@
|
|||
|
||||
openerp.im = function(instance) {
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var instance = openerp;
|
||||
|
||||
openerp.im = {};
|
||||
|
||||
var USERS_LIMIT = 20;
|
||||
var ERROR_DELAY = 5000;
|
||||
|
||||
var _t = instance.web._t,
|
||||
_lt = instance.web._lt;
|
||||
var _t = instance.web._t;
|
||||
var QWeb = instance.web.qweb;
|
||||
|
||||
instance.web.UserMenu.include({
|
||||
do_update: function(){
|
||||
var self = this;
|
||||
this.update_promise.then(function() {
|
||||
im_common.notification = function(message) {
|
||||
instance.client.do_warn(message);
|
||||
};
|
||||
im_common.connection = openerp.session;
|
||||
|
||||
var im = new instance.im.InstantMessaging(self);
|
||||
im.appendTo(instance.client.$el);
|
||||
var button = new instance.im.ImTopButton(this);
|
||||
|
@ -45,7 +53,7 @@ openerp.im = function(instance) {
|
|||
this.set("right_offset", 0);
|
||||
this.set("current_search", "");
|
||||
this.users = [];
|
||||
this.c_manager = new instance.im.ConversationManager(this);
|
||||
this.c_manager = new im_common.ConversationManager(this);
|
||||
this.on("change:right_offset", this.c_manager, _.bind(function() {
|
||||
this.c_manager.set("right_offset", this.get("right_offset"));
|
||||
}, this));
|
||||
|
@ -148,323 +156,4 @@ openerp.im = function(instance) {
|
|||
},
|
||||
});
|
||||
|
||||
instance.im.ImUser = instance.web.Class.extend(instance.web.PropertiesMixin, {
|
||||
init: function(parent, user_rec) {
|
||||
instance.web.PropertiesMixin.init.call(this, parent);
|
||||
user_rec.image_url = instance.session.url("/im/static/src/img/avatar/avatar.jpeg");
|
||||
if (user_rec.user)
|
||||
user_rec.image_url = instance.session.url('/web/binary/image', {model:'res.users', field: 'image_small', id: user_rec.user[0]});
|
||||
this.set(user_rec);
|
||||
this.set("watcher_count", 0);
|
||||
this.on("change:watcher_count", this, function() {
|
||||
if (this.get("watcher_count") === 0)
|
||||
this.destroy();
|
||||
});
|
||||
},
|
||||
destroy: function() {
|
||||
this.trigger("destroyed");
|
||||
instance.web.PropertiesMixin.destroy.call(this);
|
||||
},
|
||||
add_watcher: function() {
|
||||
this.set("watcher_count", this.get("watcher_count") + 1);
|
||||
},
|
||||
remove_watcher: function() {
|
||||
this.set("watcher_count", this.get("watcher_count") - 1);
|
||||
},
|
||||
});
|
||||
|
||||
instance.im.ConversationManager = instance.web.Controller.extend({
|
||||
init: function(parent) {
|
||||
this._super(parent);
|
||||
this.set("right_offset", 0);
|
||||
this.conversations = [];
|
||||
this.users = {};
|
||||
this.on("change:right_offset", this, this.calc_positions);
|
||||
this.set("window_focus", true);
|
||||
this.set("waiting_messages", 0);
|
||||
this.focus_hdl = _.bind(function() {
|
||||
this.set("window_focus", true);
|
||||
}, this);
|
||||
$(window).bind("focus", this.focus_hdl);
|
||||
this.blur_hdl = _.bind(function() {
|
||||
this.set("window_focus", false);
|
||||
}, this);
|
||||
$(window).bind("blur", this.blur_hdl);
|
||||
this.on("change:window_focus", this, this.window_focus_change);
|
||||
this.window_focus_change();
|
||||
this.on("change:waiting_messages", this, this.messages_change);
|
||||
this.messages_change();
|
||||
this.create_ting();
|
||||
this.activated = false;
|
||||
this.users_cache = {};
|
||||
this.last = null;
|
||||
this.unload_event_handler = _.bind(this.unload, this);
|
||||
},
|
||||
start_polling: function() {
|
||||
var self = this;
|
||||
return new instance.web.Model("im.user").call("get_by_user_id", [instance.session.uid]).then(function(my_id) {
|
||||
self.my_id = my_id["id"];
|
||||
return self.ensure_users([self.my_id]).then(function() {
|
||||
var me = self.users_cache[self.my_id];
|
||||
delete self.users_cache[self.my_id];
|
||||
self.me = me;
|
||||
self.rpc("/longpolling/im/activated", {}, {shadow: true}).then(function(activated) {
|
||||
if (activated) {
|
||||
self.activated = true;
|
||||
$(window).on("unload", self.unload_event_handler);
|
||||
self.poll();
|
||||
}
|
||||
}, function(a, e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
unload: function() {
|
||||
return new instance.web.Model("im.user").call("im_disconnect", [], {context: new instance.web.CompoundContext()});
|
||||
},
|
||||
ensure_users: function(user_ids) {
|
||||
var no_cache = {};
|
||||
_.each(user_ids, function(el) {
|
||||
if (! this.users_cache[el])
|
||||
no_cache[el] = el;
|
||||
}, this);
|
||||
var self = this;
|
||||
if (_.size(no_cache) === 0)
|
||||
return $.when();
|
||||
else
|
||||
return new instance.web.Model("im.user").call("read", [_.values(no_cache), ["name", "user", "uuid", "im_status"]],
|
||||
{context: new instance.web.CompoundContext()}).then(function(users) {
|
||||
self.add_to_user_cache(users);
|
||||
});
|
||||
},
|
||||
add_to_user_cache: function(user_recs) {
|
||||
_.each(user_recs, function(user_rec) {
|
||||
if (! this.users_cache[user_rec.id]) {
|
||||
var user = new instance.im.ImUser(this, user_rec);
|
||||
this.users_cache[user_rec.id] = user;
|
||||
user.on("destroyed", this, function() {
|
||||
delete this.users_cache[user_rec.id];
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
get_user: function(user_id) {
|
||||
return this.users_cache[user_id];
|
||||
},
|
||||
poll: function() {
|
||||
var self = this;
|
||||
var user_ids = _.map(this.users_cache, function(el) {
|
||||
return el.get("id");
|
||||
});
|
||||
this.rpc("/longpolling/im/poll", {
|
||||
last: this.last,
|
||||
users_watch: user_ids,
|
||||
context: instance.web.pyeval.eval('context', {}),
|
||||
}, {shadow: true}).then(function(result) {
|
||||
_.each(result.users_status, function(el) {
|
||||
if (self.get_user(el.id))
|
||||
self.get_user(el.id).set(el);
|
||||
});
|
||||
self.last = result.last;
|
||||
var user_ids = _.pluck(_.pluck(result.res, "from_id"), 0);
|
||||
self.ensure_users(user_ids).then(function() {
|
||||
_.each(result.res, function(mes) {
|
||||
var user = self.get_user(mes.from_id[0]);
|
||||
self.received_message(mes, user);
|
||||
});
|
||||
self.poll();
|
||||
});
|
||||
}, function(unused, e) {
|
||||
e.preventDefault();
|
||||
setTimeout(_.bind(self.poll, self), ERROR_DELAY);
|
||||
});
|
||||
},
|
||||
get_activated: function() {
|
||||
return this.activated;
|
||||
},
|
||||
create_ting: function() {
|
||||
if (typeof(Audio) === "undefined") {
|
||||
this.ting = {play: function() {}};
|
||||
return;
|
||||
}
|
||||
var kitten = jQuery.param !== undefined && jQuery.deparam(jQuery.param.querystring()).kitten !== undefined;
|
||||
this.ting = new Audio(instance.webclient.session.origin + "/im/static/src/audio/" + (kitten ? "purr" : "Ting") +
|
||||
(new Audio().canPlayType("audio/ogg; codecs=vorbis") ? ".ogg" : ".mp3"));
|
||||
},
|
||||
window_focus_change: function() {
|
||||
if (this.get("window_focus")) {
|
||||
this.set("waiting_messages", 0);
|
||||
}
|
||||
},
|
||||
messages_change: function() {
|
||||
if (! instance.webclient.set_title_part)
|
||||
return;
|
||||
instance.webclient.set_title_part("aa_im_messages", this.get("waiting_messages") === 0 ? undefined :
|
||||
_.str.sprintf(_t("%d Messages"), this.get("waiting_messages")));
|
||||
},
|
||||
activate_user: function(user, focus) {
|
||||
var conv = this.users[user.get('id')];
|
||||
if (! conv) {
|
||||
conv = new instance.im.Conversation(this, user, this.me);
|
||||
conv.appendTo(instance.client.$el);
|
||||
conv.on("destroyed", this, function() {
|
||||
this.conversations = _.without(this.conversations, conv);
|
||||
delete this.users[conv.user.get('id')];
|
||||
this.calc_positions();
|
||||
});
|
||||
this.conversations.push(conv);
|
||||
this.users[user.get('id')] = conv;
|
||||
this.calc_positions();
|
||||
}
|
||||
if (focus)
|
||||
conv.focus();
|
||||
return conv;
|
||||
},
|
||||
received_message: function(message, user) {
|
||||
if (! this.get("window_focus")) {
|
||||
this.set("waiting_messages", this.get("waiting_messages") + 1);
|
||||
this.ting.play();
|
||||
this.create_ting();
|
||||
}
|
||||
var conv = this.activate_user(user);
|
||||
conv.received_message(message);
|
||||
},
|
||||
calc_positions: function() {
|
||||
var current = this.get("right_offset");
|
||||
_.each(_.range(this.conversations.length), function(i) {
|
||||
this.conversations[i].set("right_position", current);
|
||||
current += this.conversations[i].$el.outerWidth(true);
|
||||
}, this);
|
||||
},
|
||||
destroy: function() {
|
||||
$(window).off("unload", this.unload_event_handler);
|
||||
$(window).unbind("blur", this.blur_hdl);
|
||||
$(window).unbind("focus", this.focus_hdl);
|
||||
this._super();
|
||||
},
|
||||
});
|
||||
|
||||
instance.im.Conversation = instance.web.Widget.extend({
|
||||
"template": "Conversation",
|
||||
events: {
|
||||
"keydown input": "send_message",
|
||||
"click .oe_im_chatview_close": "destroy",
|
||||
"click .oe_im_chatview_header": "show_hide",
|
||||
},
|
||||
init: function(parent, user, me) {
|
||||
this._super(parent);
|
||||
this.me = me;
|
||||
this.user = user;
|
||||
this.user.add_watcher();
|
||||
this.set("right_position", 0);
|
||||
this.shown = true;
|
||||
this.set("pending", 0);
|
||||
},
|
||||
start: function() {
|
||||
var change_status = function() {
|
||||
this.$el.toggleClass("oe_im_chatview_disconnected_status", this.user.get("im_status") === false);
|
||||
this.$(".oe_im_chatview_online").toggle(this.user.get("im_status") === true);
|
||||
this._go_bottom();
|
||||
};
|
||||
this.user.on("change:im_status", this, change_status);
|
||||
change_status.call(this);
|
||||
|
||||
this.on("change:right_position", this, this.calc_pos);
|
||||
this.full_height = this.$el.height();
|
||||
this.calc_pos();
|
||||
this.on("change:pending", this, _.bind(function() {
|
||||
if (this.get("pending") === 0) {
|
||||
this.$(".oe_im_chatview_nbr_messages").text("");
|
||||
} else {
|
||||
this.$(".oe_im_chatview_nbr_messages").text("(" + this.get("pending") + ")");
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
show_hide: function() {
|
||||
if (this.shown) {
|
||||
this.$el.animate({
|
||||
height: this.$(".oe_im_chatview_header").outerHeight(),
|
||||
});
|
||||
} else {
|
||||
this.$el.animate({
|
||||
height: this.full_height,
|
||||
});
|
||||
}
|
||||
this.shown = ! this.shown;
|
||||
if (this.shown) {
|
||||
this.set("pending", 0);
|
||||
}
|
||||
},
|
||||
calc_pos: function() {
|
||||
this.$el.css("right", this.get("right_position"));
|
||||
},
|
||||
received_message: function(message) {
|
||||
if (this.shown) {
|
||||
this.set("pending", 0);
|
||||
} else {
|
||||
this.set("pending", this.get("pending") + 1);
|
||||
}
|
||||
this._add_bubble(this.user, message.message, message.date);
|
||||
},
|
||||
send_message: function(e) {
|
||||
if(e && e.which !== 13) {
|
||||
return;
|
||||
}
|
||||
var mes = this.$("input").val();
|
||||
if (! mes.trim()) {
|
||||
return;
|
||||
}
|
||||
this.$("input").val("");
|
||||
var send_it = _.bind(function() {
|
||||
var model = new instance.web.Model("im.message");
|
||||
return model.call("post", [mes, this.user.get('id')],
|
||||
{context: new instance.web.CompoundContext()});
|
||||
}, this);
|
||||
var tries = 0;
|
||||
send_it().then(_.bind(function() {
|
||||
this._add_bubble(this.me, mes, instance.web.datetime_to_str(new Date()));
|
||||
}, this), function(error, e) {
|
||||
e.preventDefault();
|
||||
tries += 1;
|
||||
if (tries < 3)
|
||||
return send_it();
|
||||
});
|
||||
},
|
||||
_add_bubble: function(user, item, date) {
|
||||
var items = [item];
|
||||
if (user === this.last_user) {
|
||||
this.last_bubble.remove();
|
||||
items = this.last_items.concat(items);
|
||||
}
|
||||
this.last_user = user;
|
||||
this.last_items = items;
|
||||
date = instance.web.str_to_datetime(date);
|
||||
var now = new Date();
|
||||
var diff = now - date;
|
||||
if (diff > (1000 * 60 * 60 * 24)) {
|
||||
date = $.timeago(date);
|
||||
} else {
|
||||
date = date.toString(Date.CultureInfo.formatPatterns.shortTime);
|
||||
}
|
||||
|
||||
this.last_bubble = $(QWeb.render("Conversation.bubble", {"items": items, "user": user, "time": date}));
|
||||
$(this.$(".oe_im_chatview_content").children()[0]).append(this.last_bubble);
|
||||
this._go_bottom();
|
||||
},
|
||||
_go_bottom: function() {
|
||||
this.$(".oe_im_chatview_content").scrollTop($(this.$(".oe_im_chatview_content").children()[0]).height());
|
||||
},
|
||||
focus: function() {
|
||||
this.$(".oe_im_chatview_input").focus();
|
||||
if (! this.shown)
|
||||
this.show_hide();
|
||||
},
|
||||
destroy: function() {
|
||||
this.user.remove_watcher();
|
||||
this.trigger("destroyed");
|
||||
return this._super();
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,408 @@
|
|||
|
||||
/*
|
||||
This file must compile in EcmaScript 3 and work in IE7.
|
||||
|
||||
Prerequisites to use this module:
|
||||
- load the im_common.xml qweb template into openerp.qweb
|
||||
- implement all the stuff defined later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
function declare($, _, openerp) {
|
||||
/* jshint es3: true */
|
||||
"use strict";
|
||||
|
||||
var im_common = {};
|
||||
|
||||
/*
|
||||
All of this must be defined to use this module
|
||||
*/
|
||||
_.extend(im_common, {
|
||||
notification: function(message) {
|
||||
throw new Error("Not implemented");
|
||||
},
|
||||
connection: null
|
||||
});
|
||||
|
||||
var _t = openerp._t;
|
||||
|
||||
var ERROR_DELAY = 5000;
|
||||
|
||||
im_common.ImUser = openerp.Class.extend(openerp.PropertiesMixin, {
|
||||
init: function(parent, user_rec) {
|
||||
openerp.PropertiesMixin.init.call(this, parent);
|
||||
user_rec.image_url = im_common.connection.url("/im/static/src/img/avatar/avatar.jpeg");
|
||||
|
||||
// TODO : check it works correctly
|
||||
if (user_rec.user)
|
||||
user_rec.image_url = im_common.connection.url('/web/binary/image', {model:'res.users', field: 'image_small', id: user_rec.user[0]});
|
||||
/*if (user_rec.image)
|
||||
user_rec.image_url = "data:image/png;base64," + user_rec.image;*/
|
||||
|
||||
this.set(user_rec);
|
||||
this.set("watcher_count", 0);
|
||||
this.on("change:watcher_count", this, function() {
|
||||
if (this.get("watcher_count") === 0)
|
||||
this.destroy();
|
||||
});
|
||||
},
|
||||
destroy: function() {
|
||||
this.trigger("destroyed");
|
||||
openerp.PropertiesMixin.destroy.call(this);
|
||||
},
|
||||
add_watcher: function() {
|
||||
this.set("watcher_count", this.get("watcher_count") + 1);
|
||||
},
|
||||
remove_watcher: function() {
|
||||
this.set("watcher_count", this.get("watcher_count") - 1);
|
||||
}
|
||||
});
|
||||
|
||||
im_common.ConversationManager = openerp.Class.extend(openerp.PropertiesMixin, {
|
||||
init: function(parent, options) {
|
||||
openerp.PropertiesMixin.init.call(this, parent);
|
||||
this.options = _.clone(options) || {};
|
||||
_.defaults(this.options, {
|
||||
inputPlaceholder: _t("Say something..."),
|
||||
defaultMessage: null,
|
||||
userName: _t("Anonymous"),
|
||||
anonymous_mode: false
|
||||
});
|
||||
this.set("right_offset", 0);
|
||||
this.set("bottom_offset", 0);
|
||||
this.conversations = [];
|
||||
this.users = {};
|
||||
this.on("change:right_offset", this, this.calc_positions);
|
||||
this.on("change:bottom_offset", this, this.calc_positions);
|
||||
this.set("window_focus", true);
|
||||
this.set("waiting_messages", 0);
|
||||
this.focus_hdl = _.bind(function() {
|
||||
this.set("window_focus", true);
|
||||
}, this);
|
||||
$(window).bind("focus", this.focus_hdl);
|
||||
this.blur_hdl = _.bind(function() {
|
||||
this.set("window_focus", false);
|
||||
}, this);
|
||||
$(window).bind("blur", this.blur_hdl);
|
||||
this.on("change:window_focus", this, this.window_focus_change);
|
||||
this.window_focus_change();
|
||||
this.on("change:waiting_messages", this, this.messages_change);
|
||||
this.messages_change();
|
||||
this.create_ting();
|
||||
this.activated = false;
|
||||
this.users_cache = {};
|
||||
this.last = null;
|
||||
this.unload_event_handler = _.bind(this.unload, this);
|
||||
},
|
||||
start_polling: function() {
|
||||
var self = this;
|
||||
|
||||
var auth_def = null;
|
||||
var user_id = null;
|
||||
|
||||
if (this.options.anonymous_mode) {
|
||||
var uuid = localStorage["oe_livesupport_uuid"];
|
||||
var def = $.when(uuid);
|
||||
|
||||
if (! uuid) {
|
||||
def = im_common.connection.rpc("/longpolling/im/gen_uuid", {});
|
||||
}
|
||||
var anonymous_user_id = null;
|
||||
auth_def = def.then(function(uuid) {
|
||||
localStorage["oe_livesupport_uuid"] = uuid;
|
||||
return im_common.connection.model("im.user").call("get_by_user_id", [uuid]);
|
||||
}).then(function(my_id) {
|
||||
user_id = my_id["id"];
|
||||
return im_common.connection.model("im.user").call("assign_name", [uuid, self.options.userName]);
|
||||
});
|
||||
} else {
|
||||
auth_def = im_common.connection.model("im.user").call("get_by_user_id",
|
||||
[im_common.connection.uid]).then(function(my_id) {
|
||||
user_id = my_id["id"];
|
||||
});
|
||||
}
|
||||
|
||||
return auth_def.then(function() {
|
||||
self.my_id = user_id;
|
||||
return self.ensure_users([self.my_id]);
|
||||
}).then(function() {
|
||||
var me = self.users_cache[self.my_id];
|
||||
delete self.users_cache[self.my_id];
|
||||
self.me = me;
|
||||
me.set("name", _t("You"));
|
||||
return im_common.connection.rpc("/longpolling/im/activated", {}, {shadow: true});
|
||||
}).then(function(activated) {
|
||||
if (activated) {
|
||||
self.activated = true;
|
||||
$(window).on("unload", self.unload_event_handler);
|
||||
self.poll();
|
||||
} else {
|
||||
return $.Deferred().reject();
|
||||
}
|
||||
}, function(a, e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
},
|
||||
unload: function() {
|
||||
return im_common.connection.model("im.user").call("im_disconnect", [], {uuid: this.me.get("uuid"), context: {}});
|
||||
},
|
||||
ensure_users: function(user_ids) {
|
||||
var no_cache = {};
|
||||
_.each(user_ids, function(el) {
|
||||
if (! this.users_cache[el])
|
||||
no_cache[el] = el;
|
||||
}, this);
|
||||
var self = this;
|
||||
if (_.size(no_cache) === 0)
|
||||
return $.when();
|
||||
else
|
||||
return im_common.connection.model("im.user").call("read", [_.values(no_cache), []]).then(function(users) {
|
||||
self.add_to_user_cache(users);
|
||||
});
|
||||
},
|
||||
add_to_user_cache: function(user_recs) {
|
||||
_.each(user_recs, function(user_rec) {
|
||||
if (! this.users_cache[user_rec.id]) {
|
||||
var user = new im_common.ImUser(this, user_rec);
|
||||
this.users_cache[user_rec.id] = user;
|
||||
user.on("destroyed", this, function() {
|
||||
delete this.users_cache[user_rec.id];
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
get_user: function(user_id) {
|
||||
return this.users_cache[user_id];
|
||||
},
|
||||
poll: function() {
|
||||
var self = this;
|
||||
var user_ids = _.map(this.users_cache, function(el) {
|
||||
return el.get("id");
|
||||
});
|
||||
im_common.connection.rpc("/longpolling/im/poll", {
|
||||
last: this.last,
|
||||
users_watch: user_ids,
|
||||
uuid: self.me.get("uuid")
|
||||
}, {shadow: true}).then(function(result) {
|
||||
_.each(result.users_status, function(el) {
|
||||
if (self.get_user(el.id))
|
||||
self.get_user(el.id).set(el);
|
||||
});
|
||||
self.last = result.last;
|
||||
var user_ids = _.pluck(_.pluck(result.res, "from_id"), 0);
|
||||
self.ensure_users(user_ids).then(function() {
|
||||
_.each(result.res, function(mes) {
|
||||
var user = self.get_user(mes.from_id[0]);
|
||||
self.received_message(mes, user);
|
||||
});
|
||||
self.poll();
|
||||
});
|
||||
}, function(unused, e) {
|
||||
e.preventDefault();
|
||||
setTimeout(_.bind(self.poll, self), ERROR_DELAY);
|
||||
});
|
||||
},
|
||||
get_activated: function() {
|
||||
return this.activated;
|
||||
},
|
||||
create_ting: function() {
|
||||
if (typeof(Audio) === "undefined") {
|
||||
this.ting = {play: function() {}};
|
||||
return;
|
||||
}
|
||||
var kitten = jQuery.deparam !== undefined && jQuery.deparam(jQuery.param.querystring()).kitten !== undefined;
|
||||
this.ting = new Audio(im_common.connection.url(
|
||||
"/im/static/src/audio/" +
|
||||
(kitten ? "purr" : "Ting") +
|
||||
(new Audio().canPlayType("audio/ogg; codecs=vorbis") ? ".ogg": ".mp3")
|
||||
));
|
||||
},
|
||||
window_focus_change: function() {
|
||||
if (this.get("window_focus")) {
|
||||
this.set("waiting_messages", 0);
|
||||
}
|
||||
},
|
||||
messages_change: function() {
|
||||
if (! openerp.webclient || !openerp.webclient.set_title_part)
|
||||
return;
|
||||
openerp.webclient.set_title_part("im_messages", this.get("waiting_messages") === 0 ? undefined :
|
||||
_.str.sprintf(_t("%d Messages"), this.get("waiting_messages")));
|
||||
},
|
||||
activate_user: function(user, focus) {
|
||||
var conv = this.users[user.get('id')];
|
||||
if (! conv) {
|
||||
conv = new im_common.Conversation(this, user, this.me, this.options);
|
||||
conv.appendTo($("body"));
|
||||
conv.on("destroyed", this, function() {
|
||||
this.conversations = _.without(this.conversations, conv);
|
||||
delete this.users[conv.user.get('id')];
|
||||
this.calc_positions();
|
||||
});
|
||||
this.conversations.push(conv);
|
||||
this.users[user.get('id')] = conv;
|
||||
this.calc_positions();
|
||||
}
|
||||
if (focus)
|
||||
conv.focus();
|
||||
return conv;
|
||||
},
|
||||
received_message: function(message, user) {
|
||||
if (! this.get("window_focus")) {
|
||||
this.set("waiting_messages", this.get("waiting_messages") + 1);
|
||||
this.ting.play();
|
||||
this.create_ting();
|
||||
}
|
||||
var conv = this.activate_user(user);
|
||||
conv.received_message(message);
|
||||
},
|
||||
calc_positions: function() {
|
||||
var current = this.get("right_offset");
|
||||
_.each(_.range(this.conversations.length), function(i) {
|
||||
this.conversations[i].set("bottom_position", this.get("bottom_offset"));
|
||||
this.conversations[i].set("right_position", current);
|
||||
current += this.conversations[i].$().outerWidth(true);
|
||||
}, this);
|
||||
},
|
||||
destroy: function() {
|
||||
$(window).off("unload", this.unload_event_handler);
|
||||
$(window).unbind("blur", this.blur_hdl);
|
||||
$(window).unbind("focus", this.focus_hdl);
|
||||
openerp.PropertiesMixin.destroy.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
im_common.Conversation = openerp.Widget.extend({
|
||||
className: "openerp_style oe_im_chatview",
|
||||
events: {
|
||||
"keydown input": "send_message",
|
||||
"click .oe_im_chatview_close": "destroy",
|
||||
"click .oe_im_chatview_header": "show_hide"
|
||||
},
|
||||
init: function(parent, user, me, options) {
|
||||
this._super(parent);
|
||||
this.options = options;
|
||||
this.me = me;
|
||||
this.user = user;
|
||||
this.user.add_watcher();
|
||||
this.set("right_position", 0);
|
||||
this.set("bottom_position", 0);
|
||||
this.shown = true;
|
||||
this.set("pending", 0);
|
||||
this.inputPlaceholder = this.options.defaultInputPlaceholder;
|
||||
},
|
||||
start: function() {
|
||||
this.$().append(openerp.qweb.render("im_common.conversation", {widget: this, to_url: _.bind(im_common.connection.url, im_common.connection)}));
|
||||
var change_status = function() {
|
||||
this.$().toggleClass("oe_im_chatview_disconnected_status", this.user.get("im_status") === false);
|
||||
this.$(".oe_im_chatview_online").toggle(this.user.get("im_status") === true);
|
||||
this._go_bottom();
|
||||
};
|
||||
this.user.on("change:im_status", this, change_status);
|
||||
change_status.call(this);
|
||||
|
||||
this.on("change:right_position", this, this.calc_pos);
|
||||
this.on("change:bottom_position", this, this.calc_pos);
|
||||
this.full_height = this.$().height();
|
||||
this.calc_pos();
|
||||
this.on("change:pending", this, _.bind(function() {
|
||||
if (this.get("pending") === 0) {
|
||||
this.$(".oe_im_chatview_nbr_messages").text("");
|
||||
} else {
|
||||
this.$(".oe_im_chatview_nbr_messages").text("(" + this.get("pending") + ")");
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
show_hide: function() {
|
||||
if (this.shown) {
|
||||
this.$().animate({
|
||||
height: this.$(".oe_im_chatview_header").outerHeight()
|
||||
});
|
||||
} else {
|
||||
this.$().animate({
|
||||
height: this.full_height
|
||||
});
|
||||
}
|
||||
this.shown = ! this.shown;
|
||||
if (this.shown) {
|
||||
this.set("pending", 0);
|
||||
}
|
||||
},
|
||||
calc_pos: function() {
|
||||
this.$().css("right", this.get("right_position"));
|
||||
this.$().css("bottom", this.get("bottom_position"));
|
||||
},
|
||||
received_message: function(message) {
|
||||
if (this.shown) {
|
||||
this.set("pending", 0);
|
||||
} else {
|
||||
this.set("pending", this.get("pending") + 1);
|
||||
}
|
||||
this._add_bubble(this.user, message.message, openerp.str_to_datetime(message.date));
|
||||
},
|
||||
send_message: function(e) {
|
||||
if(e && e.which !== 13) {
|
||||
return;
|
||||
}
|
||||
var mes = this.$("input").val();
|
||||
if (! mes.trim()) {
|
||||
return;
|
||||
}
|
||||
this.$("input").val("");
|
||||
var send_it = _.bind(function() {
|
||||
var model = im_common.connection.model("im.message");
|
||||
return model.call("post", [mes, this.user.get('id')], {uuid: this.me.get("uuid"), context: {}});
|
||||
}, this);
|
||||
var tries = 0;
|
||||
send_it().then(_.bind(function() {
|
||||
this._add_bubble(this.me, mes, new Date());
|
||||
}, this), function(error, e) {
|
||||
e.preventDefault();
|
||||
tries += 1;
|
||||
if (tries < 3)
|
||||
return send_it();
|
||||
});
|
||||
},
|
||||
_add_bubble: function(user, item, date) {
|
||||
var items = [item];
|
||||
if (user === this.last_user) {
|
||||
this.last_bubble.remove();
|
||||
items = this.last_items.concat(items);
|
||||
}
|
||||
this.last_user = user;
|
||||
this.last_items = items;
|
||||
var zpad = function(str, size) {
|
||||
str = "" + str;
|
||||
return new Array(size - str.length + 1).join('0') + str;
|
||||
};
|
||||
date = "" + zpad(date.getHours(), 2) + ":" + zpad(date.getMinutes(), 2);
|
||||
|
||||
this.last_bubble = $(openerp.qweb.render("im_common.conversation_bubble", {"items": items, "user": user, "time": date}));
|
||||
$(this.$(".oe_im_chatview_content").children()[0]).append(this.last_bubble);
|
||||
this._go_bottom();
|
||||
},
|
||||
_go_bottom: function() {
|
||||
this.$(".oe_im_chatview_content").scrollTop($(this.$(".oe_im_chatview_content").children()[0]).height());
|
||||
},
|
||||
focus: function() {
|
||||
this.$(".oe_im_chatview_input").focus();
|
||||
if (! this.shown)
|
||||
this.show_hide();
|
||||
},
|
||||
destroy: function() {
|
||||
this.user.remove_watcher();
|
||||
this.trigger("destroyed");
|
||||
return this._super();
|
||||
}
|
||||
});
|
||||
|
||||
return im_common;
|
||||
}
|
||||
|
||||
if (typeof(define) !== "undefined") {
|
||||
define(["jquery", "underscore", "openerp"], declare);
|
||||
} else {
|
||||
window.im_common = declare($, _, openerp);
|
||||
}
|
||||
|
||||
})();
|
|
@ -27,37 +27,4 @@
|
|||
<img t-att-src="_s +'/im/static/src/img/green.png'" class="oe_im_user_online"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Conversation">
|
||||
<div class="oe_im_chatview">
|
||||
<div class="oe_im_chatview_header">
|
||||
<img t-att-src="_s +'/im/static/src/img/green.png'" class="oe_im_chatview_online"/>
|
||||
<t t-esc="widget.user.get('name') || 'Anonymous'"/>
|
||||
<scan class="oe_im_chatview_nbr_messages" />
|
||||
<button class="oe_im_chatview_close">×</button>
|
||||
</div>
|
||||
<div class="oe_im_chatview_disconnected">
|
||||
<t t-esc='_.str.sprintf(_t("%s is offline. He/She will receive your messages on his/her next connection."), widget.user.get("name") || "Anonymous")'/>
|
||||
</div>
|
||||
<div class="oe_im_chatview_content">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="oe_im_chatview_footer">
|
||||
<input class="oe_im_chatview_input" t-att-placeholder="_t('Say something...')" />
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Conversation.bubble">
|
||||
<div class="oe_im_chatview_bubble">
|
||||
<div class="oe_im_chatview_clip">
|
||||
<img class="oe_im_chatview_avatar" t-att-src='user.get("image_url")'/>
|
||||
</div>
|
||||
<div class="oe_im_chatview_from"><t t-esc="user.get('name') || 'Anonymous'"/></div>
|
||||
<div class="oe_im_chatview_bubble_list">
|
||||
<t t-foreach="items" t-as="item">
|
||||
<div class="oe_im_chatview_bubble_item"><t t-esc="item"/></div>
|
||||
</t>
|
||||
</div>
|
||||
<div class="oe_im_chatview_time"><t t-esc="time"/></div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
|
@ -1,10 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<templates>
|
||||
<t t-name="conversation">
|
||||
<t t-name="im_common.conversation">
|
||||
<div class="oe_im_chatview_header">
|
||||
<img t-att-src="toUrl('im_livechat/static/ext/static/img/green.png')" class="oe_im_chatview_online"/>
|
||||
<t t-esc="widget.user.get('name') || _t('You')"/>
|
||||
<img t-att-src="to_url('/im/static/src/img/green.png')" class="oe_im_chatview_online"/>
|
||||
<t t-esc="widget.user.get('name')"/>
|
||||
<scan class="oe_im_chatview_nbr_messages" />
|
||||
<button class="oe_im_chatview_close">×</button>
|
||||
</div>
|
||||
<div class="oe_im_chatview_disconnected">
|
||||
|
@ -18,12 +19,12 @@
|
|||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="conversation_bubble">
|
||||
<t t-name="im_common.conversation_bubble">
|
||||
<div class="oe_im_chatview_bubble">
|
||||
<div class="oe_im_chatview_clip">
|
||||
<img class="oe_im_chatview_avatar" t-att-src="user.get('image_url')"/>
|
||||
</div>
|
||||
<div class="oe_im_chatview_from"><t t-esc="user.get('name') || _t('You')"/></div>
|
||||
<div class="oe_im_chatview_from"><t t-esc="user.get('name')"/></div>
|
||||
<div class="oe_im_chatview_bubble_list">
|
||||
<t t-foreach="items" t-as="item">
|
||||
<div class="oe_im_chatview_bubble_item"><t t-esc="item"/></div>
|
||||
|
@ -32,8 +33,4 @@
|
|||
<div class="oe_im_chatview_time"><t t-esc="time"/></div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="chatButton">
|
||||
<t t-esc="widget.text"/>
|
||||
</t>
|
||||
</templates>
|
|
@ -13,6 +13,7 @@ require.config({
|
|||
openerp: "web/static/src/js/openerpframework",
|
||||
"jquery.achtung": "im_livechat/static/ext/static/lib/jquery-achtung/src/ui.achtung",
|
||||
livesupport: "im_livechat/static/ext/static/js/livesupport",
|
||||
im_common: "im/static/src/js/im_common"
|
||||
},
|
||||
shim: {
|
||||
underscore: {
|
||||
|
|
Before Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 74 B |
Before Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 830 B |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 100 KiB |
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<templates>
|
||||
<t t-name="chatButton">
|
||||
<t t-esc="widget.text"/>
|
||||
</t>
|
||||
</templates>
|
|
@ -3,8 +3,8 @@
|
|||
This file must compile in EcmaScript 3 and work in IE7.
|
||||
*/
|
||||
|
||||
define(["openerp", "underscore", "require", "jquery",
|
||||
"jquery.achtung"], function(openerp, _, require, $) {
|
||||
define(["openerp", "im_common", "underscore", "require", "jquery",
|
||||
"jquery.achtung"], function(openerp, im_common, _, require, $) {
|
||||
/* jshint es3: true */
|
||||
"use strict";
|
||||
|
||||
|
@ -12,44 +12,37 @@ define(["openerp", "underscore", "require", "jquery",
|
|||
|
||||
var livesupport = {};
|
||||
|
||||
_.extend(openerp.qweb.default_dict, {
|
||||
'toUrl': _.bind(require.toUrl, require)
|
||||
});
|
||||
|
||||
var connection;
|
||||
|
||||
var defaultInputPlaceholder;
|
||||
var userName;
|
||||
|
||||
livesupport.main = function(server_url, db, login, password, channel, options) {
|
||||
var defs = [];
|
||||
options = options || {};
|
||||
_.defaults(options, {
|
||||
buttonText: _t("Chat with one of our collaborators"),
|
||||
inputPlaceholder: _t("How may I help you?"),
|
||||
defaultMessage: null,
|
||||
auto: false,
|
||||
userName: _t("Anonymous")
|
||||
userName: _t("Anonymous"),
|
||||
anonymous_mode: true
|
||||
});
|
||||
defaultInputPlaceholder = options.inputPlaceholder;
|
||||
userName = options.userName;
|
||||
// TODO : load QwebTemplates
|
||||
defs.push(add_css("im_livechat/static/ext/static/css/livesupport.css"));
|
||||
defs.push(add_css("im_livechat/static/ext/static/lib/jquery-achtung/src/ui.achtung.css"));
|
||||
|
||||
return $.when.apply($, defs).then(function() {
|
||||
console.log("starting live support customer app");
|
||||
connection = new openerp.Session(null, server_url, { override_session: true });
|
||||
return connection.session_authenticate(db, login, password);
|
||||
}).then(function() {
|
||||
return connection.rpc('/web/proxy/load', {path: '/im_livechat/static/ext/static/js/livesupport_templates.xml'}).then(function(xml) {
|
||||
im_common.notification = notification;
|
||||
|
||||
console.log("starting live support customer app");
|
||||
im_common.connection = new openerp.Session(null, server_url, { override_session: true });
|
||||
return im_common.connection.session_authenticate(db, login, password).then(function() {
|
||||
var defs = [];
|
||||
defs.push(add_css("/im/static/src/css/im_common.css"));
|
||||
defs.push(add_css("/im_livechat/static/ext/static/lib/jquery-achtung/src/ui.achtung.css"));
|
||||
defs.push(im_common.connection.rpc('/web/proxy/load', {path: '/im_livechat/static/ext/static/js/livechat.xml'}).then(function(xml) {
|
||||
openerp.qweb.add_template(xml);
|
||||
});
|
||||
}));
|
||||
defs.push(im_common.connection.rpc('/web/proxy/load', {path: '/im/static/src/xml/im_common.xml'}).then(function(xml) {
|
||||
openerp.qweb.add_template(xml);
|
||||
}));
|
||||
return $.when.apply($, defs);
|
||||
}).then(function() {
|
||||
return connection.rpc("/im_livechat/available", {db: db, channel: channel}).then(function(activated) {
|
||||
return im_common.connection.rpc("/im_livechat/available", {db: db, channel: channel}).then(function(activated) {
|
||||
if (! activated & ! options.auto)
|
||||
return;
|
||||
var button = new livesupport.ChatButton(null, channel, options);
|
||||
var button = new im_common.ChatButton(null, channel, options);
|
||||
button.appendTo($("body"));
|
||||
if (options.auto)
|
||||
button.click();
|
||||
|
@ -59,7 +52,7 @@ define(["openerp", "underscore", "require", "jquery",
|
|||
|
||||
var add_css = function(relative_file_name) {
|
||||
var css_def = $.Deferred();
|
||||
$('<link rel="stylesheet" href="' + require.toUrl(relative_file_name) + '"></link>')
|
||||
$('<link rel="stylesheet" href="' + im_common.connection.url(relative_file_name) + '"></link>')
|
||||
.appendTo($("head")).ready(function() {
|
||||
css_def.resolve();
|
||||
});
|
||||
|
@ -70,9 +63,7 @@ define(["openerp", "underscore", "require", "jquery",
|
|||
$.achtung({message: message, timeout: 0, showEffects: false, hideEffects: false});
|
||||
};
|
||||
|
||||
var ERROR_DELAY = 5000;
|
||||
|
||||
livesupport.ChatButton = openerp.Widget.extend({
|
||||
im_common.ChatButton = openerp.Widget.extend({
|
||||
className: "openerp_style oe_chat_button",
|
||||
events: {
|
||||
"click": "click"
|
||||
|
@ -88,7 +79,8 @@ define(["openerp", "underscore", "require", "jquery",
|
|||
},
|
||||
click: function() {
|
||||
if (! this.manager) {
|
||||
this.manager = new livesupport.ConversationManager(null);
|
||||
this.manager = new im_common.ConversationManager(this, this.options);
|
||||
this.manager.set("bottom_offset", 37);
|
||||
this.activated_def = this.manager.start_polling();
|
||||
}
|
||||
var def = $.Deferred();
|
||||
|
@ -101,16 +93,16 @@ define(["openerp", "underscore", "require", "jquery",
|
|||
def.reject();
|
||||
}, 5000);
|
||||
def.then(_.bind(this.chat, this), function() {
|
||||
notification(_t("It seems the connection to the server is encountering problems, please try again later."));
|
||||
im_common.notification(_t("It seems the connection to the server is encountering problems, please try again later."));
|
||||
});
|
||||
},
|
||||
chat: function() {
|
||||
var self = this;
|
||||
if (this.manager.conversations.length > 0)
|
||||
return;
|
||||
connection.model("im_livechat.channel").call("get_available_user", [this.channel]).then(function(user_id) {
|
||||
im_common.connection.model("im_livechat.channel").call("get_available_user", [this.channel]).then(function(user_id) {
|
||||
if (! user_id) {
|
||||
notification(_t("None of our collaborators seems to be available, please try again later."));
|
||||
im_common.notification(_t("None of our collaborators seems to be available, please try again later."));
|
||||
return;
|
||||
}
|
||||
self.manager.ensure_users([user_id]).then(function() {
|
||||
|
@ -124,337 +116,5 @@ define(["openerp", "underscore", "require", "jquery",
|
|||
}
|
||||
});
|
||||
|
||||
livesupport.ImUser = openerp.Class.extend(openerp.PropertiesMixin, {
|
||||
init: function(parent, user_rec) {
|
||||
openerp.PropertiesMixin.init.call(this, parent);
|
||||
user_rec.image_url = require.toUrl("im_livechat/static/ext/static/img/avatar/avatar.jpeg");
|
||||
if (user_rec.image)
|
||||
user_rec.image_url = "data:image/png;base64," + user_rec.image;
|
||||
this.set(user_rec);
|
||||
this.set("watcher_count", 0);
|
||||
this.on("change:watcher_count", this, function() {
|
||||
if (this.get("watcher_count") === 0)
|
||||
this.destroy();
|
||||
});
|
||||
},
|
||||
destroy: function() {
|
||||
this.trigger("destroyed");
|
||||
openerp.PropertiesMixin.destroy.call(this);
|
||||
},
|
||||
add_watcher: function() {
|
||||
this.set("watcher_count", this.get("watcher_count") + 1);
|
||||
},
|
||||
remove_watcher: function() {
|
||||
this.set("watcher_count", this.get("watcher_count") - 1);
|
||||
}
|
||||
});
|
||||
|
||||
livesupport.ConversationManager = openerp.Class.extend(openerp.PropertiesMixin, {
|
||||
init: function(parent) {
|
||||
openerp.PropertiesMixin.init.call(this, parent);
|
||||
this.set("right_offset", 0);
|
||||
this.conversations = [];
|
||||
this.users = {};
|
||||
this.on("change:right_offset", this, this.calc_positions);
|
||||
this.set("window_focus", true);
|
||||
this.set("waiting_messages", 0);
|
||||
this.focus_hdl = _.bind(function() {
|
||||
this.set("window_focus", true);
|
||||
}, this);
|
||||
$(window).bind("focus", this.focus_hdl);
|
||||
this.blur_hdl = _.bind(function() {
|
||||
this.set("window_focus", false);
|
||||
}, this);
|
||||
$(window).bind("blur", this.blur_hdl);
|
||||
this.on("change:window_focus", this, this.window_focus_change);
|
||||
this.window_focus_change();
|
||||
this.on("change:waiting_messages", this, this.messages_change);
|
||||
this.messages_change();
|
||||
this.create_ting();
|
||||
this.activated = false;
|
||||
this.users_cache = {};
|
||||
this.last = null;
|
||||
this.unload_event_handler = _.bind(this.unload, this);
|
||||
},
|
||||
start_polling: function() {
|
||||
var self = this;
|
||||
|
||||
var uuid = localStorage["oe_livesupport_uuid"];
|
||||
var def = $.when(uuid);
|
||||
|
||||
if (! uuid) {
|
||||
def = connection.rpc("/longpolling/im/gen_uuid", {});
|
||||
}
|
||||
return def.then(function(uuid) {
|
||||
localStorage["oe_livesupport_uuid"] = uuid;
|
||||
return connection.model("im.user").call("get_by_user_id", [uuid]);
|
||||
}).then(function(my_id) {
|
||||
self.my_id = my_id["id"];
|
||||
return connection.model("im.user").call("assign_name", [uuid, userName]);
|
||||
}).then(function() {
|
||||
return self.ensure_users([self.my_id]);
|
||||
}).then(function() {
|
||||
var me = self.users_cache[self.my_id];
|
||||
delete self.users_cache[self.my_id];
|
||||
self.me = me;
|
||||
me.set("name", "You");
|
||||
return connection.rpc("/longpolling/im/activated", {});
|
||||
}).then(function(activated) {
|
||||
if (activated) {
|
||||
self.activated = true;
|
||||
$(window).on("unload", self.unload_event_handler);
|
||||
self.poll();
|
||||
} else {
|
||||
return $.Deferred().reject();
|
||||
}
|
||||
});
|
||||
},
|
||||
unload: function() {
|
||||
connection.model("im.user").call("im_disconnect", [], {uuid: this.me.get("uuid"), context: {}});
|
||||
},
|
||||
ensure_users: function(user_ids) {
|
||||
var no_cache = {};
|
||||
_.each(user_ids, function(el) {
|
||||
if (! this.users_cache[el])
|
||||
no_cache[el] = el;
|
||||
}, this);
|
||||
var self = this;
|
||||
if (_.size(no_cache) === 0)
|
||||
return $.when();
|
||||
else
|
||||
return connection.model("im.user").call("read", [_.values(no_cache), []]).then(function(users) {
|
||||
self.add_to_user_cache(users);
|
||||
});
|
||||
},
|
||||
add_to_user_cache: function(user_recs) {
|
||||
_.each(user_recs, function(user_rec) {
|
||||
if (! this.users_cache[user_rec.id]) {
|
||||
var user = new livesupport.ImUser(this, user_rec);
|
||||
this.users_cache[user_rec.id] = user;
|
||||
user.on("destroyed", this, function() {
|
||||
delete this.users_cache[user_rec.id];
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
get_user: function(user_id) {
|
||||
return this.users_cache[user_id];
|
||||
},
|
||||
poll: function() {
|
||||
console.debug("live support beggin polling");
|
||||
var self = this;
|
||||
var user_ids = _.map(this.users_cache, function(el) {
|
||||
return el.get("id");
|
||||
});
|
||||
connection.rpc("/longpolling/im/poll", {
|
||||
last: this.last,
|
||||
users_watch: user_ids,
|
||||
db: connection.database,
|
||||
uid: connection.userId,
|
||||
password: connection.password,
|
||||
uuid: self.me.get("uuid")
|
||||
}).then(function(result) {
|
||||
_.each(result.users_status, function(el) {
|
||||
if (self.get_user(el.id))
|
||||
self.get_user(el.id).set(el);
|
||||
});
|
||||
self.last = result.last;
|
||||
var user_ids = _.pluck(_.pluck(result.res, "from_id"), 0);
|
||||
self.ensure_users(user_ids).then(function() {
|
||||
_.each(result.res, function(mes) {
|
||||
var user = self.get_user(mes.from_id[0]);
|
||||
self.received_message(mes, user);
|
||||
});
|
||||
self.poll();
|
||||
});
|
||||
}, function() {
|
||||
setTimeout(_.bind(self.poll, self), ERROR_DELAY);
|
||||
});
|
||||
},
|
||||
get_activated: function() {
|
||||
return this.activated;
|
||||
},
|
||||
create_ting: function() {
|
||||
if (typeof(Audio) === "undefined") {
|
||||
this.ting = {play: function() {}};
|
||||
return;
|
||||
}
|
||||
this.ting = new Audio(new Audio().canPlayType("audio/ogg; codecs=vorbis") ?
|
||||
require.toUrl("im_livechat/static/ext/static/audio/Ting.ogg") :
|
||||
require.toUrl("im_livechat/static/ext/static/audio/Ting.mp3")
|
||||
);
|
||||
},
|
||||
window_focus_change: function() {
|
||||
if (this.get("window_focus")) {
|
||||
this.set("waiting_messages", 0);
|
||||
}
|
||||
},
|
||||
messages_change: function() {
|
||||
//if (! instance.webclient.set_title_part)
|
||||
// return;
|
||||
//instance.webclient.set_title_part("im_messages", this.get("waiting_messages") === 0 ? undefined :
|
||||
// _.str.sprintf(_t("%d Messages"), this.get("waiting_messages")));
|
||||
},
|
||||
activate_user: function(user, focus) {
|
||||
var conv = this.users[user.get('id')];
|
||||
if (! conv) {
|
||||
conv = new livesupport.Conversation(this, user, this.me);
|
||||
conv.appendTo($("body"));
|
||||
conv.on("destroyed", this, function() {
|
||||
this.conversations = _.without(this.conversations, conv);
|
||||
delete this.users[conv.user.get('id')];
|
||||
this.calc_positions();
|
||||
});
|
||||
this.conversations.push(conv);
|
||||
this.users[user.get('id')] = conv;
|
||||
this.calc_positions();
|
||||
}
|
||||
if (focus)
|
||||
conv.focus();
|
||||
return conv;
|
||||
},
|
||||
received_message: function(message, user) {
|
||||
if (! this.get("window_focus")) {
|
||||
this.set("waiting_messages", this.get("waiting_messages") + 1);
|
||||
this.ting.play();
|
||||
this.create_ting();
|
||||
}
|
||||
var conv = this.activate_user(user);
|
||||
conv.received_message(message);
|
||||
},
|
||||
calc_positions: function() {
|
||||
var current = this.get("right_offset");
|
||||
_.each(_.range(this.conversations.length), function(i) {
|
||||
this.conversations[i].set("right_position", current);
|
||||
current += this.conversations[i].$().outerWidth(true);
|
||||
}, this);
|
||||
},
|
||||
destroy: function() {
|
||||
$(window).off("unload", this.unload_event_handler);
|
||||
$(window).unbind("blur", this.blur_hdl);
|
||||
$(window).unbind("focus", this.focus_hdl);
|
||||
openerp.PropertiesMixin.destroy.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
livesupport.Conversation = openerp.Widget.extend({
|
||||
className: "openerp_style oe_im_chatview",
|
||||
events: {
|
||||
"keydown input": "send_message",
|
||||
"click .oe_im_chatview_close": "destroy",
|
||||
"click .oe_im_chatview_header": "show_hide"
|
||||
},
|
||||
init: function(parent, user, me) {
|
||||
this._super(parent);
|
||||
this.me = me;
|
||||
this.user = user;
|
||||
this.user.add_watcher();
|
||||
this.set("right_position", 0);
|
||||
this.shown = true;
|
||||
this.set("pending", 0);
|
||||
this.inputPlaceholder = defaultInputPlaceholder;
|
||||
},
|
||||
start: function() {
|
||||
this.$().append(openerp.qweb.render("conversation", {widget: this}));
|
||||
var change_status = function() {
|
||||
this.$().toggleClass("oe_im_chatview_disconnected_status", this.user.get("im_status") === false);
|
||||
this.$(".oe_im_chatview_online").toggle(this.user.get("im_status") === true);
|
||||
this._go_bottom();
|
||||
};
|
||||
this.user.on("change:im_status", this, change_status);
|
||||
change_status.call(this);
|
||||
|
||||
this.on("change:right_position", this, this.calc_pos);
|
||||
this.full_height = this.$().height();
|
||||
this.calc_pos();
|
||||
this.on("change:pending", this, _.bind(function() {
|
||||
if (this.get("pending") === 0) {
|
||||
this.$(".oe_im_chatview_nbr_messages").text("");
|
||||
} else {
|
||||
this.$(".oe_im_chatview_nbr_messages").text("(" + this.get("pending") + ")");
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
show_hide: function() {
|
||||
if (this.shown) {
|
||||
this.$().animate({
|
||||
height: this.$(".oe_im_chatview_header").outerHeight()
|
||||
});
|
||||
} else {
|
||||
this.$().animate({
|
||||
height: this.full_height
|
||||
});
|
||||
}
|
||||
this.shown = ! this.shown;
|
||||
if (this.shown) {
|
||||
this.set("pending", 0);
|
||||
}
|
||||
},
|
||||
calc_pos: function() {
|
||||
this.$().css("right", this.get("right_position"));
|
||||
},
|
||||
received_message: function(message) {
|
||||
if (this.shown) {
|
||||
this.set("pending", 0);
|
||||
} else {
|
||||
this.set("pending", this.get("pending") + 1);
|
||||
}
|
||||
this._add_bubble(this.user, message.message, openerp.str_to_datetime(message.date));
|
||||
},
|
||||
send_message: function(e) {
|
||||
if(e && e.which !== 13) {
|
||||
return;
|
||||
}
|
||||
var mes = this.$("input").val();
|
||||
if (! mes.trim()) {
|
||||
return;
|
||||
}
|
||||
this.$("input").val("");
|
||||
var send_it = _.bind(function() {
|
||||
var model = connection.model("im.message");
|
||||
return model.call("post", [mes, this.user.get('id')], {uuid: this.me.get("uuid"), context: {}});
|
||||
}, this);
|
||||
var tries = 0;
|
||||
send_it().then(_.bind(function() {
|
||||
this._add_bubble(this.me, mes, new Date());
|
||||
}, this), function(error, e) {
|
||||
tries += 1;
|
||||
if (tries < 3)
|
||||
return send_it();
|
||||
});
|
||||
},
|
||||
_add_bubble: function(user, item, date) {
|
||||
var items = [item];
|
||||
if (user === this.last_user) {
|
||||
this.last_bubble.remove();
|
||||
items = this.last_items.concat(items);
|
||||
}
|
||||
this.last_user = user;
|
||||
this.last_items = items;
|
||||
var zpad = function(str, size) {
|
||||
str = "" + str;
|
||||
return new Array(size - str.length + 1).join('0') + str;
|
||||
};
|
||||
date = "" + zpad(date.getHours(), 2) + ":" + zpad(date.getMinutes(), 2);
|
||||
|
||||
this.last_bubble = $(openerp.qweb.render("conversation_bubble", {"items": items, "user": user, "time": date}));
|
||||
$(this.$(".oe_im_chatview_content").children()[0]).append(this.last_bubble);
|
||||
this._go_bottom();
|
||||
},
|
||||
_go_bottom: function() {
|
||||
this.$(".oe_im_chatview_content").scrollTop($(this.$(".oe_im_chatview_content").children()[0]).height());
|
||||
},
|
||||
focus: function() {
|
||||
this.$(".oe_im_chatview_input").focus();
|
||||
},
|
||||
destroy: function() {
|
||||
this.user.remove_watcher();
|
||||
this.trigger("destroyed");
|
||||
return this._super();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
return livesupport;
|
||||
});
|
||||
|
|