# Locator

_Helps locating elements in simple HTML pages_

## Installation

```sh
npm install --global git+https://gitea.tforgione.fr/tforgione/locator.git
```

If you don't want to install, just clone the repo and prepare the dependencies:

```sh
git clone https://gitea.tforgione.fr/tforgione/locator
cd locator
npm install
```

## Usage

If you installed globally:

```sh
locator <path-to-the-HTML-file>
```

If you just cloned the repo, in the directory where the `index.js` file is:

```sh
node index.js <path-to-the-HTML-file>
```

## Example

```sh
locator example.html
```

Output:

```json
{
    "tag": "SECTION",
    "class": "",
    "box": {
        "x": 0,
        "y": 0,
        "width": 1,
        "height": 1
    },
    "children": [
        {
            "tag": "H1",
            "class": "",
            "box": {
                "x": 0.0546875,
                "y": 0.09722222222222222,
                "width": 0.890625,
                "height": 0.11812065972222222
            },
            "children": [
                {
                    "tag": "SPAN",
                    "class": "sized-span",
                    "box": {
                        "x": 0.0546875,
                        "y": 0.10416666666666667,
                        "width": 0.50234375,
                        "height": 0.10416666666666667
                    },
                    "children": [],
                    "text": "The painting wanders"
                }
            ],
            "text": null
        },
        {
            "tag": "P",
            "class": "",
            "box": {
                "x": 0.0546875,
                "y": 0.26395399305555556,
                "width": 0.890625,
                "height": 0.065625
            },
            "children": [
                {
                    "tag": "SPAN",
                    "class": "sized-span",
                    "box": {
                        "x": 0.0546875,
                        "y": 0.2667317708333333,
                        "width": 0.43125,
                        "height": 0.058333333333333334
                    },
                    "children": [],
                    "text": "The dramatic trek wraps workout."
                }
            ],
            "text": null
        },
        {
            "tag": "UL",
            "class": "",
            "box": {
                "x": 0.0546875,
                "y": 0.37819010416666665,
                "width": 0.890625,
                "height": 0.22604166666666667
            },
            "children": [
                {
                    "tag": "LI",
                    "class": "",
                    "box": {
                        "x": 0.0859375,
                        "y": 0.37819010416666665,
                        "width": 0.859375,
                        "height": 0.065625
                    },
                    "children": [
                        {
                            "tag": "SPAN",
                            "class": "sized-span",
                            "box": {
                                "x": 0.0859375,
                                "y": 0.3809678819444444,
                                "width": 0.5876953125,
                                "height": 0.058333333333333334
                            },
                            "children": [],
                            "text": "The wrong candidate sublets anesthesiologist."
                        }
                    ],
                    "text": null
                },
                {
                    "tag": "LI",
                    "class": "",
                    "box": {
                        "x": 0.0859375,
                        "y": 0.4583984375,
                        "width": 0.859375,
                        "height": 0.065625
                    },
                    "children": [
                        {
                            "tag": "SPAN",
                            "class": "sized-span",
                            "box": {
                                "x": 0.0859375,
                                "y": 0.4611762152777778,
                                "width": 0.4072265625,
                                "height": 0.058333333333333334
                            },
                            "children": [],
                            "text": "The late hydrocarb slides violet."
                        }
                    ],
                    "text": null
                },
                {
                    "tag": "LI",
                    "class": "",
                    "box": {
                        "x": 0.0859375,
                        "y": 0.5386067708333333,
                        "width": 0.859375,
                        "height": 0.065625
                    },
                    "children": [
                        {
                            "tag": "SPAN",
                            "class": "sized-span",
                            "box": {
                                "x": 0.0859375,
                                "y": 0.5413845486111111,
                                "width": 0.3783203125,
                                "height": 0.058333333333333334
                            },
                            "children": [],
                            "text": "The rich arthur forms zombie."
                        }
                    ],
                    "text": null
                }
            ],
            "text": null
        }
    ],
    "text": null
}
```

You can also flatten the output:

```sh
locator example.html --flatten
```

Ouput:

```json
[
    {
        "tag": "SECTION",
        "class": "",
        "box": {
            "x": 0,
            "y": 0,
            "width": 1,
            "height": 1
        },
        "text": null
    },
    {
        "tag": "H1",
        "class": "sized-span",
        "box": {
            "x": 0.0546875,
            "y": 0.10416666666666667,
            "width": 0.50234375,
            "height": 0.10416666666666667
        },
        "children": [],
        "text": "The painting wanders"
    },
    {
        "tag": "P",
        "class": "sized-span",
        "box": {
            "x": 0.0546875,
            "y": 0.2667317708333333,
            "width": 0.43125,
            "height": 0.058333333333333334
        },
        "children": [],
        "text": "The dramatic trek wraps workout."
    },
    {
        "tag": "UL",
        "class": "",
        "box": {
            "x": 0.0546875,
            "y": 0.37819010416666665,
            "width": 0.890625,
            "height": 0.22604166666666667
        },
        "text": null
    },
    {
        "tag": "LI",
        "class": "sized-span",
        "box": {
            "x": 0.0859375,
            "y": 0.3809678819444444,
            "width": 0.5876953125,
            "height": 0.058333333333333334
        },
        "children": [],
        "text": "The wrong candidate sublets anesthesiologist."
    },
    {
        "tag": "LI",
        "class": "sized-span",
        "box": {
            "x": 0.0859375,
            "y": 0.4611762152777778,
            "width": 0.4072265625,
            "height": 0.058333333333333334
        },
        "children": [],
        "text": "The late hydrocarb slides violet."
    },
    {
        "tag": "LI",
        "class": "sized-span",
        "box": {
            "x": 0.0859375,
            "y": 0.5413845486111111,
            "width": 0.3783203125,
            "height": 0.058333333333333334
        },
        "children": [],
        "text": "The rich arthur forms zombie."
    }
]
```

It is also possible to make screenshots of each slide but removing the considered element.

```sh
locator --output output-directory example.html
```