5. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 플러그인

마지막은 NicEdit의 버튼과 플러그인 클래스이다.

버튼과 플러그인 클래스들이 JS의 객체지향을 가장 잘 보여준다고 생각한다.

다음 그림을 보면서 설명을 읽기 바란다.

NicEdit의 플러그인은 

크게 확장 버튼(nicEditorAdvancedButton)과

선택 상자(nicEditorSelect) 두 가지 이다.

버튼을 누르면 편집 명령이 실행되는

일반적인 버튼은 nicEditorButton으로 생성되고,

버튼을 누르면 별도의 창이 뜨는 것은 모두 플러그인으로 구현되었다.

즉, 버튼을 누르면 해당 버튼 아래에 

세부 설정 판넬이 나타나는 nicEditorAdvancedButton 클래스가 있고,

일반 버튼과 달리 사용자가 특정 값을 리스트에서 선택하는

HTML SELECT 태그를 구현한 nicEditorSelect 클래스가 있다.

확장 버튼(nicEditorAdvancedButton)은

일반 버튼과 동일하게 생성되고 기능하지만

사용자가 클릭하면 세부 설정 판넬이 나타나는 차이를 가지기 때문에

nicEditorButton에서 상속된다.

nicEditorAdvancedButton은 설정 판넬을 보여주고 감추는 기능 위주로 구현되고

nicEditorAdvancedButton를 상속받아

설정 판넬에 나타나는 것들(그림)에 따라 각 클래스가 다시 만들어 진다.

즉, 설정 판넬에

이미지 파일을 선택하게 하면 nicImageButton,

웹사이트 주소 정보를 입력 받으면 nicLinkButton,

글자색을 선택하게 하면 nicEditorColorButton,

배경색을 선택하게 하면 nicEditorBgColorButton 클래스를 구성하였다.

HTML select 태그를 이용하지 않고 div를 이용하여 직접 개발하였다.

HTML select 태그는 설정 판넬에 리스트들이 한 라인씩 출력되고,

사용자가 선택하면 

버튼 부분에 해당 내용이 출력되면서 설정 판넬이 사라진다.

nicEditorSelect로 이 기능을 구현하고

설정 판넬의 내용에 따라 3가지 하위 클래스를 개발하였다.

폰트 이름이 나열되는 nicEditorFontFamilySelect,

폰트 크기가 나열되는 nicEditorFontSizeSelect,

폰트 포맷(스타일)이 나열되는 nicEditorFontFormatSelect 클래스를 개발하였다.

먼저, NicEdit에서 사용되는 (일반적인) 버튼의 클래스이자

다른 버튼들의 가장 상위의 부모인 nicEditorButton을 살펴 본다.

nicEditorButton은 bkClass에서 상속 받아

생성자에서 DIV를 이용하여 버튼을 만들어 낸다.

버튼의 플랫(flat) 기능을 위해 active, deactive 함수가 있다.

마우스가 버튼 위(hover)에 오면 버튼 외곽선을 그리고(active),

벗어나면 원 상태로 돌아가는 기능을 가지고 있다(deactive).

이러한 상태 변화는 updateState에서 이루어 진다.

NicEdit에 포커스가 있으면 버튼이 눌러질 수 있지만 (enable)

포커스가 다른 곳으로 이동하면 버튼을 누를 수 없게 만든다(disable).

버튼을 선택하면(mouseClick),

nicEditorConfig에서 지정된 command를 실행한다.

nicEditorPane은 판넬(div)를

보였다가 숨기는 기능이 전부 이다(toggle).

이 판넬에 컬러 박스들을 보이거나,

리스트들을 보여서 사용자가 선택하게 하는 역할을 한다.

nicEditorAdvancedButton은

nicEditorPane을 마우스로 버튼을 클릭하면 보이고, 

다시 버튼을 클릭하면 숨기는 기능이 첫번째이다 (mouseClick).

그리고, 아주 재미있는 기능이 addForm()함수에 있다.

Json 데이터를 파라메터로 받아서

nicEditorPane에 HTML form과 입력 상자 등을 자동으로 생성한다.

nicEditorAdvancedButton의

addForm() 함수 코드를 살펴보는 것은 다소 어렵기 때문에

자식 클래스에서 호출하는 사용법 위주로 살펴본다.

자식 클래스의 역할은

nicEditorPane에 각자에게 필요한 정보를 입력하도록 설정하고

입력 받은 값 데로 실행하는 것이다.

nicLinkButton은 URL 링크 정보를 필요로 한다.

따라서, URL 링크를 입력하는 입력 상자(text-href),

링크의 제목(text - title),

링크를 사용자가 클릭했을 때,

현재 창에 해당 링크 내용을 출력할 것인지,

새로운 창에 출력할 것인지 선택하게 하는 선택창(select - target)의

3개 HTML 태그가 필요하다.

폼 작성 완료를 위한 버튼(submit)도 있어야 한다.

nicLinkButton은 addPane과 submit메소드 두가지로 구성되었다.

addPane은 앞서 언급한 입력들을 위해

nicEditorPane에 설정할 내용들을 설정하는 일종의 이벤트로

부모인 nicEditorAdvancedButton에서

nicEditorPane이 보일 때 호출하고 있다.

부모에서 호출하기 때문에

자식에서는 오버라이드(override)한 것처럼 사용한다.

submit도 유사한데

부모에게서 선언하고, 구체적인 코드를 작성하지 않았다.

구체적인 코드는 자식에게서 작성하여 (override)

객체 지향 프로그래밍처럼 구현하였다.

nicLinkButton의 addPane에서 사용된 addForm 코드와

실행 화면을 비교하며 사용법을 정리한다.

var nicLinkButton = nicEditorAdvancedButton.extend({     addPane: function() {         this.ln = this.ne.selectedInstance.selElm().parentTag("A");         this.addForm({             "": {                 type: "title",                 txt: "Add/Edit Link"             },             href: {                 type: "text",                 txt: "URL",                 value: "http://",                 style: {                     width: "150px"                 }             },             title: {                 type: "text",                 txt: "Title"             },             target: {                 type: "select",                 txt: "Open In",                 options: {                     "": "Current Window",                     _blank: "New Window"                 },                 style: {                     width: "100px"                 }             }         }, this.ln)     },

빈문자열, href, title, target 4가지의 Json 키가 있고

각각이 다시 Json 값을 가지고 있다.

이 4가지가 실행 화면에서 각각 한 행 인 걸 알 수 있다.

이 키는 각 입력 컨트롤의 아이디(HTML ID 속성)가 되는 것으로

빈 문자열은 입력 받는 것이 없다는 것을 의미한다.

그리고 type은 입력 컨트롤의 종류로

title은 입력 컨트롤이 아닌 단순 문자열(txt) 출력을 의미하고,

text는 입력 상자(Text 태그),

select는 선택 상자(Select 태그)

contents는 다중 입력 상자(TextArea 태그)를 생성한다.

먼저, 빈 문자열은 입력 받는 컨트롤이 없다는 걸 의미한다.

따라서 하위 속성에서 type은 단순 문자열 출력인 title이고,

추가할 링크를 입력하라(Add/Edit Link)는 제목이 주어진다.

다음의 href는 입력 상자(type:text)를 생성하고

기본값(value)을 "http://" 준 뒤 사용자의 입력을 대기한다.

submit후에 아이디가 href 인 입력 상자의 값을 가져와 사용한다.

Txt 속성은 일종의 label 역할을 한다.

하나의 행은 안내문 역할을 하는 txt와

사용자의 입력을 나타내는 type로 구성되었다.

세 번째로 title키는

제목을 입력 받는데, url의 제목을 의미한다.

마지막으로 target은 type이 select로

HTML 선택 박스(select)를 생성한다.

선택할 항목은 options하위에 json으로 지정한다.

addForm을 호출하면

마지막에 submit 버튼(질의보내기)이 무조건 생성된다.

이 버튼이 submit()와 연동되어 있다.

nicLinkButton에서 오버라이드한 submit()의 내용은

사용자가 입력한 url 값이 없으면 오류 메시지를 출력하고

값이 있으면 먼저 판넬부터 숨긴다 (제거-removePane).

그리고 사용자가 입력한 값을 파라미터로

nicCommand를 실행하여 html link (a href)를 생성하게 된다.

정리하면

nicEditorButton, nicEditorAdvancedButton, nicLinkButton으로 

이어지는 계층 구조를 이해하고

왜 계층이 생겼는지 이해해야 한다.

모든 버튼에 필요한 기능은 nicEditorButton 클래스,

이 중에 버튼을 누르면 

상세 정보를 입력할 수 있도록 하는 nicLinkButton 클래스가 있다.

NicLinkButton 이 외에도

nicEditorColorButton, nicEditorBgColorButton, nicImageButton이 있는데

이들의 공통점은 설정 판넬(nicEditorPane)이 필요하다는 것이고

차이점은 설정 판넬에서 입력 받는 값들과

실행 방식(command)은 각각 모두 다르다는 것이다.

공통적인 것은 모아서 구조화 하거나 객체지향으로 개발하게 되는데,

여기서는 부모화(추상화 - nicEditorAdvancedButton)해서 객체지향 프로그래밍을 하였다.

차이점은 각각의 클래스에서 구현하게 된다.

나머지 3개의 클래스에 대한 설명은 하지 않지만

어떤 차이를 어떻게 구현했는지 알면 도움이 많이 되니 확인해 보길 바란다.

마지막으로

nicEditorSelect 클래스를 정리한다.

nicEditorSelect의 자식들은

nicEditorAdvancedButton의 자식들과 달라서 모두 유사하다.

즉, 버튼과 선택된 내용을 보여주는 라벨이 있는 select 태그로 구성되었다.

nicEditorSelect는 nicEditorButton과

nicEditorAdvancedButton를 합친 기능을 하고 있다.

nicEditorSelect는 버튼을 누르면 설정 판넬(nicEditorPane)이 나오는 것으로 

nicEditorAdvancedButton과 유사하다.

차이점은 버튼 보다 너비가 넓고, 

넓은 공간에 사용자가 선택한 값을 출력한다는 차이가 있다.

그리고, 설정 판넬의 내용도 사용자 입력 값이 아니라

사용자가 선택할 수 있는 리스트들 

(폰트명-Arial, Comic Sans, Courier New 등, 

폰트크기-P, pre, h6, h5 등, 

폰트 형식-8pt, 10pt, 12pt, 14pt 등)이 나열되는 것으로 

HTML SELECT 태그와 동일하다.

차이점은 리스트에서 

폰트명일 경우 폰트명이 적용되어 값이 출력되고,

폰트 크기일 경우 폰트 크기가 적용되어 출력된다는 것이다 (위 그림 참조).

nicEditorSelect 하위에 3개의 자식이 있는 것은

폰트명, 폰트크기, 폰트 형식이 적용된 것을 보여 주기 위해서 이다.

따라서, 자식 클래스인 

폰트명(nicEditorFontFamilySelect), 

폰트크기(nicEditorFontFormatSelect), 

폰트형식(nicEditorFontSizeSelect)에는

리스트 항목을 나타내는 Json 데이터인 sel 변수와

항목 개수 만큼(for (itm in this.sel) )

폰트명(font face), 폰트 크기(font size), 폰트 형식(p, pre, h6…) 태그를

적용하는 코드가 있을 뿐이다.

이렇게 HTML 적용된 리스트가

nicEditorSelect 클래스 자식들이다.

var nicEditorFontSizeSelect = nicEditorSelect.extend({     sel: {         1: "1&nbsp;(8pt)",     ~~ 생략 ~~     },     init: function() {         this.setDisplay("Font&nbsp;Size...");         for (itm in this.sel) {             this.add(itm, '<font size="' + itm + '">' + this.sel[itm] + "</font>")         }     } }); var nicEditorFontFamilySelect = nicEditorSelect.extend({     sel: {         arial: "Arial",     ~~ 생략 ~~     },     init: function() {         this.setDisplay("Font&nbsp;Family...");         for (itm in this.sel) {             this.add(itm, '<font face="' + itm + '">' + this.sel[itm] + "</font>")         }     } }); var nicEditorFontFormatSelect = nicEditorSelect.extend({     sel: {         p: "Paragraph",     ~~ 생략 ~~     },     init: function() {         this.setDisplay("Font&nbsp;Format...");         for (itm in this.sel) {             var A = itm.toUpperCase();             this.add("<" + A + ">", "<" + itm + ' style="padding: 0px; margin: 0px;">' + this.sel[itm] + "</" + A + ">")         }     } });

계층 구조 중심으로 정리하면서

nicEditorButton의 메서드에 대한 정리가 부족하다.

nicEditorButton의 주요 메서드 중

버튼 활성과 관련된 것은 라이브러리에서 언급했다.

대부분 마우스가 버튼 위에 올라오면 (mousemove, hover)

평평한 버튼 주변에 선이 생기게 하는 기능,

마우스로 클릭한 기능(mousedown - activate/deactivate),

에디터가 포커스를 잃으면 버튼을 누를 수 없게 하는 기능(disable, enable) 등이 구현되어 있다.

모두 평범한 코드인데

checkNodes는 HTML DOM 구조를 조금 활용한 코드이다.

nicEditorInstance에서 언급한 Selection, Range로

현재 커서의 위치에 있는 HTML 개체를 가져와서

HTML 태그(CSS)가 무엇인지 판단하여 버튼을 활성화 시킨다.

do {     if (this.options.tags && bkLib.inArray(this.options.tags, B.nodeName)) {         this.activate();         return true     } } while (B = B.parentNode && B.className != "nicEdit"); B = $BK(A); while (B.nodeType == 3) {     B = $BK(B.parentNode) } if (this.options.css) {     for (itm in this.options.css) {         if (B.getStyle(itm, this.ne.selectedInstance.instanceDoc) == this.options.css[itm]) {             this.activate();             return true         }     } }

위 코드에서

앞서의 do 문에서는 nicEditorConfig에서 지정되어

각 버튼에게 주어진 tags값과 태그의 nodeName이 같은지(inArray) 비교하여

버튼을 활성화(activate) 시킨다.

현재 선택된 노드(B) 뿐 아니라 부모(parentNode) 노드까지 찾아보게(do) 구현하였다.

또는 CSS로 작성된 태그를 검출할 수 있도록

현재 선택된 노드(B)로 부터 CSS를 추출하여(getStyle) 버튼에 지정된 CSS와 비교한다.

checkNodes의 기능은 에디터에서 제법 중요한 기능이고

노드 탐색(parentNode)등의 코드는

JS 라이브러리(도구)에서 많이 사용되는 방법이라 잘 익혀두는 것이 좋다.