ScrollList Module1

ScrollList는 자주 사용되기 때문에 공통 모듈로 작성 하였다.

ScrollList Prototype

function clamp(value, min, max) {
    if(value < min)
        value = min;
    else if(value > max)
        value = max;
        return value;
}


function ScrollList(viewName, focusClassName, selectClassName) {
    this.index = -1;
    this.viewName = viewName;
    this.focusClassName = focusClassName;
    this.keyHandler = this.onKeyDown.bind(this);
    if(selectClassName)
        this.selectClassName = selectClassName;
    else
        this.selectClassName = focusClassName;
    this.view = null;
    this.index = 0;
}

ScrollList.prototype.init = function() {
    this.view = document.getElementById(this.viewName);
    if(this.view.children.length > 0)
        this.view.children[0].classList.add(this.selectClassName);
    //window.addEventListener("keydown", this.onKeyDown.bind(this));
}

ScrollList.prototype.isFocus = function() {
    let index = this.index;
    if(index < 0)
        return false;
    return this.view.children[index].classList.contains(this.focusClassName);
}

ScrollList.prototype.focus = function(flag) {
    let index = this.index;
    if(flag) {
        this.view.children[index].classList.remove(this.selectClassName);
        this.view.children[index].classList.add(this.focusClassName);
        window.addEventListener("keydown", this.keyHandler);
    }
    else {
        this.view.children[index].classList.remove(this.focusClassName);
        this.view.children[index].classList.add(this.selectClassName);
        window.removeEventListener("keydown", this.keyHandler);
    }
}

ScrollList.prototype.onKeyDown = function(e) {
    let move = 0;
    if (e.which == 37) { // left arrow
    }
    else if (e.which == 38) { // up arrow
        move = -1;
    }
    else if (e.which == 39) { // right arrow
    }        
    else if (e.which == 40) { // down arrow
        move = 1;
    }
    else if(e.keyCode === 13) {
    }
    
    let oldIndex = this.index;
    this.index += move;
    this.index = clamp(this.index, 0, this.view.children.length - 1);
    this.scroll(oldIndex, this.index);
}

ScrollList.prototype.scroll = function(oldIndex, curIndex) {
    let view = this.view;
    let index = this.index;
    if(view.children.length < 2)
        return;
        
    view.children[oldIndex].classList.remove(this.focusClassName);
    view.children[index].classList.add(this.focusClassName);

    var h1 = view.children[0].offsetTop;
    var h2 = view.children[1].offsetTop;
    var itemHeight = h2 - h1;     
    
    var gap = (curIndex+1)*itemHeight - view.scrollTop;
    var move = curIndex - oldIndex;

    if(move > 0 && gap > view.offsetHeight) {
        view.scrollTop = (curIndex+1)*itemHeight - view.offsetHeight;
    }
    
    if  (move < 0 && gap - itemHeight < 0) {
        view.scrollTop = itemHeight*index;
    }
}

new로 생성한 오브젝트의 경우, addEventListener, removeEventListener 할때 주의 해야 한다.
this.onKeyDown.bind(this) 호출 할때마다 새로운 값과 함수를 반환 한다.
다음과 같이 실행하면 removeEventListener가 정상적으로 실행 되지 않는다.

window.addEventListener("keydown", this.onKeyDown.bind(this));
window.removeEventListener("keydown", this.onKeyDown.bind(this));

다음과 같이 변수로 들고 있으면 동일한 값과 함수를 매개변수로 넘겨 줄수 있기 때문에 removeEventListener가 정상적으로 실행이 된다.

this.keyHandler = this.onKeyDown.bind(this);

window.addEventListener("keydown", this.keyHandler);
window.removeEventListener("keydown", this.keyHandler);

사용법

엔터키를 누르면 리스트 포커스가 바뀐다.
위, 아래 화살표 키를 누르면 포커스가 위, 아래로 이동 한다.



ScrollList를 new로 생성한다.

function ScrollList(viewName, focusClassName, selectClassName)
viewName : scroll 요소 이름
focusClassName :  포커스된 스크롤 아이템의 클래스 스타일 이름
selectClassName :  마지막으로 포커싱된 아이템으로, 선택되는 아이템의 스타일 이름이다.
                          포커스가 사라지면 selectClassName 스타일로 바뀐다.
                          selectClassName을 생략하면 focusClassName과 동일한 값이 적용된다.

예)
let scrollList = new ScrollList('scrolltest', 'focusElement', 'selectElement');
scrollList.init();

<style>
#scrolltest>div {
    margin: 30px;
    height: 100px;
    border: 2px solid black;
    box-sizing:border-box;
}

#scrolltest_two {
    position: absolute;
    display: block;
    background: yellow;
    width: 200px;
    height:500px;
    top: 200px;
    left: 600px;  
    overflow:auto;
}

#scrolltest_two>div {
    margin: 30px;
    height: 100px;
    border: 2px solid black;
    box-sizing:border-box;
}
</style>

<div id="scrolltest">
    <div>0</div>   
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
</div>

<div id="scrolltest_two">
    <div>0</div>   
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
</div>

<script>
let scrollList = new ScrollList('scrolltest', 'focusElement', 'selectElement');
scrollList.init();
scrollList.focus(true);

let scrollListTwo = new ScrollList('scrolltest_two', 'focusElement', 'selectElement');
scrollListTwo.init();

var onKeyDown = function(e) {
    if(e.keyCode === 13) {
        if(scrollList.isFocus()) {
           scrollList.focus(false);
           scrollListTwo.focus(true);
        }
        else {
           scrollList.focus(true);
           scrollListTwo.focus(false);       
        }
    }
}

document.addEventListener("keydown", onKeyDown);
</script>

다운로드: ui_statePattern1.html

keydown 이벤트 제거 버전

keydown 이벤트를 외부에서 하는걸로 변경 하였다.
ScrollList에서 addEventListener, removeEventListener를 제거 하였다.

function clamp(value, min, max) {
    if(value < min)
        value = min;
    else if(value > max)
        value = max;
        return value;
}

function ScrollList(viewName, focusClassName, selectClassName) {
    this.index = -1;
    this.viewName = viewName;
    this.focusClassName = focusClassName;
    if(selectClassName)
        this.selectClassName = selectClassName;
    else
        this.selectClassName = focusClassName;
    this.view = null;
    this.index = 0;
}

ScrollList.prototype.init = function() {
    this.view = document.getElementById(this.viewName);
    if(this.view.children.length > 0)
        this.view.children[0].classList.add(this.selectClassName);
}

ScrollList.prototype.isFocus = function() {
    let index = this.index;
    if(index < 0)
        return false;
    return this.view.children[index].classList.contains(this.focusClassName);
}

ScrollList.prototype.focus = function(flag) {
    let index = this.index;
    if(flag) {
        this.view.children[index].classList.remove(this.selectClassName);
        this.view.children[index].classList.add(this.focusClassName);
    }
    else {
        this.view.children[index].classList.remove(this.focusClassName);
        this.view.children[index].classList.add(this.selectClassName);
    }
}

ScrollList.prototype.onKeyDown = function(e) {
    let move = 0;
    if (e.which == 37) { // left arrow
    }
    else if (e.which == 38) { // up arrow
        move = -1;
    }
    else if (e.which == 39) { // right arrow
    }       
    else if (e.which == 40) { // down arrow
        move = 1;
    }
    else if(e.keyCode === 13) {
    }
   
    let oldIndex = this.index;
    this.index += move;
    this.index = clamp(this.index, 0, this.view.children.length - 1);
    this.scroll(oldIndex, this.index);
}

ScrollList.prototype.scroll = function(oldIndex, curIndex) {
    let view = this.view;
    let index = this.index;
    if(view.children.length < 2)
        return;
       
    view.children[oldIndex].classList.remove(this.focusClassName);
    view.children[index].classList.add(this.focusClassName);

    var h1 = view.children[0].offsetTop;
    var h2 = view.children[1].offsetTop;
    var itemHeight = h2 - h1;    
   
    var gap = (curIndex+1)*itemHeight - view.scrollTop;
    var move = curIndex - oldIndex;

    if(move > 0 && gap > view.offsetHeight) {
        view.scrollTop = (curIndex+1)*itemHeight - view.offsetHeight;
    }
   
    if  (move < 0 && gap - itemHeight < 0) {
        view.scrollTop = itemHeight*index;
    }
}

let scrollList = new ScrollList('scrolltest', 'focusElement', 'selectElement');
scrollList.init();
scrollList.focus(true);

let scrollListTwo = new ScrollList('scrolltest_two', 'focusElement', 'selectElement');
scrollListTwo.init();

var onKeyDown = function(e) {
    if(e.keyCode === 13) {
        if(scrollList.isFocus()) {
           scrollList.focus(false);
           scrollListTwo.focus(true);
        }
        else {
           scrollList.focus(true);
           scrollListTwo.focus(false);       
        }
    }
    else {
        if(scrollList.isFocus())
            scrollList.onKeyDown(e);
        else if(scrollListTwo.isFocus())
            scrollListTwo.onKeyDown(e);
    }
}

document.addEventListener("keydown", onKeyDown);

다운로드: ui_statePattern2.html

참조)
javascript removeEventListener not working inside a class
https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class