Skip to content

Commit 24aae25

Browse files
wcoderwcoder
committed
Added basic implementation
1 parent e36d05b commit 24aae25

File tree

2 files changed

+192
-0
lines changed

2 files changed

+192
-0
lines changed

‎example/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Test page for sharing</title>
5+
<style>
6+
/* Few styles :) */
7+
.share-btn > a {
8+
border: 1px solid #ccc;
9+
padding: 5px;
10+
}
11+
.share-btn > a:hover {
12+
cursor: pointer;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
18+
<p>Share this page with:</p>
19+
20+
<!-- data-url="" data-title="" data-desc="" -->
21+
<div class="share-btn" >
22+
<a class="btn-vk" data-id="vk">VK</a>
23+
<a class="btn-facebook" data-id="fb">Facebook</a>
24+
<a class="btn-twitter" data-id="tw">Twitter</a>
25+
<a class="btn-google-plus" data-id="gp">Google+</a>
26+
<a class="btn-linkedin" data-id="in">LinkedIn</a>
27+
<a class="btn-mail" data-id="mail">EMail</a>
28+
</div>
29+
30+
31+
<script src="../src/share-buttons.js"></script>
32+
</body>
33+
</html>

‎src/share-buttons.js

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
(function () {
2+
'use strict';
3+
4+
var FB_LINK = 'https://www.facebook.com/sharer/sharer.php?u=';
5+
var VK_LINK = 'https://vk.com/share.php?url={0}&description={1}. {2}';
6+
var TW_LINK = 'https://twitter.com/intent/tweet?url=';
7+
var GP_LINK = 'https://plus.google.com/share?url=';
8+
var IN_LINK = 'https://www.linkedin.com/shareArticle?mini=true&url=';
9+
10+
// from http://evgeniy.pakalo.name/post/49
11+
var _F = function(str, args){
12+
return str.replace(/\{(\d+)\}/g, function(m,n){
13+
return args[n] ? args[n] : m;
14+
});
15+
};
16+
17+
function ShareButtons() {
18+
var width = 600,
19+
height = 400;
20+
21+
this.init = function() {
22+
var _this = this,
23+
share = document.querySelectorAll('.share-btn');
24+
for (var i = 0, l = share.length; i < l; i++) {
25+
var url = share[i].getAttribute('data-url') || location.href,
26+
title = share[i].getAttribute('data-title') || document.title,
27+
desc = share[i].getAttribute('data-desc') || ' ',
28+
el = share[i].querySelectorAll('a');
29+
30+
for (var a = 0, al = el.length; a < al; a++) {
31+
var id = el[a].getAttribute('data-id');
32+
if (id) {
33+
_this.addEventListener(el[a], 'click', {
34+
id: id,
35+
url: url,
36+
title: title,
37+
desc: desc
38+
});
39+
}
40+
}
41+
}
42+
};
43+
44+
this.addEventListener = function(el, eventName, opt) {
45+
var _this = this,
46+
handler = function () {
47+
_this.share(opt.id, opt.url, opt.title, opt.desc);
48+
};
49+
50+
if (el.addEventListener) {
51+
el.addEventListener(eventName, handler);
52+
} else {
53+
el.attachEvent('on' + eventName, function() {
54+
handler.call(el);
55+
});
56+
}
57+
};
58+
59+
this.share = function(id, url, title, desc) {
60+
url = encodeURIComponent(url);
61+
desc = encodeURIComponent(desc);
62+
title = encodeURIComponent(title);
63+
64+
switch (id) {
65+
case 'fb':
66+
this.popupCenter(FB_LINK + url, this.title, this.width, this.height);
67+
break;
68+
69+
case 'vk':
70+
var url = _F(VK_LINK, [url, title, desc]);
71+
72+
this.popupCenter(url, this.title, this.width, this.height);
73+
break;
74+
75+
case 'tw':
76+
var text = title || desc || '';
77+
if (title.length > 0 && desc.length > 0) {
78+
text = title + ' - ' + desc;
79+
}
80+
if (text.length > 0) {
81+
text = '&text=' + text;
82+
}
83+
84+
this.popupCenter(TW_LINK + url + text, this.title, this.width, this.height);
85+
break;
86+
87+
case 'gp':
88+
this.popupCenter(GP_LINK + url, this.title, this.width, this.height);
89+
break;
90+
91+
case 'in':
92+
this.popupCenter(IN_LINK + url, this.title, this.width, this.height);
93+
break;
94+
95+
case 'mail':
96+
var text = title || desc || '';
97+
if (title.length > 0 && desc.length > 0) {
98+
text = title + ' - ' + desc;
99+
}
100+
if (text.length > 0) {
101+
text = text + ' / ';
102+
}
103+
if (title.length > 0) {
104+
title = title + ' / ';
105+
}
106+
107+
var mail = 'mailto:?Subject=' + title + this.title + '&body=' + text + url;
108+
this.newTab(mail);
109+
break;
110+
111+
default:
112+
break;
113+
};
114+
};
115+
116+
this.newTab = function (url) {
117+
var win = window.open(url, '_blank');
118+
win.focus();
119+
};
120+
121+
this.popupCenter = function (url, title, w, h) {
122+
var dualScreenLeft = window.screenLeft !== undefined
123+
? window.screenLeft
124+
: screen.left;
125+
var dualScreenTop = window.screenTop !== undefined
126+
? window.screenTop
127+
: screen.top;
128+
129+
var width = window.innerWidth
130+
? window.innerWidth
131+
: document.documentElement.clientWidth
132+
? document.documentElement.clientWidth
133+
: screen.width;
134+
var height = window.innerHeight
135+
? window.innerHeight
136+
: document.documentElement.clientHeight
137+
? document.documentElement.clientHeight
138+
: screen.height;
139+
140+
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
141+
var top = ((height / 3) - (h / 3)) + dualScreenTop;
142+
143+
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
144+
145+
if (window.focus) {
146+
newWindow.focus();
147+
}
148+
}
149+
};
150+
151+
152+
153+
// start
154+
var sb = new ShareButtons();
155+
sb.init();
156+
157+
}());
158+
159+

0 commit comments

Comments
 (0)