Skip to content

Get browser environment info and print it in the DOM

License

Notifications You must be signed in to change notification settings

barcia/browserdom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Get browser environment info and print it in the DOM

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published