javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(collectionRepeat): automatically set width/height style to match collection-item-{width,height}

Browse Source 
Closes #3034. Closes #1806.
This commit is contained in:
Andrew
2015-02-06 14:46:38 -07:00
parent 0145dc372d
commit 34e350b0b7
4 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
js/angular/service/collectionRepeatDataSource.js vendored
View File

@@ -61,7 +61,6 @@ function($cacheFactory, $parse, $rootScope) {
item.scope = this.scope.$new();
this.transcludeFn(item.scope, function(clone) {
clone.css('position', 'absolute');
item.element = clone;
});
this.transcludeParent.append(item.element);

14
js/angular/service/collectionRepeatManager.js vendored
View File

@@ -310,15 +310,25 @@ function($rootScope, $timeout) {
renderItem: function(dataIndex, primaryPos, secondaryPos) {
// Attach an item, and set its transform position to the required value
var item = this.dataSource.attachItemAtIndex(dataIndex);
var itemDimensions = this.dimensions[dataIndex];
//console.log(dataIndex, item);
if (item && item.element) {
if (item.primaryPos !== primaryPos || item.secondaryPos !== secondaryPos) {
item.element.css(ionic.CSS.TRANSFORM, this.transformString(
item.element[0].style[ionic.CSS.TRANSFORM] = this.transformString(
primaryPos, secondaryPos
));
);
item.primaryPos = primaryPos;
item.secondaryPos = secondaryPos;
}
var width = this.isVertical ? itemDimensions.secondarySize : itemDimensions.primarySize;
var height = this.isVertical ? itemDimensions.primarySize : itemDimensions.secondarySize;
if (item.cssWidth !== width) {
item.element[0].style.width = (item.cssWidth = width) + 'px';
}
if (item.cssHeight !== height) {
item.element[0].style.height = (item.cssHeight = height) + 'px';
}
// Save the item in rendered items
this.renderedItems[dataIndex] = item;
} else {

6
scss/_util.scss
View File

@@ -248,3 +248,9 @@
.dark-border {
border-color: $button-dark-border;
}
[collection-repeat] {
/* Position is set by transforms */
left: 0 !important;
position: absolute !important;
}

4
test/html/list-fit.html
View File

@@ -31,9 +31,7 @@
ng-click="alert(item)"
collection-repeat="item in items"
collection-item-height="85"
collection-item-width="'100%'"
ng-style="{height: '85px'}"
style="left: 0; right: 0;">
collection-item-width="'25%'">
<h2>{{item.text}}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor diam urna, vitae consectetur lectus aliquet quis.</p>
<ion-option-button>DEL</ion-option-button>