diff --git a/classes/widget/WidgetHandler.class.php b/classes/widget/WidgetHandler.class.php index 24695a81e..9c6eab4df 100644 --- a/classes/widget/WidgetHandler.class.php +++ b/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('
%s
', $style, $body); + $tpl = sprintf('
%s
', $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_bottom = (int)$args->widget_margin_bottom; - $margin_left = (int)$args->widget_margin_left; - $margin_right = (int)$args->widget_margin_right; + $margin_top = $args->widget_margin_top; + $margin_bottom = $args->widget_margin_bottom; + $margin_left = $args->widget_margin_left; + $margin_right = $args->widget_margin_right; $args->style .= ';'; @@ -132,8 +136,9 @@ if(!$html) $html = ' '; $output = sprintf( ''. - '
'. + '
'. '
'. + '
'. '
'. '
'. '
'. diff --git a/modules/page/lang/ko.lang.php b/modules/page/lang/ko.lang.php index c94fb3f16..d6a75658c 100644 --- a/modules/page/lang/ko.lang.php +++ b/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 = "여백"; ?> diff --git a/modules/page/page.admin.controller.php b/modules/page/page.admin.controller.php index 2fa89940e..ec9ab6f73 100644 --- a/modules/page/page.admin.controller.php +++ b/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( - '
'. - ''. + ''. + '
'. '
'. + '
'. '
'. '
'. '
'. - '
'. + '
'. '%s'. '
'. '
'. ''. '
', - $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; diff --git a/modules/page/page.admin.view.php b/modules/page/page.admin.view.php index 865f11d56..c4c6a9931 100644 --- a/modules/page/page.admin.view.php +++ b/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 페이지 삭제 화면 출력 **/ diff --git a/modules/page/tpl/css/page.css b/modules/page/tpl/css/page.css index c53f8503a..b6743e55d 100644 --- a/modules/page/tpl/css/page.css +++ b/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;} diff --git a/modules/page/tpl/images/widget_size.gif b/modules/page/tpl/images/widget_size.gif new file mode 100644 index 000000000..564e234cd Binary files /dev/null and b/modules/page/tpl/images/widget_size.gif differ diff --git a/modules/page/tpl/js/page_admin.js b/modules/page/tpl/js/page_admin.js index c38f2038e..fb12509bf 100644 --- a/modules/page/tpl/js/page_admin.js +++ b/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)); - code = ''; + var body = xInnerHtml(cobj); + code = ''; } 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') { - 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'); - } + if(widget == 'widgetContent') 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'); + return; + // 위젯 사이트/ 여백 조절 + } 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} diff --git a/modules/page/tpl/page_add_content.html b/modules/page/tpl/page_add_content.html index 7a4e83632..af8e87cc3 100644 --- a/modules/page/tpl/page_add_content.html +++ b/modules/page/tpl/page_add_content.html @@ -3,22 +3,26 @@
-
- - - - + + + + + + + + + -
- {$editor} -
+
+ {$editor} +
-
- - {$lang->cmd_close} -
+
+ + {$lang->cmd_close} +
-
+ + + + diff --git a/modules/poll/skins/default/result.html b/modules/poll/skins/default/result.html index 1916cbd50..7f21579b5 100644 --- a/modules/poll/skins/default/result.html +++ b/modules/poll/skins/default/result.html @@ -40,7 +40,7 @@   - bar
+ bar {$item->poll_count} ({$per}%) diff --git a/modules/widget/tpl/js/widget_admin.js b/modules/widget/tpl/js/widget_admin.js index 5842e9956..86ef8498e 100644 --- a/modules/widget/tpl/js/widget_admin.js +++ b/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; diff --git a/modules/widget/tpl/widget_generate_code_in_page.html b/modules/widget/tpl/widget_generate_code_in_page.html index 460b30049..0e6f22298 100644 --- a/modules/widget/tpl/widget_generate_code_in_page.html +++ b/modules/widget/tpl/widget_generate_code_in_page.html @@ -8,6 +8,10 @@ + + + +

{$lang->cmd_generate_code}