Skip to content

Commit c8e3c59

Browse files
gadgetchnnelgadgetchnnel
committed
Fixed popups for history, multi-entity, calendar and notification items
1 parent ab31085 commit c8e3c59

File tree

4 files changed

+144
-159
lines changed

4 files changed

+144
-159
lines changed

‎lovelace-home-feed-card.js‎

Lines changed: 100 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main.js‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { LitElement, html, css } from "./lit-element.js";
2-
import { HomeFeedNotificationPopup, popUp } from "./popup.js";
2+
import { HomeFeedNotificationPopup } from "./popup.js";
3+
import { popUp, closePopUp } from "card-tools/src/popup";
34
import { versionGreaterOrEqual } from "./helpers/hass-version.js";
45
import { computeStateDisplay as computeStateDisplayHelper } from "./helpers/compute-state-display.js";
56
import { handleClick, computeStateDisplay as computeStateDisplayLegacy } from "custom-card-helpers";
@@ -723,56 +724,64 @@ class HomeFeedCard extends LitElement {
723724
mock_hass.states[item.entity_id] = item.stateObj;
724725

725726
let config = {"type":"custom:hui-entities-card", "entities": [{"entity":item.entity_id,"secondary_info":"last-changed"}, {"type":"custom:hui-history-graph-card","entities":[item.entity_id]}]};
726-
let popup = createCard(config);
727727

728-
popup.hass = mock_hass;
728+
popUp(item.display_name, config, false, {"box-shadow": "none!important"});
729729

730-
731-
732730
setTimeout(()=>{
733-
let card = popup.shadowRoot.querySelector('ha-card #states');
734-
if(card){
735-
card.querySelectorAll("div")[1]
736-
.querySelector("hui-history-graph-card")
737-
.shadowRoot
738-
.querySelector('ha-card')
739-
.style.boxShadow = 'none';
740-
}
741-
},100);
742-
743-
744-
popUp(item.display_name, popup);
731+
732+
let popupRoot = document.querySelector("home-assistant").shadowRoot.querySelector("card-tools-popup").shadowRoot;
733+
let card = popupRoot.querySelector("ha-dialog")
734+
.querySelector("hui-entities-card");
735+
736+
if(card){
737+
card.hass = mock_hass;
738+
let states = card.shadowRoot.querySelector("ha-card #states");
739+
if(states) {
740+
states.querySelectorAll("div")[1]
741+
.querySelector("hui-history-graph-card")
742+
.shadowRoot
743+
.querySelector('ha-card')
744+
.style.boxShadow = 'none';
745+
}
746+
}
747+
},100);
745748
}
746749
else if(item.item_type == "multi_entity" || item.item_type == "calendar_event"){
747750
let mock_hass = {};
748751
Object.assign(mock_hass, this._hass);
749752

750753
let config = {"type":"custom:hui-markdown-card", "content": item.detail, "item": item.item_data};
751-
let popup = createCard(config);
752-
popup.hass = this._hass;
753754

754-
setTimeout(()=>{
755-
let card = popup.shadowRoot.querySelector('ha-card');
755+
let maxTitleLength = 80;
756+
let title = item.display_name;
757+
if(title.length > maxTitleLength) title = title.substring(0,maxTitleLength - 3) + "...";
758+
popUp(title, config, false);
759+
760+
setTimeout(()=>{
761+
762+
let popupRoot = document.querySelector("home-assistant").shadowRoot.querySelector("card-tools-popup").shadowRoot;
763+
let card = popupRoot.querySelector("ha-dialog")
764+
.querySelector("hui-markdown-card")
765+
.shadowRoot.querySelector("ha-card");
766+
756767
if(card){
768+
card.style.boxShadow = "none";
757769
card.style.maxHeight = "300px";
758770
card.style.overflow = "auto";
759771
}
760772
},100);
761-
762-
let maxTitleLength = 80;
763-
let title = item.display_name;
764-
if(title.length > maxTitleLength) title = title.substring(0,maxTitleLength - 3) + "...";
765-
popUp(title, popup, false);
766773
}
767774
else if(item.item_type == "notification")
768775
{
769776
let notification = item.original_notification;
770777
if(!notification.title) notification.title = this.notificationIdToTitle(notification.notification_id);
771-
let popup = document.createElement("home-feed-notification-popup");
772-
popup.notification = notification;
773-
popup.hass = this._hass;
774778

775-
popUp(notification.title, popup, false);
779+
//let popup = document.createElement("home-feed-notification-popup");
780+
//popup.notification = notification;
781+
//popup.hass = this._hass;
782+
let config = {"type":"custom:home-feed-notification-popup", "notification": notification};
783+
784+
popUp(notification.title, config, false);
776785
}
777786
else
778787
{

‎src/popup.js‎

Lines changed: 4 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,5 @@
11
import { LitElement, html, css } from "./lit-element.js";
2-
3-
import { fireEvent } from "card-tools/src/event";
4-
import { provideHass } from "card-tools/src/hass";
5-
import { createCard } from "card-tools/src/lovelace-element";
6-
import "card-tools/src/lovelace-element";
7-
8-
export function closePopUp() {
9-
const root = document.querySelector("hc-main") || document.querySelector("home-assistant");
10-
const moreInfoEl = root && root._moreInfoEl;
11-
if(moreInfoEl)
12-
moreInfoEl.close();
13-
}
14-
15-
export function popUp(title, content, large=false, style=null, fullscreen=false) {
16-
const root = document.querySelector("hc-main") || document.querySelector("home-assistant");
17-
// Force _moreInfoEl to be loaded
18-
fireEvent("hass-more-info", {entityId: null}, root);
19-
const moreInfoEl = root._moreInfoEl;
20-
// Close and reopen to clear any previous styling
21-
// Necessary for popups from popups
22-
moreInfoEl.close();
23-
moreInfoEl.open();
24-
25-
const oldContent = moreInfoEl.shadowRoot.querySelector("more-info-controls");
26-
if(oldContent) oldContent.style['display'] = 'none';
27-
28-
const wrapper = document.createElement("div");
29-
wrapper.innerHTML = `
30-
<style>
31-
app-toolbar {
32-
color: var(--more-info-header-color);
33-
background-color: var(--more-info-header-background);
34-
}
35-
.scrollable {
36-
overflow: auto;
37-
max-width: 100% !important;
38-
}
39-
</style>
40-
${fullscreen
41-
? ``
42-
: `
43-
<app-toolbar>
44-
<ha-icon-button
45-
icon="hass:close"
46-
dialog-dismiss=""
47-
aria-label="Dismiss dialog"
48-
></ha-icon-button>
49-
<div class="main-title" main-title="">
50-
${title}
51-
</div>
52-
</app-toolbar>
53-
`
54-
}
55-
<div class="scrollable">
56-
</div>
57-
`;
58-
59-
const scroll = wrapper.querySelector(".scrollable");
60-
scroll.appendChild(content);
61-
62-
moreInfoEl.sizingTarget = scroll;
63-
moreInfoEl.large = large;
64-
moreInfoEl._page = "none"; // Display nothing by default
65-
moreInfoEl.shadowRoot.appendChild(wrapper);
66-
67-
let oldStyle = {};
68-
if(style) {
69-
moreInfoEl.resetFit(); // Reset positioning to enable setting it via css
70-
for (var k in style) {
71-
oldStyle[k] = moreInfoEl.style[k];
72-
moreInfoEl.style.setProperty(k, style[k]);
73-
}
74-
}
75-
76-
moreInfoEl._dialogOpenChanged = function(newVal) {
77-
if (!newVal) {
78-
if(this.stateObj)
79-
this.fire("hass-more-info", {entityId: null});
80-
81-
if (this.shadowRoot == wrapper.parentNode) {
82-
this._page = null;
83-
this.shadowRoot.removeChild(wrapper);
84-
85-
const oldContent = this.shadowRoot.querySelector("more-info-controls");
86-
if(oldContent) oldContent.style['display'] = "inline";
87-
88-
if(style) {
89-
moreInfoEl.resetFit();
90-
for (var k in oldStyle)
91-
if (oldStyle[k])
92-
moreInfoEl.style.setProperty(k, oldStyle[k]);
93-
else
94-
moreInfoEl.style.removeProperty(k);
95-
}
96-
}
97-
}
98-
}
99-
100-
return moreInfoEl;
101-
}
2+
import { closePopUp } from "card-tools/src/popup";
1023

1034
export class HomeFeedNotificationPopup extends LitElement {
1045
constructor() {
@@ -110,21 +11,8 @@ export class HomeFeedNotificationPopup extends LitElement {
11011
return this;
11112
}
11213

113-
set notification(notification) {
114-
this._notification = notification;
115-
}
116-
117-
pushStateInterceptor()
118-
{
119-
(function(history){
120-
var pushState = history.pushState;
121-
history.pushState = function(state) {
122-
if (typeof history.onpushstate == "function") {
123-
history.onpushstate({state: state});
124-
}
125-
return pushState.apply(history, arguments);
126-
};
127-
})(window.history);
14+
setConfig(config){
15+
this._notification = config.notification;
12816
}
12917

13018
render() {
@@ -180,20 +68,13 @@ export class HomeFeedNotificationPopup extends LitElement {
18068
</ha-card>
18169
`;
18270
}
183-
closePopUp() {
184-
let moreInfo = document.querySelector("home-assistant")._moreInfoEl;
185-
if (moreInfo && moreInfo.style.display != "none") {
186-
moreInfo.close();
187-
history.onpushstate = null;
188-
}
189-
}
19071

19172
_handleDismiss(event) {
19273
var id = event.target.notificationId;
19374
this._hass.callService("persistent_notification", "dismiss", {
19475
notification_id: id
19576
});
196-
this.closePopUp();
77+
closePopUp();
19778
}
19879

19980
_computeTooltip(hass, notification) {

0 commit comments

Comments
 (0)