[IMP] website: added social share widget
A new widget has been developed that allows to share content on social networks. It is displayed like a simple share link in a popover for four social networks (facebook, twitter, linkedin, google+ (really ?)). Courtesy of RD India: Ajay Patel (apa@odoo.com), Jaysinh Shukla (jsh@odoo.com) Courtesy of use Merge: Damien Bouvy (dbo@odoo.com)
This commit is contained in:
Jaysinh Shukla
committed by
Thibault Delavallée
Thibault Delavallée
parent
88a9a45cf2
commit
1c91e27c8c
@@ -0,0 +1,79 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var _t = openerp._t;
|
||||
var website = openerp.website;
|
||||
var qweb = openerp.qweb;
|
||||
website.add_template_file('/website/static/src/xml/website.share.xml');
|
||||
|
||||
website.social_share = openerp.Widget.extend({
|
||||
template: 'website.social_hover',
|
||||
/**
|
||||
:param element: element to bind popover
|
||||
:param social_list: list of social media strings available from
|
||||
['facebook','twitter', 'linkedin', 'google-plus']
|
||||
:param hashtags: string of hashtags for twitter
|
||||
*/
|
||||
init: function (parent) {
|
||||
this._super.apply(this, arguments);
|
||||
this.element = parent;
|
||||
if (parent.data('social')) {
|
||||
this.social_list = (parent.data('social')).split();
|
||||
} else {
|
||||
this.social_list = ['facebook','twitter', 'linkedin', 'google-plus'];
|
||||
}
|
||||
this.hashtags = parent.data('hashtags') || '';
|
||||
this.renderElement();
|
||||
this.bind_events();
|
||||
},
|
||||
bind_events: function () {
|
||||
$('.oe_social_facebook').click($.proxy(this.renderSocial, this, 'facebook'));
|
||||
$('.oe_social_twitter').click($.proxy(this.renderSocial, this, 'twitter'));
|
||||
$('.oe_social_linkedin').click($.proxy(this.renderSocial, this, 'linkedin'));
|
||||
$('.oe_social_google-plus').click($.proxy(this.renderSocial, this, 'google-plus'));
|
||||
},
|
||||
renderElement: function () {
|
||||
this.$el.append(
|
||||
qweb.render('website.social_hover', {medias: this.social_list}));
|
||||
//we need to re-render the element on each hover; popover has the nasty habit of not hiding but completely removing its
|
||||
// code from the page
|
||||
//so the binding is lost if we simply trigger on hover.
|
||||
this.element.popover({
|
||||
'content': this.$el.html(),
|
||||
'placement': 'bottom',
|
||||
'container': this.element,
|
||||
'html': true,
|
||||
'trigger': 'manual',
|
||||
'animation': false,
|
||||
}).popover("show").on("mouseleave", function () {
|
||||
var self = this;
|
||||
setTimeout(function () {
|
||||
if (! $(".popover:hover").length) {
|
||||
$(self).popover("destroy");
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
renderSocial: function(social) {
|
||||
var url = document.URL.split(/[?#]/)[0]; // get current url without query string
|
||||
var title = document.title.split(" | ")[0]; // get the page title without the company name
|
||||
var hashtags = ' #'+ document.title.split(" | ")[1].replace(' ','') + ' ' + this.hashtags; // company name without spaces (for hashtag)
|
||||
var social_network = {
|
||||
'facebook':'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url),
|
||||
'twitter': 'https://twitter.com/intent/tweet?original_referer=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(title + hashtags + ' - ' + url),
|
||||
'linkedin': 'https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title),
|
||||
'google-plus': 'https://plus.google.com/share?url=' + encodeURIComponent(url)
|
||||
};
|
||||
if (! _.contains(_.keys(social_network), social)) return;
|
||||
var window_height = 500, window_width = 500;
|
||||
window.open(social_network[social], '', 'menubar=no, toolbar=no, resizable=yes, scrollbar=yes, height=' + window_height + ',width=' + window_width);
|
||||
},
|
||||
});
|
||||
|
||||
// Initialize all social_share links when ready
|
||||
website.ready().done(function() {
|
||||
$('.oe_social_share').mouseenter(function() {
|
||||
new website.social_share($(this));
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="website.social_hover">
|
||||
<div class="row clearfix" style='font-size:16px'>
|
||||
<div class="col-xs-12 css_editable_mode_hidden">
|
||||
<t t-foreach="medias" t-as="media">
|
||||
<a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}">
|
||||
<span class="fa fa-square fa-stack-2x"></span>
|
||||
<span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -10,6 +10,7 @@
|
||||
<script type="text/javascript" src="/web/static/src/js/watch.js"></script>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/website.js"></script>
|
||||
<script type="text/javascript" src="/website/static/src/js/website.share.js"></script>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
|
||||
<script type="text/javascript" src="/web/static/lib/bootstrap/js/bootstrap.js"></script>
|
||||
@@ -77,6 +78,17 @@
|
||||
and main_object.website_meta_description or website_meta_description"/>
|
||||
<meta name="keywords" t-att-content="main_object and 'website_meta_keywords' in main_object
|
||||
and main_object.website_meta_keywords or website_meta_keywords"/>
|
||||
|
||||
<!-- OpenGraph tags for Facebook sharing -->
|
||||
<meta property="og:title" t-att-content="additional_title" />
|
||||
<meta property="og:site_name" t-att-content="res_company.name" />
|
||||
<t t-if="main_object and 'plain_content' in main_object and main_object.plain_content">
|
||||
<t t-set="og_description" t-value="main_object.plain_content[0:500]"/>
|
||||
<meta property="og:description" t-att-content="og_description" />
|
||||
<meta property='og:image' t-att-content="request.httprequest.url_root+'logo.png'"/>
|
||||
<meta property='og:url' t-att-content="request.httprequest.url_root+request.httprequest.path[1:end]"/>
|
||||
</t>
|
||||
|
||||
<title><t t-esc="title"/></title>
|
||||
|
||||
<t t-set="languages" t-value="website.get_languages() if website else None"/>
|
||||
|
||||
Reference in New Issue
Block a user