Giter Club home page Giter Club logo

ember-popper-modifier's Introduction

ember-popper-modifier

An Ember modifier for working with Popper.js.

Compatibility

  • Ember.js v4.8 or above
  • Ember CLI v4.8 or above
  • Node.js v18 or above

Installation

ember install ember-popper-modifier

Usage

This addon provides Ember modifiers that interfaces with the Popper.js library. It handles creating Popper instances as well as configuring them as options are updated.

Popper.js operates on two elements at the same time:

  1. The "reference" element, which is the one the tooltip is positioned relative to
  2. The "popper" element, which is the one that floats.

Two modifiers are provided, depending on which element you want to apply the modifier to and which you want to pass as a reference:

  • {{popper}} is applied on the reference element and given the tooltip as an argument
  • {{popper-tooltip}} is applied on the tooltip element and passed the reference as an argument

Aside from that difference, the modifiers are identical. Thus, the examples below will only show the usage of {{popper}}; know that all of the same principles and options work for {{popper-tooltip}} as well.

More information WIP.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-popper-modifier's People

Contributors

alexlafroscia avatar dependabot-preview[bot] avatar dependabot[bot] avatar ember-tomster avatar jelhan avatar pzubar avatar simonihmig avatar st-h avatar timmorey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ember-popper-modifier's Issues

Support ember-modifier v4

ember-popper-modifier should support ember-modifier@^4 in parallel to version 3 to allow applications (and other addons depending on it) to upgrade to Ember Modifier v4 themselves. This issue lists the remaining tasks to do so.

  • Refactor ember-modifier to use modify hook available since ember-modifier@>=3.2.0 (#452 and #508)
  • Drop support for node < 14 (#577)
  • Drop support for Ember < 3.24 (#578)
  • Widen version range for ember-modifier to ^3.2.0 || ^4.0.0

Publish TypeScript types

Would be great if the package publishes TypeScript types. In my experience converting the source code and tests to TypeScript is the most maintainable way doing so. Conversion to TypeScript can be done by running ember init --typescript and manually picking the required changes.

Treat additional positional arguments as modifiers

Rather than needing to set the modifiers named argument to the helper, it would be helpful to be able to pass additional named arguments that are each treated as modifiers.

This is much more verbose

{{popper
  (query-selector "#tether")
  placement="bottom-start"
  modifiers=(popper-modifier "offset" options=(hash offset=(array 0 5)))
}}

Than this

{{popper
  (query-selector "#tether")
  (popper-modifier "offset" options=(hash offset=(array 0 5)))
  placement="bottom-start"
}}

And, with #12, this would be even better

{{popper
  (query-selector "#tether")
  (popper-modifier "offset" offset=(array 0 5))
  placement="bottom-start"
}}

Replace standard-version with release-it

As with other addons in adopted-ember-addons, we should use release-it for the release process. See here for details: https://github.com/adopted-ember-addons/program-guidelines#release-process

The existing tool relies on conventional commits. In my experience it is difficult to establish them in a project with many contributors. Release-it is easier in that case as it allows maintainers to adjust the PR titles and labels after merging before releasing as needed. Also the used tool standard-version is deprecated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.