[ADD] Add fevicon icon and progress percentage for loading page.

bzr revid: jra@tinyerp.com-20121030072510-ulj3fqb5j8r8fgna
This commit is contained in:
Jiten (OpenERP)
2012-10-30 12:55:10 +05:30
2 changed files with 112 additions and 11 deletions
+111 -11
View File
@@ -229,13 +229,14 @@ instance.web.CrashManager = instance.web.CallbackEnabled.extend({
});
},
});
instance.web.Loading = instance.web.Widget.extend({
template: 'Loading',
init: function(parent) {
this._super(parent);
this.count = 0;
this.blocked_ui = false;
this.request_count = 0;
this.response_count = 0;
this.session.on("request", this, this.request_call);
this.session.on("response", this, this.response_call);
this.session.on("response_failed", this, this.response_call);
@@ -245,9 +246,11 @@ instance.web.Loading = instance.web.Widget.extend({
this._super();
},
request_call: function() {
this.request_count += 1;
this.on_rpc_event(1);
},
response_call: function() {
this.response_count += 1;
this.on_rpc_event(-1);
},
on_rpc_event : function(increment) {
@@ -262,27 +265,124 @@ instance.web.Loading = instance.web.Widget.extend({
this.count += increment;
if (this.count > 0) {
if (instance.session.debug) {
this.$el.text(_.str.sprintf( _t("Loading (%d)"), this.count));
} else {
this.$el.text(_t("Loading"));
}
this.$el.show();
this.getParent().$el.addClass('oe_wait');
this.favicon_drawable = true;
this.draw_favicon(parseInt(this.response_count * 100 / this.request_count));
} else {
this.count = 0;
this.request_count = 0;
this.response_count = 0;
clearTimeout(this.long_running_timer);
// Don't unblock if blocked by somebody else
if (self.blocked_ui) {
this.blocked_ui = false;
instance.web.unblockUI();
}
this.$el.fadeOut();
this.getParent().$el.removeClass('oe_wait');
this.stop_favicon();
}
}
});
instance.web.favicon = instance.web.Loading.include({
init: function(parent){
this._super(parent);
var self = this;
this.original_favi = $('link[type="image/x-icon"]');
this.canvas = null;
this.link = null;
this.interval = null;
this.old_title = document.title;
this.favicon_drawable = true;
this.options = {
'border':"white",//border of favicon
'background' :"gray",//main color of circle
'inner_circle':"white",//innter circle color
'fill_color':"red",//fill color
'width': 5 //width of circle
}
},
//when time interval is known than start favicon can be used.
start_favicon: function(second, options){
if(!this.interval)
this.stop_favicon();
var count = 0;
var self = this;
this.interval = setInterval(function(){
if (++count > 100) {self.stop_favicon(); return false;}
self.favicon_drawable = true;
self.draw_favicon(count, options);
}, second || 1);
},
stop_favicon: function(){
if(this.interval)
clearInterval(this.interval);
this.favicon_drawable = false;
$('link[type="image/x-icon"]').attr('href', this.original_favi.attr("href"));
$('head').append(this.original_favi);
document.title = this.old_title;
this.interval = null;
},
loading_title:function(percentage){
document.title = percentage + "% processed |" + this.old_title;
},
draw_favicon: function(percentage, options){
var self = this;
var options = _.extend(this.options, options || {});
var get_canvas = function(){
if(!this.canvas){
this.canvas = document.createElement("canvas");
this.canvas.width = 16;
this.canvas.height = 16;
}
return this.canvas;
};
var get_link = function(canvas_url){
if(!this.link)
this.link = $('<link></link>').attr({ type : 'image/x-icon',rel : 'icon'});
$(this.link).attr('href',canvas_url);
return this.link;
};
var canvas = get_canvas();
var src = self.original_favi.attr("href");
var faviconImage = new Image();
var context = canvas.getContext("2d");
var draw_context = function(context, x, y, r, sAngle, eAngle, counterclockwise ,color){
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
context.fillStyle = color ;
context.fill();
return context
}
faviconImage.onload = function() {
if (context) {
context.clearRect(0, 0, 16, 16);
// Draw shadow
draw_context(context,canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) + 2, 0, Math.PI * 2, false ,options.border)
// Draw background
draw_context(context, canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) , 0, Math.PI * 2, false,options.background)
// Draw pie
if (percentage > 0) {
draw_context(context, canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) , (-0.5) * Math.PI, (-0.5 + 2 * percentage / 100) * Math.PI, false,options.fill_color);
context.lineTo(canvas.width / 2, canvas.height / 2)
}
//Inner Circle
draw_context(context, canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - options.width, 0, Math.PI * 2, false, options.inner_circle)
if (!src.match(/^data/)) {
faviconImage.crossOrigin = 'anonymous';
}
if(self.favicon_drawable){
$('link[type="image/x-icon"]').remove();
$('head').append(get_link(canvas.toDataURL()));
}
}
}
this.loading_title(percentage);
faviconImage.src = self.original_favi.attr("href");
}
});
instance.web.DatabaseManager = instance.web.Widget.extend({
init: function(parent) {
this._super(parent);
@@ -1040,6 +1040,7 @@ instance.web_kanban.QuickCreate = instance.web.Widget.extend({
});
$(".oe_kanban_quick_create_add", this.$el).click(function () {
self.quick_add();
self.focus();
});
$(".oe_kanban_quick_create_close", this.$el).click(function (ev) {
ev.preventDefault();