기본 팝업창 스타일 수정. (#1075)

# 기본 팝업창 스타일 수정.

- 바뀐 관리자 페이지 스타일과 통일성 유지.
 - 임시 저장 글 불러오는 팝업 창 스타일 조정
- 팝업창 크기 계산 함수 조정
 - 폭을 먼저 확정한 다음 높이를 계산하도록 순서 조정
 - 위젯 수정 페이지 팝업 창 크기 계산 수정
 - 창 너비를 자유롭게 바꿀 수 있기 때문에, `.popup` 클래스를 가진 객체의 가로 폭을 자바스크립트가 강제로 변경하지 않도록 수정. (초기 가로 폭은 정확히 계산하여서 기존과 동일하게 맞춤)
- 라이믹스 문법에 맞춤
 - `jQuery` 를 `$` 로 쓸 수 있으므로 생략 가능한 구문 수정

common/js/common.js

@@ -621,22 +621,21 @@ function setFixedPopupSize() {
 	offset = $pc.css({overflow:'scroll'}).offset();
 
 	w = $pc.width(10).height(10000).get(0).scrollWidth + offset.left*2;
-	h = $pc.height(10).width(10000).get(0).scrollHeight + offset.top*2;
 
 	if(w < 800) w = 800 + offset.left*2;
+	// Window 의 너비나 높이는 스크린의 너비나 높이보다 클 수 없다. 스크린의 너비나 높이와 내용의 너비나 높이를 비교해서 최소값을 이용한다.
+	w = Math.min(w, window.screen.availWidth);
+
+	h = $pc.width(w - offset.left*2).height(10).get(0).scrollHeight + offset.top*2;
 
 	dw = $win.width();
 	dh = $win.height();
 
-	// Window 의 너비나 높이는 스크린의 너비나 높이보다 클 수 없다. 스크린의 너비나 높이와 내용의 너비나 높이를 비교해서 최소값을 이용한다.
-	w = Math.min(w, window.screen.availWidth);
 	h = Math.min(h, window.screen.availHeight - 100);
 	window.resizeBy(w - dw, h - dh);
 
-	$pc.width(w - offset.left*2).css({overflow:'',height:''});
-	if(h === window.screen.availHeight - 100) {
-		$pc.width(w - offset.left*2-scbw).css({overflow:'',height:''});
-	}
+	$pc.width('100%').css({overflow:'',height:'','box-sizing':'border-box'});
+
 }
 
 /**

modules/document/tpl/checked_list.html

@@ -1,5 +1,6 @@
 <!--%import("filter/manage_checked_document.xml")-->
 <load target="js/document_admin.js" />
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
 <form action="./" method="get" id="fo_management">
 	<input type="hidden" name="module" value="document" />
 	<input type="hidden" name="type" value="" />

modules/document/tpl/saved_list_popup.html

@@ -1,35 +1,40 @@
-<h1 class="h1">{$lang->cmd_view_saved_document}</h1>
-<!-- 목록 -->
-<table class="x_table x_table-striped x_table-hover">
-	<caption>Total : {number_format($total_count)}, Page {number_format($page)}/{number_format($total_page)}</caption>
-	<thead>
-		<tr>
-			<th class="title">{$lang->date}</th>
-			<th class="title">{$lang->title}</th>
-			<th class="title">{$lang->cmd_select}</th>
-		</tr>
-	</thead>
-	<tbody>
-		<!--@foreach($document_list as $no => $val)-->
-		<tr>
-			<td>{$val->getRegdate("Y-m-d H:i:s")}</td>
-			<td > <a href="#" onclick="jQuery('#saved_document_{$val->document_srl}').toggle(); setFixedPopupSize(); return false;">{$val->getTitle()}</a>
-				<div id="saved_document_{$val->document_srl}" class="saved_content" style="display:none;">{$val->getContent(false)}</div>
-			</td>
-			<td><a href="#" onclick="doDocumentSelect('{$val->document_srl}', '{$val->getDocumentType()}'); return false;" class="buttonSet buttonActive"><span>{$lang->cmd_select}</span></a></td>
-		</tr>
-		<!--@end-->
-	</tbody>
-</table>
-<!-- 페이지 네비게이션 -->
-<div class="pagination">
-	<a href="{getUrl('page','','module_srl','')}" class="direction">&lsaquo; {$lang->first_page}</a>
-	<!--@while($page_no = $page_navigation->getNextPage())-->
-		<!--@if($page == $page_no)-->
-			<strong>{$page_no}</strong>
-		<!--@else-->
-			<a href="{getUrl('page',$page_no,'module_srl','')}">{$page_no}</a>
-		<!--@end-->
-	<!--@end-->
-	<a href="{getUrl('page',$page_navigation->last_page,'module_srl','')}" class="direction">{$lang->last_page} &rsaquo;</a>
+{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
+<div class="x_modal-header">
+	<h1>{$lang->cmd_view_saved_document}</h1>
+</div>
+<div class="x_modal-body">
+	<!-- 목록 -->
+	<table class="x_table x_table-striped x_table-hover">
+		<caption>Total : {number_format($total_count)}, Page {number_format($page)}/{number_format($total_page)}</caption>
+		<thead>
+			<tr>
+				<th class="title">{$lang->date}</th>
+				<th class="title">{$lang->title}</th>
+				<th class="title">{$lang->cmd_select}</th>
+			</tr>
+		</thead>
+		<tbody>
+			<!--@foreach($document_list as $no => $val)-->
+			<tr>
+				<td>{$val->getRegdate("Y-m-d H:i:s")}</td>
+				<td > <a href="#" onclick="jQuery('#saved_document_{$val->document_srl}').toggle(); setFixedPopupSize(); return false;">{$val->getTitle()}</a>
+					<div id="saved_document_{$val->document_srl}" class="saved_content" style="display:none;">{$val->getContent(false)}</div>
+				</td>
+				<td><a href="#" onclick="doDocumentSelect('{$val->document_srl}', '{$val->getDocumentType()}'); return false;" class="buttonSet buttonActive"><span>{$lang->cmd_select}</span></a></td>
+			</tr>
+			<!--@end-->
+		</tbody>
+	</table>
+	<!-- 페이지 네비게이션 -->
+	<div class="pagination">
+		<a href="{getUrl('page','','module_srl','')}" class="direction">&lsaquo; {$lang->first_page}</a>
+		<!--@while($page_no = $page_navigation->getNextPage())-->
+			<!--@if($page == $page_no)-->
+				<strong>{$page_no}</strong>
+			<!--@else-->
+				<a href="{getUrl('page',$page_no,'module_srl','')}">{$page_no}</a>
+			<!--@end-->
+		<!--@end-->
+		<a href="{getUrl('page',$page_navigation->last_page,'module_srl','')}" class="direction">{$lang->last_page} &rsaquo;</a>
+	</div>
 </div>

modules/editor/components/emoticon/emoticon.class.php

@@ -32,7 +32,7 @@ class emoticon extends EditorHandler
 
 		$list = $this->getEmoticons($emoticon);
 
-		$this->add('emoticons', implode("\n",$list));
+		$this->add('emoticons', $list);
 	}
 
 	/**
@@ -47,7 +47,11 @@ class emoticon extends EditorHandler
 		while($file = $oDir->read())
 		{
 			if(substr($file,0,1)=='.') continue;
-			if(preg_match('/\.(jpg|jpeg|gif|png)$/i',$file)) $output[] = sprintf("%s/%s", $path, str_replace($this->emoticon_path,'',$file));
+			if(preg_match('/\.(jpg|jpeg|gif|png)$/i',$file)) {
+				$filename = sprintf("%s/%s", $path, str_replace($this->emoticon_path,'',$file));
+				list($width, $height, $type, $attr) = getimagesize($emoticon_path . '/'. $file);
+				$output[] = array('filename' => $filename, 'width' => $width, 'height' => $height);
+			}
 		}
 		$oDir->close();
 		if(count($output)) asort($output);
@@ -88,6 +92,8 @@ class emoticon extends EditorHandler
 	{
 		$src = $xml_obj->attrs->src;
 		$alt = $xml_obj->attrs->alt;
+		$width = intval($xml_obj->attrs->width);
+		$height = intval($xml_obj->attrs->height);
 
 		if(!$alt)
 		{
@@ -103,7 +109,12 @@ class emoticon extends EditorHandler
 
 		if($alt)
 		{
-			$attr_output[] = "alt=\"".$alt."\"";
+			$attr_output[] = "alt=\"".htmlspecialchars($alt)."\"";
+		}
+
+		if($width && $height)
+		{
+			$attr_output[] = "width=\"".$width."\" height=\"".$height."\"";
 		}
 
 		$code = sprintf("<img %s style=\"border:0px\" />", implode(" ",$attr_output));

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

@@ -1,16 +1,22 @@
 <load target="popup.js" />
 <load target="popup.css" />
 {@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
-<section class="section">
+<div class="x_modal-header">
 	<h1>{$component_info->title}</h1>
-	<div class="x_clearfix">
-		<div class="x_pull-right">
-			<select name="list" id="selectEmoticonList">
-				<!--@foreach($emoticon_list as $key => $val)-->
-				<option <!--@if($val=='msn')-->selected="select"<!--@end--> value="{$val}">{$val}</option>
-				<!--@end-->
-			</select>
-		</div>
+</div>
+<div class="x_modal-body">
+	<div>
+		<select name="list" id="selectEmoticonList">
+			<!--@foreach($emoticon_list as $key => $val)-->
+			<option <!--@if($val=='msn')-->selected="select"<!--@end--> value="{$val}">{$val}</option>
+			<!--@end-->
+		</select>
 	</div>
 	<div id="emoticons" style="min-height:1px"></div>
-</section>
+	<div class="x_clearfix btnArea">
+		<div class="x_pull-right">
+			<button type="button" class="x_btn x_btn-primary" onclick="insertSlideShow()">{$lang->cmd_insert}</button>
+			<a class="x_btn" href="{getUrl('','module','editor','act','dispEditorComponentInfo','component_name',$component_info->component_name)}" target="_blank" onclick="window.open(this.href,'ComponentInfo','width=10,height=10');return false;">{$lang->about_component}</a>
+		</div>
+	</div>
+</div>

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

@@ -1,5 +1,3 @@
-jQuery(function($){
-
 var is_popup = window._isPoped;
 
 /**
@@ -17,25 +15,12 @@ function getEmoticons(emoName) {
  * @brief Load callback
  */
 function completeGetEmoticons(ret_obj) {
-    var emoticons = ret_obj['emoticons'].split("\n");
-    var html = [];
-    for(var i=0;i<emoticons.length;i++) {
-		html[html.length] = '<img src="./modules/editor/components/emoticon/tpl/images/'+emoticons[i]+'" class="emoticon" />';
-    }
-	jQuery('#emoticons').html(html.join('')).find('img.emoticon')
-		.click(insertEmoticon)
-		.load(function(){
-			/* resize popup window for new emoticons loaded, 2015-07-14 by misol */
-			if(jQuery('section.section').outerHeight(true) != jQuery( window ).height())
-			{
-				// more space for y-scroll
-				var ww = (jQuery('section.section').outerHeight(true) > jQuery( window ).height())? jQuery('section.section').outerWidth(true) + 60 : jQuery('section.section').outerWidth(true) + 30;
-				// not more than screen height
-				var wh = (screen.height-100 < jQuery('section.section').outerHeight(true)+100)? screen.height-100 : jQuery('section.section').outerHeight(true)+100;
-
-				window.resizeTo(ww, wh); 
-			}
-		});
+	var emoticons = ret_obj.emoticons.item;
+	var html = [];
+	for(var i=0;i<emoticons.length;i++) {
+		html[html.length] = '<img src="./modules/editor/components/emoticon/tpl/images/'+emoticons[i].filename+'" width="' + parseInt(emoticons[i].width, 10) + '" height="' + parseInt(emoticons[i].height, 10) + '" onclick="insertEmoticon()" onload="setFixedPopupSize()" class="emoticon" />';
+	}
+	$('#emoticons').html(html.join(''));
 }
 
 /**
@@ -47,7 +32,7 @@ function insertEmoticon() {
 
 	if(!win) return;
 
-	html = '<img src="'+this.src+'" class="emoticon" />';
+	html = '<img src="'+this.src+'" width="'+this.width+'" height="'+this.height+'" class="emoticon" />';
 
 	win.editorFocus(win.editorPrevSrl);
 	win.editorRelKeys[win.editorPrevSrl].pasteHTML(html);
@@ -57,8 +42,9 @@ function insertEmoticon() {
 	return false;
 }
 
-// load default emoticon set
-getEmoticons('msn');
-$('#selectEmoticonList').change(function(){ getEmoticons(this.value) });
+$(function(){
+	// load default emoticon set
+	getEmoticons('msn');
+	$('#selectEmoticonList').change(function(){ getEmoticons(this.value) });
 
 });

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

@@ -2,8 +2,10 @@
 <!--%import("popup.css")-->
 <!--%import("../lang")-->
 {@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
-<section class="section">
+<div class="x_modal-header">
 	<h1>{$component_info->title}</h1>
+</div>
+<div class="x_modal-body">
 	<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">
@@ -64,6 +66,6 @@
 			</div>
 		</div>
 	</form>
-</section>
+</div>
 <!--%load_js_plugin("spectrum")-->
 

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

@@ -2,8 +2,10 @@
 <!--%import("popup.css")-->
 <!--%import("../lang")-->
 {@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
-<section class="section">
+<div class="x_modal-header">
 	<h1>{$component_info->title}</h1>
+</div>
+<div class="x_modal-body">
 	<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>
@@ -81,4 +83,4 @@
 			</div>
 		</div>
 	</form>
-</section>
+</div>

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

@@ -9,9 +9,10 @@
 <script>
 	var msg_poll_cannot_modify = "{$lang->msg_poll_cannot_modify}";
 </script>
-
-<section class="section">
+<div class="x_modal-header">
 	<h1>{$component_info->title}</h1>
+</div>
+<div class="x_modal-body">
 	<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" />
@@ -21,32 +22,30 @@
 			<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" min="{date('Y-m-d',time())}"  max="{date('Y-m-d',strtotime('+10 years'))}" onchange="$('#stop_date').val($.datepicker.formatDate('yymmdd', new Date(this.value)));" value="{date('Y-m-d',time()+60*60*24*30)}" />
-<script>
-(function($){
-$(function(){
-	// 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($.datepicker.formatDate('yymmdd', $(this).datepicker( "getDate" )));
-			}
-			,defaultDate: new Date("{date('Y-m-d',time()+60*60*24*30)}")
-			,minDate: new Date("{date('Y-m-d',time())}")
-		};
+				<script>
+				$(function(){
+					// 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($.datepicker.formatDate('yymmdd', $(this).datepicker( "getDate" )));
+							}
+							,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);
-	}
-	else
-	{
-	}
-});
-})(jQuery);
-</script>
+						//if the browser does not support type date input, start datepicker. If it does, brower's UI will show their datepicker.
+						$(".inputDate").datepicker(option);
+					}
+					else
+					{
+					}
+				});
+				</script>
 			</div>
 		</div>
 		<div class="x_control-group">
@@ -115,4 +114,4 @@ $(function(){
 			</div>
 		</div>
 	</form>
-</section>
+</div>

modules/editor/tpl/view_component.html

@@ -1,7 +1,9 @@
 {@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
 <load target="css/view_component.css" />
-<section class="section">
+<div class="x_modal-header">
 	<h1>{$component->title}</h1>
+</div>
+<div class="x_modal-body">
 	<div>
 		<h2>{$lang->component_author}</h2>
 		<ul>
@@ -33,4 +35,4 @@
 		<h2>{$lang->component_description}</h2>
 		<p>{nl2br(trim($component->description))}</p>
 	</div>
-</section>
+</div>

modules/widget/widget.admin.view.php

@@ -79,7 +79,7 @@ class widgetAdminView extends widget
 		$security->encodeHTML('member_config..');
 
 		$this->setLayoutPath('./common/tpl');
-		$this->setLayoutFile("default_layout");
+		$this->setLayoutFile("popup_layout");
 		$this->setTemplateFile('add_content_widget');
 	}
 }

modules/widget/widget.view.php

@@ -121,7 +121,7 @@ class widgetView extends widget
 		if(!Context::get('selected_widget')) Context::set('selected_widget',$widget_list[0]->widget);
 
 		$this->dispWidgetGenerateCode();
-		$this->setLayoutFile('default_layout');
+		$this->setLayoutFile('popup_layout');
 		$this->setTemplateFile('widget_generate_code_in_page');
 	}
 
@@ -143,7 +143,7 @@ class widgetView extends widget
 		}
 
 		$this->dispWidgetGenerateCode();
-		$this->setLayoutFile('default_layout');
+		$this->setLayoutFile('popup_layout');
 		$this->setTemplateFile('widget_style_generate_code_in_page');
 	}
 }