fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-04 01:01:41 +09:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/sandbox@2963 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
zero 2007-11-13 08:33:07 +00:00
parent 1b15ffbea6
commit cef71a6aab
12 changed files with 266 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

19
classes/widget/WidgetHandler.class.php
View file

@ -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_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 = '&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">'.

3
modules/page/lang/ko.lang.php
View file

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

19
modules/page/page.admin.controller.php
View file

@ -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>'.
'<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;

8
modules/page/page.admin.view.php
View file

@ -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 페이지 삭제 화면 출력
**/

13
modules/page/tpl/css/page.css
View file

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

BIN
modules/page/tpl/images/widget_size.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 377 B

178
modules/page/tpl/js/page_admin.js
View file

@ -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 = '<img src="./common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" widget="widgetContent" style="'+style+'" body="'+body+'" />';
var body = xInnerHtml(cobj);
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') {
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}

30
modules/page/tpl/page_add_content.html
View file

@ -3,22 +3,26 @@
<!--%import("css/page.css")-->
<div class="pageAddContent"></div>
<form action="./" method="get" onsubmit="return procFilter(this, add_content);" id="content_fo">
<input type="hidden" name="content" value="" />
<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%;" />
<form action="./" method="get" onsubmit="return procFilter(this, add_content);" id="content_fo">
<input type="hidden" name="content" value="" />
<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}
</div>
<div class="editor">
{$editor}
</div>
<div class="tCenter help">
<span class="button"><input type="submit" value="{$lang->cmd_insert}" class="editor_button" accesskey="s" /></span>
<a href="#" onclick="window.close(); return false;" class="button"><span>{$lang->cmd_close}</span></a>
</div>
<div class="tCenter help">
<span class="button"><input type="submit" value="{$lang->cmd_insert}" class="editor_button" accesskey="s" /></span>
<a href="#" onclick="window.close(); return false;" class="button"><span>{$lang->cmd_close}</span></a>
</div>
</form>
</form>
<script type="text/javascript">
xAddEventListener(window, 'load', doSyncPageContent);

36
modules/page/tpl/page_content_modify.html
View file

@ -3,9 +3,7 @@
<!--%import("css/page.css")-->
<div class="clear"></div>
<div id="zonePageContent">
{$page_content}
</div>
<div id="zonePageContent">{$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>

2
modules/poll/skins/default/result.html
View file

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

7
modules/widget/tpl/js/widget_admin.js
View file

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

4
modules/widget/tpl/widget_generate_code_in_page.html
View file

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