/theroomjs

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

Primary LanguageJavaScriptMIT LicenseMIT

theroomjs

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

Downloads install size

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 projects

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