[MERGE] forward port branch 12.0 up to 82a1e1dcc33

2 files changed, 187 insertions, 66 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index a0b25c75b01..a6737fe7b24 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -7,6 +7,7 @@ odoo.define('website.content.snippets.animation', function (require) {
 
 var Class = require('web.Class');
 var core = require('web.core');
+var dom = require('web.dom');
 var mixins = require('web.mixins');
 var utils = require('web.utils');
 var Widget = require('web.Widget');
@@ -256,6 +257,29 @@ var Animation = Widget.extend({
      */
     selector: false,
     /**
+     * Extension of @see Widget.events
+     *
+     * A description of the event handlers to bind/delegate once the widget
+     * has been rendered.
+     *
+     * 'click .hello .world': 'async _onHelloWorldClick',
+     *   _^_      _^_           _^_        _^_
+     *    |        |             |          |
+     *    |  (Optional) jQuery   |  Handler method name
+     *    |  delegate selector   |
+     *    |                      |_ (Optional) space separated options
+     *    |                          * async: use the automatic system
+     *    |_ Event name with           making handlers promise-ready (see
+     *       potential jQuery          makeButtonHandler, makeAsyncHandler)
+     *       namespaces
+     *
+     * Note: the values may be replaced by a function declaration. This is
+     * however a deprecated behavior.
+     *
+     * @type {Object}
+     */
+    events: {},
+    /**
      * Acts as @see Widget.events except that the events are only binded if the
      * Animation instance is instanciated in edit mode.
      */
@@ -372,6 +396,54 @@ var Animation = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * @see this.events
+     * @override
+     */
+    _delegateEvents: function () {
+        var self = this;
+        var originalEvents = this.events;
+
+        var events = {};
+        _.each(this.events, function (method, event) {
+            // If the method is a function, use the default Widget system
+            if (typeof method !== 'string') {
+                events[event] = method;
+                return;
+            }
+            // If the method is only a function name without options, use the
+            // default Widget system
+            var methodOptions = method.split(' ');
+            if (methodOptions.length <= 1) {
+                events[event] = method;
+                return;
+            }
+            // If the method has no meaningful options, use the default Widget
+            // system
+            var isAsync = _.contains(methodOptions, 'async');
+            if (!isAsync) {
+                events[event] = method;
+                return;
+            }
+
+            method = self.proxy(methodOptions[methodOptions.length - 1]);
+            if (_.str.startsWith(event, 'click')) {
+                // Protect click handler to be called multiple times by
+                // mistake by the user and add a visual disabling effect
+                // for buttons.
+                method = dom.makeButtonHandler(method);
+            } else {
+                // Protect all handlers to be recalled while the previous
+                // async handler call is not finished.
+                method = dom.makeAsyncHandler(method);
+            }
+            events[event] = method;
+        });
+
+        this.events = events;
+        this._super.apply(this, arguments);
+        this.events = originalEvents;
+    },
+    /**
      * Registers `AnimationEffect` instances.
      *
      * This can be done by extending this method and calling the @see _addEffect
diff --git a/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss b/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss
index 82beeec2cbf..4f93429aa58 100644
--- a/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss
+++ b/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss
@@ -142,12 +142,18 @@ $-compat-gray-map: (
     @extend .card-body;
 }
 
-// Adapt grid (push-pull, xs ?)
-@each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+// Adapt grid (push-pull ?)
+$-compat-breakpoints: (
+  xs: map-get($grid-breakpoints, 'xs'),
+  sm: map-get($grid-breakpoints, 'md'),
+  md: map-get($grid-breakpoints, 'lg'),
+  lg: map-get($grid-breakpoints, 'xl'),
+);
+@each $breakpoint in map-keys($-compat-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $-compat-breakpoints);
     $infix: if($infix != "", $infix, "-xs");
 
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint, $-compat-breakpoints) {
         // `$grid-columns - 1` because offsetting by the width of an entire row isn't possible
         @for $i from 0 through ($grid-columns - 1) {
             .col#{$infix}-offset-#{$i} {
@@ -196,105 +202,148 @@ $-compat-gray-map: (
 .btn-default {
     @include button-variant(theme-color('secondary'), theme-color('secondary'));
 }
+.btn-xs {
+    @extend .btn-sm;
+}
 
 // Adapt display classes
-.hidden, .hide {
+.hide {
     display: none !important;
 }
+.show {
+    display: block !important;
+}
 .hidden {
+    display: none !important;
+}
+.visible {
+    &-xs, &-sm, &-md, &-lg {
+        &, &-block, &-inline, &-inline-block {
+            display: none !important;
+        }
+    }
     &-xs {
-        @include media-breakpoint-down(sm) {
-            display: none;
+        &, &-block {
+            @include media-breakpoint-down(sm) {
+                display: block !important;
+            }
+        }
+        &-inline {
+            @include media-breakpoint-down(sm) {
+                display: inline !important;
+            }
+        }
+        &-inline-block {
+            @include media-breakpoint-down(sm) {
+                display: inline-block !important;
+            }
         }
     }
     &-sm {
-        @include media-breakpoint-only(md) {
-            display: none;
+        &, &-block {
+            @include media-breakpoint-only(md) {
+                display: block !important;
+            }
+        }
+        &-inline {
+            @include media-breakpoint-only(md) {
+                display: inline !important;
+            }
+        }
+        &-inline-block {
+            @include media-breakpoint-only(md) {
+                display: inline-block !important;
+            }
         }
     }
     &-md {
-        @include media-breakpoint-only(lg) {
-            display: none;
+        &, &-block {
+            @include media-breakpoint-only(lg) {
+                display: block !important;
+            }
+        }
+        &-inline {
+            @include media-breakpoint-only(lg) {
+                display: inline !important;
+            }
+        }
+        &-inline-block {
+            @include media-breakpoint-only(lg) {
+                display: inline-block !important;
+            }
         }
     }
     &-lg {
-        @include media-breakpoint-only(xl) {
-            display: none;
+        &, &-block {
+            @include media-breakpoint-up(xl) {
+                display: block !important;
+            }
         }
-    }
-    &-print {
-        @media print {
-            display: none;
+        &-inline {
+            @include media-breakpoint-up(xl) {
+                display: inline !important;
+            }
+        }
+        &-inline-block {
+            @include media-breakpoint-up(xl) {
+                display: inline-block !important;
+            }
         }
     }
 }
-.show {
-    display: block !important;
-}
-.visible {
+.hidden {
     &-xs {
-        &-block, &-inline-block {
-            display: none;
-        }
         @include media-breakpoint-down(sm) {
-            &-block {
-                display: block;
-            }
-            &-inline-block {
-                display: inline-block;
-            }
+            display: none !important;
         }
     }
     &-sm {
-        &-block, &-inline-block {
-            display: none;
-        }
         @include media-breakpoint-only(md) {
-            &-block {
-                display: block;
-            }
-            &-inline-block {
-                display: inline-block;
-            }
+            display: none !important;
         }
     }
     &-md {
-        &-block, &-inline-block {
-            display: none;
-        }
         @include media-breakpoint-only(lg) {
-            &-block {
-                display: block;
-            }
-            &-inline-block {
-                display: inline-block;
-            }
+            display: none !important;
         }
     }
     &-lg {
-        &-block, &-inline-block {
-            display: none;
+        @include media-breakpoint-up(xl) {
+            display: none !important;
         }
-        @include media-breakpoint-only(xl) {
-            &-block {
-                display: block;
-            }
-            &-inline-block {
-                display: inline-block;
-            }
+    }
+}
+.visible-print {
+    display: none !important;
+
+    @media print {
+        display: block !important;
+    }
+
+    &-block {
+        display: none !important;
+
+        @media print {
+            display: block !important;
         }
     }
-    &-print {
-        &-block, &-inline-block {
-            display: none;
+    &-inline {
+        display: none !important;
+
+        @media print {
+            display: inline !important;
         }
+    }
+    &-inline-block {
+        display: none !important;
+
         @media print {
-            &-block {
-                display: block;
-            }
-            &-inline-block {
-                display: inline-block;
-            }
+            display: inline-block !important;
         }
     }
 }
+.hidden-print {
+    @media print {
+        display: none !important;
+    }
+}