[ADD] Add fevicon icon and progress percentage for loading page.
bzr revid: jra@tinyerp.com-20121030072510-ulj3fqb5j8r8fgna
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user