페이지 모듈에서 위젯의 외곽선과 float 조절 가능하도록 수정

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

classes/widget/WidgetHandler.class.php

@@ -86,16 +86,6 @@
             $margin_left = $args->widget_margin_left;
             $margin_right = $args->widget_margin_right;
 
-            $args->style .= ';';
-
-            preg_match("/height:([^;]*);/i",$args->style, $height_match);
-            if($height_match[0]) $height = $height_match[0];
-
-            preg_match("/width:([^;]*);/i",$args->style, $width_match);
-            if($width_match[0]) $width = $width_match[0];
-            else $width = "";
-
-            $style  = "overflow:hidden;padding:none !important; margin:none !important;float:left;".$height.$width;
             $inner_style = sprintf("margin:%dpx %dpx %dpx %dpx !important; padding:none !important;", $margin_top, $margin_right, $margin_bottom, $margin_left);
 
             /**
@@ -103,7 +93,7 @@
              **/
             // 서비스에 사용하기 위해 위젯 정보를 포함하지 않을 경우
             if(!$include_info) {
-                $output = sprintf('<div style="%s;"><div style="%s">%s</div></div>', $style, $inner_style, $html);
+                $output = sprintf('<div style="%s;"><div style="%s">%s</div></div>', $args->style, $inner_style, $html);
 
                 // 위젯 sequence가 있고 위젯의 캐싱을 지정하였고 위젯정보를 담지 않도록 하였을 경우 캐시 파일을 저장
                 if($args->widget_sequence && $args->widget_cache) WidgetHandler::writeCache($args->widget_sequence, $output);
@@ -148,7 +138,7 @@
                             '</div>'.
                         '</div>', 
                         $css_header, 
-                        $style, $widget, implode(' ',$attribute), 
+                        $args->style, $widget, implode(' ',$attribute), 
                         $inner_style, 
                         $html
                 );

common/js/common.js

@@ -766,6 +766,23 @@ function doAddDocumentCart(obj) {
     exec_xml("document","procDocumentAdminAddCart", params, null);
 }
 
+// ff의 rgb(a,b,c)를 #... 로 변경
+function transRGB2Hex(value) {
+    if(!value) return value;
+    if(value.indexOf('#')>-1) return value.replace(/^#/,'');
+
+    if(value.toLowerCase().indexOf('rgb')<0) return value;
+    value = value.replace(/^rgb\(/i,'').replace(/\)$/,'');
+    value_list = value.split(',');
+
+    var hex = '';
+    for(var i=0;i<value_list.length;i++) {
+        var color = parseInt(value_list[i],10).toString(16);
+        hex += color;
+    }
+    return hex;
+}
+
 /**
 *
 * Base64 encode / decode

modules/page/lang/en.lang.php

@@ -10,4 +10,13 @@
     $lang->cmd_page_modify = "Modify";
 
     $lang->cmd_content_insert = "컨텐츠 추가";
+
+    $lang->cmd_widget_size = "위젯 크기";
+    $lang->cmd_widget_align = "위젯 정렬";
+    $lang->cmd_widget_align_left = "왼쪽";
+    $lang->cmd_widget_align_right = "오른쪽";
+    $lang->cmd_widget_margin = "위젯 여백";
+    $lang->cmd_widget_border = "위젯 테두리";
+    $lang->cmd_widget_border_solid = "실선";
+    $lang->cmd_widget_border_dotted = "점선";
 ?>

modules/page/lang/es.lang.php

@@ -10,4 +10,13 @@
     $lang->cmd_page_modify = "Modificar";
 
     $lang->cmd_content_insert = "컨텐츠 추가";
+
+    $lang->cmd_widget_size = "위젯 크기";
+    $lang->cmd_widget_align = "위젯 정렬";
+    $lang->cmd_widget_align_left = "왼쪽";
+    $lang->cmd_widget_align_right = "오른쪽";
+    $lang->cmd_widget_margin = "위젯 여백";
+    $lang->cmd_widget_border = "위젯 테두리";
+    $lang->cmd_widget_border_solid = "실선";
+    $lang->cmd_widget_border_dotted = "점선";
 ?>

modules/page/lang/jp.lang.php

@@ -10,4 +10,13 @@
     $lang->cmd_page_modify = "ページ修正";
 
     $lang->cmd_content_insert = "컨텐츠 추가";
+
+    $lang->cmd_widget_size = "위젯 크기";
+    $lang->cmd_widget_align = "위젯 정렬";
+    $lang->cmd_widget_align_left = "왼쪽";
+    $lang->cmd_widget_align_right = "오른쪽";
+    $lang->cmd_widget_margin = "위젯 여백";
+    $lang->cmd_widget_border = "위젯 테두리";
+    $lang->cmd_widget_border_solid = "실선";
+    $lang->cmd_widget_border_dotted = "점선";
 ?>

modules/page/lang/ko.lang.php

@@ -12,5 +12,11 @@
     $lang->cmd_content_insert = "컨텐츠 추가";
 
     $lang->cmd_widget_size = "위젯 크기";
-    $lang->cmd_widget_margin = "여백";
+    $lang->cmd_widget_align = "위젯 정렬";
+    $lang->cmd_widget_align_left = "왼쪽";
+    $lang->cmd_widget_align_right = "오른쪽";
+    $lang->cmd_widget_margin = "위젯 여백";
+    $lang->cmd_widget_border = "위젯 테두리";
+    $lang->cmd_widget_border_solid = "실선";
+    $lang->cmd_widget_border_dotted = "점선";
 ?>

modules/page/lang/zh-CN.lang.php

@@ -10,4 +10,13 @@
     $lang->cmd_page_modify = "页面编辑";
 
     $lang->cmd_content_insert = "컨텐츠 추가";
+
+    $lang->cmd_widget_size = "위젯 크기";
+    $lang->cmd_widget_align = "위젯 정렬";
+    $lang->cmd_widget_align_left = "왼쪽";
+    $lang->cmd_widget_align_right = "오른쪽";
+    $lang->cmd_widget_margin = "위젯 여백";
+    $lang->cmd_widget_border = "위젯 테두리";
+    $lang->cmd_widget_border_solid = "실선";
+    $lang->cmd_widget_border_dotted = "점선";
 ?>

modules/page/page.admin.controller.php

@@ -93,6 +93,9 @@
             $output = $oModuleController->updateModule($module_info);
             if(!$output->toBool()) return $output;
 
+            // 캐시파일 재생성
+            $this->procPageAdminRemoveWidgetCache();
+
             $this->add("module_srl", $module_info->module_srl);
             $this->add("page", Context::get('page'));
             $this->setMessage($msg_code);
@@ -207,7 +210,7 @@
         /**
          * @brief 에디터에서 생성한 컨텐츠를 페이지 수정시 사용할 수 있도록 코드 생성
          **/
-        function transEditorContent($content, $args) {
+        function transEditorContent($content, $args = null) {
             // 에디터의 내용을 변환하여 visual한 영역과 원본 소스를 가지고 있는 code로 분리
             $code = $content;
 

modules/page/page.admin.view.php

@@ -158,7 +158,11 @@
             // 내용중 widget이 아닌 것들을 일단 분리
             $none_widget_code = preg_replace('!<img([^\>]*)widget=([^\>]*?)\>!is', '', $content);
             $oPageAdminController = &getAdminController('page');
-            if(trim($none_widget_code)) $none_widget_content = $oPageAdminController->transEditorContent($none_widget_code);
+            if(trim($none_widget_code)) {
+                $args->style = "float:left;overflow:hidden;padding:none;margin:none";
+                $args->widget_margin_left = $args->widget_margin_top = $args->widget_margin_right = $args->widget_margin_bottom = 0;
+                $none_widget_content = $oPageAdminController->transEditorContent($none_widget_code, $args);
+            }
 
             // 내용중 위젯을 또다시 구함 (기존 버전에서 페이지 수정해 놓은것과의 호환을 위해서)
             preg_match_all('!<img([^\>]*)widget=([^\>]*?)\>!is', $content, $matches);

modules/page/tpl/css/page.css

@@ -18,10 +18,14 @@ h3 { margin:0 10px 0 10px; }
 .widgetOutput .widgetRemove { background:#FFFFFF url("../images/widget_remove.gif") no-repeat left top; width:22px; height:22px; position:absolute; top:1px; right:1px; cursor:pointer; z-index:1000;}
 .widgetOutput .widgetResize { background:transparent url("../images/btn_resize.gif") no-repeat left top; width:12px; height:12px; position:absolute; bottom:1px; right:1px; cursor:pointer; z-index:1000;}
 
-#pageSizeLayer { width:280px; overflow:hidden; border:1px solid #888888; background:#FFFFFF; z-index:2000; position:absolute; }
+#pageSizeLayer { width:500px; overflow:hidden; border:1px solid #888888; background:#FFFFFF; z-index:2000; position:absolute; }
 #pageSizeLayer table { border:0; width:100%; table-layout:fixed; }
 #pageSizeLayer table th { padding:4px 0 4px 0; background-color:#DEDEDE; text-align:center; color:#888888;}
-#pageSizeLayer table td { padding:4px 4px 4px 4px; background-color:#EFEFEF;}
+#pageSizeLayer table th.line  { border-top:1px dotted #EEEEEE; }
+#pageSizeLayer table td { padding:4px 10px 4px 10px; background-color:#EFEFEF;}
+#pageSizeLayer table td.line  { border-top:1px dotted #999999; }
 #pageSizeLayer table td.buttonBox { background-color:#FFFFFF; white-space:nowrap; overflow:hidden; vertical-align:top; text-align:center; border-top:1px solid #888888; color:#DDDDDD;}
 #pageSizeLayer .input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:60px; }
+#pageSizeLayer .small_input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:20px; }
+#pageSizeLayer .color_input { background:#FFFFFF; border:1px solid #AAAAAA; padding:1px; font:8pt verdana; width:50px; }
 #pageSizeLayer .submit { width:90%; border:1px solid #DEDEDE; background-color:#FFFFFF;}

modules/page/tpl/js/page_admin.js

@@ -175,15 +175,17 @@ function doAddContent(module_srl) {
 
 function doSyncPageContent() {
     if(opener && opener.selectedWidget) {
+        var fo_obj = xGetElementById("content_fo");
         var style = opener.selectedWidget.getAttribute("style");
+        var sel_obj = opener.selectedWidget;
         if(typeof(style)=="object") style = style["cssText"];
-        xGetElementById("content_fo").style.value = style;
+        fo_obj.style.value = style;
-        xGetElementById("content_fo").widget_margin_left.value = opener.selectedWidget.getAttribute("widget_margin_left");
+        fo_obj.widget_margin_left.value = sel_obj.getAttribute("widget_margin_left");
-        xGetElementById("content_fo").widget_margin_right.value = opener.selectedWidget.getAttribute("widget_margin_right");
+        fo_obj.widget_margin_right.value = sel_obj.getAttribute("widget_margin_right");
-        xGetElementById("content_fo").widget_margin_bottom.value = opener.selectedWidget.getAttribute("widget_margin_bottom");
+        fo_obj.widget_margin_bottom.value = sel_obj.getAttribute("widget_margin_bottom");
-        xGetElementById("content_fo").widget_margin_top.value = opener.selectedWidget.getAttribute("widget_margin_top");
+        fo_obj.widget_margin_top.value = sel_obj.getAttribute("widget_margin_top");
 
-        var obj = opener.selectedWidget.firstChild;
+        var obj = sel_obj.firstChild;
         while(obj && obj.className != "widgetContent") obj = obj.nextSibling;
         if(obj && obj.className == "widgetContent") {
             var content = Base64.decode(xInnerHtml(obj));
@@ -362,6 +364,28 @@ function doShowWidgetSizeSetup(px, py, obj) {
     formObj.margin_top.value = selectedSizeWidget.getAttribute('widget_margin_top');
     formObj.margin_bottom.value = selectedSizeWidget.getAttribute('widget_margin_bottom');
 
+    var widget_align = '';
+    if(xIE4Up) widget_align = selectedSizeWidget.style.styleFloat;
+    else widget_align = selectedSizeWidget.style.cssFloat;
+    if(widget_align == "left") formObj.widget_align.selectedIndex = 0;
+    else formObj.widget_align.selectedIndex = 1;
+
+    formObj.border_top_color.value = transRGB2Hex(selectedSizeWidget.style.borderTopColor);
+    formObj.border_top_thick.value = selectedSizeWidget.style.borderTopWidth.replace(/px$/i,'');
+    formObj.border_top_type.selectedIndex = selectedSizeWidget.style.borderTopStyle=='dotted'?1:0;
+
+    formObj.border_bottom_color.value = transRGB2Hex(selectedSizeWidget.style.borderBottomColor);
+    formObj.border_bottom_thick.value = selectedSizeWidget.style.borderBottomWidth.replace(/px$/i,'');
+    formObj.border_bottom_type.selectedIndex = selectedSizeWidget.style.borderBottomStyle=='dotted'?1:0;
+
+    formObj.border_right_color.value = transRGB2Hex(selectedSizeWidget.style.borderRightColor);
+    formObj.border_right_thick.value = selectedSizeWidget.style.borderRightWidth.replace(/px$/i,'');
+    formObj.border_right_type.selectedIndex = selectedSizeWidget.style.borderRightStyle=='dotted'?1:0;
+
+    formObj.border_left_color.value = transRGB2Hex(selectedSizeWidget.style.borderLeftColor);
+    formObj.border_left_thick.value = selectedSizeWidget.style.borderLeftWidth.replace(/px$/i,'');
+    formObj.border_left_type.selectedIndex = selectedSizeWidget.style.borderLeftStyle=='dotted'?1:0;
+
     if(px+xWidth(layer)>xPageX('zonePageContent')+xWidth('zonePageContent')) px = xPageX('zonePageContent')+xWidth('zonePageContent')-xWidth(layer)-5;
     xLeft(layer, px);
     xTop(layer, py);
@@ -390,14 +414,42 @@ function _getSize(value) {
     return ""+num+type;
 }
 
+function _getBorderStyle(fld_color, fld_thick, fld_type) {
+    var color = fld_color.value;
+    if(!color) color = '#FFFFFF';
+    else color = '#'+color;
+    var width = fld_thick.value;
+    if(!width) width = '0px';
+    else width = parseInt(width,10)+'px'; 
+    var style = fld_type.value;
+    if(!style) style = 'solid';
+
+    var str = color+' '+width+' '+style;
+    return str;
+}
+
 function doApplyWidgetSize(fo_obj) {
     if(selectedSizeWidget) {
+        if(fo_obj.widget_align.selectedIndex== 1) {
+            if(xIE4Up) selectedSizeWidget.style.styleFloat = 'right';
+            else selectedSizeWidget.style.cssFloat = 'right';
+        } else {
+            if(xIE4Up) selectedSizeWidget.style.styleFloat = 'left';
+            else selectedSizeWidget.style.cssFloat = 'left';
+        }
+
         var width = _getSize(fo_obj.width.value);
         if(width) selectedSizeWidget.style.width = width;
 
         var height = _getSize(fo_obj.height.value);
         if(height) selectedSizeWidget.style.height = height;
 
+        selectedSizeWidget.style.borderTop = _getBorderStyle(fo_obj.border_top_color, fo_obj.border_top_thick, fo_obj.border_top_type);
+        selectedSizeWidget.style.borderBottom = _getBorderStyle(fo_obj.border_bottom_color, fo_obj.border_bottom_thick, fo_obj.border_bottom_type);
+        selectedSizeWidget.style.borderLeft = _getBorderStyle(fo_obj.border_left_color, fo_obj.border_left_thick, fo_obj.border_left_type);
+        selectedSizeWidget.style.borderRight = _getBorderStyle(fo_obj.border_right_color, fo_obj.border_right_thick, fo_obj.border_right_type);
+
+
         var borderObj = selectedSizeWidget.firstChild;
         while(borderObj) {
             if(borderObj.nodeName == "DIV" && borderObj.className == "widgetBorder") {

modules/page/tpl/page_content_modify.html

@@ -1,7 +1,6 @@
 <!--%import("filter/insert_page_content.xml")-->
 <!--%import("js/page_admin.js")-->
 <!--%import("css/page.css")-->
-
 <div class="clear"></div>
 <div id="zonePageContent">{$page_content}</div>
 <div class="clear"></div>
@@ -35,16 +34,25 @@
 <div id="tmpPageSizeLayer" style="visibility:hidden;">
     <form action="./" onsubmit="doApplyWidgetSize(this); return false;">
         <table cellspacing="0">
-        <col width="80" />
+        <col width="120" />
         <col />
         <col />
         <tr>
-            <th>{$lang->cmd_widget_size}</th>
+            <th>{$lang->cmd_widget_align}</th>
-            <td colspan="2"><input type="text" name="width" class="input" value="" /> - <input type="text" class="input" name="height" value="" /></td>
+            <td colspan="2">
+                <select name="widget_align">
+                    <option value="left">{$lang->cmd_widget_align_left}</option>
+                    <option value="right">{$lang->cmd_widget_align_right}</option>
+                </select>
+            </td>
         </tr>
         <tr>
-            <th rowspan="3">{$lang->cmd_widget_margin}</th>
+            <th class="line">{$lang->cmd_widget_size}</th>
-            <td colspan="2" class="tCenter"><input type="text" name="margin_top" class="input" value="" /></td>
+            <td colspan="2" class="line"><input type="text" name="width" class="input" value="" /> - <input type="text" class="input" name="height" value="" /></td>
+        </tr>
+        <tr>
+            <th rowspan="3" class="line">{$lang->cmd_widget_margin}</th>
+            <td colspan="2" class="line tCenter"><input type="text" name="margin_top" class="input" value="" /></td>
         </tr>
         <tr>
             <td><input type="text" name="margin_left" class="input" value="" /></td>
@@ -53,6 +61,45 @@
         <tr>
             <td colspan="2" class="tCenter"><input type="text" name="margin_bottom" class="input" value="" /></td>
         </tr>
+        <tr>
+            <th rowspan="3" class="line">{$lang->cmd_widget_border}</th>
+            <td colspan="2" class="tCenter line">
+                <input type="text" name="border_top_thick" value="" class="small_input" />px
+                <select name="border_top_type">
+                    <option value="solid">{$lang->cmd_widget_border_solid}</option>
+                    <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
+                </select>
+                #<input type="text" name="border_top_color" value="" class="color_input" maxlength="6"/>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <input type="text" name="border_left_thick" value="" class="small_input" />px
+                <select name="border_left_type">
+                    <option value="solid">{$lang->cmd_widget_border_solid}</option>
+                    <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
+                </select>
+                #<input type="text" name="border_left_color" value="" class="color_input" maxlength="6"/>
+            </td>
+            <td class="tRight">
+                <input type="text" name="border_right_thick" value="" class="small_input" />px
+                <select name="border_right_type">
+                    <option value="solid">{$lang->cmd_widget_border_solid}</option>
+                    <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
+                </select>
+                #<input type="text" name="border_right_color" value="" class="color_input" maxlength="6"/>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2" class="tCenter">
+                <input type="text" name="border_bottom_thick" value="" class="small_input" />px
+                <select name="border_bottom_type">
+                    <option value="solid">{$lang->cmd_widget_border_solid}</option>
+                    <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
+                </select>
+                #<input type="text" name="border_bottom_color" value="" class="color_input" maxlength="6"/>
+            </td>
+        </tr>
         <tr>
             <td colspan="3" class="buttonBox">
                 <input type="submit" value="{$lang->cmd_save}" class="submit"/>

modules/widget/tpl/js/widget_admin.js

@@ -93,8 +93,6 @@ function doFillWidgetVars() {
     fo_obj.widget_margin_bottom.value = selected_node.getAttribute("widget_margin_bottom");
     fo_obj.widget_margin_top.value = selected_node.getAttribute("widget_margin_top");
 
-
-
     for(var name in fo_obj) {
         var node = fo_obj[name];
         if(!node || typeof(node)=="undefined") continue;