-
Notifications
You must be signed in to change notification settings - Fork 23
/
clients.templ
148 lines (140 loc) · 5.48 KB
/
clients.templ
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
package main
templ clientsTemplate(clients []ClientReference) {
<aside class="fixed flex-1 bottom-0 left-0 top-auto mt-4 w-full self-start transition-all duration-500 print:hidden sm:sticky sm:bottom-auto sm:left-auto sm:top-8 sm:w-auto">
<div class="absolute right-0 top-0 z-10 mb-4 h-10 w-10 text-center text-sm sm:relative sm:h-auto sm:w-auto">
<span class="hidden sm:block">Open in</span>
<div
_="on click
toggle .hidden on #open
toggle .hidden on #close
toggle .hidden on #gradient
toggle .overflow-hidden on <body />
toggle .hidden on <.client:not(:first-child) />
toggle .top_client_sticky on <.clients_wrapper > :first-child />
"
>
<div id="open" class="inline sm:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
viewBox="0 0 20 20"
class="m-auto mt-[28%] block h-1/2 w-1/2"
>
<path
fill="#fafafa"
fill-rule="evenodd"
d="M3.808.355h2.85a2.85 2.85 0 0 1 2.85 2.85v2.85a2.85 2.85 0 0 1-2.85 2.85h-2.85a2.85 2.85 0 0 1-2.85-2.85v-2.85a2.85 2.85 0 0 1 2.85-2.85Zm2.85 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0 3.8h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm10.45-6.65h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0-17.1h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div id="close" class="mt-4 hidden sm:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
width="31"
height="16"
fill="currentColor"
viewBox="0 0 31 16"
class="m-auto mt-[28%] block h-1/2 w-1/2"
>
<path
fill="#fafafa"
d="M30.207 3.016 16.744 14.983a1.496 1.496 0 0 1-1.974 0L1.307 3.016A1.496 1.496 0 0 1 3.28.772l12.476 11.085L28.233.772a1.496 1.496 0 1 1 1.974 2.244Z"
></path>
</svg>
</div>
</div>
</div>
<div
class="clients_wrapper | overflow-y-auto rounded-t-lg max-h-[55vh] sm:max-h-max"
_="on load
wait 50ms
get my children
get filterAndSort(it) then repeat for c in it call me.appendChild(c) end
get first in me
then tell it
remove .hidden
add .top_client
"
>
for _, client := range clients {
<div
data-platform={ client.Platform }
class="client | hidden w-full items-center border-b border-zinc-800 bg-zinc-700 first-of-type:rounded-t-lg first-of-type:border-0 first-of-type:bg-strongpink hover:bg-zinc-800 sm:mb-3 sm:flex sm:rounded-lg sm:border-0 sm:first-of-type:rounded-lg"
data-id={ client.ID }
_="on load get my @data-id then get localStorage[`nj:${it}`] or 0 then set @count to it then set @title to `used ${it} times`
on click get my @data-id then increment localStorage[`nj:${it}`]"
>
<a
class="client block basis-full px-3 py-3 text-left text-[17px] font-normal leading-4 text-white no-underline sm:inline sm:py-1.5 sm:text-center sm:font-light"
href={ client.URL }
>
<span class="ml-1.5 pr-2 inline basis-1/5 text-neutral-400 sm:hidden">Open in</span>
{ client.Name }
<span
class="type | float-right mr-4 text-xs uppercase text-neutral-400 sm:hidden"
>{ client.Platform }</span>
</a>
</div>
}
<div data-platform="dummy" class="client | hidden h-8 bg-zinc-700"></div>
</div>
<div
id="gradient"
class="fixed bottom-0 hidden h-10 w-full bg-gradient-to-t from-zinc-800 to-transparent pointer-events-auto"
></div>
</aside>
<style>
.top_client_sticky {
position: absolute;
}
.top_client span {
color: #FFFFFF;
}
.top_client a span.type {
display: none;
}
.clients_wrapper div {
&:nth-child(2) {
margin-top: 2.5rem;
}
}
</style>
<script>
function getPlatform() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
return 'android';
} else if (/iPad|iPhone|iPod/i.test(userAgent) && !window.MSStream) {
return 'ios';
} else {
return 'web';
}
}
function filterAndSort(children) {
const platform = getPlatform();
const filteredElements = Array.from(children).filter((element) => {
const platformAttr = element.getAttribute('data-platform');
return platform === platformAttr || platformAttr === 'web' || platformAttr === 'native' || platformAttr === 'dummy';
});
Array.from(children).forEach((element) => {
if (!filteredElements.includes(element)) {
element.remove();
}
});
const sortedElements = filteredElements.sort(
(a, b) =>
parseInt(b.getAttribute('count')) - parseInt(a.getAttribute('count'))
);
// Assuming you want to re-insert the sorted elements into their parent container
const parent = children[0].parentNode;
parent.innerHTML = ''; // Clear the parent container
sortedElements.forEach((element) => {
parent.appendChild(element);
});
return sortedElements;
}
</script>
}