hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move color-picker code to the end of a document

Browse Source
This commit is contained in:
daudix
2024-08-07 05:14:28 +03:00
parent e676f7f612
commit e7aa38bc6c
1 changed files with 76 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
content/demo/index.md
View File

@ -11,82 +11,6 @@ This is a demo of most of the components, but some of them are only accessible o
- [Post Demo](@/blog/the-quill-of-duck/index.md) - [Post Demo](@/blog/the-quill-of-duck/index.md)
{% end %} {% end %}
<!-- For the demo purposes only -->
<div id="color-picker-container">
<label for="color-picker">Primary color:</label>
<input id="color-picker" type="color" />
</div>
<style>
#color-picker-container {
-webkit-backdrop-filter: var(--blur);
position: fixed;
bottom: 0;
left: 0;
transform: translateX(calc(-100% + 1rem));
z-index: 1;
backdrop-filter: var(--blur);
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-start-end-radius: var(--rounded-corner);
background-color: var(--nav-bg);
padding: 0.5rem;
}
#color-picker-container:hover {
transform: none;
}
#color-picker-container label {
margin-inline-end: 0.25rem;
color: var(--fg-muted-4);
font-weight: bold;
}
:root[dir*="rtl"] #color-picker-container {
right: 0;
left: unset;
transform: translateX(calc(100% - 1rem));
}
:root[dir*="rtl"] #color-picker-container:hover {
transform: none;
}
</style>
<script>
let colorPicker;
const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
console.log(defaultColor);
window.addEventListener("load", startup, false);
function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
function startup() {
colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", update, false);
colorPicker.select();
}
function update(event) {
document.documentElement.style.setProperty('--primary-color', event.target.value);
document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
}
</script>
<!-- End -->
## Markdown ## Markdown
Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***. Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***.
@ -548,3 +472,79 @@ Blah blah <q>Inline Quote</q> hmm.
[^1]: Footnote [^1]: Footnote
[^2]: [Footnote (link)](https://example.org) [^2]: [Footnote (link)](https://example.org)
<!-- For the demo purposes only -->
<div id="color-picker-container">
<label for="color-picker">Primary color:</label>
<input id="color-picker" type="color" />
</div>
<style>
#color-picker-container {
-webkit-backdrop-filter: var(--blur);
position: fixed;
bottom: 0;
left: 0;
transform: translateX(calc(-100% + 1rem));
z-index: 1;
backdrop-filter: var(--blur);
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-start-end-radius: var(--rounded-corner);
background-color: var(--nav-bg);
padding: 0.5rem;
}
#color-picker-container:hover {
transform: none;
}
#color-picker-container label {
margin-inline-end: 0.25rem;
color: var(--fg-muted-4);
font-weight: bold;
}
:root[dir*="rtl"] #color-picker-container {
right: 0;
left: unset;
transform: translateX(calc(100% - 1rem));
}
:root[dir*="rtl"] #color-picker-container:hover {
transform: none;
}
</style>
<script>
let colorPicker;
const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
console.log(defaultColor);
window.addEventListener("load", startup, false);
function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
function startup() {
colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", update, false);
colorPicker.select();
}
function update(event) {
document.documentElement.style.setProperty('--primary-color', event.target.value);
document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
}
</script>
<!-- End -->