feat(visible): check 'containment' elements (#421)

* docs(visible): Improve description for argument 'containment'.
* feat(visible): Add init code for arg 'containment'.
* feat(visible): Add the branch code of condition  'containment'.
* test(visible): Add test code for  'containment'.

Ref #365

src/visible.js

@@ -89,22 +89,33 @@ eg.module("visible", ["jQuery", eg, document], function($, ns, doc) {
 			return this.refresh();
 		},
 		/**
-		 * Checks whether the visibility property of the target elements has changed. The change event is fired when the property has changed.
-		 * @ko 보이는지 확인할 대상 엘리먼트 목록의 visibility 속성이 변경됐는지 확인한다. 속성이 변경됐으면 change 이벤트가 발생한다
+		 * Checks whether the visible of the target elements has changed. It trigger that change event on a component.
+		 * @ko 대상 엘리먼트의 가시성이 변경됐는지 체크한다. change 이벤트를 발생한다.
 		 * @method eg.Visible#check
-		 * @param {Number} [delay=-1] Delay time. It is used to check the property after a method is called and a period of time has passed.<ko>속성 확인 지연 시간. 메서드를 호출하고 일정 시간이 지난 후에 속성을 확인할 때 사용한다</ko>
+		 * @param {Number} [delay=-1] Delay time. It delay that change event trigger.<ko>지연시간. change 이벤트 발생을 지연한다.</ko>
+		 * @param {Boolean} [containment=false] Whether to check only elements that are completely contained within the reference area.<ko>기준 영역 안에 완전히 포함된 엘리먼트만 체크할지 여부.</ko>
 		 * @return {eg.Visible} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
 		 */
-		check: function(delay) {
+		check: function(delay, containment) {
+			if (typeof delay !== "number") {
+				containment = delay;
+				delay = -1;
+			}
+
 			if (typeof delay === "undefined") {
 				delay = -1;
 			}
+
+			if (typeof containment === "undefined") {
+				containment = false;
+			}
+
 			clearTimeout(this._timer);
 			if (delay < 0) {
-				this._check();
+				this._check(containment);
 			} else {
 				this._timer = setTimeout($.proxy(function() {
-					this._check();
+					this._check(containment);
 					this._timer = null;
 				}, this), delay);
 			}
@@ -141,7 +152,7 @@ eg.module("visible", ["jQuery", eg, document], function($, ns, doc) {
 			}
 			return this._reviseElements(target, i);
 		},
-		_check: function() {
+		_check: function(containment) {
 			var expandSize = parseInt(this.options.expandSize, 10);
 			var visibles = [];
 			var invisibles = [];
@@ -162,12 +173,23 @@ eg.module("visible", ["jQuery", eg, document], function($, ns, doc) {
 				}
 				if (this._reviseElements(target, i)) {
 					before = !!target.__VISIBLE__;
-					target.__VISIBLE__ = after = !(
-						targetArea.bottom < area.top ||
-						area.bottom < targetArea.top ||
-						targetArea.right < area.left ||
-						area.right < targetArea.left
-					);
+
+					if (containment) {
+						target.__VISIBLE__ = after = !(
+							targetArea.top < area.top  ||
+							targetArea.bottom > area.bottom  ||
+							targetArea.right > area.right ||
+							targetArea.left < area.left
+						);
+					} else {
+						target.__VISIBLE__ = after = !(
+							targetArea.bottom < area.top ||
+							area.bottom < targetArea.top ||
+							targetArea.right < area.left ||
+							area.right < targetArea.left
+						);
+					}
+
 					(before !== after) && (after ? visibles : invisibles).unshift(target);
 				}
 			}

test/unit/js/visible.test.js

@@ -234,4 +234,63 @@ test("Check prefixEvent", function (assert) {
 		equal(isTriggered, true, "check if prefixEvent trigger");
 		done();
 	},200);
-});
+});
+
+module ("containment elements check test", {
+	setup: function() {
+		var i,
+			$wrapper,
+			html;
+
+		html = [];
+		for(i = 0; i < 10; i++) {
+			html.push("<li class='list check_document_visible'>#" + (i + 1) + "</li>");
+		}
+
+		$wrapper = $("<div class='wrapper' style='overflow:scroll;height:100px'></div>");
+		$wrapper.append(html);
+		$("#content").append($wrapper);
+
+		this.inst = new eg.Visible($wrapper, {
+			targetClass : "check_document_visible"
+		});
+		this.$wrapper = $wrapper;
+	},
+	teardown: function() {
+		window.scrollTo(0,0);
+		$("#content").empty();
+		this.inst.destroy();
+		this.inst = null;
+	}
+});
+
+test("default", function(assert) {
+	var done = assert.async();
+
+	this.inst.on("change", function(e) {
+		ok(e.visible.length === 2, "visible element length");
+		ok(e.visible[0].innerText === "#1", "visible element length");
+		ok(e.visible[1].innerText === "#2", "visible element length");
+		done();
+	});
+
+	this.inst.check(true);
+});
+
+test("scroll position change", function(assert) {
+	var done = assert.async();
+	this.inst.check(true);
+
+	this.inst.on("change", function(e) {
+		ok(e.visible.length === 1, "visible element length is 1");
+		ok(e.invisible.length === 2, "invisible element length is 2");
+		ok(e.invisible[0].innerText === "#1", "first invisible element is #1");
+		ok(e.invisible[1].innerText === "#2", "second invisible element is #2");
+		ok(e.visible[0].innerText === "#4", "first visible element is #4");
+		done();
+	});
+
+	//when
+	this.$wrapper.scrollTop(110);
+	this.inst.check(true);
+});