페이지 수정시 위젯박스는 테두리를 파란색으로 하고, 버튼을 왼쪽 상단으로 이동시킴(위젯과 겹치지 않도록)

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@3140 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
zero 2007-12-03 05:47:32 +00:00
parent 03006f144c
commit 58ed59a79a
4 changed files with 34 additions and 21 deletions

View file

@ -73,7 +73,7 @@
$widget_padding_top = $args->widget_padding_top; $widget_padding_top = $args->widget_padding_top;
$widget_padding_bottom = $args->widget_padding_bottom; $widget_padding_bottom = $args->widget_padding_bottom;
if($include_info) { if($include_info) {
$tpl = sprintf('<div class="widgetOutput" widget="widgetBox" style="%s;" widget_padding_top="%s" widget_padding_right="%s" widget_padding_bottom="%s" widget_padding_left="%s"><div class="widgetCopy"></div><div class="widgetSize"></div><div class="widgetRemove"></div><div class="widgetResize"></div><div class="widgetResizeLeft"></div><div class="widgetBorder"><div class="nullWidget" style="padding:%s %s %s %s;">', $style, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left); $tpl = sprintf('<div class="widgetOutput" widget="widgetBox" style="%s;" widget_padding_top="%s" widget_padding_right="%s" widget_padding_bottom="%s" widget_padding_left="%s"><div class="widgetBoxCopy"></div><div class="widgetBoxSize"></div><div class="widgetBoxRemove"></div><div class="widgetBoxResize"></div><div class="widgetBoxResizeLeft"></div><div class="widgetBoxBorder"><div class="nullWidget" style="padding:%s %s %s %s;">', $style, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left);
} else { } else {
$tpl = sprintf('<div style="overflow:hidden;%s;"><div style="padding:%s %s %s %s;"><div>%s', $style, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left, $body); $tpl = sprintf('<div style="overflow:hidden;%s;"><div style="padding:%s %s %s %s;"><div>%s', $style, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left, $body);
} }

View file

@ -20,6 +20,13 @@
.widgetOutput .widgetResize { background:transparent url("../images/btn_resize.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:1px; right:1px; cursor:pointer; z-index:1000;} .widgetOutput .widgetResize { background:transparent url("../images/btn_resize.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:1px; right:1px; cursor:pointer; z-index:1000;}
.widgetOutput .widgetResizeLeft { background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:0; left:1px; cursor:pointer; z-index:1000;} .widgetOutput .widgetResizeLeft { background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:0; left:1px; cursor:pointer; z-index:1000;}
.widgetOutput .widgetBoxBorder { border:1px dotted #267BEE; z-index:999; }
.widgetOutput .widgetBoxCopy { background:transparent url("../images/widget_copy.gif") no-repeat 1px 1px; width:14px; height:14px; position:absolute; top:1px; left:1px; cursor:pointer; z-index:1000;}
.widgetOutput .widgetBoxSize { background:transparent url("../images/widget_size.gif") no-repeat 1px 1px; width:14px; height:14px; position:absolute; top:1px; left:15px; cursor:pointer; z-index:1000;}
.widgetOutput .widgetBoxRemove { background:transparent url("../images/widget_remove.gif") no-repeat 1px 1px; width:14px; height:14px; position:absolute; top:1px; left:30px; cursor:pointer; z-index:1000;}
.widgetOutput .widgetBoxResize { background:transparent url("../images/btn_resize.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:1px; right:1px; cursor:pointer; z-index:1000;}
.widgetOutput .widgetBoxResizeLeft { background:transparent url("../images/btn_resize_left.gif") no-repeat left bottom; width:12px; height:12px; position:absolute; bottom:0; left:1px; cursor:pointer; z-index:1000;}
#pageSizeLayer { width:500px; 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 { 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 th { padding:4px 0 4px 0; background-color:#DEDEDE; text-align:center; color:#888888;}

View file

@ -112,7 +112,7 @@ function getContentWidgetCode(childObj, widget) {
function getWidgetBoxCode(childObj, widget) { function getWidgetBoxCode(childObj, widget) {
var cobj = childObj.firstChild; var cobj = childObj.firstChild;
while(cobj) { while(cobj) {
if(cobj.className == "widgetBorder") { if(cobj.className == "widgetBorder" || cobj.className == "widgetBoxBorder") {
var c2obj = cobj.firstChild; var c2obj = cobj.firstChild;
while(c2obj) { while(c2obj) {
if(c2obj.className == "nullWidget") { if(c2obj.className == "nullWidget") {
@ -200,12 +200,12 @@ function completeAddContent(ret_obj) {
function doAddWidgetBox() { function doAddWidgetBox() {
var tpl = ''+ var tpl = ''+
'<div class="widgetOutput" style="float:left;width:100%;height:12px;" widget="widgetBox" >'+ '<div class="widgetOutput" style="float:left;width:100%;height:12px;" widget="widgetBox" >'+
'<div class="widgetCopy"></div>'+ '<div class="widgetBoxCopy"></div>'+
'<div class="widgetSize"></div>'+ '<div class="widgetBoxSize"></div>'+
'<div class="widgetRemove"></div>'+ '<div class="widgetBoxRemove"></div>'+
'<div class="widgetResize"></div>'+ '<div class="widgetBoxResize"></div>'+
'<div class="widgetResizeLeft"></div>'+ '<div class="widgetBoxResizeLeft"></div>'+
'<div class="widgetBorder">'+ '<div class="widgetBoxBorder">'+
'<div class="nullWidget" style="width:100%;height:100px;"></div>'+ '<div class="nullWidget" style="width:100%;height:100px;"></div>'+
'<div class="clear"></div>'+ '<div class="clear"></div>'+
'</div>'+ '</div>'+
@ -234,6 +234,12 @@ function doFitBorderSize() {
xHeight(obj, xHeight(obj.parentNode)); xHeight(obj, xHeight(obj.parentNode));
obj.parentNode.style.clear = ''; obj.parentNode.style.clear = '';
} }
var obj_list = xGetElementsByClassName('widgetBoxBorder', zonePageObj);
for(var i=0;i<obj_list.length;i++) {
var obj = obj_list[i];
xHeight(obj, xHeight(obj.parentNode));
obj.parentNode.style.clear = '';
}
} }
var selectedWidget = null; var selectedWidget = null;
@ -263,7 +269,7 @@ function doCheckWidget(e) {
else popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget,'GenerateCodeInPage'); else popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget,'GenerateCodeInPage');
return; return;
// 위젯 복사 // 위젯 복사
} else if(obj.className == 'widgetCopy') { } else if(obj.className == 'widgetCopy' || obj.className == 'widgetBoxCopy') {
var p_obj = obj.parentNode; var p_obj = obj.parentNode;
if(p_obj.className == 'widgetOutput') { if(p_obj.className == 'widgetOutput') {
var dummy = xCreateElement("DIV"); var dummy = xCreateElement("DIV");
@ -289,7 +295,7 @@ function doCheckWidget(e) {
return; return;
// 위젯 사이트/ 여백 조절 // 위젯 사이트/ 여백 조절
} else if(obj.className == 'widgetSize') { } else if(obj.className == 'widgetSize' || obj.className == 'widgetBoxSize') {
var p_obj = obj.parentNode; var p_obj = obj.parentNode;
var widget = p_obj.getAttribute("widget"); var widget = p_obj.getAttribute("widget");
if(!widget) return; if(!widget) return;
@ -297,7 +303,7 @@ function doCheckWidget(e) {
doShowWidgetSizeSetup(evt.pageX, evt.pageY, selectedWidget); doShowWidgetSizeSetup(evt.pageX, evt.pageY, selectedWidget);
return; return;
// 위젯 제거 // 위젯 제거
} else if(obj.className == 'widgetRemove') { } else if(obj.className == 'widgetRemove' || obj.className == 'widgetBoxRemove') {
var p_obj = obj.parentNode; var p_obj = obj.parentNode;
var widget = p_obj.getAttribute("widget"); var widget = p_obj.getAttribute("widget");
if(confirm(confirm_delete_msg)) p_obj.parentNode.removeChild(p_obj); if(confirm(confirm_delete_msg)) p_obj.parentNode.removeChild(p_obj);
@ -332,11 +338,11 @@ function doCheckWidgetDrag(e) {
doHideWidgetSizeSetup(); doHideWidgetSizeSetup();
if(obj.className == 'widgetSetup' || obj.className == 'widgetCopy' || obj.className == 'widgetSize' || obj.className == 'widgetRemove') return; if(obj.className == 'widgetSetup' || obj.className == 'widgetCopy' || obj.className == 'widgetBoxCopy' || obj.className == 'widgetSize' || obj.className == 'widgetBoxSize' || obj.className == 'widgetRemove' || obj.className == 'widgetBoxRemove') return;
p_obj = obj; p_obj = obj;
while(p_obj) { while(p_obj) {
if(p_obj.className == 'widgetOutput' || p_obj.className == 'widgetResize' || p_obj.className == 'widgetResizeLeft') { if(p_obj.className == 'widgetOutput' || p_obj.className == 'widgetResize' || p_obj.className == 'widgetResizeLeft' || p_obj.className == 'widgetBoxResize' || p_obj.className == 'widgetBoxResizeLeft') {
widgetDragEnable(p_obj, widgetDragStart, widgetDrag, widgetDragEnd); widgetDragEnable(p_obj, widgetDragStart, widgetDrag, widgetDragEnd);
widgetMouseDown(e); widgetMouseDown(e);
return; return;
@ -506,7 +512,7 @@ function doApplyWidgetSize(fo_obj) {
var borderObj = selectedSizeWidget.firstChild; var borderObj = selectedSizeWidget.firstChild;
while(borderObj) { while(borderObj) {
if(borderObj.nodeName == "DIV" && borderObj.className == "widgetBorder") { if(borderObj.nodeName == "DIV" && (borderObj.className == "widgetBorder" || borderObj.className == "widgetBoxBorder")) {
var contentObj = borderObj.firstChild; var contentObj = borderObj.firstChild;
while(contentObj) { while(contentObj) {
if(contentObj.nodeName == "DIV") { if(contentObj.nodeName == "DIV") {
@ -621,7 +627,7 @@ function widgetDragEnable(obj, funcDragStart, funcDrag, funcDragEnd) {
// 드래그를 시작할때 호출되는 함수 (이동되는 형태를 보여주기 위한 작업을 함) // 드래그를 시작할때 호출되는 함수 (이동되는 형태를 보여주기 위한 작업을 함)
function widgetDragStart(tobj, px, py) { function widgetDragStart(tobj, px, py) {
if(tobj.className == 'widgetResize' || tobj.className == 'widgetResizeLeft' ) return; if(tobj.className == 'widgetResize' || tobj.className == 'widgetResizeLeft' || tobj.className == 'widgetBoxResize' || tobj.className == 'widgetBoxResizeLeft') return;
var obj = widgetGetTmpObject(tobj); var obj = widgetGetTmpObject(tobj);
xInnerHtml(obj, xInnerHtml(tobj)); xInnerHtml(obj, xInnerHtml(tobj));
@ -655,7 +661,7 @@ function widgetDrag(tobj, dx, dy) {
if(!float) float = 'left'; if(!float) float = 'left';
// 위젯 리사이즈 (우측) // 위젯 리사이즈 (우측)
if(tobj.className == 'widgetResize') { if(tobj.className == 'widgetResize' || tobj.className == 'widgetBoxResize') {
if(nx < sx+minWidth) nx = sx+minWidth; if(nx < sx+minWidth) nx = sx+minWidth;
if(nx > zoneRight) nx = zoneRight; if(nx > zoneRight) nx = zoneRight;
@ -677,7 +683,7 @@ function widgetDrag(tobj, dx, dy) {
xHeight(tobj.parentNode, new_height); xHeight(tobj.parentNode, new_height);
// 위젯 리사이즈 (좌측) // 위젯 리사이즈 (좌측)
} else if(tobj.className == 'widgetResizeLeft') { } else if(tobj.className == 'widgetResizeLeft' || tobj.className == 'widgetBoxResizeLeft') {
if(nx < zoneLeft) nx = zoneLeft; if(nx < zoneLeft) nx = zoneLeft;

View file

@ -47,7 +47,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
#<input type="text" name="border_top_color" value="" class="color_input" maxlength="6"/> <input type="text" name="border_top_color" value="" class="color_input" maxlength="6"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -57,7 +57,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
#<input type="text" name="border_left_color" value="" class="color_input" maxlength="6"/> <input type="text" name="border_left_color" value="" class="color_input" maxlength="6"/>
</td> </td>
<td class="tRight"> <td class="tRight">
<input type="text" name="border_right_thick" value="" class="small_input" />px <input type="text" name="border_right_thick" value="" class="small_input" />px
@ -65,7 +65,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
#<input type="text" name="border_right_color" value="" class="color_input" maxlength="6"/> <input type="text" name="border_right_color" value="" class="color_input" maxlength="6"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -75,7 +75,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
#<input type="text" name="border_bottom_color" value="" class="color_input" maxlength="6"/> <input type="text" name="border_bottom_color" value="" class="color_input" maxlength="6"/>
</td> </td>
</tr> </tr>
<tr> <tr>