Erfaringer skrive om jquery til native js i bildegalleri osv

DOM

Finn element

var elm = $("#id") =>
const elm = document.querySelector("#id")
const elm = document.getElementById("id")
const elm = document.querySelectorAll("#id")[0]
if(elm) { // ikke bruk .length her, vil ikke fungere
  // gjør noe med elementet
}

var elms = $(".cls") =>
const elms = document.getElementsByClassName("cls");
const elms = document.querySelectorAll(".cls");
if(elms.length) {
  // gjør noe med elementene
}

(document. kan erstattes med allerede funnet container element feks: elm.)

Hvis returnerer/er NodeList, bruk spread for å gjøre om til vanlig array som kan itereres over: [...elms]

box.find("> h2") => box.querySelector(":scope > h2"); // direct child selector

Klasser

elm.addClass("active") => elm.classList.add("active")
elm.removeClass("active") => elm.classList.remove("active")
elms.addClass("active-before-tmp") =>
elms.forEach(elm => { (legge til for flere, krever iterasjon ser ut som)
  elm.classList.add("active-before-tmp");
});
elm.hasClass("active") => elm.classList.contains("active")

Injection

elm.append(`html`) => elm.insertAdjacentHTML("beforeend", `html`);
elm.prepend(`html`) => elm.insertAdjacentHTML("afterbegin", `html`);
$(`html`).insertBefore(elm) => elm.insertAdjacentHTML("beforebegin", `html`); 
$(`html`).insertAfter(elm) => elm.insertAdjacentHTML("afterend", `html`); 

(https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)

Lyttere

$(document).on("click", "#id", function(e) {}) => elm.addEventListener("click", e => {})
$(document).ready(function() {}) => document.addEventListener("DOMContentLoaded", () => {})

Høyder/bredder

elm.width() og elm.height() => elm.clientWidth og elm.clientHeight
elm.outerHeight(true) => getOuterHeight(elm) (fant ikke tilsvarende, ny hjelpefunksjon, stackoverflow)

function getOuterHeight(elm) {
  elm = (typeof elm === 'string') ? document.querySelector(elm) : elm;

  const styles = window.getComputedStyle(elm);
  const margin = parseFloat(styles['marginTop']) +
                 parseFloat(styles['marginBottom']);

  return elm.offsetHeight + margin;
}

Spesielle / filtre

elms.filter(".active-before") =>
elms.filter(elm => elm.classList.contains("active-before"))

prevUntil (fant ikke tilsvarende, ny hjelpefunksjon, stackoverflow)
nextUntil (fant ikke tilsvarende, ny hjelpefunksjon, stackoverflow)

function nextUntil(elm, selector, includeCurrent) {
  var siblings = [];
  if(typeof includeCurrent !== "boolean" || includeCurrent === false) {
    elm = elm.nextElementSibling;
  }
  while (elm) {
    if (elm.matches(selector)) break;
    siblings.push(elem);
    elm = elm.nextElementSibling;
  }
  return siblings;
}

function prevUntil(elm, selector, includeCurrent) {
  var siblings = [];
  if(typeof includeCurrent !== "boolean" || includeCurrent === false) {
    elm = elm.previousElementSibling;
  }
  while (elm) {
    if (elm.matches(selector)) break;
    siblings.push(elem);
    elm = elm.previousElementSibling;
  }
  return siblings;
}

var er function-scope, gå over til å bruke mer let og const istedet som er block-scope (let er variabel og const er konstant).

AJAX

Hvis trenger jquery cache=false kan legge til i queryURl:
"&_=" + (+new Date());

GET json (eks. med await/async promise)

async function getJSON(queryUrl) {
  return await fetch(queryUrl, {
    headers: {
      "Accept": "application/json;charset=utf-8"
    }
  });
}

// sted der brukes
getJSON(<queryUrl>).then((response) => {
  return response.json(); // getting json from response is also a Promise
}).then((json) => {
  if(json.results && json.results.length > 0) {
    // gjør noe med json dataene
  } else {
    console.error("<beskrive feil mangler ønsket data>");
  }
}).catch((error) => {
  console.error(`${<queryUrl>} failed`);
});

POST json (eks. med resolve direkte og callback)

function postJSON(queryUrl, callbackFn) {
  fetch(queryUrl, {
    method: "POST",
    body: JSON.stringify(<JSON-data>),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      "Accept": "application/json;charset=utf-8" (hvis POST også returnerer JSON)
    }
  }).then(function(response){
    return response.json(); (hvis POST også returnerer JSON)
  }).then(function(json) {
    callbackFn(json);
  });
  }).catch((error) => {
    console.error(`${<queryUrl>} failed`);
  });
}
// sted der brukes
postJSON(<queryUrl>, (json) => {
  // gjøre noe etter POST-en
});

Last JS / JS-bibliotek (som ikke kan JS importes)

function loadScript(scriptUrl) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    document.body.appendChild(script);
    script.onload = resolve;
    script.onerror = reject;
    script.async = true;
    script.src = url;
  });
}
// sted der brukes
loadScript(<scriptUrl>).then(() => {
  // gjør noe etter scriptet er lastet
}).catch((error) => {
  console.error(`Script ${<scriptUrl>} couldn't be retrieved`);
});