[REF] website: move s_facebook_page snippet to dedicated files

9 files changed, 294 insertions, 254 deletions

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 8364f932279..51d2dee023d 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -43,6 +43,7 @@
         'views/snippets/s_rating.xml',
         'views/snippets/s_btn.xml',
         'views/snippets/s_hr.xml',
+        'views/snippets/s_facebook_page.xml',
         'views/website_views.xml',
         'views/website_visitor_views.xml',
         'views/res_config_settings_views.xml',
diff --git a/temp_js b/addons/website/static/src/js/content/snippets.animation.js
index f9883534bd5..a7c4f164ac7 100644
--- a/temp_js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1043,51 +1043,6 @@ registry.socialShare = publicWidget.Widget.extend({
     },
 });
 
-registry.facebookPage = publicWidget.Widget.extend({
-    selector: '.o_facebook_page',
-    disabledInEditableMode: false,
-
-    /**
-     * @override
-     */
-    start: function () {
-        var def = this._super.apply(this, arguments);
-
-        var params = _.pick(this.$el.data(), 'href', 'height', 'tabs', 'small_header', 'hide_cover', 'show_facepile');
-        if (!params.href) {
-            return def;
-        }
-        params.width = utils.confine(Math.floor(this.$el.width()), 180, 500);
-
-        var src = $.param.querystring('https://www.facebook.com/plugins/page.php', params);
-        this.$iframe = $('<iframe/>', {
-            src: src,
-            width: params.width,
-            height: params.height,
-            css: {
-                border: 'none',
-                overflow: 'hidden',
-            },
-            scrolling: 'no',
-            frameborder: '0',
-            allowTransparency: 'true',
-        });
-        this.$el.append(this.$iframe);
-
-        return def;
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-
-        if (this.$iframe) {
-            this.$iframe.remove();
-        }
-    },
-});
-
 registry.anchorSlide = publicWidget.Widget.extend({
     selector: 'a[href^="/"][href*="#"], a[href^="#"]',
     events: {
diff --git a/temp_options b/addons/website/static/src/js/editor/snippets.options.js
index 14005618d11..3951b115f7c 100644
--- a/temp_options
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -710,200 +710,6 @@ options.registry.parallax = options.Class.extend({
     },
 });
 
-var 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.
-     *
-     * @override
-     */
-    willStart: function () {
-        var defs = [this._super.apply(this, arguments)];
-
-        var defaults = {
-            href: false,
-            height: 215,
-            width: 350,
-            tabs: '',
-            small_header: false,
-            hide_cover: false,
-            show_facepile: false,
-        };
-        this.fbData = _.defaults(_.pick(this.$target.data(), _.keys(defaults)), defaults);
-
-        if (!this.fbData.href) {
-            // Fetches the default url for facebook page from website config
-            var self = this;
-            defs.push(this._rpc({
-                model: 'website',
-                method: 'search_read',
-                args: [[], ['social_facebook']],
-                limit: 1,
-            }).then(function (res) {
-                if (res) {
-                    self.fbData.href = res[0].social_facebook || 'https://www.facebook.com/Odoo';
-                }
-            }));
-        }
-
-        return Promise.all(defs);
-    },
-    /**
-     * @override
-     */
-    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);
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-        this.$target.off('.facebook_page_option');
-    },
-
-    //--------------------------------------------------------------------------
-    // Options
-    //--------------------------------------------------------------------------
-
-    /**
-     * Opens a dialog to configure the facebook page options.
-     *
-     * @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);
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Static
-    //--------------------------------------------------------------------------
-
-    /**
-     * @static
-     */
-    markFbElement: function (self, $el, fbData) {
-        _.each(fbData, function (value, key) {
-            $el.attr('data-' + key, value);
-            $el.data(key, value);
-        });
-        self._refreshPublicWidgets($el);
-    },
-});
-
 options.registry.ul = options.Class.extend({
     /**
      * @override
diff --git a/temp_scss b/addons/website/static/src/scss/website.scss
index 9d2276a438f..9d2276a438f 100644
--- a/temp_scss
+++ b/addons/website/static/src/scss/website.scss
diff --git a/addons/website/static/src/snippets/s_facebook_page/000.js b/addons/website/static/src/snippets/s_facebook_page/000.js
new file mode 100644
index 00000000000..3227631a882
--- /dev/null
+++ b/addons/website/static/src/snippets/s_facebook_page/000.js
@@ -0,0 +1,55 @@
+odoo.define('website.s_facebook_page', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+var utils = require('web.utils');
+
+const FacebookPageWidget = publicWidget.Widget.extend({
+    selector: '.o_facebook_page',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    start: function () {
+        var def = this._super.apply(this, arguments);
+
+        var params = _.pick(this.$el.data(), 'href', 'height', 'tabs', 'small_header', 'hide_cover', 'show_facepile');
+        if (!params.href) {
+            return def;
+        }
+        params.width = utils.confine(Math.floor(this.$el.width()), 180, 500);
+
+        var src = $.param.querystring('https://www.facebook.com/plugins/page.php', params);
+        this.$iframe = $('<iframe/>', {
+            src: src,
+            width: params.width,
+            height: params.height,
+            css: {
+                border: 'none',
+                overflow: 'hidden',
+            },
+            scrolling: 'no',
+            frameborder: '0',
+            allowTransparency: 'true',
+        });
+        this.$el.append(this.$iframe);
+
+        return def;
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+
+        if (this.$iframe) {
+            this.$iframe.remove();
+        }
+    },
+});
+
+publicWidget.registry.facebookPage = FacebookPageWidget;
+
+return FacebookPageWidget;
+});
diff --git a/addons/website/static/src/snippets/s_facebook_page/options.js b/addons/website/static/src/snippets/s_facebook_page/options.js
new file mode 100644
index 00000000000..39d88d5b1a3
--- /dev/null
+++ b/addons/website/static/src/snippets/s_facebook_page/options.js
@@ -0,0 +1,203 @@
+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.
+     *
+     * @override
+     */
+    willStart: function () {
+        var defs = [this._super.apply(this, arguments)];
+
+        var defaults = {
+            href: false,
+            height: 215,
+            width: 350,
+            tabs: '',
+            small_header: false,
+            hide_cover: false,
+            show_facepile: false,
+        };
+        this.fbData = _.defaults(_.pick(this.$target.data(), _.keys(defaults)), defaults);
+
+        if (!this.fbData.href) {
+            // Fetches the default url for facebook page from website config
+            var self = this;
+            defs.push(this._rpc({
+                model: 'website',
+                method: 'search_read',
+                args: [[], ['social_facebook']],
+                limit: 1,
+            }).then(function (res) {
+                if (res) {
+                    self.fbData.href = res[0].social_facebook || 'https://www.facebook.com/Odoo';
+                }
+            }));
+        }
+
+        return Promise.all(defs);
+    },
+    /**
+     * @override
+     */
+    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);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+        this.$target.off('.facebook_page_option');
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Opens a dialog to configure the facebook page options.
+     *
+     * @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);
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Static
+    //--------------------------------------------------------------------------
+
+    /**
+     * @static
+     */
+    markFbElement: function (self, $el, fbData) {
+        _.each(fbData, function (value, key) {
+            $el.attr('data-' + key, value);
+            $el.data(key, value);
+        });
+        self._refreshPublicWidgets($el);
+    },
+});
+});
diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml
index 355a8e4e54a..93c2532f29d 100644
--- a/addons/website/views/assets.xml
+++ b/addons/website/views/assets.xml
@@ -108,6 +108,7 @@
     <script type="text/javascript" src="/website/static/src/js/editor/editor.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/rte.summernote.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/snippets.options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_facebook_page/options.js"/>
 
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
diff --git a/addons/website/views/snippets/s_facebook_page.xml b/addons/website/views/snippets/s_facebook_page.xml
new file mode 100644
index 00000000000..a3835777159
--- /dev/null
+++ b/addons/website/views/snippets/s_facebook_page.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<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>
+</template>
+
+<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>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_facebook_page_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_facebook_page/000.scss"/>
+    </xpath>
+</template>
+
+<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"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/temp_xml b/addons/website/views/snippets/snippets.xml
index 0fe7a13ea79..61454331697 100644
--- a/temp_xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1,16 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<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>
-</template>
-
 <template id="s_image_gallery" name="Image Gallery">
     <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
         <div class="container">
@@ -799,11 +789,6 @@
         </div>
     </div>
 
-    <!-- Facebook Page -->
-    <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>
-
     <!-- Accordion -->
     <div data-js="collapse"
          data-selector='.accordion > .card'