Merge pull request #9070 from Owlbertz/magellan-no-target-fix

Fixed Magellan issue when target does not exist.
foundation · Sep 27, 2016 · 3e9204b · 3e9204b
2 parents 84df11f + 3cd1b0d
commit 3e9204b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js
@@ -103,6 +103,8 @@ class Magellan {
    * @function
    */
   scrollToLoc(loc) {
+    // Do nothing if target does not exist to prevent errors
+    if (!$(loc).length) {return false;}
     var scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset);
 
     $('html, body').stop(true).animate({ scrollTop: scrollPos }, this.options.animationDuration, this.options.animationEasing);

diff --git a/test/javascript/components/magellan.js b/test/javascript/components/magellan.js
@@ -1,6 +1,31 @@
 describe('Magellan', function() {
 	var plugin;
-	var $html;
+	var $html, $content; 	
+
+  var generateUl = function(count) {
+  	var html = '';
+  	html += '<ul class="vertical-menu">';
+  	for (var c = 0; c < count; c++) {
+  		html += '<li><a href="#target-' + c + '">Section ' + c + '</a></li>';
+  	}
+  	html += '</ul>';
+  	return html;
+  };
+  var generateContent = function(count) {
+  	var html = '';
+  	html += '<div>';
+  	for (var c = 0; c < count; c++) {
+  		html += '<div id="target-' + c + '" style="height: 1000px";>Section ' + c + '</div>';
+  	}
+  	html += '</div>';
+  	return html;
+  };
+
+  afterEach(function() {
+    plugin.destroy();
+    $html.remove();
+    $content.remove();
+  });
 
 	// afterEach(function() {
 	// 	plugin.destroy();
@@ -17,4 +42,54 @@ describe('Magellan', function() {
 		// });
 	});
 
+
+	describe('scrollToLoc()', function() {
+    it('scrolls the selected element into viewport', function(done) {
+    	var count = 5, duration = 200;
+      $html = $(generateUl(count)).appendTo('body');
+      $content = $(generateContent(count)).appendTo('body');
+      plugin = new Foundation.Magellan($html, {
+      	animationDuration: duration
+      });
+
+
+
+      // Jump to last section
+      var target = $html.find('a').eq(-1).attr('href');
+      plugin.scrollToLoc(target);      
+
+      // The `update` event doesn't work properly because it fires too often
+      setTimeout(function() {
+      	var isInViewport = false;
+      	if ($content.find('div').eq(-1).offset().top > $('body').scrollTop() && $content.offset().top < $('body').scrollTop() + $('body').innerHeight()) {
+      		isInViewport = true;
+      	}
+      	isInViewport.should.equal(true);
+      	done();
+      }, duration);
+
+    });
+
+
+    it('fails gracefully when target does not exist', function() {
+    	var count = 5, duration = 200;
+      $html = $(generateUl(count)).appendTo('body');
+      $content = $(generateContent(count - 1)).appendTo('body');
+      plugin = new Foundation.Magellan($html, {
+      	animationDuration: duration
+      });
+
+      var hasError = false;
+      try {
+				var target = $html.find('a').eq(-1).attr('href');
+	      plugin.scrollToLoc(target); 
+      } catch (err) {
+      	hasError = true;
+      }
+      hasError.should.equal(false);
+
+    });
+
+  });
+
 });