{"id":13447815,"url":"https://github.com/hsynlms/theroomjs","last_synced_at":"2025-05-09T01:43:44.683Z","repository":{"id":47278489,"uuid":"129155244","full_name":"hsynlms/theroomjs","owner":"hsynlms","description":"A vanilla javascript plugin that allows you to outline dom elements like web inspectors","archived":false,"fork":false,"pushed_at":"2021-09-06T18:01:04.000Z","size":466,"stargazers_count":84,"open_issues_count":1,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-10T01:24:16.021Z","etag":null,"topics":["dom","inspection","inspector","javascript","outline-dom-element","vanillajs"],"latest_commit_sha":null,"homepage":"https://codepen.io/hsynlms/pen/jzjOyo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsynlms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"hsynlms"}},"created_at":"2018-04-11T21:17:59.000Z","updated_at":"2024-09-18T19:05:36.000Z","dependencies_parsed_at":"2022-08-20T00:40:35.074Z","dependency_job_id":null,"html_url":"https://github.com/hsynlms/theroomjs","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Ftheroomjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Ftheroomjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Ftheroomjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsynlms%2Ftheroomjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsynlms","download_url":"https://codeload.github.com/hsynlms/theroomjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225115291,"owners_count":17423063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","inspection","inspector","javascript","outline-dom-element","vanillajs"],"created_at":"2024-07-31T05:01:27.538Z","updated_at":"2024-11-18T02:03:57.544Z","avatar_url":"https://github.com/hsynlms.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hsynlms"],"categories":["JavaScript"],"sub_categories":[],"readme":"# theroomjs\n\u003e A vanilla javascript plugin that allows you to outline DOM elements like web inspectors.\n\n[![Downloads](https://img.shields.io/npm/dm/theroomjs.svg)](https://npmjs.com/theroomjs)\n[![install size](https://packagephobia.com/badge?p=theroomjs)](https://packagephobia.com/result?p=theroomjs)\n\n`theroomjs` can be accessable globally as `theRoom`. It's compatible with modern browsers such as Google Chrome, Mozilla Firefox, Safari, Edge and Internet Explorer.\n\n## Install\n```\n$ npm install theroomjs --save\n```\n\n## Usage\n\n```javascript\n  // setup/configure theRoom before inspection\n  // this configurations can be passed in 'start' event as well\n  window.theRoom.configure({\n    inspector: '.inspector-element',\n    blockRedirection: true,\n    excludes: ['footer'],\n    click: function (element) {\n      console.log('element is clicked:', element)\n    }\n  })\n\n  // start inspection\n  window.theRoom.start()\n\n  // dynamically bind event\n  window.theRoom.on('mouseover', function (element) {\n    console.log('the element is hovered', element)\n  })\n\n  // stop inspection\n  // and reset inspector styles\n  window.theRoom.stop(true)\n\n  // dont emit mouseover and click events\n  // if the target element id is 'yusufHayaloglu'\n  window.theRoom.on('hook', function (event) {\n    if (event.target.id === 'yusufHayaloglu') {\n      return false\n    }\n  })\n\n  console.log(\n    window.theRoom.status() // will print out -\u003e stopped\n  )\n```\n\n## Options\n\n| Name              | Type               | Default    | Description                                                  |\n| ---               | ---                | ---        | ---                                                          |\n| inspector         | string or DOM node | -          | Placeholder element for inspection. It will not be inspected |\n| 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 `\u003cbody/\u003e` |\n| htmlClass         | boolean            | true       | If `true` theRoom's namespace will be automatically added to `\u003chtml/\u003e` element class list |\n| blockRedirection  | boolean            | false      | If `true` the page will not be redirected elsewhere. theRoom will override `onbeforeunload` to do that |\n| excludes          | array (string)     | -          | Elements that excluded for inspection. Basic CSS selectors are allowed. For more information please see [document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) |\n\n## Events\n\n| Name       | Description                                              |\n| ---        | ---                                                      |\n| starting   | Fired when inspection is being started                   |\n| started    | Fired when inspection is started                         |\n| stopping   | Fired when inspection is being stopped                   |\n| stopped    | Fired when inspection is stopped                         |\n| click      | Fired when the inspected element is clicked. The element is passed as the first argument, [Event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) passed as the second argument |\n| mouseover  | Fired when the inspected element mouseovered. The element is passed as the first argument, [Event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) passed as the second argument |\n| hook       | Fired before `click` and `mouseover` events. [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) passed as the only argument. **mouseover** and **click** events wont be emitted if the hook event returns `false` |\n\n\u003e Events can also be defined in options.\n\n## theRoom object\n\n`theRoom` global object exposes those:\n\n| Option            | Type     | Parameters                          | Description                                               |\n| ---               | ---      | ---                                 | ---                                                       |\n| on                | function | `event name` and `handler function` | To dynamically event binding                              |\n| start             | function | `options` (optional)                | To start inspection                                       |\n| stop              | function | `resetInspector` (optional)         | To stop inspection                                        |\n| configure         | function | `options`                           | To override theRoom option(s) anytime                     |\n| status            | function | -                                   | Gets inspection engine status. Can be `idle`, `running` and `stopped` |\n\n## Related\n- [path-finder](https://github.com/hsynlms/path-finder) - A Chrome extension to inspect and find out an HTML element unique CSS selector\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsynlms%2Ftheroomjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsynlms%2Ftheroomjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsynlms%2Ftheroomjs/lists"}