www.gusucode.com > ShopEx481 & PHPWind 整合版码程序 > shopadmin/shopWidgets.js
var widgetsSet={};
var shopEffect={};
var shopWidgets;
window.onerror=function(){
return false;
}
/*shopAdmin Widgets
Extends by JS/coms/DragDropPlus.js
*/
var Widgets=DragDropPlus.extend({
options:{
handle:function(d){return $E('.drag_handle',$(d));}
},
initialize:function(drags,drops,options){
this.setOptions(options);
//to do
this.mce={};
this.ifrm=0;
if(window.quickHtml){
var insHtml = $ES('.insHtml').addEvent('click',function(e){
var btn=e.target;
var wp=$E('.shopWidgets_panel',btn.getParent());
this.htmlarea(wp);
}.bind(this));
var insWidget = $ES('.insWidget').addEvent('click',function(e){
var btn=e.target;
var wp=$E('.shopWidgets_panel',btn.getParent());
this.newWidget(wp);
}.bind(this));
}
drags.each(function(drag){
if(drag.getProperty('ishtml')){
var mce_id = drag.getProperty('widgets_id');
this.mce['svmce_'+mce_id] = new mceInstance('set_'+mce_id,{autoHeight:true});
window.quickHtml(this.mce['svmce_'+mce_id]);
}
}.bind(this));
this.addEvent('onInitDrags',function(drag,drags){
var h=$E('.widgets_handle',drag);
var b=$E('.shopWidgets_body',drag);
if($chk(h)&&$chk(b)){
drag.addEvents({
'mousemove':function(e){
b.setStyles({'border':'2px #191e75 dotted','padding':0});
h.setStyle('display','block').setOpacity(.9);
},
'mouseleave':function(e){
e=new Event(e);
if(e.relatedTarget==h)return;
b.setStyles({'border':'none','padding':2});
h.setStyle('display','none');
}
});
h.addEvent('mouseleave',function(e){
e=new Event(e);if(e.relatedTarget==b)return;
b.setStyles({'border':'none','padding':2});
h.setStyle('display','none');}
);
}
});
// this.addEvent('onInitDrops',function(drop,drops){
//drop.setStyle('border','2px dashed transparent');
// });
this.parent(drags,drops,options);
},
inject:function(widget,theme){
this.addWidget(this.curEl,widget,theme?theme:this.theme);
},
newWidget:function(el){
this.curDrop = el;
//this.curdialog = new window.top.Dialog('index.php?ctl=content/pages&act=widgets',{modal:true,width:770,height:500});
this.curdialog=new parent.Dialog('index.php?ctl=content/pages&act=widgets',{width:770,height:500,title:'增加页面版块',modal:true,resizeable:true,onShow:function(e){
this.dialog_body.id='dialogContent';
}});
},
htmlarea:function(el){
this.ifrm++;
var mceID='mce_'+this.ifrm;
var wgID='wghtml_'+this.ifrm;
var html="";
html+='<div class="shopWidgets_body" style="position: relative;padding:2px;">';
html+='<div class="widgets_handle" style="border: 1px solid rgb(204, 204, 204); padding: 1px; background: rgb(0, 6, 102) none repeat scroll 0% 0%; position: absolute; display: none; left: 3px; top: 3px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-weight: bold; font-size: 12px; color: rgb(255, 255, 255); z-index: 65535; clear: both; visibility: visible; opacity: 0.9;"">';
html+='<span class="drag_handle" style="cursor: move;">移动</span><span class="remove" onclick="shopWidgets.remove(this.parentNode.parentNode.parentNode)" style="cursor: pointer;">删除</span></div>';
html+='<div id="mce_body_{0}" ><textarea style="display:none">在此输入文本..</textarea><iframe name="mce_body_{0}_frm" style="height:70px;width:100%;" frameborder="0" allowtransparency="true" id="mce_body_{0}_frm"></iframe></div>'.format(wgID);
html+='</div></div>';
html+='<div class="resize" style="height:5px;background:#ccc;cursor:row-resize"> </div>';
new Element('div',{'class':'shopWidgets_box','id':mceID}).setProperties(
{'ishtml':'true',
'base_file':el.getProperty('base_file'),
'base_solt':el.getProperty('base_slot'),
'base_id':el.getProperty('base_id'),
'widgets_id':mceID,
'mce_id':mceID
}).set('html',html).injectBottom(el);
var iframe_resize=$E('iframe',mceID).makeResizable({
handle:$E('.resize',mceID),
limit:{
x:[$E('.shopWidgets_body',mceID).getSize().x,$E('.shopWidgets_body',mceID).getSize().x],
y:[68,400]
}
});
$E('.resize',mceID).addEvent('mouseup',iframe_resize.stop.bind(iframe_resize));
this.mce[mceID] = new mceInstance(wgID);
window.quickHtml(this.mce[mceID]);
this.drags.include($(mceID));
this.initDrags([$(mceID)]);
},
ghostDrop:function(widget,theme){
$('tempDropBox')?$('tempDropBox').empty().remove():'';
parent._showWidgets_tip('在您需要放入版块的蓝色区域点击鼠标左键即可添加版块。点击鼠标右键则取消添加版块操作。');
this.tempDropBox=new Element('div',{'id':'tempDropBox'}).inject(document.body);
this.drops.each(function(item,index){
var cis=item.getCis();
cis.height-=5;
cis.width-=5;
var dropghost=new Element('div',{'styles':cis})
.setStyles({'position':'absolute','opacity':0.5,'border':'1px #333 dotted','cursor':'pointer','background':'#66CCFF','zIndex':65535,'font-size':14,'color':'#ff0000'})
.setText('['+(index+1)+']')
.setProperty('title','点击此处，将['+widget.name+']版块添加到此区域')
.addEvent('click',function(){
this.base.tempDropBox.empty();
this.base.addWidget(this.source,widget,theme);
parent._hideWidgets_tip();
}.bind({'source':item,'base':this})).inject(this.tempDropBox);
},this);
self.document.body.addEvent('contextmenu',function(e){
e=new Event(e);
e.stop();
$('tempDropBox')?$('tempDropBox').empty().remove():'';
parent._hideWidgets_tip();
document.body.removeEvent('contextmenu',arguments.callee);
});
},
copyWidgets:function(el){
var elsource=el.source;
new Ajax('index.php?ctl=system/template&act=copyWg&p[0]='+elsource.getProperty('id')+'&p[1]='+elsource.getProperty('widgets_id'),{onComplete:function(re){
//console.info(re);
var widgets_id=Json.evaluate(re).widgetid;
elsource.setProperty('widgets_id',widgets_id);
}}).request();
elsource.setStyle('border','1px dashed #333');
},
addWidget:function(drop,widget,theme){
var dialogSetting={
modal:true,
title:'增加版块:['+widget.name+']',
ajaksable:false
};
this.curdialog=new top.Dialog('index.php?ctl=system/template&act=doAddWidgets&p[0]='+widget.name+'&p[1]='+theme,dialogSetting);
this.curDrop=drop;
},
remove:function(widget){
if(!confirm('确认移除此版块?'))return;
$(widget).remove()
this.drags.remove(widget);
},
edit:function(o,theme){
var dialogSetting={
modal:true,
title:'修改版块:['+o.title+']',
ajaksable:false
};
this.curdialog=new top.Dialog('index.php?ctl=system/template&act=editWidgets&p[0]='+o.getProperty('widgets_id')+'&p[1]='+theme,dialogSetting);
this.curWidget=$(o);
},
saveWidgets:function(){
var params=[];
var wpanels=this.drops;
var file={};
wpanels.each(function(item,index){
var widgets =$ES('.shopWidgets_box',item);
widgets.each(function(widgetbox){
params.push(("widgets[{3}]={0}:{1}:{2}").format(this.bf,this.bs,this.bi,widgetbox.getProperty('widgets_id')));
//to do
if(widgetbox.getProperty('ishtml')){
var mce_id = widgetbox.getProperty('mce_id');
params.push(('html[{0}]={1}').format(widgetbox.getProperty('widgets_id'),encodeURIComponent(this.mce[mce_id].getValue.bind(this.mce[mce_id])())));
}
},{mce:this.mce,bf:item.getProperty('base_file'),bs:item.getProperty('base_slot'),bi:item.getProperty('base_id')});
file[item.getProperty('base_file')]=1;
}.bind(this));
for(f in file){params.push(("files[]={0}").format(f));}
new Ajax('index.php?ctl=system/template&act=widgetsSave',{data:params.join('&'),method:'post',
onComplete:function(re){
try{
var re=Json.evaluate(re);
for (dom in re) {
if($chk($(dom))&&$chk(re[dom]))
$(dom).setProperty('widgets_id', re[dom]);
}
alert('保存成功!');
}catch(e){
alert(re);
}
}
}).request();
}
})
//这是模板编辑页面初始化后调用的。
var shopWidgets;
window.addEvent('domready',function(){
shopWidgets=new Widgets($$('.shopWidgets_box'),$$('.shopWidgets_panel'));
});