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 1 year 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 (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-09-06T18:01:04.000Z (almost 5 years ago)
- Last Synced: 2024-11-10T01:24:16.021Z (over 1 year ago)
- Topics: dom, inspection, inspector, javascript, outline-dom-element, vanillajs
- Language: JavaScript
- Homepage: https://codepen.io/hsynlms/pen/jzjOyo
- Size: 455 KB
- Stars: 84
- 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.
[](https://npmjs.com/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 `