initial commit 2

4 files changed, 404 insertions, 0 deletions

diff --git a/addons/website/static/src/snippets/s_popup/000.js b/addons/website/static/src/snippets/s_popup/000.js
new file mode 100644
index 00000000..2b11466e
--- /dev/null
+++ b/addons/website/static/src/snippets/s_popup/000.js
@@ -0,0 +1,119 @@
+odoo.define('website.s_popup', function (require) {
+'use strict';
+
+const config = require('web.config');
+const publicWidget = require('web.public.widget');
+const utils = require('web.utils');
+
+const PopupWidget = publicWidget.Widget.extend({
+    selector: '.s_popup',
+    events: {
+        'click .js_close_popup': '_onCloseClick',
+        'hide.bs.modal': '_onHideModal',
+    },
+
+    /**
+     * @override
+     */
+    start: function () {
+        this._popupAlreadyShown = !!utils.get_cookie(this.$el.attr('id'));
+        if (!this._popupAlreadyShown) {
+            this._bindPopup();
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        $(document).off('mouseleave.open_popup');
+        this.$target.find('.modal').modal('hide');
+        clearTimeout(this.timeout);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _bindPopup: function () {
+        const $main = this.$target.find('.modal');
+
+        let display = $main.data('display');
+        let delay = $main.data('showAfter');
+
+        if (config.device.isMobile) {
+            if (display === 'mouseExit') {
+                display = 'afterDelay';
+                delay = 5000;
+            }
+            this.$('.modal').removeClass('s_popup_middle').addClass('s_popup_bottom');
+        }
+
+        if (display === 'afterDelay') {
+            this.timeout = setTimeout(() => this._showPopup(), delay);
+        } else {
+            $(document).on('mouseleave.open_popup', () => this._showPopup());
+        }
+    },
+    /**
+     * @private
+     */
+    _hidePopup: function () {
+        this.$target.find('.modal').modal('hide');
+    },
+    /**
+     * @private
+     */
+    _showPopup: function () {
+        if (this._popupAlreadyShown) {
+            return;
+        }
+        this.$target.find('.modal').modal('show');
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onCloseClick: function () {
+        this._hidePopup();
+    },
+    /**
+     * @private
+     */
+    _onHideModal: function () {
+        const nbDays = this.$el.find('.modal').data('consentsDuration');
+        utils.set_cookie(this.$el.attr('id'), true, nbDays * 24 * 60 * 60);
+        this._popupAlreadyShown = true;
+    },
+});
+
+publicWidget.registry.popup = PopupWidget;
+
+// Prevent bootstrap to prevent scrolling and to add the strange body
+// padding-right they add if the popup does not use a backdrop (especially
+// important for default cookie bar).
+const _baseSetScrollbar = $.fn.modal.Constructor.prototype._setScrollbar;
+$.fn.modal.Constructor.prototype._setScrollbar = function () {
+    if (this._element.classList.contains('s_popup_no_backdrop')) {
+        return;
+    }
+    return _baseSetScrollbar.apply(this, ...arguments);
+};
+const _baseGetScrollbarWidth = $.fn.modal.Constructor.prototype._getScrollbarWidth;
+$.fn.modal.Constructor.prototype._getScrollbarWidth = function () {
+    if (this._element.classList.contains('s_popup_no_backdrop')) {
+        return 0;
+    }
+    return _baseGetScrollbarWidth.apply(this, ...arguments);
+};
+
+return PopupWidget;
+});
diff --git a/addons/website/static/src/snippets/s_popup/000.scss b/addons/website/static/src/snippets/s_popup/000.scss
new file mode 100644
index 00000000..02738156
--- /dev/null
+++ b/addons/website/static/src/snippets/s_popup/000.scss
@@ -0,0 +1,99 @@
+// s_popup
+.s_popup_main:not([data-vcss]) {
+    .s_popup_content {
+        // keep lower than <p> height (cookies bar)
+        min-height: $o-font-size-base * $o-line-height-base;
+        box-shadow: $modal-content-box-shadow-sm-up;
+        .container {
+            // keep margin when fixed bottom
+            @include make-container();
+        }
+    }
+
+    &.modal:not(.d-none) {
+        display: block !important;
+    }
+
+    $popup-close-size: 1.5rem;
+    .s_popup_close {
+        position: absolute;
+        background: white;
+        height: $popup-close-size;
+        width: $popup-close-size;
+        line-height: $popup-close-size;
+        margin-top: -1 * $popup-close-size / 2;
+        margin-right: -1 * $popup-close-size / 2;
+        border-radius: $popup-close-size / 2;
+        right: 0px;
+        top: 0px;
+        box-shadow: rgba(0,0,0,0.8) 0 0 5px;
+        cursor: pointer;
+        text-align: center;
+        z-index: 1;
+        font-size: $popup-close-size;
+    }
+
+    &.s_popup_center {
+        .s_popup_full {
+            @include o-position-absolute(0, 0, 0, 0);
+            &.modal-dialog {
+                max-width: 100%;
+                padding: 0 !important;
+                margin: 0 !important;
+
+                .modal-content {
+                    height: 100%;
+                    width: 100%;
+                    justify-content: center;
+                }
+            }
+            .s_popup_close {
+                font-size: 60px;
+                margin: 10px;
+                background: none;
+                box-shadow: none;
+            }
+        }
+    }
+
+    &.s_popup_fixed {
+        &.s_popup_fixed_top {
+            .s_popup_content {
+                top: $o-navbar-height;
+            }
+        }
+        &:not(.s_popup_fixed_top) {
+            .s_popup_content {
+                bottom: 0;
+            }
+        }
+        .s_popup_content {
+            z-index: $zindex-modal;
+            position: fixed;
+            right: 20px;
+        }
+        .modal-sm .s_popup_content {
+            width: $modal-sm;
+        }
+        .modal-md .s_popup_content {
+            width: $o-modal-md;
+        }
+        .modal-lg .s_popup_content {
+            width: $o-modal-lg;
+        }
+        .modal-xl .s_popup_content {
+            width: $modal-xl;
+        }
+        .s_popup_full .s_popup_content {
+            right: 0;
+            left: 0;
+            .s_popup_close {
+                box-shadow: none;
+                font-size: 60px;
+                margin: 10px;
+                background: none;
+            }
+
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss
new file mode 100644
index 00000000..f8ae94ca
--- /dev/null
+++ b/addons/website/static/src/snippets/s_popup/001.scss
@@ -0,0 +1,72 @@
+.s_popup[data-vcss='001']  {
+    .modal-content {
+        min-height: $font-size-lg * 2;
+        max-height: none;
+        border: 0;
+        border-radius: 0;
+        box-shadow: $modal-content-box-shadow-sm-up;
+    }
+
+    .modal-dialog {
+        height: auto;
+        min-height: 100%;
+    }
+
+    // Close icon
+    .s_popup_close {
+        z-index: $zindex-modal;
+        @include o-position-absolute(0, 0);
+        width: $font-size-lg * 2;
+        height: $font-size-lg * 2;
+        line-height: $font-size-lg * 2;
+        @include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
+        box-shadow: $box-shadow-sm;
+        cursor: pointer;
+        font-size: $font-size-lg;
+        text-align: center;
+    }
+
+    // Size option - Full
+    .s_popup_size_full {
+        padding: 0 !important;
+        max-width: 100%;
+
+        > .modal-content {
+            // Use the backdrop color as background-color
+            background-color: transparent;
+            box-shadow: none;
+            border-radius: 0;
+        }
+    }
+
+    // Position option - Middle
+    .s_popup_middle .modal-dialog {
+        align-items: center;
+    }
+
+    // Position option - Top/Bottom
+    .s_popup_top,
+    .s_popup_bottom {
+        .modal-dialog {
+            margin-right: 0;
+            &:not(.s_popup_size_full) {
+                padding: $spacer !important;
+            }
+        }
+    }
+    .s_popup_top .modal-dialog {
+        align-items: flex-start;
+    }
+    .s_popup_bottom .modal-dialog {
+        align-items: flex-end;
+    }
+
+    // No backdrop
+    .s_popup_no_backdrop {
+        pointer-events: none;
+
+        .modal-content {
+            pointer-events: auto;
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
new file mode 100644
index 00000000..f31c00d3
--- /dev/null
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -0,0 +1,114 @@
+odoo.define('website.s_popup_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+
+options.registry.SnippetPopup = options.Class.extend({
+    /**
+     * @override
+     */
+    start: function () {
+        // Note: the link are excluded here so that internal modal buttons do
+        // not close the popup as we want to allow edition of those buttons.
+        this.$target.on('click.SnippetPopup', '.js_close_popup:not(a, .btn)', ev => {
+            ev.stopPropagation();
+            this.onTargetHide();
+            this.trigger_up('snippet_option_visibility_update', {show: false});
+        });
+        this.$target.on('shown.bs.modal.SnippetPopup', () => {
+            this.trigger_up('snippet_option_visibility_update', {show: true});
+        });
+        this.$target.on('hidden.bs.modal.SnippetPopup', () => {
+            this.trigger_up('snippet_option_visibility_update', {show: false});
+        });
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super(...arguments);
+        this.$target.off('.SnippetPopup');
+    },
+    /**
+     * @override
+     */
+    onBuilt: function () {
+        this._assignUniqueID();
+    },
+    /**
+     * @override
+     */
+    onClone: function () {
+        this._assignUniqueID();
+    },
+    /**
+     * @override
+     */
+    onTargetShow: async function () {
+        this.$target.modal('show');
+        $(document.body).children('.modal-backdrop:last').addClass('d-none');
+    },
+    /**
+     * @override
+     */
+    onTargetHide: async function () {
+        return new Promise(resolve => {
+            const timeoutID = setTimeout(() => {
+                this.$target.off('hidden.bs.modal.popup_on_target_hide');
+                resolve();
+            }, 500);
+            this.$target.one('hidden.bs.modal.popup_on_target_hide', () => {
+                clearTimeout(timeoutID);
+                resolve();
+            });
+            this.$target.modal('hide');
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Moves the snippet in footer to be common to all pages
+     * or inside wrap to be on one page only
+     *
+     * @see this.selectClass for parameters
+     */
+    moveBlock: function (previewMode, widgetValue, params) {
+        const $container = $(widgetValue === 'moveToFooter' ? 'footer' : 'main');
+        this.$target.closest('.s_popup').prependTo($container.find('.oe_structure:o_editable').first());
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    setBackdrop(previewMode, widgetValue, params) {
+        const color = widgetValue ? 'var(--black-50)' : '';
+        this.$target[0].style.setProperty('background-color', color, 'important');
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Creates a unique ID.
+     *
+     * @private
+     */
+    _assignUniqueID: function () {
+        this.$target.closest('.s_popup').attr('id', 'sPopup' + Date.now());
+    },
+    /**
+     * @override
+     */
+    _computeWidgetState: function (methodName, params) {
+        switch (methodName) {
+            case 'moveBlock':
+                return this.$target.closest('footer').length ? 'moveToFooter' : 'moveToBody';
+        }
+        return this._super(...arguments);
+    },
+});
+});