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

Issue 2894 fixed. Widget UI bug fix and enhancement.

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12662 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2013-02-01 09:05:53 +00:00
parent b59994c5c2
commit 64280a66a3
13 changed files with 89 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

11
modules/widget/tpl/css/widget.css
View file

@ -1,4 +1,5 @@
@charset "utf-8";.widget_title{border:1px solid #ddd;margin:10px 5px 5px 0;padding:3px}
@charset "utf-8";
.widget_title{border:1px solid #ddd;margin:10px 5px 5px 0;padding:3px}
.widget_mid_list{margin:0 0 5px 10px}
.widget_description{color:#aaa;border-top:1px dotted #eee;margin:5px 0 0 0;padding:5px 0 0 0}
#colorset_area{margin-top:.5em}
@ -6,14 +7,14 @@
#colorset_area .footer{float:left}
#zonePageContent{overflow:hidden;width:100%;padding:0 !important;margin:0 !important}
.pageAddContent{width:700px}
.widgetOutput{float:left;cursor:move;z-index:998;overflow:hidden;position:relative;width:100%}
.widgetOutput .widgetBorder{border:1px dashed #ccc;z-index:999}
.widgetOutput .widgetBoxBorder{border:1px dashed #ccc;z-index:999}
.widgetOutput{float:left;cursor:move;z-index:998;overflow:hidden;position:relative;width:100%;min-height:24px}
.widgetOutput .widgetBorder,
.widgetOutput .widgetBoxBorder{position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed #ccc;z-index:999}
.widgetOutput .widgetResize {border:0;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 {border:0;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 .widgetBoxResize {border:0;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{border:0;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}
.widgetButtons{z-index:999;overflow:hidden;*zoom:1;float:left;padding:0 6px;line-height:24px;position:absolute;visibility:hidden;border-radius:3px;box-shadow:0 0 3px #000 inset}
.widgetButtons{z-index:1000;overflow:hidden;*zoom:1;float:left;padding:0 10px;line-height:24px;position:absolute;visibility:hidden;box-shadow:0 0 3px #333 inset}
.widgetButtons#widgetButton{background-color:#C7DBE9;left:0;top:0}
.widgetButtons#widgetBoxButton{background-color:#D2E9C7;right:0;top:0}
.widgetButtons>button{border:0;width:14px;height:14px;padding:14px 0 0 0;overflow:hidden;cursor:pointer;z-index:99;background:transparent url("../../../admin/tpl/img/glyphicons-halflings.png") no-repeat}

BIN
modules/widget/tpl/images/widget_copy.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 140 B

BIN
modules/widget/tpl/images/widget_remove.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 202 B

BIN
modules/widget/tpl/images/widget_setup.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 120 B

BIN
modules/widget/tpl/images/widget_size.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 191 B

BIN
modules/widget/tpl/images/widgetstyle_none.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

BIN
modules/widget/tpl/images/widgetstyle_setup.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 143 B

128
modules/widget/tpl/js/widget.js
View file

@ -42,10 +42,11 @@ function doStartPageModify(zoneID, module_srl) {
// 위젯 크기/여백 조절 레이어를 가장 밖으로 뺌
jQuery('#tmpPageSizeLayer')
.attr('id', 'pageSizeLayer')
.css({position:'absolute',left:0,top:0})
.hide()
.appendTo('body')
.hide()
.attr('id', 'pageSizeLayer')
.css({position:'fixed'})
.before('<div class="x_modal-backdrop" />')
.find('>form')
.submit(function(){ doApplyWidgetSize(this); return false; });
@ -58,7 +59,6 @@ function doStartPageModify(zoneID, module_srl) {
xAddEventListener(document.getElementById('zonePageContent'), 'mouseover',widgetSetup);
}
// 내용 모두 삭제
function removeAllWidget() {
if(!confirm(confirm_delete_msg)) return;
@ -304,7 +304,6 @@ function doAddWidget(fo) {
var idx = sel.selectedIndex;
var val = sel.options[idx].value;
var module_srl = fo.module_srl.value;
var url = request_uri.setQuery('module','widget').setQuery('act','dispWidgetGenerateCodeInPage').setQuery('selected_widget', val).setQuery('module_srl', module_srl);
popopen(url,'GenerateWidgetCode');
}
@ -313,11 +312,11 @@ function doAddWidget(fo) {
// widgetBorder에 height를 widgetOutput와 맞춰줌
function doFitBorderSize() {
var obj_list = jQuery('.widgetBorer', zonePageObj).get();
/*var obj_list = jQuery('.widgetBorer', zonePageObj).get();
for(var i=0;i<obj_list.length;i++) {
var obj = obj_list[i];
var height = xHeight(obj.parentNode);
if(height<3) height = 20;
if(height<10) height = 24;
xHeight(obj, height);
obj.parentNode.style.clear = '';
}
@ -326,7 +325,7 @@ function doFitBorderSize() {
var obj = obj_list[i];
xHeight(obj, xHeight(obj.parentNode));
obj.parentNode.style.clear = '';
}
}*/
}
var selectedWidget = null;
@ -432,20 +431,6 @@ function doAddWidgetCode(widget_code) {
}
checkDocumentWrite = false;
selectedWidget = null;
/*
//zoneObj.style.visibility = 'hidden';
zoneObj.style.opacity = 0.2;
zoneObj.style.filter = "alpha(opacity=20)";
// 위젯 추가후 페이지 리로딩
var tpl = getWidgetContent();
var fo_obj = get_by_id('pageFo');
fo_obj.content.value = tpl;
fo_obj.mid.value = current_mid;
fo_obj.submit();
*/
}
// 클릭 이벤트시 위젯의 수정/제거/이벤트 무효화 처리
@ -672,13 +657,32 @@ function doShowWidgetSizeSetup(px, py, obj) {
opts.background_y = pos[1];
}
}
layer.css('top', py+'px').show();
var _zonePageObj = jQuery(zonePageObj)
var zoneOffsetLeft = _zonePageObj.offset().left;
var zoneWidth = _zonePageObj.width();
if (px + layer.width() > zoneOffsetLeft + zoneWidth) px = zoneOffsetLeft + zoneWidth - layer.width() - 5;
layer.css('left', px+'px');
layer.show();
jQuery(function($){
var $psLayer = $('#pageSizeLayer');
var $backdrop = $('.x_modal-backdrop');
var ww = $(window).width();
var wh = $(window).height();
var pw = $psLayer.width();
var ph = $psLayer.height();
if(ww>pw && wh>ph){
$backdrop.show();
$psLayer.css({
position : 'fixed',
top : wh/2 - ph/2 + 'px',
left : ww/2 - pw/2 + 'px',
width : '700px'
});
}else{
$backdrop.hide();
$psLayer.css({
position : 'static',
top : 'auto',
left : 'auto',
width : 'auto'
});
}
});
jQuery.each(opts, function(key, val){
var el = form[0].elements[key];
@ -702,11 +706,22 @@ function doShowWidgetSizeSetup(px, py, obj) {
}
function doHideWidgetSizeSetup() {
jQuery('#pageSizeLayer').hide();
//var layer = get_by_id("pageSizeLayer");
//layer.style.visibility = "hidden";
//layer.style.display = "none";
jQuery('#pageSizeLayer, .x_modal-backdrop, .jPicker.Container').hide();
}
jQuery(function($){
$(document).keydown(function(e){
var $jpicker = $('.jPicker.Container:visible');
if(e.which == 27 && !$jpicker.length){
doHideWidgetSizeSetup();
return false;
}else if(e.which == 27 && $jpicker.length){
$jpicker.hide();
return false;
}else{
return true;
}
});
});
function _getSize(value) {
if(!value) return 0;
@ -884,14 +899,6 @@ function showWidgetButton(name, obj) {
if(!widgetButton) return;
widgetButton.style.visibility = 'visible';
obj.insertBefore(widgetButton, obj.firstChild);
/*
var cobj = obj.firstChild;
while(cobj) {
cobj = cobj.nextSibling;
}
obj.appendChild(widgetButton);
*/
}
function widgetSetup(evt) {
@ -907,12 +914,6 @@ function widgetSetup(evt) {
restoreWidgetButtons();
return;
}
/*
if(!obj || typeof(obj.className)=='undefined' || obj.className != 'widgetOutput') {
restoreWidgetButtons();
return;
}
*/
obj = o.get(0);
var widget = o.attr('widget');
@ -1117,10 +1118,7 @@ function widgetDrag(tobj, dx, dy) {
var ll = parseInt(l,10) + parseInt(xWidth(p_tobj),10);
var tt = parseInt(t,10) + parseInt(xHeight(p_tobj),10);
if( (tobj.xDPX < l || tobj.xDPX > ll) || (tobj.xDPY < t || tobj.xDPY > tt) ) {
// zonePageObj.insertBefore(tobj, tobj.parentNode.parentNode.parentNode);
zonePageObj.insertBefore(tobj, jQuery(tobj).parents('div.widgetOutput[widget=widgetBox]').get(0));
doFitBorderSize();
return;
}
@ -1220,33 +1218,6 @@ function widgetDisapearObject(obj, tobj) {
obj.parentNode.removeChild(obj);
widgetTmpObject[tobj.id] = null;
return;
/*
var it = 5;
var ib = 1;
var x = parseInt(xPageX(obj),10);
var y = parseInt(xPageY(obj),10);
var ldt = (x - parseInt(xPageX(tobj),10)) / ib;
var tdt = (y - parseInt(xPageY(tobj),10)) / ib;
return setInterval(function() {
if(ib < 1) {
clearInterval(widgetDisapear);
xInnerHtml(tobj,xInnerHtml(obj));
xInnerHtml(obj,'');
xDisplay(obj, 'none');
obj.parentNode.removeChild(obj);
widgetTmpObject[tobj.id] = null;
return;
}
ib -= 5;
x-=ldt;
y-=tdt;
xLeft(obj, x);
xTop(obj, y);
}, it/ib);
*/
}
// 마우스다운 이벤트 발생시 호출됨
@ -1312,10 +1283,7 @@ function widgetDragDisable(id) {
obj.dragStart = null;
obj.drag = null;
obj.dragEnd = null;
//obj.style.backgroundColor = obj.getAttribute('source_color');
xRemoveEventListener(obj, 'mousedown', widgetMouseDown, false);
return;
}

1
modules/widget/tpl/js/widget.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

42
modules/widget/tpl/widget_layer.html
View file

@ -1,5 +1,5 @@
<section id="tmpPageSizeLayer" class="x_modal x wgs">
<button type="button" class="x_close" data-hide=".wgs">&times;</button>
<section id="tmpPageSizeLayer" class="x_modal x wgs" hidden>
<button type="button" class="x_close" data-hide=".wgs, .x_modal-backdrop, .jPicker.Container">&times;</button>
<form action="index.php">
<div class="x_modal-header">
<h1>{$lang->cmd_widget_size}</h1>
@ -20,34 +20,38 @@
</tr>
<tr>
<th>{$lang->cmd_widget_size}</th>
<td colspan="2"><input type="text" name="width" value="" /> - <input type="text" name="height" value="" /></td>
<td colspan="2">
<label for="width" style="display:inline">W:</label> <input type="text" name="width" id="width" value="" />
&nbsp;&nbsp;
<label for="height" style="display:inline">H:</label> <input type="text" name="height" id="height" value="" />
</td>
</tr>
<tr>
<th rowspan="3">{$lang->cmd_widget_margin}</th>
<td colspan="2" class="line tCenter"><input type="text" name="margin_top" value="" /> px</td>
<td colspan="2" style="text-align:center"><label for="margin_top" style="display:inline">T:</label> <input type="number" name="margin_top" id="margin_top" value="" /> px</td>
</tr>
<tr>
<td><input type="text" name="margin_left" value="" /> px</td>
<td class="tRight"><input type="text" name="margin_right" value="" /> px</td>
<td style="text-align:left"><label for="margin_left" style="display:inline">L:</label> <input type="number" name="margin_left" id="margin_left" value="" /> px</td>
<td style="text-align:right"><label for="margin_right" style="display:inline">R:</label> <input type="number" name="margin_right" id="margin_right" value="" /> px</td>
</tr>
<tr>
<td colspan="2" class="tCenter"><input type="text" name="margin_bottom" value="" /> px</td>
<td colspan="2" style="text-align:center"><label for="margin_bottom" style="display:inline">B:</label> <input type="number" name="margin_bottom" id="margin_bottom" value="" /> px</td>
</tr>
<tr>
<th rowspan="3">{$lang->cmd_widget_padding}</th>
<td colspan="2" class="line tCenter"><input type="text" name="padding_top" value="" /> px</td>
<td colspan="2" style="text-align:center"><label for="padding_top" style="display:inline">T:</label> <input type="number" name="padding_top" id="padding_top" value="" /> px</td>
</tr>
<tr>
<td><input type="text" name="padding_left" value="" /> px</td>
<td class="tRight"><input type="text" name="padding_right" value="" /> px</td>
<td style="text-align:left"><label for="padding_left" style="display:inline">L:</label> <input type="number" name="padding_left" id="padding_left" value="" /> px</td>
<td style="text-align:right"><label for="padding_right" style="display:inline">R:</label> <input type="number" name="padding_right" id="padding_right" value="" /> px</td>
</tr>
<tr>
<td colspan="2" class="tCenter"><input type="text" name="padding_bottom" value="" /> px</td>
<td colspan="2" style="text-align:center"><label for="padding_bottom" style="display:inline">B:</label> <input type="number" name="padding_bottom" id="padding_bottom" value="" /> px</td>
</tr>
<tr>
<th rowspan="3">{$lang->cmd_widget_border}</th>
<td colspan="2" class="tCenter line">
<input type="text" name="border_top_thick" value="" class="small_input" /> px
<td colspan="2" style="text-align:center">
<input type="number" 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>
@ -56,16 +60,16 @@
</td>
</tr>
<tr>
<td>
<input type="text" name="border_left_thick" value="" class="small_input" /> px
<td style="text-align:left">
<input type="number" 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 color-indicator" maxlength="6"/>
</td>
<td class="tRight">
<input type="text" name="border_right_thick" value="" class="small_input" /> px
<td style="text-align:right">
<input type="number" 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>
@ -74,8 +78,8 @@
</td>
</tr>
<tr>
<td colspan="2" class="tCenter">
<input type="text" name="border_bottom_thick" value="" class="small_input" /> px
<td colspan="2" style="text-align:center">
<input type="number" 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>