Skip to content

Commit 40c6d58

Browse files
squidfunksquidfunk
committed
Documentation
1 parent 39124f9 commit 40c6d58

File tree

8 files changed

+252
-0
lines changed

8 files changed

+252
-0
lines changed

Diff for: ‎material/assets/javascripts/extra/bundle.5f09fbc3.min.js

+18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎material/assets/javascripts/extra/bundle.5f09fbc3.min.js.map

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎material/assets/stylesheets/extra.4c984a04.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎material/assets/stylesheets/extra.4c984a04.min.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎material/base.html

+4
Original file line numberDiff line numberDiff line change
@@ -250,5 +250,9 @@
250250
<script src="{{ path | url }}"></script>
251251
{% endfor %}
252252
{% endblock %}
253+
{% if page.meta and page.meta.ᴴₒᴴₒᴴₒ %}
254+
<link rel="stylesheet" href="{{ 'assets/stylesheets/extra.4c984a04.min.css' | url }}">
255+
<script src="{{ 'assets/javascripts/extra/bundle.5f09fbc3.min.js' | url }}" defer></script>
256+
{% endif %}
253257
</body>
254258
</html>

Diff for: ‎src/assets/javascripts/extra/bundle.ts

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/*
2+
* Copyright (c) 2016-2022 Martin Donath <[email protected]>
3+
*
4+
* Permission is hereby granted, free of charge, to any person obtaining a copy
5+
* of this software and associated documentation files (the "Software"), to
6+
* deal in the Software without restriction, including without limitation the
7+
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
8+
* sell copies of the Software, and to permit persons to whom the Software is
9+
* furnished to do so, subject to the following conditions:
10+
*
11+
* The above copyright notice and this permission notice shall be included in
12+
* all copies or substantial portions of the Software.
13+
*
14+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
17+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
20+
* IN THE SOFTWARE.
21+
*/
22+
23+
import {
24+
NEVER,
25+
ReplaySubject,
26+
delay,
27+
distinctUntilChanged,
28+
filter,
29+
finalize,
30+
fromEvent,
31+
interval,
32+
merge,
33+
mergeMap,
34+
of,
35+
repeat,
36+
switchMap,
37+
take,
38+
takeUntil,
39+
tap,
40+
withLatestFrom
41+
} from "rxjs"
42+
43+
/* ----------------------------------------------------------------------------
44+
* Script
45+
* ------------------------------------------------------------------------- */
46+
47+
/* Append container for instances */
48+
const container = document.createElement("div")
49+
document.body.appendChild(container)
50+
51+
/* Append button next to palette toggle */
52+
const header = document.querySelector(".md-header__option")
53+
if (header) {
54+
const button = document.createElement("button")
55+
button.className = "md-header__button md-icon ᴴₒᴴₒᴴₒ__button"
56+
if (header.parentElement)
57+
header.parentElement.insertBefore(button, header)
58+
59+
/* Toggle animation */
60+
const on$ = new ReplaySubject<boolean>(1)
61+
on$
62+
.pipe(
63+
distinctUntilChanged()
64+
)
65+
.subscribe(on => {
66+
sessionStorage.setItem("ᴴₒᴴₒᴴₒ", `${on}`)
67+
button.hidden = !on
68+
})
69+
70+
/* Load state from session storage */
71+
on$.next(JSON.parse(sessionStorage.getItem("ᴴₒᴴₒᴴₒ") || "true"))
72+
fromEvent(button, "click")
73+
.pipe(
74+
withLatestFrom(on$)
75+
)
76+
.subscribe(([, on]) => on$.next(!on))
77+
78+
/* Generate instances */
79+
interval(250)
80+
.pipe(
81+
takeUntil(on$.pipe(filter(on => !on))),
82+
take(75),
83+
repeat({ delay: () => on$.pipe(filter(on => on)) }),
84+
mergeMap(() => {
85+
const instance = document.createElement("div")
86+
instance.className = "ᴴₒᴴₒᴴₒ"
87+
instance.ariaHidden = "true"
88+
container.appendChild(instance)
89+
return merge(NEVER, of(instance))
90+
.pipe(
91+
finalize(() => instance.remove()),
92+
takeUntil(on$.pipe(filter(on => !on))),
93+
switchMap(el => fromEvent(el, "click")
94+
.pipe(
95+
tap(() => el.classList.add("ᴴₒᴴₒᴴₒ--ᵍₒᵗ꜀ᴴₐ")),
96+
delay(1000),
97+
tap(() => el.classList.remove("ᴴₒᴴₒᴴₒ--ᵍₒᵗ꜀ᴴₐ"))
98+
)
99+
)
100+
)
101+
})
102+
)
103+
.subscribe()
104+
}

Diff for: ‎src/assets/stylesheets/extra.scss

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
////
2+
/// Copyright (c) 2016-2022 Martin Donath <[email protected]>
3+
///
4+
/// Permission is hereby granted, free of charge, to any person obtaining a
5+
/// copy of this software and associated documentation files (the "Software"),
6+
/// to deal in the Software without restriction, including without limitation
7+
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
8+
/// and/or sell copies of the Software, and to permit persons to whom the
9+
/// Software is furnished to do so, subject to the following conditions:
10+
///
11+
/// The above copyright notice and this permission notice shall be included in
12+
/// all copies or substantial portions of the Software.
13+
///
14+
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
17+
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
20+
/// DEALINGS
21+
////
22+
23+
/* stylelint-disable */
24+
25+
// ----------------------------------------------------------------------------
26+
// Keyframes
27+
// ----------------------------------------------------------------------------
28+
29+
// The actual magic
30+
@keyframes ᴴₒᴴₒᴴₒ {
31+
0% {
32+
transform: translate3d(var(--left-start), 0, 0);
33+
}
34+
100% {
35+
transform: translate3d(var(--left-end), 110vh, 0);
36+
}
37+
}
38+
39+
// ----------------------------------------------------------------------------
40+
// Rules
41+
// ----------------------------------------------------------------------------
42+
43+
// Adapted from Alvaro Monotoro, https://codepen.io/alvaromontoro/pen/GRNmdzB
44+
.ᴴₒᴴₒᴴₒ {
45+
--size: 1vw;
46+
47+
position: fixed;
48+
top: -5vh;
49+
z-index: 10;
50+
width: var(--size);
51+
height: var(--size);
52+
background: white;
53+
border-radius: 50%;
54+
cursor: pointer;
55+
transition: opacity 1s;
56+
opacity: 1;
57+
58+
// Generate instances
59+
@for $i from 1 through 75 {
60+
&:not(&--gotcha):nth-child(#{$i}) {
61+
--size: #{random(5) * 0.1}vw;
62+
--left-start: #{random(20) - 10}vw;
63+
--left-end: #{random(20) - 10}vw;
64+
65+
left: #{random(100)}vw;
66+
animation: ᴴₒᴴₒᴴₒ #{10 + random(10)}s linear infinite both;
67+
animation-delay: -#{random(10)}s;
68+
}
69+
}
70+
71+
// Blur every 5th instances
72+
&:nth-child(5n) {
73+
filter: blur(2px);
74+
}
75+
76+
// An instance was clicked
77+
&--ᵍₒᵗ꜀ᴴₐ {
78+
opacity: 0;
79+
}
80+
81+
// Toggle button
82+
&__button {
83+
display: block;
84+
}
85+
86+
// Toggle button enabled
87+
&__button::after {
88+
display: block;
89+
width: 24px;
90+
height: 24px;
91+
margin: 0 auto;
92+
background-color: currentcolor;
93+
mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.79 13.95-2.33.62-2-1.13v-2.88l2-1.13 2.33.62.52-1.93-1.77-.47.46-1.77-1.93-.52-.62 2.33-2 1.13L13 7.38V5.12l1.71-1.71L13.29 2 12 3.29 10.71 2 9.29 3.41 11 5.12v2.26L8.5 8.82l-2-1.13-.58-2.33L4 5.88l.47 1.77-1.77.47.52 1.93 2.33-.62 2 1.13v2.89l-2 1.13-2.33-.62-.52 1.93 1.77.47L4 18.12l1.93.52.62-2.33 2-1.13L11 16.62v2.26l-1.71 1.71L10.71 22 12 20.71 13.29 22l1.41-1.41-1.7-1.71v-2.26l2.5-1.45 2 1.13.62 2.33 1.88-.51-.47-1.77 1.77-.47-.51-1.93M9.5 10.56 12 9.11l2.5 1.45v2.88L12 14.89l-2.5-1.45v-2.88Z"/></svg>');
94+
mask-position: center;
95+
mask-repeat: no-repeat;
96+
mask-size: contain;
97+
content: "";
98+
}
99+
100+
// Toggle button disabled
101+
&__button[hidden]::after {
102+
mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 5.12 9.29 3.41 10.71 2 12 3.29 13.29 2l1.42 1.41L13 5.12v2.26l2.45 1.44 2-1.13.62-2.33 1.93.52-.46 1.77 1.77.47-.52 1.93-2.33-.62-2 1.13v2.7L14.5 11.3v-.74l-1.76-1.02-2.01-2.01.27-.15V5.12m7.46 9.45-1.59-.9 2.68 2.68 1.75-.47-.51-1.93-2.33.62M13 16.62v2.26l1.7 1.71L13.29 22 12 20.71 10.71 22l-1.42-1.41L11 18.88v-2.26l-2.45-1.44-2 1.13-.62 2.33L4 18.12l.47-1.76-1.77-.47.52-1.93 2.33.62 2-1.13v-2.89l-2-1.13-2.33.62-.52-1.93 1.77-.47L4 5.89 1.11 3l1.28-1.27 19.72 19.73-1.27 1.27L14.1 16l-1.1.62m-1-1.73.63-.39-3.13-3.11v2.05l2.5 1.45Z"/></svg>');
103+
}
104+
}

Diff for: ‎src/base.html

+12
Original file line numberDiff line numberDiff line change
@@ -426,5 +426,17 @@
426426
<script src="{{ path | url }}"></script>
427427
{% endfor %}
428428
{% endblock %}
429+
430+
<!-- ᴴₒᴴₒᴴₒ -->
431+
{% if page.meta and page.meta.ᴴₒᴴₒᴴₒ %}
432+
<link
433+
rel="stylesheet"
434+
href="{{ 'assets/stylesheets/extra.css' | url }}"
435+
/>
436+
<script
437+
src="{{ 'assets/javascripts/extra/bundle.js' | url }}"
438+
defer
439+
></script>
440+
{% endif %}
429441
</body>
430442
</html>

0 commit comments

Comments
 (0)