bridgetown_theme_single_page_opt_in 0.1.55 → 0.1.57
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c68b4aadb43ab3ac07ef8942ef11caf2945b35513ff9c82db5985b3fd3e0b702
|
|
4
|
+
data.tar.gz: 7aafad144bae3e1c54bb3c7f10fbbb775738dd7c737d510ec785155ace83bb82
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1009bf970ce9e7f3fb51d190921e0cccbdf7eff20f4b2beae72d1e10697e859f0e630593297dd2737855d1cc155ca586f92ad3d7b3b7d5e434bb08225d27790d
|
|
7
|
+
data.tar.gz: cfa432e844aea4a1760d6830d2f058cc67b090a7024df9ef4190857d0d6a6f8c84f45dc025767c15d14cefd4431af0cf486ac66a1e67055bd952f6e8f0150a12
|
data/bridgetown.automation.rb
CHANGED
|
@@ -4,103 +4,103 @@ add_gem("dotenv")
|
|
|
4
4
|
gsub_file("config/initializers.rb", /^((?!#.)end)/, " init :bridgetown_theme_single_page_opt_in\nend")
|
|
5
5
|
gsub_file("src/index.md", "layout: default", "layout: bridgetown_theme_single_page_opt_in/landing")
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
create_file "frontend/javascript/lander.js" do
|
|
8
|
+
"class CountDown {
|
|
9
|
+
constructor(expirationTime, onRender, onComplete) {
|
|
10
|
+
this.setExpirationTime(expirationTime);
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
this.onRender = onRender;
|
|
13
|
+
this.onComplete = onComplete;
|
|
14
|
+
}
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
setExpirationTime(expirationTime) {
|
|
17
|
+
// get the current time
|
|
18
|
+
const currentTime = new Date().getTime();
|
|
19
|
+
// calculate the remaining time
|
|
20
|
+
this.timeRemaining = expirationTime - currentTime;
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
this.timeRemaining <= 0 ?
|
|
23
|
+
this.complete() :
|
|
24
|
+
this.start();
|
|
25
|
+
}
|
|
25
26
|
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
complete() {
|
|
29
|
+
if (typeof this.onComplete === 'function') {
|
|
30
|
+
onComplete();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
getTime() {
|
|
34
|
+
return {
|
|
35
|
+
days: Math.floor(this.timeRemaining / 1000 / 60 / 60 / 24),
|
|
36
|
+
hours: Math.floor(this.timeRemaining / 1000 / 60 / 60) % 24,
|
|
37
|
+
minutes: Math.floor(this.timeRemaining / 1000 / 60) % 60,
|
|
38
|
+
seconds: Math.floor(this.timeRemaining / 1000) % 60
|
|
39
|
+
};
|
|
30
40
|
}
|
|
31
|
-
}
|
|
32
|
-
getTime() {
|
|
33
|
-
return {
|
|
34
|
-
days: Math.floor(this.timeRemaining / 1000 / 60 / 60 / 24),
|
|
35
|
-
hours: Math.floor(this.timeRemaining / 1000 / 60 / 60) % 24,
|
|
36
|
-
minutes: Math.floor(this.timeRemaining / 1000 / 60) % 60,
|
|
37
|
-
seconds: Math.floor(this.timeRemaining / 1000) % 60
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
update() {
|
|
43
|
+
if (typeof this.onRender === 'function') {
|
|
44
|
+
this.onRender(this.getTime());
|
|
45
|
+
}
|
|
44
46
|
}
|
|
45
|
-
}
|
|
46
47
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
start() {
|
|
49
|
+
// update the countdown
|
|
50
|
+
this.update();
|
|
50
51
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
// setup a timer
|
|
53
|
+
const intervalId = setInterval(() => {
|
|
54
|
+
// update the timer
|
|
55
|
+
this.timeRemaining -= 1000;
|
|
55
56
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
if (this.timeRemaining < 0) {
|
|
58
|
+
// call the callback
|
|
59
|
+
complete();
|
|
59
60
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
// clear the interval if expired
|
|
62
|
+
clearInterval(intervalId);
|
|
63
|
+
} else {
|
|
64
|
+
this.update();
|
|
65
|
+
}
|
|
65
66
|
|
|
66
|
-
|
|
67
|
+
}, 1000);
|
|
68
|
+
}
|
|
67
69
|
}
|
|
68
|
-
}
|
|
69
70
|
|
|
70
|
-
// Get the expiration
|
|
71
|
-
const getExpirationTime = () => {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
};
|
|
71
|
+
// Get the expiration
|
|
72
|
+
const getExpirationTime = () => {
|
|
73
|
+
const expiration = document.querySelector('.timer-expiration').innerHTML;
|
|
74
|
+
return Date.parse(expiration);
|
|
75
|
+
};
|
|
75
76
|
|
|
76
|
-
// select elements
|
|
77
|
-
const app = document.querySelector('.countdown-row');
|
|
78
|
-
const message = document.querySelector('.message');
|
|
79
|
-
const heading = document.querySelector('h1');
|
|
77
|
+
// select elements
|
|
78
|
+
const app = document.querySelector('.countdown-row');
|
|
79
|
+
const message = document.querySelector('.message');
|
|
80
|
+
const heading = document.querySelector('h1');
|
|
80
81
|
|
|
81
82
|
|
|
82
|
-
const format = (t) => {
|
|
83
|
-
|
|
84
|
-
};
|
|
83
|
+
const format = (t) => {
|
|
84
|
+
return t < 10 ? '0' + t : t;
|
|
85
|
+
};
|
|
85
86
|
|
|
86
|
-
|
|
87
|
-
"const render = (time) => {
|
|
87
|
+
const render = (time) => {
|
|
88
88
|
app.innerHTML = `
|
|
89
|
-
<span class
|
|
90
|
-
<span class
|
|
91
|
-
<span class
|
|
89
|
+
<span class=\"countdown-section\">
|
|
90
|
+
<span class=\"countdown-amount\" style=\"color: rgb(0, 0, 0);\">${format(time.days)}</span>
|
|
91
|
+
<span class=\"countdown-period\" style=\"color: var(--pale-blue);\">Days</span>
|
|
92
92
|
</span>
|
|
93
|
-
<span class
|
|
94
|
-
<span class
|
|
95
|
-
<span class
|
|
93
|
+
<span class=\"countdown-section\">
|
|
94
|
+
<span class=\"countdown-amount\" style=\"color: rgb(0, 0, 0);\">${format(time.hours)}</span>
|
|
95
|
+
<span class=\"countdown-period\" style=\"color: var(--pale-blue);\">Hours</span>
|
|
96
96
|
</span>
|
|
97
|
-
<span class
|
|
98
|
-
<span class
|
|
99
|
-
<span class
|
|
97
|
+
<span class=\"countdown-section\">
|
|
98
|
+
<span class=\"countdown-amount\" style=\"color: rgb(0, 0, 0);\">${format(time.minutes)}</span>
|
|
99
|
+
<span class=\"countdown-period\" style=\"color: var(--pale-blue);\">Minutes</span>
|
|
100
100
|
</span>
|
|
101
|
-
<span class
|
|
102
|
-
<span class
|
|
103
|
-
<span class
|
|
101
|
+
<span class=\"countdown-section\">
|
|
102
|
+
<span class=\"countdown-amount\" style=\"color: rgb(0, 0, 0);\">${format(time.seconds)}</span>
|
|
103
|
+
<span class=\"countdown-period\" style=\"color: var(--pale-blue);\">Seconds</span>
|
|
104
104
|
</span>
|
|
105
105
|
`;
|
|
106
106
|
};
|
|
@@ -7,10 +7,10 @@ layout: bridgetown_theme_single_page_opt_in/spoi_default
|
|
|
7
7
|
{% render "bridgetown_theme_single_page_opt_in/2_offer_hook", data: site.data.2_offer_hook, button: site.data.cta_button, event: site.data.event_details %}
|
|
8
8
|
{% render "bridgetown_theme_single_page_opt_in/3_anchor_banner_text", data: site.data.3_anchor_banner %}
|
|
9
9
|
{% render "bridgetown_theme_single_page_opt_in/3_anchor_banner", data: site.data.3_anchor_banner %}
|
|
10
|
-
{% render "bridgetown_theme_single_page_opt_in/4_vehicle_text", data: site.data.4_vehicle_text, button: site.data.
|
|
10
|
+
{% render "bridgetown_theme_single_page_opt_in/4_vehicle_text", data: site.data.4_vehicle_text, button: site.data.cta_button %}
|
|
11
11
|
{% render "bridgetown_theme_single_page_opt_in/3_anchor_text", data: site.data.3_anchor_text %}
|
|
12
12
|
{% render "bridgetown_theme_single_page_opt_in/5_bonus_offer", data: site.data.5_bonus_offer %}
|
|
13
|
-
{% render "bridgetown_theme_single_page_opt_in/6_cta_button", data: site.data.
|
|
13
|
+
{% render "bridgetown_theme_single_page_opt_in/6_cta_button", data: site.data.cta_button %}
|
|
14
14
|
|
|
15
15
|
<div class="container noTopMargin padding40-top padding40-bottom padding40H noBorder borderSolid border3px radius0 activeSection_topBorder0 activeSection_bottomBorder0 fullContainer bgCover" style="background-color: var(--dark-red); padding-top: 0px; padding-bottom: 75px; outline: none; margin-top: 0px;">
|
|
16
16
|
<div class="containerInner ui-sortable" style="padding-left: 100px; padding-right: 100px;">
|