페이지 모듈의 입력된 위젯의 크기/여백 조절 기능 추가

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

classes/widget/WidgetHandler.class.php

@@ -54,11 +54,15 @@
             if($widget == 'widgetContent') {
                 $style = $args->style;
                 $body = base64_decode($args->body);
+                $widget_margin_left = $args->widget_margin_left;
+                $widget_margin_right = $args->widget_margin_right;
+                $widget_margin_top = $args->widget_margin_top;
+                $widget_margin_bottom = $args->widget_margin_bottom;
                 if($include_info) {
                     $oPageAdminController = &getAdminController('page');
-                    $tpl = $oPageAdminController->transEditorContent($body, $style);
+                    $tpl = $oPageAdminController->transEditorContent($body, $args);
                 } else {
-                    $tpl = sprintf('<div style="overflow:hidden;%s">%s</div>', $style, $body);
+                    $tpl = sprintf('<div style="overflow:hidden;%s"><div style="margin:%s %s %s %s;">%s</div></div>', $style, $widget_margin_top, $widget_margin_right, $widget_margin_bottom, $widget_margin_left, $body);
                 }
                 return $tpl;
             }
@@ -77,10 +81,10 @@
             $html = $oWidget->proc($args);
 
             // 위젯 output을 생성하기 위한 변수 설정
-            $margin_top = (int)$args->widget_margin_top;
+            $margin_top = $args->widget_margin_top;
-            $margin_bottom = (int)$args->widget_margin_bottom;
+            $margin_bottom = $args->widget_margin_bottom;
-            $margin_left = (int)$args->widget_margin_left;
+            $margin_left = $args->widget_margin_left;
-            $margin_right = (int)$args->widget_margin_right;
+            $margin_right = $args->widget_margin_right;
 
             $args->style .= ';';
 
@@ -132,8 +136,9 @@
                 if(!$html) $html = '&nbsp;';
                 $output = sprintf(
                         '<style type="text/css">%s</style>'.
-                        '<div class="widgetOutput" style="%s" widget="%s" %s />'.
+                        '<div class="widgetOutput" style="%s" widget="%s" %s >'.
                             '<div class="widgetSetup"></div>'.
+                            '<div class="widgetSize"></div>'.
                             '<div class="widgetRemove"></div>'.
                             '<div class="widgetResize"></div>'.
                             '<div class="widgetBorder">'.

modules/page/lang/ko.lang.php

@@ -10,4 +10,7 @@
     $lang->cmd_page_modify = "페이지 수정";
 
     $lang->cmd_content_insert = "컨텐츠 추가";
+
+    $lang->cmd_widget_size = "위젯 크기";
+    $lang->cmd_widget_margin = "여백";
 ?>

modules/page/page.admin.controller.php

@@ -197,9 +197,9 @@
          **/
         function procPageAdminAddContent() {
             $content = Context::get('content');
-            $style = Context::get('style');
+            $args = Context::getRequestVars('style','widget_margin_left','widget_margin_right','widget_margin_bottom','widget_margin_top');
 
-            $tpl = $this->transEditorContent($content, $style);
+            $tpl = $this->transEditorContent($content, $args);
 
             $this->add('tpl', $tpl);
         }
@@ -207,7 +207,7 @@
         /**
          * @brief 에디터에서 생성한 컨텐츠를 페이지 수정시 사용할 수 있도록 코드 생성
          **/
-        function transEditorContent($content, $style = "width:100%;float:left;") {
+        function transEditorContent($content, $args) {
             // 에디터의 내용을 변환하여 visual한 영역과 원본 소스를 가지고 있는 code로 분리
             $code = $content;
 
@@ -227,22 +227,25 @@
             }
 
             $tpl = sprintf(
-                    '<div class="widgetOutput" style="%s" widget="widgetContent" />'.
                     '<style type="text/css">%s</style>'.
+                    '<div class="widgetOutput" style="%s" widget_margin_left="%s" widget_margin_right="%s" widget_margin_top="%s" widget_margin_bottom="%s" widget="widgetContent">'.
                         '<div class="widgetSetup"></div>'.
+                        '<div class="widgetSize"></div>'.
                         '<div class="widgetRemove"></div>'.
                         '<div class="widgetResize"></div>'.
                         '<div class="widgetBorder">'.
-                            '<div>'.
+                            '<div style="margin:%s %s %s %s;">'.
                                 '%s'.
                             '</div><div class="clear"></div>'.
                         '</div>'.
                         '<div class="widgetContent" style="display:none;width:1px;height:1px;overflow:hidden;">%s</div>'.
                     '</div>',
-                    $style,
                     $css_header,
+                    $args->style,
+                    $args->widget_margin_left, $args->widget_margin_right, $args->widget_margin_top, $args->widget_margin_bottom,
+                    $args->widget_margin_top, $args->widget_margin_right, $args->widget_margin_bottom, $args->widget_margin_left,
                     $content,
-                    $code
+                    base64_encode($code)
             );
 
             return $tpl;

modules/page/page.admin.view.php

@@ -213,14 +213,6 @@
             return $tpl;
         }
 
-        function transWidgetContent($matches) {
-            preg_match_all('/style="([^"]*)"/is', $matches[2].' ', $mat);
-            $style = $mat[1][0];
-            $oPageAdminController = &getAdminController('page');
-            return $oPageAdminController->transEditorContent($matches[3], $style);
-
-        }
-
         /**
          * @brief 페이지 삭제 화면 출력
          **/

modules/page/tpl/css/page.css

@@ -7,12 +7,21 @@ h3 { margin:0 10px 0 10px; }
 
 .adminLayer { margin-top:30px; border:1px solid #CCCCCC; padding:10px; overflow:hidden;}
 
-#zonePageContent { overflow:hidden; }
+#zonePageContent { overflow:hidden; width:100%; padding:none !important; margin:none !important;}
 
 .pageAddContent { width:700px; }
 
 .widgetOutput { float:left; cursor:move; z-index:998; overflow:hidden; position:relative;}
 .widgetOutput .widgetBorder { border:1px dotted #17DA29; z-index:999; }
-.widgetOutput .widgetSetup { background:#FFFFFF url("../images/widget_setup.gif") no-repeat left top; width:22px; height:22px; position:absolute; top:1px; right:24px; cursor:pointer; z-index:1000;}
+.widgetOutput .widgetSetup { background:#FFFFFF url("../images/widget_setup.gif") no-repeat left top; width:22px; height:22px; position:absolute; top:1px; right:48px; cursor:pointer; z-index:1000;}
+.widgetOutput .widgetSize { background:#FFFFFF url("../images/widget_size.gif") no-repeat left top; width:22px; height:22px; position:absolute; top:1px; right:24px; cursor:pointer; z-index:1000;}
 .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 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 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 .submit { width:90%; border:1px solid #DEDEDE; background-color:#FFFFFF;}

modules/page/tpl/js/page_admin.js

@@ -54,8 +54,8 @@ function doSubmitPageContent(fo_obj) {
                 var code = "";
                 while(cobj && cobj.className != "widgetContent") { cobj = cobj.nextSibling; }
                 if(cobj && cobj.className == "widgetContent") {
-                    var body = Base64.encode(xInnerHtml(cobj));
+                    var body = xInnerHtml(cobj);
-                    code = '<img src="./common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="widgetContent" style="'+style+'" body="'+body+'" />';
+                    code = '<img src="./common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="widgetContent" style="'+style+'" body="'+body+'" widget_margin_left="'+childObj.getAttribute("widget_margin_left")+'" widget_margin_right="'+childObj.getAttribute("widget_margin_right")+'" widget_margin_top="'+childObj.getAttribute("widget_margin_top")+'" widget_margin_bottom="'+childObj.getAttribute("widget_margin_bottom")+'" />';
                 }
                 html += code;
 
@@ -178,17 +178,23 @@ function doSyncPageContent() {
         var style = opener.selectedWidget.getAttribute("style");
         if(typeof(style)=="object") style = style["cssText"];
         xGetElementById("content_fo").style.value = style;
+        xGetElementById("content_fo").widget_margin_left.value = opener.selectedWidget.getAttribute("widget_margin_left");
+        xGetElementById("content_fo").widget_margin_right.value = opener.selectedWidget.getAttribute("widget_margin_right");
+        xGetElementById("content_fo").widget_margin_bottom.value = opener.selectedWidget.getAttribute("widget_margin_bottom");
+        xGetElementById("content_fo").widget_margin_top.value = opener.selectedWidget.getAttribute("widget_margin_top");
 
         var obj = opener.selectedWidget.firstChild;
         while(obj && obj.className != "widgetContent") obj = obj.nextSibling;
         if(obj && obj.className == "widgetContent") {
-            var content = xInnerHtml(obj);
+            var content = Base64.decode(xInnerHtml(obj));
             xGetElementById("content_fo").content.value = content;
         }
     }
 
     editorStart(1, "module_srl", "content", false, 400 );
     editor_upload_start(1);
+
+    setFixedPopupSize();
 }
 
 function completeAddContent(ret_obj) {
@@ -224,6 +230,20 @@ function doAddWidget(fo) {
 /* 페이지 수정 시작 */
 function doStartPageModify() {
 
+    // 위젯 크기/여백 조절 레이어를 가장 밖으로 뺌
+    var obj = xGetElementById("tmpPageSizeLayer");
+    var dummy = xCreateElement("div");
+    xInnerHtml(dummy, xInnerHtml(obj));
+    dummy.id="pageSizeLayer";
+    dummy.style.visibility = "hidden";
+    dummy.style.position = "absolute";
+    dummy.style.left = 0;
+    dummy.style.top = 0;
+
+    var oObj = xGetElementById("waitingforserverresponse");
+    oObj.parentNode.insertBefore(dummy, oObj);
+
+    // 모든 위젯들의 크기를 정해진 크기로 맞춤
     doFitBorderSize();
 
     // 드래그와 리사이즈와 관련된 이벤트 리스너 생성
@@ -249,24 +269,36 @@ function doCheckWidget(e) {
 
     selectedWidget = null;
 
+    var pObj = obj.parentNode;
+    while(pObj) {
+        if(pObj.id == "pageSizeLayer") return;
+        pObj = pObj.parentNode;
+    }
+
+    doHideWidgetSizeSetup();
+
     // 위젯 설정
     if(obj.className == 'widgetSetup') {
         var p_obj = obj.parentNode;
         var widget = p_obj.getAttribute("widget");
         if(!widget) return;
         selectedWidget = p_obj;
-        if(widget == 'widgetContent') {
+        if(widget == 'widgetContent') popopen("./?module=page&act=dispPageAdminAddContent&module_srl="+xGetElementById("pageFo").module_srl.value, "addContent");
-            popopen("./?module=page&act=dispPageAdminAddContent&module_srl="+xGetElementById("pageFo").module_srl.value, "addContent");
+        else popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget,'GenerateCodeInPage');
-        } else {
+        return;
-            popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget,'GenerateCodeInPage');
+    // 위젯 사이트/ 여백 조절
-        }
+    } else if(obj.className == 'widgetSize') {
+        var p_obj = obj.parentNode;
+        var widget = p_obj.getAttribute("widget");
+        if(!widget) return;
+        selectedWidget = p_obj;
+        doShowWidgetSizeSetup(evt.pageX, evt.pageY, selectedWidget);
         return;
-
     // 위젯 제거
     } else if(obj.className == 'widgetRemove') {
         var p_obj = obj.parentNode;
         var widget = p_obj.getAttribute("widget");
-        p_obj.parentNode.removeChild(p_obj);
+        if(confirm(confirm_delete_msg)) p_obj.parentNode.removeChild(p_obj);
         return;
     }
 
@@ -290,7 +322,15 @@ function doCheckWidgetDrag(e) {
     var evt = new xEvent(e); if(!evt.target) return;
     var obj = evt.target; 
 
-    if(obj.className == 'widgetSetup' || obj.className == 'widgetRemove') return;
+    var pObj = obj.parentNode;
+    while(pObj) {
+        if(pObj.id == "pageSizeLayer") return;
+        pObj = pObj.parentNode;
+    }
+
+    doHideWidgetSizeSetup();
+
+    if(obj.className == 'widgetSetup' || obj.className == 'widgetSize' || obj.className == 'widgetRemove') return;
 
     p_obj = obj;
     while(p_obj) {
@@ -303,6 +343,122 @@ function doCheckWidgetDrag(e) {
     }
 }
 
+// 위젯 크기 조절 레이어를 보여줌
+var selectedSizeWidget = null;
+function doShowWidgetSizeSetup(px, py, obj) {
+    var layer = xGetElementById("pageSizeLayer");
+    var formObj = layer.firstChild;
+    while(formObj && formObj.nodeName != "FORM") formObj = formObj.nextSibling;
+    if(!formObj || formObj.nodeName != "FORM") return;
+
+    selectedSizeWidget = obj;
+
+    layer.style.display = "block";
+
+    formObj.width.value = obj.style.width;
+    formObj.height.value = obj.style.height;
+    formObj.margin_left.value = selectedSizeWidget.getAttribute('widget_margin_left');
+    formObj.margin_right.value = selectedSizeWidget.getAttribute('widget_margin_right');
+    formObj.margin_top.value = selectedSizeWidget.getAttribute('widget_margin_top');
+    formObj.margin_bottom.value = selectedSizeWidget.getAttribute('widget_margin_bottom');
+
+    if(px+xWidth(layer)>xPageX('zonePageContent')+xWidth('zonePageContent')) px = xPageX('zonePageContent')+xWidth('zonePageContent')-xWidth(layer)-5;
+    xLeft(layer, px);
+    xTop(layer, py);
+    layer.style.visibility = "visible";
+
+    try {
+        formObj.width.focus();
+    } catch(e) {
+    }
+
+}
+
+function doHideWidgetSizeSetup() {
+    var layer = xGetElementById("pageSizeLayer");
+    layer.style.visibility = "hidden";
+    layer.style.display = "none";
+}
+
+function _getSize(value) {
+    if(!value) return;
+    var type = "px";
+    if(value.lastIndexOf("%")>=0)  type = "%";
+    var num = parseInt(value,10);
+    if(num<1) return;
+    if(type == "%" && num > 100) num = 100;
+    return ""+num+type;
+}
+
+function doApplyWidgetSize(fo_obj) {
+    if(selectedSizeWidget) {
+        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;
+
+        var borderObj = selectedSizeWidget.firstChild;
+        while(borderObj) {
+            if(borderObj.nodeName == "DIV" && borderObj.className == "widgetBorder") {
+                var contentObj = borderObj.firstChild;
+                while(contentObj) {
+                    if(contentObj.nodeName == "DIV") {
+                        contentObj.style.margin = "";
+                        var marginLeft = _getSize(fo_obj.margin_left.value);
+                        if(marginLeft) {
+                            contentObj.style.marginLeft = marginLeft;
+                            selectedSizeWidget.setAttribute('widget_margin_left', marginLeft);
+                        } else {
+                            contentObj.style.marginLeft = '';
+                            selectedSizeWidget.setAttribute('widget_margin_left', '');
+                        }
+
+                        var marginRight = _getSize(fo_obj.margin_right.value);
+                        if(marginRight) {
+                            contentObj.style.marginRight = marginRight;
+                            selectedSizeWidget.setAttribute('widget_margin_right', marginRight);
+                        } else {
+                            contentObj.style.marginRight = '';
+                            selectedSizeWidget.setAttribute('widget_margin_right', '');
+                        }
+
+                        var marginTop = _getSize(fo_obj.margin_top.value);
+                        if(marginTop) {
+                            contentObj.style.marginTop = marginTop;
+                            selectedSizeWidget.setAttribute('widget_margin_top', marginTop);
+                        } else {
+                            contentObj.style.marginTop = '';
+                            selectedSizeWidget.setAttribute('widget_margin_top', '');
+                        }
+
+                        var marginBottom = _getSize(fo_obj.margin_bottom.value);
+                        if(marginBottom) {
+                            contentObj.style.marginBottom = marginBottom;
+                            selectedSizeWidget.setAttribute('widget_margin_bottom', marginBottom);
+                        } else {
+                            contentObj.style.marginBottom = '';
+                            selectedSizeWidget.setAttribute('widget_margin_bottom', '');
+                        }
+
+                        break;
+                    }
+                    contentObj = contentObj.nextSibling;
+                }
+
+                break;
+            }
+
+            borderObj = borderObj.nextSibling;
+        }
+
+        selectedSizeWidget = null;
+        doFitBorderSize();
+    }
+        
+    doHideWidgetSizeSetup();
+}
+
 /* 위젯 드래그 */
 // 드래그 중이라는 상황을 간직할 변수
 var widgetDragManager = {obj:null, isDrag:false}

modules/page/tpl/page_add_content.html

@@ -8,6 +8,10 @@
 <input type="hidden" name="mid" value="{$module_info->mid}" />
 <input type="hidden" name="module_srl" value="{$module_srl}" />
 <input type="hidden" name="style" value="float:left;padding:none;margin:none;width:100%;" />
+<input type="hidden" name="widget_margin_left" value="" />
+<input type="hidden" name="widget_margin_right" value="" />
+<input type="hidden" name="widget_margin_top" value="" />
+<input type="hidden" name="widget_margin_bottom" value="" />
 
     <div class="editor">
         {$editor}

modules/page/tpl/page_content_modify.html

@@ -3,9 +3,7 @@
 <!--%import("css/page.css")-->
 
 <div class="clear"></div>
-<div id="zonePageContent">
+<div id="zonePageContent">{$page_content}</div>
-    {$page_content}
-</div>
 <div class="clear"></div>
 <div class="adminLayer">
     <form action="./" id="pageFo" onsubmit="return doSubmitPageContent(this);">
@@ -30,5 +28,37 @@
 <div class="clear"></div>
 
 <script type="text/javascript">
+    var confirm_delete_msg = "{$lang->confirm_delete}";
     xAddEventListener(window,"load",doStartPageModify);
 </script>
+
+<div id="tmpPageSizeLayer" style="visibility:hidden;">
+    <form action="./" onsubmit="doApplyWidgetSize(this); return false;">
+        <table cellspacing="0">
+        <col width="80" />
+        <col />
+        <col />
+        <tr>
+            <th>{$lang->cmd_widget_size}</th>
+            <td colspan="2"><input type="text" name="width" class="input" value="" /> - <input type="text" class="input" name="height" value="" /></td>
+        </tr>
+        <tr>
+            <th rowspan="3">{$lang->cmd_widget_margin}</th>
+            <td colspan="2" class="tCenter"><input type="text" name="margin_top" class="input" value="" /></td>
+        </tr>
+        <tr>
+            <td><input type="text" name="margin_left" class="input" value="" /></td>
+            <td class="tRight"><input type="text" name="margin_right" class="input" value="" /></td>
+        </tr>
+        <tr>
+            <td colspan="2" class="tCenter"><input type="text" name="margin_bottom" class="input" value="" /></td>
+        </tr>
+        <tr>
+            <td colspan="3" class="buttonBox">
+                <input type="submit" value="{$lang->cmd_save}" class="submit"/>
+            </td>
+        </tr>
+        </table>
+    </form>
+</div>
+

modules/poll/skins/default/result.html

@@ -40,7 +40,7 @@
                     <col width="75" />
                     <tr>
                         <td>&nbsp;</td>
-                        <td class="bar"><!--@if($per)--><img src="./images/color_bar.png" style="width:{$per}%;height:6px;" alt="bar" /></div><!--@else--><img src="./images/blank.gif" width="1" height="1" alt="" /><!--@end--></td>
+                        <td class="bar"><!--@if($per)--><img src="./images/color_bar.png" style="width:{$per}%;height:6px;" alt="bar" /><!--@else--><img src="./images/blank.gif" width="1" height="1" alt="" /><!--@end--></td>
                         <td class="status"><strong>{$item->poll_count}</strong> ({$per}%)</td>
                     </tr>
                     </table>

modules/widget/tpl/js/widget_admin.js

@@ -88,6 +88,13 @@ function doFillWidgetVars() {
     if(typeof(style)=="object") style = style["cssText"];
     fo_obj.style.value = style;
 
+    fo_obj.widget_margin_left.value = selected_node.getAttribute("widget_margin_left");
+    fo_obj.widget_margin_right.value = selected_node.getAttribute("widget_margin_right");
+    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;

modules/widget/tpl/widget_generate_code_in_page.html

@@ -8,6 +8,10 @@
 <input type="hidden" name="module_srl" value="{$module_srl}" />
 <input type="hidden" name="widget_sequence" value="" />
 <input type="hidden" name="style" value="float:left;width:100%;margin:none;padding:none;" />
+<input type="hidden" name="widget_margin_left" value="" />
+<input type="hidden" name="widget_margin_right" value="" />
+<input type="hidden" name="widget_margin_top" value="" />
+<input type="hidden" name="widget_margin_bottom" value="" />
 
     <div id="popHeadder">
         <h3>{$lang->cmd_generate_code}</h3>