Skip to content

Commit dad5940

Browse files
dhiltdhilt
committed
refactored adjustments during elements append/prepend
1 parent a236a30 commit dad5940

File tree

4 files changed

+102
-108
lines changed

4 files changed

+102
-108
lines changed

‎demo/differentItemHeights/differentItemHeights.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Scroller Demo (scroll bubbles up only after eof/bof) </title>
5+
<title>Different Item Heights</title>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
77
<script src="../../src/ui-scroll.js"></script>
88
<script src="../../src/ui-scroll-jqlite.js"></script>
@@ -15,10 +15,11 @@
1515

1616
<a class="back" href="../index.html">browse other examples</a>
1717

18-
<h1 class="page-header page-header-exapmle">Scroll bubbles up only after eof/bof</h1>
18+
<h1 class="page-header page-header-exapmle">Different Item Heights</h1>
1919

2020
<div class="viewport-wrap">
21-
<div class="viewport " ui-scroll-viewport>
21+
<div class="viewport " ui-scroll-viewport style="width: 350px; height2: 300px;">
22+
<div id="dhilt" style="height:0px; overflow: hidden">trololo</div>
2223
<div class="item" ui-scroll="item in datasource" style="height: {{item.height}}px">{{item.text}}</div>
2324
</div>
2425
</div>

‎dist/ui-scroll.js‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* angular-ui-scroll
33
* https://github.com/angular-ui/ui-scroll.git
4-
* Version: 1.5.0 -- 2016-06-19T00:30:40.294Z
4+
* Version: 1.5.0 -- 2016-06-27T00:06:28.439Z
55
* License: MIT
66
*/
77

@@ -386,20 +386,16 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
386386
topPadding.height(topPaddingHeight + topPaddingHeightAdd);
387387
bottomPadding.height(bottomPaddingHeight + bottomPaddingHeightAdd);
388388
},
389-
adjustPaddingUnbound: function adjustPaddingUnbound(updates) {
390-
if (updates.prepended && updates.prepended.length) topPadding.height(topPadding.height() + updates.estimatedPaddingIncrement);else viewport.adjustPadding();
391-
},
392-
adjustPaddingBound: function adjustPaddingBound(updates) {
393-
if (updates.prepended && updates.prepended.length) topPadding.height(topPadding.height() - updates.estimatedPaddingIncrement);
394-
},
395389
adjustScrollTopAfterMinIndexSet: function adjustScrollTopAfterMinIndexSet(topPaddingHeightOld) {
396390
// additional scrollTop adjustment in case of datasource.minIndex external set
397391
if (buffer.minIndexUser !== null && buffer.minIndex > buffer.minIndexUser) {
398392
var diff = topPadding.height() - topPaddingHeightOld;
399393
viewport.scrollTop(viewport.scrollTop() + diff);
400394
}
401395
},
402-
adjustScrollTopAfterPrepend: function adjustScrollTopAfterPrepend(height) {
396+
adjustScrollTopAfterPrepend: function adjustScrollTopAfterPrepend(updates) {
397+
if (!updates.prepended.length) return;
398+
var height = buffer.effectiveHeight(updates.prepended);
403399
var paddingHeight = topPadding.height() - height;
404400
if (paddingHeight >= 0) {
405401
topPadding.height(paddingHeight);
@@ -432,7 +428,7 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
432428
var topVisibleScopeInjector = createValueInjector('topVisibleScope');
433429
var isLoadingInjector = createValueInjector('isLoading');
434430

435-
// Adapter API definition
431+
// Adapter API definition
436432

437433
Object.defineProperty(this, 'disabled', {
438434
get: function get() {
@@ -720,14 +716,13 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
720716
}
721717

722718
function insertWrapperContent(wrapper, insertAfter) {
723-
724719
createElement(wrapper, insertAfter, viewport.insertElement);
725-
726-
if (isElementVisible(wrapper)) return true;
727-
wrapper.unregisterVisibilityWatcher = wrapper.scope.$watch(function () {
728-
return visibilityWatcher(wrapper);
729-
});
730-
return false;
720+
if (!isElementVisible(wrapper)) {
721+
wrapper.unregisterVisibilityWatcher = wrapper.scope.$watch(function () {
722+
return visibilityWatcher(wrapper);
723+
});
724+
}
725+
wrapper.element.addClass('ng-hide'); // hide inserted elements before data binding
731726
}
732727

733728
function createElement(wrapper, insertAfter, insertElement) {
@@ -783,12 +778,7 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
783778
return item.scope.$index = buffer.first + i;
784779
});
785780

786-
var estimatedPaddingIncrement = buffer.effectiveHeight(toBePrepended);
787-
788-
viewport.adjustScrollTopAfterPrepend(estimatedPaddingIncrement);
789-
790781
return {
791-
estimatedPaddingIncrement: estimatedPaddingIncrement,
792782
prepended: toBePrepended,
793783
removed: toBeRemoved,
794784
inserted: inserted,
@@ -797,11 +787,6 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
797787
}
798788

799789
function updatePaddings(rid, updates) {
800-
801-
var adjustedPaddingHeight = buffer.effectiveHeight(updates.prepended) - updates.estimatedPaddingIncrement;
802-
803-
viewport.adjustScrollTopAfterPrepend(adjustedPaddingHeight);
804-
805790
// schedule another adjustBuffer after animation completion
806791
if (updates.animated.length) {
807792
$q.all(updates.animated).then(function () {
@@ -811,24 +796,26 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
811796
} else {
812797
viewport.adjustPadding();
813798
}
814-
815-
// return true if inserted elements have height > 0
816-
return adjustedPaddingHeight + updates.estimatedPaddingIncrement > 0 || buffer.effectiveHeight(updates.inserted) > 0;
817799
}
818800

819-
function enqueueFetch(rid, keepFetching) {
820-
if (viewport.shouldLoadBottom() && keepFetching) {
821-
// keepFetching = true means that at least one item app/prepended in the last batch had height > 0
822-
if (pending.push(true) === 1) {
823-
fetch(rid);
824-
adapter.loading(true);
801+
function enqueueFetch(rid, updates) {
802+
if (viewport.shouldLoadBottom()) {
803+
if (!updates || buffer.effectiveHeight(updates.inserted) > 0) {
804+
// this means that at least one item appended in the last batch has height > 0
805+
if (pending.push(true) === 1) {
806+
fetch(rid);
807+
adapter.loading(true);
808+
}
825809
}
826-
} else if (viewport.shouldLoadTop() && (keepFetching || pending[0])) {
827-
// pending[0] = true means that previous fetch was appending. We need to force at least one prepend
828-
// BTW there will always be at least 1 element in the pending array because bottom is fetched first
829-
if (pending.push(false) === 1) {
830-
fetch(rid);
831-
adapter.loading(true);
810+
} else if (viewport.shouldLoadTop()) {
811+
if (!updates || buffer.effectiveHeight(updates.prepended) > 0 || pending[0]) {
812+
// this means that at least one item appended in the last batch has height > 0
813+
// pending[0] = true means that previous fetch was appending. We need to force at least one prepend
814+
// BTW there will always be at least 1 element in the pending array because bottom is fetched first
815+
if (pending.push(false) === 1) {
816+
fetch(rid);
817+
adapter.loading(true);
818+
}
832819
}
833820
}
834821
}
@@ -844,12 +831,21 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
844831

845832
// We need the item bindings to be processed before we can do adjustment
846833
$timeout(function () {
834+
835+
// show elements after data binging has been done
836+
updates.inserted.forEach(function (w) {
837+
return w.element.removeClass('ng-hide');
838+
});
839+
updates.prepended.forEach(function (w) {
840+
return w.element.removeClass('ng-hide');
841+
});
842+
847843
if (isInvalid(rid)) {
848844
return;
849845
}
850846

851847
updatePaddings(rid, updates);
852-
enqueueFetch(rid, true);
848+
enqueueFetch(rid);
853849

854850
if (!pending.length) {
855851
adapter.calculateProperties();
@@ -860,18 +856,25 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
860856
function adjustBufferAfterFetch(rid) {
861857
var updates = updateDOM();
862858

863-
viewport.adjustPaddingUnbound(updates);
864-
865859
// We need the item bindings to be processed before we can do adjustment
866860
$timeout(function () {
867861

868-
viewport.adjustPaddingBound(updates);
862+
// show elements after data binging has been done
863+
updates.inserted.forEach(function (w) {
864+
return w.element.removeClass('ng-hide');
865+
});
866+
updates.prepended.forEach(function (w) {
867+
return w.element.removeClass('ng-hide');
868+
});
869+
870+
viewport.adjustScrollTopAfterPrepend(updates);
869871

870872
if (isInvalid(rid)) {
871873
return;
872874
}
873875

874-
enqueueFetch(rid, updatePaddings(rid, updates));
876+
updatePaddings(rid, updates);
877+
enqueueFetch(rid, updates);
875878
pending.shift();
876879

877880
if (pending.length) fetch(rid);else {
@@ -936,7 +939,7 @@ angular.module('ui.scroll', []).directive('uiScrollViewport', function () {
936939
function resizeAndScrollHandler() {
937940
if (!$rootScope.$$phase && !adapter.isLoading && !adapter.disabled) {
938941

939-
enqueueFetch(ridActual, true);
942+
enqueueFetch(ridActual);
940943

941944
if (pending.length) {
942945
unbindEvents();

0 commit comments

Comments
 (0)