모바일이나 HTML5 를 잘 지원하는 환경에서 에디터 컴포넌트 사용 개선

- 폭이 좁은 화면에서도 기본 에디터 컴포넌트를 편하게 사용할 수 있게 개선
- 컬러피커가 내장된 HTML5 지원 브라우저에서는 내장된 컬러피커를 이용하도록 개선(type=color 인 경우)
- input type=number, type=url 등을 지원하는 브라우저에서 조금 더 편리하게 컴포넌트 항목을 다루도록 수정
- 갤러리 컴포넌트가 확장자 대문자인 경우 이미지를 표시하지 못하던 문제 수정.

common/js/plugins/ui.colorpicker/xe_colorpicker.js

@@ -4,9 +4,12 @@
  **/
 jQuery(function($){
 
-    $.fn.xe_colorpicker = function(settings){
+	$.fn.xe_colorpicker = function(settings){
 		return this.jPicker(settings);
-    }
+	}
 
-    $('input.color-indicator').xe_colorpicker();
-});
+	// 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용 by misol 2016.02.05
+	if ( $("input.color-indicator").prop('type') != 'color' ) {
+		$('input.color-indicator').xe_colorpicker();
+	}
+});

common/tpl/popup_layout.html

@@ -1,7 +1,5 @@
-<load target="../../modules/admin/tpl/css/admin.bootstrap.css" usecdn="true" />
-<load target="../../modules/admin/tpl/css/admin.css" usecdn="true" />
-<load cond="$lang_type=='ko'" target="../../modules/admin/tpl/css/admin_ko.css" usecdn="true" />
-<load cond="$lang_type=='en'" target="../../modules/admin/tpl/css/admin_en.css" usecdn="true" />
+<load target="../../modules/admin/tpl/css/admin.bootstrap.css" />
+<load target="../../modules/admin/tpl/css/admin.css" />
 <div class="x popup">
     {$content}
 </div>

modules/editor/components/emoticon/tpl/popup.css

@@ -1,5 +1,8 @@
-@charset "utf-8";
-@import url(../../../../../modules/admin/tpl/css/admin.css);
-@import url(../../../../../common/css/bootstrap.min.css);
+@charset "UTF-8";
 img.emoticon{ margin:10px 10px 0 0; cursor:pointer}
 #emoticons{padding:0 10px 20px 10px}
+
+/* for mobile view */
+div.xe_mobile {
+	display:none!important;
+}

modules/editor/components/emoticon/tpl/popup.html

@@ -1,7 +1,8 @@
 <load target="popup.js" />
 <load target="popup.css" />
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
 <section class="section">
-	<h1>{$component_info->title} ver. {$component_info->version}</h1>
+	<h1>{$component_info->title}</h1>
 	<div class="x_clearfix">
 		<div class="x_pull-right">
 			<select name="list" id="selectEmoticonList">

modules/editor/components/emoticon/tpl/popup.min.js

@@ -1 +0,0 @@
-jQuery(function(e){function o(e){var o={component:"emoticon",emoticon:e,method:"getEmoticonList"},t="error message emoticons".split(" ");exec_xml("editor","procEditorCall",o,i,t)}function i(e){for(var o=e.emoticons.split("\n"),i=[],n=0;n<o.length;n++)i[i.length]='<img src="./modules/editor/components/emoticon/tpl/images/'+o[n]+'" class="emoticon" />';jQuery("#emoticons").html(i.join("")).find("img.emoticon").click(t).load(function(){if(jQuery("section.section").outerHeight(!0)!=jQuery(window).height()){var e=jQuery("section.section").outerHeight(!0)>jQuery(window).height()?jQuery("section.section").outerWidth(!0)+60:jQuery("section.section").outerWidth(!0)+30,o=screen.height-100<jQuery("section.section").outerHeight(!0)+100?screen.height-100:jQuery("section.section").outerHeight(!0)+100;window.resizeTo(e,o)}})}function t(){var e,o=n?opener:window;if(o)return e='<img src="'+this.src+'" class="emoticon" />',o.editorFocus(o.editorPrevSrl),o.editorRelKeys[o.editorPrevSrl].pasteHTML(e),n&&window.focus(),!1}var n=window._isPoped;o("msn"),e("#selectEmoticonList").change(function(){o(this.value)})});

modules/editor/components/image_gallery/image_gallery.class.php

@@ -57,9 +57,10 @@ class image_gallery extends EditorHandler
 		}
 
 		$images_list = $xml_obj->attrs->images_list;
-		$images_list = preg_replace('/\.(gif|jpe?g|png) /i', ".\\1\n", $images_list);
+		$images_list = trim(preg_replace('/\.(gif|jpe?g|png) /i', ".\\1\n", $images_list));
 		$images_list = explode("\n", trim($images_list));
-		$gallery_info->images_list = preg_grep("/^[a-z0-9\/]+\.(gif|jpe?g|png)+$/", $images_list);
+		// 파일 확장자는 대문자가 될 수도 있음. (i 가 추가된 이유.) 2016.02.05 misol <misol.kr@gmail.com>
+		$gallery_info->images_list = preg_grep("/^[a-z0-9\/]+\.(gif|jpe?g|png)+$/i", $images_list);
 
 		// If you set the output to output the XML code generated a list of the image
 		if(Context::getResponseMethod() == 'XMLRPC')

modules/editor/components/image_gallery/tpl/popup.css

@@ -1,3 +1,5 @@
-@charset "utf-8";
-@import url(../../../../../modules/admin/tpl/css/admin.css);
-@import url(../../../../../common/css/bootstrap.min.css);
+@charset "UTF-8";
+/* for mobile view */
+div.xe_mobile {
+	display:none!important;
+}

modules/editor/components/image_gallery/tpl/popup.html

@@ -1,14 +1,15 @@
 <!--%import("popup.js")-->
 <!--%import("popup.css")-->
 <!--%import("../lang")-->
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
 <section class="section">
-	<h1>{$component_info->title} ver. {$component_info->version}</h1>
+	<h1>{$component_info->title}</h1>
 	<form action="./" method="get" onSubmit="return false" id="fo" class="x_form-horizontal">
 	<input type="hidden" name="editor_sequence" value="{$editor_sequence}" />
 		<div class="x_control-group">
 			<label for="" class="x_control-label">{$lang->width}</label>
 			<div class="x_controls">
-				<input type="text" size="3" id="width" value="400" />px
+				<input type="number" size="3" id="width" value="400" />px
 			</div>
 		</div>
 		<div class="x_control-group">
@@ -33,19 +34,19 @@
 		<div class="x_control-group">
 			<label for="" class="x_control-label">{$lang->gallery_border_thickness}</label>
 			<div class="x_controls">
-				<input type="text" size="1" id="border_thickness" value="0" />px
+				<input type="number" size="1" id="border_thickness" value="0" />px
 			</div>
 		</div>
 		<div class="x_control-group">
 			<label for="" class="x_control-label">{$lang->gallery_border_color}</label>
 			<div class="x_controls">
-				<input type="text" id="border_color_input" class="color-indicator" size="7" maxlength="6"  value="#000000" />
+				<input type="color" id="border_color_input" class="color-indicator" size="7" value="#000000" />
 			</div>
 		</div>
 		<div class="x_control-group">
 			<label for="" class="x_control-label">{$lang->gallery_bg_color}</label>
 			<div class="x_controls">
-				<input type="text" id="bg_color_input" class="color-indicator"  size="7" maxlength="6"  value="#FFFFFF" />
+				<input type="color" id="bg_color_input" class="color-indicator"  size="7" value="#FFFFFF" />
 			</div>
 		</div>
 		<div class="x_control-group">

modules/editor/components/image_link/tpl/popup.css

@@ -1,7 +1,4 @@
-@charset "utf-8";
-@import url(../../../../../modules/admin/tpl/css/admin.css);
-@import url(../../../../../common/css/bootstrap.min.css);
-
+@charset "UTF-8";
 .image_align {
     margin:0px 0px 5px 0px;
     float:left;
@@ -9,3 +6,8 @@
 }
 
 li {list-style:none; float:left; margin-right:.5em;}
+
+/* for mobile view */
+div.xe_mobile {
+	display:none!important;
+}

modules/editor/components/image_link/tpl/popup.html

@@ -1,8 +1,9 @@
 <!--%import("popup.js")-->
 <!--%import("popup.css")-->
 <!--%import("../lang")-->
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
 <section class="section">
-	<h1>{$component_info->title} ver. {$component_info->version}</h1>
+	<h1>{$component_info->title}</h1>
 	<form action="./" method="get" onSubmit="return false" id="fo" class="x_form-horizontal">
 		<div class="x_control-group">
 			<label for="image_url" class="x_control-label">{$lang->image_url}</label>
@@ -13,15 +14,15 @@
 		<div class="x_control-group">
 			<label class="x_control-label">{$lang->image_scale}</label>
 			<div class="x_controls">
-				<input type="text" id="width" value="0" size="4" style="width:80px" /> px
-				<input type="text" id="height" value="0" size="4" style="width:80px" /> px
+				<input type="number" id="width" value="0" size="4" style="width:50px" /> px
+				<input type="number" id="height" value="0" size="4" style="width:50px" /> px
 				<button type="button" id="get_scale" class="x_btn">{$lang->cmd_get_scale}</button>
 			</div>
 		</div>
 		<div class="x_control-group">
 			<label for="link_url" class="x_control-label">URL</label>
 			<div class="x_controls">
-				<input type="text" id="link_url" value=""/>
+				<input type="url" id="link_url" value=""/>
 			</div>
 		</div>
 		<div class="x_control-group">
@@ -64,13 +65,13 @@
 		<div class="x_control-group">
 			<label for="image_border" class="x_control-label">{$lang->image_border}</label>
 			<div class="x_controls">
-				<input type="text" id="image_border" value="0" size="2" />px
+				<input type="number" id="image_border" value="0" size="2" />px
 			</div>
 		</div>
 		<div class="x_control-group">
 			<label for="image_margin" class="x_control-label">{$lang->image_margin}</label>
 			<div class="x_controls">
-				<input type="text" id="image_margin" value="0" size="2" />px
+				<input type="number" id="image_margin" value="0" size="2" />px
 			</div>
 		</div>
 		<div class="x_clearfix btnArea">

modules/editor/components/poll_maker/tpl/popup.html

@@ -5,13 +5,13 @@
 
 <!--// datepicker javascript plugin load -->
 <!--%load_js_plugin("ui.datepicker")-->
-{@Context::addMetaTag('viewport', 'width=device-width, user-scalable=no', FALSE);}
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
 <script>
 	var msg_poll_cannot_modify = "{$lang->msg_poll_cannot_modify}";
 </script>
 
 <section class="section">
-	<h1>{$component_info->title} ver. {$component_info->version}</h1>
+	<h1>{$component_info->title}</h1>
 	<form action="./" method="post" id="fo_component" onSubmit="procFilter(this, insert_poll); return false;" class="x_form-horizontal">
 		<input type="hidden" name="component" value="{$component_info->component_name}" />
 		<input type="hidden" name="method" value="insertPoll" />

modules/editor/tpl/css/view_component.css

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+section.section>div>* {
+	padding: 0px 15px;
+}
+section.section>div>h2 {
+	padding: 0px;
+}

modules/editor/tpl/view_component.html

@@ -1,41 +1,36 @@
-<load target="css/editor.css" />
-<load target="../../../modules/admin/tpl/css/admin.css" />
-<load target="../../../common/css/bootstrap.min.css" />
-
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
+<load target="css/view_component.css" />
 <section class="section">
-	<h1>{$component->title} ver. {$component->version}</h1>
-	<table class="x_table x_table-striped x_table-hover">
-	<tr>
-		<th scope="row"><div>{$lang->component_author}</div></th>
-		<td>
-			<!--@foreach($component->author as $author)-->
-			{$author->name} <!--@if($author->homepage || $author->email_address)-->(<!--@if($author->homepage)--><a href="{$author->homepage}" onclick="window.open(this.href);return false;">{$author->homepage}</a><!--@end--><!--@if($author->homepage && $author->email_address)-->, <!--@end--><!--@if($author->email_address)--><a href="mailto:{$author->email_address}">{$author->email_address}</a><!--@end-->)<!--@end--><br />
-			<!--@end-->
-	</tr>
-	<!--@if($component->homepage)-->
-	<tr>
-		<th scope="row"><div>{$lang->homepage}</div></th>
-		<td class="blue"><a href="{$component->homepage}" onclick="window.open(this.href);return false;">{$component->homepage}</a></td>
-	</tr><!--@end-->
-	<tr>
-		<th scope="row"><div>{$lang->regdate}</div></th>
-		<td>{zdate(str_replace('-',"",$component->date), 'Y-m-d')}</td>
-	</tr>
-	<!--@if($component->license || $component->license_link)-->
-	<tr>
-		<th scope="row"><div>{$lang->component_license}</div></th>
-		<td>
+	<h1>{$component->title}</h1>
+	<div>
+		<h2>{$lang->component_author}</h2>
+		<ul>
+			<li loop="$component->author => $author">
+				{$author->name} <!--@if($author->homepage || $author->email_address)-->(<!--@if($author->homepage)--><a href="{$author->homepage}" onclick="window.open(this.href);return false;">{$author->homepage}</a><!--@end--><!--@if($author->homepage && $author->email_address)-->, <!--@end--><!--@if($author->email_address)--><a href="mailto:{$author->email_address}">{$author->email_address}</a><!--@end-->)<!--@end-->
+			</li>
+		</ul>
+	</div>
+	<div cond="$component->homepage">
+		<h2>{$lang->homepage}</h2>
+		<p><a href="{$component->homepage}" onclick="window.open(this.href);return false;">{$component->homepage}</a></p>
+	</div>
+	<div>
+		<h2>{$lang->component_version}</h2>
+		<p>{$component->version}</p>
+	</div>
+	<div>
+		<h2>{$lang->regdate}</h2>
+		<p><time datetime="{date('c', strtotime($component->date))}">{zdate(str_replace('-',"",$component->date), 'Y-m-d')}</time></p>
+	</div>
+	<div cond="$component->license || $component->license_link">
+		<h2>{$lang->component_license}</h2>
+		<p>
 			{nl2br(trim($component->license))}
-		<!--@if($component->license_link)-->
-			<p><a href="{$component->license_link}" onclick="window.close(); return false;">{$component->license_link}</a></p>
-		<!--@end-->
-		</td>
-	</tr><!--@end-->
-	<!--@if($component->description)-->
-	<tr>
-		<th scope="row"><div>{$lang->component_description}</div></th>
-		<td>{nl2br(trim($component->description))}</td>
-	</tr><!--@end-->
-	</table>
-
+			<a href="{$component->license_link}" cond="$component->license_link" onclick="window.open(this.href);return false;">{$component->license_link}</a>
+		</p>
+	</div>
+	<div cond="$component->description">
+		<h2>{$lang->component_description}</h2>
+		<p>{nl2br(trim($component->description))}</p>
+	</div>
 </section>