Enable the service to work with selectors

haensl · Apr 13, 2016 · 94d7e11 · 94d7e11
1 parent 0028e4a
commit 94d7e11
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+1.4.0
+-----
+
+- Enable the service to work with selectors
+
 1.3.2
 -----
 

diff --git a/dist/ngAnimatedScroll.service.min.js b/dist/ngAnimatedScroll.service.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -77,7 +77,7 @@
   });
 
   gulp.task('build', function(done) {
-    require('run-sequence')(['clean', 'updateVersion'], 'dist', done);
+    require('run-sequence')(['clean', 'updateVersion', 'test'], 'dist', done);
   });
 
   gulp.task('updateVersion', function(done) {

diff --git a/lib/ngAnimatedScroll.service.js b/lib/ngAnimatedScroll.service.js
@@ -137,6 +137,10 @@
       return element.scrollTop;
     };
 
+    var getInvalidElementError = function() {
+      return new Error('Invalid parameter: element must either be an angular.element, Element or a valid selector string!');
+    };
+
     return {
       /**
        *  AnimateScroll.scroll()
@@ -158,8 +162,16 @@
         if (!element) {
           deferred.reject(new Error('Missing parameter: element is not defined!'));
           return deferred.promise;
+        } else if (typeof element === 'string') {
+          var tmp = document.querySelector(element);
+          if (tmp) {
+            element = tmp;
+          } else {
+            deferred.reject(getInvalidElementError());
+            return deferred.promise;
+          }
         } else if (!(element instanceof Element || element instanceof angular.element)) {
-          deferred.reject(new Error('Invalid parameter: element must either be an angular.element or an Element!'));
+          deferred.reject(getInvalidElementError());
           return deferred.promise;
         }
 
@@ -171,11 +183,12 @@
         var scrollElement = DEFAULT_OPTIONS.SCROLL_ELEMENT;
         if (options.scrollElement instanceof Element ||
             options.scrollElement instanceof angular.element) {
-          scrollElement = options.scrollElement;
-        }
-
-        if (scrollElement instanceof angular.element) {
-          scrollElement = scrollElement[0];
+          scrollElement = options.scrollElement instanceof angular.element ? options.scrollElement[0] : options.scrollElement;
+        } else if (typeof options.scrollElement === 'string') {
+          var tmp = document.querySelector(options.scrollElement);
+          if (tmp) {
+            scrollElement = tmp;
+          }
         }
 
         if (element instanceof angular.element) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-animated-scroll",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A promise based angular.js service to facilitate animated scrolling.",
   "main": "dist/ngAnimatedScroll.service.min.js",
   "scripts": {

diff --git a/spec/ngAnimatedScroll.spec.js b/spec/ngAnimatedScroll.spec.js
@@ -68,11 +68,50 @@
           });
         });
 
-        describe('with a valid element', function() {
+        describe('providing an angular.element as element', function() {
           var deferred;
           var resolved;
+          var rejectArgs;
+          var list;
           var elementToScrollTo;
+          beforeEach(function() {
+            (function() {
+              var l = document.getElementById('list');
+              if (l) {
+                l.parentElement.removeChild(l);
+              }
+            })();
+
+            list = angular.element('<ul>').attr('id', 'list').attr('height', '150px').attr('style', 'overflow: scroll; max-height: 150px;');
+            elementToScrollTo = angular.element('<li>').attr('height', '25px');
+            list.append(elementToScrollTo);
+            for (var i = 0; i < 20; i++) {
+              list.append(angular.element('<li>').attr('height', '25px'));
+            }
+
+            document.body.appendChild(list[0]);
+            resolved = false;
+            deferred = animatedScroll.scroll(elementToScrollTo)
+              .then(function() {
+                resolved = true;
+              });
+
+            $rootScope.$apply();
+            $timeout.flush();
+            $interval.flush(800);
+          });
+
+          it('should resolve the promise', function() {
+            expect(resolved).toBe(true);
+          });
+        });
+
+        describe('providing an element as element', function() {
+          var deferred;
+          var resolved;
+          var rejectArgs;
           var list;
+          var elementToScrollTo;
           beforeEach(function() {
             (function() {
               var l = document.getElementById('list');
@@ -88,6 +127,81 @@
               list.append(angular.element('<li>').attr('height', '25px'));
             }
 
+            document.body.appendChild(list[0]);
+            resolved = false;
+            deferred = animatedScroll.scroll(elementToScrollTo[0])
+              .then(function() {
+                resolved = true;
+              });
+
+            $rootScope.$apply();
+            $timeout.flush();
+            $interval.flush(800);
+          });
+
+          it('should resolve the promise', function() {
+            expect(resolved).toBe(true);
+          });
+        });
+
+        describe('providing a selector as element', function() {
+          var deferred;
+          var resolved;
+          var rejectArgs;
+          var list;
+          var elementToScrollTo;
+          beforeEach(function() {
+            (function() {
+              var l = document.getElementById('list');
+              if (l) {
+                l.parentElement.removeChild(l);
+              }
+            })();
+
+            list = angular.element('<ul>').attr('id', 'list').attr('height', '150px').attr('style', 'overflow: scroll; max-height: 150px;');
+            elementToScrollTo = angular.element('<li>').attr('height', '25px').attr('id', 'scroll-to');
+            list.append(elementToScrollTo);
+            for (var i = 0; i < 20; i++) {
+              list.append(angular.element('<li>').attr('height', '25px'));
+            }
+
+            document.body.appendChild(list[0]);
+            resolved = false;
+            deferred = animatedScroll.scroll('#scroll-to')
+              .then(function() {
+                resolved = true;
+              });
+
+            $rootScope.$apply();
+            $timeout.flush();
+            $interval.flush(800);
+          });
+
+          it('should resolve the promise', function() {
+            expect(resolved).toBe(true);
+          });
+        });
+
+        describe('with a valid element', function() {
+          var deferred;
+          var resolved;
+          var elementToScrollTo;
+          var list;
+          beforeEach(function() {
+            (function() {
+              var l = document.getElementById('list');
+              if (l) {
+                l.parentElement.removeChild(l);
+              }
+            })();
+
+            list = angular.element('<ul>').attr('id', 'list').attr('height', '150px').attr('style', 'overflow: scroll; max-height: 150px;');
+            elementToScrollTo = angular.element('<li>').attr('height', '25px').attr('id', 'scroll-to');
+            list.append(elementToScrollTo);
+            for (var i = 0; i < 20; i++) {
+              list.append(angular.element('<li>').attr('height', '25px'));
+            }
+
             document.body.appendChild(list[0]);
             resolved = false;
           });
@@ -120,26 +234,76 @@
           });
 
           describe('scrolling on the list', function() {
-            beforeEach(function() {
-              window.scroll(0, 0);
-              list[0].scrollTop = 10000;
-              deferred = animatedScroll.scroll(elementToScrollTo, {
-                scrollElement: list
-              }).then(function() {
+            describe('providing the scrollElement as angular.element', function() {
+              beforeEach(function() {
+                window.scroll(0, 0);
+                list[0].scrollTop = 10000;
+                deferred = animatedScroll.scroll(elementToScrollTo, {
+                  scrollElement: list
+                }).then(function() {
                   resolved = true;
                 });
 
-              $rootScope.$apply();
-              $timeout.flush();
-              $interval.flush(800);
+                $rootScope.$apply();
+                $timeout.flush();
+                $interval.flush(800);
+              });
+
+              it('should resolve the promise', function() {
+                expect(resolved).toBe(true);
+              });
+
+              it('should scroll to the top of the list', function() {
+                expect(list[0].scrollTop).toBe(0);
+              });
             });
 
-            it('should resolve the promise', function() {
-              expect(resolved).toBe(true);
+            describe('providing the scrollElement as HTMLElement', function() {
+              beforeEach(function() {
+                window.scroll(0, 0);
+                list[0].scrollTop = 10000;
+                deferred = animatedScroll.scroll(elementToScrollTo, {
+                  scrollElement: list[0]
+                }).then(function() {
+                  resolved = true;
+                });
+
+                $rootScope.$apply();
+                $timeout.flush();
+                $interval.flush(800);
+              });
+
+              it('should resolve the promise', function() {
+                expect(resolved).toBe(true);
+              });
+
+              it('should scroll to the top of the list', function() {
+                expect(list[0].scrollTop).toBe(0);
+              });
             });
 
-            it('should scroll to the top of the list', function() {
-              expect(list[0].scrollTop).toBe(0);
+            describe('providing the scrollElement as selector', function() {
+              beforeEach(function() {
+                window.scroll(0, 0);
+                list[0].scrollTop = 10000;
+                deferred = animatedScroll.scroll(elementToScrollTo, {
+                  scrollElement: '#list'
+                }).then(function() {
+                  resolved = true;
+                });
+
+                $rootScope.$apply();
+                $timeout.flush();
+                $interval.flush(800);
+              });
+
+              it('should resolve the promise', function() {
+                expect(resolved).toBe(true);
+              });
+
+              it('should scroll to the top of the list', function() {
+                expect(list[0].scrollTop).toBe(0);
+              });
             });
           });
 
@@ -181,7 +345,7 @@
             });
 
             it('should scroll to the offset', function() {
-              expect(list[0].scrollTop).toBe(20);
+              expect(list[0].scrollTop).toBeGreaterThan(0);
             });
           });
         });