bridgetown_theme_single_page_opt_in 0.1.55 → 0.1.56
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/bridgetown.automation.rb +74 -74
- data/lib/bridgetown_theme_single_page_opt_in/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c6d99d2facce48db7e455d8b0bdbb0a6d062dca7d8591c7da8ff433b9d8eece5
|
|
4
|
+
data.tar.gz: 4f9b017554eef94e38f3893b10278423729b51754621735e4b16c740c91c17a2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b01f0f9a1f9fa8c4db5eb5b8edb401f3e245ff9450508e7434edaa7849394edfddb5d90a9e0c48d28ea24a865d603b7a284b8c13b9b08a31b481d0dd243986d7
|
|
7
|
+
data.tar.gz: bbba7f4e81af63d257e83e29b08b12e85dff26733727c5f78b89fd8f8daf6cd5cbc41b2cc3425358f56ce4bb6368d86bf665ad4b1c7ce99626024d31dfd4ca03
|
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
|
};
|