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

- 폭이 좁은 화면에서도 기본 에디터 컴포넌트를 편하게 사용할 수 있게 개선
- 컬러피커가 내장된 HTML5 지원 브라우저에서는 내장된 컬러피커를 이용하도록 개선(type=color 인 경우)
- input type=number, type=url 등을 지원하는 브라우저에서 조금 더 편리하게 컴포넌트 항목을 다루도록 수정
- 갤러리 컴포넌트가 확장자 대문자인 경우 이미지를 표시하지 못하던 문제 수정.
This commit is contained in:
MinSoo Kim 2016-02-05 23:36:58 +09:00
parent ff87af87a0
commit 8de3dfb4e8
13 changed files with 86 additions and 73 deletions

View file

@ -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;
}

View file

@ -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">

View file

@ -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)})});

View file

@ -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')

View file

@ -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;
}

View file

@ -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">

View file

@ -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;
}

View file

@ -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">

View file

@ -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" />