Skip to content

Commit 63cb882

Browse files
wcoderwcoder
committed
Refactoring script
1 parent 77c72cc commit 63cb882

File tree

1 file changed

+139
-127
lines changed

1 file changed

+139
-127
lines changed

‎src/share-buttons.js

Lines changed: 139 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,182 @@
1-
(function () {
1+
(function (window, document) {
22
'use strict';
33

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-
4+
/**
5+
* Class to display the buttons of social networks.
6+
*
7+
* @author Yauheni Pakala <[email protected]>
8+
* @version 1.0
9+
* @license MIT
10+
*/
1711
function ShareButtons() {
18-
var width = 600,
19-
height = 400;
12+
13+
var FB_LINK_FORMAT = 'https://www.facebook.com/sharer/sharer.php?u=',
14+
VK_LINK_FORMAT = 'https://vk.com/share.php?url={0}&description={1}. {2}',
15+
TW_LINK_FORMAT = 'https://twitter.com/intent/tweet?url=',
16+
MAIL_LINK_FORMAT = 'mailto:?Subject={0}{1}&body={2}{3}',
17+
18+
// from http://evgeniy.pakalo.name/post/49
19+
stringFormat = function (str, args) {
20+
return str.replace(/\{(\d+)\}/g, function (m, n) {
21+
return args[n] || m;
22+
});
23+
};
2024

21-
this.init = function() {
22-
var _this = this,
25+
/**
26+
* Method for initialize class for all elements
27+
*/
28+
this.init = function () {
29+
var i,
2330
share = document.querySelectorAll('.share-btn');
24-
25-
for (var i = 0, l = share.length; i < l; i++) {
26-
var url = this.getUrl(share[i]),
27-
title = this.getTitle(share[i]),
28-
desc = this.getDesc(share[i]),
29-
el = share[i].querySelectorAll('a');
30-
31-
for (var a = 0, al = el.length; a < al; a++) {
32-
var id = el[a].getAttribute('data-id');
33-
if (id) {
34-
_this.addEventListener(el[a], 'click', {
35-
id: id,
36-
url: url,
37-
title: title,
38-
desc: desc
39-
});
40-
}
31+
32+
for (i in share) {
33+
if (share.hasOwnProperty(i)) {
34+
this.initForElement(share[i]);
4135
}
4236
}
4337
};
4438

39+
/**
40+
* Method for initialize class for all elements
41+
*/
42+
this.initForElement = function (el) {
43+
var i,
44+
a = el.querySelectorAll('a');
45+
46+
for (i in a) {
47+
if (a.hasOwnProperty(i)) {
48+
this.prepareLink(a[i], {
49+
id: '',
50+
url: this.getUrl(el),
51+
title: this.getTitle(el),
52+
desc: this.getDesc(el)
53+
});
54+
}
55+
}
56+
};
57+
58+
/**
59+
* Method for handling click event to link
60+
*/
61+
this.prepareLink = function (el, options) {
62+
var that = this;
63+
64+
options.id = el.getAttribute('data-id');
65+
if (options.id) {
66+
that.addEventListener(el, 'click', options);
67+
}
68+
};
69+
70+
/**
71+
* Method for getting url from page or options
72+
*/
4573
this.getUrl = function (share) {
4674
return share.getAttribute('data-url') || location.href || ' ';
4775
};
4876

77+
/**
78+
* Method for getting title from page or options
79+
*/
4980
this.getTitle = function (share) {
5081
return share.getAttribute('data-title') || document.title || ' ';
5182
};
5283

84+
/**
85+
* Method for getting description from page or options
86+
*/
5387
this.getDesc = function (share) {
5488
var metaDesc = document.querySelector('meta[name=description]');
5589
return share.getAttribute('data-desc') || (metaDesc && metaDesc.getAttribute('content')) || ' ';
5690
};
5791

58-
this.addEventListener = function(el, eventName, opt) {
59-
var _this = this,
92+
/**
93+
* Method for attaching event to the element
94+
*/
95+
this.addEventListener = function (el, eventName, opt) {
96+
var that = this,
6097
handler = function () {
61-
_this.share(opt.id, opt.url, opt.title, opt.desc);
98+
that.share(opt.id, opt.url, opt.title, opt.desc);
6299
};
63100

64101
if (el.addEventListener) {
65102
el.addEventListener(eventName, handler);
66103
} else {
67-
el.attachEvent('on' + eventName, function() {
104+
el.attachEvent('on' + eventName, function () {
68105
handler.call(el);
69106
});
70107
}
71108
};
72109

73-
this.share = function(id, url, title, desc) {
74-
url = encodeURIComponent(url);
75-
desc = encodeURIComponent(desc);
76-
title = encodeURIComponent(title);
110+
/**
111+
* Method for handling chosen links
112+
*/
113+
this.share = function (id, urlDef, titleDef, descDef) {
114+
var url = encodeURIComponent(urlDef),
115+
desc = encodeURIComponent(descDef),
116+
title = encodeURIComponent(titleDef),
117+
text = title || desc || '';
77118

78119
switch (id) {
79-
case 'fb':
80-
this.popupCenter(FB_LINK + url, this.title, this.width, this.height);
81-
break;
82-
83-
case 'vk':
84-
var url = _F(VK_LINK, [url, title, desc]);
85-
86-
this.popupCenter(url, this.title, this.width, this.height);
87-
break;
88-
89-
case 'tw':
90-
var text = title || desc || '';
91-
if (title.length > 0 && desc.length > 0) {
92-
text = title + ' - ' + desc;
93-
}
94-
if (text.length > 0) {
95-
text = '&text=' + text;
96-
}
97-
98-
this.popupCenter(TW_LINK + url + text, this.title, this.width, this.height);
99-
break;
100-
101-
// case 'gp':
102-
// this.popupCenter(GP_LINK + url, this.title, this.width, this.height);
103-
// break;
104-
105-
// case 'in':
106-
// this.popupCenter(IN_LINK + url, this.title, this.width, this.height);
107-
// break;
108-
109-
case 'mail':
110-
var text = title || desc || '';
111-
if (title.length > 0 && desc.length > 0) {
112-
text = title + ' - ' + desc;
113-
}
114-
if (text.length > 0) {
115-
text = text + ' / ';
116-
}
117-
if (title.length > 0) {
118-
title = title + ' / ';
119-
}
120-
121-
var mail = 'mailto:?Subject=' + title + this.title + '&body=' + text + url;
122-
this.newTab(mail);
123-
break;
124-
125-
default:
126-
break;
127-
};
128-
};
120+
case 'fb':
121+
this.popupCenter(FB_LINK_FORMAT + url, titleDef);
122+
break;
129123

130-
this.newTab = function (url) {
131-
var win = window.open(url, '_blank');
132-
win.focus();
124+
case 'vk':
125+
this.popupCenter(stringFormat(VK_LINK_FORMAT, [url, title, desc]), titleDef);
126+
break;
127+
128+
case 'tw':
129+
if (title.length > 0 && desc.length > 0) {
130+
text = title + ' - ' + desc;
131+
}
132+
if (text.length > 0) {
133+
text = '&text=' + text;
134+
}
135+
136+
this.popupCenter(TW_LINK_FORMAT + url + text, titleDef);
137+
break;
138+
139+
case 'mail':
140+
if (title.length > 0 && desc.length > 0) {
141+
text = title + ' - ' + desc;
142+
}
143+
if (text.length > 0) {
144+
text = text + ' / ';
145+
}
146+
if (title.length > 0) {
147+
title += ' / ';
148+
}
149+
150+
location.href = stringFormat(MAIL_LINK_FORMAT, [title, titleDef, text, url]);
151+
break;
152+
153+
default:
154+
break;
155+
}
133156
};
134157

135-
this.popupCenter = function (url, title, w, h) {
136-
var dualScreenLeft = window.screenLeft !== undefined
137-
? window.screenLeft
138-
: screen.left;
139-
var dualScreenTop = window.screenTop !== undefined
140-
? window.screenTop
141-
: screen.top;
142-
143-
var width = window.innerWidth
144-
? window.innerWidth
145-
: document.documentElement.clientWidth
146-
? document.documentElement.clientWidth
147-
: screen.width;
148-
var height = window.innerHeight
149-
? window.innerHeight
150-
: document.documentElement.clientHeight
151-
? document.documentElement.clientHeight
152-
: screen.height;
153-
154-
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
155-
var top = ((height / 3) - (h / 3)) + dualScreenTop;
156-
157-
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
158-
159-
if (window.focus) {
158+
/**
159+
* Method for opening popup window
160+
*/
161+
this.popupCenter = function (url, title) {
162+
var w = 600,
163+
h = 400,
164+
dualScreenLeft = typeof window.screenLeft !== 'undefined' ? window.screenLeft : screen.left,
165+
dualScreenTop = typeof window.screenTop !== 'undefined' ? window.screenTop : screen.top,
166+
width = window.innerWidth || document.documentElement.clientWidth || screen.width,
167+
height = window.innerHeight || document.documentElement.clientHeight || screen.height,
168+
left = ((width / 2) - (w / 2)) + dualScreenLeft,
169+
top = ((height / 3) - (h / 3)) + dualScreenTop,
170+
windowFormat = 'resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width={0},height={1},top={2},left={3}',
171+
newWindow = window.open(url, '', stringFormat(windowFormat, [w, h, top, left]));
172+
173+
if (newWindow !== null && newWindow.focus) {
160174
newWindow.focus();
161175
}
162-
}
163-
};
164-
176+
};
177+
}
165178

166-
// start
179+
// start
167180
new ShareButtons().init();
168-
}());
169181

170-
182+
}(window, document));

0 commit comments

Comments
 (0)