Class: Visible | egjs::visible

new eg.Visible(baseElement, options)

A Class used to check whether an element is visible in the base element or viewport.

엘리먼트가 기준 엘리먼트나 뷰포트 안에 보이는지 확인하는 클래스

baseElement (default: document) optional

Type: HTMLElement | String | jQuery

A base element that detects if target elements are visible

타겟 엘리먼트들이 보이는 기준 엘리먼트
options

Type: Object

The option object of the Visible module

Visible 모듈의 옵션 객체
- targetContainer (default: baseElement) optional
  
  Type: String
  
  A target container element that contains the target elements. (baseElement >= targetContainer > target elements)
  
  타겟 엘리먼트들을 포함하고 있는 타겟 컨테이너 엘리먼트 (baseElement >= targetContainer > target elements)
- targetClass (default: "check_visible") optional
  
  Type: String
  
  The class name of the element to be checked. It has slightly better performance than the targetSelector option.
  
  보이는지 확인할 엘리먼트의 클래스 이름. targetSelector 옵션보다 성능이 조금 좋다.
- targetSelector (default: "") optional
  
  Type: String
  
  The selector of the element to be checked. You can use targetClass instead.
  
  보이는지 확인할 엘리먼트의 셀렉터. targetClass 대신 사용할 수 있다.
- expandSize (default: 0) optional
  
  Type: Number
  
  The size of the expanded area to be checked whether an element is visible. If this value is less than zero, the size of the area is smaller than that of the base element.
  
  기준 엘리먼트의 경계를 넘어 엘리먼트가 보이는지 확인할 영역의 크기. 값이 0보다 작으면 엘리먼트가 보이는지 확인할 영역의 크기가 기준 엘리먼트보다 작아진다

Browser Support

Browser	Version
Desktop - Internet Explorer	8+
Desktop - Chrome	latest
Desktop - Firefox	latest
Desktop - Safari	latest
Desktop - Edge	latest
iOS	7+
Andorid	2.1+ (except 3.x)

Extends

eg.Component

Methods

check(delay, containment){eg.Visible} Visible.js, line 125

Checks whether the visible of the target elements has changed. It trigger that change event on a component.

대상 엘리먼트의 가시성이 변경됐는지 체크한다. change 이벤트를 발생한다.

delay (default: -1) optional

Type: Number

Delay time. It delay that change event trigger.

지연시간. change 이벤트 발생을 지연한다.
containment (default: false) optional

Type: Boolean

Whether to check only elements that are completely contained within the reference area.

기준 영역 안에 완전히 포함된 엘리먼트만 체크할지 여부.

Returns:

Type	Description
eg.Visible	An instance of a module itself 모듈 자신의 인스턴스

getVisibleElements(){Array.<HTMLElement>} Visible.js, line 161

Get current visible elements.

현재 보이는 엘리먼트들을 반환한다.

Returns:

Type	Description
Array.<HTMLElement>	An array of visible elements. 현재 보이는 엘리먼트들의 배열

inherited hasOn(eventName){Boolean} component.js, line 136

Checks whether an event has been attached to a component.

컴포넌트에 이벤트가 등록됐는지 확인한다.

eventName

Type: String

The name of the event to be attached

등록 여부를 확인할 이벤트의 이름

Returns:

Type	Description
Boolean	Indicates whether the event is attached. 이벤트 등록 여부

Example

class Some extends eg.Component {

some() {

this.hasOn("hi");// check hi event.

}

}

observe(options){eg.Visible} Visible.js, line 306

Observe whether the visible of the target elements has changed. It trigger that change event on a component.

대상 엘리먼트의 가시성이 변경됐는지 관찰한다. change 이벤트를 발생한다.

options (default: {}) optional

Type: Object

Options to observe the target elements.

대상 엘리먼트를 관찰하기 위한 옵션들.
- delay (default: -1) optional
  
  Type: Number
  
  Delay time. It delay that change event trigger.
  
  지연시간. change 이벤트 발생을 지연한다.
- containment (default: false) optional
  
  Type: Boolean
  
  Whether to check only elements that are completely contained within the reference area.
  
  기준 영역 안에 완전히 포함된 엘리먼트만 체크할지 여부.

Returns:

Type	Description
eg.Visible	An instance of a module itself 모듈 자신의 인스턴스

inherited off(eventName, handlerToDetach){eg.Component} component.js, line 196

Detaches an event from the component.

컴포넌트에 등록된 이벤트를 해제한다

eventName

Type: eventName

The name of the event to be detached

해제할 이벤트의 이름
handlerToDetach

Type: function

The handler function of the event to be detached

해제할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {

hi() {

console.log("hi");

}

some() {

this.off("hi",this.hi); //detach event

}

}

inherited on(eventName, handlerToAttach){eg.Component} component.js, line 156

Attaches an event to a component.

컴포넌트에 이벤트를 등록한다.

eventName

Type: eventName

The name of the event to be attached

등록할 이벤트의 이름
handlerToAttach

Type: function

The handler function of the event to be attached

등록할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {

hi() {

console.log("hi");

}

some() {

this.on("hi",this.hi); //attach event

}

}

inherited once(eventName, handlerToAttach){eg.Component} component.js, line 101

Executed event just one time.

이벤트가 한번만 실행된다.

eventName

Type: eventName

The name of the event to be attached

등록할 이벤트의 이름
handlerToAttach

Type: function

The handler function of the event to be attached

등록할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {

hi() {

alert("hi");

}

thing() {

this.once("hi", this.hi);

}

}
var some = new Some();

some.thing();

some.trigger("hi");

// fire alert("hi");

some.trigger("hi");

// Nothing happens

refresh(){eg.Visible} Visible.js, line 90

Updates the list of elements where the visibility property is to be checked

visibility 속성을 검사할 엘리먼트의 목록을 갱신한다

Returns:

Type	Description
eg.Visible	An instance of a module itself 모듈 자신의 인스턴스

inherited trigger(eventName, customEvent){Boolean} component.js, line 48

Triggers a custom event.

커스텀 이벤트를 발생시킨다

eventName

Type: String

The name of the custom event to be triggered

발생할 커스텀 이벤트의 이름
customEvent

Type: Object

Event data to be sent when triggering a custom event

커스텀 이벤트가 발생할 때 전달할 데이터

Returns:

Type	Description
Boolean	Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고

Example

class Some extends eg.Component {

some(){

if(this.trigger("beforeHi")){ // When event call to stop return false.

this.trigger("hi");// fire hi event.

}

}

}
const some = new Some();

some.on("beforeHi", (e) => {

if(condition){

e.stop(); // When event call to stop, hi event not call.

}

});

some.on("hi", (e) => {

// currentTarget is component instance.

console.log(some === e.currentTarget); // true

});

// If you want to more know event design. You can see article.

// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

Events

change Visible.js, line 282

This event is fired when the event is compared with the last verified one and there is an element of which the visibility property has changed.

마지막으로 확인한 결과와 비교해 visibility 속성이 변경된 엘리먼트가 있을 때 발생하는 이벤트

Type:

obejct

Properties:

Name	Type	Description
`visible`	Array	Visible elements (the element type is `HTMLElement`) 보이게 된 엘리먼트들
`invisible`	Array	Invisible elements (the element type is `HTMLElement`) 안 보이게 된 엘리먼트들
`isTrusted`	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call 사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.