1 // TODO: Open share links in a small window |
1 // TODO: Open share links in a small window |
|
2 import _ from "lodash"; |
|
3 import jQuery from "jquery"; |
2 |
4 |
3 IriSP.Widgets.Social = function(player, config) { |
5 import socialStyles from "./Social.module.css"; |
4 IriSP.Widgets.Widget.call(this, player, config); |
|
5 }; |
|
6 |
6 |
7 IriSP.Widgets.Social.prototype = new IriSP.Widgets.Widget(); |
7 const Social = function (ns) { |
|
8 return class extends ns.Widgets.Widget { |
|
9 constructor(player, config) { |
|
10 super(player, config); |
|
11 } |
8 |
12 |
9 IriSP.Widgets.Social.prototype.defaults = { |
13 static defaults = { |
10 text: "", |
14 text: "", |
11 url: "", |
15 url: "", |
12 show_url: true, |
16 show_url: true, |
13 show_twitter: true, |
17 show_twitter: true, |
14 show_fb: true, |
18 show_fb: true, |
15 show_gplus: true, |
19 show_gplus: true, |
16 show_mail: true |
20 show_mail: true, |
17 }; |
21 }; |
18 |
22 |
19 IriSP.Widgets.Social.prototype.template = |
23 static template = |
20 '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">' |
24 '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">' + |
21 + '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/></div></div>{{/show_url}}' |
25 '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/></div></div>{{/show_url}}' + |
22 + '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}' |
26 '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}' + |
23 + '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}' |
27 '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}' + |
24 + '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}' |
28 '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}' + |
25 + '{{#show_mail}}<a href="#" target="_blank" class="Ldt-Social-Mail Ldt-TraceMe" title="{{l10n.share_mail}}"></a>{{/show_mail}}</span>'; |
29 '{{#show_mail}}<a href="#" target="_blank" class="Ldt-Social-Mail Ldt-TraceMe" title="{{l10n.share_mail}}"></a>{{/show_mail}}</span>'; |
26 |
30 |
27 IriSP.Widgets.Social.prototype.messages = { |
31 static messages = { |
28 "fr": { |
32 fr: { |
29 share_on: "Partager sur", |
33 share_on: "Partager sur", |
30 share_mail: "Envoyer par courriel", |
34 share_mail: "Envoyer par courriel", |
31 share_link: "Partager le lien hypertexte", |
35 share_link: "Partager le lien hypertexte", |
32 copy: "Copier" |
36 copy: "Copier", |
33 }, |
37 }, |
34 "en" : { |
38 en: { |
35 share_on: "Share on", |
39 share_on: "Share on", |
36 share_mail: "Share by e-mail", |
40 share_mail: "Share by e-mail", |
37 share_link: "Share hypertext link", |
41 share_link: "Share hypertext link", |
38 copy: "Copy" |
42 copy: "Copy", |
|
43 }, |
|
44 }; |
|
45 |
|
46 draw() { |
|
47 this.renderTemplate(); |
|
48 this.clipId = _.uniqueId("Ldt-Social-CopyBtn-"); |
|
49 this.$.find(".Ldt-Social-CopyBtn").attr("id", this.clipId); |
|
50 var _this = this; |
|
51 this.$.find(".Ldt-Social-Url") |
|
52 .click(function () { |
|
53 _this.toggleCopy(); |
|
54 return false; |
|
55 }) |
|
56 .on("dragstart", function (e) { |
|
57 e.originalEvent.dataTransfer.setData("text/x-iri-title", _this.text); |
|
58 e.originalEvent.dataTransfer.setData("text/x-iri-uri", _this.url); |
|
59 }); |
|
60 this.$.find(".Ldt-Social-Input").focus(function () { |
|
61 this.select(); |
|
62 }); |
|
63 this.$.find(".Ldt-Social-Ext").click(function () { |
|
64 window.open( |
|
65 jQuery(this).attr("href"), |
|
66 "_blank", |
|
67 "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0" |
|
68 ); |
|
69 return false; |
|
70 }); |
|
71 this.updateUrls(this.url, this.text); |
39 } |
72 } |
|
73 |
|
74 toggleCopy() { |
|
75 var _pop = this.$.find(".Ldt-Social-UrlPop"); |
|
76 _pop.toggle(); |
|
77 this.$.find(".Ldt-Social-Input").val(this.url).focus(); |
|
78 } |
|
79 |
|
80 updateUrls(_url, _text) { |
|
81 this.url = _url; |
|
82 this.text = _text; |
|
83 this.$.find(".Ldt-Social-Fb").attr( |
|
84 "href", |
|
85 "http://www.facebook.com/share.php?" + |
|
86 jQuery.param({ u: _url, t: _text }) |
|
87 ); |
|
88 this.$.find(".Ldt-Social-Twitter").attr( |
|
89 "href", |
|
90 "https://twitter.com/intent/tweet?" + |
|
91 jQuery.param({ url: _url, text: _text }) |
|
92 ); |
|
93 this.$.find(".Ldt-Social-Gplus").attr( |
|
94 "href", |
|
95 "https://plus.google.com/share?" + |
|
96 jQuery.param({ url: _url, title: _text }) |
|
97 ); |
|
98 this.$.find(".Ldt-Social-Mail").attr( |
|
99 "href", |
|
100 "mailto:?" + jQuery.param({ subject: _text, body: _text + ": " + _url }) |
|
101 ); |
|
102 } |
|
103 }; |
40 }; |
104 }; |
41 |
105 |
42 IriSP.Widgets.Social.prototype.draw = function() { |
106 export { Social, socialStyles }; |
43 this.renderTemplate(); |
|
44 this.clipId = IriSP._.uniqueId("Ldt-Social-CopyBtn-"); |
|
45 this.$.find(".Ldt-Social-CopyBtn").attr("id", this.clipId); |
|
46 var _this = this; |
|
47 this.$.find(".Ldt-Social-Url").click(function() { |
|
48 _this.toggleCopy(); |
|
49 return false; |
|
50 }).on("dragstart", function(e) { |
|
51 e.originalEvent.dataTransfer.setData("text/x-iri-title",_this.text); |
|
52 e.originalEvent.dataTransfer.setData("text/x-iri-uri",_this.url); |
|
53 }); |
|
54 this.$.find(".Ldt-Social-Input").focus(function() { |
|
55 this.select(); |
|
56 }); |
|
57 this.$.find(".Ldt-Social-Ext").click(function() { |
|
58 window.open( |
|
59 IriSP.jQuery(this).attr("href"), |
|
60 "_blank", |
|
61 "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0"); |
|
62 return false; |
|
63 }); |
|
64 this.updateUrls(this.url, this.text); |
|
65 }; |
|
66 |
|
67 IriSP.Widgets.Social.prototype.toggleCopy = function() { |
|
68 var _pop = this.$.find(".Ldt-Social-UrlPop"); |
|
69 _pop.toggle(); |
|
70 this.$.find(".Ldt-Social-Input").val(this.url).focus(); |
|
71 }; |
|
72 |
|
73 IriSP.Widgets.Social.prototype.updateUrls = function(_url, _text) { |
|
74 this.url = _url; |
|
75 this.text = _text; |
|
76 this.$.find(".Ldt-Social-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text })); |
|
77 this.$.find(".Ldt-Social-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text })); |
|
78 this.$.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + IriSP.jQuery.param({ url: _url, title: _text })); |
|
79 this.$.find(".Ldt-Social-Mail").attr("href", "mailto:?" + IriSP.jQuery.param({ subject: _text, body: _text + ": " + _url })); |
|
80 }; |
|