Page

Page

You can check the page in and out of the screen.

Constructor

new Page(elopt, optionsopt)

Source:
Name Type Default Description
el? string | Element
options? PageOptions {}
Example
const page = new Page(".page1", {
  range: ["0%", "100%"],
  margin: [0, 0],
  // Registers events automatically.
  events: ["resize", "scroll"]
});

Extends

Methods

add(page)

Source:
Name Type Description
page Page

getRect(isAbsoluteopt) → {Rect | undefined}

Source:
Name Type Description
isAbsolute? boolean
Returns:
Type
Rect | undefined

hasOn(eventName) → {Boolean}

Source:
Overrides:
Checks whether an event has been attached to a component.
Name Type Description
eventName String The name of the event to be attached 등록 여부를 확인할 이벤트의 이름
Example
class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}
Returns:
Indicates whether the event is attached. 이벤트 등록 여부
Type
Boolean

off(eventName, handlerToDetach) → {eg.Component}

Source:
Overrides:
Detaches an event from the component.
Name Type Description
eventName eventName The name of the event to be detached 해제할 이벤트의 이름
handlerToDetach function The handler function of the event to be detached 해제할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}
Returns:
An instance of a component itself 컴포넌트 자신의 인스턴스
Type
eg.Component

on(eventName, handlerToAttach) → {eg.Component}

Source:
Overrides:
Attaches an event to a component.
Name Type Description
eventName eventName The name of the event to be attached 등록할 이벤트의 이름
handlerToAttach function The handler function of the event to be attached 등록할 이벤트의 핸들러 함수
Example
class Some extends eg.Component {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}
Returns:
An instance of a component itself컴포넌트 자신의 인스턴스
Type
eg.Component

once(eventName, handlerToAttach) → {eg.Component}

Source:
Overrides:
Executed event just one time.
Name Type Description
eventName eventName The name of the event to be attached 등록할 이벤트의 이름
handlerToAttach function The handler function of the event to be attached 등록할 이벤트의 핸들러 함수
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
Returns:
An instance of a component itself컴포넌트 자신의 인스턴스
Type
eg.Component

range(rangeopt)

Source:
Name Type Default Description
range? Array<string | number> | number | string [0, "100%"]

resize()

Source:

scroll()

Source:

trigger(eventName, customEventopt, ...restParam) → {Boolean}

Source:
Overrides:
Triggers a custom event.
Name Type Default Description
eventName String The name of the custom event to be triggered 발생할 커스텀 이벤트의 이름
customEvent? Object {} Event data to be sent when triggering a custom event 커스텀 이벤트가 발생할 때 전달할 데이터
...restParam
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
Returns:
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'를 반환하고 이벤트 발생을 중단한다. 참고
Type
Boolean

Type Definitions

EventParameter

Source:
Properties:
Name Type Description
type string The name of event
target Element An element that represents a page
currentTarget Page The page on which the event occurred.

PageOptions

Source:
Properties:
Name Type Description
range? Array<number | string>
margin? number | string | Array<number | string>
events? string[]
Type:
  • TSInterface

PageState

Source:
Properties:
Name Type Description
enter boolean
firstEnter boolean
firstExit boolean
Type:
  • TSInterface

Rect

Source:
Properties:
Name Type Description
top number
height number
Type:
  • TSInterface

Events

enter

Source:
An event that occurs when you enter a page.
Name Type Description
event Page.EventParameter Event object

exit

Source:
An event that occurs when you exit a page.
Name Type Description
event Page.EventParameter Event object

firstEnter

Source:
An event that occurs when you first enter a page.
Name Type Description
event Page.EventParameter Event object

firstExit

Source:
An event that occurs when you first exit a page.
Name Type Description
event Page.EventParameter Event object