Files
ionic-framework/js/utils/list.js
Andrew 7ef9ad74cf fix(slidebox): refactor for performance and stability
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() );
    ```
2014-10-08 11:09:15 -06:00

151 lines
3.7 KiB
JavaScript

(function() {
function trueFn() { return true; }
ionic.Utils.list = list;
function list(initialArray) {
var array = angular.isArray(initialArray) ? initialArray : [];
var self = {};
var isLooping = false;
// The Basics
self.items = items;
self.add = add;
self.remove = remove;
self.at = at;
self.count = count;
self.indexOf = angular.bind(array, array.indexOf);
self.isInRange = isInRange;
self.loop = loop;
// The Crazy Ones
self.delta = delta;
self.isRelevant = isRelevant;
self.previous = previous;
self.next = next;
return self;
// ***************
// Public methods
// ***************
function items() {
return array;
}
function add(item, index) {
if (!self.isInRange(index)) index = array.length;
array.splice(index, 0, item);
return index;
}
function remove(index) {
if (!self.isInRange(index)) return;
array.splice(index, 1);
}
function at(index) {
return array[index];
}
function count() {
return array.length;
}
function isInRange(index) {
return index > -1 && index < array.length;
}
function loop(newIsLooping) {
if (arguments.length) {
isLooping = !!newIsLooping;
}
return isLooping;
}
function delta(fromIndex, toIndex) {
var difference = toIndex - fromIndex;
if (!isLooping) return difference;
// Is looping on? Then check for the looped difference.
// For example, going from the first item to the last item
// is actually a change of -1.
var loopedDifference = 0;
if (toIndex > fromIndex) {
loopedDifference = toIndex - fromIndex - self.count();
} else {
loopedDifference = self.count() - fromIndex + toIndex;
}
if (Math.abs(loopedDifference) < Math.abs(difference)) {
return loopedDifference;
}
return difference;
}
// Returns whether an index is 'relevant' to some index.
// Will return true if the index is equal to `someIndex`, the index
// previous of that index, or the index next of that index.
function isRelevant(index, someIndex) {
return self.isInRange(index) && (
index === someIndex ||
index === self.previous(someIndex) ||
index === self.next(someIndex)
);
}
// Get the index after the given index.
// Takes looping and the given filterFn into account.
function next(index, filterFn) {
filterFn = filterFn || trueFn;
if (!self.isInRange(index)) return -1;
// Keep adding 1 to index, trying to find an index that passes filterFn.
// If we loop through *everything* and get back to our original index, return -1.
// We don't use recursion here because Javascript sucks at recursion.
var nextIndex = index + 1;
while ( nextIndex !== index ) {
if (nextIndex === array.length) {
if (isLooping) nextIndex -= array.length;
else break;
} else {
if (filterFn(array[nextIndex], nextIndex)) {
return nextIndex;
}
nextIndex++;
}
}
return -1;
}
// Get the index before the given index.
// Takes looping and the given filterFn into account.
function previous(index, filterFn) {
filterFn = filterFn || trueFn;
if (!self.isInRange(index)) return -1;
// Keep subtracting 1 from index, trying to find an index that passes filterFn.
// If we loop through *everything* and get back to our original index, return -1.
// We don't use recursion here because Javascript sucks at recursion.
var prevIndex = index - 1;
while ( prevIndex !== index ) {
if (prevIndex === -1) {
if (isLooping) prevIndex += array.length;
else break;
} else {
if (filterFn(array[prevIndex], prevIndex)) {
return prevIndex;
}
prevIndex--;
}
}
return -1;
}
}
})();