Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/en-US/docs/Web/API/WindowControlsOverlay/geometrychange_event below:

WindowControlsOverlay: geometrychange event - Web APIs

Limited availability

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The geometrychange event is fired when the position, size, or visibility of a Progressive Web App's title bar area changes.

This only applies to Progressive Web Apps installed on desktop operating systems and use the Window Controls Overlay API.

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("geometrychange", (event) => { })

ongeometrychange = (event) => { }

In addition to the properties listed below, properties from the parent interface, Event, are available.

titlebarAreaRect

A DOMRect representing the position and size of the title bar area within the app's content.

visible

A Boolean that indicates whether the window controls overlay is visible or not.

Using addEventListener():

navigator.windowControlsOverlay.addEventListener("geometrychange", (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
});

Using the ongeometrychange event handler property:

navigator.windowControlsOverlay.ongeometrychange = (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4