-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
322 lines (257 loc) · 9.46 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
// CONSTANTS
const API_URL = 'https://api.bitcraft.io:8080'
const BOTTOM_BANNER_SPEED = 300;
// GOOGLE ANALYTICS
function handleOutboundLinkClicks(event) {
ga('send', 'event', {
eventCategory: 'Outbound Link',
eventAction: 'click',
eventLabel: event.target.closest('a').href,
// After the click is sent to Analytics, resume normal behavior
hitCallback: function() {
$(event.target).trigger(event.type);
}
});
}
function handleFormSubmission(name) {
ga('send', 'event', {
eventCategory: 'Form',
eventAction: 'submit',
eventLabel: name
});
}
// POLYFILLS
Date.prototype.nextDayOfWeek = function(desired_day_of_week) {
var nextDay = new Date();
nextDay.setDate(this.getDate() + (desired_day_of_week + (7 - this.getDay())) % 7);
return nextDay;
}
Date.prototype.getMonthName = function() {
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
return monthNames[this.getMonth()];
}
Date.prototype.getDateth = function() {
var date = this.getDate();
switch (date % 10) {
case 1:
return `${date}st`;
break;
case 2:
return `${date}nd`;
break;
case 3:
return `${date}rd`;
default:
return `${date}th`;
}
}
// maxAge in days
function setCookie(key, value, maxAge) {
if (maxAge === undefined) maxAge = 365;
document.cookie = key + '=' + value + ';max-age=' + maxAge * 60 * 60 * 24;
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
function eraseCookie(key) {
setCookie(key, '', -1);
}
// FUNCTIONS
function shiftWindow() {
scrollBy(0, -100);
}
async function showSuccessNewsletterModal() {
var current_date = new Date();
// Hack so that if it's past 10 AM, the next newsletter date
// shows up as next Saturday week and not today
if (current_date.getHours() > 10) {
current_date.setDate(current_date.getDate() + 1);
}
var next_newsletter_date = current_date.nextDayOfWeek(6);
var month = next_newsletter_date.getMonthName();
var date = next_newsletter_date.getDateth()
var success_title = 'Confirmed!';
var success_subtitle = 'Thanks for subscribing to our weekly newsletter!';
var success_msg = `We send our newsletters every <span class="underline bold">\
Saturday morning</span>, so you will receive your first newsletter on \
${month} ${date}.`;
var success_msg_el = $("<div></div>").append(success_msg)[0];
await swal({
title: success_title,
text: success_subtitle,
content: success_msg_el,
icon: 'success',
className: 'success',
button: 'Great!'
});
}
async function showFailureNewsletterModal() {
var error_title = 'Oops!';
var error_subtitle = 'Something went wrong and we could not subscribe you to our \
newsletter.';
var error_msg = 'Maybe you are already subscribed with this email? If this problem \
persists, please email us to <a href="mailto:help@bitcraft.io">help@bitcraft.io</a>.';
var error_msg_el = $("<div></div>").append(error_msg)[0];
await swal({
title: error_title,
text: error_subtitle,
content: error_msg_el,
icon: 'error',
className: 'error'
});
}
async function subscribeToNewsletter(email, afterHttpCall) {
try {
await axios.post(API_URL + '/subscribe', {
email: email
});
if (afterHttpCall !== undefined) afterHttpCall();
await showSuccessNewsletterModal();
} catch (_err) {
if (afterHttpCall !== undefined) afterHttpCall();
await showFailureNewsletterModal();
}
}
// EVENT LISTENERS
// Only listen for outbound links (i.e. that are empty or don't point to an id element)
$('a:not([href=""]):not([href^="#"])').one('click', function(event) {
event.preventDefault();
handleOutboundLinkClicks(event);
});
$('#contact-us-form').on('submit', function(event) {
event.preventDefault()
handleFormSubmission('Contact Us');
var name_el = document.getElementById('contact-us-name');
var email_el = document.getElementById('contact-us-email');
var subject_el = document.getElementById('contact-us-subject');
var message_el = document.getElementById('contact-us-message');
// We perform this check in case some browser does not support
// the "required" attribute we put in the HTML form
var required_fields = [name_el, email_el, subject_el, message_el];
var is_form_filled = true;
required_fields.forEach((field) => {
if (field.value === '') is_form_filled = false;
});
var submit_el = document.getElementById('contact-us-submit');
var loader_el = document.getElementById('contact-us-loader');
var response_el = document.getElementById('contact-us-response');
// Disable submit button so we don't get duplicates
submit_el.disabled = true;
// Show the loader so that the user knows we're processing the request
loader_el.classList.remove('hidden');
// Preparing response div
response_el.classList.remove('success');
response_el.classList.remove('failure');
response_el.classList.add('hidden');
success_msg = 'We have received your message and will get back to you as soon as we can.'
error_msg = 'Something went wrong and we could not send your message. \
Please make sure you filled out all the fields. If this problem persists, please email us to \
<a href="mailto:help@bitcraft.io">help@bitcraft.io</a>.';
if (is_form_filled) {
axios.post(API_URL + '/send', {
name: name_el.value,
email: email_el.value,
subject: subject_el.value,
message: message_el.value
})
.then((response) => {
response_el.innerHTML = success_msg;
// Make the response green
response_el.classList.add('success');
// Show the response
response_el.classList.remove('hidden');
})
.catch((error) => {
response_el.innerHTML = error_msg;
// Make the response red
response_el.classList.add('failure');
// Show the response
response_el.classList.remove('hidden');
// Enable the button again only when sending the email fails
submit_el.disabled = false;
})
.finally(() => {
// No matter the response, hide the loader again
loader_el.classList.add('hidden');
});
}
});
$('.bottom-banner-close').one('click', () => {
$('.bottom-banner').slideToggle(BOTTOM_BANNER_SPEED);
});
$('.bottom-banner-never').one('click', () => {
setCookie('never_newsletter', 'true', 30);
$('.bottom-banner').slideToggle(BOTTOM_BANNER_SPEED);
});
var bottomSubmit = async function(event) {
event.preventDefault()
var submit_el = $('#bottom-banner-submit');
var bottom_banner_el = $('.bottom-banner');
// If it's already running stop executing to avoid duplicates
if (submit_el.hasClass('running')) {
return null;
}
handleFormSubmission('News Subscribe');
var email_el = $('#bottom-banner-email');
// We perform this check in case some browser does not support
// the "required" attribute we put in the HTML form
var required_fields = [email_el];
var is_form_filled = true;
required_fields.forEach((field) => {
if (field.val() === '') is_form_filled = false;
});
if (!is_form_filled) return null;
// Loading button starts running after the email is submitted
// but before the request is made
submit_el.addClass('running');
// Calls our API to subscribe the email to our newsletter and
// awaits until the modals created by this function are closed
await subscribeToNewsletter(email_el.val(), () => {
submit_el.removeClass('running'); // Right after the HTTP call is made it calls this callback
});
bottom_banner_el.slideToggle(BOTTOM_BANNER_SPEED);
}
$('#bottom-banner-submit').on('click', bottomSubmit)
$('#bottom-banner-form').on('submit', bottomSubmit)
var newsletterSubmit = async function(event) {
event.preventDefault()
var submit_el = $('#newsletter-submit');
// If it's already running stop executing to avoid duplicates
if (submit_el.hasClass('running')) {
return null;
}
handleFormSubmission('News Subscribe Section');
var email_el = $('#newsletter-email');
// We perform this check in case some browser does not support
// the "required" attribute we put in the HTML form
var required_fields = [email_el];
var is_form_filled = true;
required_fields.forEach((field) => {
if (field.val() === '') is_form_filled = false;
});
if (!is_form_filled) return null;
// Loading button starts running after the email is submitted
// but before the request is made
submit_el.addClass('running');
// Calls our API to subscribe the email to our newsletter and
// awaits until the modals created by this function are closed
await subscribeToNewsletter(email_el.val(), () => {
submit_el.removeClass('running'); // Right after the HTTP call is made it calls this callback
});
}
// $('#newsletter-submit').on('click', newsletterSubmit)
// $('#newsletter-form').on('submit', newsletterSubmit)
// If people tap on our navbar buttons, it scrolls up a
// bit so that the navbar does not cover the content
$(window).on('hashchange', shiftWindow);
// ON LOAD
$(document).ready(function() {
// If the website loads on an anchor (e.g. /#newsletter),
// it scrolls up a bit so that the navbar does not cover the content
if (location.hash) shiftWindow();
// if (getCookie('never_newsletter') !== 'true' && window.location.hash.substr(1) !== 'newsletter') {
// $('.bottom-banner').delay(1000).slideToggle(BOTTOM_BANNER_SPEED);
// }
});