ember-cli-bootstrap3-popover

ember-cli-bootstrap3-popover

This addon allows you to quickly and conveniently create a Bootstrap3 Popover.

Demo

The demonstration web application can be found here: http://ember-cli-bootstrap3-popover.cybertooth.io/.

What Does This Addon Do?

This addon supplies the following components:

• twbs-popover - a container-like element for the popover's markup, options, methods, and events.
• twbs-popover/content - a component you nest inside a twbs-popover that will generate the content for the popover.
• twbs-popover/title - a component you nest inside a twbs-popover that will generate the title for the popover.
• twbs-popover/trigger - the component you nest inside a twbs-popover that acts as the bound element for the popover and in normal trigger events will accept clicks, hovering, and focus events to toggle the popover.

The following mixin also ships with this addon:

• Popover - imported as import Popover as 'ember-cli-bootstrap3-popover/mixins/popover' and includes all of the popover options as found in the Bootstrap documentation.

Further information about these items can be found in the Usage section below.

Requirements

• Ember >= 2.3.0: This addon uses the hash helper which was introduced in Ember-2.3.0.
• Ember CLI
• You must have Bootstrap 3.x installed in your Ember application. Feel free to use the ember-cli-bootstrap3-sass addon to setup Bootstrap if you haven't already done so.
• Popovers require the tooltip plugin to be included in your version of Bootstrap.

Installation

The following will install this addon:

ember install ember-cli-bootstrap3-popover

As mentioned, you must install Bootstrap3 along with the tooltip plugin. See the requirements section above.

Upgrading

When working through the Ember upgrade process, I recommend invoking the ember install ember-cli-bootstrap3-popover command once you are done to get the latest version of the addon.

Usage

As mentioned above there are dozens of examples on the demonstration site: http://ember-cli-bootstrap3-popover.cybertooth.io/

Components

{{twbs-popover}}

A component that contains all of the markup associated with the popover. You can nest {{twbs-popover.content}}, {{twbs-popover.title}}, and {{twbs-popover.trigger}} inside this components block.

The reason this addon requires Ember-2.3.0+ is because this particular component uses the hash helper.

Be aware that when you nest either the content or title it will be automatically treated as html.

Arguments

• All of the properties listed in the Popover mixin.
• onShow - the property that accepts an action closure hooked to the bootstrap show.bs.popover event.
• onShown - the property that accepts an action closure hooked to the bootstrap shown.bs.popover event.
• onHide - the property that accepts an action closure hooked to the bootstrap hide.bs.popover event.
• onHidden - the property that accepts an action closure hooked to the bootstrap hidden.bs.popover event.
• onInserted - the property that accepts an action closure hooked to the bootstrap inserted.bs.popover event.

(Check out the demo...)

Actions

The following popover methods are exposed as actions:

• hide - triggers the hiding of a popover.
• show - triggers the showing of a popover.
• toggle - toggles a popover.

{{twbs-popover/content}}

A component that nests inside of a {{#twbs-popover}} and generates the content for a popover via its block. This component promotes the easy re-use of existing components inside the popover content and encourages readable html.

Arguments

• None.

{{twbs-popover/title}}

A component that nests inside of a {{#twbs-popover}} and generates the title for a popover via its block. This component promotes the easy re-use of existing components inside the popover title and encourages readable html.

Arguments

• None.

{{twbs-popover/trigger}}

A component that nests inside of a {{#twbs-popover}} and generates the html element that the popover is bound to. When the popover is initialized, the markup inside this component becomes the popover.

Seriously, check out the examples and all of this will make sense: http://ember-cli-bootstrap3-popover.cybertooth.io/

Arguments

• None.

Mixins

Popover

A mixin that provides access to all of the Bootstrap popover options as found here: http://getbootstrap.com/javascript/#popovers-options

Properties

• animation? (aliased to animation)- Default true
• content - Default ''
• delay - Default 0
• delayHide - Default undefined
• delayShow - Default undefined
• html? (aliased to html) - Default false
• placement - Default 'right'
• popoverContainer - Default false
• popoverTemplate - Default '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
• popoverTrigger - Default 'click'
• selector - Default false
• title - Default ''

Methods

• getOptions() - returns a hash containing the options from this mixin that are used to initialize the Bootstrap popover.

Troubleshooting And Tips

1. Ember-2.3.0+ is required because this addon uses the hash helper.
2. Bootstrap3 CSS and the tooltip Javascript plugin must be installed.

---

Ember Addon Building And Testing

Setup

Checkout

$ git clone [e-mail]:cybertoothca/ember-cli-bootstrap3-popover.git

With NPM

npm install

With Yarn

yarn

Running The Dummy Application

• ember server
• Visit your app at http://localhost:4200.

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Building The Addon

• ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Linking This Addon For Local Testing

Linking

1. From the command line at the root of this project run the npm link command to link this addon within your local node repository.
2. From the other Ember project that you wish to test this addon in, execute the following command: npm link ember-cli-bootstrap3-popover.
3. Now in that same other Ember project, you should go into the package.json and add the ember addon with the version *. It will look something like this: "ember-cli-bootstrap3-popover": "*". Now when/if you execute npm install on this other project it will know to look for the linked addon rather than fetch it from the central repository.

Unlinking

1. Remove the addon from your local node repository with the following command (that can be run anywhere): npm uninstall -g ember-cli-bootstrap3-popover
2. Remove the reference to the ember-cli-bootstrap3-popover in your other project's package.json.
3. Run an npm prune and bower prune from the root of your other project's command line.

Deploying The Dummy Application

Make sure your ~/.aws/credentials file has a profile named cybertooth with a valid key and secret,

[cybertooth]
aws_access_key_id = <KEY>
aws_secret_access_key = <SECRET>

Deploy by invoking the following command: ember deploy production

Confirm your changes are showing up in our S3 container: http://ember-cli-bootstrap3-popover.cybertooth.io/

Releasing & Publishing To NPM

npm version x.y.z-sub.#
git push
git push --tags
npm publish

License

This project is licensed under the MIT License.