Podglądy działań wywoływanych przez zainteresowania

Warto udostępnić użytkownikom podgląd ich działań, zanim je zatwierdzą. Wywołania zainteresowań to eksperymentalna funkcja platformy internetowej, która umożliwia deklaratywne tworzenie relacji kierowania na zainteresowania między źródłem zainteresowania (np. przyciskiem lub linkiem) a celem zainteresowania. Po ustanowieniu relacji deklaratywnej deweloper może reagować na zainteresowanie i utratę zainteresowania na wiele sposobów, korzystając zarówno z CSS, jak i JavaScriptu. W tym przypadku możemy użyć zdarzeń interest i loseinterest, aby wyświetlić podgląd różnych efektów dla celu zainteresowania.

Jak to zrobić?

Relację zainteresowania tworzy się przez ustawienie atrybutu interestfor na przycisku lub linku (czyli źródle zainteresowania). Atrybut przyjmuje odwołanie do identyfikatora innego elementu (czyli celu zainteresowania). Wywołania lub źródła zainteresowań mogą mieć tylko 1 cel zainteresowania, ale cel zainteresowania może mieć wiele wywołań zainteresowań.

<!-- MANDATORY: interest relationships must be established with the `interestfor` attribute on a button or a link -->
<button interestfor="interestingElement" data-effect="A">Some effect</button>
<button interestfor="interestingElement" data-effect="B">Some other effect</button>
<div id="interestingElement">Something interesting</div>

W tym przypadku możemy użyć zdarzeń interest i loseinterest, aby wyświetlić podgląd różnych efektów dla celu zainteresowania. Oba te zdarzenia to InterestEvent, które mają właściwość source będącą źródłem zainteresowania (czyli element z atrybutem interestfor).

interestingElement.addEventListener("interest", event => {
  // Apply the preview based on `event.source`
  event.target.dataset.preview = event.source.dataset.effect;
});

interestingElement.addEventListener("loseinterest", event => {
  // Unapply the preview
  delete event.target.dataset.preview;
});

Aktywne źródła i cele zainteresowania można wybrać za pomocą arkusza CSS, używając odpowiednio pseudoselektorów :interest-source i :interest-target.

/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}

Opóźnienie rozpoczęcia i zakończenia dla elementu wywołującego zainteresowanie (czyli elementu z atrybutem interestfor) można ustawić za pomocą właściwości CSS interest-delay-start i interest-delay-end lub właściwości skróconej interest-delay.

[interestfor] {
  interest-delay-start: 0.2s;
  interest-delay-end: 0.1s;
}

Strategie zastępcze

Zastępcze i obsługiwane przez przeglądarki wywołania zainteresowań

Elementy wywołujące zainteresowanie muszą być warunkowo wypełniane za pomocą pakietu polyfill interestfor z NPM. Zamiast korzystać z CDN, lepiej dołączyć polyfill do pakietu.

OBOWIĄZKOWO: wykryj funkcję, sprawdzając właściwość interestForElement w HTMLButtonElement.prototype, i wczytaj polyfill tylko wtedy, gdy brakuje obsługi natywnej.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

Zastrzeżenia dotyczące kodu polyfill CSS

W przypadku korzystania z kodu polyfill interfejs CSS API zmienia się nieznacznie, aby uwzględnić brak obsługi natywnej pseudoklasy i właściwości:

• Pseudoklasy: polyfill nie może definiować rzeczywistych pseudoklas :interest-source i :interest-target, więc zamiast nich stosuje klasy .interest-source i .interest-target. OBOWIĄZKOWO: połącz je z :is(), aby obsługiwać zarówno stany natywne, jak i stany polyfill.

/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }

• Właściwości CSS: w przypadku interest-delay, interest-delay-start i interest-delay-end polyfill wymaga użycia zmiennych CSS, ponieważ nie może odczytać właściwości niestandardowych bezpośrednio we wszystkich przeglądarkach.

/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}