Bab 3: UI Events

elem.addEventListener("mousedown", function(event) {
  switch (event.button) {
    case 0: console.log("Kiri"); break;
    case 1: console.log("Tengah (scroll wheel)"); break;
    case 2: console.log("Kanan"); break;
  }
});

elem.addEventListener("click", function(event) {
  if (event.shiftKey) console.log("Shift + Click");
  if (event.ctrlKey) console.log("Ctrl + Click");
  if (event.altKey) console.log("Alt + Click");
  if (event.metaKey) console.log("Cmd/Win + Click");
  
  // Contoh: Ctrl+Click untuk buka di tab baru
  if (event.ctrlKey || event.metaKey) {
    // Biarkan browser handle (buka tab baru)
    return;
  }
  event.preventDefault();
  // Handle klik biasa...
});

elem.addEventListener("click", function(event) {
  // Relatif terhadap viewport (layar)
  console.log("Client:", event.clientX, event.clientY);
  
  // Relatif terhadap dokumen (termasuk scroll)
  console.log("Page:", event.pageX, event.pageY);
});

elem.addEventListener("mousedown", function(event) {
  if (event.detail > 1) { // detail = jumlah klik berturut
    event.preventDefault(); // Cegah seleksi teks
  }
});

// Atau via CSS:
// user-select: none;

// Buat "drawing canvas" sederhana:
// 1. Buat <div> besar (500x300px, border)
// 2. mousedown → mulai "menggambar" (set flag isDrawing = true)
// 3. mousemove + isDrawing → buat <div> kecil (5x5px, background hitam) 
//    di posisi mouse (pakai event.clientX/Y + getBoundingClientRect)
// 4. mouseup → berhenti menggambar
// Hint: position:relative pada canvas, position:absolute pada titik

elem.addEventListener("mouseover", function(event) {
  // Mouse MASUK elemen (atau child-nya)
  console.log("Masuk:", event.target.tagName);
  console.log("Dari:", event.relatedTarget?.tagName); // Elemen sebelumnya
});

elem.addEventListener("mouseout", function(event) {
  // Mouse KELUAR elemen (atau pindah ke child)
  console.log("Keluar:", event.target.tagName);
  console.log("Ke:", event.relatedTarget?.tagName); // Elemen tujuan
});

<div id="parent">
  <span>Teks</span>
</div>

elem.addEventListener("mouseenter", function(event) {
  // Mouse masuk elemen — TIDAK trigger saat pindah antar child
  this.style.background = "yellow";
});

elem.addEventListener("mouseleave", function(event) {
  // Mouse keluar elemen — TIDAK trigger saat pindah antar child
  this.style.background = "";
});

// Pakai mouseenter/mouseleave untuk:
// - Highlight saat hover (paling umum)
// - Tooltip
// - Dropdown menu

// Pakai mouseover/mouseout untuk:
// - Event delegation (karena bubble)
// - Perlu tahu perpindahan antar child elements

const buttons = document.querySelectorAll("[data-tooltip]");

buttons.forEach(btn => {
  btn.addEventListener("mouseenter", function() {
    const tooltip = document.createElement("div");
    tooltip.className = "tooltip";
    tooltip.textContent = this.dataset.tooltip;
    this.append(tooltip);
  });
  
  btn.addEventListener("mouseleave", function() {
    this.querySelector(".tooltip")?.remove();
  });
});

// Karena mouseenter tidak bubble, pakai mouseover untuk delegation
const table = document.getElementById("data-table");
let currentHighlight = null;

table.addEventListener("mouseover", function(event) {
  const td = event.target.closest("td");
  if (!td || !table.contains(td)) return;
  if (td === currentHighlight) return; // Sudah di-highlight
  
  if (currentHighlight) {
    currentHighlight.style.background = ""; // Hapus highlight lama
  }
  currentHighlight = td;
  td.style.background = "lightyellow"; // Highlight baru
});

table.addEventListener("mouseout", function(event) {
  if (!currentHighlight) return;
  
  // Cek apakah benar-benar keluar dari td
  const relatedTarget = event.relatedTarget;
  if (currentHighlight.contains(relatedTarget)) return; // Masih di dalam td
  
  currentHighlight.style.background = "";
  currentHighlight = null;
});

<table id="schedule">
  <tr><td>09:00</td><td>Meeting</td><td>Room A</td></tr>
  <tr><td>10:00</td><td>Coding</td><td>Desk</td></tr>
  <tr><td>12:00</td><td>Lunch</td><td>Cafeteria</td></tr>
</table>

<!-- Tulis JavaScript untuk:
1. Hover pada <tr> → seluruh row background jadi kuning
2. Pakai event delegation (mouseover/mouseout di <table>)
3. Pastikan highlight tidak "flicker" saat pindah antar <td> dalam row yang sama
-->

const draggable = document.getElementById("ball");

draggable.addEventListener("mousedown", function(event) {
  // Hitung offset (jarak mouse dari pojok kiri atas elemen)
  const shiftX = event.clientX - draggable.getBoundingClientRect().left;
  const shiftY = event.clientY - draggable.getBoundingClientRect().top;
  
  // Pindahkan elemen ke body agar bisa bergerak bebas
  draggable.style.position = "absolute";
  draggable.style.zIndex = 1000;
  document.body.append(draggable);
  
  moveAt(event.pageX, event.pageY);
  
  function moveAt(pageX, pageY) {
    draggable.style.left = pageX - shiftX + "px";
    draggable.style.top = pageY - shiftY + "px";
  }
  
  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }
  
  // Gerak
  document.addEventListener("mousemove", onMouseMove);
  
  // Lepas
  document.addEventListener("mouseup", function onMouseUp() {
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  });
});

// Cegah drag bawaan browser
draggable.addEventListener("dragstart", function(event) {
  event.preventDefault();
});

function onMouseMove(event) {
  moveAt(event.pageX, event.pageY);
  
  // Sembunyikan elemen yang di-drag
  draggable.hidden = true;
  
  // Cek elemen di bawah mouse
  const elemBelow = document.elementFromPoint(event.clientX, event.clientY);
  
  // Tampilkan lagi
  draggable.hidden = false;
  
  if (!elemBelow) return;
  
  // Cek apakah di atas drop zone
  const dropZone = elemBelow.closest(".drop-zone");
  if (dropZone) {
    dropZone.classList.add("highlight");
  }
}

function makeSortable(list) {
  let draggedItem = null;
  
  list.addEventListener("mousedown", function(event) {
    const item = event.target.closest("li");
    if (!item) return;
    
    draggedItem = item;
    draggedItem.classList.add("dragging");
    
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  });
  
  function onMove(event) {
    if (!draggedItem) return;
    
    // Cari item di bawah mouse
    const items = [...list.querySelectorAll("li:not(.dragging)")];
    const nextItem = items.find(item => {
      const rect = item.getBoundingClientRect();
      return event.clientY < rect.top + rect.height / 2;
    });
    
    // Pindahkan
    if (nextItem) {
      list.insertBefore(draggedItem, nextItem);
    } else {
      list.append(draggedItem);
    }
  }
  
  function onUp() {
    if (draggedItem) {
      draggedItem.classList.remove("dragging");
      draggedItem = null;
    }
    document.removeEventListener("mousemove", onMove);
    document.removeEventListener("mouseup", onUp);
  }
}

// Buat slider sederhana:
// 1. Buat track (div panjang horizontal, background abu-abu)
// 2. Buat thumb (div kecil bulat di atas track)
// 3. Drag thumb → hanya bisa gerak horizontal (dalam track)
// 4. Tampilkan nilai 0-100 berdasarkan posisi thumb
// Hint: clamp posisi antara 0 dan track.offsetWidth

elem.addEventListener("pointerdown", function(event) {
  console.log(event.pointerId);    // ID unik pointer (untuk multi-touch)
  console.log(event.pointerType);  // "mouse", "touch", atau "pen"
  console.log(event.width);        // Lebar area kontak
  console.log(event.height);       // Tinggi area kontak
  console.log(event.pressure);     // Tekanan (0-1, untuk stylus)
  console.log(event.isPrimary);    // true = pointer utama
});

elem.addEventListener("pointerdown", function(event) {
  // Semua pointermove/pointerup akan ke elem ini, 
  // meskipun mouse di luar elemen
  elem.setPointerCapture(event.pointerId);
});

elem.addEventListener("pointermove", function(event) {
  // Selalu diterima selama capture aktif
  console.log(event.clientX, event.clientY);
});

elem.addEventListener("pointerup", function(event) {
  // Capture otomatis dilepas saat pointerup
  console.log("Selesai drag");
});

// Event saat capture dimulai/berakhir
elem.addEventListener("gotpointercapture", () => console.log("Capture dimulai"));
elem.addEventListener("lostpointercapture", () => console.log("Capture berakhir"));

const slider = document.getElementById("thumb");

slider.addEventListener("pointerdown", function(event) {
  slider.setPointerCapture(event.pointerId);
  // Tidak perlu document.addEventListener!
});

slider.addEventListener("pointermove", function(event) {
  // Otomatis diterima karena capture
  slider.style.left = event.clientX + "px";
});

// Tidak perlu cleanup manual — capture otomatis lepas saat pointerup

/* Cegah browser handle touch (scroll, zoom) pada elemen tertentu */
.draggable {
  touch-action: none; /* Kita yang handle semua touch */
}

.horizontal-slider {
  touch-action: pan-y; /* Browser handle scroll vertikal, kita handle horizontal */
}

// Refactor challenge drag-and-drop dari sub-bab 3.3 menggunakan Pointer Events:
// 1. Ganti mousedown → pointerdown
// 2. Gunakan setPointerCapture (tidak perlu document listener)
// 3. Tambahkan touch-action: none di CSS
// 4. Test: harus bekerja di mouse DAN touch device

document.addEventListener("keydown", function(event) {
  // Tombol DITEKAN (fire berulang kalau ditahan!)
  console.log("Key down:", event.key);
});

document.addEventListener("keyup", function(event) {
  // Tombol DILEPAS
  console.log("Key up:", event.key);
});

document.addEventListener("keydown", function(event) {
  console.log("key:", event.key);   // Karakter yang dihasilkan: "a", "A", "Enter"
  console.log("code:", event.code); // Tombol fisik: "KeyA", "Enter", "ShiftLeft"
});

document.addEventListener("keydown", function(event) {
  // Ctrl+S (Save)
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // Cegah browser save
    console.log("Custom save!");
  }
  
  // Ctrl+Shift+Z (Redo)
  if (event.ctrlKey && event.shiftKey && event.key === "Z") {
    console.log("Redo!");
  }
});

document.addEventListener("keydown", function(event) {
  if (event.repeat) {
    console.log("Tombol ditahan (repeat)");
  } else {
    console.log("Tekan pertama");
  }
});

const shortcuts = {
  "ctrl+s": () => { console.log("Save"); },
  "ctrl+z": () => { console.log("Undo"); },
  "ctrl+shift+z": () => { console.log("Redo"); },
  "escape": () => { console.log("Close modal"); }
};

document.addEventListener("keydown", function(event) {
  let combo = "";
  if (event.ctrlKey) combo += "ctrl+";
  if (event.shiftKey) combo += "shift+";
  if (event.altKey) combo += "alt+";
  combo += event.key.toLowerCase();
  
  if (shortcuts[combo]) {
    event.preventDefault();
    shortcuts[combo]();
  }
});

// Buat "typing game":
// 1. Tampilkan huruf random di layar (A-Z)
// 2. User harus tekan huruf yang benar
// 3. Kalau benar → skor +1, tampilkan huruf baru
// 4. Kalau salah → skor -1, warna merah sebentar
// 5. Timer 30 detik, tampilkan skor akhir
// Hint: event.key, Math.random(), setTimeout

window.addEventListener("scroll", function() {
  console.log("Scroll position:", window.pageYOffset);
});

// Untuk elemen tertentu (yang punya overflow:auto/scroll)
const box = document.getElementById("scroll-box");
box.addEventListener("scroll", function() {
  console.log("Box scroll:", box.scrollTop);
});

let lastScroll = 0;
const header = document.querySelector("header");

window.addEventListener("scroll", function() {
  const currentScroll = window.pageYOffset;
  
  if (currentScroll > lastScroll && currentScroll > 100) {
    // Scroll ke bawah & sudah lewat 100px → sembunyikan header
    header.style.transform = "translateY(-100%)";
  } else {
    // Scroll ke atas → tampilkan header
    header.style.transform = "translateY(0)";
  }
  
  lastScroll = currentScroll;
});

window.addEventListener("scroll", function() {
  // Cek apakah sudah dekat bawah halaman
  const nearBottom = 
    window.innerHeight + window.pageYOffset >= 
    document.body.offsetHeight - 200; // 200px sebelum bawah
  
  if (nearBottom) {
    loadMoreContent(); // Muat konten tambahan
  }
});

function lazyLoad() {
  const images = document.querySelectorAll("img[data-src]");
  
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    
    // Kalau gambar sudah terlihat di viewport
    if (rect.top < window.innerHeight + 200) {
      img.src = img.dataset.src; // Load gambar
      img.removeAttribute("data-src"); // Hapus marker
    }
  });
}

window.addEventListener("scroll", lazyLoad);
lazyLoad(); // Jalankan sekali saat load

// Throttle: jalankan maksimal 1x per 100ms
let isThrottled = false;

window.addEventListener("scroll", function() {
  if (isThrottled) return;
  
  isThrottled = true;
  
  // Kerjakan sesuatu
  console.log("Scroll handled:", window.pageYOffset);
  
  setTimeout(() => {
    isThrottled = false;
  }, 100);
});

// Atau pakai requestAnimationFrame (lebih smooth)
let ticking = false;

window.addEventListener("scroll", function() {
  if (!ticking) {
    requestAnimationFrame(function() {
      handleScroll();
      ticking = false;
    });
    ticking = true;
  }
});

// preventDefault pada wheel event
elem.addEventListener("wheel", function(event) {
  event.preventDefault(); // Cegah scroll
}, { passive: false }); // HARUS passive:false untuk bisa preventDefault

// ⚠️ Jangan cegah scroll di seluruh halaman tanpa alasan kuat!

// Lebih efisien dari scroll event untuk lazy loading
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // Berhenti observe setelah load
    }
  });
}, {
  rootMargin: "200px" // Mulai load 200px sebelum terlihat
});

document.querySelectorAll("img[data-src]").forEach(img => {
  observer.observe(img);
});

// Buat "progress bar" yang menunjukkan seberapa jauh user sudah scroll:
// 1. Buat <div> fixed di atas halaman (height: 4px, background: blue)
// 2. Lebar berubah dari 0% sampai 100% sesuai scroll position
// 3. Throttle dengan requestAnimationFrame
// 4. Formula: scrolled% = pageYOffset / (scrollHeight - clientHeight) * 100
// 5. Buat halaman panjang (banyak paragraf) untuk testing