https://www.bighistoryproject.com/BH/assets/js/social.js

1(function($, BHP) {
2  "use strict";
3
4  var FACEBOOK_SHARE_TARGET_URL = "https://oer-prj.com/BHP-fb";
5
6  window.fbAsyncInit = function() {
7    FB.Event.subscribe("xfbml.render", handleCommentsRendered);
8  };
9
10  function init() {
11    $(".social-comments").on("click keypress", toggleComments);
12
13    enhanceEmailShareButtons();
14    enhanceFacebookShareButtons();
15    fetchCommentCounts();
16    enableSharing();
17  }
18
19  function enhanceEmailShareButtons() {
20    $(".js-share-via-email").each(function(index, element) {
21      var $button = $(element);
22
23      if ($button.find(".share-email-icon").length > 0) {
24        return;
25      }
26
27      var buttonLabel = $.trim($button.text()) || "Share via Email";
28
29      $button.empty();
30      $button.append(getEmailShareIconMarkup(index));
31      $button.append('<span class="share-email-label">' + buttonLabel + "</span>");
32    });
33  }
34
35  function getEmailShareIconMarkup(index) {
36    var clipPathId = "clip0_21712_28213_" + index;
37
38    return "" +
39			'<svg class="share-email-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">' +
40				'<g clip-path="url(#' + clipPathId + ')">' +
41					'<path d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 18H4V8L12 13L20 8V18ZM12 11L4 6H20L12 11Z" fill="#333333"/>' +
42				"</g>" +
43				"<defs>" +
44					'<clipPath id="' + clipPathId + '">' +
45						'<rect width="24" height="24" fill="white"/>' +
46					"</clipPath>" +
47				"</defs>" +
48			"</svg>";
49  }
50
51  function enhanceFacebookShareButtons() {
52    $(".js-share-on-facebook").each(function(index, element) {
53      var $button = $(element);
54
55      if ($button.find(".share-facebook-icon").length > 0) {
56        return;
57      }
58
59      var buttonLabel = $.trim($button.text()) || "Share on Facebook";
60
61      $button.empty();
62      $button.append(getFacebookShareIconMarkup(index));
63      $button.append('<span class="share-facebook-label">' + buttonLabel + "</span>");
64    });
65  }
66
67  function getFacebookShareIconMarkup(index) {
68    var iconId = "facebook-icon-" + index;
69
70    return "" +
71			'<svg class="share-facebook-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">' +
72				'<path id="' + iconId + '" d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1.00001 5.92487 5.92487 1.00001 12 1ZM12.8291 5.26758C10.3843 5.26758 9.82812 7.0991 9.82812 8.26855V9.90332H8.41406V12.4307H9.82812V19.6211H12.8027V12.4307H14.7646L15.0244 9.90625H12.8027V8.41895C12.8027 7.86108 13.1714 7.72949 13.4336 7.72949H15.0312V5.27637L12.8291 5.26758Z" fill="#333333"/>' +
73			"</svg>";
74  }
75
76  function handleCommentsRendered() {
77    $(".fb-comments-wrapper iframe").attr("tabindex", "-1");
78  }
79
80  function toggleComments(e) {
81    if (e.type === "keypress" && e.which !== 13) {
82      return; 
83    }
84
85    var commentsWrapperId = $(e.currentTarget).attr("data-comments-wrapper-id");
86    var $commentsWrapper = $("#" + commentsWrapperId);
87		
88    $commentsWrapper.toggleClass("fb-comments-wrapper-revealed");
89    if ($commentsWrapper.hasClass("fb-comments-wrapper-revealed")) {
90      $commentsWrapper.find("iframe").removeAttr("tabindex");
91    }
92    else {
93      $commentsWrapper.find("iframe").attr("tabindex", "-1");
94    }
95  }
96
97  function fetchCommentCounts() {
98    // grab all social URLs on the page
99    var urlArray = $("[data-sharing-url]").map(function() {
100      return $(this).attr("data-sharing-url");
101    }).toArray();
102
103    if (urlArray.length > 0) {
104      var urlCsv = urlArray.join(",");
105
106      // ajax request
107      $.get("https://api.facebook.com/method/links.getStats?format=json&urls=" + urlCsv).done(displayCommentCounts);
108    }
109  }
110
111  function displayCommentCounts(data) {
112    for (var prop in data) {
113      if (data.hasOwnProperty(prop)) {
114        var page = data[prop];
115        if (page.commentsbox_count && page.commentsbox_count > 0) {
116          $('.social-comments[data-sharing-url="' + page.url + '"]').text(page.commentsbox_count);
117        }
118      }
119    }
120  }
121
122  function enableSharing() {
123    $(".social-facebook, .social-facebook-share").on("click keypress", handleFacebookShare);
124    $(".js-share-via-email").on("click keypress", handleEmailShare);
125  }
126
127  function getBadgeNumber(element) {
128    var $element = $(element);
129    var rawBadge = $element.attr("data-badge-num") ||
130			$element.closest("[data-badge-num]").attr("data-badge-num") ||
131			$element.closest(".quiz").attr("data-quiz") ||
132			$element.closest("[data-quiz]").attr("data-quiz") ||
133			$element.closest("[data-badge]").attr("data-badge");
134
135    if (!rawBadge) {
136      return null;
137    }
138
139    var badgeNum = parseInt(rawBadge, 10);
140    return isNaN(badgeNum) ? null : badgeNum;
141  }
142
143  function trackShareProgress(element, shareType) {
144    if (!window.BHPDL || typeof window.BHPDL.shareBadgeProgress !== "function") {
145      return;
146    }
147
148    var badgeNum = getBadgeNumber(element);
149    window.BHPDL.shareBadgeProgress(shareType, badgeNum);
150  }
151
152  function handleFacebookShare(e) {
153    if (e.type === "keypress" && e.which !== 13) {
154      return; 
155    }
156
157    trackShareProgress(e.currentTarget, "facebook");
158
159    showSharePopUp({
160      url: "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(FACEBOOK_SHARE_TARGET_URL),
161      width: 520,
162      height: 435
163    });

164
165    return false;
166  }
167
168  function handleEmailShare(e) {
169    if (e.type === "keypress" && e.which !== 13) {
170      return; 
171    }
172
173    trackShareProgress(e.currentTarget, "email");
174
175    var emailShareCopy = getEmailShareCopy(e.currentTarget);
176    var subject = $(e.currentTarget).attr("data-email-subject") || emailShareCopy.subject;
177    var bodyCopy = $(e.currentTarget).attr("data-email-body") || emailShareCopy.body;
178    var shareUrl = emailShareCopy.url;
179    var body = bodyCopy + "\n\n" + shareUrl;
180
181    window.location.href = "mailto:?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
182
183    return false;
184  }
185
186  function getEmailShareCopy(element) {
187    if (isCertificationEmailShare(element)) {
188      return {
189        subject: "I'm a Certified Big Historian and I have a sticker to prove it!",
190        body: "I finished all eight threshold badges on Big History Project and got this sweet sticker. You can do the same. Start at Threshold 1 and see how it all began:",
191        url: "https://www.bighistoryproject.com"
192      };
193    }
194
195    var thresholdLabel = getThresholdLabel(element);
196
197    return {
198      subject: "I'm becoming a Big Historian",
199      body: "I just completed my " + thresholdLabel + " badge on Big History Project. You can do the same. Check out Big History Project:",
200      url: "https://www.bighistoryproject.com"
201    };
202  }
203
204  function isCertificationEmailShare(element) {
205    return $(element).closest(".all-completed-wrapper").length > 0;
206  }
207
208  function getThresholdLabel(element) {
209    var $quiz = $(element).closest(".quiz");
210    var thresholdNumber = getBadgeNumber(element);
211    var thresholdName = $.trim($quiz.find(".completion .quiz__badge-name strong").first().text());
212
213    if (!thresholdNumber && !thresholdName) {
214      return "a threshold";
215    }
216
217    if (!thresholdNumber) {
218      return thresholdName;
219    }
220
221    if (!thresholdName) {
222      return "Threshold " + thresholdNumber;
223    }
224
225    return "Threshold " + thresholdNumber + ": " + thresholdName;
226  }
227
228  function getShareUrl(element) {
229    return encodeURIComponent(getRawShareUrl(element));
230  }
231
232  function getRawShareUrl(element) {
233    var dataSharingUrl = $(element).attr("data-sharing-url");
234
235    if (dataSharingUrl && dataSharingUrl.trim().length > 0) {
236      return dataSharingUrl;
237    }
238
239    return window.location.href;
240  }
241
242  function showSharePopUp(data) {
243    var top = (screen.height / 2) - (data.height / 2);
244    var left = (screen.width / 2) - (data.width / 2); 
245    window.open(data.url, "sharer", "top=" + top + ",left=" + left +
246			",toolbar=0,status=0,width=" + data.width + ",height=" + data.height);
247  }
248
249  init();
250
251})(window.$, window.BHP);
252