bubbling-ale 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_includes/footer.html +6 -0
- data/_includes/head.html +20 -0
- data/_includes/header.html +11 -0
- data/_includes/scripts.html +6 -0
- data/_layouts/default.html +4 -43
- data/_sass/bubbling-ale.scss +1 -1
- data/assets/javascripts/bubbler.js +47 -20
- metadata +7 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 98bf4ef904f7a6a051e145e52188ca2d5637eebafaafda9ad27a350426e95025
|
|
4
|
+
data.tar.gz: 8d58b2ee53315d7f920098856b3b5ae3f7b98d91e71504cafe06856de2eb11e6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9fe0bdc24b1dd0897d5ebe11864c442a95a5f4d1831b880115fca94663d992cc1c0af57cd4cf66c51978513c710273d7e657d34471b1f1498103f5e610d5d4af
|
|
7
|
+
data.tar.gz: f0791cfd774c386261f28077f464edb4f3276e27ceab0e26842a3dd75a730cb8737b9d2d4315e1563b4b83a08b3901a2e95dea1b2822990b43f6368b40945f70
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<footer class="site-footer">
|
|
2
|
+
{% if site.github.is_project_page %}
|
|
3
|
+
<span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
|
|
4
|
+
{% endif %}
|
|
5
|
+
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
|
|
6
|
+
</footer>
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
{% if site.google_analytics %}
|
|
3
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
|
4
|
+
<script>
|
|
5
|
+
window.dataLayer = window.dataLayer || [];
|
|
6
|
+
function gtag(){dataLayer.push(arguments);}
|
|
7
|
+
gtag('js', new Date());
|
|
8
|
+
gtag('config', '{{ site.google_analytics }}');
|
|
9
|
+
</script>
|
|
10
|
+
{% endif %}
|
|
11
|
+
<meta charset="UTF-8">
|
|
12
|
+
|
|
13
|
+
{% seo %}
|
|
14
|
+
|
|
15
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
16
|
+
<meta name="theme-color" content="#157878">
|
|
17
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
18
|
+
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
|
|
19
|
+
<script src="assets/javascripts/bubbler.js"></script>
|
|
20
|
+
</head>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<header id="bubble-master" class="page-header bubble-container" role="banner">
|
|
2
|
+
<h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
|
|
3
|
+
<h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
|
|
4
|
+
{% if site.github.is_project_page %}
|
|
5
|
+
<a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
|
|
6
|
+
{% endif %}
|
|
7
|
+
{% if site.show_downloads %}
|
|
8
|
+
<a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
|
|
9
|
+
<a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
|
|
10
|
+
{% endif %}
|
|
11
|
+
</header>
|
data/_layouts/default.html
CHANGED
|
@@ -1,56 +1,17 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="{{ site.lang | default: "en-US" }}">
|
|
3
|
-
|
|
3
|
+
{% include head.html %}
|
|
4
4
|
|
|
5
|
-
{% if site.google_analytics %}
|
|
6
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
|
7
|
-
<script>
|
|
8
|
-
window.dataLayer = window.dataLayer || [];
|
|
9
|
-
function gtag(){dataLayer.push(arguments);}
|
|
10
|
-
gtag('js', new Date());
|
|
11
|
-
gtag('config', '{{ site.google_analytics }}');
|
|
12
|
-
</script>
|
|
13
|
-
{% endif %}
|
|
14
|
-
<meta charset="UTF-8">
|
|
15
|
-
|
|
16
|
-
{% seo %}
|
|
17
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
18
|
-
<meta name="theme-color" content="#157878">
|
|
19
|
-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
20
|
-
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
|
|
21
|
-
<script src="assets/javascripts/bubbler.js"></script>
|
|
22
|
-
</head>
|
|
23
5
|
<body>
|
|
24
6
|
<a id="skip-to-content" href="#content">Skip to the content.</a>
|
|
25
7
|
|
|
26
|
-
|
|
27
|
-
<h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
|
|
28
|
-
<h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
|
|
29
|
-
{% if site.github.is_project_page %}
|
|
30
|
-
<a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
|
|
31
|
-
{% endif %}
|
|
32
|
-
{% if site.show_downloads %}
|
|
33
|
-
<a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
|
|
34
|
-
<a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
|
|
35
|
-
{% endif %}
|
|
36
|
-
</header>
|
|
8
|
+
{% include header.html %}
|
|
37
9
|
|
|
38
10
|
<main id="content" class="main-content" role="main">
|
|
39
11
|
{{ content }}
|
|
40
|
-
|
|
41
|
-
<footer class="site-footer">
|
|
42
|
-
{% if site.github.is_project_page %}
|
|
43
|
-
<span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
|
|
44
|
-
{% endif %}
|
|
45
|
-
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
|
|
46
|
-
</footer>
|
|
12
|
+
{% include footer.html %}
|
|
47
13
|
</main>
|
|
48
14
|
</body>
|
|
49
15
|
|
|
50
|
-
{%
|
|
51
|
-
<script>
|
|
52
|
-
let banner = document.getElementById('bubble-master');
|
|
53
|
-
carbonate(banner);
|
|
54
|
-
</script>
|
|
55
|
-
{% endunless %}
|
|
16
|
+
{% include scripts.html %}
|
|
56
17
|
</html>
|
data/_sass/bubbling-ale.scss
CHANGED
|
@@ -1,7 +1,22 @@
|
|
|
1
|
+
let containerSqpx = -1;
|
|
2
|
+
let containerWidth = -1;
|
|
3
|
+
let containerHeight = -1;
|
|
4
|
+
let numBubbles = 0;
|
|
5
|
+
|
|
1
6
|
function createBubble(parent) {
|
|
7
|
+
if (containerWidth < 0) {
|
|
8
|
+
containerWidth = parent.getBoundingClientRect().width;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
if (containerHeight < 0) {
|
|
12
|
+
containerHeight = parent.getBoundingClientRect().height;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
let speed = getRandomBubbleSpeed();
|
|
2
16
|
let size = getRandomBubbleSize();
|
|
3
|
-
let leftPos = getRandomBubbleLeftPosition(
|
|
17
|
+
let leftPos = getRandomBubbleLeftPosition(containerWidth);
|
|
4
18
|
let bubbleElement = document.createElement('div');
|
|
19
|
+
bubbleElement.setAttribute('class', 'bubble');
|
|
5
20
|
bubbleElement.style.height = `${size}px`;
|
|
6
21
|
bubbleElement.style.width = `${size}px`;
|
|
7
22
|
bubbleElement.style.position = 'absolute';
|
|
@@ -10,23 +25,37 @@ function createBubble(parent) {
|
|
|
10
25
|
bubbleElement.style.left = `${leftPos}px`;
|
|
11
26
|
bubbleElement.style.bottom = '0px';
|
|
12
27
|
bubbleElement.style.zIndex = '1';
|
|
28
|
+
bubbleElement.style.transition = `transform ${speed}s`;
|
|
29
|
+
bubbleElement.style.transform = `translateY(0px)`;
|
|
30
|
+
bubbleElement.addEventListener("transitionend", bubbleEnded);
|
|
13
31
|
|
|
14
32
|
parent.appendChild(bubbleElement);
|
|
33
|
+
numBubbles++;
|
|
15
34
|
|
|
16
35
|
return {
|
|
17
36
|
element: bubbleElement,
|
|
18
37
|
position: 0,
|
|
19
38
|
speed: getRandomBubbleSpeed(),
|
|
20
|
-
maxPosition: Math.floor(parent.getBoundingClientRect().height + 10)
|
|
39
|
+
maxPosition: Math.floor(parent.getBoundingClientRect().height + 10),
|
|
40
|
+
updateStarted: false
|
|
21
41
|
}
|
|
22
42
|
}
|
|
23
43
|
|
|
44
|
+
function bubbleEnded(event) {
|
|
45
|
+
let bubbleElement = event.srcElement;
|
|
46
|
+
bubbleElement.parentNode.removeChild(bubbleElement);
|
|
47
|
+
numBubbles--;
|
|
48
|
+
}
|
|
49
|
+
|
|
24
50
|
function getMaxBubblesForContainer(container) {
|
|
25
|
-
// We want a distribution of about 0.
|
|
26
|
-
|
|
27
|
-
|
|
51
|
+
// We want a distribution of about 0.005 bubbles/sqpx
|
|
52
|
+
if (containerSqpx < 0) {
|
|
53
|
+
containerSqpx = container.getBoundingClientRect().width
|
|
54
|
+
* container.getBoundingClientRect().height;
|
|
55
|
+
}
|
|
28
56
|
|
|
29
|
-
|
|
57
|
+
let maxNum = Math.floor(0.005 * containerSqpx);
|
|
58
|
+
return maxNum;
|
|
30
59
|
}
|
|
31
60
|
|
|
32
61
|
// Will return a random speed, in px/second, between 10 and 50
|
|
@@ -39,12 +68,9 @@ function getRandomBubbleSize() {
|
|
|
39
68
|
return Math.floor(Math.random() * 11 + 4);
|
|
40
69
|
}
|
|
41
70
|
|
|
42
|
-
function getRandomBubbleLeftPosition(
|
|
71
|
+
function getRandomBubbleLeftPosition(width) {
|
|
43
72
|
// the left position must be between 1 and the max container width - 1
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
let leftPos = Math.floor((Math.random() * (maxContainerWidth - 1) + 1));
|
|
47
|
-
return leftPos;
|
|
73
|
+
return Math.floor((Math.random() * (width - 1) + 1));
|
|
48
74
|
}
|
|
49
75
|
|
|
50
76
|
function carbonate(element) {
|
|
@@ -59,6 +85,7 @@ function carbonate(element) {
|
|
|
59
85
|
bubbles.push(createBubble(element));
|
|
60
86
|
|
|
61
87
|
window.bubbler.bubbles = bubbles;
|
|
88
|
+
|
|
62
89
|
if (!window.bubbler.carbonatedElements) {
|
|
63
90
|
window.bubbler.carbonatedElements = [];
|
|
64
91
|
}
|
|
@@ -73,17 +100,18 @@ function updateBubblePositions(timestamp) {
|
|
|
73
100
|
let elapsed = timestamp - window.bubbler.lastUpdateTime;
|
|
74
101
|
let bubbles = window.bubbler.bubbles;
|
|
75
102
|
let updatedBubbles = [];
|
|
103
|
+
|
|
76
104
|
for (let bubbleIdx in bubbles) {
|
|
77
105
|
let bubble = bubbles[bubbleIdx];
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
bubble.element.parentNode.removeChild(bubble.element);
|
|
83
|
-
} else {
|
|
84
|
-
bubble.element.style.transform = `translateY(-${bubble.position}px)`;
|
|
85
|
-
updatedBubbles.push(bubble);
|
|
106
|
+
if (!bubble.updateStarted) {
|
|
107
|
+
let maxPosition = bubble.maxPosition;
|
|
108
|
+
bubble.element.style.transform = `translateY(-${maxPosition}px)`;
|
|
109
|
+
bubble.updateStarted = true;
|
|
86
110
|
}
|
|
111
|
+
|
|
112
|
+
bubble.position = bubble.position + ((bubble.speed / 1000.0) * elapsed);
|
|
113
|
+
|
|
114
|
+
updatedBubbles.push(bubble);
|
|
87
115
|
}
|
|
88
116
|
|
|
89
117
|
// Randomly create between 1 and 5 bubbles PER carbonated element, depending
|
|
@@ -93,7 +121,6 @@ function updateBubblePositions(timestamp) {
|
|
|
93
121
|
let carbonationContainer = carbonatedParents[carbonatedContainerIdx];
|
|
94
122
|
|
|
95
123
|
// There is a sliding scale determining how many bubbles will be created.
|
|
96
|
-
let numBubbles = window.bubbler.bubbles.length;
|
|
97
124
|
let bubbleChance;
|
|
98
125
|
if (numBubbles < 20) {
|
|
99
126
|
// if there are less than 20 bubbles in the view, there is a 100% chance
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bubbling-ale
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Scott Johnson
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2022-10-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -95,6 +95,10 @@ extra_rdoc_files: []
|
|
|
95
95
|
files:
|
|
96
96
|
- LICENSE
|
|
97
97
|
- README.md
|
|
98
|
+
- _includes/footer.html
|
|
99
|
+
- _includes/head.html
|
|
100
|
+
- _includes/header.html
|
|
101
|
+
- _includes/scripts.html
|
|
98
102
|
- _layouts/default.html
|
|
99
103
|
- _sass/bubbling-ale.scss
|
|
100
104
|
- _sass/normalize.scss
|
|
@@ -121,7 +125,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
121
125
|
- !ruby/object:Gem::Version
|
|
122
126
|
version: '0'
|
|
123
127
|
requirements: []
|
|
124
|
-
rubygems_version: 3.
|
|
128
|
+
rubygems_version: 3.3.22
|
|
125
129
|
signing_key:
|
|
126
130
|
specification_version: 4
|
|
127
131
|
summary: Bubbling Ale is a Jekyll theme, designed specifically for Github Pages
|