Create HTML Object med attributter

Her eksempel med et input

const createElement = (el, attr) => Object.assign(document.createElement(el), attr) let input = createElement('input', { id: 'image-upload', className: 'form-control form-control-sm', type: 'file', name: 'image[]', multiple: true, accept: "image/*" })

Create SVG Object med atributter

Lidt anderledes end alm. HTML fordi SVG Objects ikke har nogen setter,
så man kan ikke bruge Object.assign

const createNS = figure => document.createElementNS('http://www.w3.org/2000/svg', figure) function setAttributes(el, attrs) { for (let key in attrs) { el.setAttribute(key, attrs[key]); } } let rect = createNS('rect') setAttributes(rect, { x: 25, y: 25, width: 50, height: 50, fill: 'red', stroke: 'black' })

GetElement(s)

Er du også træt af at skrive document.getElementById()....?

// get single element const getElement = id => document.getElementById(id) getElement("id") // get multiple elements const getElements = (...list) => { return list.reduce((array, id) => { array.push(document.getElementById(id)) return array }, []) } getElements("id-1", "id-2", "id-3")

Infinite Scroll

Burde virke, men jeg har faktisk ikke prøvet den endnu...
Her sat til at fetche, når sidste element er 100px fra bunden af view'et

const lastElementObserver = new IntersectionObserver(entries => { const lastElement = entries[0] if (!lastElement.isIntersecting) return lastElementObserver.unobserve(lastElement.target) loadNewElements() }, { rootMargin: '100px' }) lastElementObserver.observe(document.querySelector(".someClass:last-child")) function loadNewElements(){ fetch(`some-url`) .then("some create/append function") .then(lastElementObserver.observe(document.querySelector(".someClass:last-child"))) }

Stort bogstav på første ord.

(Findes af en eller anden årsag ikke i JS)

const ucFirst = string => string[0].toUpperCase() + string.slice(1).toLowerCase()

Swap to elementer i et array

let array = [1, 2, 3, 4, 5, 6] [array[1], array[4]] = [array[4], array[1]] // [1, 5, 3, 4, 2, 6]

Kopier til udklipsholder

const copyEvent = textToCopy => { navigator.clipboard.writeText(textToCopy) .then(() => { alert('Kopierede: ' + textToCopy) }) }

Fade in/out

Kan fade elementer ind og ud. Elementer kan være både #id, class og tags.
Evt flere på en gang, også blandede typer.
Default fade timing er 1000ms, men der kan sendes en anden værdi med.

new Fade('#some-id', '.some-class', 'some-tag').fadeOut(500) new Fade('#some-id', '.some-class', 'some-tag').fadeIn() function getOriginalDisplayStyle(item) { let el = document.querySelector(item) el.style.opacity = 0 el.style.removeProperty('display') let styles = getComputedStyle(el) if (styles.display && styles.display !== 'none') return styles.display else return 'block' } class Fade { constructor(...list) { this.elements = list } fadeIn(time = 1000) { for (let item of this.elements) { let elements = document.querySelectorAll(item) for (let el of elements) { let i = 0 el.style.display = getOriginalDisplayStyle(item) let interval = setInterval(() => { el.style.opacity = i i = i + 0.05 if (i > 1.05) { clearInterval(interval) el.style.removeProperty('opacity') } }, time / 20) } } } fadeOut(time = 1000) { for (let item of this.elements) { let elements = document.querySelectorAll(item) for (let el of elements) { let i = 1 let interval = setInterval(() => { el.style.opacity = i i = i - 0.05 if (i < 0) { el.style.display = 'none' clearInterval(interval) } }, time / 20) } } } }