scroll only if needed

This commit is contained in:
Athou
2013-04-07 07:08:59 +02:00
parent 3691dcd98f
commit 3b070307bb
2 changed files with 23 additions and 13 deletions

View File

@@ -11,21 +11,31 @@ app.directive('ngBlur', function() {
}; };
}); });
module.directive('scrollTo', function() { module.directive('scrollTo', function($timeout) {
return { return {
restrict : 'A', restrict : 'A',
controller : function($scope, $element, $attrs) {
},
link : function(scope, element, attrs) { link : function(scope, element, attrs) {
scope.$watch(attrs.scrollTo, function(value) { scope.$watch(attrs.scrollTo, function(value) {
if (value) { if (!value)
var offset = parseInt(attrs.scrollToOffset, 10); return;
var scrollTop = $(element).offset().top + offset; $timeout(function() {
$('html, body').animate({ var docTop = $(window).scrollTop();
scrollTop : scrollTop var docBottom = docTop + $(window).height();
}, 0);
} var elemTop = $(element).offset().top;
var elemBottom = elemTop + $(element).height();
if ((elemTop > docTop) && (elemBottom < docBottom)) {
// element is entirely visible
return;
} else {
var offset = parseInt(attrs.scrollToOffset, 10);
var scrollTop = $(element).offset().top + offset;
$('html, body').animate({
scrollTop : scrollTop
}, 0);
}
});
}); });
} }
}; };

View File

@@ -5,8 +5,8 @@
</div> </div>
<div infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy || !settingsService.settings.readingMode" infinite-scroll-distance="1" id="feed-accordion"> <div infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy || !settingsService.settings.readingMode" infinite-scroll-distance="1" id="feed-accordion">
<div ng-repeat="entry in entries" class="entry"> <div ng-repeat="entry in entries" class="entry" scroll-to="isOpen && current == entry" scroll-to-offset="-58">
<a scroll-to="isOpen && current == entry" scroll-to-offset="-58" href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="entryClicked(entry, $event)" <a href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="entryClicked(entry, $event)"
ng-class="{open: current == entry, closed: current != entry}"> ng-class="{open: current == entry, closed: current != entry}">
<span ui-if="keywords || selectedType == 'category'" class="feed-name">{{entry.feedName}}</span> <span ui-if="keywords || selectedType == 'category'" class="feed-name">{{entry.feedName}}</span>
<span class="entry-date">{{entry.date}}</span> <span class="entry-date">{{entry.date}}</span>