Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.editorconfig
.gitignore
CHANGELOG.md
LICENSE
README.md
package.json
rollup.config.js

README.md

BrowserDOM

Get browser environment info and print it in the DOM.

Version License

Getting Started

Intallation

  • 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@2.0.0"></script>
  • Install it with NPM and import in your JS file
npm install --save-dev browserdom
import BrowserDOM from 'browserdom'

Create a new instance

const myBrowserDOM = new BrowserDOM();

You can pass your required options:

const myBrowserDOM = new BrowserDOM({
		browser: false,
		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();

document.addEventListener("DOMContentLoaded", function() {
  myBrowserDOM.print();
})
  • Output HTML
<html data-browser="chrome" data-touchdevice="false">
  <head></head>
  <body></body>
</html>

By default, only browser and touchDevice options are enabled.

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();

document.addEventListener("DOMContentLoaded", function() {
  console.log(myBrowserDOM.get());
})
  • Output HTML
{
  browser: chrome,
  touchDevice, false
}

Example 2:

  • index.js
const myBrowserDOM = new BrowserDOM();

document.addEventListener("DOMContentLoaded", function() {
  console.log(myBrowserDOM.get("browser"));
})
  • Output HTML
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]

Changelog

See CHANGELOG.md

Credits

Developed by Iván Barcia

Project tested on BrowserStack

License

This project is under MIT License

You can’t perform that action at this time.