Hi, great that you are still developing this card!
I have a rather specific question: is it possible to “manually” display the confirmation dialog and then take action based on its result? I’ll just show you how I use browser_mod popup (if available) or the standard confirmation dialog. Ideally, I’d replace the standard dialog with button card’s confirmation.
Code
type: custom:button-card
name: Confirmation should only appear when you click the icon on the right
variables:
all: |
[[[
const UUID = '494324ec-57cf-4982-91df-af9065e69a48';
const USE_BROWSER_MOD = false;
if (!window[UUID]) window[UUID] = {
isOn: false,
get message() { return `Your're about to turn it ${this.isOn ? 'OFF' : 'ON'}, continue?`; },
makeIcon: () => `<ha-icon id="my_icon" icon="mdi:cog-outline" onclick="window['${UUID}'].iconClick(event,this)" class="myicon"></ha-icon>`,
iconClick(event,icon) {
event.stopPropagation();
if (USE_BROWSER_MOD && window.browser_mod) {
this.showBowserModDialog();
} else {
/* standard dialog that I want to replace with button card's dialog */
let reply = confirm(this.message);
this.processUserReply(reply);
}
},
showBowserModDialog() {
let getAction = (change) => ({
service: 'browser_mod.javascript',
data: {
code: `window['${UUID}'].processUserReply(${change})`
},
});
let popupData = {
title: 'Are you sure?',
dismissable: true,
dismiss_action: getAction(false),
content: `<ha-alert alert-type="warning">${this.message}</ha-alert>`,
right_button: 'Cancel',
left_button: 'OK',
left_button_action: getAction(true),
};
const ev = new CustomEvent('ll-custom', {
bubbles: true,
detail: {
browser_mod: {
service: 'browser_mod.popup',
data: popupData,
}
},
});
document.body.dispatchEvent(ev);
},
/* change the thing or not, depending on dialog result */
processUserReply(change) {
if (change) {
this.isOn = !this.isOn;
this.button.update();
}
},
};
window[UUID].button = this;
return window[UUID];
]]]
custom_fields:
test: "[[[ return variables.all.makeIcon(); ]]]"
tap_action:
action: null
styles:
card:
- cursor: default
- "--mdc-ripple-color": none
- padding: 16px
grid:
- display: flex
- justify-content: space-between
- gap: 16px
name:
- white-space: normal
- text-align: start
- width: 100%
extra_styles: |
[[[
return `
.myicon {
width: 24px;
height: 24px;
cursor: pointer;
color: ${variables.all.isOn ? 'var(--accent-color)' : 'var(--state-icon-color)' };
${variables.all.isOn ? 'animation: rotating 2s linear infinite;' : '' }
}
`;
]]]
It’s easy to make the “confirmation” object (within button card) only exist when needed, but processing the response in a controlled way (especially the “no” response) seems impossible in this scenario.