ember-cli-bootstrap3-carousel
Version:
The default blueprint for ember-cli addons.
173 lines (108 loc) • 6.68 kB
Markdown
# ember-cli-bootstrap3-carousel [](http://badge.fury.io/gh/cybertoothca%2Fember-cli-bootstrap3-carousel) 
[](http://badge.fury.io/js/ember-cli-bootstrap3-carousel) [](http://circleci.com/gh/cybertoothca/ember-cli-bootstrap3-carousel) [](http://codeclimate.com/github/cybertoothca/ember-cli-bootstrap3-carousel)  [](http://emberobserver.com/addons/ember-cli-bootstrap3-carousel) [](LICENSE.md)
This addon can create a basic Bootstrap3 carousel that can lazy-load images. See the
[Bootstrap3 Carousel](http://getbootstrap.com/javascript/#carousel) documentation for additional information.
## Demo
The demonstration web application can be found here:
[http://ember-cli-bootstrap3-carousel.cybertooth.io/](http://ember-cli-bootstrap3-carousel.cybertooth.io/).
## What Does This Addon Do?
This addon supplies the following _components_:
* `twbs-carousel` - a container-like element for the carousel's slides.
* `twbs-carousel/slide` - a component representing a slide that is nested
inside a `twbs-carousel`.
* `twbs-carousel/slide/img` - a component generating an html `<img>` tag
that has the ability to be lazily loaded by the carousel's slide event.
The following _mixin_ also ships with this addon:
* `Carousel` - imported as `import Carousel as 'ember-cli-bootstrap3-carousel/mixins/carousel'` and includes all
of the carousel options as found in the [Bootstrap documentation](http://getbootstrap.com/javascript/#carousel-options).
_Further information about these items can be found in the Usage section below._
## Requirements
* **Ember >= 2.3.0**: This addon uses the [hash helper](http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_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](http://emberobserver.com/addons/ember-cli-bootstrap3-sass)
addon to setup Bootstrap if you haven't already done so.
## Installation
The following will install this addon:
$ ember install ember-cli-bootstrap3-carousel
__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-carousel` command once
you are done to get the latest version of the addon.
## Usage
As mentioned above there are several examples on the demonstration site:
[http://ember-cli-bootstrap3-carousel.cybertooth.io/](http://ember-cli-bootstrap3-carousel.cybertooth.io/)
### Components
#### `{{twbs-carousel}}`
A component that creates the `<div class="carousel>` element.
The reason this addon requires **Ember-2.3.0+** is because this particular component uses the _hash_ helper.
##### Arguments
* _All of the properties listed in the `Carousel` mixin_.
* `onSlide` - the property that accepts an action closure hooked to the bootstrap `slide.bs.carousel` event.
* `onSlid` - the property that accepts an action closure hooked to the bootstrap `slid.bs.carousel` event.
([Check out the demo...](http://ember-cli-bootstrap3-carousel.cybertooth.io/))
#### `{{twbs-carousel/slide}}`
##### Arguments
#### `{{twbs-carousel/slide/img}}`
##### Arguments
### Mixins
#### `Carousel`
A mixin that provides access to all of the Bootstrap carousel options as found
here: [http://getbootstrap.com/javascript/#carousel-options](http://getbootstrap.com/javascript/#carousel-options)
##### Properties
* `interval` - **Default** `5000`
* `keyboard?` (aliased to `keyboard`) - **Default** `true`
* `pause` - **Default** `"hover"`
* `wrap?` (aliased to `wrap`) - **Default** `true`
##### Methods
* `computedOptions()` - 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.
1. Bootstrap3 CSS and the tooltip Javascript plugin must be installed.
---
# Ember Addon Building And Testing
## Setup
* `git clone git@github.com:cybertoothca/ember-cli-bootstrap3-carousel.git`
* `npm install`
* `bower install`
## Running The Dummy Application
* `ember server`
* Visit your app at http://localhost:4200.
## Running Addon Tests
* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`
## Building The Addon
* `ember build`
For more information on using ember-cli, visit [http://ember-cli.com/](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.
1. From the _other_ Ember project that you wish to test this addon
in, execute the following command:
`npm link ember-cli-bootstrap3-carousel`.
1. 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-carousel": "*"`. 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-carousel`
1. Remove the reference to the `ember-cli-bootstrap3-carousel`
in your _other_ project's `package.json`.
1. 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-carousel.cybertooth.io/