Hauptmenü

Werkzeuge

Kategorien

Archiv

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
});