mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
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() ); ```
157 lines
4.8 KiB
JavaScript
157 lines
4.8 KiB
JavaScript
IonicModule
|
|
.factory('$collectionDataSource', [
|
|
'$cacheFactory',
|
|
'$parse',
|
|
'$rootScope',
|
|
function($cacheFactory, $parse, $rootScope) {
|
|
function hideWithTransform(element) {
|
|
element.css(ionic.CSS.TRANSFORM, 'translate3d(-2000px,-2000px,0)');
|
|
}
|
|
|
|
function CollectionRepeatDataSource(options) {
|
|
var self = this;
|
|
this.scope = options.scope;
|
|
this.transcludeFn = options.transcludeFn;
|
|
this.transcludeParent = options.transcludeParent;
|
|
this.element = options.element;
|
|
|
|
this.keyExpr = options.keyExpr;
|
|
this.listExpr = options.listExpr;
|
|
this.trackByExpr = options.trackByExpr;
|
|
|
|
this.heightGetter = options.heightGetter;
|
|
this.widthGetter = options.widthGetter;
|
|
|
|
this.dimensions = [];
|
|
this.data = [];
|
|
|
|
this.attachedItems = {};
|
|
this.BACKUP_ITEMS_LENGTH = 20;
|
|
this.backupItemsArray = [];
|
|
}
|
|
CollectionRepeatDataSource.prototype = {
|
|
setup: function() {
|
|
if (this.isSetup) return;
|
|
this.isSetup = true;
|
|
for (var i = 0; i < this.BACKUP_ITEMS_LENGTH; i++) {
|
|
this.detachItem(this.createItem());
|
|
}
|
|
},
|
|
destroy: function() {
|
|
this.dimensions.length = 0;
|
|
this.data = null;
|
|
this.backupItemsArray.length = 0;
|
|
this.attachedItems = {};
|
|
},
|
|
calculateDataDimensions: function() {
|
|
var locals = {};
|
|
this.dimensions = this.data.map(function(value, index) {
|
|
locals[this.keyExpr] = value;
|
|
locals.$index = index;
|
|
return {
|
|
width: this.widthGetter(this.scope, locals),
|
|
height: this.heightGetter(this.scope, locals)
|
|
};
|
|
}, this);
|
|
this.dimensions = this.beforeSiblings.concat(this.dimensions).concat(this.afterSiblings);
|
|
this.dataStartIndex = this.beforeSiblings.length;
|
|
},
|
|
createItem: function() {
|
|
var item = {};
|
|
|
|
item.scope = this.scope.$new();
|
|
this.transcludeFn(item.scope, function(clone) {
|
|
clone.css('position', 'absolute');
|
|
item.element = clone;
|
|
});
|
|
this.transcludeParent.append(item.element);
|
|
|
|
return item;
|
|
},
|
|
getItem: function(index) {
|
|
var item;
|
|
if ( (item = this.attachedItems[index]) ) {
|
|
//do nothing, the item is good
|
|
} else if ( (item = this.backupItemsArray.pop()) ) {
|
|
ionic.Utils.reconnectScope(item.scope);
|
|
} else {
|
|
item = this.createItem();
|
|
}
|
|
return item;
|
|
},
|
|
attachItemAtIndex: function(index) {
|
|
if (index < this.dataStartIndex) {
|
|
return this.beforeSiblings[index];
|
|
}
|
|
// Subtract so we start at the beginning of this.data, after
|
|
// this.beforeSiblings.
|
|
index -= this.dataStartIndex;
|
|
|
|
if (index > this.data.length - 1) {
|
|
return this.afterSiblings[index - this.dataStartIndex];
|
|
}
|
|
|
|
var item = this.getItem(index);
|
|
var value = this.data[index];
|
|
|
|
if (item.index !== index || item.scope[this.keyExpr] !== value) {
|
|
item.index = item.scope.$index = index;
|
|
item.scope[this.keyExpr] = value;
|
|
item.scope.$first = (index === 0);
|
|
item.scope.$last = (index === (this.getLength() - 1));
|
|
item.scope.$middle = !(item.scope.$first || item.scope.$last);
|
|
item.scope.$odd = !(item.scope.$even = (index&1) === 0);
|
|
|
|
//We changed the scope, so digest if needed
|
|
if (!$rootScope.$$phase) {
|
|
item.scope.$digest();
|
|
}
|
|
}
|
|
this.attachedItems[index] = item;
|
|
|
|
return item;
|
|
},
|
|
destroyItem: function(item) {
|
|
item.element.remove();
|
|
item.scope.$destroy();
|
|
item.scope = null;
|
|
item.element = null;
|
|
},
|
|
detachItem: function(item) {
|
|
delete this.attachedItems[item.index];
|
|
|
|
//If it's an outside item, only hide it. These items aren't part of collection
|
|
//repeat's list, only sit outside
|
|
if (item.isOutside) {
|
|
hideWithTransform(item.element);
|
|
// If we are at the limit of backup items, just get rid of the this element
|
|
} else if (this.backupItemsArray.length >= this.BACKUP_ITEMS_LENGTH) {
|
|
this.destroyItem(item);
|
|
// Otherwise, add it to our backup items
|
|
} else {
|
|
this.backupItemsArray.push(item);
|
|
hideWithTransform(item.element);
|
|
//Don't .$destroy(), just stop watchers and events firing
|
|
ionic.Utils.disconnectScope(item.scope);
|
|
}
|
|
|
|
},
|
|
getLength: function() {
|
|
return this.dimensions && this.dimensions.length || 0;
|
|
},
|
|
setData: function(value, beforeSiblings, afterSiblings) {
|
|
this.data = value || [];
|
|
this.beforeSiblings = beforeSiblings || [];
|
|
this.afterSiblings = afterSiblings || [];
|
|
this.calculateDataDimensions();
|
|
|
|
this.afterSiblings.forEach(function(item) {
|
|
item.element.css({position: 'absolute', top: '0', left: '0' });
|
|
hideWithTransform(item.element);
|
|
});
|
|
},
|
|
};
|
|
|
|
return CollectionRepeatDataSource;
|
|
}]);
|