From e6145d550abaa9d3c1ea7c5a568eaa6354d100a2 Mon Sep 17 00:00:00 2001
From: Jeremy Kersten <jke@odoo.com>
Date: Thu, 16 Apr 2020 07:23:47 +0000
Subject: [PATCH] [IMP] web_tour: consume button in step content

This commit add a button in a step to be able to consume it.
It allows to have optional steps that the user can skip.

Part of https://github.com/odoo/odoo/pull/44328

task-2172208

X-original-commit: 27158a0f612897e41601bf9e9d20861e9b87279f
---
 addons/web_tour/static/src/js/tip.js     | 15 ++++++++++++++-
 addons/web_tour/static/src/scss/tip.scss |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/addons/web_tour/static/src/js/tip.js b/addons/web_tour/static/src/js/tip.js
index 6d6a5b6256e..6dddc7e1739 100644
--- a/addons/web_tour/static/src/js/tip.js
+++ b/addons/web_tour/static/src/js/tip.js
@@ -14,6 +14,7 @@ var Tip = Widget.extend({
         mouseenter: '_onMouseEnter',
         mouseleave: '_onMouseLeave',
         transitionend: '_onTransitionEnd',
+        'click .btn_consume_event': '_onNextStep',
     },
 
     /**
@@ -57,9 +58,11 @@ var Tip = Widget.extend({
      */
     attach_to: async function ($anchor) {
         this._setupAnchor($anchor);
-
         this.is_anchor_fixed_position = this.$anchor.css("position") === "fixed";
 
+        if (this.info.optional === "true") {
+            this.info.content += "<button class='btn btn-link btn_consume_event'>" + _t('Next Step') + "</button>";
+        }
         // The body never needs to have the o_tooltip_parent class. It is a
         // safe place to put the tip in the DOM at initialization and be able
         // to compute its dimensions and reposition it if required.
@@ -77,6 +80,9 @@ var Tip = Widget.extend({
         this.scrollContentWidth = this.$tooltip_content.outerWidth(true);
         this.scrollContentHeight = this.$tooltip_content.outerHeight(true);
         this.$tooltip_content.html(this.info.content);
+        if (this.info.optional === "true") {
+            this.content_height += this.$tooltip_content.children('button').outerHeight() + 5; // +5 to add a small margin
+        }
         this.$window = $(window);
 
         this.$tooltip_content.css({
@@ -457,6 +463,13 @@ var Tip = Widget.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     */
+    _onNextStep: function () {
+        this.trigger("tip_consumed");
+        this._unbind_anchor_events();
+    },
     /**
      * @private
      */
diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss
index 1e9a9e34a47..8495e00feef 100644
--- a/addons/web_tour/static/src/scss/tip.scss
+++ b/addons/web_tour/static/src/scss/tip.scss
@@ -149,6 +149,12 @@
         > p:last-child {
             margin-bottom: 0;
         }
+
+        .btn_consume_event {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+        }
     }
 
     &.active {