Hat man mit Javascript ein Proxy Objekt, kann man mit Array.isArray() prüfen ob der Wert des Proxy Objektes ein Array ist.
CSV Download mit Javascript erstellen
Erstellt in Javascript am 14. November 2023 vom Daschmi
Mit folgender JavaScript Funktion kann ein CSV Download aus einem Array initiiert werden.
function downloadCSV(data, filename) {
const csvContent = "data:text/csv;charset=utf-8," + data.map(row => row.join(",")).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Das ganze wird dann wie folgt aufgerufen:
downloadCSV(csvData, fileName);
Tabindex/Focus bei durch Layer überdeckten Elementen
Erstellt in Javascript am 3. Februar 2023 vom Daschmi
Liegt über einem focusierbaren Element z.B. ein Layer dann sind diese Elemente weiterhin mit Tastatur auswählbar. Folgendes Script löst das Problem durch temporäres setzen eines negativen tabindex.
Beispiel: https://daschmi.de/static/ds_focuser/
const ds_focuser_open_layer = (el_layer) => {
document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)').forEach((el) => {
el.setAttribute('ds_focuser_tabindex', el.getAttribute('tabindex'));
el.setAttribute('tabindex', '-1');
});
el_layer.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
el.removeAttribute('ds_focuser_tabindex');
});
};
const ds_focuser_close_layer = () => {
document.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
el.removeAttribute('ds_focuser_tabindex');
});
};
Alle Elemente in einer Spalte gleich hoch wie in allen Spalten
Erstellt in Javascript am 20. Januar 2023 vom Daschmi
window.addEventListener("load", () => {
window.addEventListener("resize", () => {
for (const row of document.querySelectorAll('.equal_child_hight')) {
let arHeight = {};
for (const col of row.children) {
for (const el_index in col.children) {
if (typeof col.children[el_index] === 'object') {
if (arHeight[el_index] === undefined || arHeight[el_index] < col.children[el_index].getBoundingClientRect().height) arHeight[el_index] = col.children[el_index].getBoundingClientRect().height;
}
}
}
for (const col of row.children) {
for (const el_index in col.children) {
if (arHeight[el_index]) col.children[el_index].style.height = arHeight[el_index] + 'px';
}
}
}
});
});
Vue3 Composition API Spickzettel
Erstellt in Javascript am 1. September 2022 vom Daschmi
import { defineEmits, watch, inject, defineProps, computed, ref } from "vue";
Eigene Events mit defineEmits definieren
const emit = defineEmits(['select']);
...
emit('select');
Watcher definieren
watch(var, (newValue) => { .. });
Funktion aus Elternklasse nutzen
const xhr = inject(xhr);
Properties definieren
const props = defineProps(['label', 'invoicein']);
Computed Properties
const var = computed(() => { return ... };
HTML Referenzen nutzen
<script setup> let form = ref(null); </script> <template> <form ref="form"> ... </template>
Router mit Properties
#router.js
..
{ path: 'user/:id', component: CustomerUserEdit, props:true }
..
#.vue
const props = defineProps(['id']);
Methoden einer Komponente über ref nach außen verfügbar machen
defineExpose({
toggleDisplay
});