Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/winkgroup/html-selector
https://github.com/winkgroup/html-selector
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/winkgroup/html-selector
- Owner: WINKgroup
- License: mit
- Created: 2024-01-01T08:53:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-07T15:29:08.000Z (about 1 year ago)
- Last Synced: 2025-01-06T16:23:01.567Z (21 days ago)
- Language: HTML
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-selector
NodeJS library to select HTML code inside an arbitrary HTML page
## Install
```
npm install @winkgroup/html-selector
```
or
```
yarn add @winkgroup/html-selector
```
## Overview
This library injects a JS code to allow user to select multiple elements in the HTML page and send information to the window generating an event when user press ENTER. This library is intended to be used to generate HTML code inside an iframe.
Convention:
- every element selected has blue border
- current element selected has red border
## User Commands
- mouse click: a new element is selected or become current
- arrow up: move current selection to the parent element
- arrow down: move current selection to the first child element
- arrow left: move current selection to the previous sibling element
- arrow right: move current selection to the next sibling element
- tab: move current selection to the next seletected element
- enter: generate an event to the parent window (window.parent.postMessage) with these data:
```json
{
"eventType": "htmlSelector",
"list": [{
"domPath": "body > div:eq(1) > ol > li:eq(0) > a",
"html": "Introduction to frames"
},{
...
}]
}
```
## Development
in ```playground``` folder you will find a working implementation of **html-selector**. You can run it with ```npm run playground``` or ```yarn playground```
## Maintainers
* [fairsayan](https://github.com/fairsayan)