MelleD / lovelace-expander-card

Expander card for HomeAssistant
Apache License 2.0
23 stars 4 forks source link

Add "Start expanded" with min-width/max-width #140

Closed S1M8N closed 3 weeks ago

S1M8N commented 3 weeks ago

Hello guys,

First thank you a lot for you lovelace card 😆

My feature request consists to add the posibility to have "Start expanded" only when I use my computer or tablette.

The idea is when I checked this box : image

I have this option : image

You think it's possible to add that ?

Thank you in advance

MelleD commented 3 weeks ago

Could be possible, when the card have template functionality, but currently there is no option to use templates on the card

S1M8N commented 3 weeks ago

Okey, and do you have an exemple or reference for me ?

MelleD commented 3 weeks ago

Okey, and do you have an exemple or reference for me ?

For what?

S1M8N commented 3 weeks ago

For have the posibility to "Start expanded" only when I use my computer or tablette. I don t know how can I make that with "template"

MelleD commented 3 weeks ago

For have the posibility to "Start expanded" only when I use my computer or tablette. I don t know how can I make that with "template"

You have to implement the functionality/feature into this card. You can look e.g. into the mushroom cards how to implement this and how to resolve templates

S1M8N commented 3 weeks ago

For have the posibility to "Start expanded" only when I use my computer or tablette. I don t know how can I make that with "template"

You have to implement the functionality/feature into this card. You can look e.g. into the mushroom cards how to implement this and how to resolve templates

With @M4TH1EU I have test that and it's work fine. Can you test add this feature ?

ExpanderCardEditor.svelte :

        'min-width-expanded': ['string', {
            label: 'Min width to expand on start (must use start expanded)'
        }],
        'max-width-expanded': ['string', {
            label: 'Max width to expand on start (must use start expanded)'
        }],

ExpanderCard.svelte :

    onMount(() => {
        isEditorMode = (thisComponent as HTMLElement).parentElement?.localName === 'hui-card-preview';
        if (isEditorMode) {
            open = true;
        } else {
            if (config.expanded !== undefined) {
                const min_width_expanded = parseInt(config['min-width-expanded'] as string);
                const max_width_expanded = parseInt(config['max-width-expanded'] as string);

                if(min_width_expanded !== 0 && max_width_expanded !== 0) {
                    config.expanded = document.body.offsetWidth >= min_width_expanded && document.body.offsetWidth <= max_width_expanded;
                }

                setTimeout(() => {
                    open = config.expanded as boolean;
                    config.expanded = undefined;
                }, 100);
            }
        }
    });

don't forget to add in configtype.ts :

    'min-width-expanded'?: string;
    'max-width-expanded'?: string;
MelleD commented 3 weeks ago

Why do you not directly create a PR and it's also easier to comment. You will also have your honor and mention in the release notes :)

But this a little bit different to what you described. Maybe also update your description that you would like to have a expaned on startup condition on static min and max size and NOT dynamically on the device state

Short notes: This only working if you px as width check (maybe add this to the description) also why do you string instead of int int he config?

S1M8N commented 3 weeks ago

Why do you not directly create a PR and it's also easier to comment. You will also have your honor and mention in the release notes :)

But this a little bit different to what you described. Maybe also update your description that you would like to have a expaned on startup condition on static min and max size and NOT dynamically on the device state

I don't use github for that. I just want this feature and I search for that. I give you my code vision but I'm not developper. If you want I can watch with @M4TH1EU for more but me I can't make more than that.

why do you string instead of int int he config? More easy for me to test that. You can use int without any problem.

MelleD commented 3 weeks ago

I give you my code vision but I'm not developper

Yes but then you have to wait

If you want I can watch with @M4TH1EU for more but me I can't make more than that.

You can do what ever you want ;), a complete finish PR where we can discuss the implementation help to make things faster. Just some code snippets without background takes longer. I don't work on the card every day, so you have to wait or prepare a PR if you need it quick and fast :)

MelleD commented 3 weeks ago

fix 1.3.0

github-actions[bot] commented 3 weeks ago

Release 1.3.0 addresses this.

github-actions[bot] commented 3 weeks ago

Release 1.3.0 addresses this.