Add screen / media_query to triggers_update

[Mariusthvdb]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

requiring updating the button-card upon screen rotation to set various numbers in animations
like

  available: >
     [[[ return window.matchMedia('(max-width:370px)').matches &&
                window.matchMedia('(orientation:portrait)').matches
         ? 25 : 36; ]]]

which currently cant be done, as there is no entity for those properties, hence the template wont update other than on reload of the view

Describe the solution you'd like
A clear and concise description of what you want to happen.
aadd window/screen/media_query to triggers_update

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

only other workaround now is duplicate the card, and set type: conditional or layout card, as documented extensively in https://community.home-assistant.io/t/how-to-make-scroll-time-speed-and-translatex-string-length-dependent-in-css-animation/754407/8

  - type: conditional
    conditions:
      - condition: screen
        media_query: "(min-width:400px)"
    card: !include /config/dashboard/includes/button/button_marquee_alerts_css_wide.yaml
  - type: conditional
    conditions:
      - condition: screen
        media_query: "(max-width:399px)"
      - condition: screen
        media_query: "(orientation:portrait)"
    card: !include /config/dashboard/includes/button/button_marquee_alerts_css_narrow.yaml

Additional context
Add any other context or screenshots about the feature request here.
see link to community above.

All it would take is the button-card to update on those screen orientations/sizing of the view

Hope you can consider,
thanks!

[RomRider]

I think the conditional card with button-card templates (with overload for each condition) is the way to go here to avoid duplicating a lot of code from HA core.

[dcapslock]

@Mariusthvdb if you wish to stay with button-card and template route, here is a template solution. This is to be applied per button-card.

button_card_templates:
  media_query:
    variables:
      a_mq_debug: true
      z_mq: |
        [[[
          if (!this._updateLovelaceMQRemove) {
              variables.a_mq_debug && console.log('setup remove function');
              this._updateLovelaceMQRemove = () => {
                variables.a_mq_debug && console.log('remove');
                this._updateLovelaceMQMedia.removeEventListener("change", this._updateLovelaceMQ);
              }; 
          }
          if (!this._updateLovelaceMQ) {
            variables.a_mq_debug && console.log('setup media query listener');
            this._updateLovelaceMQ = () => {
              this._updateLovelaceMQRemove?.();
              variables.a_mq_debug && console.log('Request rebuild', this);
              // Careful HERE! Update Loop risk.
              this.dispatchEvent(new CustomEvent('ll-rebuild'));
            };
          }
          if (!this._updateLovelaceMQMedia) {
            if (variables.media_query) {
              variables.a_mq_debug && console.log('setup media query', variables.media_query);
              this._updateLovelaceMQMedia = matchMedia(variables.media_query);
              this._updateLovelaceMQMedia.addEventListener("change", this._updateLovelaceMQ);
            } else {
              variables.a_mq_debug && console.log('no media_query supplied');
            }
          }
        ]]]

Example:

button-card label will update, without any any triggers, when client width goes above or below 600px.

type: custom:button-card
template:
  - media_query
variables:
  media_query: (width >= 600px)
entity: light.kitchen_lights
section_mode: true
show_label: true
label: |
  [[[
    return 'Client Width: ' + document.documentElement.clientWidth + ' px'
  ]]]
grid_options:
  rows: 4
  columns: 12