1. Complete to write a script for the theme page

2. Add css files for korean and japanese
3. Modified some styles including theme setting page and language selector


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

modules/admin/tpl/css/admin.css

@@ -550,27 +550,31 @@ input#lang_mn{background:url(../img/flag.mn.gif) no-repeat 96% center}
 #ftpSuggestion li button:focus{background:#eee}
 /* Theme & Skin Preview */
 .thumbPreview li{position:relative;padding-left:10px;padding-right:10px}
-.thumbPreview li.active{background:#f9f9f9}
+.thumbPreview li.active.highlight{background:#f9f9f9}
 .thumbPreview .prevToggle{position:absolute;top:8px;right:10px;line-height:16px;padding:0 18px 0 0;text-decoration:none;background:url(../img/iconArrow.gif) no-repeat right -32px}
 .thumbPreview li.active .prevToggle{background-position:right 0}
 .thumbPreview .a{border:0;margin:0;zoom:1}
 .thumbPreview .a:after{content:"";display:block;clear:both}
 .thumbPreview .i{float:left;vertical-align:top;margin:0 1em 1em 0;padding:0;border:0;zoom:1}
 .thumbPreview .i:after{content:"";display:block;clear:both}
-.thumbPreview .i .thumb{position:relative;width:120px;height:70px;padding:10px 0 0 0;text-align:center;overflow:hidden;border:1px solid #ddd;display:block;cursor:pointer;background:#fff}
+.thumbPreview .i .thumb{position:relative;width:124px;height:74px;padding:0;margin-bottom:3px;text-align:center;overflow:hidden;border:1px solid #ddd;display:block;cursor:pointer;background:#fff}
-.thumbPreview .i .thumb .frame{position:absolute;width:120px;height:70px;left:0;top:0;border:3px solid #fff}
+.thumbPreview .i .thumb .frame{position:absolute;width:120px;height:70px;left:0;top:0;border:2px solid #fff;overflow:hidden}
 .thumbPreview .i .thumb img{width:120px;margin:-10px 0 0 0}
+.thumbPreview .i label{display:block;position:relative;top:0;left:2px;width:122px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .thumbPreview .i input{display:none}
 .thumbPreview .i ul{display:none}
-.thumbPreview .i.checked{display:block;float:none}
+.thumbPreview .selected .i{display:block;float:none}
-.thumbPreview .i.checked .thumb{float:left;width:180px;height:120px;margin:0 1em 0 0;border:2px solid #eee}
+.thumbPreview .selected .i .thumb{float:left;width:186px;height:126px;margin:0 1em 0 0;border:2px solid #eee}
-.thumbPreview .i.checked .thumb .frame{width:180px;height:120px}
+.thumbPreview .selected .i .thumb .frame{width:180px;height:120px}
-.thumbPreview li.active .i.checked .thumb{border-color:#5ea8f6}
+.thumbPreview li.active.highlight .selected .i .thumb{border-color:#5ea8f6}
-.thumbPreview .i.checked .thumb img{width:180px;position:relative;z-index:-1}
+.thumbPreview .selected .i .thumb img{width:180px;position:relative;z-index:-1}
-.thumbPreview li.active .i.checked .thumb img{z-index:auto}
+.thumbPreview li.active .selected .i .thumb img{z-index:auto}
-.thumbPreview .i.checked label{cursor:text}
+.thumbPreview .selected .i label{cursor:text}
-.thumbPreview .i.checked ul{display:block;list-style:none;border:0;margin:1em 0 1em 200px}
+.thumbPreview .selected .i ul{display:block;list-style:none;border:0;margin:1em 0 1em 200px}
-.thumbPreview .i.checked li{border:0;padding:0;margin:0 0 .2em 0}
+.thumbPreview .selected .i li{border:0;padding:0;margin:0 0 .2em 0}
+.thumbPreview.jx .i label{display:inline;width:auto}
+.thumbPreview.jx .i.noDirection {display:none}
+.thumbPreview.jx .i input {display:inline}
 #skin .showAll{float:right;border:0;overflow:visible;padding:0 18px 0 0;cursor:pointer;color:#00f;background:url(../img/iconArrow.gif) no-repeat right -32px}
 #skin .showAll.hideAll{background-position:right 0}
 /* Sign Up Form */

modules/admin/tpl/css/admin_jp.css

@@ -0,0 +1,2 @@
+@charset "utf-8";
+body,table,input,textarea,select,button{font-family:"MS PGothic","Osaka",Arial,sans-serif}

modules/admin/tpl/css/admin_ko.css

@@ -0,0 +1,2 @@
+@charset "utf-8";
+body,table,input,textarea,select,button{font-family:"나눔고딕",NanumGothic,"맑은고딕",MalgunGothic,AppleGothic,"돋움",Dotum,"굴림",Gulim,sans-serif}

modules/admin/tpl/js/admin.js

@@ -23,25 +23,28 @@ jQuery(function($){
 	$input_rc
 		.change(function(){
 			var name = $(this).attr('name');
-			$input_rc
+			$input_rc.filter(function(){ return this.name == name })
-				.filter('[name="'+name+'"]:not(:checked)')
+				.next('label').css('font-weight', 'normal').end()
-					.next('label').css('font-weight', 'normal').end()
+				.filter(':checked')
-				.end()
+					.next('label').css('font-weight', 'bold').end();
-				.next('label').css('font-weight', 'bold').end();
 		})
 		.change();
 
 	// Toogle checkbox all
-	$('.form th>:checkbox')
+	$('.form th>input:checkbox')
 		.change(function() {
-			var $this = $(this), self = this, name;
+			var $this = $(this), name = $this.data('name');
 
-			name = $this.data('target');
+			$this.closest('table')
-			$this.closest('table').find('input:checkbox')
+				.find('input:checkbox')
-				.filter(function(){ return (this.name == name) })
+					.filter(function(){
-					.prop('checked', $this.prop('checked'))
+						var $this = $(this);
-					.filter(function(){ return (this.parentNode.nodeName != 'TH') })
+						return ($this.attr('name') == name) || ($this.data('name') == name);
-					.change();
+					})
+						.prop('checked', $this.prop('checked'))
+					.end()
+				.end()
+				.trigger('update.checkbox', name, this.checked);
 		});
 
 	// Global Navigation Bar

modules/admin/tpl/js/theme.js

@@ -1,74 +1,161 @@
 jQuery(function($){
 
 $('#theme,#skin')
+	// 'show all' button
+	.find('button.showAll')
+		.text('Show All')
+		.click(function(){
+			var $this = $(this), $thumbarea = $('#skin').find('>.thumbPreview');
+
+			if($this.toggleClass('hideAll').hasClass('hideAll')) {
+				$this.text('Hide All');
+				$thumbarea.children('li')
+					.addClass('active')
+					.removeClass('highlight')
+					.eq(0).addClass('highlight').end()
+					.find('>ul.a:not(.selected)').show();
+			} else {
+				$this.text('Show All');
+				$thumbarea.children('li')
+					.removeClass('active highlight')
+					.find('>ul.a:not(.selected)').hide();
+			}
+		})
+	.end()
 	// all thumbnail area
 	.find('>.thumbPreview')
+		.removeClass('jx')
 		// thumbnail list
-		.find('.a')
+		.find('ul.a')
-			.has('li.i:nth-child(2)')
+			.hide()
-				.after('<a href="#toggle-tp" class="prevToggle">Show</a>')
+			.before('<ul class="a selected"></ul>')
-				.next('a.prevToggle')
+			.prev('ul.a')
-					.click(function(){
+				.each(function(){
-						var $list = $(this).prev('.a');
+					var $this = $(this);
 
-						if($list.parent().hasClass('active')) {
+					$this
-							$list.trigger('hide.tp');
+						.delegate('span.thumb', 'click', function(){
-						} else {
+							$(this).closest('.a').nextAll('a.prevToggle:first').trigger('toggle.tp');
-							$list.trigger('show.tp');
+							return false;
+						})
+						.append($this.next('.a').find('>li.noDirection:first'));
+				})
+			.end()
+			.after('<a href="#toggle-tp" class="prevToggle">Show</a>')
+			.next('a.prevToggle')
+				.bind('toggle.tp', function(){
+					var $list = $(this).prev('.a'), $items, duration = 100;
+
+					$items = $list.closest('.thumbPreview').children('li').removeClass('highlight').end();
+
+					if($list.parent().toggleClass('active').hasClass('active')) {
+						$list.slideDown(duration).closest('li').addClass('highlight');
+					} else {
+						$list.slideUp(duration);
+					}
+				})
+				.click(function(){ $(this).trigger('toggle.tp'); return false; })
+			.end()
+			// thumbnail act as a label for a radio button
+			.find('span.thumb')
+				.attr('role', 'radio') // WAI-ARIA role
+				.click(function(){
+					$(this).next('input:radio').prop('checked', true).change();
+				})
+			.end()
+			.find('input:radio')
+				.bind('redraw', function(){
+					var $this = $(this), $big = $this.closest('.a').prev('.a'), val = $this.val();
+
+					// skip following actions if this checkbox was selected just before
+					if(val == $big.find('>li:eq(1)').data('value')) return;
+
+					$big.find('>li:not(.noDirection)').remove();
+
+					if(!val) { // select none
+						$big.children('li.noDirection').show();
+					} else {
+						$this.closest('li').clone()
+							.find('input:radio').remove().end()
+							.find('label')
+								.wrapInner('<strong>')
+ 								.find('>strong').unwrap().end()
+							.end()
+							.appendTo($big);
+
+						$big.find('>li.noDirection').hide();
+					}
+				})
+				.change(function(){
+					var $this = $(this);
+
+					$this.trigger('redraw');
+
+					// reselect theme
+					if($this.attr('name') != 'themeItem') {
+						$('#theme').trigger('select-theme');
+					}
+				})
+				.filter(':checked').change().end()
+				.filter('[name="themeItem"]')
+					.change(function(){
+						var $this = $(this), themes, thm, $radios, name;
+
+						themes = $('#theme').data('themes') || {};
+						thm = themes[$this.val()];
+
+						if(!thm) return;
+
+						$radios = $('#skin').find('.i > input:radio').filter('[value=""]').prop('checked', true).end();
+
+						for(var x in thm) {
+							if(!thm.hasOwnProperty(x)) continue;
+
+							name = (x == 'layout')?x:x+'-skin';
+
+							if(thm[x]) $radios.filter('[name="'+name+'"][value="'+thm[x]+'"]').prop('checked', true);
 						}
 
-						return false;
+						$radios.filter(':checked').trigger('redraw');
 					})
 				.end()
-			.end()
-			.bind('show.tp', function(){
-				$(this)
-					.parent().addClass('active').end()
-					.find('>.i:gt(0)')
-						.slideDown(100, function(){
-							var $this = $(this);
 
-							if(!$this.prev('.checked').length) return;
+$('#theme')
-						});
+	.bind('select-theme', function(){
-			})
+		var $this = $(this), themes, $radios, form, selection, sel_obj={}, sel_str, name;
-			.bind('hide.tp', function(){
-				$(this)
-					.parent().removeClass('active').end()
-					.find('>.i:gt(0)')
-						.slideUp(100, function(){
-							var $this = $(this);
 
-							if(!$this.prev('.checked').length) return;
+		themes  = $this.data('themes') || {};
-						});
+		$radios = $('#skin').find('.i > input:radio');
-			})
+		selection = $radios.filter(':checked[value!=""]').get();
-		.end()
+		form = $radios.get(0).form;
-		.find('.i:not(:first-child)').hide().end()
+
-		.bind('paint.pr', function(){
+		for(var i=0,c=selection.length; i < c; i++) {
-			$(this)
+			name = selection[i].name.match(/^layout|(\w+)-skin$/);
-				.find('.i')
+			sel_obj[name[1]||name[0]] = selection[i].value;
-					.removeClass('checked')
+		}
-					.find('.checkIcon').remove().end()
+
-				.end()
+		function obj2str(obj){
-				.find('.i:has(>input:checked)')
+			var s = '';
-					.addClass('checked')
+			for(var x in obj) {
-					.each(function(){
+				if(!obj.hasOwnProperty(x)) continue;
-						var $this = $(this);
+				if(x != 'layout' && !form.elements[x+'-skin']) continue;
-						$this.parent().prepend($this);
+				s += x+'\t'+obj[x]+'\n';
-					})
+			}
-				.end()
+			return s;
-				.find('.i.checked').show();
+		}
-		})
+
-		.trigger('paint.pr')
+		sel_str = obj2str(sel_obj);
-		.find('span.thumb')
+
-			.attr('role', 'radio') // WAI-ARIA role
+		// no matched theme => this theme is user-defined
-			.click(function(){
+		for(var thm in themes) {
-				var $radio = $(this).next('input:radio');
+			if(!themes.hasOwnProperty(thm)) continue;
+			if(sel_str == obj2str(themes[thm])) {
+				$this.find('input:radio[name="themeItem"][value="'+thm+'"]').prop('checked', true).change();
+				return;
+			}
+		}
+
+		$this.find('input:radio[name="themeItem"][value="user_define"]').prop('checked', true).change();
+	});
 
-				$radio.is(':checked')?
-					$radio.closest('.a').trigger('show.tp') :
-					$radio.prop('checked', true).change();
-			})
-			.next('input:radio').change(function(){ $(this).closest('.a').trigger('paint.pr') }).end()
-		.end()
-	.end()
 });

modules/admin/tpl/theme.html

@@ -1,5 +1,22 @@
 <load target="js/theme.js" type="body" />
 
+<script type="text/javascript">
+jQuery(function($){
+
+var themes = {};
+
+// Example - default theme
+themes['xe_default'] = {
+	'layout': '82',
+	'board' : 'xe_v3', // board module has the xe_v3 skin by default
+	'poll'  : 'simple' // poll module has the simple skin by default
+};
+
+$('#theme').data('themes', themes);
+
+});
+</script>
+
 	<h1 class="h1">Theme</h1>
 	<p class="xe_validator_error">{$XE_VALIDATOR_ERROR}</p>
 	<form ruleset="insertThemeInfo" action="./" method="post" class="form">
@@ -12,10 +29,9 @@
 					<p class="q">선택한 테마</p>
 					<ul class="a">
 						{@$current_theme = ($theme_info)?$theme_info->theme:'user_define'}
-						<!--@foreach($theme_list as $key=>$val)-->
+						<li class="i" loop="$theme_list=>$key,$val">
-						<li class="i">
 							<span class="thumb"><!--@if($val->thumbnail)--><img src="{$val->thumbnail}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span>
-							<input type="radio" name="themeItem" id="{$key}" value="{$key}" <!--@if($key == $current_theme)-->checked="checked"<!--@end--> /> 
+							<input type="radio" name="themeItem" id="{$key}" value="{$key}" <!--@if($key == $current_theme)-->checked="checked"<!--@end--> />
 							<label for="{$key}">{$val->title}({$key})</label>
 							<ul>
 								<li>&rsaquo; 버전: {$val->version}</li>
@@ -24,10 +40,9 @@
 								<li>&rsaquo; 경로: {$val->path}</li>
 							</ul>
 						</li>
-						<!--@end-->
 						<li class="i userDefine">
 							<span class="thumb">By You</span>
-							<input type="radio" name="themeItem" id="theme_user_define" value="user_define" <!--@if($current_theme == 'user_define')-->checked="checked"<!--@end--> /> 
+							<input type="radio" name="themeItem" id="theme_user_define" value="user_define" <!--@if($current_theme == 'user_define')-->checked="checked"<!--@end--> />
 							<label for="theme_user_define">User Defined</label>
 							<ul>
 								<li>&rsaquo; 설명: 관리자가 설정한 테마입니다. 테마를 설정하지 않은 경우 디폴트로 노출됩니다.</li>
@@ -40,65 +55,62 @@
 		<fieldset id="skin">
 			<h2 class="h2">Skin Setting</h2>
 			<p>테마의 일부가 마음에 들지 않으면 스킨을 직접 선택하세요. 스킨을 직접 선택하면 'Theme Setting' 설정은 'User Defined'로 설정됩니다. <button type="button" class="showAll"></button></p>
-			<ul class="thumbPreview">
+			<ul class="thumbPreview jx">
-				<li>
+				<li data-skintype="layout">
 					<p class="q">선택한 레이아웃</p>
 					<ul class="a">
-						<!--@foreach($layout_list as $val)-->
+						<li class="i" loop="$layout_list=>$val">
-						<li class="i">
+							<span class="thumb"><span class="frame"><!--@if($val->thumbnail)--><img src="{$val->thumbnaill}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
-						<span class="thumb"><span class="frame"><!--@if($val->thumbnail)--><img src="{$val->thumbnaill}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
+							<input type="radio" name="layout" id="layout_{$val->layout_srl}" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->checked="checked"<!--@end--> />
-							<input type="radio" name="layout" id="layout_{$val->layout_srl}" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->checked="checked"<!--@end--> /> 
 							<label for="layout_{$val->layout_srl}">{$val->layout_title.'('.$val->layout.')'}</label>
 							<ul>
 								<li>&rsaquo; 버전: {$val->version}</li>
-								<li>&rsaquo; 제작: 
+								<li>&rsaquo; 제작:
-								<!--@foreach($val->author as $author)-->                                                                                                                                               
+									<!--@foreach($val->author as $author)-->
-								<!--@if($author->homepage)--><a href="{$author->homepage}" onclick="window.open(this.href);return false;"><!--@end-->{$author->name}<!--@if($author->homepage)--></a><!--@end-->
+									<a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a>
-								<!--@endforeach-->	
+									<!--@if(!$author->homepage)-->{$author->name}<!--@end-->
+									<!--@endforeach-->
 								</li>
 								<li>&rsaquo; 설명: {$val->description}</li>
 								<li>&rsaquo; 경로: {$val->path}</li>
 								<li>&rsaquo; 설정: <a href="#">Edit</a></li>
 							</ul>
 						</li>
-						<!--@end-->
 					</ul>
 				</li>
-				<!--@foreach($module_list as $key=>$val)-->
+				<li loop="$module_list=>$mkey,$mval" cond="$mkey!='__IS_PARSE__'" data-skintype="{$mkey}">
-				<!--@if($key != '__IS_PARSE__')-->
+					<p class="q">선택한 {$mkey} 스킨</p>
-				<li>
-					<p class="q">선택한 {$key} 스킨</p>
 					<ul class="a">
-						<!--@if(!$theme_info->skin_info[$key])-->
+						<li class="i noDirection" cond="!$theme_info->skin_info[$mkey]">
-						<li class="i noDirection">
+							<span class="thumb"><span class="frame"></span></span>
-						<span class="thumb"><span class="frame"></span></span>
+							<strong>선택한 {$mkey} 스킨 없음</strong>
-							<input type="radio" name="{$key}-skin" id="{$key}_none" value="__skin_none__" checked="checked" /> 
-							<label for="{$key}_none">선택한 {$key} 스킨 없음</label>
 							<ul>
 								<li>선택한 테마에는 이 항목에 대한 스킨 정보가 없습니다. 스킨을 직접 선택하세요.</li>
 							</ul>
 						</li>
-						<!--@end-->
+						<li class="i" loop="$mval=>$skey,$sval">
-						<!--@foreach($val as $skey=>$sval)-->
+							{@ $id = $mkey.'_'.$skey }
-						<li class="i">
+							<span class="thumb"><span class="frame"><!--@if($sval->thumbnail)--><img src="{$sval->thumbnail}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
-						<span class="thumb"><span class="frame"><!--@if($sval->thumbnail)--><img src="{$sval->thumbnail}" alt="" /><!--@else-->Thumbnail does not exist<!--@end--></span></span>
+							<input type="radio" name="{$mkey}-skin" id="{$id}" value="{$skey}" checked="checked"|cond="$theme_info->skin_info[$mkey]==$skey" />
-							<input type="radio" name="{$key}-skin" id="{$key.'_'.$skey}" value="{$skey}" <!--@if($theme_info->skin_info[$key] == $skey)-->checked="checked"<!--@end--> /> 
+							<label for="{$id}">{$sval->title.'('.$skey.')'}</label>
-							<label for="{$key.'_'.$skey}">{$sval->title.'('.$skey.')'}</label>
 							<ul>
 								<li>&rsaquo; 버전: {$sval->version}</li>
-								<li>&rsaquo; 제작: 
+								<li>&rsaquo; 제작:
-								<!--@foreach($sval->author as $author)-->                                                                                                                                               
+									<!--@foreach($sval->author as $author)-->
-								<!--@if($author->homepage)--><a href="{$author->homepage}" onclick="window.open(this.href);return false;"><!--@end-->{$author->name}<!--@if($author->homepage)--></a><!--@end-->
+									<a href="{$author->homepage}" cond="$author->homepage">{$author->name}</a>
-								<!--@endforeach-->	
+									<!--@if(!$author->homepage)-->{$author->name}<!--@end-->
+									<!--@endforeach-->
 								</li>
 								<li>&rsaquo; 설명: {$sval->description}</li>
 							</ul>
 						</li>
-						<!--@end-->
+						<li class="i">
+							<span class="thumb"><span class="frame">Thumbnail does not exists</span></span>
+							<input type="radio" name="{$mkey}-skin" id="{$mkey}_none" value="" checked="checked"|cond="!$theme_info->skin_info[$mkey]" />
+							<label for="{$mkey}_none">선택안함</label>
+						</li>
 					</ul>
 				</li>
-				<!--@end-->
-				<!--@end-->
 			</ul>
 		</fieldset>
 		<div class="btnArea">