Skip to content

Commit

Permalink
infinite scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-pollan
alex-pollan committed Nov 10, 2014
1 parent af7a1ab commit 4756aa2
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 125 deletions.
155 changes: 94 additions & 61 deletions app/animations.css
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,150 @@
.view-container {
position: relative;
position: relative;
}

.view-frame.ng-enter, .view-frame.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
.view-frame.ng-enter,
.view-frame.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
}

.view-frame.ng-enter {
-webkit-animation: 0.5s fade-in;
-moz-animation: 0.5s fade-in;
-o-animation: 0.5s fade-in;
animation: 0.5s fade-in;
z-index: 100;
-webkit-animation: 0.5s fade-in;
-moz-animation: 0.5s fade-in;
-o-animation: 0.5s fade-in;
animation: 0.5s fade-in;
z-index: 100;
}

.view-frame.ng-leave {
-webkit-animation: 0.5s fade-out;
-moz-animation: 0.5s fade-out;
-o-animation: 0.5s fade-out;
animation: 0.5s fade-out;
z-index:99;
-webkit-animation: 0.5s fade-out;
-moz-animation: 0.5s fade-out;
-o-animation: 0.5s fade-out;
animation: 0.5s fade-out;
z-index: 99;
}

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}

/* don't forget about the vendor-prefixes! */


/*
We're using CSS transitions for when
the enter and move events are triggered
for the element that has the .repeated-item
class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
}

.repeated-item.ng-enter,
.repeated-item.ng-move {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 0;
}
/*
The ng-enter-active and ng-move-active
are where the transition destination properties
are set so that the animation knows what to
animate.
*/

.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
opacity:1;
opacity: 1;
}

/*
We're using CSS keyframe animations for when
the leave event is triggered for the element
that has the .repeated-item class
*/

.repeated-item.ng-leave {
-webkit-animation:0.5s my_animation;
-moz-animation:0.5s my_animation;
-o-animation:0.5s my_animation;
animation:0.5s my_animation;
-webkit-animation: 0.5s my_animation;
-moz-animation: 0.5s my_animation;
-o-animation: 0.5s my_animation;
animation: 0.5s my_animation;
}

@keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}

/*
Unfortunately each browser vendor requires
its own definition of keyframe animation code...
*/

@-webkit-keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@-moz-keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@-o-keyframes my_animation {
from { opacity:1; }
to { opacity:0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
90 changes: 61 additions & 29 deletions app/directives/directives.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,64 @@
angular.module('myApp')
.directive("mvLoadOnScroll", ['$window', '$timeout', function ($window, $timeout) {
"use strict";

return {
restrict: 'ACE',
link: function (scope, element, attr) {
var top = angular.element($window)[0].screenTop,
origHeight = angular.element($window)[0].screen.height,
height = (origHeight * 0.7);

// bind the digest cycle to be triggered by the scroll event
// when it exceeds a threshold
angular.element($window).bind('scroll', function () {
if (angular.element($window)[0].pageYOffset >= (height)) {

// show the spinner when triggered
//scope.spinner.hide = !scope.spinner.hide;

angular.element($window)[0].requestAnimationFrame(function () {
// invoke the function passed into the 'whenScrolled' attribute
scope.$apply(attr.mvLoadOnScroll);

// increment the threshold
height += (origHeight * 1.5);
.directive("infiniteScroll", [
'$rootScope', '$window', '$timeout',
function ($rootScope, $window, $timeout) {
"use strict";
return {
link: function (scope, elem, attrs) {
var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
$window = angular.element($window);
scrollDistance = 0;
if (attrs.infiniteScrollDistance !== null) {
scope.$watch(attrs.infiniteScrollDistance, function (value) {
scrollDistance = parseInt(value, 10);
return scrollDistance;
});
}
});
}

};
}]);
scrollEnabled = true;
checkWhenEnabled = false;
if (attrs.infiniteScrollDisabled !== null) {
scope.$watch(attrs.infiniteScrollDisabled, function (value) {
scrollEnabled = !value;
if (scrollEnabled && checkWhenEnabled) {
checkWhenEnabled = false;
return handler();
}
});
}
handler = function () {
var elementBottom, remaining, shouldScroll, windowBottom,
win = $($window),
el = $(elem);

windowBottom = win.height() + win.scrollTop();
elementBottom = el.offset().top + el.height();
remaining = elementBottom - windowBottom;
shouldScroll = remaining <= win.height() * scrollDistance;
if (shouldScroll && scrollEnabled) {
if ($rootScope.$$phase) {
return scope.$eval(attrs.infiniteScroll);
} else {
return scope.$apply(attrs.infiniteScroll);
}
} else if (shouldScroll) {
checkWhenEnabled = true;
return checkWhenEnabled;
}
};
$window.on('scroll', handler);
scope.$on('$destroy', function () {
return $window.off('scroll', handler);
});
return $timeout((function () {
if (attrs.infiniteScrollImmediateCheck) {
if (scope.$eval(attrs.infiniteScrollImmediateCheck)) {
return handler();
}
} else {
return handler();
}
}), 0);
}
};
}
]);
10 changes: 5 additions & 5 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,16 @@
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="services/movieService.js"></script>
<script src="app.js"></script>
<script src="directives/directives.js"></script>
<script src="viewPopular/view1.js"></script>
<script src="viewDetails/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="services/movieService.js"></script>
<script src="app.js"></script>
<script src="directives/directives.js"></script>
<script src="viewPopular/view1.js"></script>
<script src="viewDetails/view2.js"></script>


</body>
Expand Down
1 change: 1 addition & 0 deletions app/viewDetails/view2.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<p>Movie details</p>
<p><a href='#/popular'>Back</a></p>
<p>
{{movie.id}}
</p>
Expand Down
2 changes: 1 addition & 1 deletion app/viewPopular/view1.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<h2>Popular movies</h2>
<ul class="list-movies" mv-Load-On-Scroll="loadMoreData()">
<ul class="list-movies" infinite-scroll="loadMoreData()" infinite-scroll-distance="0">
<li ng-repeat="movie in movies" class="repeated-item">
<a href="#/details/{{movie.id}}">
<img ng-src="{{movie.poster_path}}" />
Expand Down
5 changes: 4 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@
"angular-resource": "~1.3.0",
"angular-loader": "~1.3.0",
"angular-mocks": "~1.3.0",
"angular-animate": "~1.3.0",
"angular-animate": "~1.3.0",
"html5-boilerplate": "~4.3.0",
"jquery": "~2.1.1",
"bootstrap": "~3.1.1"
},
"resolutions": {
"angular": "1.3.2"
}
}
28 changes: 0 additions & 28 deletions npm-debug.log
View file

This file was deleted.

0 comments on commit 4756aa2

Please sign in to comment.