http://medytoxacademy.com/weven_asset/js/bm2/manager/ToolManager.js

1/**
2 * Created by kjhmac on 2017-01-14.
3 */
4
5
6TOOL_TYPE = {
7    DOM : "dom"
8    ,TEXT : "text"
9    ,IMAGE : "image"
10    ,VIDEO : "video"
11    ,TABLE : "table"
12    ,CHART : "chart"
13    ,MAP : "map"
14    ,FILE : "file"
15    ,LINE : "line"
16    ,ICON : "icon"
17};
18
19bm.toolManager = {
20
21    history : []
22    ,typeList : ["dom", "text", "image", "video", "table", "chart", "map", "file", "line", "icon" ]
23    ,toolList : {}
24    ,toolset : {}
25    ,target : {}
26    ,btnRepository : {}
27    ,activeToolType : ""
28
29    ,init : function(){
30        this.crawl();
31        this.toolInit();
32    }
33
34    ,crawl : function(){
35        var len = this.typeList.length;
36        var type, list;
37        for( var i=0; i<len; i++ ){
38
39            type = this.typeList[i];
40            if( type == "dom" ){
41                list = $('[data-wv-layout-element="block"]');
42            }else{
43                list = $(".wveditor_" + type );
44            }
45
46            this.target[type] = list;
47        }
48    }
49
50    ,toolInit : function(){
51
52        var len = this.typeList.length;
53        var type, tool;
54        for( var i=0; i<len; i++ ){
55            type = this.typeList[i];
56            tool = this.getTool( type );
57            tool.init( this.target[type] );
58        }
59    }
60
61    ,setActiveTool : function( type ){
62        if( type == "dom" ) return;
63
64        this.activeToolType = type;
65        this.hideAll( "dom " + this.activeToolType );
66    }
67
68    ,active : function(){
69        var len = this.typeList.length;
70        var type, tool;
71        for( var i=0; i<len; i++ ){
72            type = this.typeList[i];
73            tool = this.getTool( type );
74            tool.active();
75        }
76
77
78        if(this.target["text"].length > 0 ){
79            this.target["text"].each(function(){
80                if( $(this).attr('contentEditable') != "true" ){
81                    $(this).attr('contentEditable', "true" );
82                    $(this).attr('spellcheck', "false" );
83                }
84            });
85
86            // text 에디터가 있으므로 selectionManager 를 활성화해서 선택영역을 모니터링함.
87            bm.selectionManager.active();
88        }
89    }
90
91    ,deactive : function(){
92        var len = this.typeList.length;
93        var type, tool;
94        for( var i=0; i<len; i++ ){
95            type = this.typeList[i];
96            tool = this.getTool( type );
97            tool.deactive( this.target[type] );
98            tool.hide();
99        }
100
101
102        if(this.target["text"].length > 0 ){
103            this.target["text"].each(function(){
104                if( $(this).attr('contentEditable') == "true" ){
105                    $(this).attr('contentEditable', "false" );
106                    $(this).attr('spellcheck', "false" );
107                }
108            });
109
110            // text 에디터가 있으므로 selectionManager 를 활성화해서 선택영역을 모니터링함.
111            bm.selectionManager.deactive();
112        }
113    }
114
115    ,hideAll : function( excludeType ){
116        var len = this.typeList.length;
117        var type, tool;
118        for( var i=0; i<len; i++ ){
119            type = this.typeList[i];
120
121            if( excludeType.indexOf( type ) > -1 ) continue;
122
123            tool = this.getTool( type );
124            tool.hide();
125        }
126    }
127
128    ,hideTool : function( type ){
129        var tool = this.getTool( type );
130        if( tool ){
131            tool.hide();
132        }
133    }
134
135
136    ,getTool : function( type ){
137        var tool = this.toolList[type];
138        if( !tool ){
139            var className = "Tool"+type.charAt(0).toUpperCase() + type.slice( 1, type.length);
140            tool = this.toolList[type] = new window[className]();
141        }
142
143        return tool;
144    }
145
146
147    ,makeBtn : function( type ){
148        var str = this.getBtnStr( type );
149        return bm.html( str );
150    }
151
152    ,getBtn : function( type ){
153        // 재사용될 일이 없으므로 우선 매번 생성하도록 함.
154        return this.makeBtn( type );
155
156
157        if( !this.btnRepository[type] ){
158            this.btnRepository[type] = this.makeBtn( type );
159        }
160        return this.btnRepository[type];
161    }
162
163    ,getBtnStr : function( type ){
164        switch( type ){
165            case "|" : str = '<div class="tool_border"></div>'; break;
166            case "moveup" : str = '<div class="tool_btn tool_moveup" title="위로 이동"></div>'; break;
167
168            // text
169            case "text_history_undo" : str = '<div class="tool_btn tool_undo" title="이전으로"></div>'; break;
170            case "text_history_redo" : str = '<div class="tool_btn tool_redo" title="다음으로"></div>'; break;
171            case "text_font" : str = '<div class="tool_btn tool_text_font" title="글꼴"><div class="label">본고딕</div></div>'; break;
172            case "text_size" : str = '<div class="tool_btn tool_text_heading" title="타이틀"><div class="label">12px</div></div>'; break;
173            case "text_align_left" : str = '<div class="tool_btn tool_text_align_left" title="텍스트 왼쪽 정렬"></div>'; break;
174            case "text_align_center" : str = '<div class="tool_btn tool_text_align_center" title="텍스트 가운데 정렬"></div>'; break;
175            case "text_align_right" : str = '<div class="tool_btn tool_text_align_right" title="텍스트 오른쪽 정렬"></div>'; break;
176            case "text_deco_underline" : str = '<div class="tool_btn tool_text_underline" title="밑줄"></div>'; break;
177            case "text_deco_bold" : str = '<div class="tool_btn tool_text_bold" title="굵기"></div>'; break;
178            case "text_deco_italic" : str = '<div class="tool_btn tool_text_italic" title="이탤릭"></div>'; break;
179            case "text_deco_cancelline" : str = '<div class="tool_btn tool_text_c

179ancelline" title="취소선"></div>'; break;
180            case "text_link" : str = '<div class="tool_btn tool_text_link" title="링크"></div>'; break;
181            case "text_color" : str = '<div class="tool_btn tool_text_color" title="텍스트 색상"><div class="text_color_thumb_con"><span class="text_color_thumbnail"></span></div></div>'; break;
182            case "text_background" : str = '<div class="tool_btn tool_text_background" title="텍스트 배경색상"><div class="text_background_thumb_con"><span class="text_background_thumbnail">A</span></div></div>'; break;
183            case "text_lineHeight" : str = '<div class="tool_btn tool_text_line_height" title="줄간격"></div>'; break;
184            case "text_listStyle" : str = '<div class="tool_btn tool_text_list_style" title="리스트 스타일"></div>'; break;
185            case "text_load" : str = '<div class="tool_btn tool_table" title="표"></div>'; break;
186            // case "text_loadTool_img" : str = '<div class="tool_btn tool_image" title="이미지"></div>'; break;
187            // case "text_loadTool_table" : str = '<div class="tool_btn tool_table" title="표"></div>'; break;
188            // case "text_loadTool_video" : str = '<div class="tool_btn tool_video" title="비디오"></div>'; break;
189            // case "text_loadTool_chart" : str = '<div class="tool_btn tool_chart" title="차트"></div>'; break;
190            // case "text_loadTool_map" : str = '<div class="tool_btn tool_map" title="지도"></div>'; break;
191            // case "text_loadTool_file" : str = '<div class="tool_btn tool_file" title="파일"></div>'; break;
192            // case "text_loadTool_line" : str = '<div class="tool_btn tool_line" title="구분선"></div>'; break;
193
194            // dom property
195            case "dom_width_limit" : str = '<div class="tool_btn tool_dom_width_limit" title="너비 지정"></div>'; break;
196            case "dom_width_unlimit" : str = '<div class="tool_btn tool_dom_width_unlimit" title="너비 최대"></div>'; break;
197            case "dom_align_left" : str = '<div class="tool_btn tool_dom_align_left" title="내용 왼쪽 정렬"></div>'; break;
198            case "dom_align_center" : str = '<div class="tool_btn tool_dom_align_center" title="내용 가운데 정렬"></div>'; break;
199            case "dom_align_right" : str = '<div class="tool_btn tool_dom_align_right" title="내용 오른쪽 정렬"></div>'; break;
200            case "dom_background" : str = '<div class="tool_btn tool_dom_background" title="배경색"></div>'; break;
201            case "dom_backgroundImage" : str = '<div class="tool_btn tool_image" title="배경 이미지"></div>'; break;
202            case "dom_border" : str = '<div class="tool_btn tool_dom_border" title="외곽선"></div>'; break;
203            case "dom_margin" : str = '<div class="tool_btn tool_dom_margin" title="바깥쪽 여백"></div>'; break;
204            case "dom_padding" : str = '<div class="tool_btn tool_dom_padding" title="안쪽 여백"></div>'; break;
205            case "dom_sourceCode" : str = '<div class="tool_btn tool_source" title="소스코드"></div>'; break;
206
207            // element
208            case "element_text_input" : str = '<div class="tool_btn tool_text_input" title="텍스트 편집영역"></div>'; break;
209            case "element_image" : str = '<div class="tool_btn tool_image" title="이미지"></div>'; break;
210            case "element_video" : str = '<div class="tool_btn tool_video" title="비디오"></div>'; break;
211            case "element_table" : str = '<div class="tool_btn tool_table" title="표"></div>'; break;
212            case "element_chart" : str = '<div class="tool_btn tool_chart" title="차트"></div>'; break;
213            case "element_map" : str = '<div class="tool_btn tool_map" title="지도"></div>'; break;
214            case "element_file" : str = '<div class="tool_btn tool_file" title="파일"></div>'; break;
215            case "element_line" : str = '<div class="tool_btn tool_line" title="구분선"></div>'; break;
216
217            // table
218            case "table_merge" : str = '<div class="tool_btn tool_table_merge" title="셀병합,병합취소"></div>'; break;
219            case "table_lineAdd" : str = '<div class="tool_btn tool_table_add" title="추가"></div>'; break;
220            case "table_cellWidth" : str = '<div class="tool_btn tool_table_add" title="너비조절"></div>'; break;
221            case "table_lineDelete" : str = '<div class="tool_btn tool_table_delete" title="삭제"></div>'; break;
222            case "table_border" : str = '<div class="tool_btn tool_table_border" title="테두리"></div>'; break;
223            case "table_textAlign" : str = '<div class="tool_btn tool_table_text_align" title="텍스트 정렬"></div>'; break;
224            case "table_explain" : str = '<div class="tool_btn tool_table_explain" title="설명"></div>'; break;
225            case "table_background" : str = '<div class="tool_btn tool_table_background" title="셀배경"><div class="table_background_thumb_con"><span class="table_background_thumbnail"></span></div></div>'; break;
226
227            // video
228            case "video_connect" : str = '<div class="tool_btn tool_connect" title="파일연결"></div>'; break;
229            case "video_image" : str = '<div class="tool_btn tool_image" title="기본이미지 설정"></div>'; break;
230            case "video_option" : str = '<div class="tool_btn tool_option" title="효과설정"></div>'; break;
231
232            // map
233            case "map_google" : str = '<div class="tool_btn tool_map_google" title="구글맵"></div>'; break;
234            case "map_naver" : str = '<div class="tool_btn tool_map_n

234aver" title="네이버맵"></div>'; break;
235            case "map_daum" : str = '<div class="tool_btn tool_map_daum" title="다음맵"></div>'; break;
236            case "map_address" : str = '<div class="option tool_map_option"> <div class="option_row"> <input type="text" name="" id="" class="editor_input_text" placeholder="주소명"> &nbsp;&nbsp;<input type="button" class="editor_input_button" value="확인"> <span class="text_link_wrap"> <span class="text_link_help"></span> <div class="text_link_help_box"> <p>url 입력법 설명</p> <ol class="order_list_con"> <li>url 입력 방법 설명 (iframe 입력방법 등)</li> </ol> </div> </span> </div> <div class="option_row"> <p>예) 금천구 가산디지털2로 123</p> <p>예) 금천구 가산동 426-5</p> </div> </div> '; break;
237
238            // file
239            case "file_select" : str = '<div class="tool_btn tool_file_help" data-wv-toolop-value="select" title="파일선택"><div class="text_link_help_box"><p>유의사항</p><ol class="order_list_con"><li>파일 업로드 용량 제한 10MB</li></ol></div></div>'; break;
240            case "file_form" : str = '<div class="tool_btn tool_form" title="표시유형 선택"></div>'; break;
241            case "file_manager" : str = '<div class="tool_btn tool_form" title="파일매니저 선택"></div>'; break;
242
243            // line
244//            case "line_padding" : str = '<div class="tool_btn tool_line_padding" title="내부여백"></div>'; break;
245            case "line_border" : str = '<div class="tool_btn tool_line_border" title="스타일"></div>'; break;
246
247            // menu
248            case "menu" : str = '<div class="tool_btn tool_menu" title="메뉴"></div>'; break;
249            case "menu_more" : str = '<div class="tool_btn tool_menu_more" title="메뉴 더보기"></div>'; break;
250            case "more" : str = '<div class="tool_btn tool_more" title="더보기"></div>'; break;
251        }
252
253        var str;
254        if( !str ){
255            throw "toolset 에서 정의되지 않은 button type 을 setBtnSet 을 통해 호출했습니다";
256        }
257        return str;
258    }
259
260}