',this.createContentButton(c,f),""].join(""),a.appendChild(h),this.onCreateButton(h),h},createContentButton:function(a,b){var c;return b=b||a,c=[' ',' ',' ","
",""+b+" "].join("")},createFacebookButton:function(b,d){var g="",h="",i=this.getMetadataFromElement(b),j=i.url.replace("%23source%23",f);h=this.createButton(b,f,d,"http://www.facebook.com/","",!0),this.getFacebookUi(),g=function(){var b=a.decodeURIComponent;FB.ui({method:"feed",display:"popup",link:b(j),name:b(i.title),picture:b(i.imageUrl)})},e(h,this.eventName,g),e(h,"click",c)},getFacebookUi:function(){var c=this.facebookAppId||this.getOgFbAppId();return!a.FB&&void(c&&(a.fbAsyncInit=function(){FB.init({appId:c,xfbml:!0,version:"v2.8"})},function(a,b,c){var d,e=a.getElementsByTagName(b)[0];a.getElementById(c)||(d=a.createElement(b),d.id=c,d.src="//connect.facebook.net/en_US/sdk.js",e.parentNode.insertBefore(d,e))}(b,"script","facebook-jssdk")))},getOgFbAppId:function(){var a=b.querySelector("meta[property='fb:app_id']");if(null!==a)return a.getAttribute("content")},createTwitterButton:function(a,b){var c=this.getMetadataFromElement(a);this.createButton(a,g,b,"https://twitter.com/share?url="+c.url+"&text="+c.title+" "+c.hashtags)},createGoogleButton:function(a,b){var c=this.getMetadataFromElement(a);this.createButton(a,j+"plus",b,"https://plus.google.com/share?url="+c.url,j+"+")},createLinkedinButton:function(a,b){var c=this.getMetadataFromElement(a);this.createButton(a,k,b,"http://www.linkedin.com/shareArticle?mini=true&url="+c.url)},createPinterestButton:function(a,b){var c=this.getMetadataFromElement(a);this.createButton(a,l,b,"http://br.pinterest.com/pin/create/button/?url="+c.url+"&media="+c.imageUrl+"&description="+c.title)},createWhatsappButton:function(a,b){var c=this.getMetadataFromElement(a);return!(!this.isSmallScreen()||!this.isTouch())&&void this.createButton(a,h,b,"whatsapp://send?text="+c.title+"%20"+c.url,"",!0)},createTelegramButton:function(a,b){var c=this.getMetadataFromElement(a);this.createButton(a,i,b,"https://telegram.me/share/url?url="+c.url+"&text="+c.title,"",!0)},createEmailButton:function(a,b){var c=this.getMetadataFromElement(a);return!!this.isTouch()&&void this.createButton(a,m,b,"mailto:?subject="+c.title+"&body="+c.url,"e-mail",!0)}}}(window,document);
--------------------------------------------------------------------------------
/src/js/share.js:
--------------------------------------------------------------------------------
1 | /*global DocumentTouch, FB */
2 |
3 | function ShareBar(options) {
4 | 'use strict';
5 | return this.init(options);
6 | }
7 |
8 | (function (window, document) {
9 | 'use strict';
10 |
11 | var FACEBOOK = 'facebook',
12 | TWITTER = 'twitter',
13 | WHATSAPP = 'whatsapp',
14 | TELEGRAM = 'telegram',
15 | GOOGLE = 'google',
16 | LINKEDIN = 'linkedin',
17 | PINTEREST = 'pinterest',
18 | EMAIL = 'email',
19 | BUTTON_WIDTH = 34,
20 | BUTTON_FULL_WIDTH = 110,
21 | BUTTON_PADDING = 4,
22 | MAX_SOCIAL_BUTTONS = 6,
23 | SHARE_BUTTON = 'share-button',
24 | SVG_CONTAINER = 'sharebar-svg-container';
25 |
26 | function preventDefault(e) {
27 | if (e && e.preventDefault) {
28 | e.preventDefault();
29 | }
30 | }
31 |
32 | function supportPassiveEvents() {
33 | if (window === undefined && typeof window.addEventListener === 'function') {
34 | var support = false,
35 | noop = Function,
36 | options = Object.defineProperty({}, 'passive', {
37 | get: function () { support = true; }
38 | });
39 |
40 | window.addEventListener('testPassiveEventSupport', noop, options);
41 | window.removeEventListener('testPassiveEventSupport', noop, options);
42 | return support;
43 | }
44 | }
45 |
46 | function addEventListener(element, event, handler) {
47 | var useCapture = supportPassiveEvents() ? { passive: true } : false;
48 | return element.addEventListener(event, handler, useCapture);
49 | }
50 |
51 | ShareBar.prototype = {
52 | init: function init(options) {
53 | this.activeNetworks = [];
54 | this.eventName = this.getActionName();
55 | this.verifyTouch();
56 | this.createSVG();
57 | this.mergeOptions(options);
58 | this.containers = document.querySelectorAll(this.selector);
59 | this.createBars();
60 | },
61 |
62 | destroy: function destroy() {
63 | this.containers.forEach(function (container) {
64 | var i = 0, item;
65 |
66 | container.classList.remove('share-bar-container');
67 |
68 | for (i; i < container.classList.length; i++) {
69 | item = container.classList.item(i);
70 |
71 | if (item.indexOf('share-theme') !== -1) {
72 | container.setAttribute('data-theme', item.split('-')[2]);
73 | container.classList.remove(item);
74 | }
75 | }
76 | while (container.firstChild) {
77 | container.removeChild(container.firstChild);
78 | }
79 | });
80 | },
81 |
82 | getActionName: function getActionName() {
83 | return this.isTouch() ? 'mouseup' : 'click';
84 | },
85 |
86 | // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
87 | verifyTouch: function verifyTouch() {
88 | var html = document.querySelector('html'),
89 | isTouch = this.isTouch(),
90 | touch = ' touch',
91 | noTouch = ' no-touch';
92 |
93 | if (isTouch && html.className.indexOf(touch) === -1) {
94 | html.className += touch;
95 |
96 | } else if (!isTouch && html.className.indexOf(noTouch) === -1) {
97 | html.className += noTouch;
98 | }
99 | },
100 |
101 | isTouch: function isTouch() {
102 | var bool = false;
103 |
104 | if (window.ontouchstart !== undefined || (window.DocumentTouch && document instanceof DocumentTouch)) {
105 | bool = true;
106 | }
107 | return bool;
108 | },
109 |
110 | createSVG: function createSVG() {
111 | var hasSvg = document.querySelector('.sharebar-svg-container'),
112 | svg;
113 |
114 | if (!hasSvg) {
115 | svg = document.createElement('div');
116 | svg.innerHTML = '[[X_SVG_X]]';
117 | svg.classList.add(SVG_CONTAINER);
118 | svg.style.display = 'none';
119 |
120 | document.body.appendChild(svg);
121 | }
122 | },
123 |
124 | mergeOptions: function mergeOptions(options) {
125 | var option,
126 | defaultOptions = {
127 | // Selector to open lightbox
128 | selector: '.share-bar',
129 | campaign: 'share-bar',
130 | classPopup: 'share-popup',
131 | facebookAppId: '',
132 | networks: [
133 | FACEBOOK, TWITTER, WHATSAPP, TELEGRAM, GOOGLE, LINKEDIN, PINTEREST, EMAIL
134 | ],
135 | theme: 'natural',
136 | buttonWidth: BUTTON_WIDTH,
137 | buttonFullWidth: BUTTON_FULL_WIDTH,
138 | buttonPadding: BUTTON_PADDING,
139 | maxSocialButtons: MAX_SOCIAL_BUTTONS,
140 | context: 'desktop',
141 | onCreateBar: function (bar) { return false; },
142 | onCreateButton: function (button) { return false; },
143 | onShare: function (button) { return false; }
144 | };
145 |
146 | if (!options) {
147 | options = {};
148 | }
149 |
150 | for (option in defaultOptions) {
151 | if (defaultOptions.hasOwnProperty(option)) {
152 | this[option] = options[option] || defaultOptions[option];
153 | }
154 | }
155 | },
156 |
157 | validateNetworks: function validateNetworks(networks) {
158 | var msg = 'The list of networks passed on initialization is wrong',
159 | i = 0,
160 | networkName = '',
161 | method = '';
162 |
163 | if (Object.prototype.toString.call(networks) !== '[object Array]') {
164 | throw new Error(msg + ' [Should be an Array]');
165 | }
166 |
167 | for (i; i < networks.length; i++) {
168 | if (typeof networks[i] === 'string') {
169 | networkName = networks[i];
170 | networkName = networkName.substr(0, 1).toUpperCase() + networkName.substr(1);
171 | method = ShareBar.prototype['create' + networkName + 'Button'];
172 |
173 | if (method) {
174 | if (this.activeNetworks.indexOf(networks[i]) === -1) {
175 | this.activeNetworks.push(networks[i]);
176 | }
177 |
178 | networks[i] = method;
179 | } else {
180 | throw new Error(msg + ' [Network name "' + networks[i] + '" is wrong, should be ' + FACEBOOK + ' or ' + TWITTER + ' or ' + WHATSAPP + ' or ' + GOOGLE + ' or ' + LINKEDIN + ' or ' + PINTEREST + ' or ' + EMAIL + ']');
181 | }
182 |
183 | } else if (typeof networks[i] !== 'function') {
184 | throw new Error(msg + ' [Should be string or function]');
185 | }
186 | }
187 |
188 | return networks;
189 | },
190 |
191 | createBars: function createBars() {
192 | var items = this.containers,
193 | element = 0;
194 |
195 | for (element = 0; element < items.length; element++) {
196 | this.createBar(items[element]);
197 | }
198 |
199 | },
200 |
201 | createBar: function createBar(element, networks) {
202 | var theme = ' share-theme-',
203 | i = 0,
204 | count = 0,
205 | buttonClasses = [];
206 |
207 | networks = this.validateNetworks(networks || this.networks);
208 | networks = networks.slice(0, this.maxSocialButtons);
209 |
210 | count = networks.length;
211 | buttonClasses = this.getButtonsSize(element.offsetWidth, count);
212 |
213 | for (i; i < count; i++) {
214 | networks[i].call(this, element, buttonClasses[i]);
215 | }
216 |
217 | theme += element.getAttribute('data-theme') || this.theme;
218 | element.className += ' share-bar-container' + theme;
219 | this.bindOpenPopup(element);
220 | this.bindShare(element);
221 | this.onCreateBar(element);
222 | },
223 |
224 | getButtonsSize: function getButtonsSize(containerWidth, numberOfButtons) {
225 | var fullButtonWidth = this.buttonFullWidth + this.buttonPadding,
226 | smallButtonWidth = this.buttonWidth + this.buttonPadding,
227 | isSmallScreen = this.isSmallScreen();
228 |
229 | if ((numberOfButtons * smallButtonWidth) > containerWidth) {
230 | return this.getButtonsSmall(
231 | numberOfButtons,
232 | smallButtonWidth,
233 | containerWidth
234 | );
235 | }
236 |
237 | if (isSmallScreen) {
238 | return ['', '', '', '', '', ''];
239 | }
240 |
241 | return this.getButtonsFull(
242 | numberOfButtons,
243 | fullButtonWidth,
244 | smallButtonWidth,
245 | containerWidth
246 | );
247 | },
248 |
249 | getButtonsSmall: function getButtonsSmall(numberOfButtons, smallButtonWidth, containerWidth) {
250 | var result = [],
251 | i = 1,
252 | totalOfSmallButtons = 0,
253 | isSmallScreen = this.isSmallScreen();
254 |
255 | for (i; i <= numberOfButtons; i++) {
256 | totalOfSmallButtons = i * smallButtonWidth;
257 |
258 | if (totalOfSmallButtons <= containerWidth) {
259 | result[i - 1] = isSmallScreen ? '' : ' share-small';
260 | } else {
261 | result[i - 1] = ' share-hidden';
262 | }
263 | }
264 |
265 | return result;
266 | },
267 |
268 | getButtonsFull: function getButtonsFull(numberOfButtons, fullButtonWidth, smallButtonWidth, containerWidth) {
269 | var result = [],
270 | i = 1,
271 | totalOfFullButtons = 0,
272 | totalOfSmallButtons = 0;
273 |
274 | for (i; i <= numberOfButtons; i++) {
275 | totalOfFullButtons = i * fullButtonWidth;
276 | totalOfSmallButtons = (numberOfButtons - i) * smallButtonWidth;
277 |
278 | if ((totalOfSmallButtons + totalOfFullButtons) <= containerWidth) {
279 | result[i - 1] = ' share-full';
280 | } else {
281 | result[i - 1] = ' share-small';
282 | }
283 | }
284 |
285 | return result;
286 | },
287 |
288 | bindOpenPopup: function bindOpenPopup(element) {
289 | var linksPopup = element.querySelectorAll('.' + this.classPopup),
290 | i = 0,
291 | self = this,
292 | onShareClick = function (e) {
293 | self.openPopup.call(this, e);
294 | };
295 |
296 | for (i; i < linksPopup.length; i++) {
297 | addEventListener(linksPopup[i], this.eventName, onShareClick);
298 | addEventListener(linksPopup[i], 'click', preventDefault);
299 | }
300 | },
301 |
302 | bindShare: function bindShare(element) {
303 | var shareButtons = element.querySelectorAll('.' + SHARE_BUTTON),
304 | i = 0,
305 | self = this,
306 | onShareClick = function (e) {
307 | self.onShare(this);
308 | };
309 |
310 | for (i; i < shareButtons.length; i++) {
311 | addEventListener(shareButtons[i], this.eventName, onShareClick);
312 | }
313 | },
314 |
315 | openPopup: function openPopup(e) {
316 | var win = window.open(
317 | this.getAttribute('href'),
318 | 'popup',
319 | 'height=400,width=500,left=10,top=10,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'
320 | );
321 |
322 | win.focus();
323 | },
324 |
325 | getMetadataFromElement: function getMetadataFromElement(element) {
326 | var encode = window.encodeURIComponent,
327 | url = element.getAttribute('data-url') || '',
328 | urlToShare,
329 | splitUrl = url.split('#'),
330 | queryString = '?utm_source=#source#&utm_medium=share-bar-' + this.context + '&utm_campaign=' + this.campaign;
331 |
332 | if (splitUrl.length > 1) {
333 | urlToShare = splitUrl[0] + queryString + '&#' + splitUrl[1];
334 | } else {
335 | urlToShare = url + queryString;
336 | }
337 |
338 | return {
339 | 'url': encode(urlToShare),
340 | 'title': encode(element.getAttribute('data-title') || ''),
341 | 'imageUrl': encode(element.getAttribute('data-image-url') || ''),
342 | 'hashtags': encode(element.getAttribute('data-hashtags') || '')
343 | };
344 | },
345 |
346 | isSmallScreen: function isSmallScreen() {
347 | var desktopMinWidth = 768,
348 | width = window.innerWidth || screen.width;
349 | return width < desktopMinWidth;
350 | },
351 |
352 | createButton: function createButton(container, socialNetworkClass, className, url, socialNetworkTitle, openInPage) {
353 | var shareContainer = document.createElement('div'),
354 | classPopup = '';
355 | socialNetworkTitle = socialNetworkTitle || socialNetworkClass;
356 | className = className || '';
357 | shareContainer.className = SHARE_BUTTON + ' share-' + socialNetworkClass + className;
358 | socialNetworkTitle = socialNetworkTitle[0].toUpperCase() + socialNetworkTitle.slice(1);
359 | url = url.replace('%23source%23', socialNetworkClass);
360 |
361 | if (!openInPage) {
362 | classPopup = this.classPopup;
363 | }
364 |
365 | shareContainer.innerHTML = [
366 | ''
369 | ].join('');
370 |
371 | container.appendChild(shareContainer);
372 | this.onCreateButton(shareContainer);
373 |
374 | return shareContainer;
375 | },
376 |
377 | createContentButton: function createContentButton(name, title) {
378 | var iconElement;
379 | title = title || name;
380 |
381 | iconElement = [
382 | ' ',
383 | ' ',
384 | ' ',
386 | '
',
387 | '' + title + ' '
388 | ].join('');
389 |
390 | return iconElement;
391 | },
392 |
393 | createFacebookButton: function createFacebookButton(container, buttonClass) {
394 | var onShare = '',
395 | button = '',
396 | data = this.getMetadataFromElement(container),
397 | url = data.url.replace('%23source%23', FACEBOOK);
398 |
399 | button = this.createButton(
400 | container,
401 | FACEBOOK,
402 | buttonClass,
403 | 'http://www.facebook.com/',
404 | '',
405 | true
406 | );
407 |
408 | this.getFacebookUi();
409 |
410 | onShare = function () {
411 | var decode = window.decodeURIComponent;
412 |
413 | FB.ui({
414 | method: 'feed',
415 | display: 'popup',
416 | link: decode(url),
417 | name: decode(data.title),
418 | picture: decode(data.imageUrl)
419 | });
420 | };
421 |
422 | addEventListener(button, this.eventName, onShare);
423 | addEventListener(button, 'click', preventDefault);
424 | },
425 |
426 | getFacebookUi: function getFacebookUi() {
427 | var facebookAppId = this.facebookAppId || this.getOgFbAppId();
428 |
429 | if (window.FB) {
430 | return false;
431 | }
432 |
433 | if (facebookAppId) {
434 | window.fbAsyncInit = function () {
435 | FB.init({
436 | appId: facebookAppId,
437 | xfbml: true,
438 | version: 'v2.8'
439 | });
440 | };
441 | (function (d, s, id) {
442 | var js, fjs = d.getElementsByTagName(s)[0];
443 | if (d.getElementById(id)) { return; }
444 | js = d.createElement(s);
445 | js.id = id;
446 | js.src = "//connect.facebook.net/en_US/sdk.js";
447 | fjs.parentNode.insertBefore(js, fjs);
448 | }(document, 'script', 'facebook-jssdk'));
449 | }
450 |
451 | },
452 |
453 | getOgFbAppId: function () {
454 | var el = document.querySelector("meta[property='fb:app_id']");
455 |
456 | if (el !== null) {
457 | return el.getAttribute('content');
458 | }
459 | return;
460 | },
461 |
462 | createTwitterButton: function createTwitterButton(container, buttonClass) {
463 | var data = this.getMetadataFromElement(container);
464 |
465 | this.createButton(
466 | container,
467 | TWITTER,
468 | buttonClass,
469 | 'https://twitter.com/share?url=' + data.url + '&text=' + data.title + ' ' + data.hashtags
470 | );
471 | },
472 |
473 | createGoogleButton: function createGoogleButton(container, buttonClass) {
474 | var data = this.getMetadataFromElement(container);
475 |
476 | this.createButton(
477 | container,
478 | GOOGLE + 'plus',
479 | buttonClass,
480 | 'https://plus.google.com/share?url=' + data.url,
481 | GOOGLE + '+'
482 | );
483 | },
484 |
485 | createLinkedinButton: function createLinkedinButton(container, buttonClass) {
486 | var data = this.getMetadataFromElement(container);
487 |
488 | this.createButton(
489 | container,
490 | LINKEDIN,
491 | buttonClass,
492 | 'http://www.linkedin.com/shareArticle?mini=true&url=' + data.url
493 | );
494 | },
495 |
496 | createPinterestButton: function createPinterestButton(container, buttonClass) {
497 | var data = this.getMetadataFromElement(container);
498 |
499 | this.createButton(
500 | container,
501 | PINTEREST,
502 | buttonClass,
503 | 'http://br.pinterest.com/pin/create/button/?url=' + data.url + '&media=' + data.imageUrl + '&description=' + data.title
504 | );
505 | },
506 |
507 | createWhatsappButton: function createWhatsappButton(container, buttonClass) {
508 | var data = this.getMetadataFromElement(container);
509 |
510 | if (!this.isSmallScreen() || !this.isTouch()) {
511 | return false;
512 | }
513 |
514 | this.createButton(
515 | container,
516 | WHATSAPP,
517 | buttonClass,
518 | 'whatsapp://send?text=' + data.title + '%20' + data.url,
519 | '',
520 | true
521 | );
522 | },
523 |
524 | createTelegramButton: function createTelegramButton(container, buttonClass) {
525 | var data = this.getMetadataFromElement(container);
526 |
527 | this.createButton(
528 | container,
529 | TELEGRAM,
530 | buttonClass,
531 | 'https://telegram.me/share/url?url=' + data.url + '&text=' + data.title,
532 | '',
533 | true
534 | );
535 | },
536 |
537 | createEmailButton: function createEmailButton(container, buttonClass) {
538 | var data = this.getMetadataFromElement(container);
539 |
540 | if (!this.isTouch()) {
541 | return false;
542 | }
543 |
544 | this.createButton(
545 | container,
546 | EMAIL,
547 | buttonClass,
548 | 'mailto:?subject=' + data.title + '&body=' + data.url,
549 | 'e-mail',
550 | true
551 | );
552 | }
553 | };
554 |
555 | }(window, document));
556 |
--------------------------------------------------------------------------------
/dist/js/share.bar.js:
--------------------------------------------------------------------------------
1 | /*! ShareBar - v3.2.0 - 2018-11-08 - * Copyright (c) 2018 Globo.com; Licensed MIT */
2 | function ShareBar(options) {
3 | 'use strict';
4 | return this.init(options);
5 | }
6 |
7 | (function (window, document) {
8 | 'use strict';
9 |
10 | var FACEBOOK = 'facebook',
11 | TWITTER = 'twitter',
12 | WHATSAPP = 'whatsapp',
13 | TELEGRAM = 'telegram',
14 | GOOGLE = 'google',
15 | LINKEDIN = 'linkedin',
16 | PINTEREST = 'pinterest',
17 | EMAIL = 'email',
18 | BUTTON_WIDTH = 34,
19 | BUTTON_FULL_WIDTH = 110,
20 | BUTTON_PADDING = 4,
21 | MAX_SOCIAL_BUTTONS = 6,
22 | SHARE_BUTTON = 'share-button',
23 | SVG_CONTAINER = 'sharebar-svg-container';
24 |
25 | function preventDefault(e) {
26 | if (e && e.preventDefault) {
27 | e.preventDefault();
28 | }
29 | }
30 |
31 | function supportPassiveEvents() {
32 | if (window === undefined && typeof window.addEventListener === 'function') {
33 | var support = false,
34 | noop = Function,
35 | options = Object.defineProperty({}, 'passive', {
36 | get: function () { support = true; }
37 | });
38 |
39 | window.addEventListener('testPassiveEventSupport', noop, options);
40 | window.removeEventListener('testPassiveEventSupport', noop, options);
41 | return support;
42 | }
43 | }
44 |
45 | function addEventListener(element, event, handler) {
46 | var useCapture = supportPassiveEvents() ? { passive: true } : false;
47 | return element.addEventListener(event, handler, useCapture);
48 | }
49 |
50 | ShareBar.prototype = {
51 | init: function init(options) {
52 | this.activeNetworks = [];
53 | this.eventName = this.getActionName();
54 | this.verifyTouch();
55 | this.createSVG();
56 | this.mergeOptions(options);
57 | this.containers = document.querySelectorAll(this.selector);
58 | this.createBars();
59 | },
60 |
61 | destroy: function destroy() {
62 | this.containers.forEach(function (container) {
63 | var i = 0, item;
64 |
65 | container.classList.remove('share-bar-container');
66 |
67 | for (i; i < container.classList.length; i++) {
68 | item = container.classList.item(i);
69 |
70 | if (item.indexOf('share-theme') !== -1) {
71 | container.setAttribute('data-theme', item.split('-')[2]);
72 | container.classList.remove(item);
73 | }
74 | }
75 | while (container.firstChild) {
76 | container.removeChild(container.firstChild);
77 | }
78 | });
79 | },
80 |
81 | getActionName: function getActionName() {
82 | return this.isTouch() ? 'mouseup' : 'click';
83 | },
84 |
85 | // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
86 | verifyTouch: function verifyTouch() {
87 | var html = document.querySelector('html'),
88 | isTouch = this.isTouch(),
89 | touch = ' touch',
90 | noTouch = ' no-touch';
91 |
92 | if (isTouch && html.className.indexOf(touch) === -1) {
93 | html.className += touch;
94 |
95 | } else if (!isTouch && html.className.indexOf(noTouch) === -1) {
96 | html.className += noTouch;
97 | }
98 | },
99 |
100 | isTouch: function isTouch() {
101 | var bool = false;
102 |
103 | if (window.ontouchstart !== undefined || (window.DocumentTouch && document instanceof DocumentTouch)) {
104 | bool = true;
105 | }
106 | return bool;
107 | },
108 |
109 | createSVG: function createSVG() {
110 | var hasSvg = document.querySelector('.sharebar-svg-container'),
111 | svg;
112 |
113 | if (!hasSvg) {
114 | svg = document.createElement('div');
115 | svg.innerHTML = 'email facebook googleplus linkedin pinterest telegram whatsapp ',
382 | ' ',
383 | ' ',
385 | '
',
386 | '' + title + ' '
387 | ].join('');
388 |
389 | return iconElement;
390 | },
391 |
392 | createFacebookButton: function createFacebookButton(container, buttonClass) {
393 | var onShare = '',
394 | button = '',
395 | data = this.getMetadataFromElement(container),
396 | url = data.url.replace('%23source%23', FACEBOOK);
397 |
398 | button = this.createButton(
399 | container,
400 | FACEBOOK,
401 | buttonClass,
402 | 'http://www.facebook.com/',
403 | '',
404 | true
405 | );
406 |
407 | this.getFacebookUi();
408 |
409 | onShare = function () {
410 | var decode = window.decodeURIComponent;
411 |
412 | FB.ui({
413 | method: 'feed',
414 | display: 'popup',
415 | link: decode(url),
416 | name: decode(data.title),
417 | picture: decode(data.imageUrl)
418 | });
419 | };
420 |
421 | addEventListener(button, this.eventName, onShare);
422 | addEventListener(button, 'click', preventDefault);
423 | },
424 |
425 | getFacebookUi: function getFacebookUi() {
426 | var facebookAppId = this.facebookAppId || this.getOgFbAppId();
427 |
428 | if (window.FB) {
429 | return false;
430 | }
431 |
432 | if (facebookAppId) {
433 | window.fbAsyncInit = function () {
434 | FB.init({
435 | appId: facebookAppId,
436 | xfbml: true,
437 | version: 'v2.8'
438 | });
439 | };
440 | (function (d, s, id) {
441 | var js, fjs = d.getElementsByTagName(s)[0];
442 | if (d.getElementById(id)) { return; }
443 | js = d.createElement(s);
444 | js.id = id;
445 | js.src = "//connect.facebook.net/en_US/sdk.js";
446 | fjs.parentNode.insertBefore(js, fjs);
447 | }(document, 'script', 'facebook-jssdk'));
448 | }
449 |
450 | },
451 |
452 | getOgFbAppId: function () {
453 | var el = document.querySelector("meta[property='fb:app_id']");
454 |
455 | if (el !== null) {
456 | return el.getAttribute('content');
457 | }
458 | return;
459 | },
460 |
461 | createTwitterButton: function createTwitterButton(container, buttonClass) {
462 | var data = this.getMetadataFromElement(container);
463 |
464 | this.createButton(
465 | container,
466 | TWITTER,
467 | buttonClass,
468 | 'https://twitter.com/share?url=' + data.url + '&text=' + data.title + ' ' + data.hashtags
469 | );
470 | },
471 |
472 | createGoogleButton: function createGoogleButton(container, buttonClass) {
473 | var data = this.getMetadataFromElement(container);
474 |
475 | this.createButton(
476 | container,
477 | GOOGLE + 'plus',
478 | buttonClass,
479 | 'https://plus.google.com/share?url=' + data.url,
480 | GOOGLE + '+'
481 | );
482 | },
483 |
484 | createLinkedinButton: function createLinkedinButton(container, buttonClass) {
485 | var data = this.getMetadataFromElement(container);
486 |
487 | this.createButton(
488 | container,
489 | LINKEDIN,
490 | buttonClass,
491 | 'http://www.linkedin.com/shareArticle?mini=true&url=' + data.url
492 | );
493 | },
494 |
495 | createPinterestButton: function createPinterestButton(container, buttonClass) {
496 | var data = this.getMetadataFromElement(container);
497 |
498 | this.createButton(
499 | container,
500 | PINTEREST,
501 | buttonClass,
502 | 'http://br.pinterest.com/pin/create/button/?url=' + data.url + '&media=' + data.imageUrl + '&description=' + data.title
503 | );
504 | },
505 |
506 | createWhatsappButton: function createWhatsappButton(container, buttonClass) {
507 | var data = this.getMetadataFromElement(container);
508 |
509 | if (!this.isSmallScreen() || !this.isTouch()) {
510 | return false;
511 | }
512 |
513 | this.createButton(
514 | container,
515 | WHATSAPP,
516 | buttonClass,
517 | 'whatsapp://send?text=' + data.title + '%20' + data.url,
518 | '',
519 | true
520 | );
521 | },
522 |
523 | createTelegramButton: function createTelegramButton(container, buttonClass) {
524 | var data = this.getMetadataFromElement(container);
525 |
526 | this.createButton(
527 | container,
528 | TELEGRAM,
529 | buttonClass,
530 | 'https://telegram.me/share/url?url=' + data.url + '&text=' + data.title,
531 | '',
532 | true
533 | );
534 | },
535 |
536 | createEmailButton: function createEmailButton(container, buttonClass) {
537 | var data = this.getMetadataFromElement(container);
538 |
539 | if (!this.isTouch()) {
540 | return false;
541 | }
542 |
543 | this.createButton(
544 | container,
545 | EMAIL,
546 | buttonClass,
547 | 'mailto:?subject=' + data.title + '&body=' + data.url,
548 | 'e-mail',
549 | true
550 | );
551 | }
552 | };
553 |
554 | }(window, document));
555 |
--------------------------------------------------------------------------------
/tests/share.spec.js:
--------------------------------------------------------------------------------
1 | /*global describe, it, expect, spyOn,
2 | beforeEach, afterEach, jasmine, xit, ShareBar, FB */
3 |
4 | function createBar(options) {
5 | 'use strict';
6 | return new ShareBar(options);
7 | }
8 |
9 | function click(element) {
10 | 'use strict';
11 | var event = document.createEvent('MouseEvents');
12 | event.initMouseEvent('click', true, true, window, 1, 0, 0);
13 | element.dispatchEvent(event);
14 | return event;
15 | }
16 |
17 | function createShareContainer(hashUrl) {
18 | 'use strict';
19 | var element = document.createElement('div');
20 | element.className = 'share-bar';
21 |
22 | if (hashUrl) {
23 | element.setAttribute('data-url', 'http://globo.com' + hashUrl);
24 | } else {
25 | element.setAttribute('data-url', 'http://globo.com');
26 | }
27 | element.setAttribute('data-title', 'Test title');
28 | element.setAttribute('data-image-url', 'http://g1.globo.com');
29 | element.setAttribute('data-hashtags', '#test #g1');
30 | document.body.appendChild(element);
31 | return element;
32 | }
33 |
34 | function createPopupElement() {
35 | 'use strict';
36 | var element = document.createElement('a');
37 | element.className = 'share-button share-popup';
38 | element.setAttribute('href', '#');
39 | document.body.appendChild(element);
40 | return element;
41 | }
42 |
43 | describe('ShareBar - Setup Test Case', function () {
44 | 'use strict';
45 |
46 | describe('setup', function () {
47 | it('should have ShareBar plugin on page', function () {
48 | expect(ShareBar).not.toBe(undefined);
49 | });
50 |
51 | it('should call init method on instance new bar', function () {
52 | var spy = spyOn(ShareBar.prototype, 'init');
53 | createBar();
54 | expect(spy).toHaveBeenCalled();
55 | });
56 | });
57 |
58 | describe('init', function () {
59 | it('should call createSVG method', function () {
60 | var spy = spyOn(ShareBar.prototype, 'createSVG');
61 | createBar();
62 | expect(spy).toHaveBeenCalled();
63 | });
64 |
65 | it('should call mergeOptions method', function () {
66 | var spy = spyOn(ShareBar.prototype, 'mergeOptions'),
67 | options = {'selector': '.test'};
68 | createBar(options);
69 | expect(spy).toHaveBeenCalledWith(options);
70 | });
71 |
72 | it('should call createBars method', function () {
73 | var spy = spyOn(ShareBar.prototype, 'createBars');
74 | createBar();
75 | expect(spy).toHaveBeenCalled();
76 | });
77 |
78 | it('should set containers atribute with selected elements', function () {
79 | var newBar;
80 | spyOn(ShareBar.prototype, 'createBars');
81 | newBar = createBar();
82 | expect(newBar.containers[0]).toEqual(this.el);
83 | });
84 | });
85 | });
86 |
87 | describe('ShareBar - Methods Test Case', function () {
88 | 'use strict';
89 | var facebookAppId = "1234";
90 |
91 | beforeEach(function () {
92 | this.el = createShareContainer();
93 |
94 | this.newBar = createBar({
95 | 'selector': '.no-elements',
96 | 'buttonWidth': 21,
97 | 'buttonFullWidth': 46,
98 | 'buttonPadding': 4
99 | });
100 | this.newBar.containers = [];
101 | this.newBar.supportSvg = true;
102 | });
103 |
104 | afterEach(function () {
105 | document.body.removeChild(this.el);
106 | });
107 |
108 | describe('destroy', function () {
109 | it('should remove class \'share-bar-container\' and \'share-theme\' ', function () {
110 | this.newBar.containers = [this.el];
111 | this.newBar.createBars();
112 | this.newBar.destroy();
113 | expect(this.newBar.containers[0].classList.toString()).toEqual('share-bar');
114 | });
115 |
116 | it('should remove all childdren from container', function () {
117 | this.newBar.containers = [this.el];
118 | this.newBar.createBars();
119 | this.newBar.destroy();
120 | expect(this.newBar.containers[0].childElementCount).toEqual(0);
121 | });
122 | });
123 |
124 | describe('mergeOptions', function () {
125 | it('should create properties with defaultOptions', function () {
126 | this.newBar.mergeOptions();
127 |
128 | expect(this.newBar.selector).toEqual('.share-bar');
129 | expect(this.newBar.classPopup).toEqual('share-popup');
130 | expect(this.newBar.facebookAppId).toEqual('');
131 | expect(this.newBar.networks).toEqual([
132 | 'facebook',
133 | 'twitter',
134 | 'whatsapp',
135 | 'telegram',
136 | 'google',
137 | 'linkedin',
138 | 'pinterest',
139 | 'email'
140 | ]);
141 | expect(this.newBar.theme).toEqual('natural');
142 | });
143 |
144 | it('should merge options with defaultOptions', function () {
145 | this.newBar.mergeOptions({'selector': 'test'});
146 | expect(this.newBar.selector).toEqual('test');
147 | });
148 |
149 | it('should not create options when not exists in defaultOptions', function () {
150 | this.newBar.mergeOptions({'selectorEspecial': 'test'});
151 | expect(this.newBar.selectorEspecial).toBe(undefined);
152 | });
153 | });
154 |
155 | describe('validateNetworks', function () {
156 | it('should throw an error when networks is not an array', function () {
157 | var self = this;
158 |
159 | expect(
160 | function () {self.newBar.validateNetworks('facebook'); }
161 | ).toThrow(
162 | new Error('The list of networks passed on initialization is wrong [Should be an Array]')
163 | );
164 | });
165 |
166 | it('should find method to create network button by name', function () {
167 | var networks = this.newBar.validateNetworks(['facebook']);
168 | expect(networks).toEqual([this.newBar.createFacebookButton]);
169 | });
170 |
171 | it('should find methods to create any networks button by names', function () {
172 | var networks = this.newBar.validateNetworks(['facebook', 'twitter']);
173 | expect(networks).toEqual([this.newBar.createFacebookButton, this.newBar.createTwitterButton]);
174 | });
175 |
176 | it('should throw an error when can not find method by name', function () {
177 | var self = this;
178 |
179 | expect(
180 | function () {self.newBar.validateNetworks(['facebrrk']); }
181 | ).toThrow(
182 | new Error('The list of networks passed on initialization is wrong [Network name "facebrrk" is wrong, should be facebook or twitter or whatsapp or google or linkedin or pinterest or email]')
183 | );
184 | });
185 |
186 | it('should set a function when function is passed', function () {
187 | var myNetworkFunction = function () { return true; },
188 | networks = this.newBar.validateNetworks([myNetworkFunction]);
189 | expect(networks).toEqual([myNetworkFunction]);
190 | });
191 |
192 | it('should throw an error when something other than string or function', function () {
193 | var self = this;
194 |
195 | expect(
196 | function () {self.newBar.validateNetworks([{'object': 'error'}]); }
197 | ).toThrow(
198 | new Error('The list of networks passed on initialization is wrong [Should be string or function]')
199 | );
200 | });
201 |
202 | it('should keep available networks in an instance var activeNetworks', function () {
203 | this.newBar.validateNetworks(['facebook', 'twitter']);
204 | expect(this.newBar.activeNetworks).toEqual(['facebook', 'twitter']);
205 | });
206 | });
207 |
208 | describe('bindOpenPopup', function () {
209 | beforeEach(function () {
210 | this.newBar.eventName = 'click';
211 | });
212 |
213 | it('should call addEventListener function for each popup element', function () {
214 | var popups = [createPopupElement(), createPopupElement()],
215 | spies = [];
216 |
217 | this.el.appendChild(popups[0]);
218 | this.el.appendChild(popups[1]);
219 |
220 | spies[0] = spyOn(popups[0], 'addEventListener');
221 | spies[1] = spyOn(popups[1], 'addEventListener');
222 |
223 | this.newBar.bindOpenPopup(this.el);
224 |
225 | expect(spies[0]).toHaveBeenCalledWith('click', jasmine.any(Function), false);
226 | expect(spies[1]).toHaveBeenCalledWith('click', jasmine.any(Function), false);
227 | });
228 |
229 | it('should call openPopup on click in popup element', function () {
230 | var popup = createPopupElement(),
231 | spy = spyOn(ShareBar.prototype, 'openPopup'),
232 | eventClick = '';
233 |
234 | this.el.appendChild(popup);
235 |
236 | this.newBar.bindOpenPopup(this.el);
237 | eventClick = click(popup);
238 |
239 | expect(spy).toHaveBeenCalledWith(eventClick);
240 | });
241 | });
242 |
243 | describe('bindShare', function () {
244 | beforeEach(function () {
245 | this.newBar.eventName = 'click';
246 | });
247 |
248 | it('should call onShare callback on click in share button', function () {
249 | var popup = createPopupElement(),
250 | spy = spyOn(this.newBar, 'onShare');
251 |
252 | this.el.appendChild(popup);
253 |
254 | this.newBar.bindShare(this.el);
255 | click(popup);
256 |
257 | expect(spy).toHaveBeenCalledWith(popup);
258 | });
259 |
260 | it('should call onShare callback on click in any element in share button', function () {
261 | var popup = createPopupElement(),
262 | span = document.createElement('span'),
263 | spy = spyOn(this.newBar, 'onShare');
264 |
265 | popup.appendChild(span);
266 | this.el.appendChild(popup);
267 |
268 | this.newBar.bindShare(this.el);
269 | click(span);
270 |
271 | expect(spy).toHaveBeenCalledWith(popup);
272 | });
273 |
274 | it('should call onShare callback on click in share button only once', function () {
275 | var popup = createPopupElement(),
276 | spy = spyOn(this.newBar, 'onShare'),
277 | el1 = createShareContainer(),
278 | el2 = createShareContainer();
279 |
280 | el1.appendChild(popup);
281 |
282 | this.newBar.createBar(el1);
283 | this.newBar.createBar(el2);
284 |
285 | click(popup);
286 | expect(spy.calls.count()).toEqual(1);
287 | });
288 | });
289 |
290 | describe('openPopup', function () {
291 | beforeEach(function () {
292 | this.popup = createPopupElement();
293 | this.eventClick = click(this.popup);
294 | this.spyWindowsOpen = spyOn(window, 'open').and.returnValue(window);
295 | this.spyWindowsFocus = spyOn(window, 'focus').and.returnValue(window);
296 | });
297 |
298 | it('should call window.open to open popup', function () {
299 | this.newBar.openPopup.call(this.popup, this.eventClick);
300 |
301 | expect(this.spyWindowsOpen).toHaveBeenCalledWith(
302 | this.popup.getAttribute("href"),
303 | 'popup',
304 | 'height=400,width=500,left=10,top=10,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'
305 | );
306 | });
307 |
308 | it('should call window.focus to set focus on popup', function () {
309 | this.newBar.openPopup.call(this.popup, this.eventClick);
310 | expect(this.spyWindowsFocus).toHaveBeenCalled();
311 | });
312 | });
313 |
314 | describe('createBars', function () {
315 | it('should call createBar method for each selected element', function () {
316 | var otherEl = createShareContainer(),
317 | spy = spyOn(ShareBar.prototype, 'createBar');
318 |
319 | this.newBar.containers = [otherEl, this.el];
320 | this.newBar.createBars();
321 |
322 | expect(spy).toHaveBeenCalledWith(otherEl);
323 | expect(spy).toHaveBeenCalledWith(this.el);
324 | });
325 | });
326 |
327 | describe('createBar', function () {
328 | it('should call validateNetworks method', function () {
329 | var spy = spyOn(ShareBar.prototype, 'validateNetworks').and.callThrough();
330 | this.newBar.createBar(this.el);
331 | expect(spy).toHaveBeenCalledWith(this.newBar.networks);
332 | });
333 |
334 | it('should call validateNetworks method with custom networks', function () {
335 | var spy = spyOn(ShareBar.prototype, 'validateNetworks').and.callThrough(),
336 | network = ['facebook'];
337 | this.newBar.createBar(this.el, network);
338 | expect(spy).toHaveBeenCalledWith(network);
339 | });
340 |
341 | it('should call createFacebookButton method', function () {
342 | var spy = spyOn(ShareBar.prototype, 'createFacebookButton');
343 | this.newBar.networks = [this.newBar.createFacebookButton];
344 | this.newBar.createBar(this.el);
345 |
346 | expect(spy).toHaveBeenCalled();
347 | });
348 |
349 | it('should create a maximum of 6 buttons', function () {
350 | var spy = jasmine.createSpy('test');
351 | this.newBar.networks = [spy, spy, spy, spy, spy, spy, spy];
352 | this.newBar.createBar(this.el);
353 |
354 | expect(spy.calls.count()).toEqual(6);
355 | });
356 |
357 | it('should set class share-bar-container on container element', function () {
358 | this.newBar.createBar(this.el);
359 | expect(this.el.classList.contains('share-bar-container')).toBe(true);
360 | });
361 |
362 | it('should set theme default on container element', function () {
363 | this.newBar.createBar(this.el);
364 | expect(this.el.classList.contains('share-theme-natural')).toBe(true);
365 | });
366 |
367 | it('should set customized theme on container element', function () {
368 | this.el.setAttribute('data-theme', 'test');
369 | this.newBar.createBar(this.el);
370 | expect(this.el.classList.contains('share-theme-test')).toBe(true);
371 | });
372 |
373 | it('should call method passed as parameter', function () {
374 | var spy = spyOn(ShareBar.prototype, 'createFacebookButton'),
375 | spyNetworks = [jasmine.createSpy('test')];
376 |
377 | this.newBar.networks = [this.newBar.createFacebookButton];
378 | this.newBar.createBar(this.el, spyNetworks);
379 |
380 | expect(spy).not.toHaveBeenCalled();
381 | expect(spyNetworks[0]).toHaveBeenCalled();
382 | });
383 |
384 | it('should call bindOpenPopup method', function () {
385 | var spy = spyOn(ShareBar.prototype, 'bindOpenPopup');
386 | this.newBar.createBar(this.el);
387 | expect(spy).toHaveBeenCalled();
388 | });
389 |
390 | it('should call bindShare callback', function () {
391 | var spy = spyOn(this.newBar, 'bindShare');
392 | this.newBar.createBar(this.el);
393 | expect(spy).toHaveBeenCalledWith(this.el);
394 | });
395 |
396 | it('should call onCreateBar callback', function () {
397 | var spy = spyOn(this.newBar, 'onCreateBar');
398 | this.newBar.createBar(this.el);
399 | expect(spy).toHaveBeenCalledWith(this.el);
400 | });
401 | });
402 |
403 | describe('getButtonsSize', function () {
404 | it('should call getButtonsSmall when container is small', function () {
405 | var spy = spyOn(ShareBar.prototype, 'getButtonsSmall');
406 | spyOn(this.newBar, 'isSmallScreen').and.returnValue(false);
407 | this.newBar.getButtonsSize(20, 6);
408 |
409 | expect(spy).toHaveBeenCalledWith(6, 25, 20);
410 | });
411 |
412 | it('should return all elements as is when container is big and is small sreen', function () {
413 | var result = [];
414 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(true);
415 |
416 | result = this.newBar.getButtonsSize(200, 6);
417 |
418 | expect(result).toEqual(
419 | ['', '', '', '', '', '']
420 | );
421 | });
422 |
423 | it('should call getButtonsFull when container is big', function () {
424 | var spy = spyOn(ShareBar.prototype, 'getButtonsFull');
425 | spyOn(this.newBar, 'isSmallScreen').and.returnValue(false);
426 | this.newBar.getButtonsSize(150, 6);
427 |
428 | expect(spy).toHaveBeenCalledWith(6, 50, 25, 150);
429 | });
430 | });
431 |
432 | describe('getButtonsSmall', function () {
433 | it('should return all elements as hidden when container is smallest than button', function () {
434 | var result = [];
435 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(false);
436 | result = this.newBar.getButtonsSmall(6, 25, 20);
437 |
438 | expect(result).toEqual(
439 | [' share-hidden', ' share-hidden', ' share-hidden', ' share-hidden', ' share-hidden', ' share-hidden']
440 | );
441 | });
442 |
443 | it('should return some elements as small when container is small', function () {
444 | var result = [];
445 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(false);
446 | result = this.newBar.getButtonsSmall(6, 25, 75);
447 |
448 | expect(result).toEqual(
449 | [' share-small', ' share-small', ' share-small', ' share-hidden', ' share-hidden', ' share-hidden']
450 | );
451 | });
452 |
453 | it('should return some elements as is when container is small and is small sreen', function () {
454 | var result = [];
455 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(true);
456 | result = this.newBar.getButtonsSmall(6, 25, 75);
457 |
458 | expect(result).toEqual(
459 | ['', '', '', ' share-hidden', ' share-hidden', ' share-hidden']
460 | );
461 | });
462 | });
463 |
464 | describe('getButtonsFull', function () {
465 | it('should return all elements as small when container is a little bigger', function () {
466 | var result = [];
467 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(false);
468 |
469 | result = this.newBar.getButtonsFull(6, 50, 25, 160);
470 |
471 | expect(result).toEqual(
472 | [' share-small', ' share-small', ' share-small', ' share-small', ' share-small', ' share-small']
473 | );
474 | });
475 |
476 | it('should return some elements as full when container is big', function () {
477 | var result = [];
478 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(false);
479 |
480 | result = this.newBar.getButtonsFull(6, 50, 25, 225);
481 |
482 | expect(result).toEqual(
483 | [' share-full', ' share-full', ' share-full', ' share-small', ' share-small', ' share-small']
484 | );
485 | });
486 |
487 | it('should return all elements as full when container is very big', function () {
488 | var result = [];
489 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(false);
490 |
491 | result = this.newBar.getButtonsFull(6, 50, 25, 300);
492 |
493 | expect(result).toEqual(
494 | [' share-full', ' share-full', ' share-full', ' share-full', ' share-full', ' share-full']
495 | );
496 | });
497 | });
498 |
499 | describe('getMetadataFromElement', function () {
500 | it('should return a dictionary with metadata from element', function () {
501 | var data = this.newBar.getMetadataFromElement(this.el),
502 | expectedData = {
503 | 'url': window.encodeURIComponent('http://globo.com?utm_source=#source#&utm_medium=share-bar-desktop&utm_campaign=share-bar'),
504 | 'title': window.encodeURIComponent('Test title'),
505 | 'imageUrl': window.encodeURIComponent('http://g1.globo.com'),
506 | 'hashtags': window.encodeURIComponent('#test #g1')
507 | };
508 |
509 | expect(data).toEqual(expectedData);
510 | });
511 | it('should return a hash in the end of url', function () {
512 | document.body.removeChild(this.el);
513 | this.el = createShareContainer("#12345");
514 |
515 | var newBar = createBar({
516 | 'selector': '.no-elements',
517 | 'buttonWidth': 21,
518 | 'buttonFullWidth': 46,
519 | 'buttonPadding': 4
520 | }),
521 |
522 | data = newBar.getMetadataFromElement(this.el),
523 |
524 | expectedData = {
525 | 'url': window.encodeURIComponent('http://globo.com?utm_source=#source#&utm_medium=share-bar-desktop&utm_campaign=share-bar〹'),
526 | 'title': window.encodeURIComponent('Test title'),
527 | 'imageUrl': window.encodeURIComponent('http://g1.globo.com'),
528 | 'hashtags': window.encodeURIComponent('#test #g1')
529 | };
530 |
531 | expect(data.url).toEqual(expectedData.url);
532 | });
533 | });
534 |
535 | describe('createButton', function () {
536 | it('should create share button', function () {
537 | this.newBar.createButton(this.el, 'test', '', 'urltest');
538 | expect(this.el.querySelector('.share-test a')).not.toBe(null);
539 | });
540 |
541 | it('should call createContentButton method', function () {
542 | var spy = spyOn(ShareBar.prototype, 'createContentButton');
543 |
544 | this.newBar.createButton(this.el, 'test', '', 'urltest');
545 | expect(spy).toHaveBeenCalledWith('test', 'Test');
546 | });
547 |
548 | it('should call createContentButton method when title was passed', function () {
549 | var spy = spyOn(ShareBar.prototype, 'createContentButton');
550 |
551 | this.newBar.createButton(this.el, 'test', '', 'urltest', 'title');
552 | expect(spy).toHaveBeenCalledWith('test', 'Title');
553 | });
554 |
555 | it('should return share button', function () {
556 | var button = this.newBar.createButton(this.el, 'test', '', 'test ');
557 | expect(button.className).toEqual('share-button share-test');
558 | });
559 |
560 | it('should be class share-popup when openInPage is undefined', function () {
561 | var button = this.newBar.createButton(this.el, 'test', '', 'test ');
562 | expect(button.querySelector('a').className).toEqual('share-popup');
563 | });
564 |
565 | it('should not be class share-popup when openInPage is true', function () {
566 | var button = this.newBar.createButton(this.el, 'test', '', 'test ', '', true);
567 | expect(button.querySelector('a').className).toEqual('');
568 | });
569 |
570 | it('should call onCreateButton callback', function () {
571 | var spy = spyOn(this.newBar, 'onCreateButton'),
572 | button = this.newBar.createButton(this.el, 'test', '', 'test ');
573 |
574 | expect(spy).toHaveBeenCalledWith(button);
575 | });
576 |
577 | it('should set href with url', function () {
578 | this.newBar.createButton(this.el, 'test', '', 'urltest');
579 | expect(this.el.querySelector('.share-test a').getAttribute("href")).toEqual('urltest');
580 | });
581 |
582 | it('should set title of social share', function () {
583 | this.newBar.createButton(this.el, 'test', '', 'urltest');
584 | expect(this.el.querySelector('.share-test a').getAttribute("title")).toEqual('Compartilhar via Test');
585 | });
586 |
587 | it('should set data-social-network', function () {
588 | this.newBar.createButton(this.el, 'test', '', 'urltest');
589 | expect(this.el.querySelector('.share-test a').getAttribute("data-social-network")).toEqual('test');
590 | });
591 |
592 | it('should set rel=external', function () {
593 | this.newBar.createButton(this.el, 'test', '', 'urltest');
594 | expect(this.el.querySelector('.share-test a').getAttribute("rel")).toEqual('external');
595 | });
596 |
597 | it('should set target=_blank', function () {
598 | this.newBar.createButton(this.el, 'test', '', 'urltest');
599 | expect(this.el.querySelector('.share-test a').getAttribute("target")).toEqual('_blank');
600 | });
601 | });
602 |
603 | describe('createContentButton', function () {
604 | it('should return SVG element when SVG is enabled', function () {
605 | var result;
606 | result = this.newBar.createContentButton('test');
607 |
608 | expect(result).toContain('');
609 | expect(result).toContain('test ');
610 | });
611 | });
612 |
613 | describe('createFacebookButton', function () {
614 | beforeEach(function () {
615 | this.newBar.eventName = 'click';
616 | });
617 |
618 | it('should create facebook button', function () {
619 | this.newBar.createFacebookButton(this.el);
620 | expect(this.el.querySelector('.share-button.share-facebook a span')).not.toBe(null);
621 | });
622 |
623 | it('should set link href with only facebook url', function () {
624 | var link = '';
625 | this.newBar.createFacebookButton(this.el);
626 |
627 | link = this.el.querySelector('.share-button.share-facebook a');
628 | expect(link.href).toEqual(
629 | 'http://www.facebook.com/'
630 | );
631 | });
632 |
633 | it('should call getFacebookUi method', function () {
634 | var spy = spyOn(this.newBar, 'getFacebookUi');
635 | this.newBar.createFacebookButton(this.el);
636 | expect(spy).toHaveBeenCalled();
637 | });
638 |
639 | it('should call FB.ui method when click in button', function () {
640 | window.FB = jasmine.createSpyObj('FB', ['ui']);
641 | this.newBar.createFacebookButton(this.el);
642 |
643 | click(this.el.querySelector('.share-button.share-facebook a'));
644 | expect(window.FB.ui).toHaveBeenCalledWith({
645 | method: 'feed',
646 | display: 'popup',
647 | link: 'http://globo.com?utm_source=facebook&utm_medium=share-bar-desktop&utm_campaign=share-bar',
648 | name: 'Test title',
649 | picture: 'http://g1.globo.com'
650 | });
651 | });
652 | });
653 |
654 | describe('getFacebookUi', function () {
655 | beforeEach(function () {
656 | delete window.FB;
657 | this.oldFacebookAppId = this.newBar.facebookAppId;
658 | });
659 |
660 | afterEach(function () {
661 | this.newBar.facebookAppId = this.oldFacebookAppId;
662 | delete window.FB;
663 | var node = document.getElementById('facebook-jssdk');
664 | if (node !== null) {
665 | node.parentNode.removeChild(node);
666 | }
667 | });
668 |
669 | it('should call pass facebookAppId to the FB SDK', function () {
670 | this.newBar.facebookAppId = facebookAppId;
671 | this.newBar.getFacebookUi();
672 | window.FB = jasmine.createSpyObj('FB', ['init']);
673 | window.fbAsyncInit();
674 | expect(window.FB.init).toHaveBeenCalledWith(jasmine.objectContaining({appId: facebookAppId}));
675 | });
676 |
677 | it('should call getOgFbAppId when facebookAppId is not defined or empty', function () {
678 | this.newBar.facebookAppId = '';
679 | spyOn(this.newBar, 'getOgFbAppId').and.returnValue(facebookAppId);
680 | this.newBar.getFacebookUi();
681 | window.FB = jasmine.createSpyObj('FB', ['init']);
682 | window.fbAsyncInit();
683 | expect(window.FB.init).toHaveBeenCalledWith(jasmine.objectContaining({appId: facebookAppId}));
684 | });
685 |
686 | it('should not apply fbAsyncInit when facebookAppId not defined', function () {
687 | delete window.fbAsyncInit;
688 | this.newBar.facebookAppId = '';
689 | spyOn(this.newBar, 'getOgFbAppId').and.returnValue('');
690 | this.newBar.getFacebookUi();
691 | expect(window.fbAsyncInit).toBeUndefined();
692 | });
693 |
694 | it('should include the facebook script tag when facebookAppId is available', function () {
695 | this.newBar.facebookAppId = facebookAppId;
696 | this.newBar.getFacebookUi();
697 | expect(document.getElementById('facebook-jssdk')).not.toBeNull(null);
698 | });
699 |
700 | it('should not include the facebook script tag when facebookAppId is empty', function () {
701 | this.newBar.facebookAppId = '';
702 | spyOn(this.newBar, 'getOgFbAppId').and.returnValue('');
703 | this.newBar.getFacebookUi();
704 | expect(document.getElementById('facebook-jssdk')).toBeNull();
705 | });
706 | });
707 |
708 | describe('getOgFbAppId', function () {
709 | it('should return the facebook app id from meta tag', function () {
710 | var fbId,
711 | metaEl = document.createElement('META');
712 | metaEl.setAttribute('property', 'fb:app_id');
713 | metaEl.setAttribute('content', facebookAppId);
714 | document.head.appendChild(metaEl);
715 | fbId = this.newBar.getOgFbAppId();
716 | document.head.removeChild(metaEl);
717 | expect(fbId).toEqual(facebookAppId);
718 | });
719 |
720 | it('should return null when element is not defined', function () {
721 | var fbId = this.newBar.getOgFbAppId();
722 | expect(fbId).toBeUndefined();
723 | });
724 | });
725 |
726 | describe('createTwitterButton', function () {
727 | it('should create twitter button', function () {
728 | this.newBar.createTwitterButton(this.el);
729 | expect(this.el.querySelector('.share-button.share-twitter a.share-popup span')).not.toBe(null);
730 | });
731 |
732 | it('should set link href with metadata of container', function () {
733 | var link = '';
734 | this.newBar.createTwitterButton(this.el);
735 |
736 | link = this.el.querySelector('.share-button.share-twitter a');
737 | expect(link.href).toEqual(
738 | 'https://twitter.com/share?url=http%3A%2F%2Fglobo.com%3Futm_source%3Dtwitter%26utm_medium%3Dshare-bar-desktop%26utm_campaign%3Dshare-bar&text=Test%20title%20%23test%20%23g1'
739 | );
740 | });
741 | });
742 |
743 | describe('createGoogleButton', function () {
744 | it('should create googleplus button', function () {
745 | this.newBar.createGoogleButton(this.el);
746 | expect(this.el.querySelector('.share-button.share-googleplus a.share-popup span')).not.toBe(null);
747 | });
748 |
749 | it('should set link href with metadata of container', function () {
750 | var link = '';
751 | this.newBar.createGoogleButton(this.el);
752 |
753 | link = this.el.querySelector('.share-button.share-googleplus a');
754 | expect(link.href).toEqual(
755 | 'https://plus.google.com/share?url=http%3A%2F%2Fglobo.com%3Futm_source%3Dgoogleplus%26utm_medium%3Dshare-bar-desktop%26utm_campaign%3Dshare-bar'
756 | );
757 | });
758 | });
759 |
760 | describe('createPinterestButton', function () {
761 | it('should create pinterest button', function () {
762 | this.newBar.createPinterestButton(this.el);
763 | expect(this.el.querySelector('.share-button.share-pinterest a.share-popup span')).not.toBe(null);
764 | });
765 |
766 | it('should set link href with metadata of container', function () {
767 | var link = '';
768 | this.newBar.createPinterestButton(this.el);
769 |
770 | link = this.el.querySelector('.share-button.share-pinterest a');
771 | expect(link.href).toEqual(
772 | 'http://br.pinterest.com/pin/create/button/?url=http%3A%2F%2Fglobo.com%3Futm_source%3Dpinterest%26utm_medium%3Dshare-bar-desktop%26utm_campaign%3Dshare-bar&media=http%3A%2F%2Fg1.globo.com&description=Test%20title'
773 | );
774 | });
775 | });
776 |
777 | describe('createWhatsappButton', function () {
778 | it('should create whatsapp button when device is iphone', function () {
779 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(true);
780 | spyOn(ShareBar.prototype, 'isTouch').and.returnValue(true);
781 | this.newBar.createWhatsappButton(this.el);
782 | expect(this.el.querySelector('.share-button.share-whatsapp a span')).not.toBe(null);
783 | });
784 |
785 | it('should set link href with metadata of container', function () {
786 | var link = '';
787 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(true);
788 | spyOn(ShareBar.prototype, 'isTouch').and.returnValue(true);
789 | this.newBar.createWhatsappButton(this.el);
790 |
791 | link = this.el.querySelector('.share-button.share-whatsapp a');
792 | expect(link.href).toEqual(
793 | 'whatsapp://send?text=Test%20title%20http%3A%2F%2Fglobo.com%3Futm_source%3Dwhatsapp%26utm_medium%3Dshare-bar-desktop%26utm_campaign%3Dshare-bar'
794 | );
795 | });
796 |
797 | it('should not create whatsapp button when is not mobile device', function () {
798 | spyOn(ShareBar.prototype, 'isSmallScreen').and.returnValue(false);
799 | spyOn(ShareBar.prototype, 'isTouch').and.returnValue(false);
800 | this.newBar.createWhatsappButton(this.el);
801 | expect(this.el.querySelector('.share-button.share-whatsapp a span')).toBe(null);
802 | });
803 |
804 | it('should not open in popup', function () {
805 | this.newBar.createWhatsappButton(this.el);
806 | expect(this.el.querySelector('.share-whatsapp a').className).toEqual('');
807 | });
808 | });
809 |
810 | describe('createEmailButton', function () {
811 | it('should create email button', function () {
812 | this.newBar.createEmailButton(this.el);
813 | expect(this.el.querySelector('.share-button.share-email a span')).not.toBe(null);
814 | });
815 |
816 | it('should set link href with metadata of container', function () {
817 | var link = '';
818 | this.newBar.createEmailButton(this.el);
819 |
820 | link = this.el.querySelector('.share-email a');
821 | expect(link.href).toEqual(
822 | 'mailto:?subject=Test%20title&body=http%3A%2F%2Fglobo.com%3Futm_source%3Demail%26utm_medium%3Dshare-bar-desktop%26utm_campaign%3Dshare-bar'
823 | );
824 | });
825 |
826 | it('should not create email button when is not mobile device', function () {
827 | spyOn(ShareBar.prototype, 'isTouch').and.returnValue(false);
828 | this.newBar.createEmailButton(this.el);
829 | expect(this.el.querySelector('.share-button.share-email a span')).toBe(null);
830 | });
831 |
832 | it('should not open in popup', function () {
833 | this.newBar.createEmailButton(this.el);
834 | expect(this.el.querySelector('.share-email a').className).toEqual('');
835 | });
836 | });
837 |
838 | describe('createSVG', function () {
839 | it('should only create one svg container', function () {
840 | var element = '',
841 | elements = [];
842 |
843 | this.newBar.createSVG();
844 | this.newBar.createSVG();
845 | this.newBar.createSVG();
846 |
847 | elements = document.querySelectorAll('div.sharebar-svg-container');
848 | element = elements[elements.length - 1];
849 |
850 | expect(elements.length).toEqual(1);
851 | expect(element.style.display).toEqual('none');
852 | expect(element.innerHTML).toEqual('[[X_SVG_X]]');
853 | });
854 | });
855 |
856 | describe('verifyTouch', function () {
857 | beforeEach(function () {
858 | document.querySelector('html').className = '';
859 | });
860 |
861 | it('should add class no-touch for desktop', function () {
862 | var html;
863 |
864 | spyOn(ShareBar.prototype, 'isTouch').and.returnValue(false);
865 | this.newBar.verifyTouch();
866 |
867 | html = document.querySelector('html');
868 | expect(html.className).toEqual(' no-touch');
869 | });
870 |
871 | it('should add class touch for touch devices', function () {
872 | var html;
873 |
874 | spyOn(ShareBar.prototype, 'isTouch').and.returnValue(true);
875 | this.newBar.verifyTouch();
876 |
877 | html = document.querySelector('html');
878 | expect(html.className).toEqual(' touch');
879 | });
880 | });
881 | describe('define a specific campaign', function () {
882 | describe('uses a custom campaign', function () {
883 | it('should call with custom options', function () {
884 | var customCampaign = 'custom-campaign',
885 | options = {
886 | 'selector': '.share-bar',
887 | 'campaign': customCampaign
888 | },
889 | data,
890 | expectedData;
891 |
892 | this.newBar = createBar(options);
893 | data = this.newBar.getMetadataFromElement(this.el);
894 | expectedData = {
895 | 'url': window.encodeURIComponent('http://globo.com?utm_source=#source#&utm_medium=share-bar-desktop&utm_campaign=' + customCampaign),
896 | 'title': window.encodeURIComponent('Test title'),
897 | 'imageUrl': window.encodeURIComponent('http://g1.globo.com'),
898 | 'hashtags': window.encodeURIComponent('#test #g1')
899 | };
900 |
901 | expect(data).toEqual(expectedData);
902 | });
903 | });
904 | describe('using a unspecified campaign', function () {
905 | it('should call with default options', function () {
906 | var defaultCampaign = 'share-bar',
907 | options = {
908 | 'selector': '.share-bar'
909 | },
910 | data,
911 | expectedData;
912 |
913 | this.newBar = createBar(options);
914 | data = this.newBar.getMetadataFromElement(this.el);
915 | expectedData = {
916 | 'url': window.encodeURIComponent('http://globo.com?utm_source=#source#&utm_medium=share-bar-desktop&utm_campaign=' + defaultCampaign),
917 | 'title': window.encodeURIComponent('Test title'),
918 | 'imageUrl': window.encodeURIComponent('http://g1.globo.com'),
919 | 'hashtags': window.encodeURIComponent('#test #g1')
920 | };
921 |
922 | expect(data).toEqual(expectedData);
923 | });
924 | });
925 | });
926 | });
927 |
--------------------------------------------------------------------------------