cibernox / ember-basic-dropdown-hover

Variation of ember-basic-dropdown that opens on hover
MIT License
5 stars 5 forks source link

Does it work? #8

Open mehran-naghizadeh opened 3 years ago

mehran-naghizadeh commented 3 years ago

Does this add-on still work? Looks like the mouse event listeners are not created.

{{yield (assign
    dd
    (hash
      trigger=(component dd.Trigger
        onMouseDown=(action "prevent")
        onMouseEnter=(action "open")
        onMouseLeave=(action "close"))
      content=(component dd.Content
        onMouseEnter=(action "open")
        onMouseLeave=(action "close")
      )
    )
  )}}
roncodes commented 2 years ago

Here's what I did

ember g component basic-dropdown-hover -gc
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { cancel, later } from '@ember/runloop';
import { action } from '@ember/object';
import { oneWay } from '@ember/object/computed';

export default class BasicDropdownHoverComponent extends Component {
    @tracked delay = 300;
    @tracked closeTimer;
    @tracked openTimer;
    @oneWay('delay') openDelay;
    @oneWay('delay') closeDelay;

    @action open(dropdown) {
        if (this.closeTimer) {
            cancel(this.closeTimer);
            this.closeTimer = null;
        } else {
            const openFn = () => {
                this.openTimer = null;
                dropdown.actions.open();
            };

            const { openDelay } = this;

            if (openDelay) {
                this.openTimer = later(openFn, openDelay);
            } else {
                openFn();
            }
        }
    }

    @action close(dropdown) {
        if (this.openTimer) {
            cancel(this.openTimer);
            this.openTimer = null;
        } else {
            const closeFn = () => {
                this.closeTimer = null;
                dropdown.actions.close();
            };

            const { closeDelay } = this;

            if (closeDelay) {
                this.closeTimer = later(closeFn, closeDelay);
            } else {
                closeFn();
            }
        }
    }

    @action prevent() {
        return false;
    }
}
<BasicDropdown @renderInPlace={{@renderInPlace}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @matchTriggerWidth={{@matchTriggerWidth}} @triggerComponent={{@triggerComponent}} @contentComponent={{@contentComponent}} @calculatePosition={{@calculatePosition}} @onOpen={{@onOpen}} @onClose={{@onClose}} @onFocus={{@onFocus}} @calculateInPlacePosition={{@calculateInPlacePosition}} as |dd|>
    {{yield (assign dd
        (hash 
            Trigger=(component dd.Trigger onMouseDown=(fn this.prevent) onMouseEnter=(fn this.open) onMouseLeave=(fn this.close)) 
            Content=(component dd.Content onMouseEnter=(fn this.open) onMouseLeave=(fn this.close))
        )
    )}}
</BasicDropdown>