julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tuto for query strings

Browse Source
This commit is contained in:
Julien Calixte
2024-05-14 18:45:18 +02:00
parent 1dde2f94ab
commit 0964951354
3 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.css
View File

@@ -131,14 +131,23 @@ li {
} }
} }
a { main a {
color: var(--color); color: var(--color);
text-decoration: none; text-decoration: none;
} }
a:visited, main a:visited,
a:focus, main a:focus,
a:focus-visible { main a:focus-visible {
color: var(--color); color: var(--color);
text-decoration: none; text-decoration: none;
} }
details.hud {
font-size: 16px;
margin: 1rem;
}
details.hud li {
text-align: left;
}

24
index.html
View File

@@ -16,7 +16,7 @@
<link rel="mask-icon" href="people-improvement.svg" color="#ffffff" /> <link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />
</head> </head>
<body> <body>
<header> <header class="hud">
<h1 class="thinking-people-system">Thinking People System</h1> <h1 class="thinking-people-system">Thinking People System</h1>
</header> </header>
<main> <main>
@@ -118,6 +118,28 @@
</section> </section>
</section> </section>
</main> </main>
<details class="hud">
<summary>Enablers</summary>
<p>
You can use the following options to interact with the TPS. It works
with the query string. Like so:
<a href="https://thinking-people-system.house?size=small"
>https://thinking-people-system.house?size=small</a
>.
</p>
<ul>
<li>
<code>display</code>: display without any HUD with the option
<code>house-only</code>
</li>
<li><code>size</code>: can be <code>small</code></li>
<li>
<code>focus</code>: focus only a part of the TPS. Can be multiple.
</li>
<li><code>text</code>: hide text to only have the house</li>
<li><code>scroll</code>: scroll to the <code>end</code></li>
</ul>
</details>
<script type="module" src="main.ts"></script> <script type="module" src="main.ts"></script>
</body> </body>
</html> </html>

6
main.ts
View File

@@ -1,13 +1,9 @@
type TPSSearchParams = {
display?: 'house-only' | 'full'
}
const params = new URL(document.location.href).searchParams const params = new URL(document.location.href).searchParams
const display = params.get('display') const display = params.get('display')
if (display === 'house-only') { if (display === 'house-only') {
document.querySelector('header')?.remove() document.querySelectorAll('.hud')?.forEach((hud) => hud.remove())
} }
const size = params.get('size') const size = params.get('size')