Refactor scrolling into a service

petele · May 15, 2012 · 97ca85d · 97ca85d
1 parent c672cbd
commit 97ca85d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/FinalProject/index.html b/FinalProject/index.html
@@ -69,7 +69,7 @@
       </div>
     </div>
   </header>
-  <section class="mainContent" ng-controller="ItemsController">
+  <section class="mainContent">
 
     <section class="controls no-select">
       <div class="tControls">

diff --git a/FinalProject/js/app.js b/FinalProject/js/app.js
@@ -21,7 +21,7 @@ var wReader = angular.module('wReader', ['wReader.filters', 'wReader.services'])
 
 
 
-function DataController($scope, items, $filter) {
+function DataController($scope, items, scroll) {
 
   $scope.items = items;
 
@@ -46,39 +46,17 @@ function DataController($scope, items, $filter) {
   };
 
   $scope.handleSpace = function() {
-    var itemHeight = $('.entry.active').height() + 60;
-    var winHeight = $(window).height();
-    var curScroll = $('.entries').scrollTop();
-    var scroll = curScroll + winHeight;
-    if (scroll < itemHeight) {
-      $('.entries').scrollTop(scroll);
-    } else {
+    if (!scroll.pageDown()) {
       items.next();
     }
   };
-}
-
-DataController.$inject = ['$scope', 'items', '$filter']; // For JS compilers.
 
-
-function ItemsController($scope) { //{, $location) {
-  // A special observer that will watch for when the 'selectedItem' is updated
-  // and ensure that we scroll into a view so that the selected item is visible
-  // in the summary list view.
   $scope.$watch('items.selectedIdx', function(newVal, oldVal, scope) {
-    // TODO: Performing scrolling like this doesn't seem very Angular-ly.
-    // Need the setTimeout to prevent race condition with item being selected.
-    if (newVal != null) {
-      window.setTimeout(function() {
-        var curScrollPos = $('.summaries').scrollTop();
-        var itemTop = $('.summary.active').offset().top - 60;
-        $('.summaries').animate({'scrollTop': curScrollPos + itemTop}, 200);
-      }, 0);
-    }
+    if (newVal !== null) scroll.toCurrent();
   });
 }
 
-ItemsController.$inject = ['$scope'];//, '$location'];  // For JS compilers.
+DataController.$inject = ['$scope', 'items', 'scroll']; // For JS compilers.
 
 
 // Top Menu/Nav Bar

diff --git a/FinalProject/js/services.js b/FinalProject/js/services.js
@@ -247,3 +247,30 @@ services.factory('items', ['$http', 'store', 'filterFilter', function($http, sto
 	items.getItemsFromDataStore();
 	return items;
 }]);
+
+
+services.value('scroll', {
+	pageDown: function() {
+		var itemHeight = $('.entry.active').height() + 60;
+	  var winHeight = $(window).height();
+	  var curScroll = $('.entries').scrollTop();
+	  var scroll = curScroll + winHeight;
+
+	  if (scroll < itemHeight) {
+	  	$('.entries').scrollTop(scroll);
+	  	return true;
+	  }
+
+	  // already at the bottom
+	  return false;
+	},
+
+	toCurrent: function() {
+		// Need the setTimeout to prevent race condition with item being selected.
+		window.setTimeout(function() {
+      var curScrollPos = $('.summaries').scrollTop();
+      var itemTop = $('.summary.active').offset().top - 60;
+      $('.summaries').animate({'scrollTop': curScrollPos + itemTop}, 200);
+    }, 0);
+	}
+});