hsynlms / theroomjs

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

theroomjs

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

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

  // 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 <body/>
htmlClass	boolean	true	If true theRoom's namespace will be automatically added to <html/> element class list
blockRedirection	boolean	false	If true the page will not be redirected elsewhere. theRoom will override onbeforeunload to do that
excludes	array (string)	-	Elements that excluded for inspection. Basic CSS selectors are allowed. For more information please see document.querySelector

Events

Name	Description
starting	Fired when inspection is being started
started	Fired when inspection is started
stopping	Fired when inspection is being stopped
stopped	Fired when inspection is stopped
click	Fired when the inspected element is clicked. The element is passed as the first argument, Event passed as the second argument
mouseover	Fired when the inspected element mouseovered. The element is passed as the first argument, Event passed as the second argument
hook	Fired before click and mouseover events. Event passed as the only argument. mouseover and click events wont be emitted if the hook event returns false

Events can also be defined in options.

theRoom object

theRoom global object exposes those:

Option	Type	Parameters	Description
on	function	event name and handler function	To dynamically event binding
start	function	options (optional)	To start inspection
stop	function	resetInspector (optional)	To stop inspection
configure	function	options	To override theRoom option(s) anytime
status	function	-	Gets inspection engine status. Can be idle, running and stopped

Related

• path-finder - A Chrome extension to inspect and find out an HTML element unique CSS selector