Poll component supports mobile environment

- 설문조사 컴포넌트의 모바일 장치 지원
- 브라우저 자체 datepicker 를 지원하는 경우 jQuery datepicker 는 나타내지 않음 (중복 UI 정리)
- 자체 datepicker 로 입력하는 경우에도 정상적으로 날짜 처리.

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

@@ -1,7 +1,7 @@
-@charset "utf-8";
-@import url(../../../../../modules/admin/tpl/css/admin.css);
-@import url(../../../../../common/css/bootstrap.min.css);
-
+@charset "UTF-8";
+div.xe_mobile {
+	display:none!important;
+}
 .display_date { cursor:pointer; width:80px; float:left; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; height:1em; padding:3px; font-family:tahoma; }
 
 .adminTable { margin-bottom:0 !important; }
@@ -19,3 +19,4 @@ li a { text-decoration:none; color:#666666;}
 #popFooter .fl { margin-left:10px; }
 #popFooter .fr { margin-right:10px; }
 .poll_box { margin-bottom:15px; }
+

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

@@ -5,10 +5,11 @@
 
 <!--// datepicker javascript plugin load -->
 <!--%load_js_plugin("ui.datepicker")-->
-
+{@Context::addMetaTag('viewport', 'width=device-width, user-scalable=no', FALSE);}
 <script>
-    var msg_poll_cannot_modify = "{$lang->msg_poll_cannot_modify}";
+	var msg_poll_cannot_modify = "{$lang->msg_poll_cannot_modify}";
 </script>
+
 <section class="section">
 	<h1>{$component_info->title} ver. {$component_info->version}</h1>
 	<form action="./" method="post" id="fo_component" onSubmit="procFilter(this, insert_poll); return false;" class="x_form-horizontal">
@@ -19,23 +20,27 @@
 			<label for="" class="x_control-label">{$lang->poll_stop_date}</label>
 			<div class="x_controls">
 				<input type="hidden" name="stop_date" id="stop_date" value="{date('Ymd',time()+60*60*24*30)}" />
-				<input type="date" class="inputDate" value="{date('Y-m-d',time()+60*60*24*30)}" />
+				<input type="date" class="inputDate" min="{date('Y-m-d',time())}"  max="{date('Y-m-d',strtotime('+10 years'))}" onchange="jQuery('#stop_date').val(this.value.replace(/-/g,''));" value="{date('Y-m-d',time()+60*60*24*30)}" />
 <script>
 (function($){
 $(function(){
-	var option = {
-		changeMonth:true
-		,changeYear:true
-		,gotoCurrent: false
-		,yearRange:'-100:+10'
-		, onSelect:function(){
-			$(this).prev('input[type="hidden"]').val(this.value.replace(/-/g,""));
-		}
-		,defaultDate: new Date("{date('Y-m-d',time()+60*60*24*30)}")
-		,minDate: new Date("{date('Y-m-d',time())}")
-	};
-	$.extend(option,$.datepicker.regional['{str_replace('jp','ja',$lang_type)}']);
-	$(".inputDate").datepicker(option);
+	// check if the browser support type date.
+	if ( $(".inputDate").prop('type') != 'date' ) {
+		var option = {
+			changeMonth:true
+			,changeYear:true
+			,gotoCurrent: false
+			,yearRange:'-100:+10'
+			, onSelect:function(){
+				$('#stop_date').val(this.value.replace(/-/g,""));
+			}
+			,defaultDate: new Date("{date('Y-m-d',time()+60*60*24*30)}")
+			,minDate: new Date("{date('Y-m-d',time())}")
+		};
+
+		//if the browser does not support type date input, start datepicker. If it does, brower's UI will show their datepicker.
+		$(".inputDate").datepicker(option);
+	}
 });
 })(jQuery);
 </script>
@@ -55,8 +60,8 @@ $(function(){
 		<div class="x_control-group">
 			<label class="x_control-label">{$lang->poll_display_memberinfo}</label>
 			<div class="x_controls">
-				<input type="radio" name="show_vote" value="1" id="poll_display_memberinfo_yes" /> <label class="x_inline" for="poll_display_memberinfo_yes">{$lang->poll_display_memberinfo_yes}</label>
-				<input type="radio" name="show_vote" value="0" checked="checked" id="poll_display_memberinfo_no" /> <label class="x_inline" for="poll_display_memberinfo_no">{$lang->poll_display_memberinfo_no}</label>
+				<label class="x_inline" for="poll_display_memberinfo_yes"><input type="radio" name="show_vote" value="1" id="poll_display_memberinfo_yes" /> {$lang->poll_display_memberinfo_yes}</label>
+				<label class="x_inline" for="poll_display_memberinfo_no"><input type="radio" name="show_vote" value="0" checked="checked" id="poll_display_memberinfo_no" /> {$lang->poll_display_memberinfo_no}</label>
 			</div>
 		</div>
 		<div class="x_control-group">

modules/poll/poll.controller.php

@@ -19,7 +19,12 @@ class pollController extends poll
 	 */
 	function procPollInsert()
 	{
-		$stop_date = Context::get('stop_date');
+		$stop_date = intval(Context::get('stop_date'));
+		// mobile input date format can be different
+		if($stop_date != Context::get('stop_date'))
+		{
+			$stop_date = date('Ymd', strtodate(Context::get('stop_date')));
+		}
 		if($stop_date < date('Ymd'))
 		{
 			$stop_date = date('YmdHis', $_SERVER['REQUEST_TIME']+60*60*24*30);

widgets/pollWidget/skins/default/css/poll.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .rx_poll_default_wrap{max-width:100%;}
 .rx_poll_default_wrap .pollWidget{padding:5px;}
 .rx_poll_default{border-radius: 10px;border:1px solid #e0e0e0;overflow:auto; background-color:#ffffff; color:#000000; font-size:12px; font-family:"Open Sans","나눔바른고딕",NanumBarunGothic,"맑은 고딕","Malgun Gothic","애플 SD 산돌고딕 Neo","Apple SD Gothic Neo","돋움",Dotum,AppleGothic,Helvetica,sans-serif;}
@@ -16,7 +17,10 @@
 .rx_poll_default .rx_poll_content .poll_vote .poll_item label{display:block;width:auto}
 .rx_poll_default .rx_poll_content .poll_vote .poll_item .poll_item_delete{position:absolute;right:0;top:7px;}
 
-.rx_poll_default .rx_poll_content .poll_vote .poll_item_add input[type="text"]{width:100%;
+.rx_poll_default .rx_poll_content .poll_vote .poll_item_add input[type="text"]{
+	-webkit-appearance: none;
+	border-radius: 0;
+	width:100%;
 	line-height: 25px;
 	font-size: 14px;
 	margin: 0;

widgets/pollWidget/skins/simple/css/poll.css

@@ -1,6 +1,7 @@
+@charset "UTF-8";
 .rx_poll_smpl_wrap{max-width:100%;}
 .rx_poll_smpl_wrap .pollWidget{padding:5px;}
-.rx_poll_smpl{box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);overflow:auto; background-color:#ffffff; color:#000000; font-size:12px; font-family:"Open Sans","나눔바른고딕",NanumBarunGothic,"맑은 고딕","Malgun Gothic","애플 SD 산돌고딕 Neo","Apple SD Gothic Neo","돋움",Dotum,AppleGothic,Helvetica,sans-serif;}
+.rx_poll_smpl{box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);border:1px solid #e0e0e0;overflow:auto; background-color:#ffffff; color:#000000; font-size:12px; font-family:"Open Sans","나눔바른고딕",NanumBarunGothic,"맑은 고딕","Malgun Gothic","애플 SD 산돌고딕 Neo","Apple SD Gothic Neo","돋움",Dotum,AppleGothic,Helvetica,sans-serif;}
 .rx_poll_smpl .rx_poll_header{padding:13px 15px 10px;overflow:auto;border-bottom:2px solid #bdbdbd;}
 .rx_poll_smpl .rx_poll_h_strong{font-weight:bold}
 .rx_poll_smpl .rx_poll_content{padding: 15px;}
@@ -17,6 +18,8 @@
 .rx_poll_smpl .rx_poll_content .poll_vote .poll_item .poll_item_delete{position:absolute;right:0;top:7px;}
 
 .rx_poll_smpl .rx_poll_content .poll_vote .poll_item_add input[type="text"]{
+	-webkit-appearance: none;
+	border-radius: 0;
 	width:100%;
 	box-sizing: border-box;
 	line-height: 25px;