Merge pull request #132 from steevee/master

Fixes #131 - percent correctly translated

Author: thenikso

angular-inview.js

@@ -222,10 +222,10 @@ function offsetRect (rect, offset) {
     return rect;
   }
   var offsetObject = {
-    top: isPercent(offset[0]) ? (parseFloat(offset[0]) * rect.height) : offset[0],
-    right: isPercent(offset[1]) ? (parseFloat(offset[1]) * rect.width) : offset[1],
-    bottom: isPercent(offset[2]) ? (parseFloat(offset[2]) * rect.height) : offset[2],
-    left: isPercent(offset[3]) ? (parseFloat(offset[3]) * rect.width) : offset[3]
+    top: isPercent(offset[0]) ? (parseFloat(offset[0]) * rect.height / 100) : offset[0],
+    right: isPercent(offset[1]) ? (parseFloat(offset[1]) * rect.width / 100) : offset[1],
+    bottom: isPercent(offset[2]) ? (parseFloat(offset[2]) * rect.height / 100) : offset[2],
+    left: isPercent(offset[3]) ? (parseFloat(offset[3]) * rect.width / 100) : offset[3]
   };
   // Note: ClientRect object does not allow its properties to be written to therefore a new object has to be created.
   return {

angular-inview.spec.js

@@ -212,6 +212,25 @@ describe("angular-inview", function() {
 				.then(done);
 			});
 
+			it("should consider percent offset option", function(done) {
+				makeTestForHtml(
+					'<div in-view="spy($inviewInfo)" style="height:200px" in-view-options="{ offset:[\'25%\', 0], generateParts: true }"></div>' +
+					'<div style="height:200%"></div>'
+				)
+				.then(function (test) {
+					var info = test.spy.calls.argsFor(0)[0];
+					expect(info.inView).toEqual(true);
+					expect(info.parts).toEqual({
+						top: false,
+						left: true,
+						bottom: true,
+						right: true
+					});
+					return test;
+				})
+				.then(done);
+			});
+
 			it("should consider viewport offset options", function(done) {
 				makeTestForHtml(
 					'<div in-view="spy($inviewInfo)" style="height:200px" in-view-options="{ viewportOffset:[100, 0], generateParts: true }"></div>' +