H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-06 10:44:17 +00:00
Code

fix: make clipboard copy function available in http environments besides https and localhost

Browse Source
This commit is contained in:
axzilla 2025-01-20 20:34:46 +07:00
parent c684dcdd2f
commit 2aec2d475e
3 changed files with 27 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
assets/css/output.css
View File

@ -107,7 +107,7 @@
}
/*
! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/
/*
@ -755,10 +755,6 @@ body {
top: 100%;
}
.top-\[72px\] {
top: 72px;
}
.z-10 {
z-index: 10;
}
@ -950,10 +946,6 @@ body {
height: 100vh;
}
.h-40 {
height: 10rem;
}
.\!max-h-\[1000px\] {
max-height: 1000px !important;
}
@ -1058,16 +1050,6 @@ body {
width: 100%;
}
.min-w-max {
min-width: -moz-max-content;
min-width: max-content;
}
.min-w-min {
min-width: -moz-min-content;
min-width: min-content;
}
.max-w-0 {
max-width: 0px;
}
@ -1264,10 +1246,6 @@ body {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@ -1292,10 +1270,6 @@ body {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
@ -1339,12 +1313,6 @@ body {
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@ -1615,10 +1583,6 @@ body {
background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-muted\/20 {
background-color: hsl(var(--muted) / 0.2);
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
@ -1718,11 +1682,6 @@ body {
padding-bottom: 2rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pb-0 {
padding-bottom: 0px;
}
@ -2449,16 +2408,6 @@ body {
opacity: 0.5;
}
.data-\[selected\=true\]\:bg-primary[data-selected="true"] {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:text-primary-foreground[data-selected="true"] {
--tw-text-opacity: 1;
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity, 1));

34
pkg/components/code.templ
View File

@ -19,15 +19,31 @@ templ CodeScript() {
Alpine.data('code', () => ({
isCopied: false,
isNotCopied: true,
copyCode() {
navigator.clipboard.writeText(this.$refs.code.textContent)
this.isCopied = true
this.isNotCopied = false
setTimeout(() => {
this.isCopied = false
this.isNotCopied = true
}, 2000)
}
copyCode() {
try {
// Moderne Methode (HTTPS)
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(this.$refs.code.textContent);
} else {
// Fallback für HTTP
const textArea = document.createElement('textarea');
textArea.value = this.$refs.code.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
this.isCopied = true;
this.isNotCopied = false;
setTimeout(() => {
this.isCopied = false;
this.isNotCopied = true;
}, 2000);
} catch (err) {
console.error('Copy failed', err);
}
}
}))
})
</script>

2
pkg/components/code_templ.go
View File

@ -73,7 +73,7 @@ func CodeScript() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">\n document.addEventListener('alpine:init', () => {\n // Highlight.js init\n hljs.highlightAll();\n\n // Copy functionality\n Alpine.data('code', () => ({\n isCopied: false,\n isNotCopied: true,\n copyCode() {\n navigator.clipboard.writeText(this.$refs.code.textContent)\n this.isCopied = true\n this.isNotCopied = false\n setTimeout(() => {\n this.isCopied = false\n this.isNotCopied = true\n }, 2000)\n }\n }))\n })\n </script>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">\n document.addEventListener('alpine:init', () => {\n // Highlight.js init\n hljs.highlightAll();\n\n // Copy functionality\n Alpine.data('code', () => ({\n isCopied: false,\n isNotCopied: true,\n\t\t\t\t\tcopyCode() {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t// Moderne Methode (HTTPS)\n\t\t\t\t\t\t\tif (navigator.clipboard && window.isSecureContext) {\n\t\t\t\t\t\t\t\tnavigator.clipboard.writeText(this.$refs.code.textContent);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t// Fallback für HTTP\n\t\t\t\t\t\t\t\tconst textArea = document.createElement('textarea');\n\t\t\t\t\t\t\t\ttextArea.value = this.$refs.code.textContent;\n\t\t\t\t\t\t\t\tdocument.body.appendChild(textArea);\n\t\t\t\t\t\t\t\ttextArea.select();\n\t\t\t\t\t\t\t\tdocument.execCommand('copy');\n\t\t\t\t\t\t\t\tdocument.body.removeChild(textArea);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tthis.isCopied = true;\n\t\t\t\t\t\t\tthis.isNotCopied = false;\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tthis.isCopied = false;\n\t\t\t\t\t\t\t\tthis.isNotCopied = true;\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t} catch (err) {\n\t\t\t\t\t\t\tconsole.error('Copy failed', err);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n }))\n })\n </script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}