https://github.com/knowler/page-metrics-element
A custom element to expose page viewport metrics (e.g. like if the address bar is expanded or collapsed). Work in progress.
https://github.com/knowler/page-metrics-element
custom-elements web-components
Last synced: about 1 year ago
JSON representation
A custom element to expose page viewport metrics (e.g. like if the address bar is expanded or collapsed). Work in progress.
- Host: GitHub
- URL: https://github.com/knowler/page-metrics-element
- Owner: knowler
- Created: 2023-12-06T01:42:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-06T02:07:21.000Z (over 2 years ago)
- Last Synced: 2024-10-12T11:07:27.894Z (over 1 year ago)
- Topics: custom-elements, web-components
- Language: HTML
- Homepage: https://knowler.github.io/page-metrics-element/demo
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Page Metrics Element
A custom element to determine page metrics like the small and large
viewport heights. Currently a **work in progress**.
## Defining
You can define it the standard way or use the static `define()` method:
```javascript
import { PageMetricsElement} from "https://esm.sh/gh/knowler/page-metrics-element/page-metrics-element.js?raw";
PageMetricsElement.define();
```
## Usage
Just add the element to the page. It visually doesn’t do anything. It’s
JS API is what is valuable.
```html
```
Here’s some ways you can use it.
```js
const pageMetricsElement = document.querySelector("page-metrics");
pageMetrics.smallViewportHeight; // integer
pageMetrics.largeViewportHeight; // integer
pageMetrics.addressBarState; // expanded | resizing | collapsed
```