npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-micro-modal

v3.0.0

Published

Ember addon for MicroModal modal library.

Downloads

10

Readme

ember-micro-modal

Ember addon for MicroModal modal library.

Compatibility

  • Ember.js v3.28 or above
  • Ember CLI v3.28 or above
  • Node.js v14 or above

Installation

ember install ember-micro-modal

CSS is not included by default. If you want to apply default styles just include to your app.css like @import 'micro-modal.css' or in scss, less @import 'micro-modal'.

To see default modal html structure.

Usage

You can change all global configuration settings via config/environment.js file.

Please check MicroModal site for more configuration details.

ENV['ember-micro-modal'] = {
  onShow: (modal) => console.info(`${modal.id} is shown`),
  onClose: (modal) => console.info(`${modal.id} is hidden`),
  openTrigger: 'data-custom-open',
  closeTrigger: 'data-custom-close',
  openClass: 'is-open',
  disableScroll: true,
  disableFocus: false,
  awaitOpenAnimation: false,
  awaitCloseAnimation: false,
  debugMode: true,
};

There are also 2 parameters. @show and @clickToOverlay. @show parameter simply responsible to modal visibility. If value is true modal will be visible. @clickToOverlay parameter is responsible to whether modal overlay clickable or not. If value is true overlay click will close the modal.

<MicroModal
  @show={{this.show}}
  @onShow={{fn this.onShow}}
  @onClose={{fn this.onClose}}
  as |modal|
>
  <modal.container class='col-6' as |container|>
    <container.header class='col'>
      <h2 class='modal__title'>
        Micromodal
      </h2>
      <button
        type='button'
        class='modal__close'
        aria-label='Close modal'
        data-micromodal-close
      ></button>
    </container.header>
    <container.content class='col'>
      <p>
        Try hitting the
        <code>
          tab
        </code>
        key and notice how the focus stays within the modal itself. Also,
        <code>
          esc
        </code>
        to close modal.
      </p>
    </container.content>
    <container.footer class='col'>
      <button type='button' class='modal__btn modal__btn-primary'>
        Continue
      </button>
      <button
        type='button'
        class='modal__btn'
        aria-label='Close this dialog window'
        data-micromodal-close
      >
        Close
      </button>
    </container.footer>
  </modal.container>
</MicroModal>
<button type='button' {{on 'click' this.showModal}}>
  Show
</button>

```handlebars

<MicroModal @show={{this.show}} @onShow={{fn this.onShow}} @onClose={{fn this.onClose}} as |modal|> <modal.container class="col-6" as |container|> <container.header class="col">


Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.
I'm sorry that i don't have time to write tests. Please report if you find any issue.

Thanks.


## License

This project is licensed under the [MIT License](LICENSE.md).