feat: more on js/09

src/components/slides/javascript/09-web-api/index.astro

@@ -3,7 +3,7 @@ import Title from "./title.astro";
 import HistoryApi from "./history.astro";
 import FilesApi from './files.astro';
 import IntersectionApi from './intersection.astro';
-// import ProxyApi from './proxy.astro';
+import ProxyApi from './proxy.astro';
 // import SelectionApi from './selection.astro';
 // import ServiceWorker from './service-worker.astro';
 // import SpeechApi from './speech.astro';
@@ -17,5 +17,6 @@ import StorageApi from "./storage.astro";
 	<StorageApi />
 	<FilesApi />
 	<IntersectionApi />
+	<ProxyApi />
 </div>
 

src/components/slides/javascript/09-web-api/intersection.astro

@@ -2,4 +2,102 @@
 	<section>
 		<h2>Intersection-API</h2>
 	</section>
+
+	<section>
+		<p>Mithilfe dieser API können wir ein Element im DOM "beobachten" und auf den Umstand reagieren, ob das Element sich in den sichtbaren Bereich des Viewports bewegt (z.B. durch scrollen)</p>
+		<p>Einfacher gesagt können wir hiermit darauf reagieren, ob ein Element für den Nutzer sichtbar ist oder nicht.</p>
+		<p>Dieses Feature hilft uns bei einer Reihe von "alltäglichen" Problemen:</p>
+	</section>
+
+	<section>
+		<ul>
+			<li>Nachladen von Inhalten kurz bevor dieser sichtbar werden soll</li>
+			<li>"Infinite Scrolling"</li>
+			<li>Berechnung der Sichtbarkeit von Umsatz-Relevanten Inhalten</li>
+			<li>Abspielen von z.B. Animationen oder anderen Medien, nur wenn diese auch sichtbar sind (Unter anderem auch um Energie zu sparen)</li>
+		</ul>
+	</section>
+
+	<section>
+		<p>Um einen <code>IntersectionObserver</code> zu erstellen, müssen wir ein paar Optionen vorbereiten</p>
+		<pre class="js" style="font-size: 1rem;"><code data-trim data-line-numbers="2-4|5-7|8-11" is:raw>
+			const options = {
+				// Definiert den Bereich in dem das Element sichtbar sein soll
+				// Wenn dieser Wert nicht definiert ist, wird der (Browser) Viewport verwendet
+				root: null,
+				// Hiermit können wir am "beobachteten" Viewport Puffer einrichten
+				// Werte können sowohl positiv als auch negativ werden
+				rootMargin: "0px",
+				// Definiert, wann das "Intersection"-Event gefeuert werden soll
+				// Wert muss zwischen 0 und 1 sein, bei 1 wird das Event nur dann "getriggert"
+				// wenn das Element vollständig im Viewport zu sehen ist.
+				threshold: 1.0,
+			};
+		</code></pre>
+	</section>
+
+
+	<section>
+		<p>
+			Mit diesen Optionen können wir nun den eigentlichen <code>IntersectionObserver</code> erstellen
+		</p>
+		<pre class="js"><code data-trim data-line-numbers is:raw>
+			const callback = function(event) {
+				console.log("Element ist nun komplett sichtbar!", event);
+			}
+
+			const observer = new IntersectionObserver(callback, options);
+		</code></pre>
+	</section>
+
+	<section>
+		<p>Als letzten Schritt müssen wir nun nur noch das gewünschte Objekt "beobachten"</p>
+		<pre class="js"><code data-trim data-line-numbers is:raw>
+			const observationTarget = document.getElementById('...');
+
+			observer.observe(target);
+		</code></pre>
+	</section>
+
+	<section>
+		<p>Und das ist es schon! Der Callback wird beim initialisieren normalerweise einmalig ausgeführt, sobald das Element nun den Viewport betritt, und Flächenmäßig den <strong>threshold</strong> überschreitet, wird der Callback ausgeführt.</p>
+	</section>
+
+	<section>
+		<p>Nun können wir noch an den Optionen eine Kleinigkeit ändern.</p>
+		<p>Falls es notwendig ist, können wir auch mehrere Thresholds anlegen um mehrere "Steps" beim hineinscrollen in den Viewport zu überprüfen. Bei jedem threshold im definierten Array wird der Callback aufgerufen.</p>
+	</section>
+
+	<section>
+		<pre class="js"><code data-trim data-line-numbers is:raw>
+			const options = {
+				root: null,
+				rootMargin: "0px",
+				// Ruft den Callback bei 25%, 50%, 75%, und 100% 
+				// Sichtbarkeit im Viewport auf.
+				threshold: [0.25, 0.5, 0.75, 1],
+			};
+		</code></pre>
+	</section>
+
+	<section>
+		<p>Der Callback der Aufgerufen wird, meldet sich mit allen Einträgen zurück, die seit dem letzten Aufruf die angegebene (Sichtbarkeits)-Grenze überschritten haben.</p>
+		<p>Zusätzlich befindet sich als 2. Parameter der observer der das Element überprüft.</p>
+	</section>
+
+	<section>
+		<pre class="js"><code data-trim data-line-numbers is:raw>
+			const callback = function(entries, observer) {
+				entries.forEach((entry) => {
+					// entry.boundingClientRect
+					// entry.intersectionRatio,
+					// entry.intersectionRect,
+					// entry.isIntersecting,
+					// entry.rootBounds,
+					// entry.target,
+					// entry.time
+				});
+			}
+		</code></pre>
+	</section>
 </section>

src/components/slides/javascript/09-web-api/proxy.astro

@@ -0,0 +1,5 @@
+<section>
+	<section>
+		<h2>Proxy API</h2>
+	</section>
+</section>