[IMP] website: add facebook page snippet

6 files changed, 337 insertions, 2 deletions

diff --git a/addons/website/static/src/img/blocks/facebook_page.png b/addons/website/static/src/img/blocks/facebook_page.png
new file mode 100644
index 00000000000..e5d22e8c035
--- /dev/null
+++ b/addons/website/static/src/img/blocks/facebook_page.png
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 725b6b1d66b..b02abc8a80f 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -8,6 +8,7 @@ odoo.define('website.content.snippets.animation', function (require) {
 var Class = require('web.Class');
 var core = require('web.core');
 var mixins = require('web.mixins');
+var utils = require('web.utils');
 var Widget = require('web.Widget');
 
 var qweb = core.qweb;
@@ -865,6 +866,50 @@ registry.socialShare = Animation.extend({
     },
 });
 
+registry.facebookPage = Animation.extend({
+    selector: '.o_facebook_page',
+
+    /**
+     * @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(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();
+        }
+    },
+});
+
 /**
  * This is a fix for apple device (<= IPhone 4, IPad 2)
  * Standard bootstrap requires data-toggle='collapse' element to be <a/> tags.
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 49fc4d26376..e0dced9caa1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -394,6 +394,204 @@ options.registry.parallax = options.Class.extend({
     },
 });
 
+var FacebookPageDialog = widgets.Dialog.extend({
+    xmlDependencies: widgets.Dialog.prototype.xmlDependencies.concat(
+        ['/website/static/src/xml/website.facebook_page.xml']
+    ),
+    template: 'website.facebook_page_dialog',
+    events: _.extend({}, widgets.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+)/);
+        if (match) {
+            // Check if the page exists on Facebook or not
+            $.ajax({
+                url: 'https://graph.facebook.com/' + 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, 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('animation_stop_demand', {
+            $target: this.$previewPage,
+        });
+        this.$('.facebook_page_warning').toggleClass('hidden', 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'), function (tab) { return 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 animation
+     * 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 $.when.apply($, 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.trigger_up('animation_start_demand', {
+            editableMode: true,
+            $target: $el,
+        });
+    },
+});
+
 options.registry.ul = options.Class.extend({
     /**
      * @override
diff --git a/addons/website/static/src/less/website.edit_mode.less b/addons/website/static/src/less/website.edit_mode.less
index 2a092ab98d2..f4f2ab45dd0 100644
--- a/addons/website/static/src/less/website.edit_mode.less
+++ b/addons/website/static/src/less/website.edit_mode.less
@@ -122,3 +122,13 @@ table.editorbar-panel {
 .editor_enable .js_language_selector {
     display: none;
 }
+
+// Facebook Page
+.editor_enable .o_facebook_page:not(.o_facebook_preview) {
+    iframe {
+        pointer-events: none;
+    }
+    .o_facebook_alert .o_add_facebook_page {
+        cursor: pointer;
+    }
+}
diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml
new file mode 100644
index 00000000000..cdc0267d69b
--- /dev/null
+++ b/addons/website/static/src/xml/website.facebook_page.xml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates>
+<div t-name="website.facebook_page_dialog">
+    <div class="row">
+        <form class="col-md-6 form-horizontal">
+            <div class="form-group">
+                <label class="control-label col-sm-3">Page URL</label>
+                <div class="col-sm-9">
+                    <input class="form-control o_facebook_page_url" required="required" t-att-value="widget.fbData.href"/>
+                </div>
+            </div>
+            <div class="form-group o_facebook_tabs">
+                <t t-set="fb_tabs" t-value="widget.fbData.tabs and widget.fbData.tabs.split(',') or []"/>
+                <label class="control-label col-sm-3">Tabs</label>
+                <div class="col-sm-3 checkbox">
+                    <label><input type="checkbox" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>Timeline</label>
+                </div>
+                <div class="col-sm-3 checkbox">
+                    <label><input type="checkbox" name="events" t-att-checked="_.contains(fb_tabs, 'events') or None"/>Events</label>
+                </div>
+                <div class="col-sm-3 checkbox">
+                    <label><input type="checkbox" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>Messages</label>
+                </div>
+             </div>
+            <div class="form-group o_facebook_options">
+                <label class="control-label col-sm-3">Options</label>
+                <div class="col-sm-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="col-sm-offset-3 mt16 col-sm-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="col-sm-offset-3 mt16 col-sm-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-md-6" style="border-left: 1px solid #eeeeee;">
+            <div class="form-group text-center">
+                <label>Preview</label>
+                <div class="alert alert-warning hidden facebook_page_warning text-center">
+                    <div>
+                        <i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></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.xml b/addons/website/views/snippets.xml
index b2ce99aa40d..6867b32ae2c 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -283,6 +283,16 @@
     </div>
 </template>
 
+<template id="s_facebook_page" name="Facebook Page">
+    <div class="o_facebook_page">
+        <div class="o_facebook_alert alert alert-info">
+            <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">
@@ -728,6 +738,7 @@
                     <t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
                     <t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
                     <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_share.png"/>
+                    <t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/blocks/facebook_page.png"/>
                 </div>
             </div>
         </div>
@@ -907,8 +918,8 @@
     </div>
 
     <div data-js='content'
-        data-selector="blockquote, .well, .s_panel, .oe_share, .o_image_floating"
-        data-drop-near="p, h1, h2, h3, blockquote, .well, .s_panel, .oe_share"
+        data-selector="blockquote, .well, .s_panel, .o_facebook_page, .oe_share, .o_image_floating"
+        data-drop-near="p, h1, h2, h3, blockquote, .well, .o_facebook_page, .s_panel, .oe_share"
         data-drop-in=".content">
     </div>
 
@@ -961,6 +972,12 @@
         <li data-toggle-class="o_ul_folded"><a href="#">Folded list</a></li>
     </div>
 
+    <div data-js="facebookPage" data-selector=".o_facebook_page">
+        <li data-fb-page-options="true" data-no-preview="true">
+            <a href="#"><i class="fa fa-facebook"/>Options</a>
+        </li>
+    </div>
+
     <div data-js='collapse'
          data-selector='.panel-group > .panel:has(> .panel-collapse)'
          data-drop-in='.panel-group:has(> .panel > .panel-collapse)'>