mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-16 02:25:10 +01:00
0c18baf478
- Version selector for MidnightLib is now finally working - Added buttons to copy code from code blocks - Added color chooser in Puzzle wiki
71 lines
2.4 KiB
Plaintext
71 lines
2.4 KiB
Plaintext
---
|
|
interface Props {
|
|
includeHashtag?: boolean
|
|
}
|
|
const { includeHashtag } = Astro.props
|
|
import { Icon } from 'astro-icon/components'
|
|
---
|
|
|
|
<section class="my-6">
|
|
<div class="">
|
|
<p class="text-lg">Select a color below to get the hex code:</p>
|
|
<div class="flex">
|
|
<fieldset>
|
|
<input
|
|
type="color"
|
|
id="color-select"
|
|
class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4"
|
|
/>
|
|
</fieldset>
|
|
<button
|
|
id="copy-button"
|
|
class="button has-icon color-secondary ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16">
|
|
<Icon id="copy-icon" name="ion:copy-outline" />
|
|
<Icon id="success-icon" name="ion:checkmark-outline" class="hidden" />
|
|
<p id="color-label">{includeHashtag ? '#' : ''}000000</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// Get the 2 elements from above
|
|
const colorLabel = document.getElementById("color-label");
|
|
const colorSelect = document.getElementById("color-select");
|
|
const copyButton = document.getElementById("copy-button");
|
|
|
|
const copyIcon = document.getElementById("copy-icon");
|
|
const successIcon = document.getElementById("success-icon");
|
|
|
|
colorSelect?.addEventListener("change", async (e) => {
|
|
const {
|
|
target: { value }, // Returns the chosen color (already in hex format :D)
|
|
} = e;
|
|
if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', '');
|
|
});
|
|
|
|
// Add event listener to copy the color to the clipboard
|
|
if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
|
|
|
|
|
|
async function copyString(text: string, button: HTMLElement) {
|
|
await navigator.clipboard.writeText(text);
|
|
|
|
// visual feedback that task is completed
|
|
if (button) {
|
|
button.style.backgroundColor = "#"+text.replace('#', '');
|
|
button.style.borderColor = "#"+text.replace('#', '');
|
|
}
|
|
if (copyIcon) copyIcon.style.display = 'none';
|
|
if (successIcon) successIcon.style.display = 'initial';
|
|
|
|
setTimeout(() => {
|
|
if (button) {
|
|
button.style.backgroundColor = 'var(--secondary-100)';
|
|
button.style.borderColor = 'var(--secondary-100)';
|
|
}
|
|
if (copyIcon) copyIcon.style.display = 'initial';
|
|
if (successIcon) successIcon.style.display = 'none';
|
|
}, 1000);
|
|
}
|
|
|
|
</script> |