❤
npm
Sign UpSign In

browserdom

2.1.0 • Public • Published

BrowserDOM

Get browser environment info and print it in the DOM.

Version License Size

Getting Started

Installation

  • Download the script and add it to the head
<script src="./browserdom.min.js"></script>
  • Get it from a CDN
<script src="https://unpkg.com/browserdom"></script>
  • Install it with NPM and import in your JS file
npm install --save-dev browserdom

Create a new instance

  • Import it:
import BrowserDOM from 'browserdom';
  • Create a new instance passing your required options:
const myBrowserDOM = new BrowserDOM({
        browser: true,
        scrollPercentage: true
});

Print the data in the <html> tag, or get the info to use it in your JS

document.addEventListener("DOMContentLoaded", function() {
  myBrowserDOM.print();
})
window.addEventListener("scroll", function() {
  console.log(myBrowserDOM.get("scrollPercentage"));
})

Methods

print

With print() method you write all your enabled options as a data-attribute in the <html> tag.

Example:

  • index.js
const myBrowserDOM = new BrowserDOM({
  browser: true,
  touchDevice: true
});
 
document.addEventListener("DOMContentLoaded", function() {
  myBrowserDOM.print();
})
  • Output HTML
<html data-browser="chrome" data-touchdevice="false">
  <head></head>
  <body></body>
</html>

get

With get() method you can get all the BrowserDOM object or pass one option as argument to retrieve it.

Example 1:

  • index.js
const myBrowserDOM = new BrowserDOM({
  browser: true,
  touchDevice: true
});
 
document.addEventListener("DOMContentLoaded", function() {
  console.log(myBrowserDOM.get());
})
  • Output JSON
{
  browser: chrome,
  touchDevice: false
}

Example 2:

  • index.js
const myBrowserDOM = new BrowserDOM({
  browser: true,
  touchDevice: true
});
 
document.addEventListener("DOMContentLoaded", function() {
  console.log(myBrowserDOM.get("browser"));
})
  • Output
chrome

Options

These are all options with their default values

  • os: {boolean} The operating system [false]
  • browser: {boolean} The browser name [true]
  • version: {boolean} The browser version [false]
  • online: {boolean} If the browser is online [false]
  • lang: {boolean} The browser language [false]
  • touchDevice: {boolean} If is a touch device [true]
  • scrolled: {boolean} If is scrolled below from the scrolledTrigger number [false]
  • scrolledTrigger: {number} The scroll position where scrolled change to true [1]
  • scrollDirection: {string} If last scroll is to down or to up [false]. If is on top show stop.
  • scrollPosition: {boolean} The scroll position [false]
  • scrollPercentage: {boolean} The page scroll percentage [false]

Returned values

These are all returned values if the option is enables

  • os: macos | linux | windows | ios | android
  • browser: chrome| safari | firefox | edge | ie
  • version: {number}
  • online: {boolean}
  • lang: {lang ISO code}
  • touchDevice: {boolean}
  • scrolled: {boolean}
  • scrollDirection: down| up| top
  • scrollPosition: {number}
  • scrollPercentage: {number}

Changelog

See CHANGELOG.md

Credits

Developed by Iván Barcia

Project tested on BrowserStack

License

This project is under MIT License

Dependents (0)

Package Sidebar

Install

npm i browserdom

Repository

github.com/barcia/browserdom

Homepage

github.com/barcia/browserdom#readme

Weekly Downloads

1

Version

2.1.0

License

MIT

Unpacked Size

11 kB

Total Files

5

Last publish

Collaborators

  • barcia
Try on RunKit
Report malware