https://github.com/hsynlms/theroomjs

A vanilla javascript plugin that allows you to outline dom elements like web inspectors
https://github.com/hsynlms/theroomjs

dom inspection inspector javascript outline-dom-element vanillajs

Last synced: about 2 months ago
JSON representation

A vanilla javascript plugin that allows you to outline dom elements like web inspectors

• Host: GitHub
• URL: https://github.com/hsynlms/theroomjs
• Owner: hsynlms
• License: mit
• Created: 2018-04-11T21:17:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-09-06T18:01:04.000Z (about 3 years ago)
• Last Synced: 2024-07-05T20:59:44.309Z (3 months ago)
• Topics: dom, inspection, inspector, javascript, outline-dom-element, vanillajs
• Language: JavaScript
• Homepage: https://codepen.io/hsynlms/pen/jzjOyo
• Size: 455 KB
• Stars: 80
• Watchers: 5
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# theroomjs

> A vanilla javascript plugin that allows you to outline DOM elements like web inspectors.

[![Downloads](https://img.shields.io/npm/dm/theroomjs.svg)](https://npmjs.com/theroomjs)

[![install size](https://packagephobia.com/badge?p=theroomjs)](https://packagephobia.com/result?p=theroomjs)

`theroomjs` can be accessable globally as `theRoom`. It's compatible with modern browsers such as Google Chrome, Mozilla Firefox, Safari, Edge and Internet Explorer.

## Install

```

$ npm install theroomjs --save

```

## Usage

```javascript

  // setup/configure theRoom before inspection

  // this configurations can be passed in 'start' event as well

  window.theRoom.configure({

    inspector: '.inspector-element',

    blockRedirection: true,

    excludes: ['footer'],

    click: function (element) {

      console.log('element is clicked:', element)

    }

  })

  // start inspection

  window.theRoom.start()

  // dynamically bind event

  window.theRoom.on('mouseover', function (element) {

    console.log('the element is hovered', element)

  })

  // stop inspection

  // and reset inspector styles

  window.theRoom.stop(true)

  // dont emit mouseover and click events

  // if the target element id is 'yusufHayaloglu'

  window.theRoom.on('hook', function (event) {

    if (event.target.id === 'yusufHayaloglu') {

      return false

    }

  })

  console.log(

    window.theRoom.status() // will print out -> stopped

  )

```

## Options

| Name              | Type               | Default    | Description                                                  |

| ---               | ---                | ---        | ---                                                          |

| inspector         | string or DOM node | -          | Placeholder element for inspection. It will not be inspected |

| createInspector   | boolean            | false      | If `true` and inspector option is not provided, theRoom will try to create an inspector element whose class is `inspector-element` for you and will be appended to `