Closes#2336. Closes#2317. Closes#2290. Closes#2228. Closes#2067.
Closes#1890. Closes#1865. Closes#1850. Closes#1755. Closes#1688.
Closes#1578. Closes#1501. Closes#1353. Closes#1342. Closes#782.
Closes#416. Closes#2288.
BREAKING CHANGE: The slideBox's API has undergone many changes.
- **`<ion-slide-box>`** attributes have changed (see
[documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)):
* `active-slide` has changed to `selected`. Change your code from
this:
```html
<ion-slide-box active-slide="activeSlideIndex"></ion-slide-box>
```
To this:
```html
<ion-slide-box selected="activeSlideIndex"></ion-slide-box>
```
* `does-continue` has changed to `loop`. Change your code from this:
```html
<ion-slide-box does-continue="shouldLoop"></ion-slide-box>
```
To this:
```html
<ion-slide-box loop="shouldLoop"></ion-slide-box>
```
* `auto-play` and `slide-interval` have been merged into `auto-play`.
Change your code from this:
```html
<!-- autoPlay is on -->
<ion-slide-box auto-play="true" slide-interval="1000">
</ion-slide-box>
<!-- autoPlay is off -->
<ion-slide-box auto-play="false" slide-interval="1000">
</ion-slide-box>
```
To this:
```html
<!-- autoPlay is on -->
<ion-slide-box auto-play="1000"></ion-slide-box>
<!-- autoPlay is off -->
<ion-slide-box auto-play="false"></ion-slide-box>
```
* `show-pager` and `pager-click` have been removed. Use
a child `<ion-slide-pager>` element. See the [`ion-slide-pager`
documentation](http://ionicframework.com/docs/api/directive/ionSlidePager).
Change your code from this:
```html
<!-- pager using default click action -->
<ion-slide-box show-pager="true">
</ion-slide-box>
<!-- pager with custom click action -->
<ion-slide-box show-pager="true" pager-click="doSomething(index)">
</ion-slide-box>
```
To this:
```html
<ion-slide-box>
<!-- pager using default click action -->
<ion-slide-pager></ion-slide-pager>
</ion-slide-box>
<ion-slide-box>
<!-- pager with custom click action -->
<ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager>
</ion-slide-box>
```
- **`$ionicSlideBoxDelegate`** methods have changed (see
[documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)):
- `update()` has been removed. slideBox updates on its own now.
- `stop()` has been removed. See `autoPlay()` below.
- `start()` hass been removed. See `autoPlay()` below.
- `slide(newIndex[, speed])` has been renamed to `select(newIndex[,
speed]);
- `currentIndex()` has been renamed to `selected()`.
- `slidesCount()` has been renamed to `count()`.
- New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code
from this:
```js
// stop auto sliding
$ionicSlideBoxDelegate.stop();
// later... start auto sliding
$ionicSlideBoxDelegate.start();
```
To this:
```js
var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide
// stop auto sliding
$ionicSlideBoxDelegate.autoPlay(false);
// later... start auto sliding
$ionicSlideBoxDelegate.autoPlay(autoPlaySpeed);
```
- `previous()` now returns the index of the previous slide and does
not select. Change your code from this:
```js
// select previous slide
$ionicSlideBoxDelegate.previous();
```
To this:
```js
// select previous slide
$ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() );
```
- `next()` now returns the index of the next slide and does
not select. Change your code from this:
```js
// select next slide
$ionicSlideBoxDelegate.next();
```
To this:
```js
// select next slide
$ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() );
```
By default the scroll bar is being created for each view, then
immediately it adds the .scroll-bar-fade-out class. On every transition
you sometimes saw the scroll bar appear then fade away quickly. Sure
that was annoying and has been fixed to prevent that, but the real
issue is that on every view transition, the scroll bar’s opacity
transition fired off a transitionend event, which bubbled up to the
view and messed with Angular’s $animate. If timed out correctly, at the
time the scroll bar’s transitionend event bubbled up, and an element
was actively leaving the view, it would confuse $animate and cause the
leave animation to abruptly end, which caused an ugly flicker.
Instead of using pointer-events: none to disable unwanted clicks which
can cause flickering, we’re now using a click-block div that covers the
view during transitions. Similar concept to pointer-events: none
applied to the body tag, but in tests its showing to be more effective
to not cause any flickers.
This nested unclosed comment breaks autoprefixer's parsing and causes
it to spike to 100% cpu.
No breaking changes in this commit. see diegonetto/generator-ionic#38
Cloes #1807
Closes#1668.
`<div class="modal">` will still work, but adding an `<ion-modal-view>`
element to wrap a modal template is a more "Ionic Looking" way of doing
the same thing.
