mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-09 03:32:00 +09:00
bd7b16fbca
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@9226 201d5d3c-b55e-5fd7-737f-ddc643e51545
994 lines
36 KiB
JavaScript
994 lines
36 KiB
JavaScript
jQuery(function($){
|
|
|
|
// constants
|
|
var FACEOFF_TYPE = ['fixed','liquid','hybrid'];
|
|
var FACEOFF_COLUMN = ['ece','c','ec','ce','cee','eec'];
|
|
var FACEOFF_ALIGN = ['aCenter','aLeft','aRight'];
|
|
|
|
var FaceOff = {
|
|
curElement : null,
|
|
_widgetParent : null,
|
|
|
|
preview : $('#demoXe'),
|
|
propDialog : null,
|
|
|
|
init : function() {
|
|
var fo = this;
|
|
|
|
// toolbar
|
|
$('#toolbar').toolbar({
|
|
fade : 300,
|
|
click : function(data) {
|
|
var args = (data.arg || '').split(',');
|
|
|
|
switch(args[0]) {
|
|
case 'a': fo.setLayoutAlign(args[1],false); break;
|
|
case 'c': fo.setLayoutColumn(args[1],false); break;
|
|
case 't': fo.setLayoutType(args[1],false); break;
|
|
}
|
|
},
|
|
hover : function(data) {
|
|
var item = data.element;
|
|
if(item.parent().is('.noneToolBar')) return;
|
|
|
|
var args = data.arg.split(',');
|
|
var pos_item = item.offset();
|
|
var pos_preview = fo.preview.show().css({left:0,top:0}).offset();
|
|
var type, col, align;
|
|
type = 'demo'+capitalize(args[0]=='t'?args[1]:fo.getLayoutType());
|
|
col = 'demo'+(args[0]=='c'?args[1]:fo.getLayoutColumn()).toUpperCase();
|
|
align = 'demo'+capitalize(args[0]=='a'?args[1]:fo.getLayoutAlign());
|
|
|
|
fo.preview.dequeue().stop().css({
|
|
width: '60px',
|
|
left : pos_item.left - pos_preview.left + item.parent().width() + 2,
|
|
top : pos_item.top - pos_preview.top
|
|
}).attr('class', 'layoutDemo demoBox '+type+' '+align);
|
|
|
|
$('#demoContainer').attr('class','').addClass(col);
|
|
|
|
(function(){
|
|
if (!fo.preview.is(':visible')) return;
|
|
|
|
fo.preview.animate({width:'150'}, 1000).animate({width:'120'}, 1000, 'linear', arguments.callee);
|
|
})();
|
|
},
|
|
hide : function(menu) {
|
|
fo.preview.dequeue().stop().hide();
|
|
}
|
|
});
|
|
|
|
if(typeof(faceOffStyle)!='undefined') {
|
|
for(var i in faceOffStyle) {
|
|
if(i=="body") {
|
|
$("html>body").attr("style",faceOffStyle[i]);
|
|
} else {
|
|
try {
|
|
$(i).attr("style",faceOffStyle[i]);
|
|
} catch(e) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$('#xe , #body, #header, #footer, #neck, #knee, div.e1, div.e2, div.neck, div.knee').each( function(i) { $(this).find('a').css('color',$(this).css('color')).css('font-family',$(this).css('font-family')); } );
|
|
|
|
if($('#header').css('display')!='none') $('#useHeader').attr('checked',true);
|
|
else $('#useHeader').attr('checked',false);
|
|
if($('#footer').css('display')!='none') $('#useFooter').attr('checked',true);
|
|
else $('#useFooter').attr('checked',false);
|
|
|
|
$('#useHeader').click(function(event) {
|
|
if($('#useHeader').attr('checked')) {
|
|
$('#header').css('display','block');
|
|
$('#useHeader').attr('checked', true);
|
|
} else {
|
|
$('#header').css('display','none');
|
|
$('#useHeader').attr('checked', false);
|
|
}
|
|
});
|
|
|
|
$('#useFooter').click(function(event) {
|
|
if($('#useFooter').attr('checked')) $('#footer').css('display','block');
|
|
else $('#footer').css('display','none');
|
|
});
|
|
|
|
// tab to select widget
|
|
$(document).mousedown(function(event){
|
|
var filter = '#xe .widgetOutput, #xe .extension, #body, #header, #footer, #toolbar, #propertyDialog, #faceoffSelector, .overlay';
|
|
var target = $(event.target);
|
|
var selection = target.parents(filter).add(target);
|
|
if (selection.is('#toolbar, #propertyDialog, #faceoffSelector, .overlay')) return;
|
|
|
|
if (selection.is(filter)) {
|
|
fo.selectElement(selection.filter(filter).eq(0));
|
|
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
} else if(fo.curElement) {
|
|
fo.selectElement(null);
|
|
}
|
|
}).hotkey({
|
|
'TAB' : method(this.selectByTAB, this),
|
|
'Shift+TAB' : method(this.selectByTAB, this),
|
|
'UP' : method(this.moveWidget, this),
|
|
'DOWN' : method(this.moveWidget, this),
|
|
'LEFT' : method(this.moveWidget, this),
|
|
'RIGHT' : method(this.moveWidget, this),
|
|
'ESC' : method(this.selectByESC, this),
|
|
'ENTER' : method(this.showPreference, this)
|
|
});
|
|
|
|
// select default menus
|
|
var type = this.getLayoutType();
|
|
var col = this.getLayoutColumn();
|
|
var align = this.getLayoutAlign();
|
|
|
|
$('#toolbar .buttons li.menu').each(function(){
|
|
var arg = $(this).attr('tb:arg');
|
|
if (!arg.indexOf('t,'+type) || !arg.indexOf('c,'+col) || !arg.indexOf('a,'+align)) $(this).click();
|
|
});
|
|
|
|
this.propDialog = PropertyDialog.init('#propertyDialog');
|
|
},
|
|
getLayoutType : function() {
|
|
var sel = $('#container[style],#header[style]:visible,#footer[style]:visible')
|
|
.add('#neck[style]:visible, #knee[style]:visible, #body[style], #content[style] ')
|
|
.add('div[id^=ex_][style]:visible, div.neck[style]:visible, div.knee[style]:visible, div.e1[style]:visible, div.e2[style]:visible');
|
|
//sel.css('padding','').css('margin','');
|
|
return findEnum($('#xe').attr('class'), FACEOFF_TYPE);
|
|
},
|
|
// LaytoutType : 'fixed','liquid','hybrid' 을 set
|
|
// fixed : Use fixed width for all column
|
|
// liquid : Use flexible width for all column
|
|
// hybrid : Use flexible width for all column but content column
|
|
setLayoutType : function(type) {
|
|
$('#xe').removeClass(FACEOFF_TYPE.join(' ')).addClass(_enum(type, FACEOFF_TYPE));
|
|
},
|
|
getLayoutColumn : function() {
|
|
return findEnum($('#container').attr('class'), FACEOFF_COLUMN);
|
|
},
|
|
//'ece','c','ec','ce','cee','eec' 컬럼타입을 set 한다 크기와 관련된 스타일은 초기화 한다
|
|
setLayoutColumn : function(type,init){
|
|
$('#container').removeClass(FACEOFF_COLUMN.join(' ')).addClass(_enum(type, FACEOFF_COLUMN));
|
|
var sel = $('#container[style],#header[style]:visible,#footer[style]:visible')
|
|
.add('#neck[style]:visible, #knee[style]:visible, #body[style], #content[style] ')
|
|
.add('div[id^=ex_][style]:visible, div.neck[style]:visible, div.knee[style]:visible, div.e1[style]:visible, div.e2[style]:visible');
|
|
|
|
if(init) sel.css('padding','').css('margin','');
|
|
|
|
// 칼럼의 변경으로, 현재 선택된 위젯이 보이지 않게 된다면, 위젯 선택을 해제한다.
|
|
if (this.curElement && !this.curElement.parents('#xe .extension:visible').length) {
|
|
this.selectElement(null);
|
|
}
|
|
},
|
|
getLayoutAlign : function() {
|
|
return findEnum($('#xe').attr('class'), FACEOFF_ALIGN);
|
|
},
|
|
setLayoutAlign : function(type) {
|
|
$('#xe').removeClass(FACEOFF_ALIGN.join(' ')).addClass(_enum(type, FACEOFF_ALIGN));
|
|
},
|
|
saveLayoutConfig : function(saveTemp) {
|
|
$.exec_json('layout.procLayoutAdminUserValueInsert', {
|
|
'saveTemp':saveTemp || '',
|
|
mid : current_mid,
|
|
type : this.getLayoutType(),
|
|
column : this.getLayoutColumn(),
|
|
align : this.getLayoutAlign(),
|
|
neck : this.getWidgetContent($('#body .neck:visible')),
|
|
knee : this.getWidgetContent($('#body .knee:visible')),
|
|
e1 : this.getWidgetContent($('#body .e1:visible')),
|
|
e2 : this.getWidgetContent($('#body .e2:visible')),
|
|
neck : this.getWidgetContent($('#neck:visible')),
|
|
knee : this.getWidgetContent($('#knee:visible')),
|
|
css : this.getFaceoffStyle()
|
|
},function(data){
|
|
if(data.saveTemp=='Y'){
|
|
document.location.href = request_uri.setQuery('mid',current_mid).setQuery('act','dispLayoutAdminLayoutModify');
|
|
}else{
|
|
document.location.href = request_uri.setQuery('mid',current_mid);
|
|
}
|
|
});
|
|
},
|
|
getWidgetContent : function(el) {
|
|
if (!el.length) return '';
|
|
|
|
var text = [];
|
|
|
|
el.find('div[widget]').each(function(){
|
|
var type = $(this).attr('widget');
|
|
|
|
switch(type) {
|
|
case 'widgetContent':
|
|
var div = $('<div>');
|
|
var attr = [];
|
|
|
|
$(this.attributes).each(function(){
|
|
if (!this.nodeName || !this.nodeValue) return;
|
|
|
|
var name = this.nodeName.toLowerCase(), val = this.nodeValue;
|
|
if ('.contenteditable.src.widget.class.widget_width.widget_width_type.xdpx.xdpy.height.'.indexOf('.'+name+'.') > -1) return;
|
|
|
|
div.text(val);
|
|
attr.push(name+'="'+div.html()+'"');
|
|
});
|
|
|
|
var content = $(this).children('div.widgetContent');
|
|
if (!content.length) return;
|
|
return text.push('<img src="./common/img/widget_bg.jpg" class="zbxe_widget_output" widget="widgetContent" '+attr.join(' ')+' />');
|
|
default:
|
|
var div = $('<div>');
|
|
var attr = [];
|
|
|
|
$(this.attributes).each(function(){
|
|
if (!this.nodeName || !this.nodeValue) return;
|
|
|
|
var name = this.nodeName.toLowerCase(), val = this.nodeValue;
|
|
if ('.style.contenteditable.src.widget.body.class.widget_width.widget_width_type.xdpx.xdpy.height.'.indexOf('.'+name+'.') > -1) return;
|
|
|
|
div.text(val);
|
|
attr.push(name+'="'+div.html()+'"');
|
|
});
|
|
attr.push('style="'+$(this).attr('style')+'"');
|
|
|
|
// return text.push('<img class="zbxe_widget_output" widget="'+type+'" addclass="section" '+attr.join(' ')+' />');
|
|
return text.push('<img class="zbxe_widget_output" widget="'+type+'" '+attr.join(' ')+' />');
|
|
}
|
|
});
|
|
|
|
return text.join('');
|
|
},
|
|
getFaceoffStyle : function() {
|
|
var sty = [];
|
|
var sel = $('html>body,#container[style],#header[style],#footer[style]')
|
|
.add('#neck[style]:visible, #knee[style]:visible, #body[style], #content[style] ')
|
|
.add('div.neck[style]:visible, div.knee[style]:visible, div.e1[style]:visible, div.e2[style]:visible'); //div[id^=ex_][style]:visible,
|
|
|
|
sel.each(function(){
|
|
var bgImage = $(this).css("backgroundImage");
|
|
if(bgImage && bgImage!='none') {
|
|
bgImage = bgImage.replace(/(.+)images\/([a-z0-9]+)\.(jpg|jpeg|gif|png|swf|flv)\)/i,'url(./images/$2.$3)');
|
|
$(this).css("background-image",bgImage);
|
|
}
|
|
var style = $(this).attr('style');
|
|
if($(this).is('.neck, .knee, .e1, .e2')) {
|
|
if (!style) return;
|
|
if($(this).is('.e1')) sty.push( 'div.e1 { ' + style + ' } ');
|
|
else if($(this).is('.e2')) sty.push( 'div.e2 { ' + style + ' } ');
|
|
else if($(this).is('.neck')) sty.push( 'div.neck { ' + style + ' } ');
|
|
else if($(this).is('.knee')) sty.push( 'div.knee { ' + style + ' } ');
|
|
}else if($(this).is('html>body')) {
|
|
style = 'background-color:' + $(this).css('backgroundColor')
|
|
+ ';background-image:' + $(this).css('backgroundImage')
|
|
+ ';background-repeat:' + $(this).css('backgroundRepeat');
|
|
+ ';font-family:'+ $(this).css('fontFamily');
|
|
+ ';color:'+ $(this).css('color');
|
|
sty.push('body' + ' { ' + style +' }');
|
|
if($(this).css('fontFamily')) sty.push('body a { font-family:'+$(this).css('fontFamily')+'; }');
|
|
if($(this).css('color')) sty.push('body a { color:'+$(this).css('color')+'; }');
|
|
} else {
|
|
if (!style) return;
|
|
sty.push('#' + this.id + ' { ' + style +' }');
|
|
if($(this).css('fontFamily')) sty.push('#'+this.id+' a { font-family:'+$(this).css('fontFamily')+'; }');
|
|
if($(this).css('color')) sty.push('#'+this.id+' a { color:'+$(this).css('color')+'; }');
|
|
}
|
|
});
|
|
|
|
return sty.join('\n');
|
|
},
|
|
doAddWidgetCode : function(widget_code) {
|
|
|
|
var par = this._widgetParent;
|
|
var obj = $(widget_code);
|
|
var uniqueId = '', style = '';
|
|
|
|
if (!par) return;
|
|
|
|
|
|
if (par.is('.widgetOutput')) {
|
|
uniqueId = par.attr('id');
|
|
obj.attr('id', uniqueId).addClass('section');
|
|
par.replaceWith(obj).attr('style', par.attr('style'));
|
|
if(!obj.css("float")) obj.css("clear","both");
|
|
else(obj.css("clear",""));
|
|
} else {
|
|
uniqueId = 'ex_'+(new Date()).getTime();
|
|
obj.attr('id', uniqueId).addClass('section');
|
|
obj.appendTo(this._widgetParent).attr('style','');
|
|
obj.css("clear","both");
|
|
}
|
|
|
|
this.selectElement(this._widgetParent);
|
|
this._widgetParent = null;
|
|
|
|
this.saveLayoutConfig('Y');
|
|
},
|
|
selectByTAB : function(event, key) {
|
|
var els = null;
|
|
var cur = this.curElement;
|
|
var shift = event.shiftKey, els, len, idx;
|
|
|
|
if (!cur || cur.hasClass('widgetOutput')) els = $('#xe .extension:visible > .widgetOutput');
|
|
else if (cur.is('#body, #header, #footer')) els = $('#body, #header, #footer');
|
|
else if (cur.is('.extension')) els = $('#xe .extension:visible');
|
|
|
|
if (!els.length) els = $('#xe .extension:visible');
|
|
|
|
if (!(len = els.length)) return;
|
|
if (cur && (idx = els.index(cur)) < 0) {
|
|
this.selectElement(null);
|
|
return this.selectByTAB(event, key);
|
|
}
|
|
|
|
if (cur) {
|
|
if (shift) this.selectElement( els.eq( idx?idx-1:len-1 ) );
|
|
else this.selectElement( els.eq( idx==len-1?0:idx+1 ) );
|
|
} else {
|
|
this.selectElement( els.eq( shift ? len-1 : 0 ) );
|
|
}
|
|
},
|
|
selectByESC : function(event, key) {
|
|
var cur = this.curElement, par;
|
|
|
|
if (!cur) return this.selectByTAB(event, key);
|
|
|
|
if (cur.is('#body, #header, #footer')) {
|
|
this.selectElement(null);
|
|
} else if (cur.hasClass('extension')) {
|
|
par = cur.parent('#body, #header, #footer').add(cur.prev('#header')).add(cur.next('#footer'));
|
|
par.length?this.selectElement(par.eq(0)):this.selectElement(null);
|
|
} else if (cur.hasClass('widgetOutput')) {
|
|
this.selectElement( cur.parent('.extension').eq(0) );
|
|
}
|
|
},
|
|
moveWidget : function(event, key) {
|
|
var vert = 0, horz = 0;
|
|
var cur = this.curElement;
|
|
var selection;
|
|
|
|
if (!cur || !cur.hasClass('widgetOutput')) return;
|
|
|
|
switch(key) {
|
|
case 'UP': vert = -1; break;
|
|
case 'DOWN' : vert = 1; break;
|
|
case 'LEFT' : horz = -1; break;
|
|
case 'RIGHT' : horz = 1; break;
|
|
}
|
|
|
|
if (horz && cur.parents('#body').length && this.getLayoutColumn().length > 2) {
|
|
if (horz > 0 && cur.parents('.e1').length && $('#body > .e2:visible').length) {
|
|
$('#body > .e2').append(cur);
|
|
} else if (horz < 0 && cur.parents('.e2').length && $('#body > .e1:visible').length) {
|
|
$('#body > .e1').append(cur);
|
|
}
|
|
} else if (vert < 0) { // up
|
|
if ((selection = cur.prev('.widgetOutput')).length) {
|
|
selection.before(cur);
|
|
} else if (cur.parents('.e1, .e2').length) {
|
|
$('#neck > .extension').append(cur);
|
|
} else if (cur.parents('#knee:visible').length) {
|
|
$('#body > .extension:visible:last').append(cur);
|
|
}
|
|
} else if (vert > 0) { // down
|
|
if ((selection = cur.next('.widgetOutput')).length) {
|
|
selection.after(cur);
|
|
} else if (cur.parents('.e1, .e2').length) {
|
|
$('#knee > .extension').prepend(cur);
|
|
} else if (cur.parents('#neck:visible').length) {
|
|
$('#body > .extension:visible:first').prepend(cur);
|
|
}
|
|
}
|
|
|
|
this.selectElement(cur);
|
|
},
|
|
deleteWidget : function(){
|
|
var cur = this.curElement;
|
|
|
|
if (!cur.is('.widgetOutput')) return;
|
|
cur.remove();
|
|
|
|
this.saveLayoutConfig('Y');
|
|
},
|
|
popupAddWidgetStyle : function(){
|
|
var cur = this.curElement;
|
|
this._widgetParent = this.curElement;
|
|
|
|
if (!cur.is('.widgetOutput')) return;
|
|
|
|
selectedWidget = cur.get(0);
|
|
popopen(request_uri+"?module=widget&act=dispWidgetStyleGenerateCodeInPage&selected_widget="+cur.attr('widget')+"&widgetstyle="+cur.attr('widgetstyle'),'GenerateCodeInPage');
|
|
},
|
|
|
|
popupAddWidget : function() {
|
|
var cur = this.curElement;
|
|
var url = request_uri.replace(/\?.+$/, '')+'?module=widget&type=faceoff';
|
|
var win = 'GenerateWidgetCode';
|
|
|
|
if (!cur.is('.widgetOutput, .extension')) return;
|
|
|
|
this._widgetParent = this.curElement;
|
|
|
|
if (cur.is('.widgetOutput')) {
|
|
selectedWidget = cur.get(0);
|
|
// modify widget
|
|
if (cur.attr('widget') == 'widgetContent') {
|
|
// content widget
|
|
url += '&act=dispWidgetAdminAddContent&module_srl='+$('#layout_srl').val()+'&document_srl='+cur.attr('document_srl');
|
|
popopen(url, 'addContent');
|
|
} else {
|
|
// widget
|
|
url += '&act=dispWidgetGenerateCodeInPage&selected_widget='+cur.attr('widget');
|
|
popopen(url, 'GenerateCodeInPage');
|
|
}
|
|
} else {
|
|
// add new widget
|
|
url += '&act=dispWidgetGenerateCodeInPage';
|
|
popopen(url, 'GenerateCodeInPage');
|
|
}
|
|
},
|
|
popupAddContent : function() {
|
|
var url = request_uri.replace(/\?.+$/,'')+'?module=widget&act=dispWidgetAdminAddContent&type=faceoff&mid=current_mid&module_srl='+$('#layout_srl').val();
|
|
|
|
this._widgetParent = this.curElement;
|
|
|
|
popopen(url, "addContent");
|
|
},
|
|
selectElement : function(element) {
|
|
var selector = $('#faceoffSelector'), cur, pos_cur, pos_sel;
|
|
var cur = this.curElement = element || null;
|
|
|
|
if (!selector.length) selector = $('<div id="faceoffSelector">');
|
|
|
|
// hide selector
|
|
selector.hide();
|
|
var sel = $('#neck[style]:visible .extension, #knee[style]:visible .extension,div.e1[style]:visible, div.e2[style]:visible').height('');
|
|
|
|
// 위젯을 할당한다. 선택된 위젯이 jQuery 객체가 아니거나 혹은 해당하는 DOM이 없다면 현재 선택된 위젯은 없다.
|
|
if (cur && ( !cur.jquery || !cur.length )) cur = this.curElement = null;
|
|
|
|
$('#smartmenu>li').hide();
|
|
// effect on select
|
|
if (cur) {
|
|
$(cur.get(0).offsetParent).append(selector);
|
|
|
|
pos_cur = cur.offset();
|
|
pos_sel = selector.css({position:'absolute',left:0,top:0}).show().offset();
|
|
|
|
if(cur.height() == 0) cur.height(20);
|
|
|
|
selector.css({
|
|
left : pos_cur.left - pos_sel.left,
|
|
top : pos_cur.top - pos_sel.top
|
|
})
|
|
.width(cur.outerWidth())
|
|
.height(cur.outerHeight());
|
|
|
|
if (cur.is('#body, #header, #footer')) {
|
|
$('#for-block').show();
|
|
$('>dl>dt:visible','#for-block').html(cur.attr('id')+' > ');
|
|
} else if (cur.is('.extension')) {
|
|
|
|
var selected = 'Extension';
|
|
if(cur.parent().is('#neck')){
|
|
selected = 'Neck';
|
|
}else if(cur.parent().is('#knee')){
|
|
selected = 'Knee';
|
|
}else if(cur.is('.neck')){
|
|
selected = 'Extension Neck';
|
|
}else if(cur.is('.knee')){
|
|
selected = 'Extension Knee';
|
|
}else if(cur.is('.e1')){
|
|
selected = 'Extension 1';
|
|
}else if(cur.is('.e2')){
|
|
selected = 'Extension 2';
|
|
}
|
|
$('>dl>dt','#for-extension').html(selected+' > ');
|
|
|
|
$('#for-extension').show();
|
|
} else if (cur.is('.widgetOutput')) {
|
|
$('#for-widget').show();
|
|
|
|
}
|
|
} else {
|
|
$('#for-all').show();
|
|
}
|
|
},
|
|
showPreference : function(event,target) {
|
|
if(target && target=='html>body' || target=='#container'){
|
|
this.propDialog.open($(target));
|
|
}else{
|
|
var cur = this.curElement;
|
|
|
|
if (!cur || !cur.length) return this.closePreference();
|
|
|
|
this.propDialog.open(this.curElement);
|
|
}
|
|
},
|
|
paint : function() {
|
|
if (!this.curElement) return;
|
|
|
|
// repaint selection size
|
|
|
|
if (this.propDialog.visible())
|
|
|
|
this.propDialog.paint();
|
|
}
|
|
};
|
|
|
|
var PropertyDialog = {
|
|
element : null,
|
|
overlay : null,
|
|
target : null,
|
|
|
|
init : function(element) {
|
|
this.element = $(element).draggable();
|
|
|
|
if (!this.overlay) this.overlay = Overlay.create();
|
|
|
|
// more link
|
|
this.element.find('button.morelink').click( method(this.more, this) );
|
|
|
|
// form
|
|
this.element.find('form')
|
|
.bind('submit', method(this.save, this))
|
|
.bind('reset', method(this.cancel, this));
|
|
|
|
return this;
|
|
},
|
|
open : function(selectedElement) {
|
|
var sel = selectedElement;
|
|
var dlg = $('#propertyDialog');
|
|
var vals = [], i = 0, j = 0;
|
|
var type = ['margin', 'padding'];
|
|
var dirs = ['top','right','bottom','left'];
|
|
var reSame = /^([0-9a-z%\-]+) \1 \1 \1$/;
|
|
var isWidget = false;
|
|
var isBody = false;
|
|
var isLayout = false;
|
|
dlg.css( { position : 'absolute' } );
|
|
|
|
function same_all(arr) {
|
|
return (arr[0] == arr[1] && arr[1] == arr[2] && arr[2] == arr[3]);
|
|
}
|
|
|
|
// target element
|
|
this.target = sel;
|
|
|
|
// is the target a widget?
|
|
isWidget = sel.is('.widgetOutput');
|
|
isBody = sel.is('html>body');
|
|
isContainer = sel.is('#container');
|
|
isHeader = sel.is('#header');
|
|
|
|
|
|
$('fieldset',dlg).show();
|
|
|
|
if(!isWidget){
|
|
$('fieldset[name=float],fieldset[name=width],fieldset[name=height],fieldset[name=margin],fieldset[name=padding]',dlg).hide();
|
|
}
|
|
|
|
if(isBody){
|
|
$('fieldset[name!=background]',dlg).hide();
|
|
$('fieldset[name=font]',dlg).show();
|
|
}
|
|
|
|
if(isHeader){
|
|
$('fieldset[name=margin]',dlg).show();
|
|
$('fieldset[name=padding]',dlg).show();
|
|
}
|
|
|
|
// remove visible more
|
|
this.element.find('.visible-more').removeClass('visible-more');
|
|
|
|
// get preferences
|
|
if($('fieldset[name=float]:visible',dlg).size() > 0){
|
|
//float
|
|
$('#float').val(sel.css('float'));
|
|
$('#width').val(sel.css('width'));
|
|
//$('#height').val(sel.css('height'));
|
|
}
|
|
|
|
if($('fieldset[name=margin]:visible',dlg).size() > 0){
|
|
// margins and paddings
|
|
for(j=0; j < type.length; j++) {
|
|
for(i=0, vals=[]; i < dirs.length; i++) {
|
|
vals[i] = (j&&sel.is('.widgetOutput')?sel.find('div.widgetBorder > div:first'):sel).css(type[j]+'-'+dirs[i]).toLowerCase();
|
|
|
|
if ($.browser.msie && vals[i] == 'auto') vals[i] = '0px';
|
|
$('#'+type[j]+'-'+dirs[i]).val(vals[i]);
|
|
}
|
|
|
|
$('#'+type[j]).val( reSame.test(vals.join(' '))?vals[0]:vals.join(' ') );
|
|
}
|
|
}
|
|
|
|
|
|
if($('fieldset[name=border]:visible',dlg).size() > 0){
|
|
// border
|
|
var style = [], width = [], color = [];
|
|
for(i=0; i < dirs.length; i++) {
|
|
style[i] = sel.css('border-'+dirs[i]+'-style').toLowerCase();
|
|
width[i] = sel.css('border-'+dirs[i]+'-width').toLowerCase();
|
|
color[i] = this._formatColor(sel.css('border-'+dirs[i]+'-color'));
|
|
}
|
|
if ( same_all(style) && same_all(width) && same_all(color) ) {
|
|
$('#border-style').val(style[0]);
|
|
$('#border-width').val(width[0]);
|
|
$('#border-color').val(color[0]);
|
|
} else {
|
|
dlg.find('fieldset[name=border]').addClass('visible-more');
|
|
|
|
for(i=0; i < dirs.length; i++) {
|
|
$('#border-'+dirs[i]+'-style').val( style[i] );
|
|
$('#border-'+dirs[i]+'-width').val( width[i] );
|
|
$('#border-'+dirs[i]+'-color').val( color[i] );
|
|
}
|
|
}
|
|
}
|
|
|
|
if($('fieldset[name=font]:visible',dlg).size() > 0){
|
|
//font
|
|
$('#font-family').val(sel.css('font-family'));
|
|
$('#color').val(sel.css('color'));
|
|
}
|
|
|
|
if($('fieldset[name!=background]',dlg).size() > 0){
|
|
// background
|
|
|
|
dlg.find('fieldset[name=background]').addClass('visible-more');
|
|
$('#background-color').val(this._formatColor(sel.css('background-color')));
|
|
if(sel.css('background-image')) $('#background-image').val(sel.css('background-image').replace(/url\(([^\)]*)\)/i,'$1'));
|
|
$('#background-repeat').val(sel.css('background-repeat'));
|
|
}
|
|
|
|
this.element.show();
|
|
this.overlay.show(selectedElement);
|
|
|
|
// disable hotkey
|
|
$(document).hotkey('disable');
|
|
|
|
// add esc key event
|
|
$(window).keyup( function(e) { if(e.keyCode == 27) window.FaceOff.propDialog.close(); } );
|
|
},
|
|
save : function(event) {
|
|
var val;
|
|
|
|
if (!this.target) return false;
|
|
|
|
var dlg = $('#propertyDialog');
|
|
|
|
if($('fieldset[name=margin]:visible',dlg).size() > 0){
|
|
// margins
|
|
if ($('#margin').is(':visible')) {
|
|
val = $('#margin').val();
|
|
} else {
|
|
val = this._compactValues(
|
|
$('#margin-top').val(),
|
|
$('#margin-right').val(),
|
|
$('#margin-bottom').val(),
|
|
$('#margin-left').val()
|
|
);
|
|
}
|
|
|
|
if (this.target.is('.widgetOutput')) {
|
|
this.target.css('margin', val);
|
|
|
|
val = this._expandValues( $.trim(val).split(' ') );
|
|
this.target
|
|
.attr('widget_margin_top', val[0])
|
|
.attr('widget_margin_right', val[1])
|
|
.attr('widget_margin_bottom', val[2])
|
|
.attr('widget_margin_left', val[3]);
|
|
} else {
|
|
this.target.css('margin', val);
|
|
}
|
|
}
|
|
|
|
|
|
if($('fieldset[name=padding]:visible',dlg).size() > 0){
|
|
// paddings
|
|
if ($('#padding').is(':visible')) {
|
|
val = $('#padding').val();
|
|
} else {
|
|
val = this._compactValues(
|
|
$('#padding-top').val(),
|
|
$('#padding-right').val(),
|
|
$('#padding-bottom').val(),
|
|
$('#padding-left').val()
|
|
);
|
|
}
|
|
|
|
if (this.target.is('.widgetOutput')) {
|
|
this.target.find('div.widgetBorder > div:first').attr('style','').css('padding', val);
|
|
|
|
val = this._expandValues( $.trim(val).split(' ') );
|
|
this.target
|
|
.attr('widget_padding_top', val[0])
|
|
.attr('widget_padding_right', val[1])
|
|
.attr('widget_padding_bottom', val[2])
|
|
.attr('widget_padding_left', val[3]);
|
|
} else {
|
|
this.target.css('padding', val);
|
|
}
|
|
}
|
|
|
|
|
|
if($('fieldset[name=border]:visible',dlg).size() > 0){
|
|
// border
|
|
if (this.element.find('fieldset[name=border] .inputall').is(':visible')) {
|
|
this.target.css( 'border', $('#border-width').val()+' '+$('#border-style').val()+' '+$('#border-color').val() );
|
|
} else {
|
|
|
|
this.target.css( 'border-top', $('#border-top-width').val()+' '+$('#border-top-style').val()+' '+$('#border-top-color').val() );
|
|
this.target.css( 'border-right', $('#border-right-width').val()+' '+$('#border-right-style').val()+' '+$('#border-right-color').val() );
|
|
this.target.css( 'border-bottom', $('#border-bottom-width').val()+' '+$('#border-bottom-style').val()+' '+$('#border-bottom-color').val() );
|
|
this.target.css( 'border-left', $('#border-left-width').val()+' '+$('#border-left-style').val()+' '+$('#border-left-color').val() );
|
|
}
|
|
}
|
|
|
|
// background
|
|
val = $('#background-image').val().trim();
|
|
if (val == 'none' || val == '') val = '';
|
|
if (val) val = 'url("'+val+'")';
|
|
|
|
this.target.css({
|
|
'background-color' : $('#background-color').val(),
|
|
'background-image' : val,
|
|
'background-repeat' : $('#background-repeat').val()
|
|
});
|
|
|
|
|
|
// font
|
|
this.target.css({
|
|
'font-family' : $('#font-family').val(),
|
|
'color' : $('#color').val()
|
|
});
|
|
|
|
this.target.find('a').css({
|
|
'font-family' : $('#font-family').val(),
|
|
'color' : $('#color').val()
|
|
});
|
|
|
|
|
|
if($('fieldset[name=float]:visible',dlg).size() > 0){
|
|
if(this.target.is('.widgetOutput')){
|
|
this.target.css({
|
|
'float' : $('#float').val(),
|
|
'width' : $('#width').val(),
|
|
'clear' : ''
|
|
//'height' : $('#height').val()
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
// close this dialog
|
|
this.close();
|
|
|
|
return false;
|
|
},
|
|
cancel : function() {
|
|
// close this dialog
|
|
this.close();
|
|
|
|
return false;
|
|
},
|
|
close : function() {
|
|
this.target = null;
|
|
|
|
this.element.hide();
|
|
this.overlay.hide();
|
|
|
|
// enable hotkey
|
|
$(document).hotkey('enable');
|
|
},
|
|
more : function(event) {
|
|
var block = $(event.target).parent();
|
|
var name = '';
|
|
var val = '';
|
|
var items = ['top', 'right', 'bottom', 'left'];
|
|
var reUnit = /^(\-?[0-9]+(?:%|px|em|pt)|auto)$/;
|
|
var i;
|
|
|
|
name = block.toggleClass('visible-more').attr('name');
|
|
|
|
if (block.is('.visible-more')) {
|
|
switch(name) {
|
|
case 'margin':
|
|
case 'padding':
|
|
val = $('#'+name).val();
|
|
val = $.trim(val).replace('\s{2,}', ' ').split(' ');
|
|
val = this._expandValues(val);
|
|
|
|
for(i=0; i < val.length; i++) {
|
|
if (!val[i] || !reUnit.test(val[i])) val[i] = '0px';
|
|
$('#'+name+'-'+items[i]).val(val[i]);
|
|
}
|
|
|
|
$('#'+name+'-top').focus();
|
|
break;
|
|
case 'border':
|
|
val = $('#border-width').val();
|
|
if (!val || !reUnit.test(val)) val = '0px';
|
|
|
|
for(i=0; i < items.length; i++) {
|
|
$('#border-'+items[i]+'-style').val( $('#border-style').val() );
|
|
$('#border-'+items[i]+'-width').val( val );
|
|
$('#border-'+items[i]+'-color').val( this._formatColor($('#border-color').val()) );
|
|
}
|
|
break;
|
|
}
|
|
} else {
|
|
switch(name) {
|
|
case 'margin':
|
|
case 'padding':
|
|
for(i=0; i < val.length; i++) {
|
|
if (!val[i] || !reUnit.test(val[i])) val[i] = '0px';
|
|
$('#'+name+'-'+items[i]).val(val[i]);
|
|
}
|
|
|
|
val = this._compactValues(
|
|
$('#'+name+'-top').val(),
|
|
$('#'+name+'-right').val(),
|
|
$('#'+name+'-bottom').val(),
|
|
$('#'+name+'-left').val()
|
|
);
|
|
|
|
$('#'+name).val(val).focus();
|
|
break;
|
|
case 'border':
|
|
$('#border-style').val( $('#border-top-style').val() );
|
|
$('#border-width').val( $('#border-top-width').val() );
|
|
$('#border-color').val( this._formatColor($('#border-top-color').val()) );
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
visible : function() {
|
|
return this.element.is(':visible');
|
|
},
|
|
paint : function(selectedElement) {
|
|
this.overlay.paint(selectedElement);
|
|
},
|
|
_compactValues : function(top,right,bottom,left) {
|
|
if (top == right && right == left && left == bottom) {
|
|
return top;
|
|
} else if (top == bottom && right == left) {
|
|
return top+' '+left;
|
|
} else {
|
|
return top+' '+right+' '+bottom+' '+left;
|
|
}
|
|
},
|
|
_expandValues : function(values) {
|
|
var v = values;
|
|
|
|
if (v.length == 1) return [ v[0], v[0], v[0], v[0] ];
|
|
if (v.length == 2) return [ v[0], v[1], v[0], v[1] ];
|
|
if (v.length == 3) v.push(v[1]);
|
|
|
|
return v;
|
|
},
|
|
_formatColor : function(color) {
|
|
function hex(s) {
|
|
s = parseInt(s,10).toString(16);
|
|
return s.length<2?'0'+s:s;
|
|
}
|
|
|
|
if (/rgb\(([0-9, ]+)\)/i.test(color)) {
|
|
var rgb = RegExp.$1.replace(/\s+/g, '').split(',');
|
|
|
|
return '#'+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);
|
|
}
|
|
|
|
return color;
|
|
}
|
|
};
|
|
|
|
var Overlay = {
|
|
element : null,
|
|
|
|
create : function() {
|
|
// create overlay
|
|
this.element = $('<div /><div /><div /><div />').appendTo(document.body).attr('class', 'overlay').css('opacity', 0.75);
|
|
|
|
return this;
|
|
},
|
|
toggle : function(selectedElement) {
|
|
if (this.element.is(':visible')) {
|
|
this.show(selecetedElement);
|
|
} else {
|
|
this.hide();
|
|
}
|
|
},
|
|
show : function(selectedElement) {
|
|
this.paint(selectedElement);
|
|
this.element.show();
|
|
},
|
|
hide : function() {
|
|
this.element.hide();
|
|
},
|
|
paint : function(selectedElement) {
|
|
var sel = selectedElement;
|
|
var doc = $(document);
|
|
var pos = sel.offset();
|
|
var ovr = this.element;
|
|
|
|
// top
|
|
ovr.eq(0).css({
|
|
left : 0,
|
|
top : 0,
|
|
width : '100%',
|
|
height : pos.top+'px'
|
|
});
|
|
|
|
// left
|
|
ovr.eq(1).css({
|
|
left : 0,
|
|
top : pos.top+'px',
|
|
width : pos.left+'px',
|
|
height : sel.get(0).offsetHeight+'px'
|
|
});
|
|
|
|
// right
|
|
ovr.eq(2).css({
|
|
right : 0,
|
|
top : pos.top+'px',
|
|
width : doc.width()-pos.left-sel.get(0).offsetWidth+'px',
|
|
height : sel.get(0).offsetHeight+'px'
|
|
});
|
|
|
|
// bottom
|
|
ovr.eq(3).css({
|
|
left : 0,
|
|
bottom : 0,
|
|
width : '100%',
|
|
height : doc.height()-pos.top-sel.get(0).offsetHeight+'px'
|
|
});
|
|
}
|
|
}
|
|
|
|
// bind a function as a method
|
|
function method(func, thisObj) {
|
|
return function() {
|
|
return func.apply(thisObj,arguments);
|
|
}
|
|
}
|
|
|
|
// 특정한 값이 주어진 타입에 해당하는지 확인하고 그렇지 않다면 기본값으로 대체한다.
|
|
function _enum(value, enums, defaultIndex) {
|
|
if (!$.isArray(enums) || enums.length < 1) return value;
|
|
if (typeof defaultIndex == "undefined") defaultIndex = 0;
|
|
|
|
return $.inArray(value, enums)?value:enums[defaultIndex];
|
|
}
|
|
|
|
// 클래스 문자열에서 주어진 타입에 해당하는 클래스를 추출
|
|
function findEnum(strClass, enums) {
|
|
var regex = new RegExp(' (' + enums.join('|') + ') ');
|
|
|
|
return regex.test(' ' + strClass + ' ')?RegExp.$1:'';
|
|
}
|
|
|
|
function capitalize(str) {
|
|
return str.charAt(0).toUpperCase() + str.substr(1);
|
|
}
|
|
|
|
// register objects as global
|
|
window.FaceOff = FaceOff;
|
|
window.doAddWidgetCode = function(widget_code){ FaceOff.doAddWidgetCode(widget_code) };
|
|
FaceOff.init();
|
|
|
|
});
|
|
|
|
// overriding displayMultiMedia()
|
|
window.displayMultimedia = function(src, width, height, options) {
|
|
var html = _displayMultimedia(src, width, height, options);
|
|
|
|
if (jQuery.isReady) {
|
|
|
|
} else {
|
|
document.write(html);
|
|
}
|
|
}
|
|
|
|
var selectedWidget =null;
|