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")

Assign multiple id's

Har du brug for at assigne flere id's

const elements = ['id-1', 'id-2', 'id-3', 'id-4']; const [first, second, third, fourth] = elements.map(id => document.getElementById(id));

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() // Kan evt. udbygges med error handling const ucFirst = string => { if (typeof string !== 'string') { throw new Error('Expected a string'); } if (string.length === 0) { return string; } return 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.map(item => { return { item, display: getOriginalDisplayStyle(item), nodes: document.querySelectorAll(item), }; }); } fadeIn(time = 1000) { this.elements.forEach(({item, display, nodes}) => { nodes.forEach(node => { let i = 0 node.style.display = display let animate = () => { node.style.opacity = i i += 0.05 if (i <= 1.05) requestAnimationFrame(animate) else node.style.removeProperty('opacity') } animate() }) }) } fadeOut(time = 1000) { this.elements.forEach(({item, nodes}) => { nodes.forEach(node => { let i = 1 let animate = () => { node.style.opacity = i i -= 0.05 if (i >= 0) requestAnimationFrame(animate) else node.style.display = 'none' } animate() }) }) } }