[IMP] website: move facebook page snippet options in left panel

Before this commit, the configuration of the facebook page snippet was
done in a modal window. In an effort to streamline and unify snippet
options, the configuration has been moved into the left panel.

task-2146928

closes odoo/odoo#41104

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

3 files changed, 111 insertions, 224 deletions

diff --git a/addons/website/static/src/snippets/s_facebook_page/options.js b/addons/website/static/src/snippets/s_facebook_page/options.js
index 39d88d5b1a3..da6c94dce74 100644
--- a/addons/website/static/src/snippets/s_facebook_page/options.js
+++ b/addons/website/static/src/snippets/s_facebook_page/options.js
@@ -1,116 +1,8 @@
 odoo.define('website.s_facebook_page_options', function (require) {
 'use strict';
 
-const core = require('web.core');
-const weWidgets = require('wysiwyg.widgets');
 const options = require('web_editor.snippets.options');
 
-const _t = core._t;
-
-const FacebookPageDialog = weWidgets.Dialog.extend({
-    xmlDependencies: weWidgets.Dialog.prototype.xmlDependencies.concat(
-        ['/website/static/src/xml/website.facebook_page.xml']
-    ),
-    template: 'website.facebook_page_dialog',
-    events: _.extend({}, weWidgets.Dialog.prototype.events || {}, {
-        'change': '_onOptionChange',
-    }),
-
-    /**
-     * @constructor
-     */
-    init: function (parent, fbData, options) {
-        this._super(parent, _.extend({
-            title: _t("Facebook Page"),
-        }, options || {}));
-
-        this.fbData = $.extend(true, {}, fbData);
-        this.final_data = this.fbData;
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$previewPage = this.$('.o_facebook_page');
-        this.opened().then(this._renderPreview.bind(this));
-        return this._super.apply(this, arguments);
-    },
-
-    //------------------------------------------------------------------
-    // Private
-    //------------------------------------------------------------------
-
-    /**
-     * Manages Facebook page preview. Also verifies if the page exists on
-     * Facebook or not.
-     *
-     * @private
-     */
-    _renderPreview: function () {
-        var self = this;
-        var match = this.fbData.href.match(/^(?:https?:\/\/)?(?:www\.)?(?:fb|facebook)\.com\/(?:([\w.]+)|[^/?#]+-([0-9]{15,16}))(?:$|[/?# ])/);
-        if (match) {
-            // Check if the page exists on Facebook or not
-            $.ajax({
-                url: 'https://graph.facebook.com/' + (match[2] || match[1]) + '/picture',
-                statusCode: {
-                    200: function () {
-                        self._toggleWarning(true);
-
-                        // Managing height based on options
-                        if (self.fbData.tabs) {
-                            self.fbData.height = self.fbData.tabs === 'events' ? 300 : 500;
-                        } else if (self.fbData.small_header) {
-                            self.fbData.height = self.fbData.show_facepile ? 165 : 70;
-                        } else if (!self.fbData.small_header) {
-                            self.fbData.height = self.fbData.show_facepile ? 225 : 150;
-                        }
-                        options.registry.facebookPage.prototype.markFbElement(self.getParent(), self.$previewPage, self.fbData);
-                    },
-                    404: function () {
-                        self._toggleWarning(false);
-                    },
-                },
-            });
-        } else {
-            this._toggleWarning(false);
-        }
-    },
-    /**
-     * Toggles the warning message and save button and destroy iframe preview.
-     *
-     * @private
-     * @param {boolean} toggle
-     */
-    _toggleWarning: function (toggle) {
-        this.trigger_up('widgets_stop_request', {
-            $target: this.$previewPage,
-        });
-        this.$('.facebook_page_warning').toggleClass('d-none', toggle);
-        this.$footer.find('.btn-primary').prop('disabled', !toggle);
-    },
-
-    //------------------------------------------------------------------
-    // Handlers
-    //------------------------------------------------------------------
-
-    /**
-     * Called when a facebook option is changed -> adapt the preview and saved
-     * data.
-     *
-     * @private
-     */
-    _onOptionChange: function () {
-        var self = this;
-        // Update values in fbData
-        this.fbData.tabs = _.map(this.$('.o_facebook_tabs input:checked'), tab => tab.name).join(',');
-        this.fbData.href = this.$('.o_facebook_page_url').val();
-        _.each(this.$('.o_facebook_options input'), function (el) {
-            self.fbData[el.name] = $(el).prop('checked');
-        });
-        this._renderPreview();
-    },
-});
 options.registry.facebookPage = options.Class.extend({
     /**
      * Initializes the required facebook page data to create the iframe.
@@ -121,12 +13,12 @@ options.registry.facebookPage = options.Class.extend({
         var defs = [this._super.apply(this, arguments)];
 
         var defaults = {
-            href: false,
+            href: '',
             height: 215,
             width: 350,
             tabs: '',
-            small_header: false,
-            hide_cover: false,
+            small_header: true,
+            hide_cover: true,
             show_facepile: false,
         };
         this.fbData = _.defaults(_.pick(this.$target.data(), _.keys(defaults)), defaults);
@@ -141,63 +33,125 @@ options.registry.facebookPage = options.Class.extend({
                 limit: 1,
             }).then(function (res) {
                 if (res) {
-                    self.fbData.href = res[0].social_facebook || 'https://www.facebook.com/Odoo';
+                    self.fbData.href = res[0].social_facebook || '';
                 }
             }));
         }
 
-        return Promise.all(defs);
+        return Promise.all(defs).then(() => this._markFbElement()).then(() => this._refreshPublicWidgets());
     },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
     /**
-     * @override
+     * Toggles a checkbox option.
+     *
+     * @see this.selectClass for parameters
+     * @param {String} optionName the name of the option to toggle
      */
-    start: function () {
-        var self = this;
-        this.$target.on('click.facebook_page_option', '.o_add_facebook_page', function (ev) {
-            ev.preventDefault();
-            self.fbPageOptions();
-        });
-        return this._super.apply(this, arguments);
+    toggleOption: function (previewMode, widgetValue, params) {
+        let optionName = params.optionName;
+        if (optionName.startsWith('tab.')) {
+            optionName = optionName.replace('tab.', '');
+            if (widgetValue) {
+                this.fbData.tabs = this.fbData.tabs
+                    .split(',')
+                    .filter(t => t !== '')
+                    .concat([optionName])
+                    .join(',');
+            } else {
+                this.fbData.tabs = this.fbData.tabs
+                    .split(',')
+                    .filter(t => t !== optionName)
+                    .join(',');
+            }
+        } else {
+            if (optionName === 'show_cover') {
+                this.fbData.hide_cover = !widgetValue;
+            } else {
+                this.fbData[optionName] = widgetValue;
+            }
+        }
+        return this._markFbElement();
     },
     /**
-     * @override
+     * Sets the facebook page's URL.
+     *
+     * @see this.selectClass for parameters
      */
-    destroy: function () {
-        this._super.apply(this, arguments);
-        this.$target.off('.facebook_page_option');
+    pageUrl: function (previewMode, widgetValue, params) {
+        this.fbData.href = widgetValue;
+        return this._markFbElement();
     },
 
     //--------------------------------------------------------------------------
-    // Options
+    // Private
     //--------------------------------------------------------------------------
 
     /**
-     * Opens a dialog to configure the facebook page options.
+     * Sets the correct dataAttributes on the facebook iframe and refreshes it.
      *
      * @see this.selectClass for parameters
      */
-    fbPageOptions: function () {
-        var dialog = new FacebookPageDialog(this, this.fbData).open();
-        dialog.on('save', this, function (fbData) {
-            this.$target.empty();
-            this.fbData = fbData;
-            options.registry.facebookPage.prototype.markFbElement(this, this.$target, this.fbData);
+    _markFbElement: function () {
+        return this._checkURL().then(() => {
+            // Managing height based on options
+            if (this.fbData.tabs) {
+                this.fbData.height = this.fbData.tabs === 'events' ? 300 : 500;
+            } else if (this.fbData.small_header) {
+                this.fbData.height = this.fbData.show_facepile ? 165 : 70;
+            } else {
+                this.fbData.height = this.fbData.show_facepile ? 225 : 150;
+            }
+            _.each(this.fbData, (value, key) => {
+                this.$target.attr('data-' + key, value);
+                this.$target.data(key, value);
+            });
         });
     },
-
-    //--------------------------------------------------------------------------
-    // Static
-    //--------------------------------------------------------------------------
-
     /**
-     * @static
+     * @override
      */
-    markFbElement: function (self, $el, fbData) {
-        _.each(fbData, function (value, key) {
-            $el.attr('data-' + key, value);
-            $el.data(key, value);
-        });
-        self._refreshPublicWidgets($el);
+    _computeWidgetState: function (methodName, params) {
+        const optionName = params.optionName;
+        switch (methodName) {
+            case 'toggleOption': {
+                if (optionName.startsWith('tab.')) {
+                    return this.fbData.tabs.split(',').includes(optionName.replace(/^tab./, ''));
+                } else {
+                    if (optionName === 'show_cover') {
+                        return !this.fbData.hide_cover;
+                    }
+                    return this.fbData[optionName];
+                }
+            }
+            case 'pageUrl': {
+                return this._checkURL().then(() => this.fbData.href);
+            }
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @private
+     */
+    _checkURL: function () {
+        const defaultURL = 'https://www.facebook.com/Odoo';
+        const match = this.fbData.href.match(/^(?:https?:\/\/)?(?:www\.)?(?:fb|facebook)\.com\/(?:([\w.]+)|[^/?#]+-([0-9]{15,16}))(?:$|[/?# ])/);
+        if (match) {
+            // Check if the page exists on Facebook or not
+            return new Promise((resolve, reject) => $.ajax({
+                url: 'https://graph.facebook.com/' + (match[2] || match[1]) + '/picture',
+                success: () => resolve(),
+                error: () => {
+                    this.fbData.href = defaultURL;
+                    resolve();
+                },
+            }));
+        }
+        this.fbData.href = defaultURL;
+        return Promise.resolve();
     },
 });
 });
diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml
deleted file mode 100644
index d036e68b261..00000000000
--- a/addons/website/static/src/xml/website.facebook_page.xml
+++ /dev/null
@@ -1,70 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<templates>
-<div t-name="website.facebook_page_dialog">
-    <div class="row">
-        <form class="col-lg-6">
-            <div class="form-group form-row">
-                <label class="col-form-label col-md-3">Page URL</label>
-                <div class="col-md-9">
-                    <input class="form-control o_facebook_page_url" required="required" t-att-value="widget.fbData.href"/>
-                </div>
-            </div>
-            <div class="form-group form-row o_facebook_tabs">
-                <t t-set="fb_tabs" t-value="widget.fbData.tabs and widget.fbData.tabs.split(',') or []"/>
-                <label class="col-form-label col-md-3">Tabs</label>
-                <div class="col-md-9">
-                    <div class="custom-control custom-checkbox">
-                        <input type="checkbox" id="o_facebook_page_tab_timeline_checkbox" class="custom-control-input" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>
-                        <label class="custom-control-label" for="o_facebook_page_tab_timeline_checkbox">Timeline</label>
-                    </div>
-                    <div class="custom-control custom-checkbox">
-                        <input type="checkbox" id="o_facebook_page_tab_events_checkbox" class="custom-control-input" name="events" t-att-checked="_.contains(fb_tabs, 'events') or None"/>
-                        <label class="custom-control-label" for="o_facebook_page_tab_events_checkbox">Events</label>
-                    </div>
-                    <div class="custom-control custom-checkbox">
-                        <input type="checkbox" id="o_facebook_page_tab_messages_checkbox" class="custom-control-input" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>
-                        <label class="custom-control-label" for="o_facebook_page_tab_messages_checkbox">Messages</label>
-                    </div>
-                </div>
-             </div>
-            <div class="form-group form-row o_facebook_options">
-                <label class="col-form-label col-md-3">Options</label>
-                <div class="col-md-9 mt8">
-                <label class="o_switch">
-                    <input name="small_header" type="checkbox" t-att-checked="widget.fbData.small_header or None"/>
-                    <span/>
-                    Use Small Header
-                </label>
-                </div>
-                <div class="offset-md-3 mt16 col-md-9">
-                <label class="o_switch">
-                    <input name="hide_cover" type="checkbox" t-att-checked="widget.fbData.hide_cover or None"/>
-                    <span/>
-                    Hide Cover Photo
-                </label>
-                </div>
-                <div class="offset-md-3 mt16 col-md-9">
-                <label class="o_switch">
-                    <input name="show_facepile" type="checkbox" t-att-checked="widget.fbData.show_facepile or None"/>
-                    <span/>
-                    Show Friend's Faces
-                </label>
-                </div>
-            </div>
-        </form>
-        <div class="col-lg-6" style="border-left: 1px solid #eeeeee;">
-            <div class="form-group text-center">
-                <label>Preview</label>
-                <div class="alert alert-warning d-none facebook_page_warning text-center" role="alert">
-                    <div>
-                        <i class="fa fa-exclamation-triangle fa-3x" role="img" aria-label="Warning" title="Warning"></i>
-                    </div>
-                    <h4 class="mb0">Invalid Facebook Page Url</h4>
-                    <div>Please enter valid facebook page URL for preview</div>
-                </div>
-                <div class="o_facebook_page o_facebook_preview"/>
-            </div>
-        </div>
-    </div>
-</div>
-</templates>
diff --git a/addons/website/views/snippets/s_facebook_page.xml b/addons/website/views/snippets/s_facebook_page.xml
index 47237537949..ba4cb5d960a 100644
--- a/addons/website/views/snippets/s_facebook_page.xml
+++ b/addons/website/views/snippets/s_facebook_page.xml
@@ -1,24 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
+<!-- Snippet template -->
 <template id="s_facebook_page" name="Facebook Page">
-    <div class="o_facebook_page">
-        <div class="o_facebook_alert alert alert-info" role="status">
-            <span class="o_add_facebook_page">
-                <i class="fa fa-plus-circle"/> Add Facebook Page
-            </span>
-        </div>
-    </div>
+    <div class="o_facebook_page"/>
 </template>
 
+<!-- Snippet options-->
 <template id="s_facebook_page_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
-        <div data-js="facebookPage" data-selector=".o_facebook_page">
-            <we-button data-fb-page-options="true" data-no-preview="true">Facebook Options</we-button>
+        <div string="Page URL" data-js="facebookPage" data-selector=".o_facebook_page">
+            <we-input data-page-url="https://www.facebook.com/Odoo" data-no-preview="true"/>
+            <we-checkbox string="Cover Photo" data-option-name="show_cover" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Timeline" data-option-name="tab.timeline" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Events" data-option-name="tab.events" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Messages" data-option-name="tab.messages" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Small Header" data-option-name="small_header" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Friends' Faces" data-option-name="show_facepile" data-toggle-option="true" data-no-preview="true"/>
         </div>
     </xpath>
 </template>
 
+<!-- Snippet assets -->
 <template id="assets_snippet_s_facebook_page_js_000" inherit_id="website.assets_frontend">
     <xpath expr="//script[last()]" position="after">
         <script type="text/javascript" src="/website/static/src/snippets/s_facebook_page/000.js"/>