javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Pass list view window virt test

Browse Source
This commit is contained in:
Max Lynch
2013-10-28 16:34:54 -05:00
parent d33a8b8fe1
commit 43c3c4136b
7 changed files with 715 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
dist/css/ionic-ios7.css vendored
View File

@ -182,7 +182,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; }
border: 1px solid silver; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -1727,7 +1727,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #ccc;
border: 1px solid #cccccc;
background-color: white; }
select[multiple],
@ -1799,7 +1799,7 @@ input[type="checkbox"][readonly] {
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, .05s; }
transition-delay: 0s, 0.05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@ -1814,7 +1814,7 @@ input[type="checkbox"][readonly] {
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: .05s, 0s; }
transition-delay: 0.05s, 0s; }
.item-radio {
padding: 0; }
@ -2099,7 +2099,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px #fff; }
text-shadow: 0px 0px 10px white; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@ -2441,9 +2441,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@ -2456,9 +2456,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

22
dist/css/ionic-scoped.css vendored
View File

@ -1027,7 +1027,7 @@
.ionic fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; }
border: 1px solid silver; }
.ionic legend {
padding: 0;
/* 2 */
@ -2385,7 +2385,7 @@
.ionic input[type="file"] {
line-height: 34px; }
.ionic select {
border: 1px solid #ccc;
border: 1px solid #cccccc;
background-color: white; }
.ionic select[multiple],
.ionic select[size] {
@ -2434,7 +2434,7 @@
border-radius: 50%;
background: white;
content: ' ';
transition: background-color .1s ease-in-out; }
transition: background-color 0.1s ease-in-out; }
.ionic .checkbox input:after {
position: absolute;
top: 34%;
@ -2447,7 +2447,7 @@
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity .05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
@ -2799,7 +2799,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px #fff; }
text-shadow: 0px 0px 10px white; }
.ionic .button.block, .ionic .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@ -3051,9 +3051,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ionic .icon-loading:before {
content: "\e144"; }
.ionic .icon-refreshing {
@ -3065,9 +3065,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ionic .icon-refreshing:before {
content: "\e144"; }
.ionic .hidden,

22
dist/css/ionic.css vendored
View File

@ -1261,7 +1261,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; }
border: 1px solid silver; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -2870,7 +2870,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #ccc;
border: 1px solid #cccccc;
background-color: white; }
select[multiple],
@ -2925,7 +2925,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
transition: background-color .1s ease-in-out; }
transition: background-color 0.1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@ -2940,7 +2940,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity .05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@ -3320,7 +3320,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px #fff; }
text-shadow: 0px 0px 10px white; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@ -3767,9 +3767,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@ -3782,9 +3782,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

1230
dist/js/ionic.js vendored
View File

File diff suppressed because it is too large Load Diff

13
js/views/listViewScroll.js
View File

@ -413,27 +413,24 @@
var scrollTop = e.scrollTop;
var highWater = e.scrollTop + this.virtualRemoveThreshold;
var lowWater = Math.min(scrollHeight + viewportHeight, e.scrollTop + viewportHeight + this.virtualAddThreshold);
var highWater = Math.min(0, e.scrollTop + this.virtualRemoveThreshold);
var lowWater = Math.min(scrollHeight - viewportHeight, Math.abs(e.scrollTop) + viewportHeight + this.virtualAddThreshold);
//console.log('LIST VIEW SCROLLED', e, itemHeight, scrollHeight, viewportHeight);
var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
var first = parseInt(highWater / itemHeight);
var last = parseInt(lowWater / itemHeight);
var first = parseInt(Math.abs(highWater / itemHeight));
var last = parseInt(Math.abs(lowWater / itemHeight));
//console.log('FITS', itemsPerViewport, 'per page, starting at', first);
this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
this.renderViewport && this.renderViewport(highWater, lowWater, first, last);
this.renderViewport && this.renderViewport(-highWater, lowWater, first, last);
}
},
didStopScrolling: function(e) {
if(this.isVirtual) {
//console.log('DONE SCROLLING, Need to remove', this._virtualItemsToRemove);
for(var i = 0; i < this._virtualItemsToRemove.length; i++) {
var el = this._virtualItemsToRemove[i];
//el.parentNode.removeChild(el);

49
js/views/scrollView.js
View File

@ -115,26 +115,39 @@
// Start triggering events as the element scrolls from inertia.
// This is important because we need to receive scroll events
// even after a "flick" and adjust, etc.
this._momentumStepTimeout = setTimeout(function eventNotify() {
var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(',');
var scrollLeft = parseFloat(trans[0] || 0);
var scrollTop = parseFloat(trans[1] || 0);
if(time > 0) {
this._momentumStepTimeout = setTimeout(function eventNotify() {
var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(',');
var scrollLeft = parseFloat(trans[0] || 0);
var scrollTop = parseFloat(trans[1] || 0);
_this.didScroll && _this.didScroll({
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
ionic.trigger(_this.scrollEventName, {
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
_this.didScroll && _this.didScroll({
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
ionic.trigger(_this.scrollEventName, {
target: _this.el,
scrollLeft: -scrollLeft,
scrollTop: -scrollTop
});
if(_this._isDragging) {
_this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
}
}, this.inertialEventInterval)
if(_this._isDragging) {
_this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
}
}, this.inertialEventInterval);
} else {
this.didScroll && this.didScroll({
target: this.el,
scrollLeft: -this.x,
scrollTop: -this.y
});
ionic.trigger(this.scrollEventName, {
target: this.el,
scrollLeft: -this.x,
scrollTop: -this.y
});
}
},
needsWrapping: function() {

30
test/js/views/listView.unit.js
View File

@ -15,6 +15,10 @@ describe('List View', function() {
li.style.height = '50px';
l.appendChild(li);
}
document.body.style.height='1000px';
document.body.appendChild(h);
});
it('Should init', function() {
@ -38,13 +42,31 @@ describe('List View', function() {
el: h,
listEl: listEl,
isVirtual: true,
itemHeight: 50
itemHeight: 50,
virtualRemoveThreshold: -200,
virtualAddThreshold: 200
});
expect(list.itemHeight).toEqual(50);
list.renderViewport = function(high, low, start, end) {
};
var spy = spyOn(list, 'renderViewport');
var height = h.scrollHeight;
var itemHeight = list.itemHeight;
var totalItems = height / itemHeight;
var viewportHeight = list.el.parentNode.offsetHeight;
// set up scroll top
var scrollTop = 1000;
var start = (scrollTop + -list.virtualRemoveThreshold) / itemHeight;
var end = (scrollTop + viewportHeight + list.virtualAddThreshold) / itemHeight;
//console.log(height, itemHeight, totalItems, viewportHeight);
list.scrollTo(0, scrollTop);
expect(list.renderViewport).toHaveBeenCalledWith(scrollTop + -list.virtualRemoveThreshold,
scrollTop + viewportHeight + list.virtualAddThreshold, start, end);
});
});