javascript ui module

Custom Element는 사용하지 않는다.

Javascript의 Class 타입을 이용해서 new로 생성 할것이다.
Javascript의 Class 타입과 템플릿 문자열을 사용해서 UI를 모듈화 해보자.

1.템플릿 문자열 변수를 헤더와 Body에 추가

템플릿 문자열에 CSS, HTML의 내용을 추가한후 각각 헤더와 Body에 추가한다.

스타일을 헤더에 추가

virtualKeyboardStyle 템플릿 문자열을 writeStyle 함수로 헤더에 추가한다.

body에 HTML 추가

const virtualKeyboardHtml = `
<div class="virtual-keyboard" id="Virtual_Keyboard"></div>
`;

function writeBodyHTML(htmlCode) {
document.body.innerHTML = document.body.innerHTML + htmlCode;
}

writeBodyHTML(virtualKeyboardHtml);

body에 HTML을 추가할때는 기존 내용을 유지하기 위해 아래와 같이 한다.

document.body.innerHTML = document.body.innerHTML + htmlCode;

엘리먼트에 HTML 추가

부모 HTML

<div id='Test_Id'>aaaaaaaaaaaaaaaaaaaaaaaa</div>

repalce 값이 true이면 기존 immerHTML 내용 대치
repalce 값이 false이면 기존 immerHTML 내용 유지

const virtualKeyboardHtml = `
<div class="virtual-keyboard" id="Virtual_Keyboard"></div>
`;

function writeHTML(elementName, htmlCode, replace) {
let element = document.getElementById(elementName);
if(element) {
      if(replace)
          element.innerHTML = htmlCode;
      else
          element.innerHTML = element.innerHTML + htmlCode;
};
}

replace가 true일때 writeHTML('Test_Id', virtualKeyboardHtml, true);
결과)
<div id="Test_Id">
    <div class="virtual-keyboard" id="Virtual_Keyboard">
    </div>
</div>

replace가 false일때 writeHTML('Test_Id', virtualKeyboardHtml, false) ;
결과)
<div id="Test_Id">aaaaaaaaaaaaaaaaaaaaaaaa
    <div class="virtual-keyboard" id="Virtual_Keyboard">/div>
</div>

2. 클래스를 만들자

우리가 만들 클래스의 기능을 정하자.
엔터키를 치면 화면이 위로 올라온다. 다시 엔터키를 치면 화면이 내려간다.

클래스의 함수를 실행 순서대로 따라 가면서 설명한다.

생성자 초기화

생성자에서 각종 초기화를 한다.
this.element : 자주 사용되는 요소들의 값을 저장하기 위한 프로퍼티 객체이다.
this.build( ) 함수 : 선행 실행되어야 할것을 실행한다.
this.activate : 활성화 비활성화 상태를 나타낸다.

class VirtualKeyboard {
    constructor(){
        this.element = {};
        this.build();
        this.activate = false;
    }
}

VirtualKeyboard 메소드 설명

build 함수:

writeStyle 함수: 스타일을 헤더에 추가한다.
writeBodyHTML 함수: HTML을 body에 추가한다.
this.element에 자주 사용되는 요소들을 미리 저장한다.
transitionend 이벤트: 트랜지션 애니메이션이 끝났을때 이벤트를 등록한다.

"transitionend" 이벤트를 등록할때 this 바인딩을 해야 endMoveUpWindow 함수에서 this의 값이 VirtualKeyboard의 인스턴스가 된다.

el.addEventListener("transitionend", this.endMoveUpWindow.bind(this));

    build() {
        writeStyle('virtualKeyboard_Style', virtualKeyboardStyle);
        writeBodyHTML(virtualKeyboardHtml);

        this.element.virtualKeyboard = document.getElementById("Virtual_Keyboard");
        let el = this.element.virtualKeyboard;
        el.addEventListener("transitionend", this.endMoveUpWindow.bind(this));
    }

endMoveUpWindow 함수:

"virtual-keyboard-move" 클래스가 추가 되어 애니메이션 할때이다.
애니메이션이 끝나면 activate 플래그를 true로 설정한다.

    endMoveUpWindow() {
        var el = this.element.virtualKeyboard;
        if(el.classList.contains('virtual-keyboard-move')) {
            this.activate = true;
        }
    }

isActivate 함수:

activate 플래그 값을 반환한.

    isActivate() {
        return this.activate;
    }

moveUpWindow 함수:

"virtual-keyboard-move" 클래스가 있으면 트랜지션 애니메이션이 시작된다.
"virtual-keyboard-move" 클래스를 추가한다.

    moveUpWindow() {
        var el = this.element.virtualKeyboard;
        el.classList.add('virtual-keyboard-move');
    }

moveDownWindow 함수:

요소가 화면 아래로 내려 갈때 activate 값을 false로 설정한다.
"virtual-keyboard-move" 제거 할 때 애니메이션이 역 방향으로 자동으로 실행된다.
"virtual-keyboard-move" 클래스를 제거한다.

    moveDownWindow() {
        this.activate = false;
        var el = this.element.virtualKeyboard;
        el.classList.remove('virtual-keyboard-move');
    }

onKeyDown 함수:

키보드 이벤트를 처리하는 함수이다.
엔터키(13)를 누르면 moveDownWindow 함수로 화면을 스크롤 한다.

    onKeyDown(e) {
        if(e.keyCode === 13) {
            this.moveDownWindow();
            return true;
        }
        return false;
    }

HTML에서 script:

VirtualKeyboard 객체를 new로 생성 한다.
키보드 이벤트를 VirtualKeyboard 클래스의 onKeyDown에 전달한다.
VirtualKeyboard가 비활성화 상태이면 화면을 위로 스크롤 한다.

테스트 파일 :
vkeyboard_test.html
vkeyboard.js