Class: InfiniteGrid

    <!-- HTML -->
    <ul id="grid">
        <li class="card">
            <div>test1</div>
        </li>
        <li class="card">
            <div>test2</div>
        </li>
        <li class="card">
            <div>test3</div>
        </li>
        <li class="card">
            <div>test4</div>
        </li>
        <li class="card">
            <div>test5</div>
        </li>
        <li class="card">
            <div>test6</div>
        </li>
    </ul>
    <script>
    var some = new eg.InfiniteGrid("#grid").on("layoutComplete", function(e) {
        // ...
    });
    </script>

Extends

• eg.Component

Methods

append(elements, groupKey){Number}

infiniteGrid.js, line 346

Adds a card element at the bottom of a grid layout. This method is available only if the isProcessing() method returns false.

카드 엘리먼트를 그리드 레이아웃의 아래에 추가한다. isProcessing() 메서드의 반환값이 'false'일 때만 이 메서드를 사용할 수 있다 이 메소드는 isProcessing()의 반환값이 false일 경우에만 사용 가능하다.

• elements
  Type: Array | String | jQuery

  Array of the card elements to be added

  추가할 카드 엘리먼트의 배열

• groupKey optional
  Type: Number | String

  The group key to be configured in a card element. It is set to "undefined" by default.

  추가할 카드 엘리먼트에 설정할 그룹 키. 생략하면 값이 'undefined'로 설정된다

Returns:

Type	Description
Number	The number of added card elements 추가된 카드 엘리먼트의 개수

clear(){eg.InfiniteGrid}

infiniteGrid.js, line 383

Clears added card elements and data.

추가된 카드 엘리먼트와 데이터를 모두 지운다.

Returns:

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

destroy()

infiniteGrid.js, line 843

Destroys elements, properties, and events used on a grid layout.

그리드 레이아웃에 사용한 엘리먼트와 속성, 이벤트를 해제한다

fit(){Number}

infiniteGrid.js, line 643

Removes extra space caused by adding card elements.

카드 엘리먼트를 추가한 다음 생긴 빈 공간을 제거한다

Returns:

Type	Description
Number	Actual length of space removed (unit: px) 빈 공간이 제거된 실제 길이(단위: px)

Deprecated

• since version 1.3.0

getBottomElement(){HTMLElement}

infiniteGrid.js, line 426

Returns a card element at the bottom of a layout.

레이아웃의 맨 아래에 있는 카드 엘리먼트를 반환한다.

Returns:

Type	Description
HTMLElement	Card element at the bottom of a layout (if the position of card elements are same, it returns the first right element) 레이아웃의 맨 아래에 있는 카드 엘리먼트 (카드의 위치가 같은 경우, 오른쪽 엘리먼트가 반환된다)

getGroupKeys(){Array}

infiniteGrid.js, line 250

Returns the list of group keys which belongs to card elements currently being maintained. You can use the append() or prepend() method to configure group keys so that multiple card elements can be managed at once. If you do not use these methods to configure group keys, it returns undefined as a group key.

현재 유지하고 있는 카드 엘리먼트의 그룹 키 목록을 반환한다. 여러 개의 카드 엘리먼트를 묶어서 관리할 수 있도록 append() 메서드나 prepend() 메서드에서 그룹 키를 지정할 수 있다. append() 메서드나 prepend() 메서드에서 그룹 키를 지정하지 않았다면 'undefined'가 그룹 키로 반환된다

Returns:

Type	Description
Array	List of group keys 그룹 키의 목록

getStatus(){Object}

infiniteGrid.js, line 183

Returns the current state of a module such as location information. You can use the setStatus() method to restore the information returned through a call to this method.

카드의 위치 정보 등 모듈의 현재 상태 정보를 반환한다. 이 메서드가 반환한 정보를 저장해 두었다가 setStatus() 메서드로 복원할 수 있다

Returns:

Type	Description
Object	State object of the eg.InfiniteGrid module eg.InfiniteGrid 모듈의 상태 객체

getTopElement(){HTMLElement}

infiniteGrid.js, line 396

Returns a card element at the top of a layout.

레이아웃의 맨 위에 있는 카드 엘리먼트를 반환한다.

Returns:

Type	Description
HTMLElement	Card element at the top of a layout. (if the position of card elements are same, it returns the first left element) 레이아웃의 맨 위에 있는 카드 엘리먼트 (카드의 위치가 같은 경우, 왼쪽 엘리먼트가 반환된다)

inherited hasOn(eventName){Boolean}

component.js, line 165

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

        var Some = eg.Class.extend(eg.Component,{
            "some": function(){
                this.hasOn("hi");// check hi event.
            }
        });

isProcessing(){Boolean}

infiniteGrid.js, line 232

Checks whether a card element is being added.

카드 엘리먼트 추가가 진행 중인지 확인한다

Returns:

Type	Description
Boolean	Indicates whether a card element is being added 카드 엘리먼트 추가 진행 중 여부

isRecycling(){Boolean}

infiniteGrid.js, line 241

Checks whether the total number of added card elements is greater than the value of the count option. Note that the value of the count option is always greater than zero. If it returns true, the number of DOMs won't increase even though card elements are added; instead of adding a new DOM, existing DOMs are recycled to maintain the number of DOMs.

추가된 카드 엘리먼트의 전체 개수가 count 옵션의 값보다 큰지 확인한다. 단, count 옵션의 값은 0보다 크다. 'true'가 반환되면 카드 엘리먼트가 더 추가돼도 DOM의 개수를 증가하지 않고 기존 DOM을 재활용(recycle)해 DOM의 개수를 일정하게 유지한다

Returns:

Type	Description
Boolean	Indicates whether the total number of added card elements is greater than the value of the count option. 추가된 카드 엘리먼트의 전체 개수가 count 옵션의 값보다 큰지 여부

layout(isRelayout){eg.InfiniteGrid}

infiniteGrid.js, line 261

Rearranges a layout.

레이아웃을 다시 배치한다.

• isRelayout (default: true) optional
  Type: Boolean

  Indicates whether a card element is being relayouted

  카드 엘리먼트 재배치 여부

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself [private parameter] _addItems: added items _options: { isAppend: Checks whether the append() method is used to add a card element. removedCount: The number of deleted card elements to maintain the number of DOMs. } 모듈 자신의 인스턴스

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

component.js, line 218

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

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){},
            "some": function(){
                this.off("hi",this.hi); //detach event
            }
        });

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

component.js, line 181

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

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){},
            "some": function(){
                this.on("hi",this.hi); //attach event
            }
        });

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

component.js, line 120

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

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){
                alert("hi");
            },
            "thing": function(){
                this.once("hi",this.hi);
            }
        });

        var some = new Some();
        some.thing();
        some.trigger("hi");
        // fire alert("hi");
        some.trigger("hi");
        // Nothing happens

inherited option(key, value){eg.Component|Object}

component.js, line 25

Sets options in a component or returns them.

컴포넌트에 옵션을 설정하거나 옵션을 반환한다

• key
  Type: String

  The key of the option

  옵션의 키

• value optional
  Type: Object

  The option value that corresponds to a given key

  키에 해당하는 옵션값

Returns:

Type

Description

eg.Component | Object

An instance, an option value, or an option object of a component itself. - If both key and value are used to set an option, it returns an instance of a component itself. - If only a key is specified for the parameter, it returns the option value corresponding to a given key. - If nothing is specified, it returns an option object. 컴포넌트 자신의 인스턴스나 옵션값, 옵션 객체. - 키와 값으로 옵션을 설정하면 컴포넌트 자신의 인스턴스를 반환한다. - 파라미터에 키만 설정하면 키에 해당하는 옵션값을 반환한다. - 파라미터에 아무것도 설정하지 않으면 옵션 객체를 반환한다.

Example

        var Some = eg.Class.extend(eg.Component, {
            construct: function(options){
                this.options = options; // You have to set this.options.
            }
        });

        var some = new Some({
            "foo": 1,
            "bar": 2,
        });
        some.option("foo"); // return 1
        some.option("foo",3); // return some instance
        some.option(); // return options object.
        some.option({
            "foo" : 10,
            "bar" : 20,
            "baz" : 30
        }); // return some instance.

prepend(elements, groupKey){Number}

infiniteGrid.js, line 365

Adds a card element at the top of a grid layout. This method is available only if the isProcessing() method returns false and the isRecycling() method returns true.

카드 엘리먼트를 그리드 레이아웃의 위에 추가한다. isProcessing() 메서드의 반환값이 'false'이고, isRecycling() 메서드의 반환값이 'true'일 때만 이 메서드를 사용할 수 있다

• elements
  Type: Array | String | jQuery

  Array of the card elements to be added

  추가할 카드 엘리먼트 배열

• groupKey optional
  Type: Number | String

  The group key to be configured in a card element. It is set to "undefined" by default.

  추가할 카드 엘리먼트에 설정할 그룹 키. 생략하면 값이 'undefined'로 설정된다

Returns:

Type	Description
Number	The number of added card elements 추가된 카드 엘리먼트의 개수

remove(Card){Object}

infiniteGrid.js, line 817

Removes a card element on a grid layout.

그리드 레이아웃의 카드 엘리먼트를 삭제한다.

• Card
  Type: HTMLElement

  element to be removed

  삭제될 카드 엘리먼트

Returns:

Type	Description
Object	Removed card element 삭제된 카드 엘리먼트 정보

setStatus(status){eg.InfiniteGrid}

infiniteGrid.js, line 210

Sets the state of the eg.InfiniteGrid module with the information returned through a call to the getStatue() method.

getStatue() 메서드가 저장한 정보로 eg.InfiniteGrid 모듈의 상태를 설정한다.

• status
  Type: Object

  State object of the eg.InfiniteGrid module

  eg.InfiniteGrid 모듈의 상태 객체

Returns:

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

inherited trigger(eventName, customEvent){Boolean}

component.js, line 72

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. 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다.

Example

        var Some = eg.Class.extend(eg.Component,{
            "some": function(){
                this.trigger("hi");// fire hi event.
            }
        });

Events

append

infiniteGrid.js, line 121

This event is fired when a card element must be added at the bottom of a grid layout because there is no card to be displayed on screen when a user scrolls near bottom.

카드 엘리먼트가 그리드 레이아웃의 아래에 추가돼야 할 때 발생하는 이벤트. 사용자가 아래로 스크롤해서 화면에 표시될 카드가 없을 때 발생한다

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • scrollTop
    Type: Number

    Current vertical position of the scroll bar

    현재 스크롤의 y 좌표 값

layoutComplete

infiniteGrid.js, line 473

This event is fired when layout is successfully arranged through a call to the append(), prepend(), or layout() method.

레이아웃 배치가 완료됐을 때 발생하는 이벤트. append() 메서드나 prepend() 메서드, layout() 메서드 호출 후 카드의 배치가 완료됐을 때 발생한다

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • target
    Type: Array

    Rearranged card elements

    재배치된 카드 엘리먼트들

  • isAppend
    Type: Boolean

    Checks whether the append() method is used to add a card element. It returns true even though the layoutComplete event is fired after the layout() method is called.

    카드 엘리먼트가 append() 메서드로 추가됐는지 확인한다. layout() 메서드가 호출된 후 layoutComplete 이벤트가 발생해도 'true'를 반환한다.

  • distance
    Type: Number

    Distance the card element at the top of a grid layout has moved after the layoutComplete event is fired. In other words, it is the same as an increased height with a new card element added using the prepend() method

    그리드 레이아웃의 맨 위에 있던 카드 엘리먼트가 layoutComplete 이벤트 발생 후 이동한 거리. 즉, prepend() 메서드로 카드 엘리먼트가 추가돼 늘어난 높이다.

  • croppedCount
    Type: Number

    The number of deleted card elements to maintain the number of DOMs

    일정한 DOM 개수를 유지하기 위해, 삭제한 카드 엘리먼트들의 개수

prepend

infiniteGrid.js, line 144

This event is fired when a card element must be added at the top of a grid layout because there is no card to be displayed on screen when a user scrolls near top. This event is available only if the isRecycling() method returns true.

카드가 그리드 레이아웃의 위에 추가돼야 할 때 발생하는 이벤트. 사용자가 위로 스크롤해서 화면에 표시될 카드가 없을 때 발생한다. 이 이벤트는 isRecycling() 메서드의 반환값이 'true'일 때만 발생한다

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • scrollTop
    Type: Number

    Current vertical position of the scroll bar

    현재 스크롤의 y 좌표 값