[IMP] web_tip: tip display using breathing point

3 files changed, 260 insertions, 187 deletions

diff --git a/addons/web_tip/static/src/css/tip.css b/addons/web_tip/static/src/css/tip.css
index 57b874c1fa6..b4c7ea53159 100644
--- a/addons/web_tip/static/src/css/tip.css
+++ b/addons/web_tip/static/src/css/tip.css
@@ -55,3 +55,57 @@
     z-index: 1011 !important;
     position: relative;
 }
+
+.oe_breathing {
+  background:transparent url(/web_tip/static/src/img/tip_throbber.png) no-repeat center center;
+  cursor : pointer;
+  height: 58px;
+  width: 58px;
+  position: absolute;
+  z-index: 1;
+  -webkit-animation: bounce .5s steps(12) alternate infinite;
+     -moz-animation: bounce .5s steps(12) alternate infinite;
+       -o-animation: bounce .5s steps(12) alternate infinite;
+          animation: bounce .5s steps(12) alternate infinite;
+}
+
+@-webkit-keyframes bounce {
+  from{ background-position: 0 0}
+  to{ background-position: -696px 0}
+}
+@-moz-keyframes bounce {
+  from{ background-position: 0 0}
+  to{ background-position: -696px 0}
+}
+@-o-keyframes explode {
+  from{ background-position: 0 0}
+  to{ background-position: -696px 0}
+}
+@keyframes bounce {
+  from{ background-position: 0 0}
+  to{ background-position: -696px 0}
+}
+
+.oe_explode {
+  opacity: 0;
+  -webkit-animation: explode .5s;
+     -moz-animation: explode .5s;
+          animation: explode .5s;
+}
+
+@-webkit-keyframes explode {
+  from{ opacity: 1; transform: scale(1, 1); }
+  to{ opacity: 0; transform: scale(2, 2); }
+}
+@-moz-keyframes explode {
+  from{ opacity: 1; transform: scale(1, 1);}
+  to{ opacity: 0; transform: scale(2, 2);}
+}
+@-o-keyframes explode {
+  from{ opacity: 1; transform: scale(1, 1);}
+  to{ opacity: 0; transform: scale(2, 2);}
+}
+@keyframes explode {
+  from{ opacity: 1; transform: scale(1, 1);}
+  to{ opacity: 0; transform: scale(2, 2);}
+}
diff --git a/addons/web_tip/static/src/img/tip_throbber.png b/addons/web_tip/static/src/img/tip_throbber.png
new file mode 100644
index 00000000000..5fe8c67a10c
--- /dev/null
+++ b/addons/web_tip/static/src/img/tip_throbber.png
diff --git a/addons/web_tip/static/src/js/tip.js b/addons/web_tip/static/src/js/tip.js
index b5ed982aabe..ad1e9357e00 100644
--- a/addons/web_tip/static/src/js/tip.js
+++ b/addons/web_tip/static/src/js/tip.js
@@ -2,57 +2,42 @@ odoo.define('web_tip.web_tip', function (require) {
 "use strict";
 
 var core = require('web.core');
-var form_widgets = require('web.form_widgets');
 var Model = require('web.DataModel');
-var utils = require('web.utils');
 var WebClient = require('web.WebClient');
+var formView = require('web.FormView');
+var utils = require('web.utils');
 
 var bus = core.bus;
 var Class = core.Class;
 
-var Tip = Class.extend({
+var Tips = Class.extend({
     init: function() {
         var self = this;
-        self.tips = [];
-        self.tip_mutex = new utils.Mutex();
-        self.$overlay = null;
-        self.$element = null;
+
+        this.tips = [];
+        this.view = null;
 
         var Tips = new Model('web.tip');
         Tips.query(['title', 'description', 'action_id', 'model', 'type', 'mode', 'trigger_selector',
             'highlight_selector', 'end_selector', 'end_event', 'placement', 'is_consumed'])
             .all().then(function(tips) {
                 self.tips = tips;
-            })
-        ;
+            });
 
-        core.bus.on('action', this, function(action) {
+        bus.on('action', this, function(action) {
             self.on_action(action);
         });
 
         bus.on('view_shown', this, function(view) {
             if (_.keys(view.fields_view).length === 0) {
                 view.on('view_loaded', this, function(fields_view) {
-                    self.on_view(view);
+                    self.view = view;
+                    self.on_view();
                 });
             } else {
-                self.on_view(view);
+                self.view = view;
+                self.on_view();
             }
-
-            view.on('switch_mode', this, function() {
-            });
-        });
-
-        bus.on('view_switch_mode', this, function(viewManager, mode) {
-            self.on_switch(viewManager, mode);
-        });
-
-        bus.on('form_view_shown', this, function(formView) {
-            self.on_form_view(formView);
-        });
-
-        bus.on('form_view_saved', this, function(formView) {
-            self.on_form_view(formView);
         });
     },
 
@@ -63,70 +48,54 @@ var Tip = Class.extend({
         var model = action.res_model;
     },
 
-    on_view: function(view) {
+    on_view: function() {
         var self = this;
-        var fields_view = view.fields_view;
-        var action_id = view.ViewManager.action ? view.ViewManager.action.id : null;
-        var model = fields_view.model;
-
-        // kanban
-        if(fields_view.type === 'kanban') {
-            var dataset_def = $.Deferred();
-            var groups_def = $.Deferred();
-            view.on("kanban_dataset_processed", self, function() {
-                var length = view.dataset.ids.length;
-                dataset_def.resolve(length);
-            });
-            view.on('kanban_groups_processed', self, function() {
-                groups_def.resolve();
-            });
-            dataset_def.done(function(length) {
-                self.eval_tip(action_id, model, fields_view.type);
-            });
-            groups_def.done(function() {
-                self.eval_tip(action_id, model, fields_view.type);
-            });
-        } else if (fields_view.type === 'tree') {
-            view.on('view_list_rendered', self, function() {
-                self.eval_tip(action_id, model, fields_view.type);
-            });
-        } else if (view.hasOwnProperty('editor')) {
-            view.on('view_list_rendered', self, function() {
-                self.reposition();
-            });
-        }
+
+        bus.on('DOM_updated', this, function() {
+            var action_id = self.view.ViewManager.action ? self.view.ViewManager.action.id : null;
+            var model = self.view.fields_view.model;
+            var mode = self.view.fields_view.type;
+
+            if (mode == 'form') {
+                self.on_form_view(action_id, model);
+            }
+            else if (self.view.hasOwnProperty('editor')) {
+                self.view.on('view_list_rendered', self, function() {
+                    self.eval_tips(action_id, model, mode);
+                });
+            }
+            else {
+                self.eval_tips(action_id, model, mode);
+            }
+        });
     },
 
-    on_form_view: function(formView) {
+    on_form_view: function(action_id, model) {
         var self = this;
-        var model = formView.model;
-        var type = formView.datarecord.type ? formView.datarecord.type : null;
-        var mode = 'form';
-        formView.on('view_content_has_changed', self, _.once(function() {
-            self.eval_tip(null, model, mode, type);
-        }));
+        var type = this.view.datarecord ? this.view.datarecord.type : null
+
         if ($('.oe_chatter').length > 0) {
-            core.bus.on('chatter_messages_fetched', this, _.once(function () {
-                self.eval_tip(null, model, mode, type);
-            }));
+            this.view.on('chatter_messages_displayed', this, function() {
+                self.eval_tips(action_id, model, 'form', type);
+            });
         } else {
-            self.eval_tip(null, model, mode, type);
+            this.eval_tips(action_id, model, 'form', type);
         }
-    },
 
-    // stub
-    on_switch: function (viewManager, mode) {
-        var self = this;
-        var action = viewManager.action;
-        var action_id = action.id;
-        var model = action.res_model;
+        this.view.on('to_edit_mode', this, function() {
+            self.remove_tips();
+        });
+        this.view.on('to_view_mode', this, function() {
+            self.eval_tips(action_id, model, 'form', type);
+        });
     },
 
-    eval_tip: function(action_id, model, mode, type) {
+    eval_tips: function(action_id, model, mode, type) {
         var self = this;
         var filter = {};
         var valid_tips = [];
         var tips = [];
+
         if (action_id) {
             valid_tips = _.filter(self.tips, function (tip) {
                 return tip.action_id[0] === action_id;
@@ -135,7 +104,9 @@ var Tip = Class.extend({
 
         filter.model = model;
         filter.mode = mode;
+        filter.is_consumed = false;
         tips = _.where(self.tips, filter);
+
         if (type) {
             tips = _.filter(tips, function(tip) {
                 if (!tip.type) {
@@ -148,174 +119,222 @@ var Tip = Class.extend({
         valid_tips = _.uniq(valid_tips.concat(tips));
         _.each(valid_tips, function(tip) {
             if (!tip.is_consumed) {
-                self.add_tip(tip);
+                var t = new Tip(tip);
+                t.do_tip();
             }
         });
     },
 
+    remove_tips: function() {
+        $('.oe_breathing').remove();
+    },
+});
 
-    add_tip: function(tip) {
-        var self = this;
-        self.tip_mutex.exec(function() {
-            if (!tip.is_consumed) {
-                return $.when(self.do_tip(tip));
-            }
-        });
+var Tip = Class.extend({
+    init: function(tip) {
+        this.tip = tip;
+
+        this.highlight_selector = tip.highlight_selector;
+        this.end_selector = tip.end_selector ? tip.end_selector : tip.highlight_selector;
+        this.triggers = tip.trigger_selector ? tip.trigger_selector.split(',') : [];
     },
 
-    do_tip: function (tip) {
+    do_tip: function() {
         var self = this;
-        var def = $.Deferred();
-        var Tips = new Model('web.tip');
-        var highlight_selector = tip.highlight_selector;
-        var triggers = tip.trigger_selector ? tip.trigger_selector.split(',') : [];
-        var trigger_tip = true;
 
-        if(!$(highlight_selector).length > 0 || !$(highlight_selector).is(":visible")) {
-            return def.reject();
+        if(!$(this.highlight_selector).length > 0 || !$(this.highlight_selector).is(":visible")) {
+            return false;
         }
-        for (var i = 0; i < triggers.length; i++) {
-            if(!$(triggers[i]).length > 0) {
-                trigger_tip = false;
+
+        for (var i = 0; i < this.triggers.length; i++) {
+            if(!$(this.triggers[i]).length > 0) {
+                return false;
             }
         }
 
-        if (trigger_tip) {
-            self.$element = $(highlight_selector).first();
-            if (self.$element.height() === 0 || self.$element.width() === 0) {
-                var $images = self.$element.find('img');
-                if ($images.length > 0) {
-                    $images.first().load(function() {
-                        self.add_tip(tip);
-                    });
-                }
-                return def.reject();
+        this.$element = $(this.highlight_selector).first();
+        if (utils.float_is_zero(this.$element.height(), 1) || utils.float_is_zero(this.$element.width(), 1)) {
+            var $images = this.$element.find('img');
+            if ($images.length > 0) {
+                $images.first().load(function() {
+                    var t = new Tip(self.tip);
+                    t.do_tip();
+                    bus.trigger('image_loaded');
+                });
             }
+            return false;
+        }
+
+        if (!this.$element.next().hasClass('oe_breathing')) {
+            this.$breathing = $("<div>", { class: 'oe_breathing' });
+            this.$element.after(this.$breathing);
+        } else {
+            this.$breathing = this.$element.next();
+        }
+        this._set_breathing_position();
 
-            self.scroll_to_tip();
-            self.$helper = $("<div>", { class: 'oe_tip_helper' });
-            self.$element.after(self.$helper);
-            self._set_helper_position();
+        this.$breathing.on('click', function(e) {
+            e.stopImmediatePropagation();
+            self.$breathing.addClass('oe_explode');
+            self.trigger_tip();
+        });
 
-            self.$overlay = $("<div>", { class: 'oe_tip_overlay' });
-            $('body').append(self.$overlay);
-            self.$element.addClass('oe_tip_show_element');
+        // resize
+        bus.on('resize', this, function() {
+            self._set_breathing_position();
+        });
 
-            // fix the stacking context problem
-            _.each(self.$element.parentsUntil('body'), function(el) {
-                var zIndex = $(el).css('z-index');
-                var opacity = parseFloat($(el).css('opacity'));
+        bus.on('image_loaded', this, function() {
+            self._set_breathing_position();
+        });
 
-                if (/[0-9]+/.test(zIndex) || opacity < 1) {
-                    $(el).addClass('oe_tip_fix_parent');
-                }
-            });
+        bus.on('please_reposition_tip', this, function() {
+            self._set_breathing_position();
+        });
 
-            self.$element.popover({
-                placement: tip.placement,
-                title: tip.title,
-                content: tip.description,
-                html: true,
-                container: 'body',
-            }).popover("show");
+        return true;
+    },
 
-            var $cross = $('<button type="button" class="close">&times;</button>');
-            $cross.addClass('oe_tip_close');
+    trigger_tip: function() {
+        var self = this;
 
-            if (tip.title) {
-                $('.popover-title').prepend($cross);
-            } else {
-                $('.popover-content').prepend($cross);
-            }
+        this.$helper = $("<div>", { class: 'oe_tip_helper' });
+        this.$overlay = $("<div>", { class: 'oe_tip_overlay' });
 
-            // consume tip
-            tip.end_selector = tip.end_selector ? tip.end_selector : tip.highlight_selector;
-            $(tip.end_selector).one(tip.end_event, function($ev) {
-                self.end_tip(tip);
-                def.resolve();
-            });
+        this.$element.after(this.$helper);
+        this._set_helper_position();
+        this.scroll_to_tip();
 
-            // dismiss tip
-            $cross.on('click', function($ev) {
-                self.end_tip(tip);
-                def.resolve();
-            });
-            self.$overlay.on('click', function($ev) {
-                self.end_tip(tip);
-                def.resolve();
-            });
-            $(document).on('keyup.web_tip', function($ev) {
-                if ($ev.which === 27) { // esc
-                    self.end_tip(tip);
-                    def.resolve();
-                }
-            });
+        $('body').append(this.$overlay);
+        this.$element.addClass('oe_tip_show_element');
 
-            // resize
-            bus.on('resize', this, function() {
-                self.reposition();
-            });
+        // fix the stacking context problem
+        _.each(this.$element.parentsUntil('body'), function(el) {
+            var zIndex = $(el).css('z-index');
+            var opacity = parseFloat($(el).css('opacity'));
 
-            bus.on('please_reposition_tip', this, function () {
-                self.reposition();
-            });
+            if (/[0-9]+/.test(zIndex) || opacity < 1) {
+                $(el).addClass('oe_tip_fix_parent');
+            }
+        });
+
+        this.$element.popover({
+            placement: self.tip.placement,
+            title: self.tip.title,
+            content: self.tip.description,
+            html: true,
+            container: 'body',
+            animation: false,
+        }).popover('show');
+
+        this.$cross = $('<button type="button" class="close oe_tip_close">&times;</button>');
+
+        if (this.tip.title) {
+            $('.popover-title').prepend(this.$cross);
         } else {
-           def.reject();
+            $('.popover-content').prepend(this.$cross);
         }
-        return def;
+
+        // consume tip
+        $(this.end_selector).one(this.tip.end_event, function($ev) {
+            self.end_tip();
+        });
+
+        // dismiss tip
+        this.$cross.on('click', function($ev) {
+            self.end_tip();
+        });
+        this.$overlay.on('click', function($ev) {
+            self.end_tip();
+        });
+        $(document).on('keyup.web_tip', function($ev) {
+            if ($ev.which === 27) { // esc
+                self.end_tip();
+            }
+        });
+
+        // resize
+        bus.on('resize', this, function() {
+            self._set_popover_position();
+        });
     },
 
     scroll_to_tip: function(){
-        var self = this;
-        var scroll = _.find(self.$element.parentsUntil('body'), function(el) {
+        var scroll = _.find(this.$element.parentsUntil('body'), function(el) {
             var overflow = $(el).css('overflow-y');
             return (overflow === 'auto' || overflow === 'scroll');
         });
         if (scroll) {
-            $(scroll).scrollTo(self.$element);
+            $(scroll).scrollTo(this.$element);
         }
     },
 
-    end_tip: function(tip) {
-        var self = this;
+    end_tip: function() {
         var Tips = new Model('web.tip');
-        self.$element.popover('destroy');
-        self.$overlay.remove();
-        self.$helper.remove();
-        self.$element.removeClass('oe_tip_show_element');
+
+        this.$element.popover('destroy');
+        this.$element.removeClass('oe_tip_show_element');
+        this.$breathing.remove();
+        this.$helper.remove();
+        this.$overlay.remove();
+        this.$cross.remove();
+
         _.each($('.oe_tip_fix_parent'), function(el) {
             $(el).removeClass('oe_tip_fix_parent');
         });
         $(document).off('keyup.web_tip');
-        Tips.call('consume', [tip.id], {});
-        tip.is_consumed = true;
+
+        Tips.call('consume', [this.tip.id], {});
+        this.tip.is_consumed = true;
     },
 
-    reposition: function() {
-        var self = this;
-        if (self.tip_mutex.def.state() === 'pending') {
-            self.scroll_to_tip();
-            self._set_helper_position();
-            self.$element.popover('show');
-        }
+    _set_breathing_position: function() {
+        this.$breathing.position({ my: "center", at: "center", of: this.$element });
     },
 
-    _set_helper_position : function() {
+    _set_helper_position: function() {
         var offset = this.$element.offset();
         var _top = offset.top - 5;
         var _left = offset.left - 5;
         var _width = this.$element.outerWidth() + 10;
         var _height = this.$element.outerHeight() + 10;
-        this.$helper.offset({top: _top , left: _left});
+
+        this.$helper.offset({top: _top, left: _left});
         this.$helper.width(_width);
         this.$helper.height(_height);
-    }
+    },
+
+    _set_popover_position: function() {
+        if (!this.tip.is_consumed) {
+            this.$element.popover('show');
+            this._set_helper_position();
+            this.scroll_to_tip();
+
+            if (this.tip.title) {
+                $('.popover-title').prepend(this.$cross);
+            } else {
+                $('.popover-content').prepend(this.$cross);
+            }
+        }
+    },
 });
 
 WebClient.include({
     show_application: function() {
         this._super();
-        this.tip_handler = new Tip();
+        this.tips_handler = new Tips();
+    }
+});
+
+formView.include({
+    to_edit_mode: function() {
+        this._super();
+        this.trigger('to_edit_mode');
+    },
+
+    to_view_mode: function() {
+        this._super();
+        this.trigger('to_view_mode');
     }
 });