[REF] website: move s_facebook_page snippet to dedicated files

This commit is contained in:
qsm-odoo
2019-12-18 01:58:28 +01:00
9 changed files with 294 additions and 254 deletions
+1
View File
@@ -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',
@@ -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: {
@@ -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
@@ -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;
});
@@ -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);
},
});
});
+1
View File
@@ -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"/>
@@ -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>
@@ -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'