Onclick also on Menu subtitle?

[Mariusthvdb]

thanks for yet another very functional update providing the onclcik.

I still need to fully grasp the possibilities this offers, but believe I am I 'Need' for his for some time now, clicking the Header.

I use that space to show an alert:

And for a long time wished I could click that, to go to a dedicated dashboard.

As a believe to understand the latest release notes, the header is Not included in the possible OnClick elements?

If that is correct, would you consider adding that option?
If it already is, and my understanding is wrong, could you help me find the right syntax for that please?

currently I use this in the sidebar config:

styles: |
  .menu .title:after {
    font-weight: bold;
    animation: marquee 4s alternate infinite;
  }

menu_background: >
  [[[ @partial familie
      return feest ? 'top / cover url(/local/images/balloons.png)' : 'none'; ]]]
title: >
  [[[ @partial title
      return 'Rumah kami: ' + tijdStr; ]]]
title_color: >
   [[[ states('sensor.presence_color'); ]]]
subtitle: >
  [[[ @partial subtitle
      return marquees != 0 ? phrase + marquees : ''; ]]]
subtitle_color: var(--alert-color)

and the subtitle itself is set using card_mod:

  card-mod-sidebar-yaml: |
    .: |

      /* notification badge on collapsed menu icon */
      :host(:not([expanded])) .menu ha-icon-button:after {
        content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
                  {{- m_alerts if m_alerts > 0 }}";
        {{style_badge_not_expanded}}
        color: ivory;
        background: var(--alert-color);
      }

Hope this makes sense and is understandable....

[elchininet]

Hi @Mariusthvdb,
Unfortunately, the subtitle is a pseudo element, so it doesn't exist by itself, it belongs to the title. It is impossible to add events to it because it is not an element, so it doesn't inherit from the EventTarget.

But if adding an event to the title works for you there is an alternative. Adding events to the title using an addEventListener is possible but it gets blocked by Home Assistant that prevents any click event in the title. But there is a hacky workaround: instead of adding an event to the title, it is possible to wrap the title in an element with an onClick property, something that mocks Home Assistant completely. Check this answer.

[elchininet]

even if that works, and the response seems to indicate it does, would you not consider adding this to the plugin natively

No, if it were an addEventListener in the scope of the plugin code, yes, but it is just a hacky workaround, it should not be added to the final code. The global scope should not be polluted and I should not use discouraged attributes that would be blocked depending on user configurations.

sadly, my effort to do:
doesnt work. It hides my actual Title I already set using:

Post the final code that you tried (the above code blocks got broken). I can helpy you to achieve your goal.

[Mariusthvdb]

separate post wit solution:

title: |
  [[[
    @partial titleClick @partial title
    return `<span style="cursor:pointer"
             onClick="javascript:titleClick()">
             Rumah kami: ${tijdStr}
            </span>`;
  ]]]

I believe the html quotes were incorrect in the original answer you linked there, so I couldn't add the ${tijdStr} nor could I break the yaml lines like above.
this now works nicely indeed

[elchininet]

I believe the html quotes were incorrect in the original answer you linked there,

No, they are not incorrect, but those quotes don't support template interpolation, only backticks support that.

[elchininet]

Glad that it is working now 🙂

[Mariusthvdb]

as an after burner: I just found out his does not work in the Desktop HA app on the Mac. (no effect clicking the menu, other than the hovering Hand style pointer)

it does work in he Browser on the Mac, as in the iOS app