Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/john-doherty/notch-detected-event
A cross-browser script to detect the existence of a device notch
https://github.com/john-doherty/notch-detected-event
javascript pwa
Last synced: 3 months ago
JSON representation
A cross-browser script to detect the existence of a device notch
- Host: GitHub
- URL: https://github.com/john-doherty/notch-detected-event
- Owner: john-doherty
- License: mit
- Created: 2019-12-05T22:51:31.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T10:18:19.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T22:42:32.224Z (9 months ago)
- Topics: javascript, pwa
- Language: JavaScript
- Homepage:
- Size: 459 KB
- Stars: 20
- Watchers: 2
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# notch-detected-event
A 0.7k script that fires a `notch-detected` event if the device has a notch (currently iPhone X, XS, XR, XS Max and Google Pixel 3). If detected a [HTML5 data attribute](http://html5doctor.com/html5-custom-data-attributes/) will be added to the `` element:
```html
```
Allows you to modify the UI at runtime using CSS:
```css
/* make room for the notch at the top */
@media screen and (orientation: portrait) {
html[data-notch="true"] {
padding-top: 44px;
height: calc(100% - 44px);
}
}
/* make room for the notch at the sides */
@media screen and (orientation: landscape) {
html[data-notch="true"] {
padding-left: 44px;
padding-right: 44px;
width: calc(100% - 44px - 44px);
}
}
```
Or listen for the **notch-detected** event and execute some logic:
```js
window.addEventListener('notch-detected', function(e) {
console.log("Notch detected, move shit around");
});
```
## Install
Add [notch-detected-event.min.js](dist/notch-detected-event.min.js) to your app/page.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request
### Development
The project includes everything needed to develop/test. Run the following then visit [http://your-local-ip:8080](http://localhost:8080) on your mobile device or emulator.
```bash
git clone https://github.com/john-doherty/notch-detected-event
cd notch-detected-event
npm install
npm start
```
### Update .min files
To create a new version of the minified [notch-detected-event.min.js](dist/notch-detected-event.min.js) file from source, tweak the version number in `package.json` and run the following:
```bash
npm run build
```
## Star the repo
If you find this useful, please star the repo as it helps me prioritize open source bug fixes.
## History
For change-log, check [releases](https://github.com/john-doherty/notch-detected-event/releases).
## License
Licensed under [MIT License](LICENSE) © [John Doherty](http://www.johndoherty.info)