에디터 컴포넌트들이 한 줄로 표시되도록 수정

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@7965 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/editor/skins/xeed/editor.html

@@ -23,6 +23,7 @@
 	<div class="tool">
 		<a href="#edit" class="skip">{$lang->edit->jumptoedit}</a>
 		<div class="t1">
+			<button type="button" class="mo"><span>기능 더보기/접기</span></button>
 			<ul class="u1">
 				<li class="ti al">
 					<a href="#xdal" class="tb">
@@ -35,15 +36,16 @@
 			</ul>
             <!--@if($enable_component)-->
 			<!-- editor components -->
+			<!--@foreach($component_list as $component_name => $component)-->
 			<ul class="u2">
-				<!--@foreach($component_list as $component_name => $component)-->
 				<li class="ti"><a href="{getUrl('module','editor','act','dispEditorPopup','editor_sequence', $editor_sequence, 'component', $component_name)}" target="_blank" class="tb" id="component_{$editor_sequence}_{$component_name}" title="{$component->title}">{$component->title}</a></li>
-				<!--@end-->
 			</ul>
+			<!--@end-->
 			<!-- //editor components -->
 			<!--@end-->
 		</div>
 		<div class="t2">
+			<button type="button" class="mo"><span>기능 더보기/접기</span></button>
 			<ul class="u1">
 				<li class="ti ud disable"><button type="button" class="tb ud"><span>{$lang->edit->undo} Ctrl+Z</span></button></li>
 				<li class="ti rd disable"><button type="button" class="tb rd da"><span>{$lang->edit->redo} Ctrl+Y</span></button></li>

modules/editor/skins/xeed/js/xeed.js

@@ -100,6 +100,10 @@ Xeed = xe.createApp('Xeed', {
 		this.$toolbar
 		    .delegate('li.ti>button', 'mouseover', function(){ $(this[_pn_]).addClass('hover') })
 		    .delegate('li.ti>button', 'mouseout', function(){ $(this[_pn_]).removeClass('hover') });
+			
+		// window resize
+		$(window).resize(bind(this,this._onresize)).load(bind(this,this._onresize));
+		this.$toolbar.find('button.mo').click(function(){ $(this).nextAll('ul._overflow').toggle(); });
 
 		// register plugins
 		this.registerPlugin(new Hotkey); // Hotkey must be the first
@@ -219,6 +223,28 @@ Xeed = xe.createApp('Xeed', {
 			replaceHTML : function(html){ self.cast('PASTE_HTML', [html]) }
 		};
 	},
+	
+	_onresize : function() {
+		var $tb = this.$toolbar, $t1 = $tb.find('>.t1'), $t2 = $tb.find('>.t2'), $t1_mo, $t2_mo, base_top;
+		
+		base_top = $t1.find('>ul').removeClass('_overflow').show().get(0).offsetTop;
+		$t1_mo   = $t1.find('>button.mo').hide();
+		$.each($t1.find('>ul').get().reverse(), function(){
+			if (this.offsetTop > base_top) {
+				$(this).addClass('_overflow').hide();
+				$t1_mo.show();
+			}
+		});
+
+		base_top = $t2.find('>ul').removeClass('_overflow').show().get(0).offsetTop;
+		$t2_mo = $t2.find('>button.mo').hide();
+		$.each($t2.find('>ul').get().reverse(), function(){
+			if (this.offsetTop > base_top) {
+				$(this).addClass('_overflow').hide();
+				$t2_mo.show();
+			}
+		});
+	},
 
 	/**
 	 * @brief Get an HTML code of the content

modules/editor/skins/xeed/xd.css

@@ -29,6 +29,7 @@ body{height:100%}
 .xdlw .strong{font-weight:bold}
 /* Background */
 .xd .tool,
+.xd .mo,
 .xd .mode,
 .xd .resize,
 .xd .t1 .u1,
@@ -69,6 +70,7 @@ body{height:100%}
 .xdlw .iHead h2 em,
 .xdlw label{font-family:Tahoma, Geneva, sans-serif}
 /* Hidden Text */
+.xd .tool .mo span,
 .xd .t1 .tb .img span,
 .xd .t1 .tb .media span,
 .xd .t1 .tb .file span,
@@ -96,6 +98,7 @@ body{height:100%}
 .xd .mode ul button{padding:0 10px;font-size:11px}
 /* Tool - Common */
 .xd .tool{background-position:0 -1140px;background-repeat:repeat-x;background-color:#f4f4f4;position:relative;z-index:3}
+.xd .tool .mo{display:none;position:absolute;top:0;right:0;height:25px;width:16px;background-position:-300px -252px}
 .xd .skip{position:absolute;display:block;top:0;left:0;width:1px;height:1px;overflow:hidden;color:#333;text-indent:1em;text-decoration:none;font-size:12px}
 .xd .skip:hover,
 .xd .skip:active,
@@ -103,6 +106,7 @@ body{height:100%}
 /* Tool - 1 */
 .xd .t1{position:relative;z-index:2;padding:0 15px 0 0;border-bottom:1px solid #e0dedf;*zoom:1}
 .xd .t1:after{content:"";display:block;clear:both}
+.xd .t1 .mo{top:0}
 .xd .t1 .u1,
 .xd .t1 .u2{margin:0 0 -1px 0;_margin-top:-1px;background-repeat:repeat-x;background-position:0 -1140px;float:left;_float:none;display:inline;*zoom:1}
 .xd .t1 .ti{float:left;display:inline;border:1px solid #e0dedf;margin:-1px 0 0 -1px;_margin-top:0;_margin-bottom:-1px;*zoom:1}
@@ -118,6 +122,7 @@ body{height:100%}
 /* Tool - 2 */
 .xd .t2{position:relative;z-index:2;border-top:1px solid #e0dedf;border-bottom:1px solid #b5b5b5;padding:5px 10px 0 5px;margin:-1px 0 0 0;*zoom:1}
 .xd .t2:after{content:"";display:block;clear:both}
+.xd .t2 .mo{top:3px}
 .xd .t2 .u1,
 .xd .t2 .u2,
 .xd .t2 .u3,