[IMP] web_editor, website: add new 'Countdown' snippet

This commit introduces a new snippet: Countdown.

The countdown snippet is composed of 4 circle countdown, one for every time
unit: seconds, minutes, hours and days.

When countdown ends, the user can chose between 3 possible actions:
1. Nothing
2. Show message: show a message once the countdown ends.
   The message will be displayed bellow the countdown (stopped on 0) or will
   replace the countdown depending on the option selected.
   The message can be edited through the website builder.
3. Redirect: redirect the user to the chosen URL. If the user is on the page at
   the exact moment the countdown reach 0, the user will be redirected
   automatically. If the user lands on the page after the countdown has reached
   0, there will be no redirection and the link will be shown bellow the
   countdown (stopped on 0) or will replace the countdown depending on the
   option selected.

The countdown layout can be customized in multiple ways:
1. By choosing to hide some time units. For instance, seconds can be hidden or
   only days shown.
2. By changing its size between small/medium/large.
3. By changing its basic design (circle, boxes, clean).
4. By changing its advanced design (shape, background, progress bar..)

task-2093081

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -781,7 +781,7 @@ var SnippetsMenu = Widget.extend({
             if (!$target.closest('body > *').length) {
                 return;
             }
-            if ($target.closest('#web_editor-top-edit, #oe_snippets, #oe_manipulators, .o_technical_modal, .oe_drop_zone, .o_notification_manager, .o_we_no_overlay').length) {
+            if ($target.closest('#web_editor-top-edit, #oe_snippets, #oe_manipulators, .o_technical_modal, .oe_drop_zone, .o_notification_manager, .o_we_no_overlay, .ui-autocomplete').length) {
                 return;
             }
             this._activateSnippet($target);

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -4,6 +4,7 @@ odoo.define('web_editor.snippets.options', function (require) {
 var core = require('web.core');
 const concurrency = require('web.concurrency');
 const ColorpickerDialog = require('web.ColorpickerDialog');
+const time = require('web.time');
 var Widget = require('web.Widget');
 var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
 const weUtils = require('web_editor.utils');
@@ -1002,13 +1003,117 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     },
 });
 
+const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
+    events: _.extend({}, InputUserValueWidget.prototype.events || {}, {
+        'error.datetimepicker': '_onDateTimePickerError',
+    }),
+
+    /**
+     * @override
+     */
+    init: function () {
+        this._super(...arguments);
+        this.__libInput = 0;
+    },
+    /**
+     * @override
+     */
+    start: async function () {
+        await this._super(...arguments);
+
+        const datetimePickerId = _.uniqueId('datetimepicker');
+        this.inputEl.setAttribute('type', 'text');
+        this.inputEl.setAttribute('class', 'datetimepicker-input mx-0 text-left');
+        this.inputEl.setAttribute('id', datetimePickerId);
+        this.inputEl.setAttribute('data-target', '#' + datetimePickerId);
+        this.inputEl.setAttribute('data-toggle', 'datetimepicker');
+
+        const datepickersOptions = {
+            minDate: moment({y: 1900}),
+            maxDate: moment().add(200, 'y'),
+            calendarWeeks: true,
+            defaultDate: moment().format(),
+            icons: {
+                close: 'fa fa-check primary',
+                today: 'far fa-calendar-check',
+            },
+            locale: moment.locale(),
+            format: time.getLangDatetimeFormat(),
+            sideBySide: true,
+            buttons: {
+                showClose: true,
+                showToday: true,
+            },
+            widgetParent: 'body',
+        };
+        this.__libInput++;
+        $(this.inputEl).datetimepicker(datepickersOptions);
+        this.__libInput--;
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+    * @override
+    */
+    getValue: function (methodName) {
+        const value = this._super(...arguments);
+        let date = new Date(value);
+        if (isNaN(date)) {
+            date = new Date();
+        }
+        return moment(date).unix().toString();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _notifyValueChange: function () {
+        if (this.__libInput > 0) {
+            return;
+        }
+        this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    _updateUI: async function () {
+        await this._super(...arguments);
+        const val = parseInt(this._value);
+        if (!isNaN(val)) {
+            this.__libInput++;
+            $(this.inputEl).datetimepicker('date', moment(val * 1000));
+            this.__libInput--;
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Prevents crash manager to throw CORS error. Note that library already
+     * clears the wrong date format.
+     */
+    _onDateTimePickerError: function (ev) {
+        ev.stopPropagation();
+    },
+});
+
 const userValueWidgetsRegistry = {
     'we-button': ButtonUserValueWidget,
     'we-checkbox': CheckboxUserValueWidget,
     'we-select': SelectUserValueWidget,
     'we-input': InputUserValueWidget,
     'we-multi': MultiUserValueWidget,
     'we-colorpicker': ColorpickerUserValueWidget,
+    'we-datetimepicker': DatetimePickerUserValueWidget,
 };
 
 /**

addons/website/data/website_data.xml

@@ -301,6 +301,13 @@
             <field name="type">url</field>
             <field name="url">/website/static/src/img/library/marketing.jpg</field>
         </record>
+        <record id="website.library_image_18" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">firework.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/library/firework.jpg</field>
+        </record>
 
         <!-- Website Builder Background Images -->
         <record id="website.s_background_image_01" model="ir.attachment">